/*  Scorecard page styles (ported 2026-06-06 from old BaseLayout to reskin).
    Mirrors calculator-page.css conventions: light surface, teal wayfinding
    accent, station headers + cards. The Vue ScorecardForm island has its
    own scoped styles; this file overrides where the form needs to read on
    the cream/paper background instead of the old dark surface. */

  /* TRUST STRIP — three small cards under the hero */
  .trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:0;}
  .trust-card{padding:20px 22px;background:var(--bg-elevated);border:1px solid var(--border);border-left:3px solid var(--teal-500);}
  .trust-card .eyebrow{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px;}
  .trust-card p{font-size:14.5px;line-height:1.55;color:var(--fg-muted);margin:0;}

  /* FORM RAIL — host the Vue island in a cream "card" so it reads cleanly */
  .form-rail{background:var(--bg-elevated);border:1px solid var(--border);padding:clamp(28px,4vw,56px) clamp(24px,5vw,64px);margin-top:32px;}

  /* Vue form override: the .sc__dot uses dark-mode tokens by default.
     Re-tint for the light surface so contrast + hover states are correct. */
  .form-rail .sc__q-num{color:var(--teal-700);}
  .form-rail .sc__q-title{color:var(--ink);}
  .form-rail .sc__anchors{color:var(--fg-muted);}
  .form-rail .sc__dot{
    background:var(--paper);
    border:1px solid var(--border-strong, var(--border));
    color:var(--fg-muted);
  }
  .form-rail .sc__dot:hover{
    border-color:var(--teal-500);
    color:var(--ink);
    background:var(--teal-50, #E6F1F0);
  }
  .form-rail .sc__dot--active{
    background:var(--teal-600);
    border-color:var(--teal-600);
    color:#fff;
  }

  /* Result card on submission */
  .form-rail .sc__result{background:var(--paper);border:1px solid var(--border);}

  /* METHODOLOGY — four band cards */
  .method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:32px;}
  .method-card{padding:20px 22px;background:var(--bg-elevated);border:1px solid var(--border);}
  .method-card dt{
    display:flex;align-items:center;gap:14px;
    font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
    color:var(--fg);
  }
  .method-card dd{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--fg-muted);}
  .method-band{
    display:inline-flex;align-items:center;
    font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
    padding:4px 10px;border-radius:999px;border:1px solid currentColor;
  }
  .method-range{font-family:var(--font-mono);color:var(--fg-subtle);}
  .method-card--acute    .method-band{color:var(--t-600);}
  .method-card--acute{border-left:3px solid var(--t-600);}
  .method-card--strained .method-band{color:var(--amber-600);}
  .method-card--strained{border-left:3px solid var(--amber-600);}
  .method-card--mixed    .method-band{color:var(--fg-muted);}
  .method-card--mixed{border-left:3px solid var(--fg-muted);}
  .method-card--healthy  .method-band{color:var(--success, #15803D);}
  .method-card--healthy{border-left:3px solid var(--success, #15803D);}

  .method-note{
    margin-top:24px;max-width:72ch;
    font-size:15px;line-height:1.6;color:var(--fg-muted);
  }
  .method-note a{color:var(--teal-700);text-decoration:underline;text-underline-offset:3px;}

  @media(max-width:860px){
    .trust-grid{grid-template-columns:1fr;}
    .method-grid{grid-template-columns:1fr;}
    .form-rail{padding:24px 18px;}
  }