/* The site file's pieces (support.site): the looks, Neon and Green over styles.css's tokens; Warm is styles.css itself. app.js
   writes data-look on <html> (and always a data-theme beside it, so no device block is needed here) only on a site
   with the picker; without data-look nothing here applies. Swapped in place: no reload, no fonts, no images. */

:root:is([data-look="neon"], [data-look="green"]) { --radius: 3px; --grain: none; }

/* ---------- Neon: neon blue on black ---------- */
:root[data-look="neon"] {
  color-scheme: light;
  --bg: #EDF2F8; --surface: #FFFFFF; --surface-2: #E2EAF4; --surface-float: #FFFFFF; --sidebar: #E2EAF4;
  --border: #C6D3E4; --border-strong: #9FB4D0; --text: #08111F; --muted: #44546B; --dim: #6B7C93;
  --accent: #0058D6; --accent-bright: #00A3F0; --accent-soft: #E1ECFC; --accent-border: #0050C4;
  --accent-shadow: rgba(0, 88, 214, .25); --accent-shadow-strong: rgba(0, 88, 214, .35); --on-accent: #FFFFFF;
  --sage: #6F8FBF; --sage-soft: #E6EEF8; --sage-glow: rgba(111, 143, 191, .35);
  --danger: #C8102E; --danger-soft: #FCE6EA; --danger-solid: #C8102E;
  --ok: #006E5A; --ok-soft: #DDF4EE; --warn: #9A5B00; --warn-soft: #FDF0DC;
  --p1: #C8102E; --p2: #00A3F0; --p3: #0058D6; --p4: #6F8FBF;
  --grad-primary: linear-gradient(135deg, #0A66E8, #0050C4);
  --elev-1: 0 1px 0 rgba(0, 88, 214, .06), 0 4px 14px -6px rgba(0, 88, 214, .22);
  --elev-2: 0 1px 0 rgba(0, 88, 214, .08), 0 8px 20px -6px rgba(0, 88, 214, .28);
  --elev-3: 0 2px 0 rgba(0, 88, 214, .06), 0 14px 36px -8px rgba(0, 88, 214, .30);
  --shadow: var(--elev-1); --shadow-lg: var(--elev-3); --card-shadow: var(--elev-1); --card-shadow-hover: var(--elev-2);
  --card-shadow-active: 0 0 0 1px rgba(0, 88, 214, .45), 0 0 14px rgba(0, 163, 240, .30);
  --bar-bg: rgba(237, 242, 248, .9); --glow-top: rgba(0, 163, 240, .08);
  --weave: linear-gradient(rgba(0, 88, 214, .05) 1px, transparent 1px) 0 0 / 28px 28px,
           linear-gradient(90deg, rgba(0, 88, 214, .05) 1px, transparent 1px) 0 0 / 28px 28px;
}
:root[data-look="neon"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #04060A; --surface: #0A0F17; --surface-2: #0E1520; --surface-float: #0E1520; --sidebar: #070B12;
  --border: #17263A; --border-strong: #24476B; --text: #E4F1FF; --muted: #8EA4C2; --dim: #6A7F9C;
  --accent: #29C5FF; --accent-bright: #7FDBFF; --accent-soft: #0A2333; --accent-border: #1FAEFF;
  --accent-shadow: rgba(41, 197, 255, .35); --accent-shadow-strong: rgba(41, 197, 255, .5); --on-accent: #00121C;
  --sage: #9AE6FF; --sage-soft: #0A2333; --sage-glow: rgba(41, 197, 255, .35);
  --danger: #FF5C7A; --danger-soft: #2A0E16; --danger-solid: #D92B4B;
  --ok: #3BE8B0; --ok-soft: #0A2620; --warn: #FFC24D; --warn-soft: #2A2008;
  --p1: #FF5C7A; --p2: #FFC24D; --p3: #29C5FF; --p4: #3D7BFF;
  --grad-primary: linear-gradient(135deg, #4FD3FF, #1FAEFF);
  --elev-1: 0 0 0 1px rgba(41, 197, 255, .10), 0 0 18px -6px rgba(41, 197, 255, .25), 0 8px 24px rgba(0, 0, 0, .6);
  --elev-2: 0 0 0 1px rgba(41, 197, 255, .18), 0 0 22px -6px rgba(41, 197, 255, .35), 0 10px 28px rgba(0, 0, 0, .6);
  --elev-3: 0 0 0 1px rgba(41, 197, 255, .22), 0 0 28px -6px rgba(41, 197, 255, .40), 0 18px 44px rgba(0, 0, 0, .7);
  --shadow: var(--elev-1); --shadow-lg: var(--elev-3); --card-shadow: var(--elev-1); --card-shadow-hover: var(--elev-2);
  --card-shadow-active: 0 0 0 1px rgba(41, 197, 255, .75), 0 0 16px rgba(41, 197, 255, .45), inset 0 0 12px rgba(41, 197, 255, .12);
  --shadow-side: -8px 0 36px rgba(0, 0, 0, .6); --shadow-split: -10px 0 30px rgba(0, 0, 0, .4); --shadow-bar: 0 -6px 24px rgba(0, 0, 0, .5);
  --scrim: rgba(0, 0, 0, .55); --scrim-strong: rgba(0, 0, 0, .65);
  --bar-bg: rgba(4, 6, 10, .88); --glow-top: rgba(41, 197, 255, .12);
  --weave: linear-gradient(rgba(41, 197, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px,
           linear-gradient(90deg, rgba(41, 197, 255, .045) 1px, transparent 1px) 0 0 / 28px 28px;
}

/* ---------- Green: soft pastel greens, no glow, no grid ---------- */
:root[data-look="green"] {
  color-scheme: light;
  --bg: #F2F6F0; --surface: #FBFDF9; --surface-2: #E7EFE4; --surface-float: #FBFDF9; --sidebar: #E7EFE4;
  --border: #D6E2D2; --border-strong: #BCCDB7; --text: #1C2420; --muted: #52604F; --dim: #7D8B7A;
  --accent: #3B6E51; --accent-bright: #8DBF9F; --accent-soft: #E6F1E8; --accent-border: #3B6E51;
  --accent-shadow: rgba(59, 110, 81, .22); --accent-shadow-strong: rgba(59, 110, 81, .3); --on-accent: #FFFFFF;
  --sage: #6F9C80; --sage-soft: #EEF4E2; --sage-glow: rgba(111, 156, 128, .35);
  --danger: #A84A3E; --danger-soft: #F8E9E5; --danger-solid: #A84A3E;
  --ok: #4A6B2A; --ok-soft: #EEF4E2; --warn: #8E6420; --warn-soft: #FAF1DF;
  --p1: #A84A3E; --p2: #CFE0B4; --p3: #6F9C80; --p4: #9DC3BB;
  --grad-primary: linear-gradient(135deg, #4A7D60, #3B6E51);
  --shadow-color: 130deg 18% 34%;
  --card-shadow-active: 0 0 0 1px rgba(59, 110, 81, .30), 0 6px 18px -4px rgba(59, 110, 81, .25);
  --bar-bg: rgba(242, 246, 240, .9); --glow-top: rgba(141, 191, 159, .08); --weave: none;
}
:root[data-look="green"][data-theme="dark"] {
  color-scheme: dark;
  --bg: #151A16; --surface: #1E2620; --surface-2: #222B24; --surface-float: #26302A; --sidebar: #19201B;
  --border: #2F3A31; --border-strong: #3E4C40; --text: #E8EFE6; --muted: #AEBBAA; --dim: #87947F;
  --accent: #A8D5B5; --accent-bright: #C2E3CB; --accent-soft: #24352A; --accent-border: #A0CFAE;
  --accent-shadow: rgba(168, 213, 181, .2); --accent-shadow-strong: rgba(168, 213, 181, .3); --on-accent: #151A16;
  --sage: #A8D5B5; --sage-soft: #24352A; --sage-glow: rgba(168, 213, 181, .3);
  --danger: #E8958A; --danger-soft: #3A2320; --danger-solid: #B5554A;
  --ok: #C5DE9A; --ok-soft: #26301C; --warn: #E8C07A; --warn-soft: #36301F;
  --p1: #E8958A; --p2: #E8C07A; --p3: #7FA98C; --p4: #4F6E5A;
  --grad-primary: linear-gradient(135deg, #B4DCBF, #A0CFAE);
  --glow-color: 130deg 40% 80%;
  --card-shadow-active: 0 0 0 1px rgba(168, 213, 181, .35), 0 0 18px rgba(168, 213, 181, .16);
  --bar-bg: rgba(21, 26, 22, .9); --glow-top: rgba(168, 213, 181, .05); --weave: none;
}

/* ---------- the picker: one row of buttons in the Hi menu ---------- */
.looks-row { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.looks-row .looks-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .8px; margin-right: 2px; }
.looks-row button { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.looks-row button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); font-weight: 700; }

/* ---------- a site without the logo: its name in the logo's place; the site's band ---------- */
.brand-word { display: block; font-family: var(--font-serif); font-size: 20px; line-height: 1; color: var(--text); white-space: nowrap; }
.site-band { margin: 0; padding: 6px 14px; text-align: center; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border-bottom: 1px solid var(--border); }

/* ---------- the welcome page ---------- */
.welcome-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 10px; }
.welcome-groups .card { padding: 14px 16px; }
.welcome-groups h3 { margin: 0 0 4px; font-size: 16px; }
.welcome-groups ul { margin: 8px 0 0; padding-left: 18px; }
.welcome-groups li { margin: 3px 0; }

/* ---------- the one intake's fill preview (app.js fillPreview) ---------- */
.fill-fields { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.fill-field { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; background: var(--surface); }
.fill-field summary { cursor: pointer; }
.fill-ticks { gap: 14px; margin: 6px 0; flex-wrap: wrap; }
.fill-tick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; }

/* ---------- People: a read grant's remove button (app.js readAccess) ---------- */
.chip .chip-x { margin-left: 4px; padding: 0 4px; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; opacity: .7; }
.chip .chip-x:hover { opacity: 1; }

/* ---------- Dial proposals (app.js viewDialProposals): proposals beside the hindsight report ---------- */
.dial-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .dial-cols { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the command bar (app.js commandBar, Ctrl-K) ---------- */
.cmd-back { position: fixed; inset: 0; z-index: 90; background: var(--scrim); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmd-back[hidden] { display: none; }
.cmd-box { width: min(620px, 100%); max-height: 70vh; display: flex; flex-direction: column; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.cmd-input { font-size: 16px; }  /* 16px: iOS doesn't zoom into it */
.cmd-list { overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.cmd-item { display: flex; gap: 10px; align-items: baseline; width: 100%; text-align: left; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; cursor: pointer; }
.cmd-item.on, .cmd-item:hover { background: var(--surface-2); }
.cmd-kind { min-width: 110px; }
.cmd-note { padding: 6px 10px; }

/* ---------- approve from a phone: a table marked phone-cards becomes one card per row ---------- */
@media (max-width: 600px) {
  table.phone-cards, table.phone-cards tbody, table.phone-cards tr, table.phone-cards td { display: block; width: 100%; }
  table.phone-cards thead { display: none; }
  table.phone-cards tr { margin-bottom: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  table.phone-cards td { border: 0; padding: 3px 0; text-align: left; }
  table.phone-cards td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 110px; color: var(--muted); font-size: 12px; }
  table.phone-cards td.appr-acts .row { display: flex; gap: 8px; margin-top: 6px; }
  table.phone-cards td.appr-acts .btn { flex: 1; min-height: 44px; justify-content: center; }
}

/* ---------- the one list pattern (app.js listTools) and the record side panel (recordPanel) ---------- */
.list-bar { align-items: center; gap: 10px; margin: 0 0 8px; }
.list-filter { max-width: 320px; }
.list-pager { margin-top: 8px; }
.record-panel .drawer-title { margin: 0; font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- what's waiting on you (app.js waitingOnMe) and saved views (listTools) ---------- */
.waiting-on-me { gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.list-views { width: auto; max-width: 200px; }

/* ---------- a window drawn into a box (app.js mountWindow; the Home dashboard's tiles) ---------- */
.win-head { align-items: center; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.win-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.win-body { padding: 8px; overflow: auto; }

/* ---------- the Home dashboard (app.js viewHome): a 12-column grid of widgets ---------- */
.home-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.home-grid.editing { background-image: linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: calc((100% + 12px) / 12) 100%; }
.home-tile { display: flex; flex-direction: column; min-width: 0; overflow: hidden; position: relative; }
.home-tile.dragging { opacity: .85; z-index: 5; box-shadow: var(--shadow-lg); }
.home-tile.locked { outline: 1px dashed var(--accent); }
.home-head { align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.home-grid.editing .home-head { cursor: move; touch-action: none; }
.home-body { flex: 1; overflow: auto; padding: 8px 10px; }
.home-resize { position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; cursor: nwse-resize; touch-action: none;
  border-right: 3px solid var(--border-strong); border-bottom: 3px solid var(--border-strong); }
.home-counts { display: flex; gap: 18px; flex-wrap: wrap; }
.home-count { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.home-count strong { font-size: 24px; }
.home-line { justify-content: space-between; gap: 8px; padding: 3px 0; }
.home-search { width: 100%; justify-content: flex-start; }
.home-note { white-space: pre-wrap; }
.home-set { margin-bottom: 12px; }
@media (max-width: 700px) {  /* a phone: one column, in the dashboard's own order */
  .home-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none !important; }
  .home-tile { grid-column: 1 !important; grid-row: auto !important; min-height: 92px; }
}
.win-body > p.muted, .win-body > .card > .drop-zone, .win-body > .card.card-pad > .drop-zone { display: none; }  /* a window shows its list, not the screen's intro */

.home-arrange { gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.home-arrange .input { flex: 1; min-width: 220px; }
/* ---------- several files in one drop (app.js dropReview) ---------- */
.drop-review { border-color: var(--accent); }
.drop-row.drop-focus { box-shadow: 0 0 0 2px var(--accent); }

/* ---------- Administration -> Connections (app.js viewConnections) ---------- */
.conn-add { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }
.conn-add summary { cursor: pointer; font-weight: 600; }
.conn-fields { gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.conn-fields .field { min-width: 180px; }
.conn-copy { gap: 8px; align-items: center; }
.conn-copy .input, .conn-copy code { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Consolas, monospace; }

/* ---------- report builder 3: levels and Change it with AI (app.js rbLevels, aiBox) ---------- */
.rb-ai { gap: 8px; margin-bottom: 10px; align-items: center; flex-wrap: wrap; }
.rb-ai .input { flex: 1; min-width: 220px; }
.rb-tree td.rb-toggle { width: 34px; }
.rb-tree .rb-sub > td { padding: 4px 0 8px 24px; }
.rb-level .table-wrap { margin: 0; }

/* ---------- 0.4.1 tasks: quick add, repeat, choose many (app.js quickParse, pickTask) ---------- */
.add-row-wrap .quick-said:empty { display: none; }
.add-row-wrap .quick-said { padding: 2px 10px 6px 28px; }
.task-row .repeat { font-size: 13px; color: var(--muted, inherit); }
.task-row .pick-box { margin-right: 6px; }
.task-row.picked { box-shadow: inset 3px 0 0 var(--accent); }
.pick-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 40; display: flex; gap: 8px;
  align-items: center; flex-wrap: wrap; padding: 8px 12px; max-width: calc(100vw - 32px); }

/* ---------- missing buttons (Sean 2026-10-20): a day's + on the Calendar ---------- */
.cal-num { display: flex; justify-content: space-between; align-items: center; }
.cal-add { border: 0; background: transparent; color: var(--muted, inherit); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 4px; border-radius: 4px; opacity: .55; }
.cal-day:hover .cal-add, .cal-add:focus-visible { opacity: 1; }

/* ---------- the rules editor (app.js ruleEditor) ---------- */
.rule-fields { gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0; }
.rule-fields .input { width: auto; max-width: 100%; }
.rule-conds { display: grid; gap: 2px; }