/* ===== Theme tokens ===== "Counsel" light (ink navy + emerald) and "Midnight"
   dark. Components read tokens only; the two theme blocks below re-map them.
   --btn-ink = text on accent/colored fills (white in light, near-black in dark
   so text stays legible when accents go luminous). --glass = translucent bars. */
:root {
  --violet: #0e7a5c;
  --violet-d: #0b5e47;
  --sky: #14907a;
  --mint: #12916e;
  --coral: #c0452f;
  --amber: #b0832a;
  --pink: #4b57a8;
  --teal: #0e7a8f;
  /* Political party colors for Kalshi outcomes — deliberately separate from
     --coral (already means "negative/error" elsewhere) and --sky/--violet
     (already the app's own accent, and --sky is teal, not blue, despite the name). */
  --party-d: #2f6fed;
  --party-r: #d1373f;
  --ink: #16203a;
  --ink-soft: #5a6478;
  --bg: #f3f3ee;
  --card: #ffffff;
  --card-2: #f4f5f1;
  --line: #e3e4dd;
  --btn-ink: #ffffff;
  --glass: rgba(255, 255, 255, 0.92);
  --glow: #e8efe9; --danger-tint: #fdecef; --accent-tint: #e7f1ec; --accent-tint-ink: #0c5c46;
  --shadow: 0 6px 20px rgba(20, 27, 46, 0.07);
  --shadow-sm: 0 2px 8px rgba(20, 27, 46, 0.05);
  --radius: 15px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  /* Scrim laid over the NASA Inbox backdrop so text/cards stay readable (light default). */
}
:root[data-theme="light"] {
  --violet: #0e7a5c; --violet-d: #0b5e47; --sky: #14907a; --mint: #12916e; --coral: #c0452f;
  --amber: #b0832a; --pink: #4b57a8; --teal: #0e7a8f; --party-d: #2f6fed; --party-r: #d1373f;
  --ink: #16203a; --ink-soft: #5a6478;
  --bg: #f3f3ee; --card: #ffffff; --card-2: #f4f5f1; --line: #e3e4dd; --btn-ink: #ffffff;
  --glass: rgba(255,255,255,0.92); --glow: #e8efe9; --danger-tint: #fdecef; --accent-tint: #e7f1ec; --accent-tint-ink: #0c5c46; --accent-tint: #e7f1ec; --accent-tint-ink: #0c5c46;
  --shadow: 0 6px 20px rgba(20,27,46,.07); --shadow-sm: 0 2px 8px rgba(20,27,46,.05);
}
:root[data-theme="dark"] {
  --violet: #8f7ff2; --violet-d: #b3a6ff; --sky: #37e0c8; --mint: #37e0c8; --coral: #ff6b78;
  --amber: #e0b24d; --pink: #9b8cff; --teal: #4ec0da; --party-d: #6d9bff; --party-r: #ff6b74;
  --ink: #e9ebf4; --ink-soft: #969bb0;
  --bg: #12141c; --card: #1b1e29; --card-2: #232733; --line: #2a2e3d; --btn-ink: #14161f;
  --glass: rgba(23,26,37,0.90); --glow: rgba(139,124,255,.10); --danger-tint: #3a2327; --accent-tint: #223a33; --accent-tint-ink: #7fd8b8;
  --shadow: 0 10px 26px rgba(0,0,0,.42); --shadow-sm: 0 3px 10px rgba(0,0,0,.30);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
/* Touch responsiveness: remove the 300ms tap delay + double-tap zoom on all
   interactive controls, and stop long-press text-selection on buttons/tabs so
   the PWA feels native on iPhone. (Content stays selectable.) */
button, a, label, input, select, textarea, [role="button"] { touch-action: manipulation; }
button, .tab, .dash-seg-btn, .btn { -webkit-user-select: none; user-select: none; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(1200px 500px at 100% -10%, var(--glow) 0%, transparent 60%),
    radial-gradient(900px 400px at -10% 0%, var(--glow) 0%, transparent 55%),
    var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}
.hidden { display: none !important; }

/* ===== Login ===== */
.login {
  min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: calc(var(--safe-top) + 20px) 20px calc(var(--safe-bot) + 20px);
}
.login-card {
  background: var(--card); border-radius: 28px; box-shadow: var(--shadow);
  padding: 32px 26px; width: 100%; max-width: 360px; text-align: center;
}
.logo-big { font-size: 54px; line-height: 1; }
.login-card h1 { margin: 8px 0 2px; font-size: 28px; letter-spacing: -0.5px; }
.tagline { color: var(--ink-soft); margin: 0 0 18px; font-size: 14px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 4px; }
.pin-dots span {
  width: 14px; height: 14px; border-radius: 50%; background: var(--line);
  transition: transform .15s, background .15s;
}
.pin-dots span.on { background: var(--violet); transform: scale(1.15); }
.pin-error { color: var(--ink); font-size: 16px; min-height: 1.3em; margin: 6px 0; }
.login-card { touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.login.busy .pin-dots span.on { animation: pinpulse .9s ease-in-out infinite; }
@keyframes pinpulse { 50% { opacity: .35; } }
.login.bad .pin-dots { animation: pinshake .35s; }
@keyframes pinshake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.keypad { display: grid; grid-template-columns: repeat(3, clamp(64px, 22vw, 84px)); justify-content: center; gap: clamp(8px, 1.6vh, 14px); margin-top: 8px; touch-action: manipulation; }
.keypad button {
  font-size: clamp(26px, 4vh, 30px); height: clamp(58px, 9vh, 84px); padding: 0; border: none; border-radius: 16px;
  background: var(--card-2); color: var(--ink); font-weight: 600; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform .08s, background .15s;
}
.keypad button:active { transform: scale(0.94); background: var(--line); }
.keypad button:disabled { opacity: .5; }
.keypad .key-util { background: transparent; font-size: 24px; color: var(--ink); }

/* ===== App shell (flex column, full viewport height) ===== */
.app { max-width: none; margin: 0 auto; height: 100dvh; display: flex; flex-direction: column; }
.topbar {
  flex: none;
  padding: calc(var(--safe-top) + 14px) 18px 14px;
  background: linear-gradient(120deg, var(--violet), var(--sky));
  color: var(--btn-ink); border-bottom-left-radius: 22px; border-bottom-right-radius: 22px;
  box-shadow: var(--shadow-sm);
  display: flex; align-items: baseline; justify-content: space-between;
}
.view-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; }
body.dash-active .view-scroll { overflow: hidden; }
.brand { font-weight: 800; font-size: 19px; letter-spacing: -0.3px; }
.brand-icon { margin-right: 4px; }
.greeting { font-size: 13px; opacity: .92; }

.view { padding: 16px 16px 8px; flex: 1 0 auto; min-height: 0; }
.view:not(.dash) { max-width: 760px; width: 100%; margin: 0 auto; }
.view.dash { flex: 1 1 auto; padding: 12px 16px; max-width: none; margin: 0; width: 100%; display: flex; flex-direction: column; }
.section-title {
  font-size: 15px; margin: 22px 4px 10px; display: flex; align-items: center; gap: 8px;
  color: var(--ink);
}
.section-title:first-child { margin-top: 8px; }

/* Settings: collapsible groups — collapsed by default so the whole page doesn't
   dump 20 cards at once. Native <details> keeps content in the DOM (just visually
   collapsed) so every existing #id-bound render/setup function keeps working. */
.settings-group { margin: 0 0 8px; border-radius: 14px; background: var(--card); box-shadow: var(--shadow-sm); overflow: hidden; }
.settings-group:first-of-type { margin-top: 8px; }
.settings-group-h {
  display: flex; align-items: center; gap: 9px; padding: 13px 14px; cursor: pointer;
  font-size: 15px; font-weight: 800; color: var(--ink); list-style: none; user-select: none;
}
.settings-group-h::-webkit-details-marker { display: none; }
.settings-group-h .sg-chev { margin-left: auto; font-size: 12px; color: var(--ink-soft); transition: transform .15s; flex: none; }
.settings-group[open] > .settings-group-h .sg-chev { transform: rotate(90deg); }
.settings-group-h .sg-hint { font-size: 12px; font-weight: 500; color: var(--ink-soft); }
.settings-group-body { padding: 2px 12px 12px; }
/* Inside a group, section headers read as sub-headings — the group summary already
   carries the primary weight, so shrink these to cut visual noise. */
.settings-group .section-title { font-size: 12.5px; font-weight: 800; letter-spacing: .01em; text-transform: uppercase; color: var(--ink-soft); margin: 16px 2px 7px; }
.settings-group .section-title:first-child { margin-top: 4px; }
.settings-group .card.soft { box-shadow: none; border: 1px solid var(--line); }
.hint { font-size: 12px; color: var(--ink-soft); font-weight: 500; }
.pill {
  background: var(--violet); color: var(--btn-ink); font-size: 12px; font-weight: 700;
  border-radius: 999px; padding: 1px 9px; min-width: 20px; text-align: center;
}

/* Capture box */
.capture-box {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 14px; border: 2px solid transparent; position: relative;
}
.capture-box:focus-within { border-color: var(--violet); }
/* Drag-and-drop overlay */
.capture-drop {
  position: absolute; inset: 0; border-radius: var(--radius);
  display: none; align-items: center; justify-content: center; z-index: 5;
  background: rgba(52, 97, 214, 0.10); border: 2px dashed var(--violet);
  backdrop-filter: blur(1px);
}
.capture-box.drag-over { border-color: var(--violet); }
.capture-box.drag-over .capture-drop { display: flex; }
.capture-drop-msg {
  font-size: 15px; font-weight: 800; color: var(--violet-d);
  background: var(--card); padding: 10px 16px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
/* While a recording is live, tint the capture box so it's clear drops attach to it */
body.recording-on .capture-box { border-color: var(--teal); }
body.recording-on .capture-box.drag-over .capture-drop { background: rgba(14, 143, 176, 0.12); border-color: var(--teal); }
.capture-box textarea {
  width: 100%; border: none; resize: vertical; font-size: 16px; font-family: inherit;
  color: var(--ink); background: transparent; outline: none; min-height: 588px;
}
.capture-box textarea::placeholder { color: #93a1b9; }
.capture-actions { display: flex; flex-wrap: nowrap; gap: 6px; margin-top: 10px; align-items: center; justify-content: center; }
.capture-actions .btn { padding: 7px 10px; font-size: 13px; border-radius: 10px; white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.capture-actions .quick-task { font-weight: 700; border: 1.5px solid var(--line); }
.capture-actions #quick-personal { color: var(--teal); }
.capture-actions #quick-work { color: var(--violet-d); }
.upload-status { margin-top: 10px; font-size: 13px; color: var(--violet); font-weight: 600; text-align: center; }
.btn.recording { background: #ffe1e6; color: #e11d48; animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.rec-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.rec-panel-label { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.rec-opt { border: 1.5px solid var(--line); background: var(--card); color: var(--violet-d); font-weight: 700; font-size: 13px; border-radius: 999px; padding: 7px 13px; cursor: pointer; }
.rec-opt:active { background: #eaf0fb; }
.rec-status { margin-top: 10px; font-size: 13px; color: #e11d48; font-weight: 700; text-align: center; }
/* "Add other side" — pulls the far end of a Teams/Zoom call into the recording. */
.rec-far-btn { margin-left: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; cursor: pointer; font-family: inherit; }
.rec-far-btn:hover { background: var(--card-2); }
.rec-far-btn:disabled { opacity: .6; cursor: default; }
.cap-audio { width: 100%; margin-top: 8px; height: 38px; }
.cap-part { font-size: 11px; font-weight: 700; color: var(--ink-soft); display: block; margin-top: 8px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 4px 10px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-tint-ink);
  text-decoration: none; margin-top: 8px;
}

/* ===== Juno Search (all-apps AI chat) ===== */
/* Search tab now wears Juno's face instead of a magnifier. */
.tab-juno-ava { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; object-position: center 26%; display: block; margin: 0 auto 2px; box-shadow: 0 0 0 1.5px var(--violet); background: #cfd3dd; }
/* Full overlay from below the topbar to above the tab bar. */
.juno-panel { position: fixed; inset: 0; z-index: 120; display: flex; }
.juno-panel.hidden { display: none; }
/* The chat surface: fills the screen on phones/tablets; becomes a centered floating
   sheet with a dimmed backdrop on wider desktop windows (a real "pop up"). */
.juno-sheet { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
@media (min-width: 860px) {
  .juno-panel { background: rgba(9, 11, 20, .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    align-items: center; justify-content: center; padding: 28px; }
  .juno-sheet { flex: 0 1 auto; width: min(800px, 100%); height: min(86vh, 860px);
    border-radius: 22px; box-shadow: 0 26px 80px rgba(0,0,0,.55); }
}
.juno-head { flex: none; display: flex; align-items: center; gap: 11px; padding: calc(var(--safe-top) + 14px) 16px 12px;
  background: linear-gradient(120deg, var(--violet), var(--sky)); color: var(--btn-ink);
  border-bottom-left-radius: 20px; border-bottom-right-radius: 20px; box-shadow: var(--shadow-sm); }
.juno-head-ava { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center 26%; flex: none; box-shadow: 0 0 0 2px var(--btn-ink), 0 1px 5px rgba(0,0,0,.3); background: #cfd3dd; }
.juno-head-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.juno-head-t b { font-size: 17px; font-weight: 800; }
.juno-head-t span { font-size: 11.5px; opacity: .9; }
.juno-close { flex: none; border: none; background: rgba(128,128,128,.22); color: var(--btn-ink); width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; }
/* Header voice toggle (read answers aloud) — matches the close button. */
.juno-hbtn { flex: none; border: none; background: rgba(128,128,128,.22); color: var(--btn-ink); width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer; line-height: 1; }
.juno-hbtn[aria-pressed="true"] { background: var(--btn-ink); color: var(--violet-d); box-shadow: 0 0 0 2px rgba(255,255,255,.5) inset; }
/* Voice-input mic button inside the composer. */
.juno-mic { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); width: 44px; height: 44px; border-radius: 50%; font-size: 17px; cursor: pointer; line-height: 1; }
.juno-mic:hover { border-color: var(--violet); color: var(--violet-d); }
/* Attached-photo strip above the composer + the photo shown in the user's bubble. */
.juno-attach { flex: none; padding: 8px 12px 0; }
.juno-attach.hidden { display: none; }
.juno-attach-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 8px 5px 5px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); font-size: 12.5px; font-weight: 600; color: var(--ink-soft); max-width: 100%; }
.juno-attach-chip img { width: 38px; height: 38px; border-radius: 8px; object-fit: cover; flex: none; }
.juno-attach-x { flex: none; border: none; background: var(--card-2); color: var(--ink-soft); width: 24px; height: 24px; border-radius: 50%; font-size: 12px; cursor: pointer; }
.juno-attach-x:hover { color: var(--coral, #ef5a5a); }
.juno-user-img { display: block; max-width: 220px; max-height: 260px; width: auto; border-radius: 10px; margin-bottom: 6px; }
.juno-attach-doc { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; background: var(--card-2); border-radius: 8px; flex: none; }
.juno-user-doc { display: inline-block; margin-bottom: 6px; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.22); font-size: 12.5px; font-weight: 700; }
/* Drag-and-drop highlight on the chat sheet. */
.juno-sheet.dragover { outline: 2px dashed var(--violet); outline-offset: -8px; }
.juno-sheet.dragover::after { content: '📎 Drop a photo or PDF to ask Juno'; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: var(--violet); color: var(--btn-ink); padding: 10px 16px; border-radius: 12px; font-weight: 800; font-size: 14px; z-index: 5; pointer-events: none; }
.juno-sheet { position: relative; }
.juno-mic.listening { background: var(--coral, #ef5a5a); color: #fff; border-color: transparent; animation: junoPulse 1s ease-in-out infinite; }
@keyframes junoPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,90,90,.5); } 50% { box-shadow: 0 0 0 7px rgba(239,90,90,0); } }
.juno-act.playing { background: var(--violet); color: var(--btn-ink); border-color: var(--violet); }
/* Recent-chat resume buttons that replace the example chips once there's history. */
/* One-tap "Catch me up" briefing button in the empty state. */
.juno-catchup { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; max-width: 320px; margin: 8px auto 2px; padding: 9px 16px; border: none; border-radius: 13px; cursor: pointer; font-family: inherit; font-weight: 800; font-size: 14.5px; color: var(--btn-ink); background: linear-gradient(120deg, var(--violet), var(--sky)); box-shadow: var(--shadow-sm); }
.juno-catchup small { font-size: 11px; font-weight: 600; opacity: .92; line-height: 1.2; }
.juno-catchup:hover { filter: brightness(1.04); }
.juno-ex.juno-starter { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 8%, var(--card)); }
.juno-recents-h { font-size: 11px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: var(--ink-soft); margin: 10px 0 5px; }
.juno-ex.juno-recent { display: inline-block; width: auto; max-width: 100%; text-align: left; margin: 5px 4px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: top; }
/* Streaming: research status line + the answer typing in. */
.juno-status { margin-bottom: 2px; }
.juno-live-text { white-space: pre-wrap; font-size: 14px; line-height: 1.5; }
/* "How I found this" — sources disclosure. */
.juno-work { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 7px; }
.juno-work > summary { cursor: pointer; font-size: 12px; font-weight: 700; color: var(--ink-soft); list-style: none; }
.juno-work > summary::-webkit-details-marker { display: none; }
.juno-work > summary::before { content: '🔎 '; }
.juno-work[open] > summary { color: var(--violet-d); }
.juno-work-body { margin-top: 6px; display: flex; flex-direction: column; gap: 5px; }
.juno-work-line { font-size: 12px; color: var(--ink-soft); }
.juno-work-lbl { font-weight: 700; margin-right: 4px; }
.juno-work-chip { display: inline-block; margin: 0 4px 4px 0; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card-2); font-weight: 600; }
.juno-work-chip-write { border-color: var(--green, #0e7a5c); color: var(--green, #0e7a5c); background: color-mix(in srgb, var(--green, #0e7a5c) 12%, var(--card-2)); }
.juno-work-line a { color: var(--violet-d); font-weight: 600; text-decoration: underline; }
/* Follow-up suggestion chips under an answer. */
.juno-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.juno-sugg { border: 1px solid var(--violet); background: var(--accent-tint, var(--card-2)); color: var(--violet-d); border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; font-family: inherit; }
.juno-sugg::before { content: '↪ '; }
.juno-sugg:hover { background: var(--violet); color: var(--btn-ink); }
/* Answer "Do" action menu. */
.juno-do-wrap { position: relative; display: inline-block; }
.juno-do-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 20; min-width: 210px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 34px rgba(0,0,0,.28); padding: 5px; }
.juno-do-menu.hidden { display: none; }
.juno-do-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; border: none; background: none; color: var(--ink); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 10px; border-radius: 8px; cursor: pointer; }
.juno-do-item:hover { background: var(--card-2); color: var(--violet-d); }
.juno-do-ic { width: 20px; text-align: center; }
/* Draft-email modal. */
.juno-draft-ov { position: fixed; inset: 0; z-index: 200; background: rgba(9,11,20,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.juno-draft-ov.hidden { display: none; }
.juno-draft-card { width: min(560px, 100%); max-height: 88vh; overflow-y: auto; background: var(--bg); border-radius: 18px; box-shadow: 0 24px 70px rgba(0,0,0,.5); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.juno-draft-h { display: flex; align-items: center; justify-content: space-between; font-size: 16px; }
.juno-draft-x { border: none; background: var(--card-2); color: var(--ink); width: 30px; height: 30px; border-radius: 50%; font-size: 14px; cursor: pointer; }
.juno-draft-subj, .juno-draft-body { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-family: inherit; font-size: 14px; background: var(--card); color: var(--ink); }
.juno-draft-body { resize: vertical; line-height: 1.5; }
.juno-draft-acts { display: flex; gap: 8px; }
/* Juno launcher — two clearly-distinct ways to start (Type / Talk). */
.juno-launch { position: fixed; inset: 0; z-index: 210; background: rgba(9,11,20,.5); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.juno-launch.hidden { display: none; }
.juno-launch-card { width: min(420px, 100%); background: var(--bg); border-radius: 20px; box-shadow: 0 24px 70px rgba(0,0,0,.5); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.juno-launch-h { display: flex; align-items: center; gap: 10px; font-size: 17px; padding: 2px 2px 4px; }
.juno-launch-ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; object-position: center 26%; box-shadow: 0 0 0 2px var(--violet); background: #cfd3dd; }
.juno-launch-opt { display: flex; align-items: center; gap: 13px; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 15px; padding: 14px; cursor: pointer; font-family: inherit; color: var(--ink); }
.juno-launch-opt:hover { border-color: var(--violet); background: var(--card-2); }
.juno-launch-opt[data-mode="talk"] { border-color: var(--violet); background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 12%, var(--card)), var(--card)); }
.jl-ic { font-size: 26px; flex: none; width: 34px; text-align: center; }
.jl-txt { display: flex; flex-direction: column; gap: 2px; }
.jl-txt b { font-size: 15px; font-weight: 800; }
.jl-txt small { font-size: 12px; color: var(--ink-soft); line-height: 1.3; }
/* Hands-free conversation status bar (inside the chat sheet, under the header). */
.juno-convo-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; background: linear-gradient(120deg, var(--violet), var(--sky)); color: var(--btn-ink); }
.juno-convo-bar.hidden { display: none; }
.juno-convo-bar.idle { background: var(--card-2); color: var(--ink-soft); }
.juno-convo-status { font-size: 13px; font-weight: 700; }
.juno-convo-ctrls { display: flex; gap: 6px; flex: none; }
.juno-convo-btn { border: none; background: rgba(255,255,255,.25); color: inherit; border-radius: 999px; font-size: 12.5px; font-weight: 700; padding: 5px 11px; cursor: pointer; font-family: inherit; }
.juno-convo-bar.idle .juno-convo-btn { background: var(--card); border: 1px solid var(--line); }
.juno-convo-btn.stop { background: rgba(0,0,0,.22); }
.juno-msgs { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 14px 4px; display: flex; flex-direction: column; gap: 12px; }
.juno-row { display: flex; gap: 8px; max-width: 100%; }
.juno-row.user { justify-content: flex-end; }
.juno-row.juno { justify-content: flex-start; }
.juno-row-ava { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; object-position: center 26%; flex: none; margin-top: 2px; box-shadow: 0 0 0 1.5px var(--violet); background: #cfd3dd; }
.juno-bubble { max-width: 82%; padding: 10px 13px; border-radius: 15px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.juno-row.user .juno-bubble { background: linear-gradient(120deg, var(--violet), var(--sky)); color: var(--btn-ink); border-bottom-right-radius: 5px; font-weight: 600; }
.juno-row.juno .juno-bubble { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-bottom-left-radius: 5px; box-shadow: var(--shadow-sm); }
.juno-bubble p { margin: 0 0 7px; } .juno-bubble p:last-child { margin-bottom: 0; }
.juno-bubble ul, .juno-bubble ol { margin: 5px 0; padding-left: 20px; } .juno-bubble li { margin: 3px 0; }
.juno-bubble a { color: var(--violet-d); font-weight: 700; text-decoration: underline; }
.juno-bubble h4 { margin: 8px 0 4px; font-size: 14px; }
.juno-actions { display: flex; gap: 6px; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); }
.juno-act { border: 1px solid var(--line); background: var(--card-2); color: var(--ink-soft); border-radius: 8px; font-size: 12px; font-weight: 700; padding: 4px 9px; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.juno-act:hover { color: var(--violet-d); border-color: var(--violet); }
.juno-act.on-up { background: var(--accent-tint); color: var(--accent-tint-ink); border-color: var(--accent-tint-ink); }
.juno-act.on-down { background: var(--danger-tint); color: var(--coral); border-color: var(--coral); }
.juno-act.copied { background: var(--accent-tint); color: var(--accent-tint-ink); }
.juno-typing { display: inline-flex; gap: 4px; align-items: center; color: var(--ink-soft); font-size: 13px; }
.juno-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--violet); animation: junoPulse 1s infinite; }
.juno-dot:nth-child(2){ animation-delay: .15s; } .juno-dot:nth-child(3){ animation-delay: .3s; }
@keyframes junoPulse { 0%,100%{ opacity:.3; transform: translateY(0);} 50%{ opacity:1; transform: translateY(-2px);} }
.juno-form { flex: none; display: flex; gap: 8px; padding: 10px 12px calc(10px + var(--safe-bot)); border-top: 1px solid var(--line); background: var(--glass); backdrop-filter: blur(12px); }
.juno-input, #juno-input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font-size: 15px; background: var(--card); color: var(--ink); font-family: inherit; }
#juno-input:focus { outline: none; border-color: var(--violet); }
.juno-send { flex: none; border: none; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(120deg, var(--violet), var(--sky)); color: var(--btn-ink); font-size: 17px; cursor: pointer; }
.juno-send:disabled { opacity: .5; cursor: default; }
.juno-empty { text-align: center; color: var(--ink-soft); font-size: 13px; padding: 12px 12px 6px; }
.juno-empty .juno-ex { display: inline-block; margin: 3px 3px 0; padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--violet-d); font-weight: 700; cursor: pointer; font-size: 12.5px; }
/* Settings gallery of all Juno looks with keep-in-rotation checkboxes. */
/* The hidden ATTRIBUTE loses to any author `display:` of equal weight (a .row or .btn
   rule will happily re-show a [hidden] element), so make it win outright. */
[hidden] { display: none !important; }
/* Portraits photolab has sent that are waiting on his decision. Shown with the notes
   that came back with them, because that is what he reads to decide. */
.juno-offers { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.juno-offer { display: flex; gap: 12px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.juno-offer img { width: 86px; height: 86px; flex: none; border-radius: 12px; object-fit: cover; background: #cfd3dd; cursor: zoom-in; }
.juno-offer-main { flex: 1 1 auto; min-width: 0; }
.juno-offer-variant { font-size: 13px; font-weight: 800; color: var(--ink); }
.juno-offer-note { font-size: 12px; color: var(--ink-soft); line-height: 1.4; margin-top: 3px; word-break: break-word; }
.juno-offer-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
/* A full-size look at one portrait, with its own close control: a view he can reach
   must always have a way back, and in a standalone PWA there is no browser chrome. */
.juno-zoom { position: fixed; inset: 0; z-index: 240; background: rgba(9,11,20,.72); display: flex; align-items: center; justify-content: center; padding: 20px; }
.juno-zoom img { max-width: min(560px, 92vw); max-height: 78vh; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.juno-zoom-close { position: absolute; top: calc(var(--safe-top) + 12px); right: 14px; font-size: 15px; font-weight: 800; }
.juno-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 12px; margin-top: 12px; }
.juno-gal-cell { position: relative; cursor: pointer; aspect-ratio: 1; }
.juno-gal-cell img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--violet); background: #cfd3dd; transition: filter .15s, opacity .15s, box-shadow .15s; }
.juno-gal-cell.off img { filter: grayscale(1); opacity: .38; box-shadow: 0 0 0 2px var(--line); }
.juno-gal-check { position: absolute; top: -2px; right: -2px; width: 19px; height: 19px; cursor: pointer; accent-color: var(--violet); border-radius: 4px; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
/* Juno long-term memory (Settings). */
.juno-mem-add { display: flex; gap: 8px; margin: 4px 0 10px; }
.juno-mem-add input { flex: 1 1 auto; min-width: 0; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; font-family: inherit; font-size: 14px; background: var(--card); color: var(--ink); }
.juno-mem-list { display: flex; flex-direction: column; gap: 7px; }
.juno-mem-item { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }
.juno-mem-item span { flex: 1; min-width: 0; }
.juno-mem-del { flex: none; border: none; background: var(--card-2); color: var(--ink-soft); width: 26px; height: 26px; border-radius: 50%; font-size: 13px; cursor: pointer; }
.juno-mem-del:hover { background: var(--danger-tint, #fde8e8); color: var(--coral, #ef5a5a); }
.juno-mem-empty { font-size: 13px; color: var(--ink-soft); padding: 8px 2px; }
/* Lists + cards */
.list { display: flex; flex-direction: column; gap: 10px; }
.list.compact .card { padding: 10px 12px; }
/* Done list: a quiet one-line record, not an actionable card. */
.list.compact .done-row { display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.done-icon { flex: none; font-size: 13px; }
.done-title { flex: 1 1 auto; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: line-through; color: var(--ink-soft); }
.done-date { flex: none; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.history-more { display: flex; justify-content: center; margin: 6px 0 4px; }
.history-more .hint { font-weight: 600; margin-left: 4px; }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 14px; position: relative; border-left: 5px solid var(--violet);
}
.card.soft { border-left: none; box-shadow: var(--shadow-sm); margin-bottom: 10px; }
.card .card-body { font-size: 15px; white-space: pre-wrap; word-break: break-word; line-height: 1.4; }
/* Long transcripts / email threads: clamp to a preview with a fade until expanded. */
.card-bodywrap { position: relative; }
.card-bodywrap.collapsed .card-body { max-height: 128px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent);
  mask-image: linear-gradient(180deg, #000 68%, transparent); }
.card-body-toggle { border: none; background: none; color: var(--violet); font-weight: 700; font-size: 12px; cursor: pointer; padding: 5px 0 0; font-family: inherit; }
.card-body-toggle:hover { text-decoration: underline; }
.cap-parts-toggle { border: none; background: none; color: var(--violet); font-weight: 700; font-size: 12px; cursor: pointer; padding: 5px 0 0; font-family: inherit; display: block; }
.cap-parts-toggle:hover { text-decoration: underline; }
/* Meeting brief (AI intelligence on a recording) */
.mbrief { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 10px 12px; }
.mbrief-head { font-weight: 800; font-size: 13px; color: var(--ink); margin-bottom: 6px; }
/* Collapsed (History) mode: header becomes a tap target that reveals the detail. */
button.mbrief-toggle { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: none; background: none; font-family: inherit; cursor: pointer; padding: 0; }
.mbrief-caret { margin-left: auto; font-size: 11px; color: var(--ink-soft); flex: none; }
.mbrief-detail.hidden { display: none; }
.mbrief-collapsed .mbrief-summary { margin-bottom: 0; }
.mbrief-collapsed .mbrief-detail { margin-top: 8px; }
.mbrief-summary { font-size: 13px; line-height: 1.4; color: var(--ink); margin-bottom: 8px; }
.mbrief-link { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mbrief-link label { font-size: 12px; color: var(--ink-soft); font-weight: 700; }
.mbrief-link select { flex: 1; min-width: 140px; font-size: 13px; padding: 5px 7px; border: 1.5px solid var(--line); border-radius: 8px; }
.mbrief-sec { margin-top: 6px; font-size: 13px; }
.mbrief-sec > strong, .mbrief-sec-head > strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--ink-soft); margin-bottom: 2px; }
.mbrief-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px 10px; flex-wrap: wrap; margin-bottom: 2px; }
.mbrief-sec-head > strong { margin-bottom: 0; }
.mbrief-pushall { flex: none; white-space: nowrap; }
.mbrief-sec ul { margin: 0; padding-left: 18px; }
.mbrief-sec li { margin: 2px 0; line-height: 1.35; }
.mbrief-acts { display: flex; flex-direction: column; gap: 4px; }
.mbrief-act { display: flex; align-items: flex-start; gap: 8px; }
.mbrief-act-t { flex: 1; min-width: 0; line-height: 1.35; }
.mbrief-act-t em { color: var(--ink-soft); font-style: normal; font-weight: 700; }
.mbrief-due { color: var(--violet-d); font-weight: 700; }
.mbrief-push { flex: none; white-space: nowrap; }
/* Labeled speaker turns in a transcript */
.card-body--turns .turn { margin: 0 0 6px; line-height: 1.4; }
.card-body--turns .turn-who { font-weight: 800; color: var(--violet-d); margin-right: 4px; }

/* ===== Pre-meeting "Record?" prompt ===== */
.rec-prompt {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)); z-index: 90;
  display: flex; align-items: center; gap: 16px; max-width: min(460px, 92vw);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 10px 12px;
}
.rec-prompt.hidden { display: none; }
.rec-prompt-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rec-prompt-copy { min-width: 0; }
.rec-dot { font-size: 13px; line-height: 1; animation: recPulse 1.5s ease-in-out infinite; }
.rec-prompt-title { font-weight: 800; font-size: 14px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.rec-prompt-time { font-size: 12px; color: var(--ink-soft); }
.rec-prompt-acts { display: flex; gap: 6px; flex: none; }
@keyframes recPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rec-dot { animation: none; } }

/* ===== Global search / command bar ===== */
/* The Search entry lives in the tab bar (see .tab-search); highlight its icon a touch. */
.tab-search span { filter: saturate(1.2); }
/* Two-part Juno tab: 💬 and 🎧 flank Juno's photo — each a single-tap target, no words,
   one wide button at the same height as the other tab icons. */
.tab.juno-splittab { flex: 2 1 0; flex-direction: row; align-items: center; justify-content: center; gap: 8px; }
.juno-splittab .tab-juno-ava { margin: 0; width: 30px; height: 30px; cursor: pointer; transition: box-shadow .12s, transform .12s; }
/* Her face is a button too (opens juno.everydayjot.com docked right) — give it
   the same hover affordance as the 💬/🎧 buttons flanking it. */
.juno-splittab .tab-juno-ava:hover { box-shadow: 0 0 0 2.5px var(--violet); transform: scale(1.06); }
.juno-splittab .tab-juno-ava:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
.juno-split { border: 1px solid var(--line); background: var(--card); border-radius: 9px;
  font-family: inherit; font-size: 17px; line-height: 1; padding: 4px 7px; cursor: pointer; }
.juno-split:hover, .juno-split:active { border-color: var(--violet); }
.juno-split.talk { border-color: var(--violet); background: color-mix(in srgb, var(--violet) 10%, var(--card)); }
.cmdk { position: fixed; inset: 0; z-index: 120; background: rgba(20, 24, 50, .38); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 14px 14px; }
.cmdk.hidden { display: none; }
.cmdk-panel { width: 100%; max-width: 560px; background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(20, 24, 60, .35); overflow: hidden; display: flex; flex-direction: column; max-height: 76vh; }
.cmdk-input { border: none; border-bottom: 1px solid var(--line); font-size: 17px; padding: 16px 18px; outline: none; }
.cmdk-results { overflow-y: auto; }
.cmdk-group { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); padding: 10px 16px 4px; }
.cmdk-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 16px; cursor: pointer; border: none; background: none; width: 100%; text-align: left; }
.cmdk-item:hover, .cmdk-item.active { background: #f1f4ff; }
.cmdk-item .ci-ico { flex: none; font-size: 17px; line-height: 1.3; }
.cmdk-item .ci-main { flex: 1; min-width: 0; }
.cmdk-item .ci-title { font-size: 14px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item .ci-snip { font-size: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-empty { padding: 22px 16px; text-align: center; color: var(--ink-soft); font-size: 13px; }
.cmdk-foot { border-top: 1px solid var(--line); padding: 7px 16px; font-size: 11px; color: var(--ink-soft); }
/* Flash a capture card when jumped to from search */
@keyframes edFlash { 0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 255, 0); } 30% { box-shadow: 0 0 0 3px rgba(124, 92, 255, .55); } }
.card.flash { animation: edFlash 1.4s ease-in-out; }
/* Search-match highlight inside a jumped-to note/transcript */
mark.ed-hl { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 1px; box-shadow: 0 0 0 1px #f0c14b inset; }
mark.ed-hl:first-of-type { animation: edFlash 1.4s ease-in-out; }
.card .card-meta { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Inbox multi-select: shape/dismiss several related items together */
.cap-check {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 20px; height: 20px; cursor: pointer; accent-color: var(--violet);
}
.card .card-body { padding-right: 26px; }            /* keep text clear of the checkbox */
.card.selected { box-shadow: 0 0 0 2px var(--violet), var(--shadow-sm); }
.multi-bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(18px + var(--safe-bot));
  display: flex; align-items: center; gap: 8px;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(28, 50, 110, 0.22);
  border-radius: 999px; padding: 8px 12px; z-index: 60;
}
.multi-count { font-weight: 800; font-size: 13px; color: var(--ink); margin: 0 2px; white-space: nowrap; }

/* type accents */
.t-email { border-left-color: var(--sky); }
.t-call { border-left-color: var(--mint); }
.t-read { border-left-color: var(--pink); }
.t-research { border-left-color: var(--teal); }
.t-write { border-left-color: var(--amber); }
.t-strategize { border-left-color: var(--coral); }
.t-todo { border-left-color: #9bb6f2; }

.badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700;
  padding: 3px 9px; border-radius: 999px; background: #e7eefb; color: var(--violet-d);
}
.badge.lane-personal { background: #d8f0f6; color: #0e7490; }
.badge.lane-work { background: #e8ecff; color: var(--accent-tint-ink); }
.badge.done { background: #dcfce7; color: #15803d; }
.badge.pushed { background: #e0f2fe; color: #0369a1; }
.card-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }

/* Buttons */
.btn {
  border: none; border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: transform .08s, filter .15s, background .15s;
}
.btn:active { transform: scale(0.96); }
.btn-primary { background: var(--violet); color: var(--btn-ink); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-accent { background: linear-gradient(120deg, var(--sky), var(--teal)); color: var(--btn-ink); }
.btn-ghost { background: #e7eefb; color: var(--violet-d); }
.btn-soft { background: var(--accent-tint); color: var(--accent-tint-ink); }
.btn-danger-ghost { background: var(--danger-tint); color: #dc3545; }
.btn-mini { padding: 4px 10px; font-size: 12px; border-radius: 9px; }
.btn-block { width: 100%; margin-top: 10px; }
.btn:disabled { opacity: .55; cursor: default; }

.empty { text-align: center; color: var(--ink-soft); padding: 26px 10px; font-size: 14px; }
.search { margin-bottom: 12px; }

/* Agenda */
.agenda { margin-bottom: 8px; }
.agenda-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 12px 14px; margin-bottom: 6px; }
.agenda-day { font-size: 13px; font-weight: 800; color: var(--ink-soft); margin: 8px 2px 6px; }
.agenda-day:first-child { margin-top: 0; }
.agenda-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.agenda-row:first-of-type { border-top: none; }
.agenda-row.muted { opacity: .5; }
.agenda-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.agenda-time { font-size: 12px; font-weight: 700; color: var(--ink-soft); width: 64px; flex: none; }
.agenda-title { flex: 1; font-size: 14px; min-width: 0; }
.agenda-title .agenda-cal { font-size: 11px; color: var(--ink-soft); }
.agenda-prep { border: none; background: #e7eefb; color: var(--violet-d); font-size: 11px; font-weight: 700; border-radius: 8px; padding: 4px 8px; cursor: pointer; flex: none; }
.agenda-empty { font-size: 13px; color: var(--ink-soft); padding: 4px 2px; }
.agenda-err { font-size: 12px; color: var(--coral); margin-top: 6px; }
.agenda-refresh { float: right; border: none; background: none; color: var(--violet); font-size: 12px; font-weight: 700; cursor: pointer; }

/* Calendar settings list */
.cal-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cal-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.cal-item .cal-name { flex: 1; font-size: 14px; font-weight: 600; }
.cal-item .cal-host { font-size: 11px; color: var(--ink-soft); }
.cal-item.muted .cal-swatch { opacity: .4; }
.cal-mute { font-size: 11px; color: var(--ink-soft); font-weight: 700; display: flex; align-items: center; gap: 4px; cursor: pointer; flex: none; }
.cal-add-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.cal-add-row input[type=color] { width: 44px; height: 40px; padding: 2px; border-radius: 10px; flex: none; }
.cal-add-row .btn { flex: 1; }
.help { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.help summary { cursor: pointer; font-weight: 700; color: var(--violet-d); }
.help p { margin: 8px 0; line-height: 1.45; }
.help code { background: #eaf0fb; padding: 1px 5px; border-radius: 5px; }
.note { font-size: 12px; color: var(--ink-soft); line-height: 1.45; margin: 10px 2px 0; }
.history-derived { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: #eaf0fb; color: var(--violet-d); }

/* ===== Tab bar ===== */
.tabbar {
  flex: none;
  display: flex; justify-content: space-around;
  background: var(--glass); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 8px 0 calc(8px + var(--safe-bot));
}
.tab {
  border: none; background: none; color: var(--ink-soft); font-size: 9px; font-weight: 700;
  display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer;
  font-family: inherit; padding: 3px 4px; border-radius: 10px;
  flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden;
}
.tab span { font-size: 18px; line-height: 1; }
.tab.active { color: var(--violet); }
.tab-sub { font-size: 8px; font-weight: 800; line-height: 1; color: var(--mint); margin-top: 1px; }
.tab-sub:empty { display: none; }

/* ===== Revenue (charts, history rows, section) ===== */
.rev-svg { width: 100%; height: auto; display: block; }
.rev-empty { color: var(--ink-soft); font-size: 12px; padding: 6px 0; }
.client-revmini { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.client-revmini .rev-svg { max-height: 48px; }
/* client edit sheet — revenue history */
.ce-revchart { margin: 4px 0 8px; }
.ce-revadd { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ce-revadd input[type="month"] { flex: 0 0 auto; width: auto; }
.ce-revadd .ce-revamt { flex: 1; min-width: 90px; }
.ce-revrows .rev-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; cursor: pointer; }
.rev-row .rev-m { color: var(--ink); }
.rev-cur { font-size: 10px; font-weight: 700; color: var(--teal); background: #e2f5f3; border-radius: 999px; padding: 0 6px; }
.rev-row .rev-a { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; }
.rev-row .rev-a.pos { color: var(--mint); }
.rev-row .rev-a.neg { color: var(--coral); }
.rev-row .rev-a.zero { color: var(--ink); }
.rev-row .rev-del { flex: none; border: none; background: var(--danger-tint); color: var(--coral); border-radius: 6px; cursor: pointer; font-size: 11px; padding: 3px 8px; }
/* revenue section view */
.rev-summary { display: flex; flex-direction: column; gap: 10px; }
.rev-figs { display: flex; gap: 24px; flex-wrap: wrap; }
.rev-fig { display: flex; flex-direction: column; gap: 2px; }
.rev-fig-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ink-soft); }
.rev-fig-val { font-size: 22px; font-weight: 800; color: var(--ink); }
.rev-fig-val.accent { color: var(--mint); }
.rev-total-chart { width: 100%; }
.rev-sortbar { display: flex; align-items: center; gap: 8px; margin: 16px 0 10px; flex-wrap: wrap; }
.rev-sortbtn { border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 999px; font-size: 12px; font-weight: 700; padding: 5px 12px; cursor: pointer; font-family: inherit; }
.rev-sortbtn.on { background: var(--violet); color: var(--btn-ink); border-color: var(--violet); }
.rev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.rev-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; transition: box-shadow .15s, transform .15s; }
.rev-card:hover { box-shadow: 0 6px 18px rgba(28,50,110,.12); transform: translateY(-1px); }
.rev-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rev-logo { width: 34px; height: 34px; flex: none; border-radius: 8px; object-fit: contain; background: var(--card); border: 1px solid var(--line); }
.rev-logo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--btn-ink); background: linear-gradient(135deg, var(--violet), var(--sky)); border: none; }
.rev-card-name { flex: 1; min-width: 0; font-weight: 800; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rev-card-mo { flex: none; font-weight: 800; font-size: 14px; color: var(--ink); }
.rev-card-mo.pos { color: var(--mint); }
.rev-card-mo.neg { color: var(--coral); }
.rev-card-mo small { font-weight: 600; color: var(--ink-soft); font-size: 10px; }

/* ===== Review (file repository) ===== */
.review-drop { border: 2px dashed var(--line); border-radius: 14px; background: var(--card); padding: 22px; text-align: center; color: var(--ink-soft); transition: border-color .15s, background .15s; }
.review-drop.drag { border-color: var(--violet); background: #f3f1ff; color: var(--ink); }
.review-drop-inner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 14px; }
.review-drop-icon { font-size: 26px; }
.review-drop-sub { font-size: 12px; color: var(--ink-soft); }
.review-pick { color: var(--violet); font-weight: 700; cursor: pointer; text-decoration: underline; }
.review-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.rv-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-sm); }
.rv-head { display: flex; align-items: center; gap: 8px; }
.rv-icon { font-size: 22px; flex: none; }
.rv-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-meta { flex: none; font-size: 11px; color: var(--ink-soft); }
.rv-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.rv-btn { border: 1px solid var(--line); background: var(--card); color: var(--violet-d); border-radius: 8px; font-size: 12px; font-weight: 700; padding: 5px 10px; cursor: pointer; font-family: inherit; }
.rv-btn:hover { background: #eef2fb; }
.rv-btn:disabled { opacity: .6; cursor: default; }
.rv-btn.rv-speak.on { background: var(--violet); color: var(--btn-ink); border-color: var(--violet); }
.rv-btn.rv-del { margin-left: auto; color: var(--coral); border-color: #f6d7dc; }
.rv-btn.rv-del:hover { background: var(--danger-tint); }
.rv-sumwrap { margin-top: 10px; border-top: 1px solid var(--line); }
.rv-sumtoggle { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 700; color: var(--ink-soft); padding: 8px 0 4px; display: flex; align-items: center; gap: 6px; }
.rv-sumtoggle:hover { color: var(--violet); }
.rv-caret { font-size: 10px; width: 10px; display: inline-block; }
.rv-summary { font-size: 13px; line-height: 1.5; color: var(--ink); white-space: normal; padding-bottom: 2px; }
.rv-sumwrap.collapsed .rv-summary { display: none; }

/* ===== Dashboard ===== */
/* Top bar is a flexible wrapping row: the control cluster (Plan + toggles + banks + Oura)
   and the client strip take their natural widths, and the weather panel flex-grows to fill
   the slack. A rigid 3-col grid used to trap the left cluster in a ~1/3 column, so adding the
   Oura strip overflowed it and hid behind the weather panel. With flex+wrap nothing is ever
   hidden — on a narrow viewport (e.g. iPad portrait) the weather wraps to its own line. */
.dash-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 8px; }
.dash-bar-left { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
.dash-bar-right { flex: 0 1 auto; display: flex; align-items: center; justify-content: flex-end; min-width: 0; overflow: hidden; }
.dash-bar #plan-day-btn { flex: none; }
/* Juno play button — replaces "Plan my day" in the top-left. Branded gradient pill with a
   circular avatar + wordmark + play glyph; sized to fit the existing bar (no taller bar). */
.juno-btn {
  flex: none; display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 4px 15px 4px 4px; border-radius: 999px;
  background: linear-gradient(120deg, var(--violet), var(--sky));
  color: var(--btn-ink); text-decoration: none; border: none; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.juno-btn:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,0,0,.24); filter: saturate(1.07); }
.juno-btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.juno-ava {
  width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 28%;
  flex: none; background: #cfd3dd; box-shadow: 0 0 0 2px var(--btn-ink), 0 1px 5px rgba(0,0,0,.3);
}
.juno-word { font-weight: 800; font-size: 16px; letter-spacing: .2px; line-height: 1; }
.juno-play {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 20px; height: 20px; border-radius: 50%; background: rgba(128,128,128,.24);
  font-size: 9px; line-height: 1; padding-left: 1px;
}
.juno-btn:hover .juno-play { background: rgba(128,128,128,.36); }
@media (max-width: 760px) { .dash-bar-right { justify-content: flex-start; } }
/* Weather strip — fills the bar to the right of "Plan my day". */
/* Dashboard bank-balance strip: account icon over its latest balance (green/red vs threshold). */
.dash-banks { flex: none; display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.dash-banks:empty { display: none; }
/* Oura Ring strip: steps (today + 10-day graph) and sleep (score/time + 10-day trend). */
.dash-oura { flex: none; display: flex; align-items: stretch; gap: 5px; min-width: 0; }
.dash-oura:empty { display: none; }
.oura-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: var(--card); border-radius: 9px; box-shadow: var(--shadow-sm); padding: 4px 7px; min-width: 82px; }
.oura-label { font-size: 8px; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; line-height: 1.1; white-space: nowrap; }
.oura-val { font-size: 14px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; }
.oura-val small { font-size: 9px; font-weight: 700; color: var(--ink-soft); margin-left: 3px; }
.oura-spark { display: block; margin-top: 1px; overflow: visible; }
/* Top-aligned with a fixed 2-line name box so the BALANCE sits at the same height on
   every card, whether the account name wraps to one line or two. */
.bank-cell { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px;
  background: var(--card); border-radius: 9px; box-shadow: var(--shadow-sm); padding: 5px 5px 4px; min-width: 50px; max-width: 74px; }
.bank-logo { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; background: var(--card); flex: none; }
.bank-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 12px; }
.bank-name { font-size: 8px; font-weight: 600; color: var(--ink-soft); text-align: center; line-height: 1.05;
  height: 2.1em; /* reserve two lines so one-line names don't raise the balance */
  display: flex; align-items: center; justify-content: center;
  max-width: 66px; overflow: hidden; }
.bank-name > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bank-bal { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.05; margin-top: auto; }
.bank-bal.pos { color: var(--mint); }
.bank-bal.neg { color: var(--coral); }
/* Settings: bank-strip account picker */
.bank-min-row { display: flex; align-items: center; gap: 6px; }
.bank-min-row .bank-pre { font-weight: 800; color: var(--ink-soft); }
.bank-min-row input { flex: 1; }
.bank-picker { display: flex; flex-direction: column; gap: 4px; margin: 4px 0 12px; max-height: 360px; overflow-y: auto; }
.bp-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.bp-row:hover { background: #f6f8fe; }
.bp-check { flex: none; width: 17px; height: 17px; }
.bp-logo { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; background: var(--card); flex: none; }
.bp-logo-ph { display: flex; align-items: center; justify-content: center; font-size: 14px; }
.bp-name { font-weight: 700; font-size: 13px; }
.bp-inst { font-size: 11px; color: var(--ink-soft); }
.bp-bal { margin-left: auto; font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink); }
.bp-check:disabled + .bp-logo, .bp-check:disabled ~ span { opacity: .5; }
.dash-weather {
  flex: 1 1 300px; min-width: 300px; display: flex; align-items: center; gap: 16px;
  background: var(--card); border-radius: 12px; box-shadow: var(--shadow-sm);
  padding: 6px 14px; overflow: hidden;
}
.weather-setup { border: none; background: none; color: var(--violet-d); font-weight: 700; font-size: 13px; cursor: pointer; font-family: inherit; padding: 0; }
.weather-err { color: var(--ink-soft); font-size: 12px; }
.weather-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.wx-now { flex: none; display: flex; align-items: center; gap: 10px; padding-right: 16px; border-right: 1px solid var(--line); }
.wx-now-emoji { font-size: 26px; line-height: 1; }
.wx-now-temp { font-size: 26px; font-weight: 800; color: var(--ink); }
.wx-now-meta { display: flex; flex-direction: column; line-height: 1.25; }
.wx-now-meta b { font-size: 13px; }
.wx-now-meta span { font-size: 11px; color: var(--ink-soft); }
.wx-days { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 6px; overflow: hidden; }
.wx-day {
  flex: 1 1 0; min-width: 0; height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  padding: 0 4px; border-radius: 8px; text-align: center; white-space: nowrap;
}
.wx-day:hover { background: var(--bg); }
.wx-dow { font-size: 9px; font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .3px; line-height: 1.2; }
.wx-emoji { font-size: 13px; line-height: 1.15; }
.wx-hilo { font-size: 10px; color: var(--ink-soft); }
.wx-hilo b { color: var(--ink); }
.wx-precip { font-size: 8px; color: var(--sky); font-weight: 700; }
/* Client logos — flush right of the weather, sorted by monthly revenue (high→low). */
/* Live sports scores strip (top of calendar column; only while a game is on) */
.dash-scores { flex: none; display: flex; flex-direction: column; gap: 4px; padding: 7px 11px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-sm); }
.score-row { font-size: 12px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.score-row strong { font-weight: 800; }
.score-state { color: var(--ink-soft); font-size: 11px; }
.score-live { width: 7px; height: 7px; border-radius: 50%; background: #e5484d; flex: none; animation: scorePulse 1.6s infinite; }
@keyframes scorePulse { 0% { box-shadow: 0 0 0 0 rgba(229,72,77,.5); } 70% { box-shadow: 0 0 0 5px rgba(229,72,77,0); } 100% { box-shadow: 0 0 0 0 rgba(229,72,77,0); } }
.dash-clients { flex: none; display: flex; align-items: flex-start; gap: 6px; }
.dc-item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dc-rev { font-size: 9px; font-weight: 700; line-height: 1; white-space: nowrap; }
.dc-rev.pos { color: var(--mint); }
.dc-rev.zero { color: var(--ink); }
.dc-rev.neg { color: var(--coral); }
.dc-logo { flex: none; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); background: var(--card); border-radius: 8px; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.dc-logo img { width: 100%; height: 100%; object-fit: contain; }
.dc-logo .dc-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--btn-ink); background: linear-gradient(135deg, var(--violet), var(--sky)); }
.dc-logo:hover { box-shadow: 0 0 0 2px var(--violet); }
.dash-launch { flex: none; display: flex; flex-direction: column; gap: 6px; padding-top: 10px; max-height: 132px; overflow-y: auto; }
/* Each row is one line of equal-width buttons; both rows share the same column count
   (--launch-cols, set in JS to the larger row) so the top and bottom buttons align. */
.launch-group { display: grid; grid-template-columns: repeat(var(--launch-cols, 12), minmax(0, 1fr)); gap: 6px; }
/* Launchpad is desktop-only — it opens positioned browser windows, which makes no
   sense on touch devices. Hide it on iPhone/iPad (touch-primary, no hover). */
@media (hover: none) and (pointer: coarse) { .dash-launch, .dash-weather, .dash-clients, .dash-banks, .dash-oura { display: none; } }
/* iPad has the room, so bring the bank balances + weather + Oura strip back on wide
   touch screens (≥768px). The launchpad (opens desktop windows) and the client-logo
   strip stay hidden on touch; iPhone stays clean. :empty still hides an empty strip. */
@media (hover: none) and (pointer: coarse) and (min-width: 768px) { .dash-weather, .dash-banks, .dash-oura { display: flex; } }
.launch-group.personal-group .launch-btn { background: var(--teal); }
/* Copy-a-link launchers (Availability) are PINK, his call 2026-09-30, so the one button that copies
   instead of opening a site stands out in either row. Keyed to #dash-launch so it outranks the Personal
   row's teal (.launch-group.personal-group .launch-btn is three classes). Overdue red still wins.
   Label contrast: white on #d6336c 4.62:1 (light); #14161f on #f783ac 7.56:1 (dark). */
#dash-launch .launch-btn.copy-btn, #dash-launch .launch-btn.pin-btn { background: #d6336c; }
/* Narrow windows: when one line cannot fit at 8px, labels may wrap between words (never inside
   one) and the side padding shrinks. fitLauncherFont() turns this on only when it is needed. */
#dash-launch.launch-wrap .launch-btn { white-space: normal; overflow-wrap: normal; word-break: normal; text-overflow: clip; line-height: 1.1; padding: 5px 3px; }
:root[data-theme="dark"] #dash-launch .launch-btn.copy-btn, :root[data-theme="dark"] #dash-launch .launch-btn.pin-btn { background: #f783ac; }
.launch-btn.app-btn { background: #475569; }
/* Join-in-app buttons on meeting rows (dashboard + Plan agenda) */
.mtg-join {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 6px; padding: 1px 7px; border: 0; border-radius: 999px;
  font-size: 10px; font-weight: 700; line-height: 1.5;
  cursor: pointer; vertical-align: middle; white-space: nowrap;
  /* Neutral by request — the brand blues (Teams #4b53bc / Zoom #2d8cff) were the
     loudest thing on a dense schedule. Same button, same behaviour, quieter skin. */
  background: var(--card-2); color: var(--ink-soft); border: 1px solid var(--line);
}
/* Auto-record flag on calendar rows: red = armed, grey = opted out. Inline in
   the time row so it costs no vertical space. */
.rec-flag { display: inline-flex; align-items: center; margin-left: 5px; padding: 0 5px; border: none; border-radius: 999px; background: #fdecec; color: #e5484d; font-size: 10px; line-height: 1.5; cursor: pointer; vertical-align: middle; }
.rec-flag:hover { background: #fbdcdc; }
.rec-flag.off { background: #eef1f6; color: #9aa3b8; }
.dash-mtg.past .rec-flag { opacity: .5; }
.mtg-join:hover { background: var(--card); color: var(--ink); }
.agenda-row .mtg-join { margin-left: auto; }
.agenda-row .agenda-prep { margin-left: 6px; }
/* Overdue nudge: launcher not clicked within its remind window */
.launch-btn.overdue { background: #e5484d !important; box-shadow: 0 0 0 2px rgba(229,72,77,.35); animation: overduePulse 1.6s ease-in-out infinite; }
@keyframes overduePulse { 0%,100% { box-shadow: 0 0 0 2px rgba(229,72,77,.30); } 50% { box-shadow: 0 0 0 4px rgba(229,72,77,.18); } }
@media (prefers-reduced-motion: reduce) { .launch-btn.overdue { animation: none; } }
.launch-btn { border: none; background: var(--violet); color: var(--btn-ink); font-weight: 700; font-size: var(--launch-fs, 11px); border-radius: 9px; padding: 7px 6px; cursor: pointer; white-space: nowrap; text-align: center; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.launch-btn:active { transform: scale(0.96); }
.launch-coords { display: flex; gap: 6px; }
.launch-coords input { width: 25%; }
.launch-item { border-bottom: 1px solid var(--line); padding: 8px 0 10px; }
.launch-item input { margin-bottom: 6px; }
.launch-item-actions { display: flex; gap: 6px; }
.li-pin-wrap { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; cursor: pointer; }
.li-pin-wrap input { margin: 0; accent-color: #d6336c; }
.dash-col { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
/* Calendar grows to fill whatever the polls panel doesn't need; its floor (~60%
   of the column) is set in px by applyCalFloor() since a % min-height collapses
   to 0 on a flex item. Polls take their natural height (and scroll past the floor). */
.dash-cal-panel { flex: 1 1 0; min-height: 0; }
.dash-poll-panel { flex: 0 1 auto; min-height: 0; }
/* The Congress card (2026-10-26): a canvas sized by app.js to the panel's width; the two small buttons sit
   in the top-right corner over the card's empty margin. */
.dash-panel.dash-congress-panel { position: relative; padding: 10px 12px; overflow-y: auto; } /* a short panel scrolls the card inside itself; two classes, so .dash-panel { overflow: hidden } further down cannot win */
.dash-congress { display: block; max-width: 100%; }
.dash-congress-tools { position: absolute; top: 8px; right: 10px; display: flex; gap: 4px; z-index: 1; }
.dash-congress-tools .dash-mini { margin-left: 0; }
.dash-congress-note { font-size: 13px; padding: 4px 2px; }

/* polling charts */
.poll-svg { width: 100%; height: auto; display: block; }
.poll-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 11px; }
.poll-leg { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); }
.poll-dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; flex: none; }
.poll-leg strong { color: var(--ink); }
.poll-close { font-size: 11px; color: var(--ink-soft); margin-top: 4px; }
.poll-empty { font-size: 12px; color: var(--ink-soft); padding: 8px 2px; }
.dash-poll-item { margin-bottom: 12px; }
.dash-poll-title { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
/* Compact sparkline rows for the dashboard polling widget */
.dpoll-row { border-top: 1px solid var(--line); }
.dpoll-row:first-child { border-top: none; }
.dpoll-row-main { display: flex; align-items: center; gap: 8px; padding: 5px 0; cursor: pointer; }
.dpoll-row-main:hover { background: var(--bg); }
.dpoll-name { flex: 1 1 auto; min-width: 0; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Trend column (was the sparkline). Keeps the sparkline's 54px width so the rows
   stay column-aligned; the arrow just centres inside it. */
.dpoll-spark { flex: none; width: 54px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.dpoll-trend { font-size: 14px; line-height: 1; font-weight: 800; cursor: help; }
.dpoll-trend.flat { color: var(--ink-soft); opacity: .55; font-size: 13px; }
.dpoll-date { flex: none; font-size: 10px; font-weight: 700; color: var(--violet-d); background: var(--accent-tint); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.dpoll-lead { flex: none; max-width: 48%; font-size: 11px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dpoll-lead strong { color: var(--ink); font-weight: 700; }
.dl-dot { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 3px; vertical-align: middle; }
.dl-sep { color: var(--line); }
.dpoll-row.open .dpoll-name { color: var(--violet); }
.dpoll-expand { padding: 2px 0 8px; }
/* Settings: Kalshi poll manager rows */
.poll-set-list { margin-top: 10px; }
.poll-set-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.poll-set-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; }
.poll-set-date { flex: 0 0 150px; width: 150px; font-size: 13px; padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 8px; }
.poll-set-dash { flex: none; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 4px; }
.poll-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px; margin-bottom: 12px; max-width: 560px; }
.poll-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
/* Collapsed-by-default market summary — tap to expand the full chart (.pcard-body). */
.poll-card .poll-row-main { border-top: 1px solid var(--line); margin: 4px 0 0; border-radius: 6px; }
.poll-card .poll-row-main:hover { background: var(--bg); }
.poll-row-caret { flex: none; color: var(--ink-soft); font-size: 11px; transition: transform .12s; }
.poll-card .poll-row-main.open .poll-row-caret { color: var(--violet); }
.poll-card .pcard-body { margin-top: 8px; }
.poll-card .pcard-body.hidden { display: none; }
.poll-title { font-weight: 800; font-size: 14px; flex: 1; min-width: 0; }
.poll-toggle { font-size: 11px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.poll-rm { border: none; background: var(--danger-tint); color: #dc3545; border-radius: 8px; width: 26px; height: 26px; cursor: pointer; flex: none; }
.dash-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 12px; }
/* Let tracks honor their fr ratios instead of stretching to content min-width,
   so the side columns stay equal and the center stays centered. */
.dash-grid > * { min-width: 0; }
.dash-panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dash-panel-head { flex: none; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 14px; display: flex; align-items: center; gap: 6px; }
/* Compact "🏛️ House" summary line under the Polling header — sits outside the
   scrollable market list so it's always visible, not something you scroll past. */
.dash-house-line { flex: none; padding: 5px 14px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 800; cursor: help; line-height: 1.3; }
.dash-house-line.muted { color: var(--ink-soft); font-weight: 500; cursor: default; }
/* The Polling panel stacks three header rows (House / Senate / "need N of 6") before
   any race shows, so they were eating 139px of a 158px panel. Tighten just this
   panel's chrome — other dash panels keep the roomier default. */
.dash-poll-panel .dash-panel-head { padding: 5px 14px; line-height: 1.3; }
/* Shrunk so the button — not the text — stops setting this row's height, keeping all
   three header rows the same 29px. */
.dash-poll-panel .dash-mini { width: 19px; height: 19px; font-size: 11px; border-radius: 6px; }
/* Senate line shares its row with the refresh button (margin-left:auto on .dash-mini
   pushes it right). */
.dash-senate-row { display: flex; align-items: center; }
.dash-senate-row .muted { color: var(--ink-soft); font-weight: 500; }
/* Control threshold: the rule sits under the Nth race, where N is how many of these
   Democrats need to win the chamber. Races are sorted strongest-D first, so
   everything ABOVE the line is a race they're currently projected to take. */
/* Senate races that put Democrats at 51+ where the Democrat leads: a very light blue band (it
   replaced a blue rule under the pivot race). The band bleeds 6px past the text so the columns
   stay aligned with the unshaded rows. The party colors are redefined inside it because the
   normal blue only just passes on white (4.55:1) and any tint drops it under 4.5. Measured:
   light  #1d62eb on #eaf2ff 4.66, #cc2f37 4.63, ink 14.3, ink-soft 5.3
   dark   #6d9bff on #1e2a44 5.29, #ff6b74 5.18, ink 12.0, ink-soft 5.2 */
.dpoll-row.majority { background: #eaf2ff; --party-d: #1d62eb; --party-r: #cc2f37; margin: 0 -6px; padding: 0 6px; border-radius: 8px; }
:root[data-theme="dark"] .dpoll-row.majority { background: #1e2a44; --party-d: #6d9bff; --party-r: #ff6b74; }
.dpoll-row.majority .dpoll-row-main:hover { background: transparent; }
/* two shaded rows in a row read as one band, not two stripes */
.dpoll-row.majority + .dpoll-row.majority { border-top-color: transparent; }
/* Majority-pivot race under the House line. Reuses the .dpoll-row-main layout so it
   lines up column-for-column with the Senate races below; only the outer padding
   differs (it's a header row, not a list item). */
.dash-pivot-line { flex: none; padding: 0 14px; border-bottom: 1px solid var(--line); cursor: help; }
.dash-pivot-line .dpoll-row-main { padding: 4px 0; cursor: help; }
.dash-pivot-line .dpoll-row-main:hover { background: none; }
/* Column alignment. The race-name cell is a FIXED width shared by the pivot row and
   every Senate row, so the date chip, sparkline and leaders all start at the same x
   down the whole panel. Left to `flex: 1 1 auto` the name sizes to its own text
   ("NY-17" vs "Michigan Senate") and each row's sparkline lands somewhere different. */
.dash-poll-panel { --poll-name-col: 108px; }
#dash-polls .dpoll-name,
.dash-pivot-line .dpoll-name { flex: 0 0 var(--poll-name-col); width: var(--poll-name-col); }
#dash-polls .dpoll-date,
.dash-pivot-line .dpoll-date { flex: none; }
/* Leaders take whatever is left, rather than being sized by their own text — that
   keeps the sparkline column from being pushed around by long candidate names. */
#dash-polls .dpoll-lead,
.dash-pivot-line .dpoll-lead { flex: 1 1 auto; max-width: none; text-align: right; }
@media (max-width: 560px) { .dash-poll-panel { --poll-name-col: 84px; } }
/* Weekly watch: a race he isn't tracking has become tighter than one he is. */
.senate-watch-flag { flex: none; display: flex; align-items: flex-start; gap: 6px; padding: 6px 14px;
  border-bottom: 1px solid var(--line); background: var(--danger-tint); font-size: 11px; line-height: 1.35; }
.senate-watch-flag b { font-weight: 800; }
.senate-watch-x { flex: none; margin-left: auto; border: none; background: none; color: var(--ink-soft);
  cursor: pointer; font-size: 12px; padding: 0 2px; line-height: 1; }
.dash-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 14px; }
.dash-mini { margin-left: auto; border: none; background: #e7eefb; color: var(--violet-d); border-radius: 8px; width: 28px; height: 28px; font-size: 14px; cursor: pointer; flex: none; }
.dash-mini + .dash-mini { margin-left: 6px; }
.dash-mini.spinning { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.dash-seg { display: none; }
.dash-inbox { margin-top: 0; }
.dash-inbox-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--ink); margin-bottom: 10px; }
/* Capture box now sits BELOW the inbox in the dash panel — separate it + label it. */
.capture-head { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
/* Pin the Capture box to the bottom of the panel; the Inbox scrolls in the space above,
   so Capture is ALWAYS visible regardless of how many items are in the inbox. */
.dash-panel[data-panel="capture"] .dash-panel-body { display: flex; flex-direction: column; overflow: hidden; }
.dash-panel[data-panel="capture"] .dash-inbox { flex: 1 1 auto; min-height: 60px; overflow-y: auto; margin: 0; }
.dash-panel[data-panel="capture"] .capture-box { flex: none; margin-top: 12px; }
/* The Inbox is not a permanent resident any more: its header and list show only when something
   is actually waiting in it (a finished recording, an emailed note). loadInbox() toggles has-inbox. */
.dash-panel[data-panel="capture"]:not(.has-inbox) .dash-panel-head { display: none; }
.dash-panel[data-panel="capture"]:not(.has-inbox) .dash-inbox { display: none; }
/* The Inbox is the SMALLER of the two (his call, 2026-09-30): Capture is where he works, the Inbox card
   scrolls inside itself. Was 34%. */
.dash-panel[data-panel="capture"].has-inbox .dash-inbox { flex: 0 1 auto; max-height: 22%; }

/* ===== Picture slideshow (public/slideshow.js) ===== */
/* The stage is shaped like an iPad in landscape (1.43:1, what he sizes the pictures for), so a
   picture of that shape fills it with no bars, and object-fit:contain means any other shape is
   still shown whole, never cropped. The near-black ground is deliberate and the same in both
   themes: a photograph needs a neutral surround, and it makes the control contrast a constant. */
.slides { position: relative; flex: 0 1 auto; width: 100%; max-height: 66%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
/* min-height:0 above matters: a flex item's automatic minimum is its own content, which here is the
   stage at its full aspect-ratio height, so without it the picture could never give space back to the
   controls strip and the Capture box, and the panel body scrolled instead. */
.slides-stage { position: relative; flex: 1 1 auto; width: 100%; aspect-ratio: var(--slides-ar, 4 / 3); min-height: 110px; container-type: inline-size; align-self: center; max-width: 100%;
  border-radius: 14px; overflow: hidden; background: #0f1218; }
.slides-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 1s ease; }
.slides-img.show { opacity: 1; }
/* Brightness applies to the two picture layers ONLY (set in Settings, default 120%). */
.slides-img { filter: brightness(var(--slides-bright, 1.2)); }
.slides-bright-range { width: 100%; max-width: 320px; accent-color: var(--violet); }
.slides-img:not([src]) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .slides-img { transition: none; } }
/* The box takes its shape from the pictures (slideshow.js sets --slides-ar from the first one), so an
   iPad-sized folder fills it edge to edge. When a short window caps the height and the box goes a
   little wider than the picture, .cover fills it and trims a sliver instead of showing bars; past a
   6% mismatch the picture is shown whole again rather than cropped hard. */
.slides-img.cover { object-fit: cover; }
.slides.pics-on .slides-stage { cursor: pointer; } /* a click on the picture shows the clock */
/* Hide swaps the picture for a clock in the same box. White on the #0f1218 ground is 18.6:1 and the
   date grey #b4bacd is 9.8:1. Sized from the box width (container units) so it fills at any size. */
.slides-clock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.2cqw; color: #fff; text-align: center; font-variant-numeric: tabular-nums; }
/* 28cqw: measured on the WIDEST string it can show ("12:00" + AM + CDT), which at 19cqw filled 59.9% of the
   box; 28cqw fills about 88%, a margin of roughly 6% each side, and never changes size with the hour. */
/* Digits and a small stack to their right: AM/PM on top, the zone sitting on the digits' baseline
   (last baseline), so the zone reads as part of the time line. Zone in the date grey: 9.8:1. */
.slides-clock-time { display: flex; align-items: last baseline; font-size: clamp(40px, 28cqw, 360px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.slides-clock-side { display: flex; flex-direction: column; align-items: flex-start; margin-left: .2em; line-height: 1.05; gap: .06em; }
.slides-clock-ampm { font-size: .3em; font-weight: 700; letter-spacing: .02em; }
.slides-clock-zone { font-size: .3em; font-weight: 700; letter-spacing: .02em; color: #b4bacd; }
/* The date was 3.6cqw; about 70% larger now that it no longer carries the zone. */
.slides-clock-date { font-size: clamp(16px, 6.2cqw, 68px); font-weight: 600; color: #b4bacd; line-height: 1.15; }
.slides-clock-dow, .slides-clock-md { display: block; }
.slides-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 18px; text-align: center; color: #e9ebf4; font-size: 14px; line-height: 1.4; }
.slides-sub { font-size: 12px; color: #b4bacd; }
.slides-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.slides-btn { border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.10); color: #fff; font: inherit; font-weight: 700;
  font-size: 13px; padding: 8px 14px; border-radius: 10px; cursor: pointer; }
.slides-btn:hover { background: rgba(255,255,255,.2); }
.slides-btn.primary { background: var(--violet); border-color: transparent; color: var(--btn-ink); }
/* The controls sit in a strip UNDER the picture, between it and the Capture box, so they never
   cover a picture and are always in the same place. Colors are the app's own text-on-tint pairs,
   measured: Pause/Next 6.9:1 light and 7.2:1 dark; Hide (ink on the danger tint) 14.2:1 and 12.2:1.
   Hide is the one to find at a glance when a picture is not OK, so it is the only one with a
   warm tint. */
.slides-bar { flex: none; display: flex; justify-content: center; gap: 8px; }
.slides-bar button { border: 0; background: var(--accent-tint); color: var(--accent-tint-ink); font: inherit; font-weight: 700;
  font-size: 13px; padding: 7px 16px; border-radius: 10px; cursor: pointer; white-space: nowrap; }
.slides-bar button[data-act="hide"] { background: var(--danger-tint); color: var(--ink); }
.slides-bar button:hover { filter: brightness(.96); }
.slides-bar button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }
/* With a slideshow on screen the Capture box stops hogging 588px of empty space and takes
   whatever is left under the picture, buttons pinned at the bottom. Hide the slideshow and the
   old tall box comes straight back. */
.dash-panel[data-panel="capture"].has-slides .capture-box { flex: 1 1 0; min-height: min-content; display: flex; flex-direction: column; }
/* flex-basis 0, not auto: with auto the text area starts at its 8-row intrinsic height, which makes
   the Capture box refuse to shrink below ~190px, so the PICTURE gave way instead. He wants the
   Capture box to be the one that shrinks; the picture keeps its shape. */
.dash-panel[data-panel="capture"].has-slides .capture-box textarea { flex: 1 1 0; min-height: 96px; resize: none; }
/* Order is Inbox, Capture, pictures: the gap goes ABOVE the pictures, and with no Inbox showing the
   Capture box starts flush at the top of the panel instead of 12px down. */
.dash-panel[data-panel="capture"] .slides { margin-top: 12px; }
.dash-panel[data-panel="capture"]:not(.has-inbox) .capture-box { margin-top: 0; }
/* With the pictures on screen too, the Inbox takes 16% (about 200px at his 2000x1560, was 377px), so the
   Capture box is clearly the bigger of the two. This also clears the short-window squeeze that once made
   the panel scroll (1600x900 and narrow Chrome windows, where the Capture buttons stack in two rows). */
.dash-panel[data-panel="capture"].has-slides.has-inbox .dash-inbox { max-height: 16%; }
/* PHONES (narrow, OR short like a phone turned sideways). The desktop rules above give
   the capture textarea a fixed min-height of 588px. On a phone that made the Capture box
   733px tall inside a 594px panel, so the action buttons sat below the fold of a view that
   cannot scroll, and in landscape (wider than 760px, so it took the DESKTOP rules) they
   landed at y=887 on a 390px screen. Here the layout is a real flex chain instead: the
   inbox scrolls inside its own capped box, the textarea takes whatever height is left, and
   the buttons are always on screen. The panel body keeps overflow-y:auto purely as a safety
   net for a screen too small for even the minimums, so buttons can never be clipped again. */
@media (max-width: 760px), (max-height: 500px) {
  .dash-panel[data-panel="capture"] .dash-panel-body { display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
  .dash-panel[data-panel="capture"] .dash-inbox { flex: 0 1 auto; min-height: 60px; max-height: 40%; overflow-y: auto; overscroll-behavior: contain; }
  .dash-panel[data-panel="capture"] .capture-box { flex: 1 1 0; min-height: min-content; display: flex; flex-direction: column; margin-top: 12px; }
  .dash-panel[data-panel="capture"] .capture-box textarea { flex: 1 1 auto; min-height: 96px; resize: none; }
  /* Five buttons cannot share one 298px row: nowrap + shrink cut the labels mid-word
     ("+ Captu", "+ Persona"). A 6-column grid groups them by job instead: Attach and
     Record share the top row, the three that create something get equal thirds below,
     each at least 42px tall for a thumb. */
  .capture-actions { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: stretch; }
  .capture-actions .btn { grid-column: span 2; min-height: 42px; padding: 9px 4px; text-align: center; min-width: 0; }
  .capture-actions #attach-btn, .capture-actions #record-btn { grid-column: span 3; }
}
/* A phone turned sideways is wider than 760px, so the dashboard shows three columns of
   about 260px each. Three buttons across cannot fit that, so use two columns and give
   the main action a full row. Measured: every label fits at 844x390. */
@media (min-width: 761px) and (max-height: 500px) {
  .capture-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .capture-actions .btn, .capture-actions #attach-btn, .capture-actions #record-btn { grid-column: span 1; }
  .capture-actions #capture-btn { grid-column: span 2; }
}
.dash-empty { font-size: 13px; color: var(--ink-soft); text-align: center; padding: 18px 6px; }

/* left: tasks — split into Work (Asana) + Personal (To Do) groups */
.task-group + .task-group { margin-top: 14px; }
.task-group-head {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  padding: 2px 0 6px; margin-bottom: 2px; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: 6px;
}
.task-group-head.work { color: var(--violet); border-bottom-color: var(--violet); }
.task-group-head.personal { color: var(--teal); border-bottom-color: var(--teal); }
/* Work/Personal order swap (2026-10-06). --ink-soft on --card measured 5.95:1 light
   (#5a6478 on #ffffff), 6.02:1 dark (#969bb0 on #1b1e29). */
.task-group-flip {
  margin-left: auto; padding: 4px 8px; min-height: 26px; border-radius: 6px;
  border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer;
}
.task-group-flip:active { transform: scale(.96); }
.task-item.personal .task-check { border-color: var(--teal); }
.task-item.personal .task-check:hover { background: #e6f6fb; }
.task-item.personal .task-act { color: var(--teal); }
.task-item { display: flex; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.task-item:first-child { border-top: none; }
.task-check { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--mint); background: var(--card); cursor: pointer; margin-top: 1px; transition: background .15s; }
.task-check:hover { background: #ecfdf5; }
.task-check:active { transform: scale(0.9); }
.task-main { flex: 1; min-width: 0; }
.task-name { font-size: 14px; line-height: 1.35; }
.task-meta { font-size: 11px; color: var(--ink-soft); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-due { font-weight: 700; }
.task-due.overdue { color: var(--coral); }
.task-mtg { background: var(--accent-tint); color: var(--accent-tint-ink); border-radius: 999px; padding: 1px 7px; font-size: 10px; font-weight: 700; }
/* Task project chip (click to change project: To Do = teal, Asana = blue) */
.task-proj { background: #e2f5f3; color: var(--teal); border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; }
.task-item:not(.personal) .task-proj:not(.none) { background: var(--accent-tint); color: var(--accent-tint-ink); }
.task-proj.none { background: #eef1f6; color: var(--ink-soft); font-weight: 600; }
.task-act { border: none; background: none; color: var(--violet); font-size: 11px; cursor: pointer; padding: 0; }
.task-open { color: var(--ink-soft); text-decoration: none; font-size: 11px; }
/* A row just flipped between Work and Personal: a brief tint where it landed. */
.task-item.ed-area-moved { animation: edAreaMoved 1.6s ease-out; border-radius: 6px; }
@keyframes edAreaMoved { 0%, 40% { background: var(--accent-tint); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .task-item.ed-area-moved { animation: none; outline: 2px solid var(--violet); } }
.snooze-box { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; align-items: center; width: 100%; }
.snooze-opt { border: 1px solid var(--line); background: var(--card); border-radius: 8px; font-size: 11px; font-weight: 700; padding: 4px 9px; cursor: pointer; color: var(--violet-d); }
.snooze-opt:active { background: #eaf0fb; }
.snooze-date { font-size: 12px; padding: 3px 6px; max-width: 150px; }
.rename-box { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 2px 0 4px; }
.rename-input { flex: 1; min-width: 140px; font-size: 14px; padding: 5px 8px; border: 1.5px solid var(--violet); border-radius: 8px; font-family: inherit; }

/* Denser Today & Past-due dashboard widget — smaller text/rows so more tasks fit
   before scrolling. Scoped to #dash-tasks only: the Plan view and Staff cards reuse
   the same .task-item/.task-group classes at their normal size and are untouched. */
#dash-tasks.dash-panel-body { padding-top: 8px; }
#dash-tasks .task-group + .task-group { margin-top: 8px; }
#dash-tasks .task-group-head { font-size: 9.5px; padding-bottom: 3px; margin-bottom: 0; }
#dash-tasks .task-item { gap: 7px; padding: 4px 0; }
#dash-tasks .task-check { width: 15px; height: 15px; }
#dash-tasks .task-name { font-size: 11.5px; line-height: 1.25; }
#dash-tasks .task-meta { font-size: 9.5px; gap: 5px; margin-top: 2px; }
#dash-tasks .task-proj, #dash-tasks .task-mtg { font-size: 8.5px; padding: 0 5px; }
#dash-tasks .task-act, #dash-tasks .task-open { font-size: 9.5px; }

.brief-actions { display: flex; gap: 8px; margin-top: 12px; }
.plan-body { font-size: 14px; line-height: 1.5; color: var(--ink); }
.plan-body h4 { font-size: 15px; margin: 16px 0 6px; }
.plan-body h4:first-child { margin-top: 0; }
.plan-body ul, .plan-body ol { margin: 4px 0 10px; padding-left: 22px; }
.plan-body li { margin: 4px 0; }
.plan-body p { margin: 8px 0; }

.link-select { margin-top: 6px; width: 100%; font-size: 13px; }
.suggest-banner { background: #eff4fc; border: 1px solid var(--line); border-radius: 12px; padding: 10px; margin-bottom: 10px; }
.suggest-title { font-weight: 800; font-size: 13px; margin-bottom: 6px; }
.suggest-row { font-size: 12px; margin: 3px 0; }
.suggest-actions { margin-top: 8px; display: flex; gap: 8px; }

/* right: meetings */
/* Calendar agenda — two columns filled explicitly in JS (renderDashCalendar):
   column 1 is packed to the bottom, then column 2, so the panel uses all its
   space. --cal-scale tightens the font + spacing so two columns read well. */
/* The calendar panel never scrolls — it shows "+N more" instead. Clip any
   sub-pixel/reflow overflow so a stray scrollbar can't appear (the polls panel
   below keeps its own overflow-y:auto). */
#dash-cal { --cal-scale: 0.9; overflow: hidden; }
.cal-cols { display: flex; gap: 14px; height: 100%; align-items: flex-start; }
.cal-col { flex: 1 1 0; min-width: 0; }
.dash-day-h { font-size: calc(12px * var(--cal-scale)); font-weight: 800; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .4px; margin: calc(12px * var(--cal-scale)) 0 calc(4px * var(--cal-scale)); }
.dash-day-h:first-child { margin-top: 0; }
.cal-more { font-size: calc(11px * var(--cal-scale)); font-weight: 700; color: var(--violet-d); padding: 6px 0 0; }
.dash-mtg { padding: calc(8px * var(--cal-scale)) 0; border-top: 1px solid var(--line); position: relative; }
.dash-mtg:first-child { border-top: none; }
/* "Hide from dashboard" ✕ — subtle, reveals on hover (desktop) / faint on touch. */
.mtg-hide { position: absolute; top: 3px; right: 0; border: none; background: none; color: var(--ink-soft); font-size: 12px; line-height: 1; padding: 3px 4px; cursor: pointer; opacity: 0; transition: opacity .12s; border-radius: 6px; }
.dash-mtg:hover .mtg-hide { opacity: .65; }
.mtg-hide:hover { opacity: 1 !important; color: var(--coral, #ef5a5a); background: var(--card-2); }
@media (hover: none) { .mtg-hide { opacity: .4; } }
/* Settings: hidden-titles manager. */
.field-hint { font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; line-height: 1.35; }
.agenda-hides-list { display: flex; flex-direction: column; gap: 6px; }
.agenda-hide-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 13px; }
.agenda-hide-item span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Which calendar a hide is scoped to (or "all calendars" for a global one). */
.agenda-hide-scope { font-style: normal; font-size: 11px; font-weight: 700; color: var(--ink-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 6px; white-space: nowrap; }
.agenda-hide-scope.all { color: var(--violet-d); border-color: var(--violet); }

/* ===== Meeting attendees ===== */
/* Badge on a schedule row — deliberately tiny; the calendar is dense. */
.evt-att { font: inherit; font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-soft);
  border-radius: 999px; padding: 2px 6px; margin-left: 4px; white-space: nowrap; }
.evt-att:hover { border-color: var(--violet); color: var(--violet-d); }
.evt-att.none { opacity: .45; }
.evt-att.none:hover { opacity: 1; }

/* Shared avatar sizes (popup rows, editor chips, strip cards). */
.att-av, .att-av-sm, .att-av-md { border-radius: 50%; object-fit: cover; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--card-2); }
.att-av { width: 34px; height: 34px; }
.att-av-sm { width: 20px; height: 20px; font-size: 9px; }
.att-av-md { width: 40px; height: 40px; }
.att-ini { font-weight: 800; color: var(--violet-d); border: 1px solid var(--line); }
.att-av.att-ini { font-size: 12px; }
.att-av-md.att-ini { font-size: 14px; }

.att-ico { text-decoration: none; font-size: 14px; line-height: 1; padding: 3px;
  border-radius: 7px; border: 1px solid transparent; }
.att-ico:hover { border-color: var(--line); background: var(--card-2); }

/* Click-to-open popup from the 👥 badge. */
.att-pop { position: fixed; z-index: 60; width: 310px; max-height: 60vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 8px; }
.att-pop-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800;
  color: var(--ink-soft); padding: 2px 4px 8px; border-bottom: 1px solid var(--line); }
.att-pop-edit, .att-pop-x { margin-left: auto; border: none; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink-soft); padding: 0 3px; }
.att-pop-edit { margin-left: auto; }
.att-pop-x { margin-left: 0; }
.att-pop-load { font-size: 12px; color: var(--ink-soft); padding: 10px 4px; }
.att-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid var(--line); }
.att-row:last-child { border-bottom: none; }
.att-who { flex: 1; min-width: 0; }
.att-nm { font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-sub { font-size: 11px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-acts { display: flex; gap: 1px; flex: 0 0 auto; }

/* Roster editor modal. */
.att-edit { max-width: 520px; }
.att-current { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.att-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 3px; background: var(--card-2); }
.att-chip-x { border: none; background: transparent; cursor: pointer; color: var(--danger, #d64545); font-size: 12px; padding: 0 2px; }
.att-search { width: 100%; font: inherit; font-size: 13px; padding: 7px 10px; box-sizing: border-box;
  border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); }
.att-results { max-height: 260px; overflow: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 3px; }
.att-hit { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; cursor: pointer;
  font: inherit; font-size: 13px; border: 1px solid transparent; border-radius: 9px; padding: 5px 7px; background: transparent; color: var(--ink); }
.att-hit:hover { background: var(--card-2); border-color: var(--line); }
.att-hit-n { font-weight: 700; white-space: nowrap; }
.att-hit-s { color: var(--ink-soft); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* In-meeting strip under the calendar — horizontal scroll, never grows the panel. */
.dash-attendees { flex: 0 0 auto; border-top: 1px solid var(--line); padding-top: 7px; margin-top: 7px; }
.dash-attendees.hidden { display: none; }
.att-strip-h { font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-strip-scroll { display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  padding-bottom: 4px; scrollbar-width: thin; }
.att-card { flex: 0 0 auto; width: 88px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  border: 1px solid var(--line); border-radius: 11px; padding: 7px 5px; background: var(--card-2); }
.att-card-n { font-size: 10px; font-weight: 700; text-align: center; line-height: 1.2;
  width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-card-acts { display: flex; gap: 0; }
.att-card-acts .att-ico { font-size: 13px; padding: 2px; }

/* Transcript export + file-to-client/matter row on History cards. */
.tx-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 9px;
  padding-top: 9px; border-top: 1px dashed var(--line); }
.tx-tools .tx-owner { font: inherit; font-size: 12px; padding: 4px 7px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); max-width: 260px; min-width: 0; }
.tx-tools a.btn { text-decoration: none; }
@media (max-width: 640px) {
  .tx-tools { gap: 6px; }
  .tx-tools .tx-owner { flex: 1 1 100%; max-width: none; }
}

.agenda-hide-x { flex: none; border: none; background: var(--card-2); color: var(--ink-soft); width: 24px; height: 24px; border-radius: 50%; font-size: 12px; cursor: pointer; }
.agenda-hide-x:hover { color: var(--violet-d); }
.dash-mtg-time { font-size: calc(12px * var(--cal-scale)); font-weight: 700; color: var(--ink-soft); }
.dash-mtg-title { font-size: calc(14px * var(--cal-scale)); font-weight: 700; margin: calc(2px * var(--cal-scale)) 0 0; line-height: 1.25; }
.dash-mtg-title:not(:last-child) { margin-bottom: calc(4px * var(--cal-scale)); }
/* Calendar event → client/staff tag chip */
.evt-tag { display: inline-flex; align-items: center; gap: 3px; max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; border: none; border-radius: 999px; padding: 0 6px; font-size: calc(10px * var(--cal-scale)); font-weight: 700; cursor: pointer; }
.evt-tag.client { background: var(--accent-tint); color: var(--accent-tint-ink); }
.evt-tag.staff { background: #e7f6ef; color: #0e8f6b; }
.evt-tag.matter { background: #f0ecff; color: #6b46d9; }
.evt-tag.none { background: transparent; color: var(--ink-soft); padding: 0 3px; opacity: .55; font-size: calc(11px * var(--cal-scale)); }
.evt-tag.none:hover { opacity: 1; }
.evt-tag-edit { border: none; background: transparent; color: var(--ink-soft); cursor: pointer; padding: 0 2px; margin-left: 2px; font-size: calc(11px * var(--cal-scale)); opacity: .6; vertical-align: middle; }
.evt-tag-edit:hover { opacity: 1; }
.evt-tag-select { display: block; margin-top: 5px; max-width: 100%; font-size: 13px; }
.dash-mtg-task { font-size: calc(12px * var(--cal-scale)); padding: calc(3px * var(--cal-scale)) 0 calc(3px * var(--cal-scale)) 14px; position: relative; line-height: 1.3; }
.dash-mtg-task::before { content: '•'; position: absolute; left: 2px; color: var(--violet); }
/* Muted (secondary, e.g. sports) calendar entries — greyed to set them apart */
.dash-mtg.muted { opacity: .5; }
.dash-mtg.muted .dash-mtg-time span { color: var(--ink-soft); }
/* Compact one-line rendering for muted entries (Congress in-session, sports) */
.dash-mtg.mini { display: flex; align-items: center; gap: 6px; padding: calc(2px * var(--cal-scale)) 0; border-top: none; }
.dash-mini-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.dash-mini-text { font-size: calc(11px * var(--cal-scale)); color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Past (already-started today) events dim out; "now" line marks the current time */
.dash-mtg.past { opacity: .42; }
/* Meeting about to start (within 5 min): pulsing row + flashing banner */
.dash-mtg.imminent { background: rgba(239, 93, 107, .12); border-radius: 8px; box-shadow: 0 0 0 2px var(--coral); animation: imminentPulse 1.4s ease-in-out infinite; }
.dash-mtg.imminent .dash-mtg-title { color: var(--coral); }
.mtg-countdown { margin-left: 8px; font-weight: 800; color: var(--coral); }
@keyframes imminentPulse { 0%, 100% { box-shadow: 0 0 0 2px var(--coral); } 50% { box-shadow: 0 0 0 4px rgba(239, 93, 107, .35); } }
.meeting-alert {
  flex: none; display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  background: var(--coral); color: var(--btn-ink); font-size: 14px; font-weight: 700;
  padding: 9px 14px; border-radius: 12px; box-shadow: var(--shadow-sm);
  animation: alertFlash 1.1s ease-in-out infinite;
}
.meeting-alert .ma-text { flex: 1; min-width: 0; }
.meeting-alert .ma-close { flex: none; border: none; background: rgba(255,255,255,.25); color: var(--btn-ink); width: 24px; height: 24px; border-radius: 6px; cursor: pointer; font-weight: 800; }
@keyframes alertFlash { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .dash-mtg.imminent, .meeting-alert { animation: none; } }
.dash-now { display: flex; align-items: center; gap: 7px; margin: calc(6px * var(--cal-scale)) 0; }
.dash-now-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); flex: none; box-shadow: 0 0 0 3px rgba(239, 93, 107, .22); }
.dash-now-label { font-size: calc(10px * var(--cal-scale)); font-weight: 800; color: var(--coral); text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.dash-now::after { content: ''; flex: 1; height: 2px; border-radius: 2px; background: var(--coral); opacity: .65; }

/* ===== Clients & initiatives ===== */
.muted { color: var(--ink-soft); }
/* Clients & Matters fill a wide window and pack cards masonry-style (no wasted vertical gaps).
   Clients use wider columns so the full contact rows (name · email · phone) stay on one line. */
#view-clients { max-width: 1680px; }
#view-matters { max-width: 1720px; }
#view-staff { max-width: 1680px; }
#view-history { max-width: 1680px; }
#history-list { display: block; columns: 540px; column-gap: 14px; }
#history-list > .card { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; margin: 0 0 14px; }
#view-revenue { max-width: 1680px; }
#view-polling { max-width: 1680px; }
/* Settings: two-column masonry that fills the window; each header stays glued to its card.
   Full-width bands (span all columns) for the sign-in bar, the wide data-sources table, and the footer. */
#view-settings { max-width: 1500px; columns: 640px; column-gap: 24px; }
#view-settings > * { break-inside: avoid; -webkit-column-break-inside: avoid; }
#view-settings > .section-title { break-after: avoid; -webkit-column-break-after: avoid; }
#view-settings > #sso-card,
#view-settings > .set-wide,
#view-settings > #logout-btn,
#view-settings > #app-version { column-span: all; }
#view-review { max-width: 1680px; }
/* App Updates boards (Work / Personal): fill the window, fit as a no-scroll board on desktop
   (each card body scrolls internally if its highlights run long). */
#view-workupdates, #view-personalupdates { max-width: none; flex: 1 1 auto; min-height: 0; }
/* Board views never scroll the page on desktop — the grid fills the viewport and each
   card body scrolls internally. (Mobile relaxes this below.) */
body.board-active .view-scroll { overflow: hidden; }
.au-view { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.au-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.au-head .section-title { margin: 6px 0 10px; }
.au-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.au-stamp { font-size: 11px; color: var(--ink-soft); }
.au-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-rows: minmax(0, 1fr); grid-auto-flow: row dense; align-content: stretch; }
.au-featured { grid-column: span 2; grid-row: span 2; }
.au-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: 11px 13px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.au-card-head { display: flex; align-items: center; gap: 8px; flex: none; margin-bottom: 7px; }
.au-ico { font-size: 18px; flex: none; }
.au-title { font-weight: 800; font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-open, .au-edit, .au-refresh, .au-size { border: none; background: #eef2fb; color: var(--violet-d); border-radius: 8px; width: 26px; height: 26px;
  font-size: 13px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.au-open:hover, .au-edit:hover, .au-refresh:hover, .au-size:hover { background: #e2e9f8; }
.au-featured .au-size { background: #e7defb; color: var(--violet-d); }
.au-body { flex: 1 1 auto; min-height: 0; overflow: auto; font-size: 13px; line-height: 1.4; color: var(--ink); }
.au-body ul, .au-body ol { margin: 0; padding-left: 18px; }
.au-body li { margin: 4px 0; }
.au-body p { margin: 4px 0; }
.au-featured .au-title { font-size: 17px; }
.au-featured .au-body { font-size: 14px; }
.au-foot { flex: none; display: flex; justify-content: space-between; align-items: center; margin-top: 7px; font-size: 10px; color: var(--ink-soft); }
.au-editbox { flex: none; margin-top: 7px; }
.au-editbox textarea { width: 100%; font-size: 12px; resize: vertical; }
.au-editbtns { display: flex; gap: 6px; margin-top: 5px; }
.au-spin { animation: au-spin .8s linear infinite; }
@keyframes au-spin { to { transform: rotate(360deg); } }
.au-loading { padding: 24px; grid-column: 1 / -1; }
@media (max-width: 760px) {
  body.board-active .view-scroll { overflow-y: auto; }
  .au-view { height: auto; }
  .au-grid { grid-auto-rows: auto; }
  .au-featured { grid-column: auto; grid-row: auto; }
  .au-card { min-height: 150px; }
}
#view-review > #review-drop { max-width: 1000px; margin-left: auto; margin-right: auto; }
#review-list { display: block; columns: 480px; column-gap: 14px; margin-top: 14px; }
#review-list > .rv-card { break-inside: avoid; -webkit-column-break-inside: avoid; width: 100%; margin: 0 0 14px; }
#view-polling > .card.soft { max-width: 720px; }
#poll-list { columns: 540px; column-gap: 14px; }
#poll-list .poll-card { max-width: none; width: 100%; margin: 0 0 14px; break-inside: avoid; -webkit-column-break-inside: avoid; }
#clients-grid { display: block; columns: 520px; column-gap: 14px; }
#matters-grid { display: block; columns: 340px; column-gap: 14px; }
#clients-grid .client-card, #clients-grid .client-card.lg,
#matters-grid .client-card, #matters-grid .client-card.lg {
  grid-column: auto; break-inside: avoid; -webkit-column-break-inside: avoid;
  width: 100%; margin: 0 0 14px;
}
/* 6-col base: small cards span 2 (=3 across), large span 3 (=2 across). */
.clients-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; align-items: start; }
.client-card { grid-column: span 2; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 11px 12px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 7px; }
.client-card.lg { grid-column: span 3; }
.client-head { display: flex; align-items: center; gap: 10px; }
.client-logo { width: 36px; height: 36px; object-fit: contain; border-radius: 8px; background: var(--card); flex: none; }
.client-card.lg .client-logo { width: 44px; height: 44px; }
.client-logo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 16px; color: var(--btn-ink); background: linear-gradient(135deg, var(--violet), var(--sky)); }
.client-title { font-size: 15px; font-weight: 800; flex: 1; min-width: 0; }
.client-card.lg .client-title { font-size: 17px; }
.client-money { flex: none; font-size: 13px; font-weight: 800; color: var(--mint); white-space: nowrap; }
.client-money.neg { color: var(--coral); }
.client-money .cm-per { font-size: 10px; font-weight: 700; color: var(--ink-soft); margin-left: 1px; }
.client-size { border: none; background: #eef2fb; color: var(--violet-d); border-radius: 8px; width: 30px; height: 30px; font-size: 15px; cursor: pointer; flex: none; }
.client-contacts { display: flex; flex-direction: column; gap: 3px; }
.client-contact { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1px 10px; font-size: 12px; }
.cc-name { font-weight: 700; }
.cc-link { color: var(--violet-d); text-decoration: none; }
.cc-link:hover { text-decoration: underline; }
.client-notes { font-size: 12px; line-height: 1.35; color: var(--ink); white-space: normal; }
.client-card.lg .client-notes { font-size: 13px; }
.clients-toolbar { display: flex; justify-content: flex-end; margin: 4px 0 12px; }
.client-card-actions { display: flex; gap: 14px; align-items: center; }
.client-notes-edit { align-self: flex-start; border: none; background: none; color: var(--violet); font-size: 11px; font-weight: 700; cursor: pointer; padding: 0; }
/* Linked-project chips (on cards + in the editor): work = blue, personal = teal */
.client-projlinks { display: flex; flex-wrap: wrap; gap: 5px; }
.client-proj { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 1px 8px; font-size: 10px; font-weight: 700; background: var(--accent-tint); color: var(--accent-tint-ink); }
.client-proj.todo { background: #e2f5f3; color: var(--teal); }
.client-proj .cp-del { border: none; background: none; color: inherit; cursor: pointer; font-size: 11px; padding: 0; opacity: .7; }
.client-proj .cp-del:hover { opacity: 1; }
.client-notes-editor { display: flex; flex-direction: column; gap: 6px; }
.client-notes-ta { width: 100%; min-height: 90px; resize: vertical; border: 1.5px solid var(--line); border-radius: 10px; padding: 8px; font: inherit; font-size: 13px; }
.client-notes-actions { display: flex; gap: 6px; }
/* Settings: client manager */
.client-manager { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.client-editor { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--card); }
.ce-row { display: flex; gap: 8px; align-items: center; }
.ce-name { flex: 1 1 auto; min-width: 0; }
.ce-monthly { flex: 0 0 110px; width: 110px; }
.ce-monthly.neg { color: var(--coral); font-weight: 700; }
.ce-size { flex: 0 0 150px; width: 150px; }
.client-editor input, .client-editor textarea, .client-editor select { border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; }
.ce-notes { min-height: 70px; resize: vertical; }
.ce-label { font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.ce-contacts { display: flex; flex-direction: column; gap: 6px; }
.contact-row { display: flex; gap: 6px; align-items: center; }
.contact-row input { min-width: 0; flex: 1; }
.cr-del { border: none; background: var(--danger-tint); color: #dc3545; border-radius: 8px; width: 30px; height: 30px; flex: none; cursor: pointer; }
.cr-copy { border: 1px solid var(--line); background: #eef2fb; color: var(--violet-d); border-radius: 8px; width: 30px; height: 30px; flex: none; cursor: pointer; font-size: 14px; line-height: 1; }
.cr-copy:hover { background: #e2e9f8; }
/* Logo slot doubles as a drop target — dashed outline advertises it, and it lights
   up while a file is over it so the drop obviously registers. */
.ce-logo { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1.5px dashed var(--line);
  border-radius: 10px; transition: border-color .12s, background .12s; }
.ce-logo.dropping { border-color: var(--violet); background: var(--accent-tint); }
.ce-drop-hint { font-size: 11px; color: var(--ink-soft); }
.ce-logo.dropping .ce-drop-hint { color: var(--violet-d); font-weight: 700; }
.client-logo-sm { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.ce-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ce-projects { display: flex; flex-wrap: wrap; gap: 5px; }
.ce-projadd { align-self: flex-start; max-width: 100%; }

/* ===== Staff ===== */
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; margin-top: 14px; }
/* min-width:0 lets the grid track shrink to the container on a narrow phone;
   without it the grid item's default min-width:auto blows the card out to its
   min-content (~428px) and clips off the right edge on iPhone. */
.staff-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-sm); border: 1px solid var(--line); padding: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.staff-head { display: flex; align-items: center; gap: 12px; }
.staff-photo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; background: var(--card); }
.staff-photo-ph { display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: var(--btn-ink); background: linear-gradient(135deg, var(--violet), var(--sky)); }
.staff-id { flex: 1; min-width: 0; }
.staff-name { font-size: 17px; font-weight: 800; }
.staff-contacts { display: flex; flex-direction: column; gap: 1px; font-size: 12px; margin-top: 2px; }
.staff-editbtn { flex: none; }
.staff-edit { display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.staff-edit input, .staff-edit select { border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; font-size: 14px; }
.staff-quickadd { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 1px dashed var(--violet); border-radius: 12px; background: #f2f5fd; }
.staff-qa-label { font-size: 12px; font-weight: 800; color: var(--violet-d); }
.staff-quickadd input, .staff-quickadd select, .staff-quickadd textarea { border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 9px; font: inherit; font-size: 14px; }
.staff-quickadd .sa-row { display: flex; gap: 6px; }
.staff-quickadd .sa-date { flex: 0 0 150px; width: 150px; }
.staff-quickadd .sa-project { flex: 1 1 auto; min-width: 0; width: auto; }
.staff-quickadd .sa-desc { min-height: 48px; resize: vertical; }
.staff-quickadd .sa-add { align-self: flex-start; }
.staff-tasks { display: flex; flex-direction: column; }
.staff-tasks .task-item { padding: 8px 0; }

@media (max-width: 760px) {
  .clients-grid { grid-template-columns: 1fr; }
  .client-card, .client-card.lg { grid-column: auto; }
  .staff-grid { grid-template-columns: 1fr; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid > [data-panel] { display: none; }
  .dash-grid > [data-panel].active { display: flex; }
  .dash-seg { display: flex; gap: 6px; margin-bottom: 8px; flex: none; }
  .dash-seg-btn { flex: 1; border: 1.5px solid var(--line); background: var(--card); color: var(--ink-soft); font-weight: 700; font-size: 12px; border-radius: 10px; padding: 9px 0; cursor: pointer; font-family: inherit; }
  .dash-seg-btn.active { background: var(--violet); color: var(--btn-ink); border-color: var(--violet); }
  /* Stack the weather strip under the button on narrow screens. */
  .dash-bar { flex-wrap: wrap; }
  .dash-weather { width: 100%; }
  /* Compact Review card action buttons so they fit in 1–2 rows on a phone. */
  .rv-actions { gap: 5px; }
  .rv-btn { padding: 4px 8px; font-size: 11px; }
  /* 13 tabs won't fit legibly on a phone — make the bar swipe horizontally with
     comfortably tappable tabs; the active tab is scrolled into view on switch. */
  .tabbar { justify-content: flex-start; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabbar::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; min-width: 60px; padding: 3px 6px; }
  .tab.juno-splittab { min-width: 124px; }
  .tab span { font-size: 20px; }
  .tab { font-size: 10px; }
}

.wx-stale { font-size: 10px; font-weight: 700; color: #b45309; background: #fef3c7; border-radius: 999px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }

/* ===== Dashboard CT/ET timezone toggle ===== */
.dash-tz { flex: none; display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: var(--card); }
.dash-tz-btn { border: none; background: var(--card); color: var(--ink-soft); font-family: inherit; font-size: 11px; font-weight: 800; padding: 7px 11px; cursor: pointer; line-height: 1; }
.dash-tz-btn + .dash-tz-btn { border-left: 1px solid var(--line); }
.dash-tz-btn:hover { background: var(--accent-tint); }
.dash-tz-btn.on { background: var(--violet); color: var(--btn-ink); }
.dash-tz-btn:disabled { opacity: .6; cursor: default; }
.dash-tz-other { font-size: 10px; font-weight: 800; color: var(--teal); background: var(--accent-tint); padding: 4px 8px; line-height: 1; cursor: pointer; border-left: 1px solid var(--line); }
/* Stacked CT/ET + L/D/Auto theme toggle in the dashboard bar */
.tz-theme-stack { display: inline-flex; flex-direction: column; gap: 4px; }
.theme-seg .dash-tz-btn { padding: 5px 10px; font-size: 10px; }
/* Settings: auto light/dark schedule */
.theme-sched { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 13px; color: var(--ink-soft); }
.theme-sched input[type="time"] { padding: 5px 7px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; }

#sso-card { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
#sso-card.hidden { display: none; }

/* ===== App & data sources (Settings) ===== */
.app-updated { font-size: 13px; color: var(--ink-soft); margin-bottom: 10px; }
.app-updated strong { color: var(--ink); }
.ds-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ds-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 12px; }
.ds-table th { text-align: left; color: var(--ink-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .3px; padding: 4px 8px 4px 0; border-bottom: 1px solid var(--line); }
.ds-table td { padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.4; }
.ds-table td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
.ds-table tr:last-child td { border-bottom: none; }
.ds-table td:last-child { white-space: nowrap; }
.ds-table td:last-child a { color: var(--violet); font-weight: 700; text-decoration: none; }
.ds-table td:last-child a:hover { text-decoration: underline; }
/* One-tap copy next to contact email/phone */
.cc-pair { display: inline-flex; align-items: center; gap: 4px; }
.cc-copy { border: none; background: #eef2fb; color: var(--violet-d); border-radius: 6px; font-size: 12px; line-height: 1; padding: 3px 6px; cursor: pointer; }
.cc-copy:hover { background: #e2e9f8; }
/* AI engine badge on the Plan sheet */
.plan-engine { margin-top: 12px; font-size: 11px; color: var(--ink-soft); text-align: right; }

/* ===== Timezone by ZIP (Settings) ===== */
.tz-current { font-size: 13px; color: var(--ink-soft); margin: 2px 0 8px; }
.tz-current strong { color: var(--ink); }
.tz-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.tz-ziprow { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.tz-ziprow input { flex: 0 0 190px; width: 190px; }

/* ===== Ingestion log (Settings) ===== */
.ingest-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.ingest-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow-y: auto; }
.ingest-item { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 8px 10px; background: var(--card); }
.ingest-item.ok { border-left-color: var(--mint); }
.ingest-item.rejected { border-left-color: var(--coral); }
.ingest-item.error { border-left-color: #f59e0b; }
.ing-line { display: flex; align-items: center; gap: 7px; }
.ing-icon { flex: none; font-size: 15px; }
.ing-label { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ing-badge { flex: none; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; }
.ing-badge.ok { color: #15803d; background: #e7f6ef; }
.ing-badge.rej { color: var(--coral); background: var(--danger-tint); }
.ing-badge.err { color: #b45309; background: #fef3c7; }
.ing-meta { font-size: 11px; color: var(--ink-soft); margin-top: 3px; }

/* ===== Sheets / modals ===== */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(43, 36, 64, 0.42); padding: 0;
}
.sheet-card {
  background: var(--card); width: 100%; max-width: 620px;
  border-top-left-radius: 26px; border-top-right-radius: 26px;
  padding: 18px 18px calc(20px + var(--safe-bot));
  max-height: 92dvh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(60,40,120,.25);
  animation: slideUp .22s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sheet-head h3 { margin: 0; font-size: 18px; }
.sheet-close { border: none; background: #e7eefb; color: var(--ink-soft); border-radius: 10px; width: 32px; height: 32px; font-size: 15px; cursor: pointer; }
.triage-source {
  background: #eff4fc; border-radius: 12px; padding: 10px 12px; font-size: 14px; color: var(--ink-soft);
  white-space: pre-wrap; word-break: break-word; margin-bottom: 12px; max-height: 120px; overflow-y: auto;
}
.suggestions { display: flex; flex-direction: column; gap: 10px; }
.suggestion {
  border: 1.5px solid var(--line); border-radius: 14px; padding: 12px;
  transition: border-color .15s, background .15s, opacity .15s;
}
.suggestion.saved { opacity: .6; background: #f7fdf9; border-color: #bbf7d0; }
.suggestion .s-title { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.suggestion .s-reason { font-size: 12px; color: var(--ink-soft); margin-top: 6px; }
.suggestion .s-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.loading { text-align: center; color: var(--violet); padding: 16px; font-weight: 600; }

/* form fields */
.field-label { display: block; font-size: 13px; font-weight: 700; color: var(--ink-soft); margin: 12px 2px 6px; }
input[type=text], input[type=date], input[type=number], input[type=month], select, textarea {
  width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 11px 12px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: var(--card); outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--violet); }
textarea { resize: vertical; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.editor-actions { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.editor-actions .btn { flex: 1; min-width: 90px; }
.msg { font-size: 13px; margin-top: 10px; min-height: 16px; }
.msg.ok { color: #15803d; }
.msg.err { color: var(--coral); }
.version { text-align: center; color: #93a1b9; font-size: 12px; margin: 18px 0 4px; }

/* toast */
.toast {
  position: fixed; left: 50%; bottom: calc(96px + var(--safe-bot)); transform: translateX(-50%);
  background: var(--ink); color: var(--btn-ink); padding: 11px 18px; border-radius: 999px; font-size: 14px;
  z-index: 80; box-shadow: var(--shadow); max-width: 90%;
}
.toast.ok { background: #16a34a; }
.toast.err { background: #e11d48; }

@media (min-width: 720px) {
  .row2 { gap: 16px; }
}

/* Never-record list (Settings) — same visual language as the hide list. */
#norecord-wrap { margin-top: 14px; }
.norec-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0 10px; font-size: 13px; color: var(--ink); cursor: pointer; }
.norec-toggle input { flex: none; }
.norec-add { display: flex; gap: 8px; margin-bottom: 10px; }
.norec-add input { flex: 1; min-width: 0; }
/* Rule-suppressed recording: informational, not clickable — a missing flag alone
   reads as a bug, so say why. */
.rec-skip { display: inline-flex; align-items: center; margin-left: 5px; padding: 0 5px; border-radius: 999px;
  background: var(--card-2); color: var(--ink-soft); font-size: 10px; line-height: 1.5; vertical-align: middle; cursor: help; }
.dash-mtg.past .rec-skip { opacity: .5; }

/* Rule-inferred tags are styled identically to hand-set ones by request. */
/* Settings: assignment rules grouped by target. */
.tagrules-list { display: flex; flex-direction: column; gap: 8px; }
.tagrule-group { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.tagrule-target { font-size: 13px; font-weight: 700; margin-bottom: 5px; }
.tagrule-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tagrule-chip { display: inline-flex; align-items: center; gap: 3px; padding: 2px 5px 2px 7px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--card-2); font-size: 11px; max-width: 100%; }
.tagrule-chip.off { opacity: .45; }
.tagrule-chip code { font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tagrule-toggle, .tagrule-del { border: none; background: none; color: var(--ink-soft); cursor: pointer; font-size: 11px; padding: 0 1px; line-height: 1; }
.tagrule-del:hover { color: var(--violet-d); }

/* Build badge (#appver), top-left: sits in every view's top padding (12px on the dashboard,
   16px elsewhere; the Juno sheet has 14px), above the Juno pill and clear of every tap
   target. Tiny on purpose. It carries its own --bg chip because the NASA Inbox backdrop
   can put a photograph behind this corner. Measured on that chip: --ink-soft is 5.35:1
   light and 6.66:1 dark; the failure --coral is 4.56:1 light and 6.67:1 dark. The PIN
   screen paints the same --bg, so the numbers hold there too. */
.app-version {
  position: fixed; z-index: 250; pointer-events: none;   /* above Juno (120), its overlays (200/210) and the toast */
  top: var(--safe-top);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  padding: 1px 4px; border-radius: 0 0 4px 4px; background: var(--bg);
  font: 500 9px/9px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .2px; color: var(--ink-soft); white-space: nowrap;
}
.app-version.fail { color: var(--coral); font-weight: 700; }

/* Settings → Kalshi polls → Price charts (the old Polling tab). The market list above it already
   has the dashboard toggle and remove, so the copies on each chart card are hidden here. */
.poll-charts { margin-top: 12px; }
.poll-charts > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink); padding: 6px 0; }
.poll-charts .poll-toggle, .poll-charts .poll-rm { display: none; }

/* ===== Meetings (replaced Inbox, Plan and History, 2026-10-05) ===== */
.mtg-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mtg-tools .search { flex: 1 1 260px; margin: 0; }
.mtg-tools select { flex: 0 1 240px; min-width: 0; }
.mtg-list { display: flex; flex-direction: column; gap: 8px; }
.mtg-group { font-size: 12px; font-weight: 800; color: var(--ink-soft); text-transform: none; margin: 6px 2px 0; }
.mtg-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.mtg-item.open { border-color: var(--violet); }
.mtg-row { display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; background: none; border: 0; padding: 12px 14px; cursor: pointer; color: var(--ink); font: inherit; }
.mtg-row:hover { background: var(--card-2); }
.mtg-row-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.mtg-title { font-weight: 800; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-when { flex: 0 0 auto; font-size: 12px; color: var(--ink-soft); }
.mtg-row-sub { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 13px; color: var(--ink-soft); }
.mtg-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mtg-owner { flex: 0 0 auto; font-weight: 700; color: var(--ink); }
.mtg-detail { padding: 2px 14px 14px; border-top: 1px solid var(--line); }
.mtg-loading { padding: 12px 0; color: var(--ink-soft); font-size: 13px; }
.mtg-sec { margin-top: 12px; }
.mtg-sec-h { font-size: 12px; font-weight: 800; color: var(--ink-soft); margin-bottom: 6px; }
.mtg-nobrief { display: flex; align-items: center; gap: 10px; }
.mtg-dl { display: flex; flex-wrap: wrap; gap: 6px; }
.mtg-detail .tx-tools { margin-top: 8px; }
.mplay-audio { width: 100%; max-width: 560px; display: block; }
.mplay-parts { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; font-size: 13px; color: var(--ink-soft); }
.mtg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* Detailed meeting notes (2026-10-05): sections of bullets, quotes, and a ▶ jump on each point */
.mbrief-notes { margin-top: 10px; }
.mbrief-nsec { margin-top: 10px; }
.mbrief-nh { font-weight: 800; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.mbrief-nsec ul { margin: 0; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.mbrief-nsec li { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink); }
.mnote-t { min-width: 0; }
.mq { font-style: italic; }
.mjump { flex: 0 0 auto; border: 1px solid var(--line); background: var(--card); color: var(--violet); border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; }
.mjump:hover, .mjump.on { border-color: var(--violet); }
.mjump.on { background: var(--violet); color: var(--btn-ink); }
.mbrief-notes-foot { margin-top: 8px; }
.mbrief-notes-pending { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--card-2); color: var(--ink-soft); font-size: 13px; }
.mbrief-tasks { margin-top: 12px; }
.mbrief-tasks > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink-soft); }

/* A calendar feed that has not updated in over 30 minutes (2026-10-06) */
/* The "won't record" warning takes its own line under the header, so it never pushes Record off
   a narrow (iPad portrait) header; the header grows only while it shows. */
.dash-cal-panel > .dash-panel-head { flex-wrap: wrap; row-gap: 6px; }
.dash-cal-stale.dash-rec-warn { order: 10; flex: 1 0 100%; max-width: none; margin-left: 0; text-align: left; border-radius: 8px; padding: 4px 8px; border: 0; font-family: inherit; cursor: pointer; color: #7a1a12; background: #ffe3df; /* fixed in both themes: 8.7:1 */ }
.dash-cal-stale.dash-rec-warn[hidden] { display: none; }
.dash-cal-stale { font-size: 11px; font-weight: 700; color: #5c3b00; background: #fff4d6; /* fixed in both themes: 9.3:1 */ border-radius: 999px; padding: 2px 8px; margin-left: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; cursor: help; }

/* Meetings on a wide window (2026-10-06): list | reading pane, filling the window, each side scrolling
   on its own. Below 1100px the pane is not used and meetings open in place in the list. */
#meeting-pane { display: none; }
@media (min-width: 1100px) {
  body.meetings-active .view-scroll { overflow: hidden; }
  #view-meetings.mtg-wide { max-width: 1900px; flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(340px, 32%) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); column-gap: 18px; padding-bottom: 12px; }
  #view-meetings.mtg-wide > .section-title { grid-column: 1 / -1; margin-top: 4px; }
  #view-meetings.mtg-wide > .mtg-tools { grid-column: 1; grid-row: 2; }
  #view-meetings.mtg-wide > .mtg-tools .search, #view-meetings.mtg-wide > .mtg-tools select { flex: 1 1 100%; }
  #view-meetings.mtg-wide > #meetings-list { grid-column: 1; grid-row: 3; overflow-y: auto; min-height: 0; padding: 2px 4px 8px 0; overscroll-behavior: contain; }
  #view-meetings.mtg-wide > #meeting-pane { display: block; grid-column: 2; grid-row: 2 / 4; overflow-y: auto; min-height: 0; overscroll-behavior: contain; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 6px 26px 22px; }
  .mtg-wide .mtg-item .mtg-detail { display: none; }
  .mtg-wide .mtg-item.open { border-color: var(--violet); box-shadow: inset 4px 0 0 var(--violet); }
  .mtg-wide .mtg-row { padding: 10px 12px; }
  .mtg-wide .mtg-line { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .mtg-wide .mtg-row-sub { align-items: flex-start; }
  .mtg-pane-h { position: sticky; top: -6px; z-index: 1; background: var(--card); padding: 14px 0 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
  .mtg-pane-title { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1.25; }
  .mtg-pane-sub { margin-top: 4px; font-size: 13px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .mtg-pane .mbrief-nsec li { font-size: 15px; }
  .mtg-pane .mplay-audio { max-width: 760px; }
  .mtg-pane-empty { padding: 30px 0; color: var(--ink-soft); }
}

/* Reading pane, very wide: notes | audio + transcript (the right column stays in view while the notes scroll) */
@media (min-width: 1500px) {
  .mtg-pane .mtg-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; align-items: start; }
  .mtg-pane .mtg-col-b { position: sticky; top: 76px; max-height: calc(100dvh - 250px); overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; }
  .mtg-pane .mtg-col-b .mplay { margin-top: 12px; }
  .mtg-pane .mtg-col-b .card-bodywrap.collapsed .card-body { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .mtg-pane .mtg-col-b .card-body-toggle { display: none; }
}

/* Calendar header: start / stop a recording (2026-10-06). Idle is GRAY (his call: red only while
   recording): --ink-soft on --card-2 = 5.43:1 light, 5.40:1 dark. Recording: #ffffff on #c92a2a = 5.4:1. */
.dash-rec-ctl { margin-left: auto; flex: none; border: 1px solid var(--line); background: var(--card-2); color: var(--ink-soft); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dash-rec-ctl:hover { border-color: var(--ink-soft); color: var(--ink); }
.dash-rec-ctl.on { background: #c92a2a; border-color: #c92a2a; color: #ffffff; animation: recCtlPulse 1.6s ease-in-out infinite; }
.dash-rec-ctl:disabled { cursor: progress; opacity: .85; }
.dash-rec-ctl + .dash-mini { margin-left: 6px; }
@keyframes recCtlPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201, 42, 42, .35); } 50% { box-shadow: 0 0 0 5px rgba(201, 42, 42, 0); } }
@media (prefers-reduced-motion: reduce) { .dash-rec-ctl.on { animation: none; } }

/* Election night (Settings, 2026-10-11) */
.el-actions { flex-wrap: wrap; }
.el-previews { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.el-previews img { width: 220px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; }
.el-sub { margin-top: 10px; }
.el-sub > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink); padding: 4px 0; }
.el-sb { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink); }
.el-races { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; }
.el-race-h { font-weight: 800; font-size: 12px; color: var(--ink-soft); margin: 10px 0 4px; }
.el-race { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto; gap: 8px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.el-race-o { white-space: nowrap; font-variant-numeric: tabular-nums; }
.el-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; max-height: 460px; overflow-y: auto; overscroll-behavior: contain; padding: 4px; }
.el-photo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.el-photo img, .el-photo-ini { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; border: 3px solid; }
.el-photo-ini { display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; border-color: transparent; }
.el-photo-n { font-size: 11px; color: var(--ink); line-height: 1.2; }
.el-photo-s { font-size: 10px; color: var(--ink-soft); }
.el-photo-x { position: absolute; top: 0; right: 10px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: 11px; cursor: pointer; }
.el-close { font-size: 13px; padding: 3px 0; color: var(--ink); }
.el-texts, .el-log { font-size: 12px; color: var(--ink); max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.el-text { padding: 4px 0; border-bottom: 1px solid var(--line); }