/* The standalone pages (Help Center, privacy request, privacy policy,
   emergency switch) in the app's current look: white page, Twilight
   titles, 18px Plum Ink text, 16px muted hints only, lavender lines and
   fields, 52px buttons (one full Twilight main button, the others pale
   lavender with a Twilight border), 48px chips and fields, and the
   spacing standard (CLAUDE.md, rule 22). The tokens match index.html. */
:root{
  --ts-ink:#535577;          /* Twilight: titles, labels, the main button */
  --ts-title:#34344F;        /* Plum Ink: body text */
  --ts-muted:#66667F;        /* hints */
  --ts-chip:#F6F5FA;         /* pale lavender: chips, fields, other buttons */
  --ts-chip-on:#DDD9EA;      /* a chosen chip */
  --ts-chip-border:#535577;
  --ts-field-border:#535577;
  --ts-placeholder:#66667F;
  --ts-line:#DDD9EA;         /* lavender lines */
  --ts-overdue:#9A2565;      /* urgent and errors */
  --orchid:#A67DB3;          /* "with Care" in the logo */
  --focus-ring:#535577;
  --text-body:18px;--text-label:20px;--text-secondary:16px;
  --chip-h:48px;--btn-h:52px;
  --gap-related:12px;--gap-section:24px;--side:18px;
  --radius:14px;--radius-sm:8px;
}
*{box-sizing:border-box;}
body{margin:0;background:#FFFFFF;color:var(--ts-title);font-family:'DM Sans',system-ui,-apple-system,"Segoe UI",sans-serif;font-size:var(--text-body);line-height:1.5;overflow-wrap:anywhere;}
h1{font-family:inherit;font-size:28px;font-weight:700;color:var(--ts-ink);line-height:1.25;margin:0;text-wrap:balance;}
h2{font-family:inherit;font-size:var(--text-label);font-weight:700;color:var(--ts-ink);line-height:1.3;margin:0;}
a{color:var(--ts-ink);font-weight:600;}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}
[hidden]{display:none !important;}

/* Nikki's logo (its navy circle is the one kept navy), "Handled" in
   Twilight and "with Care" in Orchid, as in the app. */
.brand{display:flex;align-items:center;gap:8px;min-height:44px;text-decoration:none;}
.brand-logo{display:block;width:34px;height:auto;flex-shrink:0;}
.brand-name{font-family:'Lora',serif;font-size:19px;font-weight:700;color:var(--ts-ink);}
.brand-name em{color:var(--orchid);font-style:italic;}

/* The same footer on every page: centered, one piece to a line. */
.site-footer{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:var(--gap-section);font-size:var(--text-secondary);color:var(--ts-muted);text-align:center;line-height:1.5;}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--ts-ink);font-weight:600;}

/* Hints: 16px muted, and only for true hints. */
.hint{font-size:var(--text-secondary);color:var(--ts-muted);line-height:1.5;}

/* Fields: lavender, 18px, 48px tall. */
input,select,textarea{width:100%;min-height:var(--chip-h);padding:10px 14px;border:1px solid var(--ts-field-border);border-radius:6px;background:var(--ts-chip);font-family:inherit;font-size:var(--text-body);color:var(--ts-title);}
input::placeholder,textarea::placeholder{color:var(--ts-placeholder);opacity:1;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--focus-ring);box-shadow:0 0 0 1px var(--focus-ring);}
textarea{min-height:110px;resize:vertical;}
.field-label,label{display:block;font-size:var(--text-label);font-weight:700;color:var(--ts-ink);line-height:1.3;}

/* Buttons: 52px. One full Twilight main button; the others pale lavender
   with a Twilight border. In a row they share the width, and stack when
   the words wouldn't fit. */
.btn-main,.btn-second,.btn-urgent{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:var(--btn-h);padding:10px 18px;border-radius:var(--radius-sm);font-family:inherit;font-size:var(--text-body);font-weight:700;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;}
.btn-main{background:var(--ts-ink);border:1px solid var(--ts-ink);color:#FFFFFF;}
.btn-second{background:var(--ts-chip);border:1px solid var(--ts-ink);color:var(--ts-ink);}
.btn-urgent{background:var(--ts-overdue);border:1px solid var(--ts-overdue);color:#FFFFFF;}
.btn-main:disabled,.btn-second:disabled,.btn-urgent:disabled{opacity:.6;cursor:default;}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--gap-related);}
.btn-row>*{flex:1 1 0;min-width:max-content;}

/* Chips: 48px; the chosen one pale lavender with a Twilight border, bold,
   with a check before the word (the one chosen-chip style). */
.chip{display:flex;align-items:center;justify-content:center;min-height:var(--chip-h);padding:8px 16px;border:1px solid var(--ts-chip-border);border-radius:24px;background:var(--ts-chip);color:var(--ts-ink);font-family:inherit;font-size:var(--text-body);line-height:1.25;text-align:center;cursor:pointer;}
.chip.selected,.chip.active,.chip[aria-pressed="true"]{background:var(--ts-chip-on);border:1.5px solid var(--ts-ink);font-weight:700;}
.chip.selected::before,.chip.active::before,.chip[aria-pressed="true"]::before{content:'✓';margin-right:6px;}

/* Cards and boxes. */
.card{background:#FFFFFF;border:1px solid var(--ts-line);border-radius:var(--radius);padding:24px var(--side);}
.box{background:var(--ts-chip);border:1px solid var(--ts-ink);border-radius:var(--radius);padding:14px 16px;color:var(--ts-title);}
.error{color:var(--ts-overdue);background:#FFFFFF;border:1px solid var(--ts-overdue);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--text-body);font-weight:600;}