/* 30 Aug 2026 front-end correction pass.
   This file is deliberately small and loaded after styles.css so measured production defects can
   be corrected without broadening the redesign surface. Once the pass is complete these rules can
   be folded back into the institutional stylesheet. */

/* The served stylesheet shipped with names from older/unlanded token vocabularies. Define them as
   aliases of the existing design system as well as overriding the affected rules below. This
   closes the computed-value failure for any remaining declaration that still uses the old names. */
:root {
  --paper: var(--surface-raised);
  --line: var(--rule);
  --quiet: var(--ink-2);
  --apriq-teal: var(--teal);
}

/* Wide desktop shell. The original 1180px cap made APRIQ read like a narrow brochure on
   1440–2560px displays. Keep readable text measures inside components, but let the application
   shell, data grids, cards and navigation use the available viewport like a serious research
   product. Mobile/tablet behaviour remains unchanged. */
@media (min-width: 1200px) {
  .wrap {
    max-width: none;
    width: 100%;
    padding-left: clamp(32px, 3.5vw, 72px);
    padding-right: clamp(32px, 3.5vw, 72px);
  }
}

/* Desktop visual hierarchy. The top of APRIQ is one continuous white application canvas: header
   and hero share the same surface, and the dot field belongs to the whole hero rather than sitting
   behind a smaller white content box. Lower sections alternate white and soft neutral surfaces so
   hierarchy comes from rhythm and spacing rather than boxes inside boxes. */
@media (min-width: 1200px) {
  body { background: #FFFFFF; }
  header { background: rgba(255,255,255,.96); }
  header .wrap { height: 68px; }
  .headmenu nav { gap: 28px; }
  .find { max-width: 30rem; }

  .hero {
    padding: 84px 0 58px;
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
    background-color: #FFFFFF;
    background-image:
      radial-gradient(circle at center, rgba(14,124,121,.18) 1.25px, transparent 1.35px);
    background-size: 24px 24px;
  }
  .hero .inner {
    background: transparent;
    padding: 12px 0;
  }
  .hero h1 {
    max-width: 16ch;
    color: var(--ink);
    font-size: clamp(3.1rem, 4.5vw, 5.35rem);
    line-height: .98;
    letter-spacing: -.04em;
  }
  .hero h1 em { color: var(--teal); }
  .hero p.lede { max-width: 64ch; color: var(--ink-2); font-size: 1.16rem; }
  .hero .bigfind { max-width: 46rem; }
  .hero .bigfind input {
    min-height: 58px;
    border-color: #C9D4D5;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(11,18,32,.09);
  }
  .hero .doors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .hero .door {
    min-height: 112px;
    border-color: #D5DEDF;
    background: rgba(255,255,255,.93);
    color: var(--ink);
    box-shadow: 0 10px 28px rgba(11,18,32,.045);
  }
  .hero .door span { color: var(--ink-2); }
  .hero .door:hover {
    border-color: rgba(14,124,121,.62);
    background: #FFFFFF;
    transform: translateY(-2px);
  }
  .hero .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid rgba(11,18,32,.12);
  }
  .hero .stat { padding-right: 28px; }
  .hero .stat + .stat { padding-left: 28px; border-left: 1px solid rgba(11,18,32,.10); }
  .hero .stat .n { color: var(--ink); }
  .hero .stat .l { color: var(--ink-2); }
  .hero .truststrip { color: var(--ink-2); }
  .hero .truststrip a { color: var(--teal); }

  section { padding: 68px 0; }
  #for-you { background: #F4F6F6; }
  #pulse { background: #FFFFFF; }
  .doorway { background: #F4F6F6; }
  #places { background: #FFFFFF; }
  #more { background: #F4F6F6; }
  #method { background: #FFFFFF; }

  .door, .card, .tile {
    border-radius: 12px;
    background: var(--surface);
  }
  .door {
    position: relative;
    overflow: hidden;
    padding: 21px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
  }
  .door::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--teal), transparent 72%);
    opacity: .34;
  }
  .door:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(11,18,32,.08);
  }
  .hero .door::before { opacity: .62; }

  #for-you .doors { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #pulse .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  #pulse .card {
    min-height: 190px;
    padding: 22px;
    border-color: #D8E3E2;
    box-shadow: 0 1px 0 rgba(11,18,32,.025);
  }
  #pulse .card h4 { font-size: 1rem; }

  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 21px 20px 19px; border-color: #D8DEDF; }
  .tile .v { font-size: 1.7rem; }

  .finder { padding: 26px; border-radius: 12px; }
  .tablewrap { max-height: 720px; border-radius: 12px; }
  .panel { padding-left: 24px; padding-right: 24px; }

  .metrics.six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1500px) {
  #for-you .doors { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* Housing Balance uses the existing design system. */
#summary { background: var(--surface-raised); border-bottom-color: var(--rule); }
.geobadge { background: var(--rule); color: var(--ink); }
.state { border-color: var(--rule); border-left-color: var(--rule); }
.state .k { color: var(--ink-2); }
.state.insufficient { border-left-color: var(--rule); background: var(--surface-raised); }
#balance { border-top-color: var(--rule); }

/* Direction only — intentionally muted, never good/bad. Existing palette entries replace
   orphan hexes so the encoding is visible and governed by the system palette. */
.state.above { border-left-color: var(--series-5); }
.state.below { border-left-color: var(--series-2); }
.state.in-line { border-left-color: var(--ink-2); }

/* The operative answer should read before the apparatus. */
.answerline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 1rem 0 1.15rem;
}
.answerline .metric {
  border: 1px solid var(--rule);
  border-top: 2px solid var(--teal);
  border-radius: 4px;
  padding: .7rem .8rem;
  background: var(--surface);
}
.answerline .k {
  display: block;
  font: 600 .7rem/1.25 var(--apriq-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.answerline .v {
  display: block;
  margin-top: .22rem;
  font-size: 1.22rem;
  font-weight: 650;
  letter-spacing: -.015em;
}

details.numbers > summary {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .65rem;
  padding: .38rem .58rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface-raised);
  color: var(--ink);
  font: 600 .82rem/1.25 var(--apriq-sans);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
}
details.numbers[open] > summary { border-color: var(--teal); }
.why-source { white-space: nowrap; }

@media (max-width: 560px) {
  .answerline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}