/* Thuso PWA — tokens sampled from the brand logos (rev 2026-10-19).
   Thuso: terracotta ring #c96237 + green #3e7d4f on cream #f1e6d4.
   e-SOS (html[data-theme="esos"]): the panic-button logo's navy #0f1521,
   gold #f6c600, red #c3332b — a dark face. /v1/branding picks the face
   at boot from the validated Host (§18.3). */
:root {
  --terracotta: #c1502c;
  --cream: #f1e6d4;
  --green: #3e7d4f;
  --ink: #26221e;
  --danger: #c3332b;
  --card: #fffdf7;
  --border: #ddd2bc;
  --accent: var(--green);
  --header-bg: var(--terracotta);
  --header-ink: #fff;
}
html[data-theme="esos"] {
  --terracotta: #f6c600;      /* brand gold takes the accent role */
  --cream: #0f1521;           /* the logo's navy becomes the page */
  --green: #f6c600;
  --ink: #f3f0e8;
  --danger: #c3332b;
  --card: #1a2233;
  --border: #2a3450;
  --accent: #f6c600;
  --header-bg: #0f1521;
  --header-ink: #f6c600;
}
* { box-sizing: border-box; }
/* the hidden attribute must always win — a display:flex class on the same
   element otherwise overrides it and leaves an invisible click-eating
   overlay (the 2026-10-19 menu-sheet bug) */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
}
#topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; background: var(--header-bg); color: var(--header-ink);
}
#topbar .brand { font-weight: 700; font-size: 1.15rem; color: var(--header-ink); text-decoration: none; display: flex; align-items: center; gap: .45rem; }
#brand-logo { width: 48px; height: 48px; border-radius: 11px; object-fit: cover; }  /* §14.8: the mark fills the bar */
#family-name { font-size: .8rem; opacity: .8; font-weight: 400; }
#burger {
  position: relative; background: transparent; border: 0; cursor: pointer;
  width: 44px; height: 44px; padding: 0; min-width: 44px;
}
#burger::before {
  content: ""; display: block; margin: 0 auto;
  width: 26px; height: 2.6px; border-radius: 2px; background: var(--header-ink);
  box-shadow: 0 -8px 0 var(--header-ink), 0 8px 0 var(--header-ink);
}
.badge {
  position: absolute; top: 2px; right: 0; background: var(--danger); color: #fff;
  border-radius: 999px; font-size: .68rem; font-weight: 700; min-width: 18px;
  height: 18px; line-height: 18px; text-align: center; padding: 0 4px;
}
.badge.inline { position: static; margin-left: .4rem; }

/* the burger's dropdown menu (§14.8) — one chrome, every face: a panel
   anchored under the button (the Chaba app-bar pattern), not a full-screen
   stack. Closes on pick, outside tap, or the burger again. */
#menu-anchor { position: relative; }
#menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 90;
  min-width: 250px; max-width: calc(100vw - 1.5rem);
  padding: .45rem; border-radius: 14px;
  background: var(--card); color: var(--ink); border: 1px solid var(--border);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; gap: 2px;
}
#menu a, #menu .menu-item {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  font-size: 1.02rem; font-weight: 600; text-decoration: none;
  color: var(--ink); padding: .72rem .8rem; border-radius: 9px;
  background: transparent; border: 0; text-align: left; cursor: pointer;
}
#menu a:hover, #menu .menu-item:hover {
  background: color-mix(in srgb, var(--ink) 8%, var(--card));
}
#menu a.active { color: var(--accent); }
#menu .menu-sep { border: 0; border-top: 1px solid var(--border); margin: .35rem 0; }
#menu .fam-switch { display: flex; flex-wrap: wrap; gap: .4rem; padding: .25rem .4rem; }
#menu .fam-now { font-weight: 600; padding: .35rem .8rem; opacity: .75; }
#menu .badge.inline { position: static; }
#menu .menu-item.danger { color: var(--danger); }
main { flex: 1; padding: 1rem; max-width: 720px; width: 100%; margin: 0 auto; }
.honesty {
  padding: .5rem 1rem; font-size: .78rem; opacity: .75; text-align: center;
}
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem; margin-bottom: 1rem;
}
.card h2 { margin: 0 0 .6rem; font-size: 1.05rem; }
.card > a { display: inline-block; margin-top: 1.2rem; }
#push-arm { margin-top: 1.2rem; }
button {
  font: inherit; border: 0; border-radius: 10px; padding: .65rem 1rem;
  background: var(--accent); color: var(--accent-ink, #fff); cursor: pointer;
}
html[data-theme="esos"] button { --accent-ink: #0f1521; }
button.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
button.danger { background: var(--danger); }
button:disabled { opacity: .5; cursor: default; }
input, select {
  font: inherit; padding: .6rem; border: 1px solid var(--border);
  border-radius: 8px; width: 100%; margin: .2rem 0 .6rem; background: #fff;
}
label { font-size: .85rem; font-weight: 600; display: block; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.row > * { flex: 1; min-width: 140px; }
.muted { opacity: .7; font-size: .85rem; }
/* breathing room: a status line or note that follows a button or link
   never sits flush against it */
button + .muted, button + div, button + p, button + label,
a + .muted, .row + .muted { margin-top: .65rem; }
.tick { color: var(--accent); font-weight: 700; }
.cross { color: var(--danger); font-weight: 700; }

/* the press — a large red 3D push control (rev g, §14.3): depth, bevel,
   travel, cast shadow; the progress ring orbits the bezel. Brand-invariant:
   §18.3 themes the chrome AROUND the button, never the button. */
#press-wrap { display: flex; flex-direction: column; align-items: center; padding: 1.2rem 0; }
/* both axes clamp to the same value — clamping width alone (the old
   max-width: 44vw) left height at 200px and drew an oval on phones */
#press-box { position: relative; width: min(200px, 44vw); height: min(200px, 44vw); }
#press {
  width: 100%; height: 100%; border-radius: 50%;
  /* the crown catches light like moulded plastic */
  background:
    radial-gradient(circle at 33% 26%, #ef6a5d 0%, #d8443a 38%, var(--danger) 72%, #8f2019 100%);
  color: #fff; font-size: 2.1rem; font-weight: 800; letter-spacing: .08em;
  /* bevel ring + cast shadow: the button stands off the page */
  border: 0;
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, .55),    /* inner rim catching light */
    inset 0 -10px 18px rgba(0, 0, 0, .45),       /* under-the-crown shade */
    0 0 0 8px color-mix(in srgb, var(--danger) 82%, #000),  /* the bezel */
    0 0 0 10px rgba(0, 0, 0, .18),
    0 14px 28px rgba(0, 0, 0, .4);               /* cast shadow */
  user-select: none; -webkit-user-select: none; touch-action: none;
  transform: translateY(0);
  transition: transform .08s ease, box-shadow .08s ease;
}
/* the travel: the button visibly sinks under the thumb */
#press.holding {
  transform: translateY(5px) scale(.985);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, .35),
    inset 0 -6px 12px rgba(0, 0, 0, .5),
    0 0 0 8px color-mix(in srgb, var(--danger) 82%, #000),
    0 0 0 10px rgba(0, 0, 0, .18),
    0 6px 14px rgba(0, 0, 0, .4);
}
#press-ring { position: absolute; inset: -18px; pointer-events: none; }
#press-ring circle { fill: none; stroke: var(--accent); stroke-width: 7; stroke-linecap: round; }
#checkin {
  margin-top: 1rem; background: var(--accent); color: var(--accent-ink, #fff); width: 100%; max-width: 340px;
  padding: .9rem; font-size: 1.05rem;
}
.toggles { display: flex; gap: 1rem; margin-top: .8rem; }
.toggles label { font-weight: 400; display: flex; gap: .35rem; align-items: center; }
.toggles input { width: auto; margin: 0; }
#press-status { margin-top: .8rem; min-height: 1.4rem; text-align: center; }

/* banner (the pinned alert) */
#banner {
  position: sticky; top: 0; z-index: 50; background: var(--danger); color: #fff;
  padding: .7rem 1rem; display: none; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
#banner.show { display: block; }
#banner .muted { color: #ffe; opacity: .85; }

/* recipient view */
.map { width: 100%; height: 240px; border-radius: 10px; object-fit: cover;
       border: 1px solid var(--border); background: #dfe7df; }
.recipient-row { display: flex; justify-content: space-between; padding: .35rem 0;
                 border-bottom: 1px dashed var(--border); font-size: .92rem; }
.addr { font-family: ui-monospace, monospace; background: color-mix(in srgb, var(--ink) 8%, var(--card)); padding: .5rem;
        border-radius: 8px; cursor: pointer; word-spacing: .2em; }
.callgrid { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.callgrid a { flex: 1; min-width: 100px; text-align: center; padding: .7rem;
  background: var(--danger); color: #fff; border-radius: 10px; text-decoration: none;
  font-weight: 700; }
.view-logo {
  display: block; margin: .2rem auto 1rem; border-radius: 18px; object-fit: cover;
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.notice { background: color-mix(in srgb, var(--accent) 12%, var(--card)); border: 1px solid var(--border); padding: .7rem;
          border-radius: 10px; font-size: .9rem; margin: .6rem 0; }
code.key { word-break: break-all; background: color-mix(in srgb, var(--ink) 8%, var(--card)); padding: .4rem; display: block;
           border-radius: 8px; font-size: .8rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
td, th { text-align: left; padding: .3rem .2rem; border-bottom: 1px solid var(--border); }
@media (max-width: 560px) { #brand-name { font-size: 1rem; } }

/* chips — welfare arming is chips, never clocks (§9.2, §14.7) */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .3rem 0 .8rem; }
.chip {
  background: var(--card); color: var(--ink); border: 1.5px solid var(--border);
  border-radius: 12px; padding: .7rem .9rem; text-align: center; font-weight: 600;
  min-width: 84px;
}
.chip small { font-weight: 400; opacity: .7; }
.chip.on { border-color: var(--accent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
label.opt { display: flex; gap: .4rem; align-items: center; font-weight: 400; }
label.opt input { width: auto; }

/* the pinned live banner (cold boot, §14.5) */
#live-banner {
  background: var(--danger); color: #fff; border-radius: 12px;
  padding: .8rem 1rem; margin-bottom: .8rem; font-weight: 600;
}
#live-banner a { color: #fff; text-decoration: none; }

/* maps (the four map surfaces, §12) */
.tmap { position: relative; width: 100%; height: 260px; border-radius: 12px;
        overflow: hidden; background: #dfe7df; border: 1px solid var(--border);
        touch-action: none; margin: .5rem 0; }
.tmap-tiles { position: absolute; inset: 0; }
.tmap-tiles img { position: absolute; width: 256px; height: 256px; }
.tmap-svg { position: absolute; inset: 0; pointer-events: none; }
.tmap-pulse { fill: var(--danger); animation: pulse 1.4s ease-out infinite; transform-origin: center; }
@keyframes pulse { 0% { opacity: 1; r: 5; } 70% { opacity: .25; r: 12; } 100% { opacity: 0; r: 14; } }
.tmap-attr { position: absolute; bottom: 2px; right: 4px; font-size: .6rem; opacity: .6; background: rgba(255,255,255,.7); padding: 0 4px; border-radius: 4px; }
.tmap-zoom { position: absolute; top: 8px; right: 8px; display: flex; flex-direction: column; gap: 4px; }
.tmap-zoom button { width: 34px; height: 34px; border-radius: 8px; font-size: 1.2rem; padding: 0; background: var(--card); color: var(--ink); border: 1px solid var(--border); }

/* the Jax thread (§16.7): WhatsApp grammar, support not social */
.jax-head { display: flex; align-items: center; gap: .8rem; }
.jax-head h2 { margin: 0 0 .3rem; }
.jax-head p { margin: 0; }
.jax-thread { display: flex; flex-direction: column; gap: .45rem; max-height: 52vh;
              overflow-y: auto; padding: .5rem 0; }
.jax-row { display: flex; gap: .45rem; align-items: flex-end; max-width: 90%; }
.jax-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
              flex: 0 0 auto; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.jax-avatar.big { width: 46px; height: 46px; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.jax-row .jax-msg { max-width: 100%; }
.jax-msg { max-width: 82%; padding: .55rem .8rem; border-radius: 14px; font-size: .95rem; }
.jax-msg.mine { align-self: flex-end; background: var(--accent); color: var(--accent-ink, #fff); border-bottom-right-radius: 4px; }
html[data-theme="esos"] .jax-msg.mine { --accent-ink: #0f1521; }
.jax-msg.jax { align-self: flex-start; background: var(--card); border: 1px solid var(--border); border-bottom-left-radius: 4px; flex: 1; }
.jax-msg.pending { opacity: .65; }
.jax-clock { display: block; font-size: .62rem; opacity: .7; margin-top: .25rem; }

/* share sheet */
.share-sheet { position: fixed; inset: 0; z-index: 95; background: rgba(0,0,0,.35);
               display: flex; align-items: flex-end; }
.share-sheet .card { width: 100%; border-radius: 16px 16px 0 0; margin: 0; }
.fam-row { display: flex; flex-direction: column; width: 100%; text-align: left;
           margin-bottom: .5rem; background: var(--card); border: 1.5px solid var(--border);
           color: var(--ink); padding: .9rem; }
.fam-row:hover { border-color: var(--accent); }
code.key { word-break: break-all; }