/* AFNB Broadcast. An admin console in the Microsoft Entra grammar (left rail, breadcrumb, titled page,
   command bar, data grid), in AFNB's colors: ink teal #1A4C48, gold #E39E58 on the mark only.
   Segoe UI at 14/20, 4px controls, 8px cards, borders before shadows. Light only (DESIGN-SPEC.md). */

:root {
  --brand: #1A4C48; --brand-hover: #153F3C; --brand-pressed: #0F2E2B;
  --brand-tint: #EAF2F1; --brand-tint-2: #D5E6E3; --brand-ink: #0F3A36;
  --header: #12312E; --gold: #E39E58;
  --canvas: #F7F7F7; --surface: #FFFFFF; --surface-2: #FAFAFA; --hover: #F5F5F5; --pressed: #EBEBEB;
  --stroke: #E0E0E0; --stroke-2: #D1D1D1; --stroke-strong: #8A8A8A;
  --ink: #242424; --ink-2: #424242; --ink-3: #616161; --disabled: #A6A6A6;
  --ok: #0E700E; --ok-bg: #F1FAF1; --ok-line: #9FD89F;
  --warn: #8A3707; --warn-bg: #FFF9F5; --warn-line: #FDCFB4;
  --bad: #B10E1C; --bad-bg: #FDF3F4; --bad-line: #EEACB2;
  --info: #0F548C; --info-bg: #F5FAFE; --info-line: #B4D6FA;
  --focus: #000000;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px;
  /* Old names some pages still use. */
  --primary: var(--brand); --primary-hover: var(--brand-hover); --secondary: var(--brand-tint); --border: var(--stroke);
  --r: 4px; --r-card: 8px; --r-btn: 4px; --r-badge: 4px;
  --shadow-2: 0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow-8: 0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow-28: 0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14);
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
  --rail: 240px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); font-size: 14px; line-height: 20px; color: var(--ink); background: var(--canvas); -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-underline-offset: 2px; }
a:hover { color: var(--brand-hover); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 2px; }
.mono { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
.small { font-size: 12px; line-height: 16px; }
.muted { color: var(--ink-3); }
.nowrap { white-space: nowrap; }
.strong { font-weight: 600; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
h1 { font-size: 24px; line-height: 32px; font-weight: 600; margin: 0 0 var(--sp-2); }
h2 { font-size: 16px; line-height: 22px; font-weight: 600; margin: 0 0 var(--sp-3); }
h3 { font-size: 14px; line-height: 20px; font-weight: 600; margin: 0 0 var(--sp-2); }

/* ---------- Buttons (Fluent) ---------- */
.btn, .btn-ms { display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
  min-height: 32px; padding: 0 var(--sp-3); border-radius: var(--r); border: 1px solid var(--brand); background: var(--brand);
  color: #fff; font: 600 14px/20px var(--font); text-decoration: none; cursor: pointer; transition: background-color 100ms ease-out; }
.btn:hover, .btn-ms:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: #fff; }
.btn:active, .btn-ms:active { background: var(--brand-pressed); }
.btn.secondary { background: var(--surface); border-color: var(--stroke-2); color: var(--ink); }
.btn.secondary:hover { background: var(--hover); border-color: #C7C7C7; color: var(--ink); }
.btn.secondary:active { background: var(--pressed); }
.btn.danger { background: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: #960B18; border-color: #960B18; }
.btn.large { min-height: 40px; padding: 0 var(--sp-4); font-size: 15px; }
.btn.small { min-height: 24px; padding: 0 var(--sp-2); font-size: 12px; font-weight: 400; }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn[disabled], .btn-ms[aria-disabled="true"], .btn.blocked { background: #F0F0F0; border-color: var(--stroke); color: var(--disabled); cursor: not-allowed; }
.btn.blocked { pointer-events: none; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; cursor: pointer; text-decoration: none; }
.linkbtn:hover { text-decoration: underline; }
.linkbtn.danger { color: var(--bad); }

/* ---------- Message bars ---------- */
/* Block, not flex: a sentence with a link in it must flow as one line of text. The icon sits in the left padding. */
.notice { position: relative; display: block; border-radius: var(--r); padding: var(--sp-2) var(--sp-3) var(--sp-2) 36px; margin: 0 0 var(--sp-4);
  border: 1px solid var(--stroke); background: var(--surface-2); color: var(--ink); font-size: 14px; }
.notice::before { content: ""; position: absolute; left: var(--sp-3); top: 10px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-3)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4.5v.5M8 7v4.5' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.notice.ok { background: var(--ok-bg); border-color: var(--ok-line); }
.notice.ok::before { background-color: var(--ok); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.8 8.2l2.1 2.1 4.3-4.6' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.notice.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.notice.warn::before { background-color: #DA3B01; }
.notice.alert { background: var(--bad-bg); border-color: var(--bad-line); color: var(--ink); }
.notice.alert::before { background-color: var(--bad); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.6 5.6l4.8 4.8M10.4 5.6l-4.8 4.8' stroke='white' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.notice.info { background: var(--info-bg); border-color: var(--info-line); }
.notice.info::before { background-color: var(--info); }
.notice > :last-child { margin-bottom: 0; }
.notice .inline { display: inline; margin-left: var(--sp-2); }

/* ---------- App shell: header, left rail, page ---------- */
/* The rail column is painted by the grid itself, so it runs the full height of a long page. */
.shell { min-height: 100vh; background: linear-gradient(to right, var(--surface) calc(var(--rail) - 1px), var(--stroke) calc(var(--rail) - 1px), var(--stroke) var(--rail), var(--canvas) var(--rail)); display: grid; grid-template-rows: 48px 1fr; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-areas: "top top" "rail main"; }
.topbar { grid-area: top; position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: var(--sp-4); height: 48px;
  padding: 0 var(--sp-4) 0 0; background: var(--header); color: #fff; }
.topbar a { color: #fff; }
.brandbox { display: flex; align-items: center; gap: var(--sp-3); width: var(--rail); padding-left: var(--sp-4); height: 100%; text-decoration: none; flex: none; }
.brandbox img { width: 24px; height: 24px; }
.brandbox .app { font-size: 15px; font-weight: 600; letter-spacing: -.1px; }
.tenant { font-size: 13px; color: rgba(255,255,255,.72); padding-left: var(--sp-4); border-left: 1px solid rgba(255,255,255,.22); white-space: nowrap; }
.topsearch { flex: 1; display: flex; justify-content: center; }
.topsearch form { position: relative; width: min(480px, 100%); }
.topsearch input { width: 100%; height: 32px; border-radius: var(--r); border: 1px solid transparent; background: rgba(255,255,255,.12);
  color: #fff; padding: 0 var(--sp-3) 0 34px; font: 400 14px var(--font); }
.topsearch input::placeholder { color: rgba(255,255,255,.7); }
.topsearch input:focus { background: #fff; color: var(--ink); outline: none; border-color: #fff; }
.topsearch input:focus::placeholder { color: var(--ink-3); }
.topsearch svg { position: absolute; left: 10px; top: 8px; width: 16px; height: 16px; color: rgba(255,255,255,.8); pointer-events: none; }
.topsearch input:focus + svg { color: var(--ink-3); }
.env { font-size: 12px; line-height: 20px; padding: 0 var(--sp-2); border-radius: var(--r); border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.9); white-space: nowrap; }
.me { position: relative; }
.me summary { list-style: none; display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; height: 48px; padding: 0 var(--sp-2); }
.me summary::-webkit-details-marker { display: none; }
.me summary:hover { background: rgba(255,255,255,.08); }
.me .who { display: grid; text-align: right; line-height: 16px; }
.me .who b { font-weight: 600; font-size: 13px; }
.me .who span { font-size: 12px; color: rgba(255,255,255,.72); }
.avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: var(--header); font-weight: 700; font-size: 13px; flex: none; }
.me .menu { position: absolute; right: 0; top: 48px; width: 320px; background: var(--surface); color: var(--ink); border-radius: var(--r-card); box-shadow: var(--shadow-28); padding: var(--sp-4); z-index: 40; }
.me .menu .row { display: flex; gap: var(--sp-3); align-items: center; margin-bottom: var(--sp-4); }
.me .menu .avatar { width: 48px; height: 48px; font-size: 16px; }
.me .menu dl { margin: 0 0 var(--sp-4); display: grid; grid-template-columns: auto 1fr; gap: var(--sp-1) var(--sp-3); font-size: 13px; }
.me .menu dt { color: var(--ink-3); } .me .menu dd { margin: 0; word-break: break-all; }
.me .menu a.btn { color: var(--ink); width: 100%; }
.navbtn { display: none; }

.rail { grid-area: rail; position: sticky; top: 48px; height: calc(100vh - 48px); overflow-y: auto; background: var(--surface); border-right: 1px solid var(--stroke); padding: var(--sp-2) 0 var(--sp-6); }
.rail .sect { font-size: 12px; font-weight: 600; color: var(--ink-3); padding: var(--sp-4) var(--sp-4) var(--sp-1); }
.rail a { position: relative; display: flex; align-items: center; gap: var(--sp-3); height: 36px; margin: 0 var(--sp-2); padding: 0 var(--sp-3);
  border-radius: var(--r); color: var(--ink-2); text-decoration: none; font-size: 14px; }
.rail a svg { width: 20px; height: 20px; flex: none; color: var(--ink-3); }
.rail a:hover { background: var(--hover); color: var(--ink); }
.rail a[aria-current="page"] { background: var(--brand-tint); color: var(--brand-ink); font-weight: 600; }
.rail a[aria-current="page"] svg { color: var(--brand); }
.rail a[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--brand); }
.rail .foot { margin: var(--sp-6) var(--sp-4) 0; padding-top: var(--sp-4); border-top: 1px solid var(--stroke); font-size: 12px; line-height: 16px; color: var(--ink-3); }

.content { grid-area: main; min-width: 0; padding: var(--sp-4) var(--sp-8) var(--sp-12); max-width: 1600px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--ink-3); margin: 0 0 var(--sp-3); }
.crumbs a { color: var(--brand); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .sep { color: var(--ink-3); }
/* Page title: an icon tile beside the h1, set per page from data-page on <main>. */
.content > h1 { display: flex; align-items: center; gap: var(--sp-3); font-size: 24px; line-height: 32px; margin-bottom: var(--sp-1); }
.content > h1::before { content: ""; flex: none; width: 36px; height: 36px; border-radius: 6px; background: var(--brand-tint) var(--icon, none) center/20px no-repeat; border: 1px solid var(--brand-tint-2); }
.content > .lede, .lede { color: var(--ink-3); margin: 0 0 var(--sp-5); max-width: 920px; }
.content > h1 + .lede { padding-left: 48px; }
.crumb { margin: 0 0 var(--sp-2); font-size: 12px; }

/* Command bar: the row of actions under a page title. */
.cmdbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); padding: var(--sp-1) 0; margin: 0 0 var(--sp-4); border-bottom: 1px solid var(--stroke); }
.cmd { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--sp-2); border-radius: var(--r); border: 0; background: none;
  color: var(--ink); font: 400 14px var(--font); text-decoration: none; cursor: pointer; }
.cmd svg { width: 18px; height: 18px; color: var(--brand); }
.cmd:hover { background: var(--hover); color: var(--ink); }
.cmdbar .grow { flex: 1; }

/* Pivots (tabs inside a page). */
.pivots { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--stroke); margin: 0 0 var(--sp-4); overflow-x: auto; }
.pivots a { position: relative; padding: var(--sp-2) var(--sp-3) var(--sp-3); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.pivots a:hover { color: var(--ink); background: var(--hover); border-radius: var(--r) var(--r) 0 0; }
.pivots a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.pivots a[aria-current="page"]::after { content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px; height: 3px; border-radius: 2px; background: var(--brand); }

/* ---------- Cards, grids, tiles ---------- */
.panel { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-2); margin-bottom: var(--sp-4); }
.panel > h2:first-child, .panel-head h2 { margin-top: 0; }
.panel.flush { padding: 0; overflow: hidden; }
.panel.flush > h2, .panel.flush > .panel-head { padding: var(--sp-4) var(--sp-6) 0; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-3); }
.panel-head h2 { margin: 0; }
.panel-head a { font-size: 13px; }
.cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.cols > .panel { margin-bottom: 0; }
.cols + .panel, .cols + .cols { margin-top: var(--sp-4); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin-bottom: var(--sp-4); }
.tiles.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles > .panel { margin: 0; padding: var(--sp-4) var(--sp-5); }
.tile .k, .preview .k { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: var(--sp-2); }
.tile .v { font-size: 28px; line-height: 36px; font-weight: 600; font-family: var(--font); font-variant-numeric: tabular-nums; }
.tile .s { font-size: 12px; line-height: 16px; color: var(--ink-3); margin-top: var(--sp-1); }
/* Essentials: Entra's two-column key/value block. */
.essentials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-8); margin: 0; }
.essentials div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-3); padding: 6px 0; border-bottom: 1px solid #F0F0F0; }
.essentials dt { color: var(--ink-3); }
.essentials dd { margin: 0; word-break: break-word; }
.links, .status { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.links li { display: grid; gap: 2px; }
.links a { word-break: break-all; }
.status li { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--disabled); flex: none; }
.dot.ok { background: #13A10E; } .dot.bad { background: var(--bad); } .dot.warn { background: #DA3B01; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--sp-2); height: 20px; border-radius: 10px; font-size: 12px; line-height: 20px;
  background: #F0F0F0; color: var(--ink-2); white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.badge.ok { background: var(--ok-bg); color: var(--ok); }
.badge.bad { background: var(--bad-bg); color: var(--bad); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.info { background: var(--info-bg); color: var(--info); }
.badge.plain::before { display: none; }
.quick { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.quick a { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2); border-radius: var(--r); text-decoration: none; color: var(--ink); }
.quick a:hover { background: var(--hover); }
.quick svg { width: 20px; height: 20px; color: var(--brand); flex: none; }
.quick span { display: grid; } .quick small { color: var(--ink-3); font-size: 12px; }

/* Data grid */
table.log { width: 100%; border-collapse: collapse; font-size: 14px; }
table.log th { text-align: left; font-weight: 600; color: var(--ink); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--stroke-2); white-space: nowrap; background: var(--surface); }
table.log td { padding: 10px var(--sp-3); border-bottom: 1px solid #F0F0F0; vertical-align: top; }
table.log tbody tr:hover td { background: var(--surface-2); }
table.log tr:last-child td { border-bottom: none; }
table.log th:first-child, table.log td:first-child { padding-left: 0; }
.panel.flush table.log th:first-child, .panel.flush table.log td:first-child { padding-left: var(--sp-6); }
table.log .clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.log .num { text-align: right; font-variant-numeric: tabular-nums; }
.gridwrap { overflow-x: auto; }
.empty { color: var(--ink-3); padding: var(--sp-4) 0; margin: 0; }
.count { color: var(--ink-3); font-size: 13px; margin: 0 0 var(--sp-2); }
.panel.flush > .count, .panel.flush > .empty { padding-top: var(--sp-4); }

/* ---------- Forms ---------- */
.form { display: grid; gap: var(--sp-4); }
.form label { display: grid; gap: var(--sp-1); font-weight: 600; font-size: 14px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .form textarea, .filter input, .filter select, .tablefilter, .picker input[type=search] {
  width: 100%; min-height: 32px; border-radius: var(--r); border: 1px solid var(--stroke-2); border-bottom-color: var(--stroke-strong);
  background: var(--surface); padding: 5px var(--sp-3); font: 400 14px/20px var(--font); color: var(--ink); }
.form input:focus, .form select:focus, .form textarea:focus, .filter input:focus, .filter select:focus, .tablefilter:focus, .picker input:focus {
  outline: none; border-bottom: 2px solid var(--brand); padding-bottom: 4px; }
.form textarea { resize: vertical; line-height: 22px; padding: var(--sp-2) var(--sp-3); }
.form input[type=file] { font: inherit; }
.form .check { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 400; color: var(--ink-2); }
.form .check input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.form hr { border: 0; border-top: 1px solid var(--stroke); margin: var(--sp-2) 0; width: 100%; }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
.radios { border: 0; padding: 0; margin: 0; display: grid; gap: var(--sp-1); }
.radios legend { font-weight: 600; font-size: 14px; margin-bottom: var(--sp-1); padding: 0; }
.radios label, .form .radios label { display: flex; gap: var(--sp-2); align-items: center; font-weight: 400; }
.addone .fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.groupsel { border: 0; padding: 0; margin: 0; max-width: 560px; }
.groupsel legend { font-weight: 600; font-size: 14px; margin-bottom: var(--sp-2); padding: 0; }
.form .groupsel label { display: flex; gap: var(--sp-2); align-items: center; font-weight: 400; }
.filter { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); flex-wrap: wrap; align-items: center; }
.filter input { flex: 1; min-width: 220px; width: auto; }
.filter select { width: auto; }
.filter .btn { flex: none; }
.tablefilter { max-width: 360px; margin-bottom: var(--sp-3); }
tr[hidden] { display: none; }

/* ---------- Door pages: AFNB's lock-screen image fills the whole window, like the Windows lock screen ---------- */
/* Cover-scaled and anchored left / 35% down, so the logo baked into the image (x 4.8-43.7%, y 28.7-37.2%)
   is never cropped on a landscape screen. --iw/--ih are the image's rendered size; the card tracks the logo. */
.door-page {
  --iw: max(100vw, calc(100vh * 1672 / 941));
  --ih: calc(var(--iw) * 941 / 1672);
  position: relative; min-height: 100vh; background: #F3E3CF; font-size: 16px; line-height: 24px;
}
.door-page .stage { position: static; }
.door-page .photo { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 35%; }
.door {
  position: absolute;
  left: calc(var(--iw) * 0.048);
  top: calc(var(--ih) * 0.372 - (var(--ih) - 100vh) * 0.35 + 24px);
  width: min(440px, calc(100vw - var(--iw) * 0.048 - 24px));
  padding-bottom: 24px;
}
/* The sign-up form runs wide, so the whole form fits under the logo without scrolling. */
.door.wide { width: min(880px, calc(100vw - var(--iw) * 0.048 - 24px)); top: calc(var(--ih) * 0.372 - (var(--ih) - 100vh) * 0.35 + 16px); padding-bottom: 0; }
.door.wide .card p { margin-bottom: var(--sp-4); }
@media (max-height: 800px) {
  .door.wide .card { padding: var(--sp-4) var(--sp-6); }
  .door.wide .card h1 { margin-bottom: 0; }
  .door.wide .card p, .door.wide .notice { margin-bottom: var(--sp-2); }
}
.door.wide .form { gap: var(--sp-4); }
.door.wide .check span { font-size: 14px; line-height: 20px; }
.door .form input:not([type=checkbox]):not([type=radio]), .door .form select { min-height: 40px; font-size: 16px; }
.door .notice { font-size: 14px; }
.actions { display: flex; align-items: center; gap: var(--sp-6); flex-wrap: wrap; }
.card .actions .help { margin: 0; }
.card { width: 100%; background: rgba(255,255,255,.97); border: 1px solid rgba(0,0,0,.06); border-radius: var(--r-card); box-shadow: var(--shadow-28); padding: var(--sp-8) var(--sp-8) var(--sp-6); }
.card h1 { margin-bottom: var(--sp-1); font-size: 24px; line-height: 32px; }
.card p { color: var(--ink-2); margin: 0 0 var(--sp-4); }
.card .help { font-size: 13px; line-height: 18px; color: var(--ink-3); margin: var(--sp-4) 0 0; }
.lockup { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; color: inherit; }
.lockup img { width: 28px; height: 28px; }
.lockup .name { font-size: 16px; font-weight: 600; }
.card .lockup { margin-bottom: var(--sp-5); color: var(--brand); }
.btn-ms { width: 100%; min-height: 40px; font-size: 15px; gap: var(--sp-3); }
.card .btn { min-height: 40px; }
.ms-logo { display: grid; grid-template-columns: 9px 9px; gap: 2px; }
.ms-logo i { display: block; width: 9px; height: 9px; }
.ms-logo i:nth-child(1) { background: #F25022; } .ms-logo i:nth-child(2) { background: #7FBA00; }
.ms-logo i:nth-child(3) { background: #00A4EF; } .ms-logo i:nth-child(4) { background: #FFB900; }

/* ---------- Compose ---------- */
.compose { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.compose > .panel { margin-bottom: 0; }
.editor { display: grid; gap: var(--sp-4); align-content: start; }
.editor > .panel { margin-bottom: 0; }
.steps { list-style: none; display: flex; gap: 0; padding: 0; margin: 0 0 var(--sp-5); flex-wrap: wrap; color: var(--ink-3); font-size: 14px; }
.steps li { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-6); position: relative; }
.steps li + li::before { content: ""; width: 32px; height: 1px; background: var(--stroke-2); margin-right: var(--sp-2); }
.steps span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--stroke-2); background: var(--surface); font-size: 12px; font-weight: 600; }
.steps li.now { color: var(--ink); font-weight: 600; }
.steps li.now span { background: var(--brand); border-color: var(--brand); color: #fff; }
.steps li.done { color: var(--ink-2); }
.steps li.done span { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand); font-size: 0; }
.steps li.done span::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(-45deg) translate(1px, -1px); }
.stepnum { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; margin-right: var(--sp-2); vertical-align: 1px; }
.phi { margin: 0; color: var(--warn); font-weight: 600; }
.fields-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); padding: 6px var(--sp-2); border: 1px solid var(--stroke-2); border-bottom: 0; border-radius: var(--r) var(--r) 0 0; background: var(--surface-2); }
.fields-bar .lbl { font-size: 12px; color: var(--ink-3); margin-right: var(--sp-1); }
.fields-bar button { height: 24px; padding: 0 var(--sp-2); border-radius: 12px; border: 1px solid var(--brand-tint-2); background: var(--brand-tint); color: var(--brand-ink); font: 400 12px var(--font); cursor: pointer; }
.fields-bar button:hover { background: var(--brand-tint-2); }
.fields-bar button code { font-family: var(--mono); font-size: 11px; color: var(--ink-3); margin-left: 4px; }
.fields-bar + textarea, .msgfield .fields-bar ~ textarea { border-top-left-radius: 0; border-top-right-radius: 0; }
.msgfield { display: grid; gap: var(--sp-1); }
.msgfield > .lbl { font-weight: 600; }
.msgfield textarea { width: 100%; }
.personal { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); background: var(--info-bg); border: 1px solid var(--info-line); font-size: 13px; }
.personal[hidden] { display: none; }
.personal ul { margin: var(--sp-1) 0 0; padding-left: 18px; }
.bubble { background: #E9E9EB; color: #000; border-radius: 18px; padding: 8px 12px; font-size: 15px; line-height: 20px; word-wrap: break-word;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif; }
.bubble .bt { white-space: pre-wrap; }
.bubble img { display: block; max-width: 100%; border-radius: 12px; margin-bottom: var(--sp-2); }
.preview { align-self: start; }
.preview .bubble { max-width: 320px; }
.preview .for { font-size: 12px; color: var(--ink-3); margin: 0 0 var(--sp-2); }
@media (min-width: 1100px) { .compose .preview { position: sticky; top: 64px; } }
.compose + .panel { margin-top: var(--sp-4); }
.facts { margin: var(--sp-4) 0 var(--sp-2); display: grid; gap: 0; }
.facts div { display: flex; justify-content: space-between; gap: var(--sp-3); border-bottom: 1px solid #F0F0F0; padding: 6px 0; }
.facts dt { color: var(--ink-3); }
.facts dd { margin: 0; text-align: right; }
.facts.big dd { font-size: 14px; }
.sendbox { margin-top: var(--sp-4); border-left: 4px solid var(--stroke); }
.sendbox.ready { border-left-color: var(--bad); }
.sendbox .stale { color: var(--warn); font-weight: 600; }
.progress { font-size: 20px; line-height: 28px; font-weight: 600; margin: 0 0 var(--sp-3); }
.picker { display: grid; gap: var(--sp-2); }
.picker.off { opacity: .5; }
.picklist { max-height: 220px; overflow-y: auto; border: 1px solid var(--stroke-2); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); display: grid; gap: 2px; background: var(--surface); }
.form .picklist label { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; min-height: 28px; }
.form .picklist label .small { margin-left: auto; }
.picklist [hidden] { display: none; }
.imginfo { margin: var(--sp-2) 0 0; }
.template-row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.tpl-load { display: flex; gap: var(--sp-2); align-items: center; }
.tpl-load select { min-height: 32px; border: 1px solid var(--stroke-2); border-radius: var(--r); padding: 0 var(--sp-2); font: 400 14px var(--font); max-width: 260px; background: var(--surface); }
.imagebox .label { font-weight: 600; margin-bottom: var(--sp-2); }
.filebtn { position: relative; overflow: hidden; }
.filebtn input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.save-tpl { display: flex; gap: var(--sp-2); flex-wrap: wrap; border-top: 1px solid var(--stroke); padding-top: var(--sp-4); }
.form .save-tpl input { flex: 1; min-width: 220px; width: auto; }
.saved { margin: 0; }
.testrow { display: flex; gap: var(--sp-3); align-items: end; flex-wrap: wrap; }
.testrow label { flex: 1; min-width: 220px; }
.sendstep .btn { margin-top: var(--sp-1); }
.tip { margin: var(--sp-3) 0 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); background: var(--warn-bg); border: 1px solid var(--warn-line); font-size: 13px; }
.pricing { margin-top: var(--sp-3); font-size: 13px; color: var(--ink-2); }
.pricing summary { cursor: pointer; color: var(--brand); font-weight: 600; }
.inline { display: inline; }
/* Review: a plain phone frame (proportions only) beside the facts and the typed confirm. */
.review { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.phone { border: 1px solid var(--stroke-2); border-radius: 28px; background: #fff; box-shadow: var(--shadow-8); overflow: hidden; }
.phone-top { padding: var(--sp-3); text-align: center; border-bottom: 1px solid #F0F0F0; color: var(--ink-2); }
.phone-body { padding: var(--sp-4); min-height: 320px; }
.phone .bubble { max-width: 300px; }
.phone-foot { padding: var(--sp-2) var(--sp-4) var(--sp-3); font-size: 12px; color: var(--ink-3); border-top: 1px solid #F0F0F0; }
.confirm { margin-top: var(--sp-4); max-width: 440px; padding: var(--sp-4); border: 1px solid var(--bad-line); border-radius: var(--r-card); background: var(--bad-bg); }
.confirm label { font-weight: 400; }

/* ---------- Responsive ---------- */
@media (min-width: 1100px) { .compose { grid-template-columns: minmax(0, 1fr) 380px; } }
@media (max-width: 1279px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .essentials { grid-template-columns: 1fr; } }
@media (max-width: 1023px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; background: var(--canvas); }
  .brandbox { width: auto; padding-left: 0; }
  .navbtn { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; cursor: pointer; color: #fff; }
  .navbtn svg { width: 20px; height: 20px; }
  .rail { display: none; position: fixed; top: 48px; left: 0; bottom: 0; height: auto; width: 280px; z-index: 25; box-shadow: var(--shadow-28); }
  #navtoggle:checked ~ .rail { display: block; }
  #navtoggle:checked ~ .scrim { display: block; }
  .scrim { display: none; position: fixed; inset: 48px 0 0 0; background: rgba(0,0,0,.4); z-index: 20; }
  .content { padding: var(--sp-4) var(--sp-6) var(--sp-12); }
  .addone .fields { grid-template-columns: 1fr 1fr; }
  .tenant, .env { display: none; }
}
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } .phone { max-width: 360px; } .cols { grid-template-columns: 1fr; } }
/* Phones and portrait screens: a cover crop would cut the logo off, so the photo sits on top, whole, card below. */
@media (max-width: 900px), (max-aspect-ratio: 4/3) {
  .door-page { display: block; }
  .door-page .photo { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-position: center; }
  /* Positioned so the card paints over the photo it overlaps (a static block paints under an image). */
  .door, .door.wide { position: relative; z-index: 1; left: 0; top: 0; width: auto; padding: 0 var(--sp-4) var(--sp-12); margin-top: calc(-1 * var(--sp-6)); }
  .card { padding: var(--sp-6); }
}
@media (max-width: 767px) {
  .topsearch, .me .who { display: none; }
  .topbar { justify-content: space-between; }
  .content { padding: var(--sp-3) var(--sp-4) var(--sp-12); }
  .content > h1 { font-size: 20px; line-height: 28px; }
  .content > h1::before { width: 32px; height: 32px; }
  .content > h1 + .lede { padding-left: 0; }
  .tiles, .tiles.three { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .tile .v { font-size: 22px; line-height: 28px; }
  .addone .fields, .form .two { grid-template-columns: 1fr; }
  .essentials div { grid-template-columns: 120px minmax(0, 1fr); }
  .panel { padding: var(--sp-4); }
  .panel.flush > h2, .panel.flush > .panel-head { padding: var(--sp-4) var(--sp-4) 0; }
  .filter select { width: 100%; }
  .steps li { padding-right: var(--sp-3); }
  .steps li + li::before { width: 12px; }
  table.log thead { display: none; }
  table.log, table.log tbody, table.log tr, table.log td { display: block; width: 100%; }
  table.log tr { padding: var(--sp-2) 0; border-bottom: 1px solid var(--stroke); }
  .panel.flush table.log tr { padding: var(--sp-2) var(--sp-4); }
  table.log td, .panel.flush table.log td:first-child { border: 0; padding: 2px 0; }
  table.log .clip { max-width: none; white-space: normal; }
  table.log .num { text-align: left; }
  .me .menu { position: fixed; left: var(--sp-2); right: var(--sp-2); width: auto; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Page icons (title tiles) ---------- */
[data-page] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3 9.5 10 3.5l7 6V17H12v-5H8v5H3z'/%3E%3C/svg%3E"); }
[data-page="compose"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 4.5h13v9h-8l-4 3v-3h-1z'/%3E%3Cpath d='M7 8h6M7 10.5h4'/%3E%3C/svg%3E"); }
[data-page="history"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M10 6v4l2.5 2'/%3E%3C/svg%3E"); }
[data-page="contacts"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Cpath d='M2.5 17c.5-3 2.8-4.5 5.5-4.5s5 1.5 5.5 4.5'/%3E%3Ccircle cx='14.5' cy='7.5' r='2.2'/%3E%3Cpath d='M14.5 12.3c1.8.1 3 1.3 3.4 3.5'/%3E%3C/svg%3E"); }
[data-page="groups"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Crect x='3' y='3' width='6' height='6' rx='1'/%3E%3Crect x='11' y='3' width='6' height='6' rx='1'/%3E%3Crect x='3' y='11' width='6' height='6' rx='1'/%3E%3Crect x='11' y='11' width='6' height='6' rx='1'/%3E%3C/svg%3E"); }
[data-page="optouts"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M5 15 15 5'/%3E%3C/svg%3E"); }
[data-page^="audit"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 2.5 16 5v4.5c0 3.8-2.6 6.6-6 8-3.4-1.4-6-4.2-6-8V5z'/%3E%3Cpath d='M7.2 10l2 2 3.8-4'/%3E%3C/svg%3E"); }
.inset { padding-left: var(--sp-6); padding-right: var(--sp-6); }
@media (max-width: 767px) { .inset { padding-left: var(--sp-4); padding-right: var(--sp-4); } }
.progress.mono { font-family: var(--font); font-size: 20px; }
/* Phones: 44px touch targets (Entra's 32px density is for a mouse). */
@media (max-width: 767px) {
  .btn, .cmd, .rail a, .fields-bar button { min-height: 44px; }
  .form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .filter input, .filter select, .tablefilter, .picker input[type=search] { min-height: 44px; font-size: 16px; }
  .fields-bar button { border-radius: 22px; padding: 0 var(--sp-3); }
  .linkbtn { min-height: 44px; }
}
@media (max-width: 767px) { .steps { gap: var(--sp-2) var(--sp-4); } .steps li + li::before { display: none; } .steps li { padding-right: 0; } }

/* ---------- 2026-11-06: campaigns, administration, legal pages, sign-up disclosure ---------- */
[data-page="campaigns"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M3.5 8v4h3l6 3.5v-11L6.5 8z'/%3E%3Cpath d='M6.5 12l1 4h2l-1-3.6'/%3E%3Cpath d='M15.5 8.5a2.5 2.5 0 0 1 0 3'/%3E%3C/svg%3E"); }
[data-page="admins"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='8' cy='7' r='3'/%3E%3Cpath d='M2.5 17c.5-3 2.8-4.5 5.5-4.5 1.2 0 2.3.3 3.2.8'/%3E%3Cpath d='M15 11.5v6M12 14.5h6'/%3E%3C/svg%3E"); }
[data-page="provider"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='2.5'/%3E%3Cpath d='M10 2.5v2.2M10 15.3v2.2M2.5 10h2.2M15.3 10h2.2M4.7 4.7l1.6 1.6M13.7 13.7l1.6 1.6M4.7 15.3l1.6-1.6M13.7 6.3l1.6-1.6'/%3E%3C/svg%3E"); }
[data-page="help"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231A4C48' stroke-width='1.5' stroke-linejoin='round' stroke-linecap='round'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M8 8a2 2 0 1 1 2.8 1.8c-.5.2-.8.7-.8 1.2v.5'/%3E%3Cpath d='M10 14v.01'/%3E%3C/svg%3E"); }
.me .menu > a.small { display: block; margin-bottom: var(--sp-3); }

/* Campaigns */
.newcamp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) minmax(0, 1.2fr) auto; gap: var(--sp-4); align-items: end; }
.campaignrow { display: grid; gap: var(--sp-1); }
.campaignrow > .lbl { font-weight: 600; font-size: 14px; }
.campaignrow p { margin: 0; }
.campaignpick { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.form .campaignpick select { width: auto; flex: 1 1 240px; min-width: 0; }
.form .campaignpick input { width: auto; flex: 1 1 240px; min-width: 0; }
.campaignpick .or { flex: none; }

/* Administration */
.stopnote { font-size: 14px; }
.stopnote strong { display: block; margin-bottom: 2px; }
.secret { letter-spacing: .04em; }
.danger-zone details > summary { cursor: pointer; display: flex; gap: var(--sp-3); align-items: baseline; flex-wrap: wrap; list-style: none; }
.danger-zone details > summary::-webkit-details-marker { display: none; }
.danger-zone details > summary::before { content: "›"; display: inline-block; width: 12px; color: var(--ink-3); transition: transform .15s; }
.danger-zone details[open] > summary::before { transform: rotate(90deg); }
.changeform { display: grid; gap: var(--sp-4); margin-top: var(--sp-4); max-width: 880px; padding: var(--sp-4); border: 1px solid var(--bad-line); border-radius: var(--r-card); background: var(--bad-bg); }
.changeform .muted { margin: 0; }
.form .changeform .confirmword { max-width: 200px; text-transform: none; }
.invite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--sp-4); align-items: end; margin-bottom: var(--sp-4); }
.doclist { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3) var(--sp-3); display: grid; gap: var(--sp-1); }
.doclist a { display: flex; gap: var(--sp-3); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: var(--r); color: var(--ink); text-decoration: none; }
.doclist a:hover { background: var(--hover); }
.doclist svg { width: 24px; height: 24px; color: var(--brand); flex: none; }
.doclist span { display: grid; } .doclist small { color: var(--ink-3); font-size: 12px; }

/* Sign-up card: eyebrow, steps, the legal disclosure */
.eyebrow { margin: 0 0 var(--sp-1); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }
.card .eyebrow { color: var(--brand); margin-bottom: var(--sp-1); }
.joinsteps { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-5); padding: 0 0 var(--sp-4); border-bottom: 1px solid var(--stroke); font-size: 13px; line-height: 20px; color: var(--ink-3); }
.joinsteps li { display: flex; align-items: center; gap: var(--sp-2); }
.joinsteps span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--stroke-2); font-size: 11px; font-weight: 600; background: var(--surface); }
.joinsteps li[aria-current="step"] { color: var(--ink); font-weight: 600; }
.joinsteps li[aria-current="step"] span { background: var(--brand); border-color: var(--brand); color: #fff; }
.disclosure { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--stroke-2); border-left: 3px solid var(--brand); border-radius: var(--r); background: var(--surface-2); }
.door.wide .disclosure .check span, .disclosure .check span { font-size: 12.5px; line-height: 18px; color: var(--ink-2); }
.disclosure a { color: var(--brand); font-weight: 600; }
.card .legalfoot { margin: var(--sp-5) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--stroke); font-size: 12px; line-height: 16px; color: var(--ink-3); }

/* Legal pages and the administrator agreement */
.docpage { min-height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.docbar { background: var(--surface); border-top: 4px solid var(--brand); border-bottom: 1px solid var(--stroke); }
.docbar-in, .docfoot-in { max-width: 880px; margin: 0 auto; padding: var(--sp-4) var(--sp-6); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.docbrand img { display: block; width: 220px; height: auto; }
.docbar-tag { font-size: 13px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.docmain { flex: 1; width: 100%; max-width: 880px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-12); }
.legaldoc { background: var(--surface); border: 1px solid var(--stroke); border-radius: var(--r-card); box-shadow: var(--shadow-2); padding: var(--sp-8) var(--sp-8) var(--sp-6); font-size: 15px; line-height: 24px; color: var(--ink-2); }
.legaldoc h1 { font-size: 28px; line-height: 36px; color: var(--ink); margin: 0 0 var(--sp-1); }
.legaldoc h2 { font-size: 16px; line-height: 24px; color: var(--ink); margin: var(--sp-6) 0 var(--sp-1); }
.legaldoc p { margin: 0 0 var(--sp-3); max-width: 720px; }
.legaldoc .legalmeta { color: var(--ink-3); font-size: 13px; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--stroke); margin-bottom: var(--sp-4); max-width: none; }
.legaldoc .legallead { font-size: 16px; color: var(--ink); }
.legaldoc .legalnote { margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--stroke); font-size: 14px; }
.docfoot { border-top: 1px solid var(--stroke); background: var(--surface); }
.docfoot-in { display: block; font-size: 12px; line-height: 18px; color: var(--ink-3); }
.docfoot-in p { margin: 0; }
.accept { margin-top: var(--sp-6); padding: var(--sp-5); border: 1px solid var(--brand-tint-2); border-radius: var(--r-card); background: var(--brand-tint); display: grid; gap: var(--sp-3); }
.accept p { margin: 0; }
.acceptbox { display: flex; gap: var(--sp-2); align-items: flex-start; font-weight: 600; color: var(--ink); font-size: 15px; }
.acceptbox input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.acceptbtns { display: flex; gap: var(--sp-3); flex-wrap: wrap; }

@media (max-width: 1023px) { .newcamp, .invite { grid-template-columns: 1fr 1fr; } }
@media (max-width: 767px) {
  .newcamp, .invite { grid-template-columns: 1fr; }
  .docbar-in, .docfoot-in { padding: var(--sp-3) var(--sp-4); }
  .docbrand img { width: 168px; }
  .docbar-tag { font-size: 12px; text-align: right; }
  .docmain { padding: var(--sp-4) var(--sp-3) var(--sp-8); }
  .legaldoc { padding: var(--sp-5) var(--sp-4); font-size: 15px; }
  .legaldoc h1 { font-size: 22px; line-height: 30px; }
  .acceptbtns .btn { flex: 1 1 100%; min-height: 44px; }
  .joinsteps { gap: var(--sp-2) var(--sp-3); font-size: 12px; }
}
/* Done steps: the number is hidden and the check is centred over it (as two grid items they stacked, check below). */
.steps li.done span { position: relative; }
.steps li.done span::after { position: absolute; left: 50%; top: 50%; margin: -4px 0 0 -5px; transform: rotate(-45deg); }
/* Phones: every tap target 44px (door-page buttons and disclosure toggles were 40 and 20). */
@media (max-width: 767px) {
  .card .btn, .card .btn-ms { min-height: 44px; }
  .pricing summary, .danger-zone details > summary { min-height: 44px; display: flex; align-items: center; }
}
/* Command-bar actions that change something are POST buttons, styled exactly like the link commands. */
button.cmd { font: inherit; color: inherit; cursor: pointer; }
.cmdbar form.inline { display: inline-flex; margin: 0; }