/* Monday review. The Sales app's palette on a meeting-room screen: one tile per person on top, the person on deck below
   (their week on the left, what needs the room on the right). Late, over-booked and bandwidth skips are the only loud
   things on screen. Light and dark; "TV size" scales everything up for the room. */
:root {
  --ink: #061E12; --ink-2: #3f4a44; --ink-3: #6b766f; --ink-4: #98a29c;
  --bg: #f6f8f7; --surface: #ffffff; --surface-2: #f0f4f2; --surface-3: #e7eeea; --line: #e2e8e4; --line-2: #d3dcd7;
  --mint: #93E9B3; --mint-soft: #e3f8ea; --green: #1d6b43;
  --good: #1d6b43; --good-bg: #dff5e7; --mid: #8a5a00; --mid-bg: #fff1d6; --bad: #b8322a; --bad-bg: #fdecea; --info: #2856a3; --info-bg: #e7eefb;
  --accent: #061E12; --on-accent: #ffffff;
  --shadow: 0 8px 24px rgba(6,30,18,.10), 0 2px 6px rgba(6,30,18,.06);
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --r: 12px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --ink: #e7f0eb; --ink-2: #bcc8c1; --ink-3: #8c9a92; --ink-4: #66736c;
  --bg: #08110c; --surface: #0f1a14; --surface-2: #14221a; --surface-3: #1a2b21; --line: #1f2f26; --line-2: #2a3d32;
  --mint: #93E9B3; --mint-soft: #15301f; --green: #93E9B3;
  --good: #93E9B3; --good-bg: #163222; --mid: #ffc56b; --mid-bg: #33260e; --bad: #ff8a80; --bad-bg: #3a1a18; --info: #9dbcf5; --info-bg: #17223a;
  --accent: #93E9B3; --on-accent: #061E12; --shadow: 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark; } }
:root[data-theme="dark"] {
  --ink: #e7f0eb; --ink-2: #bcc8c1; --ink-3: #8c9a92; --ink-4: #66736c;
  --bg: #08110c; --surface: #0f1a14; --surface-2: #14221a; --surface-3: #1a2b21; --line: #1f2f26; --line-2: #2a3d32;
  --mint: #93E9B3; --mint-soft: #15301f; --green: #93E9B3;
  --good: #93E9B3; --good-bg: #163222; --mid: #ffc56b; --mid-bg: #33260e; --bad: #ff8a80; --bad-bg: #3a1a18; --info: #9dbcf5; --info-bg: #17223a;
  --accent: #93E9B3; --on-accent: #061E12; --shadow: 0 8px 24px rgba(0,0,0,.45);
  color-scheme: dark; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 15px/1.45 var(--font); -webkit-font-smoothing: antialiased; }
body.tv { font-size: 19px; }
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.mark { width: 34px; height: 34px; border-radius: 10px; background: var(--mint); color: #061E12; display: grid; place-items: center; font-weight: 800; font-size: 19px; flex: none; }

/* boot, sign-in, switched off */
.boot, .signin { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.boot .mark { animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(.92); opacity: .7; } }
.signin-card { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 32px; box-shadow: var(--shadow); text-align: center; }
.signin-card .mark { margin: 0 auto 18px; width: 48px; height: 48px; font-size: 26px; border-radius: 13px; }
.signin-card h1 { font-size: 22px; margin: 0 0 6px; letter-spacing: -.02em; }
.signin-card p { color: var(--ink-3); margin: 0 0 22px; }
.signin-card .go { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 10px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 700; }

.wrap { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 14px 28px; max-width: 1680px; margin: 0 auto; display: grid; gap: 14px; }
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.top h1 { font-size: 1.25em; margin: 0; letter-spacing: -.02em; }
.top .sub { color: var(--ink-3); font-size: .9em; }
.top .grow { flex: 1; }
.pill { font-size: .8em; border-radius: 999px; padding: 4px 10px; font-weight: 600; }
.pill.rehearse { color: var(--mid); background: var(--mid-bg); }
.tbtn { border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 6px 12px; font-weight: 600; font-size: .85em; text-decoration: none; }
.tbtn[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.tile { text-align: left; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; display: grid; gap: 6px; }
.tile[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); }
.tile .who { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-weight: 700; }
.tile .who small { font-weight: 500; color: var(--ink-3); font-size: .78em; white-space: nowrap; }
.tile .big { font-size: 2em; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tile .big small { font-size: .42em; font-weight: 600; color: var(--ink-3); letter-spacing: 0; margin-left: 4px; }
.tile .big .clear { font-size: .42em; color: var(--good); letter-spacing: 0; margin-left: 4px; }
.bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; position: relative; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--green); }
.bar.over i { background: var(--bad); }
.tile .hrs { font-size: .78em; color: var(--ink-3); display: flex; justify-content: space-between; }

.deck { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.side { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 18px; display: grid; gap: 18px; position: sticky; top: max(12px, env(safe-area-inset-top, 0px)); }
.side h2 { margin: 0; font-size: 1.7em; letter-spacing: -.03em; }
.side .lede { color: var(--ink-3); margin: -12px 0 0; }
.gauge { display: grid; gap: 6px; }
.gauge .lbl { display: flex; justify-content: space-between; font-size: .85em; color: var(--ink-3); }
.gauge .lbl b { color: var(--ink); font-size: 1.15em; }
.gauge .bar { height: 12px; overflow: visible; }
.gauge .bar i { border-radius: 999px; }
.gauge .cap { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.bar.split i.mtg { background: var(--ink-4); border-radius: 999px 0 0 999px; }
.bar.split i.tsk { background: var(--green); border-radius: 0 999px 999px 0; }
.bar.split i.off { background: repeating-linear-gradient(135deg, var(--ink-4) 0 3px, transparent 3px 6px); border-radius: 999px 0 0 999px; }
.bar.split i.mtg.mid { border-radius: 0; }
.bar.split.over i.tsk { background: var(--bad); }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78em; color: var(--ink-3); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.legend i.mtg { background: var(--ink-4); }
.legend i.tsk { background: var(--green); }
.legend i.off { background: repeating-linear-gradient(135deg, var(--ink-4) 0 2px, transparent 2px 4px); outline: 1px solid var(--ink-4); outline-offset: -1px; }
.legend.over i.tsk { background: var(--bad); }
.days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px; }
.day { display: grid; justify-items: center; gap: 2px; font-size: .74em; color: var(--ink-3); }
.day .col { width: 100%; height: 34px; border-radius: 6px; background: var(--surface-3); position: relative; overflow: hidden; }
.day .col i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink-3); }
.day .col i.off { background: repeating-linear-gradient(135deg, var(--ink-4) 0 3px, transparent 3px 6px); }
.day.away b { color: var(--ink-3); }
.day b { color: var(--ink); font-weight: 700; }
.day.today span { color: var(--ink); font-weight: 700; }
.day.past { opacity: .55; }
.meets { font-size: .85em; border-top: 1px solid var(--line); padding-top: 8px; }
.meets summary { cursor: pointer; color: var(--ink-2); font-weight: 600; list-style: none; display: flex; justify-content: space-between; }
.meets summary::-webkit-details-marker { display: none; }
.meets .mday { margin: 8px 0 2px; font-size: .82em; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.meets .mrow { display: grid; grid-template-columns: 4.2em minmax(0, 1fr) auto; gap: 8px; padding: 2px 0; }
.meets .mrow .t, .meets .mrow .h { color: var(--ink-3); }
.meets .mrow .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meets .mrow .n.priv { color: var(--ink-4); font-style: italic; }
.meets .mrow.off .n, .meets .mrow.off .t, .meets .mrow.off .h { color: var(--ink-4); }
.pile { display: grid; font-size: .9em; }
.pile div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--line); }
.pile div:last-child { border: 0; color: var(--ink-3); }
.note { font-size: .85em; border-radius: 10px; padding: 10px 12px; background: var(--info-bg); color: var(--info); }
.note.warn { background: var(--bad-bg); color: var(--bad); }
.keys { display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: .78em; color: var(--ink-3); }
kbd { font: 600 .9em var(--font); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; background: var(--surface-2); color: var(--ink-2); }

.queue { display: grid; gap: 14px; min-width: 0; }
.sect { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sect header, .sect summary { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; flex-wrap: wrap; }
.sect header, .sect[open] summary { border-bottom: 1px solid var(--line); }
.sect summary { cursor: pointer; list-style: none; }
.sect summary::-webkit-details-marker { display: none; }
.sect h3 { margin: 0; font-size: 1em; }
.sect .why { color: var(--ink-3); font-size: .85em; flex: 1; min-width: 200px; }
.sect .ct { font-weight: 800; }
.sect .all { border: 1px solid var(--line-2); background: var(--surface-2); border-radius: 7px; padding: 3px 10px; font-size: .8em; font-weight: 600; }
.empty { padding: 28px 16px; color: var(--ink-3); text-align: center; }
.row { display: grid; grid-template-columns: 6px minmax(0, 1fr) auto; gap: 0 14px; align-items: center; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }
.row .sev { align-self: stretch; border-radius: 0 3px 3px 0; }
.row.stuck .sev { background: var(--bad); }
.row.carry .sev { background: var(--mid); }
.row.nodate .sev { background: var(--info); }
.row.week .sev { background: var(--good); }
.row[aria-selected="true"] { background: var(--surface-2); }
.row.busy { opacity: .6; pointer-events: none; }
.row .t { min-width: 0; }
.row .n { font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.row a.n:hover { text-decoration: underline; }
.row .m { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8em; color: var(--ink-3); margin-top: 2px; align-items: center; }
.row .ans { margin-top: 6px; font-size: .85em; color: var(--ink-2); background: var(--surface-2); border-radius: 8px; padding: 6px 10px; }
.chip { display: inline-flex; align-items: center; border-radius: 999px; padding: 1px 8px; font-size: .78em; font-weight: 700; }
.chip.late { background: var(--bad-bg); color: var(--bad); }
.chip.rec { background: var(--surface-3); color: var(--ink-2); }
.chip.pulse { background: var(--mint-soft); color: var(--green); }
.chip.push { background: var(--mid-bg); color: var(--mid); }
.chip.lock { background: var(--surface-3); color: var(--ink-3); }
.acts, .pop { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.acts button, .pop button { border: 1px solid var(--line-2); background: var(--surface); border-radius: 8px; padding: 5px 10px; font-size: .82em; font-weight: 600; white-space: nowrap; }
.acts button:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-4); }
/* Every button looks the same: a highlighted one read as already picked (Nikki 2026-10-27). */
.acts .chosen { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: .82em; font-weight: 700; white-space: nowrap; margin-right: 4px; }
.acts button:disabled { opacity: .35; cursor: not-allowed; }
.acts button.quiet { border-color: transparent; background: transparent; color: var(--ink-3); }
.pop button { background: var(--surface-2); text-align: left; }
.pop button small { display: block; color: var(--ink-3); font-size: .85em; font-weight: 500; }
.pop button small.over { color: var(--bad); }
#toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 10px; font-weight: 600; box-shadow: var(--shadow); max-width: calc(100vw - 32px); z-index: 5; }
#toast.err { background: var(--bad); color: #fff; }

@media (max-width: 1100px) { .deck { grid-template-columns: 1fr; } .side { position: static; } }
@media (max-width: 560px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .row { grid-template-columns: 6px minmax(0, 1fr); } .acts, .pop { grid-column: 2; justify-content: flex-start; margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Time off at a glance */
.tile .away { font-size: .74em; font-weight: 700; color: var(--ink-2); background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, transparent 4px 8px); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; width: max-content; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side h2 .away { font-size: .5em; font-weight: 700; color: var(--ink-2); vertical-align: middle; border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; background: repeating-linear-gradient(135deg, var(--surface-3) 0 4px, transparent 4px 8px); }