/* Fareham Musical Society — ported from the reference prototype.

   The prototype loaded its three typefaces from fonts.googleapis.com. Serving them from a third
   party discloses every visitor's IP address to that third party on each page load, which the
   Society has no basis for and cannot control, so they are self-hosted instead. The files were
   fetched once, at development time, and are served from this application — no visitor's browser
   ever contacts Google.

   All three are licensed under the SIL Open Font License 1.1, which permits this. The licence text
   is shipped alongside the fonts in wwwroot/fonts, as the licence requires.

   These @font-face rules are generated from Google's own CSS response, so the unicode-ranges match
   the subsets that were actually downloaded. latin-ext is included because member names carry
   accents. See docs/self-hosted-fonts.md. */

@font-face{
  font-family:"Big Shoulders Display";
  src:url("fonts/BigShouldersDisplay-latin-ext.woff2") format("woff2");
  font-weight:500 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Big Shoulders Display";
  src:url("fonts/BigShouldersDisplay-latin.woff2") format("woff2");
  font-weight:500 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Karla";
  src:url("fonts/Karla-Italic-latin-ext.woff2") format("woff2");
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Karla";
  src:url("fonts/Karla-Italic-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"Karla";
  src:url("fonts/Karla-latin-ext.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Karla";
  src:url("fonts/Karla-latin.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-400-latin-ext.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-400-latin.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-500-latin-ext.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("fonts/IBMPlexMono-500-latin.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --stage:#17143A; --stage-2:#120F2E; --ink:#1A1730;
  --pink:#E8467C; --amber:#F6C25C; --teal:#1FA79A; --lilac:#9B8CF0;
  --paper:#F4F2F7; --white:#fff; --slate:#6B667F; --line:#DFDAEA;

  /* Text-safe variants of the two brand colours.
     The prototype's pink and teal are lovely but fail WCAG AA as small text on white: measured at
     3.75:1 and 2.98:1 against the 4.5:1 requirement, and the pink was also the background of every
     primary button with white text on it. These darkened versions measure 4.97:1 and 5.32:1.
     Use --pink / --teal for anything decorative — rules, pin dots, the focus ring, borders — where
     only the 3:1 non-text threshold applies, and these two wherever text is involved. */
  --pink-ink:#C13A67; --teal-ink:#16786F;
  /* Self-hosted face first, then fallbacks for the moment before it loads, or if it fails to.
     Haettenschweiler and Impact were the original fallbacks and both are far more compressed than
     Big Shoulders Display, which made every heading look squashed. Arial Narrow is condensed in the
     same spirit without the extreme compression. */
  --display:"Big Shoulders Display","Arial Narrow","Liberation Sans Narrow","Helvetica Neue Condensed",
            "Helvetica Neue",Arial,sans-serif;
  --body:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"Cascadia Mono","SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;
  --wrap:1080px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;line-height:.95;margin:0}
h1{font-size:clamp(42px,8.4vw,80px);text-transform:uppercase}
h2{font-size:clamp(28px,4.4vw,42px);text-transform:uppercase}
h3{font-size:22px;text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 14px}
a{color:var(--pink-ink)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:2px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* WCAG 2.4.1. The header is sticky and the nav comes before the content on every page, so without this
   a keyboard user tabs through the whole nav before reaching anything. Hidden until focused. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--pink-ink);color:#fff;
  padding:12px 18px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none}
.skip-link:focus{left:0}

/* header */
.head{position:sticky;top:0;z-index:40;background:var(--stage);color:#fff;border-bottom:1px solid rgba(255,255,255,.14)}
.head-in{max-width:var(--wrap);margin:0 auto;padding:10px 20px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.mark{display:flex;align-items:baseline;gap:10px;margin-right:auto;text-decoration:none}
.mark b{font-family:var(--display);font-weight:800;font-size:26px;text-transform:uppercase;color:#fff}
.mark span{color:var(--amber)}
.mark em{font-family:var(--mono);font-style:normal;font-size:10.5px;letter-spacing:.14em;color:rgba(255,255,255,.55);text-transform:uppercase}
nav{display:flex;gap:2px;overflow-x:auto;max-width:100%}
nav a{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;background:none;border:0;color:rgba(255,255,255,.68);padding:9px 11px;cursor:pointer;white-space:nowrap;border-bottom:2px solid transparent;text-decoration:none}
nav a:hover{color:#fff}
nav a[aria-current="page"]{color:#fff;border-bottom-color:var(--pink)}
nav a.is-admin{color:var(--amber)}
.who-bar{display:flex;align-items:center;gap:10px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)}
.who-bar .nm{font-family:var(--mono);font-size:11px;letter-spacing:.07em;color:#fff;text-transform:uppercase}
.who-bar .sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:rgba(255,255,255,.5);text-transform:uppercase;display:block}
.who-bar form{margin:0}
.mini{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);color:#fff;padding:7px 11px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block}
.mini:hover{background:rgba(255,255,255,.18)}

/* board */
.stage-panel{background:
    radial-gradient(115% 85% at 18% -10%, rgba(232,70,124,.30), transparent 62%),
    radial-gradient(95% 80% at 88% 4%, rgba(246,194,92,.20), transparent 60%),
    linear-gradient(var(--stage),var(--stage-2));
  color:#fff;padding:46px 0 62px;overflow:hidden}
.board-head{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px}
.board-head h1{color:#fff;max-width:15ch}
.board-head h1 i{font-style:normal;color:var(--amber)}
.kicker{color:rgba(255,255,255,.55);margin-bottom:12px}
.next{border-left:2px solid var(--pink);padding-left:16px;min-width:250px;max-width:330px}
.next .lbl{color:var(--pink);margin-bottom:8px}
.next .when{font-family:var(--display);font-weight:700;font-size:34px;text-transform:uppercase;line-height:1}
.next .time{font-family:var(--mono);font-size:14px;color:var(--amber);margin-top:6px}
.next .meta{font-size:14.5px;color:rgba(255,255,255,.72);margin-top:8px}
.next.quiet{border-left-color:var(--amber)}
.next.quiet .lbl{color:var(--amber)}

.pins{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:20px}
.pin{position:relative;background:var(--white);color:var(--ink);border-radius:3px;padding:22px 20px 18px;
  box-shadow:0 14px 34px rgba(9,6,28,.42);transform:rotate(-.5deg);transition:transform .22s ease,box-shadow .22s ease}
.pin:nth-child(even){transform:rotate(.6deg)}
.pin:nth-child(3n){transform:rotate(-.9deg)}
.pin:hover{transform:rotate(0) translateY(-4px);box-shadow:0 20px 40px rgba(9,6,28,.5)}
.pin::before{content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;border-radius:50%;
  background:var(--amber);box-shadow:0 3px 6px rgba(0,0,0,.4), inset 0 -3px 4px rgba(0,0,0,.22)}
.pin.adults::before{background:var(--pink)}
.pin.youth::before{background:var(--teal)}
.pin.members::before{background:var(--lilac)}
.pin .tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.pin h3{margin:8px 0 8px;font-size:21px}
.pin p{font-size:15px;margin:0;color:#3A3550}
.empty-board{background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.32);border-radius:4px;padding:30px;text-align:center;grid-column:1/-1}
.empty-board p{color:rgba(255,255,255,.75);margin:0 0 4px}

/* doors */
.doors{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.door{padding:44px 30px;background:var(--white);border:0;border-right:1px solid var(--line);cursor:pointer;text-align:left;width:100%;font:inherit;color:inherit;transition:background .2s;text-decoration:none;display:block}
.door:last-child{border-right:0}
.door:hover{background:#FBFAFD}
.door .rule{height:4px;width:52px;background:var(--pink);margin-bottom:18px}
.door.y .rule{background:var(--teal)}
.door h2{margin-bottom:10px}
.door p{color:var(--slate);font-size:15.5px;max-width:34ch}
.door .go{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--pink-ink)}
.door.y .go{color:var(--teal-ink)}
.door .go.locked{color:var(--slate)}

/* pages */
.page{padding:44px 0 70px}
.page-head{margin-bottom:30px}

/* Every page needs one h1, but only the board wants the full display size. These carry h1 semantics at
   the size the prototype used for its section headings, so the document outline is right without the
   layout changing. */
.page-head h1,.gate h1,.signin h1,.admin .wrap > .row h1{font-size:clamp(28px,4.4vw,42px)}
.page-head .eyebrow{color:var(--slate);margin-bottom:10px}
.lede{font-size:19px;max-width:56ch;color:#3A3550}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:34px;align-items:start}
.card{background:var(--white);border:1px solid var(--line);border-radius:4px;padding:22px}
.card + .card{margin-top:18px}
.card h3{margin-bottom:12px}
.accent-bar{height:4px;background:var(--pink);margin-bottom:26px;max-width:120px}
.accent-bar.teal{background:var(--teal)}

.calls{border-top:1px solid var(--line)}
.call{display:grid;grid-template-columns:104px 1fr auto;gap:18px;padding:16px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.call .d{font-family:var(--mono);font-size:13px;line-height:1.4}
.call .d b{display:block;font-weight:500}
.call .d span{color:var(--slate)}
.call .t{font-family:var(--display);font-weight:700;font-size:21px;text-transform:uppercase}
.call .v{font-size:14.5px;color:var(--slate)}
.call .who{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:#EFEBF7;border-radius:999px;padding:5px 10px;white-space:nowrap}
.call.past{opacity:.45}
.call.youth .who{background:#E1F4F1}

ul.plain{margin:0;padding-left:20px}
ul.plain li{margin-bottom:7px;font-size:15.5px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:15px}
.kv dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);padding-top:4px}
.kv dd{margin:0}

.show-strip{background:var(--stage);color:#fff;border-radius:4px;padding:26px 24px}
.show-strip .mono{color:var(--amber)}
.show-strip h3{font-size:30px;margin:8px 0 6px;color:#fff}
.show-strip p{color:rgba(255,255,255,.75);font-size:15px;margin:0}
.show-strip.y{background:#0E3F3A}
.show-strip.y .mono{color:#8FE0D5}

.family{border:1px solid var(--line);border-radius:4px;background:var(--white);padding:22px}
.kid{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.kid:last-of-type{border-bottom:0}
.kid b{font-size:16px}
.kid .st{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid}
.st.ok{color:#0E6C60;border-color:#9BD8D0;background:#EAF7F5}
.st.no{color:#8A5A00;border-color:#EBD2A0;background:#FDF6E7}
.st.neutral{color:#4A4470;border-color:#CFC8E4;background:#F1EDF9}

/* gate */
.gate{max-width:520px;margin:8vh auto;text-align:center}
.gate .lock{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.gate h2{margin-bottom:12px}
.gate p{color:var(--slate)}

/* sign in */
.signin{max-width:440px;margin:6vh auto 0}
.accounts{max-width:640px;margin:34px auto 0}
.acct{display:flex;justify-content:space-between;gap:14px;align-items:center;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:4px;padding:16px 18px;margin-bottom:10px;cursor:pointer;font:inherit;color:inherit;text-decoration:none}
.acct:hover{border-color:var(--pink)}
.acct b{display:block;font-size:16.5px}
.acct span{font-size:14px;color:var(--slate)}
.acct .tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.tagchip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;white-space:nowrap}
.tagchip.a{background:#FCE7EF;color:#A81B52}
.tagchip.y{background:#E1F4F1;color:#0E6C60}
.tagchip.c{background:#FDF3DE;color:#8A5A00}
.tagchip.t{background:#EFEBF7;color:#4A4470}
.err{background:#FDECF2;border:1px solid #F3B9CE;color:#9C1D48;border-radius:3px;padding:11px 13px;font-size:14.5px;margin-bottom:14px}
.ok-note{background:#EAF7F5;border:1px solid #9BD8D0;color:#0E6C60;border-radius:3px;padding:11px 13px;font-size:14.5px;margin-bottom:14px}

label.f{display:block;margin-bottom:14px}
label.f span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);display:block;margin-bottom:6px}
input,select,textarea{width:100%;font:inherit;font-size:15px;padding:10px 12px;border-radius:3px;background:var(--white);border:1px solid var(--line);color:var(--ink)}
textarea{min-height:78px;resize:vertical}
.btn{font-family:var(--mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;background:var(--pink-ink);color:#fff;border:0;padding:12px 18px;border-radius:3px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)}
.btn.sm{padding:7px 11px;font-size:10.5px}

/* admin */
.admin{background:#0E0C22;color:#fff;min-height:78vh;padding:38px 0 70px}
.admin h1,.admin h2,.admin h3{color:#fff}
.admin .panel{background:#171532;border:1px solid #2A2750;border-radius:4px;padding:22px}
.admin .panel + .panel{margin-top:16px}
.admin .mono{color:#9C97C4}
.admin label.f span{color:#9C97C4}
.admin input,.admin select,.admin textarea{background:#0E0C22;border-color:#34305F;color:#fff}
.admin .btn.ghost{border-color:#3A3670;color:#CFCBE8}
.admin a{color:#8FE0D5}
.btn.danger{background:transparent;border:1px solid #6A2340;color:#F095B4;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:7px 11px;border-radius:3px;cursor:pointer}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin:26px 0 20px;border-bottom:1px solid #2A2750}
.tabs button{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;color:#9C97C4;padding:10px 12px;cursor:pointer}
.tabs button[aria-selected="true"]{color:#fff;border-bottom-color:var(--amber)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:12px}
.stat{background:#171532;border:1px solid #2A2750;border-radius:4px;padding:16px}
.stat b{display:block;font-family:var(--display);font-weight:700;font-size:38px;line-height:1}
.stat span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C97C4}
.stat.warn b{color:var(--amber)}
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#9C97C4;text-align:left;padding:8px 10px;border-bottom:1px solid #2A2750}
td{padding:10px;border-bottom:1px solid #221F44;vertical-align:middle}
/* WCAG 2.2 SC 2.5.8 asks for a 24px minimum target. These chips are buttons in the committee tables,
   and at 10px text with 4px padding they were about 20px tall. Padding alone would change the look, so
   the height is met with min-height and centring instead. */
.chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid;background:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:24px}
.chip.ok{color:#8FE0D5;border-color:#2A6F66}
.chip.due{color:#F6C25C;border-color:#6E5726}
.chip.off{color:#7E7AB1;border-color:#332F5C}
.chip.alert{color:#F095B4;border-color:#6A2340}
button.chip{cursor:pointer}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.list-item{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid #221F44}
.list-item .body{flex:1}
.list-item h4{margin:0 0 4px;font-family:var(--body);font-size:16px;font-weight:700}
.list-item p{margin:0;font-size:14.5px;color:#B9B4D8}

/* data protection pages */
.dp-table{width:100%;border-collapse:collapse;font-size:14.5px;background:var(--white);border:1px solid var(--line)}
.dp-table th{color:var(--slate);border-bottom:1px solid var(--line);background:#FBFAFD}
.dp-table td{border-bottom:1px solid var(--line);color:#3A3550;vertical-align:top}
.dp-table tr:last-child td{border-bottom:0}
.scroll-x{overflow-x:auto;max-width:100%}
.badge-special{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:#FDECF2;color:#9C1D48;border:1px solid #F3B9CE;border-radius:999px;padding:3px 7px;white-space:nowrap}
.badge-consent{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;background:#EAF7F5;color:#0E6C60;border:1px solid #9BD8D0;border-radius:999px;padding:3px 7px;white-space:nowrap}
.consent-row{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.consent-row:last-child{border-bottom:0}
.consent-row .what{flex:1;min-width:240px}
.consent-row .what b{display:block;font-size:16px}
.consent-row .what span{font-size:14px;color:var(--slate)}
.verdict{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.verdict:last-child{border-bottom:0}
.verdict .mark-yes{color:#0E6C60;font-weight:700}
.verdict .mark-no{color:#8A5A00;font-weight:700}
.verdict .body b{display:block}
.verdict .body span{font-size:14.5px;color:var(--slate)}
pre.export{background:#0E0C22;color:#CFCBE8;padding:18px;border-radius:4px;overflow-x:auto;font-family:var(--mono);font-size:12.5px;line-height:1.5;max-height:520px}
.notice-strip{background:#FDF6E7;border:1px solid #EBD2A0;color:#6B4E00;border-radius:4px;padding:14px 16px;font-size:14.5px;margin-bottom:22px}
.notice-strip b{display:block;margin-bottom:4px}

footer{background:var(--stage);color:rgba(255,255,255,.7);padding:34px 0}
footer .fin{display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;font-size:14.5px}
footer b{color:#fff;font-family:var(--display);font-size:22px;text-transform:uppercase;display:block;margin-bottom:6px}
footer a{color:rgba(255,255,255,.7)}
.note{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:rgba(255,255,255,.48);margin-top:18px;text-transform:uppercase}

.rise{animation:rise .5s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1}}

@media (max-width:860px){
  .cols,.doors,.grid2{grid-template-columns:1fr}
  .door{border-right:0;border-bottom:1px solid var(--line)}
  .call{grid-template-columns:1fr;gap:6px}
  .call .who{justify-self:start}
  .head-in{padding:8px 16px}
  .mark em{display:none}
  .who-bar{border-left:0;padding-left:0}
  .acct{flex-direction:column;align-items:flex-start}
  .acct .tags{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}