/* == Reset, base type, and shared utilities ================================ *
 * Mirrors darwin-policy-wizard/public/index.html lines 50–57, plus the focus
 * and skip-link rules from lines 76–78.
 * ========================================================================== */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
/* Sticky footer: the loader screen is shorter than the viewport, so without
 * this the footer floats in the middle of the page and every content change
 * moves it. main takes the slack instead. */
body{font:400 14px/1.55 var(--font-body);color:var(--text-body);background:var(--bg-canvas);
  min-height:100vh;display:flex;flex-direction:column}
body > main{flex:1 0 auto}
body > .footer{flex:none}
button{font-family:var(--font-body);cursor:pointer}
input,select,textarea{font-family:var(--font-body)}
h1,h2,h3{font-family:var(--font-title)}
a{color:var(--text-link)}

/* The ONE uppercase micro-label. The prototype had this treatment in eight
 * distinct roles, at which point it stops signaling hierarchy and reads as a
 * template tic. Everything that needs an eyebrow uses this class. */
.overline{font:600 11px/1.2 var(--font-body);text-transform:uppercase;letter-spacing:.08em;color:var(--gray-500)}

/* Keyboard focus is VISIBLE. The prototype set outline:none in three places and
 * replaced it for exactly two inputs, leaving every button, card, bubble, and
 * tab with no focus indicator at all. */
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}

.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:var(--white);color:var(--text-title);
  padding:10px 16px;border-radius:0 0 var(--radius-xl) 0;box-shadow:var(--shadow-focus);
  font:600 14px/1 var(--font-body);text-decoration:none}
.skip-link:focus{left:0}

/* Screen-reader-only text, for labels that must exist without being drawn. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Inline SVG icon defaults. Replaces the prototype's emoji-as-iconography
 * (globe, recycling symbol, wrench), which screen readers announce literally. */
.icon{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.icon-lg{width:20px;height:20px}

[hidden]{display:none !important}

/* == Utilities ============================================================= *
 * These exist because this app's CSP is `style-src 'self'` with no
 * 'unsafe-inline' — so inline style="" attributes are blocked (CSP3 routes
 * style attributes through style-src-attr, which falls back to style-src).
 * darwin-policy-wizard allows 'unsafe-inline' and uses inline styles freely;
 * this app cannot, so anything positional lives here instead.
 * ========================================================================== */
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
.fieldset-plain{border:0}
.lead-text{max-width:var(--measure-prose);color:var(--text-subtitle)}
.u-mt-2{margin-top:var(--space-2)}
.u-mt-8{margin-top:var(--space-8)}
.u-mb-6{margin-bottom:var(--space-6)}