/* reach.armagi.co: page-specific rules on top of base.css */
.sectors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.sector { padding: 14px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.sector b { display: block; font-size: 16px; }
.sector span { font-size: 14px; color: var(--ink-2); }

#dims .x { font-family: var(--mono); font-size: 12px; opacity: .75; }
.vers { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-top: 14px; }
.vers > div { padding: 20px 22px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.vers .v-count { background: #0f1d3d; border-color: #0f1d3d; color: #e6ebf5; }
.vers .v-count .tag { color: var(--gold-soft); }
.vers .v-way.ag { background: var(--gold-bg); border-color: var(--gold-line); }
.vers p { margin: 6px 0 0; font-size: 17px; }
.vers .tag { color: var(--muted); }

.same { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.same .panel { margin-top: 0; }
.same .tag { color: var(--muted); }
.same b { display: block; font-size: 19px; margin-top: 4px; }
.same ul { margin: 10px 0 0; padding-left: 18px; color: var(--ink-2); }
.same li { margin-top: 4px; }
.small-link { display: inline-block; margin-top: 10px; padding: 10px 0; font-weight: 600; color: var(--navy); }

.ups { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.up { display: grid; grid-template-columns: 3em 12em minmax(0, 1fr) 7em; gap: 14px; align-items: baseline; margin-left: calc(var(--i) * 4%); padding: 14px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.up:first-child { background: #0f1d3d; border-color: #0f1d3d; color: #e6ebf5; }
.up:first-child p { color: #a4b0c8; }
.up .n { font-family: var(--mono); font-size: 12px; color: var(--gold-ink); }
.up:first-child .n, .up:first-child .risk { color: var(--gold-soft); }
.up b { font-size: 16.5px; }
.up p { margin: 0; font-size: 15px; color: var(--ink-2); }
.up .risk { font-family: var(--mono); font-size: 12px; color: var(--green); text-align: right; }

@media (max-width: 860px) {
  .sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vers, .same { grid-template-columns: minmax(0, 1fr); }
  .up { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-left: 0; }
  .up .risk { text-align: left; }
}