/* Consent bar (analytics) — ONE stylesheet for the ONE component.
   The bar is built by ui.mjs consentBar() and shown on index.html and practice.html. Until
   2026-09-27 each page carried its own copy of these rules (and index.html its own copy of the
   builder); the two had already drifted once (2026-08-15, dark slab vs light bar). Both pages
   now link this file, and public-shell.test.mjs / consent-bar.test.mjs pin that.

   Option A (owner-approved 2026-09-27, live audit P1-3): on a 390px phone the old bar was
   232px tall and started at y=613, covering the first trade tiles. It is now two lines of copy
   plus one row of two EQUAL buttons — same size, same type, same weight; "No thanks" is no
   longer a muted ghost next to a loud "yes". The longer disclosure (what is collected, where the
   data goes, the privacy link) sits behind "Details" and is unchanged in substance.
   Behaviour is untouched: nothing loads before a yes, a no is remembered, and the footer's
   "Cookie settings" reopens the bar. fitConsent() still sizes the body padding (--consent-h). */
.consent{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--paper);color:var(--ink);
  border-top:2px solid var(--ink);box-shadow:0 -4px 14px rgba(0,0,0,.07);
  padding:10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  display:flex;flex-direction:column;gap:8px;
  font-family:var(--serif);font-size:14px
}
body:has(.consent){padding-bottom:var(--consent-h,150px)}
.consent-body{min-width:0}
.consent-lead{margin:0;line-height:1.45}
/* "Details" and "Privacy" are inline in the sentence. Their vertical padding widens the tap
   target to 44px without changing the line box: padding on an inline box is hit-testable but
   does not push neighbouring lines apart, and a <button> (always inline-block) gets an equal
   negative margin so it does not either. */
.consent-more,.consent-priv{
  font:inherit;color:var(--ink);background:none;border:0;border-radius:0;margin:0;
  padding:12px 2px;min-height:0;cursor:pointer;display:inline;
  text-decoration:underline;text-underline-offset:2px;text-transform:none;letter-spacing:0
}
.consent-more{margin:-12px 0}
.consent-priv{padding:14px 2px}
.consent-more:hover,.consent-priv:hover{color:#000}
.consent-more:focus-visible,.consent-priv:focus-visible,.consent-btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.consent-expand{margin-top:8px;font-size:13px;line-height:1.5;border-top:1px solid var(--rule2);padding-top:8px;max-height:45vh;overflow:auto}
.consent-expand[hidden]{display:none}
.consent-expand p{margin:0 0 6px}
.consent-expand ul{margin:4px 0 6px;padding-left:18px}
.consent-expand li{margin-bottom:4px}
.consent-expand a{color:var(--ink);text-decoration:underline}
/* Two equal buttons: an equal-width grid, identical type, size and border weight. Only the fill
   differs (the mockup's white/ink pair), so neither choice is visually demoted. */
.consent-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.consent-btn{
  font-family:var(--serif);font-size:15px;font-weight:400;letter-spacing:0;text-transform:none;
  min-height:44px;padding:10px 12px;border-radius:var(--r);cursor:pointer;
  border:1px solid var(--ink);background:var(--paper);color:var(--ink)
}
.consent-btn.primary{background:var(--ink);color:var(--paper)}
.consent-btn:hover{background:#f2f2f2;border-color:var(--ink);color:var(--ink)}
.consent-btn.primary:hover{background:#000;border-color:#000;color:var(--paper)}
@media(min-width:760px){
  /* Desktop: copy and buttons on one row, buttons a fixed equal width. */
  .consent{flex-direction:row;align-items:center;gap:20px;padding-left:28px;padding-right:28px}
  .consent-body{flex:1}
  .consent-btns{grid-template-columns:repeat(2,160px);flex-shrink:0}
}