/* Curtain's default look (apps/web/app/globals.css), on a page with no build step. Text colours keep 4.5:1. */
:root{
  --brand:#8C2B3C; --page:#FBF7F1; --surface:#FFFFFF; --ink:#1E1A2E; --ink-2:#4B4560; --ink-3:#655F78;
  --surface-2:color-mix(in srgb, var(--page) 93%, var(--ink)); --line:color-mix(in srgb, var(--page) 86%, var(--ink));
  --accent:var(--brand); --accent-ink:#FFFFFF; --accent-soft:color-mix(in srgb, var(--brand) 11%, var(--page));
  --warn:#8A5A06; --warn-soft:#FAF0D8; --bad:#B3321F; --bad-soft:color-mix(in srgb, #B3321F 9%, var(--page)); --good:#196B50;
  --radius:12px; --shadow:0 1px 2px rgba(30,26,46,.05), 0 6px 20px rgba(30,26,46,.06);
  --display:"Fraunces","Iowan Old Style",Georgia,serif; --body:"IBM Plex Sans","Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root{ --page:#16131E; --surface:#201C2B; --surface-2:#2A2537; --ink:#F3EEE6; --ink-2:#CFC8D8; --ink-3:#B0A9BC; --line:#3A3448;
    --accent:color-mix(in srgb, var(--brand) 36%, #FFE9EC); --accent-ink:#1E1A2E; --accent-soft:color-mix(in srgb, var(--brand) 30%, var(--page));
    --warn:#E8B24A; --warn-soft:#3A2F14; --bad:#F08A76; --bad-soft:#3A1F1A; --good:#5CC8A4; --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.28); }
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--page); color:var(--ink); font:16px/1.55 var(--body); }
.top{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; padding:16px max(16px, calc((var(--room, 100vw) - 680px) / 2)); border-bottom:1px solid var(--line); }
.wordmark{ display:inline-flex; align-items:center; gap:10px; font:600 22px/1.2 var(--display); color:var(--accent); align-self:center; }
.wordmark .mark{ width:32px; height:32px; border-radius:8px; flex:none; }
.top-note{ align-self:center; flex:1 1 200px; }   /* the note wraps before the header's buttons do */
.top-note{ color:var(--ink-3); font-size:14px; }
.wrap{ width:100%; max-width:680px; margin:0 auto; padding:28px 16px 64px; outline:none; }
h1{ font:600 clamp(28px, 6vw, 38px)/1.15 var(--display); margin:0 0 12px; letter-spacing:-.01em; outline:none; }
h2{ font:600 18px/1.3 var(--body); margin:0 0 8px; }
p{ margin:0 0 14px; }
.lead{ font-size:18px; color:var(--ink-2); }
.muted{ color:var(--ink-3); font-size:14px; }
.why{ overflow-wrap:anywhere; }
a{ color:var(--accent); text-underline-offset:2px; }
ol.pills{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0 0 22px; padding:0; }
ol.pills li{ padding:3px 11px; border-radius:999px; font-size:13px; color:var(--ink-3); background:var(--surface-2); }
ol.pills li.on{ background:var(--accent); color:var(--accent-ink); font-weight:600; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin:0 0 16px; }
.panel > :last-child{ margin-bottom:0; }
ul.plain{ margin:0 0 14px; padding-left:20px; } ul.plain li{ margin-bottom:6px; }
.row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:18px 0 16px; }
button,.btn{ appearance:none; display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 20px; border-radius:999px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); font:600 15px/1.2 var(--body); cursor:pointer; text-decoration:none; }
button.secondary,.btn.secondary{ background:transparent; color:var(--accent); }
button.danger{ background:var(--bad); border-color:var(--bad); color:#fff; }
@media (prefers-color-scheme: dark){ button.danger{ color:#1E1A2E; } }
button:disabled{ opacity:.55; cursor:not-allowed; }
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
h1:focus-visible{ outline:none; } /* a new screen moves focus here for screen readers: nothing to press */
.field{ margin-bottom:16px; }
.field label,.field legend{ display:block; font-weight:600; margin-bottom:5px; padding:0; }
.field input[type=text],.field input[type=email],.field input[type=password]{ width:100%; min-height:44px; padding:8px 12px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--ink-3); border-radius:8px; }
.field .hint{ display:block; margin-top:5px; color:var(--ink-3); font-size:14px; }
fieldset.field{ border:0; margin:0 0 16px; padding:0; }
label.choice{ display:flex; gap:10px; align-items:flex-start; padding:10px 12px; margin-bottom:8px; min-height:44px; border:1px solid var(--line); border-radius:8px; font-weight:400; cursor:pointer; }
label.choice input{ margin-top:5px; flex:none; width:18px; height:18px; accent-color:var(--accent); }
label.choice strong{ display:block; }
.note{ padding:12px 14px; border-radius:8px; background:var(--warn-soft); color:var(--ink); border-left:4px solid var(--warn); margin:0 0 16px; }
.error{ padding:12px 14px; border-radius:8px; background:var(--bad-soft); color:var(--ink); border-left:4px solid var(--bad); margin:0 0 16px; overflow-wrap:anywhere; }
.error strong{ display:block; margin-bottom:4px; }
dl.review{ display:grid; grid-template-columns:minmax(0,auto) minmax(0,1fr); gap:6px 16px; margin:0 0 4px; }
dl.review dt{ color:var(--ink-3); } dl.review dd{ margin:0; overflow-wrap:anywhere; font-weight:600; }
ol.work{ list-style:none; margin:0; padding:0; }
ol.work li{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
ol.work li:last-child{ border-bottom:0; }
ol.work .state{ font-size:13px; font-weight:600; white-space:nowrap; color:var(--ink-3); }
ol.work li.done .state{ color:var(--good); } ol.work li.on .state{ color:var(--accent); } ol.work li.failed .state{ color:var(--bad); }
ol.work li.on .what{ font-weight:600; } ol.work li.todo .what{ color:var(--ink-3); }
details{ margin-top:14px; } summary{ cursor:pointer; min-height:32px; color:var(--ink-2); }
pre.log{ margin:8px 0 0; padding:12px; max-height:320px; overflow:auto; background:var(--surface-2); border-radius:8px; font:12.5px/1.5 var(--mono); white-space:pre-wrap; overflow-wrap:anywhere; }
.record{ background:var(--surface-2); padding:12px 14px; border-radius:8px; margin:0 0 12px; }
.found{ padding:12px 0; border-top:1px solid var(--line); } .found:first-child{ border-top:0; padding-top:0; } .found p{ margin:0 0 8px; overflow-wrap:anywhere; }
/* the last screen's parts, as tabs (showDone in app.js): one row that scrolls sideways before it would wrap */
.tabs{ display:flex; gap:2px; margin:6px 0 18px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tabs button.tab{ flex:none; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; margin-bottom:-1px; border:0; border-bottom:3px solid transparent; border-radius:0; background:transparent; color:var(--ink-2); font:600 15px/1.2 var(--body); cursor:pointer; }
.tabs button.tab:hover{ color:var(--ink); background:var(--surface-2); }
.tabs button.tab[aria-selected="true"]{ color:var(--accent); border-bottom-color:var(--accent); }
.tabs button.tab:focus-visible{ outline:2px solid var(--accent); outline-offset:-4px; }
.tab-badge{ padding:1px 8px; border-radius:999px; background:var(--accent); color:var(--accent-ink); font-size:12px; font-weight:600; }
/* a phone: all four in view, none to be found by swiping */
@media (max-width:480px){ .tabs button.tab{ padding:0 8px; gap:6px; font-size:14px; } .tab-badge{ padding:1px 6px; } }
/* the narrowest phones: a second row, rather than a tab out of sight */
@media (max-width:359px){ .tabs{ flex-wrap:wrap; overflow-x:visible; } }
[role="tabpanel"]{ outline:none; }
[role="tabpanel"]:focus-visible{ outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--radius); }
/* what only the organisation can do: its own DNS */
.yours{ padding:14px 16px 2px; border-radius:8px; background:var(--warn-soft); border-left:4px solid var(--warn); margin:0 0 16px; }
.yours[hidden]{ display:none; }
.yours h2{ margin-top:0; } .yours .record{ background:var(--surface); }
.record dd{ font-family:var(--mono); }
#banner:not(:empty){ background:var(--warn-soft); border-bottom:1px solid var(--warn); padding:10px max(16px, calc((var(--room, 100vw) - 680px) / 2)); display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
/* The helper (helper.js). Its button sits in the top bar, so it never covers a field. Its panel stands beside the page on a
   wide screen and comes up from the bottom on a phone; the page behind stays usable. */
.helper-open{ margin-left:auto; padding:0 16px; font-size:14px; }
.admin-open + .helper-open{ margin-left:0; }
.admin-open{ margin-right:-6px; }
.helper{ position:fixed; right:16px; bottom:16px; z-index:10; display:flex; flex-direction:column; gap:10px; width:min(400px, calc(100vw - 32px)); max-height:min(680px, calc(100vh - 32px)); max-height:min(680px, calc(100dvh - 32px)); padding:16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 2px 6px rgba(30,26,46,.12), 0 16px 48px rgba(30,26,46,.22); }
.helper[hidden], .helper-form[hidden], .helper-signin[hidden]{ display:none; }
.helper-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.helper-head h2{ margin:0; outline:none; }
.helper-head button{ padding:0 16px; font-size:14px; }
.helper-about{ margin:0; font-size:13px; }
.helper-about summary{ min-height:0; color:var(--ink-3); }
.helper-about p{ margin:4px 0 0; }
.helper-log{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:10px; }
.helper-log:empty{ display:none; }
.helper-turn{ padding:10px 12px; border-radius:10px; background:var(--surface-2); overflow-wrap:anywhere; }
.helper-turn.by-you{ background:var(--accent-soft); }
.helper-who{ display:block; font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:2px; }
.helper-words{ white-space:pre-wrap; }
.helper-turn.waiting .helper-words{ color:var(--ink-2); }
.helper .error{ margin:0; }
.helper-signin p{ margin:0 0 10px; }
/* Google draws its own button here. Should its styles not arrive, it stays the size of a button and not of the panel. */
.helper-google{ min-height:44px; max-height:60px; overflow:hidden; }
.helper-google svg{ width:18px; height:18px; }
.helper-form{ display:flex; flex-direction:column; gap:8px; }
.helper-form label{ font-weight:600; font-size:14px; }
.helper-form textarea{ width:100%; min-height:64px; max-height:160px; padding:8px 12px; font:inherit; color:var(--ink); background:var(--surface); border:1px solid var(--ink-3); border-radius:8px; resize:vertical; }
.helper-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.helper-allowance{ margin:0; }
.helper-allowance:empty, .helper-given:empty, .helper-reason:empty{ display:none; }
.helper-reason{ font-weight:600; }
.helper-given{ margin:0; }
.field .hint[hidden]{ display:none; }
.helper-said{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
/* a wide screen has room for both: the page moves over, so the panel covers none of it */
@media (min-width:1180px){ body.helper-on{ padding-right:432px; --room:calc(100vw - 432px); } }
@media (max-width:600px){
  .helper{ left:0; right:0; bottom:0; width:100%; max-height:85vh; max-height:85dvh; border-radius:16px 16px 0 0; border-width:1px 0 0; padding-bottom:max(16px, env(safe-area-inset-bottom)); }
}