:root[data-theme="light"] {
  --bg:#f4f6f8; --panel:#ffffff; --line:#dbe1e8; --ink:#182230; --dim:#5d6773;
  --accent:#d63a2a; --warn:#9a6b06; --ok:#0f7d52;
}
[data-theme="light"] body { background:var(--bg); color:var(--ink); }
[data-theme="light"] input { color-scheme:light; }
[data-theme="light"] .pill.on, [data-theme="light"] .tab.on,
[data-theme="light"] .tctrl .pill.on { background:#e7ebf0; color:var(--ink); }
[data-theme="light"] .modal { background:rgba(24,34,48,.45); }
[data-theme="light"] .msg.fresh { box-shadow:0 0 0 1px var(--ok); }
[data-theme="light"] .chip { background:#f0f2f5; }
[data-theme="light"] .primary { color:#fff; }
[data-theme="light"] .mon { background:var(--panel); }
[data-theme="light"] .stat, [data-theme="light"] .alert { background:var(--panel); }
#themebtn { cursor:pointer; }

/* ---------- mobile (shared across all pages) ----------
   theme.css loads BEFORE each page's inline <style>, so every rule here carries
   an `html` prefix to out-rank the inline single-class selectors it overrides. */
@media (max-width: 700px) {
  html .wrap { padding: 16px 12px 60px; }
  html body { -webkit-text-size-adjust: 100%; }

  /* headers: let everything wrap instead of forcing one line */
  html header { flex-wrap: wrap; row-gap: 6px; }
  html header .sub, html header .user, html header .nav {
    margin-left: 0; flex-basis: 100%; white-space: normal; font-size: 10.5px;
    line-height: 1.9; }
  html header .nav a, html header .user a { margin-left: 0; margin-right: 12px; }
  html header .nav .linkbtn, html header .user .linkbtn {
    margin-left: 0; margin-right: 12px; }

  /* stat cards: three-up still fits, just tighter */
  html .stats { gap: 8px; }
  html .stat { padding: 10px 10px; }
  html .stat .num { font-size: 17px; }
  html .stat .lbl { font-size: 8.5px; letter-spacing: .06em; }

  /* iOS zooms any focused input under 16px — pin them all at 16px */
  html input[type="email"], html input[type="password"], html input[type="text"],
  html input[type="search"], html input[type="date"], html .searchbox, html #q {
    font-size: 16px; }

  /* feed search bar: query full-width, dates share the second row */
  html .searchbar #q { flex-basis: 100%; }
  html .searchbar input[type="date"] { flex: 1 1 40%; }

  /* pills: comfortable touch targets */
  html .pill, html .tctrl .pill, html .tab { padding: 7px 12px; }

  /* long senders / subjects never push the layout sideways */
  html .msg .top { flex-wrap: wrap; row-gap: 3px; overflow-wrap: anywhere; }
  html .msg .body, html td, html .made code { overflow-wrap: anywhere; }

  /* message overlay goes full-screen */
  html .modal { padding: 0; }
  html .modal .sheet, html .sheet { width: 100vw; max-height: 100dvh;
    height: 100dvh; border-radius: 0; padding: 14px 14px
    calc(14px + env(safe-area-inset-bottom)); }
  html #mhtml { min-height: 40vh; }

  /* timing chart: tighter columns, rotated ticks so labels don't collide */
  html .thours { gap: 1px; height: 120px; margin-left: 26px; }
  html .tick { font-size: 8px; transform: translateX(-50%) rotate(45deg);
    transform-origin: top left; padding-top: 7px; }
  html .gline span { font-size: 8px; padding-right: 5px; }
  html .theat { grid-template-columns: 26px repeat(24, 1fr); gap: 1.5px; }
  html .theat .hcell { height: 11px; }
  html .theat .hlab, html .theat .hx { font-size: 8px; }
  html .tlegend { flex-basis: 100%; margin-left: 0; }

  /* profile charts */
  html .bars { margin-left: 24px; }
  html .bcol .t { font-size: 8px; }

  /* admin tables: drop the low-value columns, keep actions tappable */
  html .tbl-users th:nth-child(4), html .tbl-users td:nth-child(4),
  html .tbl-users th:nth-child(5), html .tbl-users td:nth-child(5) {
    display: none; }
  html .tbl-invites th:nth-child(2), html .tbl-invites td:nth-child(2),
  html .tbl-invites th:nth-child(3), html .tbl-invites td:nth-child(3) {
    display: none; }
  html .tbl-senders th:nth-child(5), html .tbl-senders td:nth-child(5) {
    display: none; }
  html .act { white-space: normal; }
  html .act form { display: inline-block; margin: 2px 0; }
  html th, html td { padding: 8px 6px; }

  /* health strips and warning lines wrap cleanly */
  html .mon { line-height: 1.7; overflow-wrap: anywhere; }
}

@media (max-width: 420px) {
  html .tbl-senders th:nth-child(4), html .tbl-senders td:nth-child(4) {
    display: none; }
  html .chanhead h2 { letter-spacing: .1em; }
}