/* EventCoverage — dark, high-contrast UI for venues and bright daylight alike. */
:root {
  --bg: #0b0d12; --bg2: #12151d; --card: #171b25; --card2: #1e2330; --line: #2a3142;
  --text: #eef1f7; --muted: #8d97ab; --accent: #f43f5e; --accent2: #fb7185;
  --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; --info: #3b82f6;
  --radius: 14px; --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.45 var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent2); }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
p { margin: 0 0 .8em; }
.muted { color: var(--muted); } .small { font-size: .85em; } .hidden, [hidden] { display: none !important; }
.ok-text { color: var(--ok); } .warn-text { color: var(--warn); } .bad-text { color: var(--bad); }
code, .kbd { background: var(--card2); padding: 1px 6px; border-radius: 6px; }
.loading { padding: 60px 20px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* ------------------------------------------------ buttons & forms */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line);
  background: var(--card2); color: var(--text); font: 600 14px var(--font); cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .05s, background .15s; }
.btn:hover { background: #262c3b; } .btn:active { transform: scale(.97); } .btn:disabled { opacity: .5; cursor: default; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: #e11d48; }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #04130a; } .btn.ok:hover { background: #16a34a; }
.btn.danger { color: #fca5a5; border-color: #7f1d1d; } .btn.danger:hover { background: #3b1111; }
.btn.warn { color: #fcd34d; border-color: #78350f; }
.btn.ghost { background: transparent; }
.btn.small { padding: 6px 10px; font-size: 13px; border-radius: 8px; } .btn.tiny { padding: 3px 8px; font-size: 12px; border-radius: 7px; }
.btn.big { padding: 14px 18px; font-size: 16px; border-radius: 12px; }
.btn.huge { padding: 20px 18px; font-size: 20px; border-radius: 14px; font-weight: 800; }
.linkbtn { background: none; border: 0; color: var(--accent2); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.iconbtn { background: none; border: 0; color: var(--text); font-size: 22px; padding: 8px; cursor: pointer; position: relative; line-height: 1; }
.bell .badge { position: absolute; top: 0; right: -2px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 6px; }
.inline { display: inline; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 8px; }

input, select, textarea { width: 100%; background: var(--bg2); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: 15px var(--font); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--accent); }
/* iOS Safari gives date/time inputs a wide intrinsic size (and centres the text) — that pushed sheets sideways. */
input[type=datetime-local], input[type=date], input[type=time] { -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%; box-sizing: border-box; min-height: 44px; text-align: left; }
input::-webkit-date-and-time-value { text-align: left; margin: 0; }
input::-webkit-datetime-edit { padding: 0; }
label, .sheet, .sheet form, .sheet .form { min-width: 0; max-width: 100%; }
input[type=color] { width: 44px; padding: 2px; height: 38px; }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-weight: 600; font-size: 13px; color: #cfd5e2; }
.form label.check, label.check { flex-direction: row; align-items: center; gap: 8px; font-weight: 500; }
label.radio { display: flex; flex-direction: row; gap: 10px; align-items: flex-start; font-weight: 500; padding: 8px; border-radius: 10px; cursor: pointer; }
label.radio:hover { background: var(--card2); }
fieldset { min-width: 0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
legend { font-weight: 700; padding: 0 6px; color: #cfd5e2; font-size: 13px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .grid2 { grid-template-columns: 1fr; } }

/* ------------------------------------------------ chips, badges */
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--card2); color: var(--muted); border: 1px solid var(--line); }
.st-assigned { color: #cbd5e1; } .st-on_way { color: #93c5fd; border-color: #1e3a8a; background: #0f1d3d; }
.st-captured { color: #86efac; border-color: #14532d; background: #0b2716; } .st-missed { color: #fca5a5; border-color: #7f1d1d; background: #2a0d0d; }
.st-cancelled { color: #a1a1aa; text-decoration: line-through; }
.prio { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; letter-spacing: .02em; vertical-align: 2px; }
.prio.p2 { background: #3a2a07; color: #fbbf24; }
.prio.p3 { background: var(--bad); color: #fff; animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(239,68,68,.25); } }
.dchip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #cfd5e2; }
.dchip::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pill { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--accent2); }
.cov { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 600; background: var(--card2); border: 1px solid var(--line); margin: 2px; }
.cov.need { color: #fdba74; border-color: #7c2d12; background: #2a140a; border-style: dashed; }
.cov.need.conflict { color: #fff; background: var(--bad); border: 0; }
.tzchip { background: var(--card2); border: 1px solid var(--line); color: #cfd5e2; border-radius: 999px; padding: 3px 10px; font: 600 12px var(--font); cursor: pointer; }

/* ------------------------------------------------ flash, toasts, net badge */
.flash { padding: 10px 14px; border-radius: 10px; margin-bottom: 14px; background: var(--card2); border-left: 4px solid var(--info); }
.flash.ok { border-color: var(--ok); } .flash.error { border-color: var(--bad); }
#toasts { position: fixed; z-index: 100; right: 14px; bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 28px)); }
.crew-app #toasts { bottom: calc(84px + var(--safe-b)); left: 14px; right: 14px; max-width: none; }
.toast { display: flex; gap: 10px; align-items: flex-start; background: #232938; border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 12px; padding: 12px 12px 12px 14px;
  box-shadow: var(--shadow); animation: tin .2s ease-out; cursor: default; }
.toast.ok { border-left-color: var(--ok); } .toast.warn { border-left-color: var(--warn); } .toast.error { border-left-color: var(--bad); }
.toast.urgent { border-left-color: var(--accent); background: #2b1520; cursor: pointer; }
.toast.out { opacity: 0; transform: translateY(8px); transition: .25s; }
.toast-body { flex: 1; } .toast-act { background: rgba(255,255,255,.1); border: 1px solid var(--line); color: var(--text); font-weight: 700; border-radius: 8px; padding: 4px 10px; cursor: pointer; align-self: center; white-space: nowrap; } .toast-act:hover { background: rgba(255,255,255,.18); } .toast-x { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
@keyframes tin { from { opacity: 0; transform: translateY(10px); } }
#net-badge { display: none; position: fixed; top: calc(var(--safe-t) + 6px); left: 50%; transform: translateX(-50%); z-index: 90; background: var(--warn); color: #1a1205; font-weight: 700; font-size: 13px;
  padding: 6px 14px; border-radius: 10px; box-shadow: var(--shadow); max-width: calc(100vw - 24px); text-align: center; }
#net-badge.show { display: block; } #net-badge.warn { background: var(--info); color: #fff; }

/* ------------------------------------------------ sheets (modal / bottom sheet) */
.sheet-wrap { position: fixed; inset: 0; z-index: 80; background: rgba(5,7,10,.6); display: flex; align-items: flex-end; justify-content: center; opacity: 0; transition: opacity .15s; }
.sheet-wrap.open { opacity: 1; }
.sheet { position: relative; background: var(--card); width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; border-radius: 20px 20px 0 0; padding: 22px 18px calc(18px + var(--safe-b));
  border: 1px solid var(--line); }
.sheet.wide { max-width: 1100px; }
@media (min-width: 760px) { .sheet-wrap { align-items: center; } .sheet { border-radius: 18px; } }
.sheet-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: var(--muted); font-size: 28px; cursor: pointer; z-index: 2; }
.sheet h2 { padding-right: 30px; }
.sheet-x + h2 { margin-top: 0; padding-top: 8px; }
/* The item editor starts with a full-width title field: the × floats over its reserved right edge instead of pushing it down. */
.sheet-x:has(+ form.editor) { margin-bottom: -40px; }
.sheet-x + form.editor .editor-head { padding-right: 58px; }
.sheet-actions { display: flex; gap: 10px; margin-top: 14px; } .sheet-actions .btn { flex: 1; }
body.has-sheet { overflow: hidden; }
dialog.modal { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 18px; padding: 22px; width: min(560px, 94vw); }
dialog.modal::backdrop { background: rgba(5,7,10,.6); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ------------------------------------------------ auth + generic pages */
.auth-page { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: 20px;
  background: radial-gradient(circle at 20% 0%, #2a1020 0, transparent 40%), radial-gradient(circle at 100% 100%, #10203a 0, transparent 45%), var(--bg); }
.auth-card { width: 100%; max-width: 420px; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); }
.auth-card.wide { max-width: 640px; }
.or { text-align: center; color: var(--muted); position: relative; margin: 2px 0; } .or span { background: var(--card); padding: 0 10px; position: relative; } .or::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--line); }
.checklist { list-style: none; padding: 0; } .checklist .ok { color: var(--ok); } .checklist .bad { color: var(--bad); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: -.01em; margin-bottom: 14px; }
.brand img { height: 30px; width: auto; display: block; }
.auth-card .brand img { height: 76px; }
.ptop-row .brand img { height: 36px; }
.brand-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--accent); position: relative; box-shadow: 0 0 0 3px rgba(244,63,94,.25); }
.brand-mark::after { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px; border-bottom: 1px solid var(--line); background: var(--bg2); gap: 12px; flex-wrap: wrap; }
.topbar .brand { margin: 0; }
.topnav { display: flex; gap: 18px; align-items: center; } .topnav a { color: #cfd5e2; text-decoration: none; font-weight: 600; } .topnav a:hover { color: #fff; }
.page { max-width: 1200px; margin: 0 auto; padding: 24px 22px 60px; } .page.narrow { max-width: 560px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.page-head select { width: auto; padding: 4px 8px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 16px; }
.empty { text-align: center; padding: 40px 20px; } .empty-note { color: var(--muted); padding: 24px; text-align: center; }
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-bottom: 24px; }
.project-card { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; color: var(--text); text-decoration: none; transition: border-color .15s, transform .1s; }
.project-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.pc-top { display: flex; justify-content: space-between; margin-bottom: 8px; }
.section-title { margin-top: 10px; } .archived summary { cursor: pointer; color: var(--muted); margin: 10px 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.table { width: 100%; border-collapse: collapse; } .table td, .table th { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table select { padding: 6px 8px; font-size: 13px; }
.row-actions { white-space: nowrap; text-align: right; } .row-actions .btn, .row-actions form { margin-left: 4px; }
.linkbox { margin-top: 12px; } .copyrow { display: flex; gap: 8px; } .copyrow input { font-size: 12px; }

/* ------------------------------------------------ planner */
.ptop { position: sticky; top: 0; z-index: 30; background: #0b0d12; padding-top: var(--safe-t); border-bottom: 1px solid var(--line); }
.ptop-row { display: flex; align-items: center; gap: 16px; padding: 10px 20px 4px; }
.ptop-row .brand { margin: 0; } .ptop-row .brand-name { display: none; }
.ptitle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; } .ptitle h1 { font-size: 1.2rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptop-actions { display: flex; align-items: center; gap: 8px; }
.sync-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.2); } .sync-dot.off { background: var(--warn); }
.ptabs { display: flex; gap: 2px; padding: 0 14px; overflow-x: auto; }
.ptabs a { padding: 10px 14px; color: var(--muted); text-decoration: none; font-weight: 700; border-bottom: 3px solid transparent; white-space: nowrap; }
.ptabs a.active { color: var(--text); border-color: var(--accent); }
.tab-badge { display: none; background: var(--bad); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; margin-left: 4px; } .tab-badge.show { display: inline-block; }
.pmain { max-width: 1400px; margin: 0 auto; padding: 18px 20px 80px; }
@media (max-width: 700px) { .ptop-actions .ghost { display: none; } .ptop-row { padding: 8px 12px 2px; } .pmain { padding: 12px 10px 80px; } }

.stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; min-width: 110px; }
.stat b { display: block; font-size: 1.4rem; } .stat span { color: var(--muted); font-size: 12px; }
.stat.ok b { color: var(--ok); } .stat.warn b { color: var(--warn); } .stat.bad b { color: var(--bad); }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar input[type=search] { flex: 1; min-width: 200px; } .toolbar select { width: auto; }
.daypick { display: flex; gap: 6px; flex-wrap: wrap; }

.slist { display: flex; flex-direction: column; gap: 6px; }
.day-head { font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 0 4px; }
.srow { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--dept);
  border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: background .15s; }
.srow:hover { background: var(--card2); }
.srow.prio-3 { box-shadow: inset 0 0 0 1px rgba(239,68,68,.5); }
.srow.live { background: linear-gradient(90deg, rgba(244,63,94,.12), transparent 50%), var(--card); }
.srow.past { opacity: .6; } .srow.st-cancelled, .srow.st-dropped { opacity: .45; } .srow.st-cancelled .srow-title, .srow.st-dropped .srow-title { text-decoration: line-through; }
.srow-time b { display: block; font-size: 1.05rem; } .srow-time span { color: var(--muted); font-size: 13px; }
.srow-title { font-weight: 700; } .srow-sub { color: var(--muted); font-size: 13px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 2px; }
.srow-cov { text-align: right; max-width: 360px; }
@media (max-width: 700px) { .srow { grid-template-columns: 56px 1fr; } .srow-cov { grid-column: 1 / -1; text-align: left; } }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: .2; } }
.now-line { position: relative; border-top: 2px solid var(--accent); margin: 8px 0; height: 0; }
.now-line span { position: absolute; left: 0; top: -11px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; border-radius: 6px; padding: 1px 7px; }

/* timeline */
.tl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.tl-inner { position: relative; }
.tl-head, .tl-row { display: flex; border-bottom: 1px solid var(--line); }
.tl-head { position: sticky; top: 0; background: var(--card2); z-index: 3; height: 30px; }
.tl-label { position: sticky; left: 0; z-index: 2; width: 180px; flex: none; padding: 8px 12px; background: var(--card); border-right: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; }
.tl-head .tl-label { background: var(--card2); }
.tl-label { gap: 1px; } .tl-label b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-label span { font-size: 12px; color: var(--muted); }
.tl-ticks { position: relative; flex: none; }
.tl-tick { position: absolute; top: 0; bottom: 0; border-left: 1px solid var(--line); font-size: 11px; color: var(--muted); padding: 7px 0 0 4px; }
.tl-tick.half { border-left-style: dashed; opacity: .5; }
.tl-track { position: relative; flex: none; background-image: linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: calc(60px * 2.2) 100%; }
.need-row { background: rgba(239,68,68,.04); }
.tl-track.drop-ok { background-color: rgba(34,197,94,.12); } .tl-track.drop-bad { background-color: rgba(239,68,68,.12); }
.tl-block { position: absolute; height: 40px; border-radius: 8px; padding: 4px 8px; background: color-mix(in srgb, var(--c) 30%, #151925); border: 1px solid color-mix(in srgb, var(--c) 70%, transparent);
  border-left: 4px solid var(--c); overflow: hidden; cursor: pointer; font-size: 12px; line-height: 1.25; user-select: none; }
.tl-block b, .tl-block span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tl-block span { color: #cbd5e1; font-size: 11px; }
.tl-block.prio-3 { outline: 2px solid var(--bad); outline-offset: -1px; }
.tl-block.need { background: #2a140a; border: 1px dashed #f97316; border-left: 4px solid #f97316; }
.tl-block.need.conflict { background: #3b0d0d; border-color: var(--bad); }
.tl-block.st-captured { opacity: .65; } .tl-block.st-missed { background: #3b0d0d; }
.tl-block.dragging { opacity: .4; } .tl-block[draggable=true] { cursor: grab; }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); z-index: 4; pointer-events: none; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 12px; }

/* conflict board */
.conflict-intro { margin-bottom: 10px; max-width: 760px; }
.sec { font-size: 14px; text-transform: uppercase; letter-spacing: .07em; color: #cfd5e2; margin: 22px 0 10px; }
.ccard { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--dept, var(--line)); border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.ccard.urgent { border-color: rgba(239,68,68,.6); border-left-color: var(--bad); }
.ccard.compact { padding: 10px 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.ccard-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; cursor: pointer; }
.competitors { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.comp { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--bg2); border-radius: 10px; padding: 8px 10px; }
.ccard-foot { margin-top: 10px; } .clickable { cursor: pointer; }
.quote { margin-top: 6px; padding: 6px 10px; border-left: 3px solid var(--line); color: #cfd5e2; font-style: italic; }
.decisions { padding-left: 18px; } .decisions li { margin-bottom: 4px; }
.activity { list-style: none; padding: 0; margin: 0; } .activity li { padding: 8px 0; border-bottom: 1px solid var(--line); }
.act-kind { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--accent2); font-weight: 700; margin: 0 4px; }

/* settings */
.inline-edit { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; } .inline-edit input { padding: 7px 9px; font-size: 14px; }
.inline-edit.loc { display: grid; grid-template-columns: 1fr 1fr auto auto; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.inline-edit.loc input[name=notes] { grid-column: 1 / 3; grid-row: 2; }
.inline-edit.loc input { min-width: 0; }
.inline-edit.loc:last-child { border-bottom: 0; }

/* editor */
.editor-head { margin-bottom: 12px; }
.title-input { font-size: 1.35rem; font-weight: 800; background: transparent; border: 0; border-bottom: 2px solid var(--line); border-radius: 0; padding: 6px 0; }
.title-input:focus { outline: 0; border-color: var(--accent); }
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 860px) { .editor-grid { grid-template-columns: 1fr; } }
.ed-col { display: flex; flex-direction: column; gap: 10px; }
.ed-col label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 13px; color: #cfd5e2; }
.ed-col.live { background: var(--bg2); border-radius: 14px; padding: 14px; }
.seg-label { font-weight: 600; font-size: 13px; color: #cfd5e2; margin: 0 0 8px; }
.sheet .seg-label { margin: 18px 0 8px; line-height: 1.35; }
.sheet .seg-label + .muted, .sheet .seg-label + p { margin-top: -2px !important; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-opt { flex-direction: row !important; position: relative; }
.seg-opt input { position: absolute; opacity: 0; }
.seg-opt span { display: inline-block; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); cursor: pointer; font-weight: 700; }
.seg-opt input:checked + span { background: #2b1520; border-color: var(--accent); color: #fff; }
.seg-opt.p2 input:checked + span { background: #3a2a07; border-color: #fbbf24; color: #fbbf24; }
.seg-opt.p3 input:checked + span { background: var(--bad); border-color: var(--bad); color: #fff; }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); }
.quick-dur { display: flex; gap: 4px; flex-wrap: wrap; margin-top: -4px; }
.ref-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ref-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cov-block { margin-bottom: 12px; } .cov-head { margin-bottom: 6px; }
.cov-person { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--card); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.cands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cand { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; color: var(--text); text-align: left; cursor: pointer; font: 13px var(--font); }
.cand b { display: block; } .cand span { font-size: 11px; color: var(--muted); }
.cand.free { border-color: #14532d; } .cand.free span { color: #86efac; } .cand.busy span { color: #fdba74; }
.cand:hover { background: var(--card2); }
.editor-foot { display: flex; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 0 calc(4px + var(--safe-b)); border-top: 1px solid var(--line); flex-wrap: wrap; position: sticky; bottom: -18px; background: var(--card); z-index: 3; }
.foot-left, .foot-right { display: flex; gap: 6px; flex-wrap: wrap; }
.comments { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; margin-bottom: 8px; }
.comment { background: var(--card); border-radius: 10px; padding: 8px 10px; } .comment.mine { background: #1d2333; }
.comment-form { display: flex; gap: 8px; align-items: flex-end; } .comment-form textarea { flex: 1; }
.notif-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.notif-list li { background: var(--card2); border-radius: 10px; padding: 10px 12px; cursor: pointer; } .notif-list li.urgent { border-left: 4px solid var(--accent); }
.banner { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.banner.handover { border-color: var(--info); background: #0f1a33; }
.banner.notify-cta { border-color: var(--accent); }
.muted-banner { color: #cfd5e2; flex-direction: row; align-items: center; justify-content: space-between; }
.note { background: var(--bg2); border-left: 3px solid var(--warn); padding: 8px 12px; border-radius: 8px; }

/* ------------------------------------------------ crew app (field view) */
.crew-app { padding-bottom: calc(80px + var(--safe-b)); }
.crew-top { position: sticky; top: 0; z-index: 20; background: #0b0d12; border-bottom: 1px solid var(--line); padding-top: var(--safe-t); }
.crew-top-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px; }
.crew-title { flex: 1; min-width: 0; }
.crew-project { font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crew-clock { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.crew-main { padding: 12px 12px 20px; max-width: 640px; margin: 0 auto; }
/* Header lines up with the content below: same width, and the clock's right edge on the cards' right edge. */
.crew-top-row { max-width: 640px; margin: 0 auto; box-sizing: border-box; padding-left: 12px; padding-right: 12px; }
.crew-clock { margin-left: auto; text-align: right; }
.crew-nav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: flex; background: rgba(18,21,29,.97); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.crew-nav button { flex: 1; background: none; border: 0; color: var(--muted); font: 700 12px var(--font); padding: 10px 0 12px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; }
.crew-nav button span { font-size: 22px; }
.crew-nav .nav-ico { position: relative; display: inline-block; line-height: 1; }
.nav-badge { position: absolute; top: -5px; right: -11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font: 800 11px/18px var(--font); font-style: normal; text-align: center; box-shadow: 0 0 0 2px #12151d; }
.nav-badge[hidden] { display: none; }
#navAlerts.ring .nav-ico { animation: ec-shake .7s ease-in-out; transform-origin: 50% 10%; } .crew-nav button.active { color: var(--text); }
.crew-nav button.active span { filter: drop-shadow(0 0 6px rgba(244,63,94,.6)); }

.big-card { background: var(--card); border: 2px solid var(--line); border-left: 8px solid var(--dept); border-radius: 20px; padding: 16px; margin-bottom: 14px; cursor: pointer; }
.big-card.is-now { border-color: var(--accent); border-left-color: var(--dept); background: linear-gradient(160deg, #2a1220 0, var(--card) 55%); box-shadow: 0 0 0 4px rgba(244,63,94,.12); }
.big-card.prio-3 { border-color: var(--bad); }
.bc-label { display: flex; justify-content: space-between; align-items: center; font-weight: 900; letter-spacing: .14em; font-size: 13px; color: var(--accent2); }
.is-next .bc-label { color: #93c5fd; }
.bc-when { letter-spacing: 0; font-weight: 700; color: var(--text); font-size: 15px; }
.bc-time { font-size: 34px; font-weight: 900; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.bc-title { font-size: 24px; font-weight: 800; margin: 0 0 6px; }
.bc-loc { font-size: 19px; font-weight: 700; margin: 6px 0; }
.bc-contact, .bc-meta { color: #cfd5e2; margin: 4px 0; }
/* NEXT / NOW card: labelled info rows, each with its own colour so place, contact and team never look alike */
.bc-info { display: grid; gap: 2px; margin: 12px 0 6px; background: var(--bg2); border-radius: 14px; padding: 4px; }
.bc-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; }
.bc-row + .bc-row { border-top: 1px solid rgba(255,255,255,.05); }
.bc-ico { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; }
.bc-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bc-lab { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bc-val { font-weight: 700; overflow-wrap: anywhere; }
.r-place .bc-ico { background: rgba(56,189,248,.16); color: #7dd3fc; } .r-place .bc-lab { color: #7dd3fc; } .r-place .bc-val { font-size: 18px; color: #fff; }
.r-contact .bc-ico { background: rgba(167,139,250,.16); color: #c4b5fd; } .r-contact .bc-lab { color: #c4b5fd; } .r-contact .bc-val { font-size: 16px; }
.r-with .bc-ico { background: rgba(52,211,153,.14); color: #6ee7b7; } .r-with .bc-lab { color: #6ee7b7; }
.bc-sub { font-size: 13px; color: var(--muted); margin-top: 1px; }
.r-order .bc-ico { background: rgba(251,191,36,.14); color: #fcd34d; } .r-order .bc-lab { color: #fcd34d; } .r-order .bc-val { font-size: 15px; }
.bc-team { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.team-chip { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 9px 2px 2px; font-size: 13px; font-weight: 600; color: #dfe4ee; }
.delay-chip { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0; padding: 7px 10px; border-radius: 10px; background: rgba(245,158,11,.12); border: 1px solid rgba(245,158,11,.35); color: #fcd34d; font-weight: 700; font-size: 14px; }
.delay-chip .btn { margin-left: auto; }
.bc-shotlist { background: var(--bg2); border-radius: 10px; padding: 8px 12px; margin: 8px 0; font-size: 15px; }
.tel { font-weight: 800; color: #93c5fd; text-decoration: none; }
.progress { height: 6px; background: var(--bg2); border-radius: 6px; overflow: hidden; margin: 10px 0 4px; } .progress span { display: block; height: 100%; background: var(--accent); }
.bc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; } .bc-actions .huge { grid-column: 1 / -1; }
.idle { text-align: center; padding: 22px 10px; border: 2px dashed var(--line); border-radius: 20px; margin-bottom: 14px; }
.idle-big { font-size: 22px; font-weight: 800; }
.needs { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.needs-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #2a1d07; border: 1px solid #78350f; border-radius: 14px; padding: 10px 12px; }
.needs-row .btn { padding: 10px 12px; }
.timeline { display: flex; flex-direction: column; gap: 8px; }
.day-sep { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.shot-card { background: var(--card); border: 1px solid var(--line); border-left: 6px solid var(--dept); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.shot-card:active { background: var(--card2); }
.shot-card.prio-3 { border-color: rgba(239,68,68,.6); border-left-color: var(--dept); }
.shot-card.done { opacity: .55; } .shot-card.past { opacity: .45; }
.sc-time { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .sc-time .t { font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sc-title { font-size: 17px; margin: 4px 0 2px; }
.sc-loc { font-weight: 700; color: #e2e8f0; } .sc-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.sc-meta .dept-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dept); margin-right: 5px; }
.past-toggle { background: none; border: 1px dashed var(--line); color: var(--muted); padding: 10px; border-radius: 12px; font: 600 14px var(--font); cursor: pointer; }
.team-strip { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.ts-item { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; min-width: 110px; display: flex; flex-direction: column; }
.team-list { display: flex; flex-direction: column; gap: 8px; }
.team-row { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.team-row summary { cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.team-row summary::-webkit-details-marker { display: none; }
.mini-list { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.detail-head { border-left: 6px solid var(--dept); padding-left: 12px; margin-bottom: 12px; }
.detail-head h2 { font-size: 1.5rem; margin: 2px 0; }
.detail-time { font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
.detail-line { font-size: 17px; font-weight: 600; }
.detail-block { margin: 14px 0; }
.ref-img img { width: 100%; max-height: 320px; object-fit: contain; border-radius: 12px; background: #000; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; } .action-grid .huge { grid-column: 1 / -1; }
.delay-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.delay-grid .btn { min-width: 0; padding-left: 4px; padding-right: 4px; justify-content: center; }
.pick-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.pick { display: flex !important; flex-direction: row !important; gap: 10px; align-items: center; background: var(--card2); border-radius: 12px; padding: 12px; cursor: pointer; }
.menu-list { display: flex; flex-direction: column; }
.menu-item { background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); text-align: left; padding: 16px 4px; font: 600 16px var(--font); text-decoration: none; cursor: pointer; }
.steps { padding-left: 20px; } .steps li { margin-bottom: 8px; }
.crew-app .sec { margin-top: 18px; }

@media (min-width: 900px) { .crew-main, .crew-top-row { max-width: 720px; } }

/* ------------------------------------------------ any-time items & reserved breaks */
.srow.flex { border-left-style: dashed; }
.srow-time b.any { font-size: .95rem; color: #93c5fd; letter-spacing: .02em; }
.flex-group { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px dashed #1e3a8a; border-radius: 14px; background: rgba(59,130,246,.05); }
.flex-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #93c5fd; padding: 0 4px; }
.any-strip { background: rgba(59,130,246,.08); border: 1px dashed #1e3a8a; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.tl-block.brk { background: repeating-linear-gradient(135deg, #1f2533 0 8px, #262d3d 8px 16px); border: 1px solid #3a4459; border-left: 4px solid #64748b; cursor: pointer; }
.tl-block.brk.kind-offload { border-left-color: #22c55e; } .tl-block.brk.kind-edit { border-left-color: #a855f7; }
.tl-block.brk.kind-battery { border-left-color: #f59e0b; } .tl-block.brk.kind-meal { border-left-color: #14b8a6; }
.tl-label .linkbtn { font-size: 11px; align-self: flex-start; margin-top: 2px; }
.warnish { border-color: #78350f !important; }
.btn.warnish { color: #fcd34d; }
.cand.warn { border-color: #78350f; } .cand.warn span { color: #fcd34d; }
.row.center { justify-content: center; margin-top: 10px; }
.anytag { font-size: 13px; font-weight: 900; letter-spacing: .08em; color: #93c5fd; }
.any-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.any-card { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px dashed #1e3a8a; border-left: 6px solid var(--dept); border-radius: 14px; padding: 10px 12px; cursor: pointer; }
.any-card .any-main { flex: 1; min-width: 0; }
.any-card .btn { padding: 14px 16px; font-size: 18px; }
.any-card.open { border-color: var(--accent); border-style: dashed; cursor: default; }
.any-card.open .btn { font-size: 14px; }
.any-card.prio-3 { border-color: rgba(239,68,68,.7); }
.block-card { background: repeating-linear-gradient(135deg, #171b25 0 10px, #1b2030 10px 20px); border: 1px solid var(--line); border-left: 6px solid #22c55e; border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.block-card.live { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.15); margin-bottom: 14px; }
.big-seg .seg-opt span { padding: 12px 14px; font-size: 15px; }
.sheet .seg { margin-bottom: 12px; }
.brand-tag { font-weight: 600; font-size: 12px; color: var(--muted); margin-left: 2px; }
.ptop-row .brand-tag, .topbar .brand-tag { display: none; }
@media (min-width: 900px) { .topbar .brand-tag { display: inline; } }

/* project switcher */
.back-link { color: var(--muted); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.back-link:hover { color: var(--text); }
.pswitch { position: relative; min-width: 0; }
.pswitch summary { list-style: none; display: flex; align-items: center; gap: 6px; cursor: pointer; border-radius: 8px; padding: 2px 6px; }
.pswitch summary::-webkit-details-marker { display: none; }
.pswitch summary:hover { background: var(--card2); }
.pswitch .caret { color: var(--muted); font-size: 12px; }
.pswitch-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 260px; max-height: 60vh; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.pswitch-menu a { color: var(--text); text-decoration: none; padding: 9px 12px; border-radius: 8px; font-weight: 600; }
.pswitch-menu a:hover { background: var(--card2); }
.pswitch-menu a.current { color: var(--accent2); }
.pswitch-menu a.all { border-top: 1px solid var(--line); border-radius: 0; color: var(--muted); }
@media (max-width: 700px) { .back-link { display: none; } }

.banner.wrong-event { border-color: var(--warn); background: #2a1d07; }

.newloc { background: var(--bg2); border: 1px dashed var(--accent); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.newloc-title { font-weight: 800; font-size: 13px; }
.browser-hint { margin-top: 16px; background: #2a1d07; border: 1px solid var(--warn); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.app-signin { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.app-code { font-size: 40px; font-weight: 900; letter-spacing: .12em; text-align: center; font-variant-numeric: tabular-nums; background: var(--bg2); border-radius: 14px; padding: 12px; margin: 8px 0; }

.count-pick { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; margin-right: 6px; }
.count-pick input { width: 62px; padding: 7px 8px; }
.call-box { background: var(--bg2); border: 1px solid var(--line); border-left: 4px solid var(--info); border-radius: 10px; padding: 8px 10px; margin: 8px 0; display: flex; flex-direction: column; gap: 3px; }
.call-box.st-filled { border-left-color: var(--ok); } .call-box.st-expired, .call-box.st-no_takers { border-left-color: var(--bad); }
.call-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ask-all { align-self: flex-start; margin: 6px 0; }
.banner.call { border-color: var(--accent); background: linear-gradient(160deg, #2a1220 0, var(--card) 60%); }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.call-title { font-size: 19px; font-weight: 800; }

/* overview */
.ov-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .ov-grid { grid-template-columns: 1fr; } }
.attn { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.attn li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--bg2); border-radius: 10px; padding: 9px 12px; border-left: 4px solid var(--line); }
.attn li.sev-3 { border-left-color: var(--bad); background: #22100f; } .attn li.sev-2 { border-left-color: var(--warn); } .attn li.sev-1 { border-left-color: var(--info); }
.attn-ic { font-size: 18px; text-align: center; } .attn-act { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 700px) { .attn li { grid-template-columns: 24px 1fr; } .attn-act { grid-column: 2; justify-content: flex-start; } }
.who-list { display: flex; flex-direction: column; gap: 8px; }
.who { background: var(--bg2); border-radius: 10px; padding: 9px 12px; }
.who-now { margin-top: 2px; }
.now-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
.now-dot.busy { background: var(--accent); } .now-dot.free { background: var(--ok); } .now-dot.brk { background: var(--warn); }
.setup { border-color: var(--accent); }
.setup-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.setup-list li.done { color: var(--muted); } .setup-list li.done a { color: var(--muted); text-decoration: line-through; }
.stat.clickable { cursor: pointer; } .stat.clickable:hover { border-color: var(--accent); }
.ed-section { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent2); margin: 6px 0 -2px; padding-top: 8px; border-top: 1px solid var(--line); }
.ed-section:first-child { border-top: 0; padding-top: 0; }
.avail { border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; }
.avail.ok { background: #0b2716; border: 1px solid #14532d; } .avail.warn { background: #2a1d07; border: 1px solid #78350f; } .avail.bad { background: #2a0d0d; border: 1px solid #7f1d1d; }
details.more-details > summary { cursor: pointer; font-weight: 700; color: #cfd5e2; padding: 6px 0; }
@media (min-width: 861px) { .ed-col.live { position: sticky; top: 0; align-self: start; max-height: calc(92vh - 140px); overflow: auto; } }

.tl-block.brk.kind-rest { border-left-color: #38bdf8; }
.meal-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 8px; }
.meal-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; } .meal-row label.check { flex-direction: row; align-items: center; font-size: 14px; min-width: 90px; }
.meal-row input[type=time] { width: 120px; padding: 7px 8px; } .meal-row select { width: auto; padding: 7px 8px; }
.block-card.kind-meal { border-left-color: #14b8a6; } .block-card.kind-rest { border-left-color: #38bdf8; } .block-card.kind-edit { border-left-color: #a855f7; }

.who-line { margin-top: 6px; }

.seg-opt.together small { font-weight: 600; margin-left: 4px; }
.seg-opt.together.busy span { opacity: .5; }

.ptabs .ver { margin-left: auto; align-self: center; padding: 0 8px; white-space: nowrap; font-size: 11px; }

/* ---------- "nothing missed": unseen changes ---------- */
.banner.changes { border-color: var(--warn); background: linear-gradient(160deg, #2a2007 0, var(--card) 70%); }
.change-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.change-list li { background: rgba(255,255,255,.04); border-radius: 10px; padding: 8px 10px; cursor: pointer; line-height: 1.35; }
.changed-tag { display: inline-block; margin: 4px 0; padding: 3px 8px; border-radius: 8px; background: #3a2c08; color: #fcd34d; font-size: .85rem; font-weight: 600; }
p.changed-tag { display: block; }
.seen-ok { color: var(--ok, #22c55e); font-size: .8rem; }
.seen-no { color: #fcd34d; font-size: .8rem; font-weight: 600; }
.overstaffed { color: #fcd34d; font-weight: 600; }

/* ---------- viewfinder motif (from the logo) ---------- */
.crew-logo { width: 32px; height: 32px; flex: none; }
/* Four corner brackets around an element, like the logo's viewfinder. */
.vf { position: relative; }
.vf::before { content: ''; position: absolute; inset: 7px; pointer-events: none; border-radius: 4px;
  --c: var(--vf-color, rgba(238,241,247,.55)); --l: 18px; --w: 3px;
  background:
    linear-gradient(var(--c),var(--c)) top left / var(--l) var(--w), linear-gradient(var(--c),var(--c)) top left / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) top right / var(--l) var(--w), linear-gradient(var(--c),var(--c)) top right / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom left / var(--l) var(--w), linear-gradient(var(--c),var(--c)) bottom left / var(--w) var(--l),
    linear-gradient(var(--c),var(--c)) bottom right / var(--l) var(--w), linear-gradient(var(--c),var(--c)) bottom right / var(--w) var(--l);
  background-repeat: no-repeat; }
.big-card.is-now.vf { --vf-color: rgba(244,63,94,.85); }
@keyframes vfPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.big-card.is-now.vf::before { animation: vfPulse 2.4s ease-in-out infinite; }
.empty-vf { display: block; margin: 0 auto 10px; width: 56px; height: 56px; opacity: .5; }

/* ---------- notification overlay ---------- */
.sheet-wrap.gate-wrap { background: rgba(5,6,10,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sheet.gate-sheet { max-width: 460px; }
.gate { display: flex; flex-direction: column; align-items: stretch; gap: 12px; text-align: left; padding-top: 6px; }
.gate h2 { margin: 0; font-size: 1.45rem; text-align: center; }
.gate > p.muted { text-align: center; margin: 0; }
.gate-logo { width: 84px; height: 84px; margin: 0 auto 2px; display: block; }
.gate-why { list-style: none; margin: 4px 0; padding: 12px 14px; background: var(--card2); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; }
.gate .btn.huge { width: 100%; }
.gate-later { align-self: center; color: var(--muted); padding: 8px; }
.gate .browser-hint .row { display: flex; gap: 8px; flex-wrap: wrap; }
.steps.dim { opacity: .6; }
.notify-strip { display: block; width: 100%; text-align: left; border: 1px solid var(--warn); background: #2a2007; color: #fcd34d; font: inherit; font-weight: 600; padding: 10px 12px; border-radius: 12px; margin-bottom: 12px; cursor: pointer; }

/* ---------- drop-in visits / come back later ---------- */
.visit-line { color: #fcd34d; font-weight: 600; font-size: .9rem; margin: 4px 0; }
.plan-line { color: #93c5fd; font-size: .9rem; margin: 2px 0 4px; }
.bc-secondary { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bc-secondary .btn { padding-left: 6px; padding-right: 6px; font-size: 15px; }
.st-later { color: #fcd34d; border-color: #78350f; background: #2a1d07; }
.back-card { border-style: dashed; }
.dropin-chip { color: #fcd34d; border-color: #78350f; background: #2a1d07; font-weight: 700; }
.dropin-box { margin-top: 8px; padding: 10px 12px; border: 1px dashed #78350f; border-radius: 12px; background: rgba(245,158,11,.06); }
.dropin-box .row.wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.dropin-box .inline-lbl { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; }
.inline-lbl select { width: auto; }

.seg-opt small { display: block; font-size: 11px; opacity: .7; font-weight: 500; }
.crew-title .tzchip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
@media (max-width: 400px) { .crew-logo { width: 26px; height: 26px; } .crew-clock { font-size: 22px; } }

/* =================================================================
   Mobile & consistency pass
   ================================================================= */
html { overflow-x: hidden; }
body { overflow-wrap: break-word; }
img, svg, video { max-width: 100%; }
.btn { min-height: 40px; line-height: 1.15; }
.btn.small { min-height: 34px; } .btn.tiny { min-height: 26px; }
.btn.big { min-height: 48px; } .btn.huge { min-height: 60px; }
.linkbtn { text-underline-offset: 2px; }

/* --- auth pages: really centred on phones (dvh ignores the browser toolbars) --- */
.auth-page { min-height: 100vh; min-height: 100dvh; padding: calc(16px + var(--safe-t)) 16px calc(16px + var(--safe-b)); }
.auth-card { margin: auto; }
@media (max-width: 480px) {
  .auth-card { padding: 22px 18px; border-radius: 18px; }
  .auth-card .brand img { height: 60px; }
  .auth-card h1 { font-size: 1.45rem; }
}

/* --- top bar (dashboard, team & company, account) --- */
.topbar { flex-wrap: nowrap; padding: calc(10px + var(--safe-t)) 18px 10px; gap: 14px; position: sticky; top: 0; z-index: 30; }
.topbar .brand img { height: 34px; }
.topnav { gap: 4px; flex: 1; min-width: 0; }
.topnav a { padding: 8px 12px; border-radius: 10px; color: var(--muted); white-space: nowrap; }
.topnav a:hover { color: var(--text); background: var(--card2); }
.topnav a.active { color: var(--text); background: var(--card2); box-shadow: inset 0 -2px 0 var(--accent); }
.topnav .short { display: none; }
.usermenu { position: relative; flex: none; }
.usermenu summary { list-style: none; display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 4px 6px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--card2); }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu .avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 800; font-size: 12px; letter-spacing: .02em; }
.usermenu .um-name { font-weight: 700; font-size: 14px; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .caret { color: var(--muted); font-size: 11px; margin-right: 4px; }
.usermenu-list { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 6px; display: flex; flex-direction: column; }
.usermenu-list .um-head { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.usermenu-list a, .usermenu-list button { display: block; width: 100%; text-align: left; padding: 11px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font: 600 15px var(--font); background: none; border: 0; cursor: pointer; }
.usermenu-list a:hover, .usermenu-list button:hover { background: var(--card2); }
.usermenu-list form { margin: 0; }
@media (max-width: 640px) {
  .topbar { padding: calc(8px + var(--safe-t)) 12px 8px; gap: 8px; }
  .topbar .brand img { height: 30px; }
  .topnav .long { display: none; } .topnav .short { display: inline; }
  .topnav a { padding: 8px 10px; font-size: 15px; }
  .usermenu .um-name { display: none; }
  .usermenu summary { padding: 3px; }
  .usermenu .caret { display: none; }
}

/* --- generic pages --- */
@media (max-width: 640px) {
  .page { padding: 16px 12px 60px; }
  .page h1 { font-size: 1.4rem; }
  .page-head { flex-wrap: wrap; }
  .card { padding: 14px; border-radius: 14px; }
  .copyrow { flex-wrap: wrap; } .copyrow input { flex: 1 1 200px; }
}

/* --- tables that turn into stacked rows on phones --- */
.rtable td:first-child .small { word-break: break-word; }
@media (max-width: 700px) {
  .rtable, .rtable tbody, .rtable tr { display: block; width: 100%; }
  .rtable thead { display: none; }
  .rtable tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .rtable tr:last-child { border-bottom: 0; }
  .rtable td { display: block; border: 0; padding: 0; }
  .rtable td:first-child { width: 100%; }
  .rtable td:empty { display: none; }
  .rtable td[data-label]::before { content: attr(data-label) ' '; }
  .rtable select { width: auto; min-width: 130px; padding: 8px 10px; }
  .rtable td.row-actions { width: 100%; text-align: left; white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; }
  .rtable td.row-actions .btn, .rtable td.row-actions form { margin: 0; }
}

/* --- project header on phones: logo · project name · bell · + · avatar; time zone under the name --- */
.ptop-row { flex-wrap: nowrap; }
#btnNew .lbl { margin-left: 2px; }
@media (max-width: 700px) {
  .ptop-row { gap: 8px; padding: 8px 10px 4px; }
  .ptop-row .brand img { height: 30px; }
  .ptitle { flex-direction: column; align-items: flex-start; gap: 2px; }
  .ptitle .pswitch { max-width: 100%; }
  .ptitle h1 { font-size: 1.05rem; }
  .ptitle .tzchip { padding: 1px 8px; font-size: 11px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ptop-actions { gap: 4px; }
  .ptop-actions .sync-dot { display: none; }
  #btnNew { padding: 8px 12px; min-height: 38px; font-size: 18px; }
  #btnNew .lbl { display: none; }
  .ptop-actions .usermenu .um-name, .ptop-actions .usermenu .caret { display: none; }
  .ptop-actions .usermenu summary { padding: 2px; }
  .ptabs { padding: 0 6px; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); scrollbar-width: none; }
  .ptabs::-webkit-scrollbar { display: none; }
  .ptabs a { padding: 10px 11px; }
  .ptabs .ver { display: none; }
}
@media (min-width: 701px) { .ptop-actions .usermenu .um-name { display: none; } }

/* --- overview & lists on phones --- */
@media (max-width: 700px) {
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .stat { min-width: 0; padding: 8px 12px; }
  .srow { gap: 10px; padding: 10px; }
  .srow-time b { font-size: 1rem; } .srow-time span { font-size: 12px; white-space: nowrap; }
  .toolbar input[type=search] { min-width: 0; flex: 1 1 100%; }
  .toolbar select { flex: 1 1 auto; }
  .setup-list { grid-template-columns: 1fr; }
  .ov-grid { gap: 10px; }
  .meal-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
  .meal-row label, .meal-row select { min-width: 0; }
  .meal-row label.check { grid-column: 1 / -1; }
  .meal-row input[type=time] { width: 100%; }
  .inline-edit { flex-wrap: wrap; }
  .inline-edit input { flex: 1 1 140px; min-width: 0; }
  .ccard-head { flex-wrap: wrap; }
  .comp .row { width: 100%; }
}

/* --- sheets: never taller than what's actually visible (iOS/Brave toolbars) --- */
.sheet { max-height: 92vh; max-height: calc(100dvh - var(--safe-t) - 12px); overscroll-behavior: contain; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
@media (max-width: 760px) {
  .sheet { padding: 18px 14px calc(16px + var(--safe-b)); }
  .sheet h2 { font-size: 1.15rem; }
}
/* The editor footer: big Save, the rest compact */
@media (max-width: 700px) {
  .editor-foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
  .foot-right { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
  .foot-left { display: flex; gap: 6px; flex-wrap: wrap; }
  .foot-left .btn { flex: 1 1 auto; padding: 6px 10px; min-height: 34px; font-size: 13px; }
  .title-input { font-size: 1.15rem; padding-right: 34px; }
}

/* --- notification / install overlay: compact so it always fits --- */
.gate .steps { margin: 0; }
@media (max-height: 760px), (max-width: 400px) {
  .gate { gap: 9px; }
  .gate-logo { width: 56px; height: 56px; }
  .gate h2 { font-size: 1.25rem; }
  .gate-why { padding: 9px 12px; gap: 5px; font-size: 14px; }
  .gate .btn.huge { padding: 14px; font-size: 17px; min-height: 52px; }
}
.gate-sticky { position: sticky; bottom: calc(-16px - var(--safe-b)); background: var(--card); padding: 10px 0 calc(6px + var(--safe-b)); margin-top: 2px; display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); }

/* --- crew header: tidy on small phones --- */
@media (max-width: 400px) {
  .crew-top-row { gap: 4px; padding: 6px 12px; }
  .crew-project { font-size: 15px; }
  .iconbtn { padding: 6px; font-size: 20px; }
  .bc-secondary .btn { font-size: 13px; padding: 10px 4px; }
  .bc-time { font-size: 30px; } .bc-title { font-size: 21px; }
}
.install-box { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.browser-hint .btn { min-height: 44px; }
@media (max-width: 700px) {
  .needs-seg { display: grid; grid-template-columns: auto auto; justify-content: start; gap: 8px 6px; align-items: center; }
  .needs-seg .count-pick[hidden] { display: none !important; }
}

/* ---------- profile photos ---------- */
.av { --s: 28px; width: var(--s); height: var(--s); flex: none; border-radius: 50%; overflow: hidden; display: inline-grid; place-items: center; vertical-align: middle; background: var(--card2); box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-ini { background: hsl(var(--h, 340) 45% 32%); color: #fff; font-weight: 800; font-size: calc(var(--s) * .38); letter-spacing: .02em; line-height: 1; }
.who-name, .tm-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.person { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.cand .cand-top { display: flex; align-items: center; gap: 6px; }
.tl-label .tl-who { display: flex; align-items: center; gap: 8px; min-width: 0; } .tl-label .tl-who b { min-width: 0; }
.av-edit { position: relative; display: inline-block; cursor: pointer; border: 0; background: none; padding: 0; }
.av-edit::after { content: ''; position: absolute; right: -2px; bottom: -2px; font-size: 13px; background: var(--card); border-radius: 50%; padding: 2px; box-shadow: 0 0 0 1px var(--line); }
.photo-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.usermenu .avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.usermenu .avatar { overflow: hidden; }
.ts-item .ts-top { display: flex; align-items: center; gap: 6px; }
.photo-nudge { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px dashed var(--line); border-radius: 14px; padding: 10px 12px; margin-bottom: 10px; }
.menu-me { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; padding-right: 30px; }
.team-row summary .tm-name { flex-wrap: nowrap; } .team-row summary .tm-name strong { min-width: 0; }

/* ---------- links: no 90s underlines ---------- */
a { color: var(--accent2); text-decoration: none; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s, text-decoration-color .15s; }
a:hover { color: #fda4af; text-decoration: underline; text-decoration-color: rgba(251,113,133,.45); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
a.btn, a.btn:hover, .project-card, .project-card:hover, .menu-item, .menu-item:hover, .topnav a, .ptabs a, .pswitch-menu a, .usermenu-list a, .back-link, .tel { text-decoration: none; }
a.btn:hover { color: inherit; } a.btn.primary:hover { color: #fff; }
.linkbtn { text-decoration: none; font-weight: 600; color: var(--accent2); border-radius: 6px; }
.linkbtn:hover { color: #fda4af; text-decoration: underline; text-decoration-color: rgba(251,113,133,.45); text-underline-offset: 3px; }
.gate-later, .linkbtn.muted { color: var(--muted); font-weight: 600; } .gate-later:hover { color: var(--text); text-decoration: none; }
/* Links to an item inside a sentence: bold text, a soft marker, not an underline */
.item-link { color: #fda4af; font-weight: 700; }
.item-link:hover { color: #fff; text-decoration: none; }
a[href^="tel:"] { font-weight: 700; white-space: nowrap; }
.notify-strip { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.strip-cta { background: #fcd34d; color: #1a1205; border-radius: 999px; padding: 3px 10px; font-size: 13px; font-weight: 800; white-space: nowrap; }
.auth-card a, .auth-card .linkbtn { font-weight: 600; }

/* ---------- photo cropper ---------- */
.crop-wrap { z-index: 95; align-items: center; }
.crop-sheet { max-width: 420px; border-radius: 20px; text-align: center; }
.crop-hint { margin-top: -4px; }
.crop-stage { width: 100%; display: flex; justify-content: center; margin: 6px 0 10px; }
.crop-stage canvas { touch-action: none; cursor: grab; border-radius: 16px; background: #0b0d12; }
.crop-stage canvas:active { cursor: grabbing; }
.crop-tools { display: flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 800; }
.crop-tools input[type=range] { flex: 1; padding: 0; accent-color: var(--accent); background: none; border: 0; }
.crop-tools .btn { font-size: 18px; }

/* ---------- international phone field ---------- */
.phone-field { display: flex; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); overflow: hidden; }
.phone-field:focus-within { outline: 2px solid var(--accent); border-color: transparent; }
.pf-cc { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; border-right: 1px solid var(--line); font-weight: 700; color: var(--text); white-space: nowrap; background: var(--card2); flex: none; }
.pf-cc select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; font-size: 16px; }
.pf-caret { color: var(--muted); font-size: 11px; }
.phone-field .pf-number { border: 0; border-radius: 0; background: transparent; flex: 1; min-width: 0; font-size: 16px; }
.phone-field .pf-number:focus { outline: 0; }
.reach-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.reach-apps .seg-opt span { padding: 7px 12px; font-weight: 600; }
/* ways to contact someone */
.contact-list { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 4px; }
.contact-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--card2); border: 1px solid var(--line); border-radius: 14px; color: var(--text); text-decoration: none; }
.contact-opt:hover { background: #262c3b; color: var(--text); text-decoration: none; }
.contact-opt .ci { font-size: 22px; width: 28px; text-align: center; }
.contact-opt b { display: block; } .contact-opt small { color: var(--muted); }
.contact-opt.pref { border-color: var(--ok); background: #0b2716; }
.contact-opt.pref small { color: #86efac; }
.contact-opt.costly small { color: #fcd34d; }
.btn.reach { gap: 6px; }
.contact-opt > span:last-child { flex: 1; min-width: 0; } .contact-opt small { display: block; white-space: normal; }
/* Team lists that wrap nicely at any width (person · role · what they do · actions) */
.rtable.flexrows, .rtable.flexrows tbody { display: block; width: 100%; }
.rtable.flexrows tr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rtable.flexrows tr:last-child { border-bottom: 0; }
.rtable.flexrows td { display: block; border: 0; padding: 0; }
.rtable.flexrows td:first-child { flex: 1 1 260px; min-width: 0; }
.rtable.flexrows td:empty { display: none; }
.rtable.flexrows select { width: auto; min-width: 140px; padding: 7px 10px; }
.rtable.flexrows td.small { white-space: nowrap; }
.rtable.flexrows td.row-actions { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px; text-align: left; white-space: normal; padding-left: 52px; }
.rtable.flexrows td.row-actions .btn, .rtable.flexrows td.row-actions form { margin: 0; }
@media (max-width: 700px) { .rtable.flexrows td:first-child { flex-basis: 100%; } .rtable.flexrows td.row-actions { padding-left: 0; } }

/* ---------- people booked on an item (editor) ---------- */
.cov-person { align-items: center; gap: 10px; }
.cov-person .cp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cov-person .cp-top { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cov-person .cp-name { overflow-wrap: normal; word-break: normal; line-height: 1.25; }
.cov-person .chip, .seen-ok, .seen-no { white-space: nowrap; line-height: 1.4; }
.cov-person .cp-remove { flex: none; align-self: center; }
.cov-role { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; align-items: center; margin-top: 6px; }
.cov-role .cov-role-lbl { font-weight: 700; font-size: 13px; color: #cfd5e2; }
.cov-role .seg { margin: 0; }
.cov-role .dropin-box { grid-column: 2; margin-top: 0; padding: 8px 10px; }
@media (max-width: 480px) { .cov-role { grid-template-columns: 1fr; } .cov-role .dropin-box { grid-column: 1; } }

/* =================================================================
   Timeline v2
   ================================================================= */
.tl-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tl-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tl-rolef, .tl-zoom { display: inline-flex; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tl-rolef .btn, .tl-zoom .btn { border: 0; border-radius: 0; background: var(--card); min-width: 40px; }
.tl-rolef .btn + .btn, .tl-zoom .btn + .btn { border-left: 1px solid var(--line); }
.tl-rolef .btn.on, .tl-zoom .btn.on { background: #2b1520; color: #fff; }
.tl-wrap { position: relative; overflow: auto; max-height: calc(100vh - 230px); max-height: calc(100dvh - 230px); min-height: 220px; overscroll-behavior: contain; touch-action: pan-x pan-y; }
.tl-inner { position: relative; }
.tl-head { position: sticky; top: 0; z-index: 6; height: 34px; background: var(--card2); }
.tl-label { width: var(--lw, 190px); padding: 6px 10px; z-index: 5; }
.tl-head .tl-label { z-index: 7; background: var(--card2); justify-content: center; }
.tl-tick { border-left: 0; padding: 0; top: 0; height: 34px; transform: translateX(-50%); display: flex; align-items: center; font-size: 11px; font-variant-numeric: tabular-nums; color: #cfd5e2; font-weight: 700; }
.tl-tick.minor { color: var(--muted); font-weight: 500; font-size: 10px; }
.tl-tick:first-child { transform: none; padding-left: 4px; }
/* vertical grid behind the rows */
.tl-grid { position: absolute; top: 34px; bottom: 0; pointer-events: none; z-index: 0; }
.tl-grid i { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid rgba(255,255,255,.07); }
.tl-grid i.q { border-left: 1px dashed rgba(255,255,255,.035); }
.tl-row { position: relative; }
.tl-track { background: none; z-index: 1; }
.need-row .tl-track { background: rgba(239,68,68,.035); }
.tl-label .tl-who-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.tl-label .tl-who-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; }
.tl-label .tl-who-txt span { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-flags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.tl-flag { font-size: 10px; font-weight: 700; padding: 0 5px; border-radius: 5px; line-height: 16px; }
.tl-flag.bad { background: #3b0d0d; color: #fca5a5; } .tl-flag.warn { background: #2a1d07; color: #fcd34d; }
.tl-addbreak { font-size: 11px !important; margin-top: 2px; align-self: flex-start; }
/* bars */
.tl-block { height: 40px; padding: 3px 7px; border-radius: 8px; display: flex; align-items: center; overflow: hidden; box-shadow: 0 1px 0 rgba(0,0,0,.25); transition: filter .12s; }
.tl-block:hover { filter: brightness(1.18); z-index: 3; }
.tl-block .tl-txt { position: relative; z-index: 2; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tl-block.tl-icon { padding: 0; justify-content: center; } .tl-block.tl-icon .tl-txt b { font-size: 13px; text-align: center; }
.tl-block.tl-title .tl-txt b { font-size: 12px; }
/* quick visits: faint frame = the whole item, solid = when they actually go */
.tl-block.ghost { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--c) 10%, transparent) 0 6px, transparent 6px 12px); border: 1.5px dashed color-mix(in srgb, var(--c) 75%, transparent); border-left: 4px solid var(--c); box-shadow: none; }
.tl-block.ghost .tl-txt b { color: #e2e8f0; text-shadow: 0 1px 2px rgba(0,0,0,.8); }
.tl-visit { position: absolute; top: 3px; bottom: 3px; border-radius: 5px; background: var(--c); opacity: .9; z-index: 1; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.tl-block.ghost.need { border-color: #f97316; }
.tl-block.st-later .tl-visit { background: repeating-linear-gradient(135deg, var(--c) 0 5px, color-mix(in srgb, var(--c) 60%, #000) 5px 10px); }
.tl-block.clash { outline: 2px solid var(--bad); outline-offset: 1px; animation: clashPulse 1.6s infinite; }
@keyframes clashPulse { 50% { outline-color: rgba(239,68,68,.35); } }
.tl-block.brk.soft { opacity: .62; border-style: dashed; }
.tl-block.st-captured .tl-txt b { text-decoration: none; }
/* now line with time label */
.tl-now { z-index: 4; top: 0; }
.tl-now span { position: sticky; top: 0; display: inline-block; transform: translateX(-50%); background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; border-radius: 5px; padding: 1px 5px; margin-top: 8px; }
/* hover card */
.tl-tip { position: fixed; z-index: 120; max-width: 300px; background: #0f121a; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; line-height: 1.4; box-shadow: var(--shadow); pointer-events: none; }
.tl-tip b { display: block; font-size: 13.5px; margin-bottom: 2px; } .tl-tip div { color: #cbd5e1; }
/* legend */
.tl-legend { gap: 8px 14px; }
.tl-legend .lg { display: inline-flex; align-items: center; gap: 6px; color: #cfd5e2; }
.tl-legend .lg i { display: inline-block; width: 26px; height: 14px; border-radius: 4px; position: relative; }
.lg-solid { background: color-mix(in srgb, #6366f1 35%, #151925); border: 1px solid #6366f1; border-left: 3px solid #6366f1; }
.lg-ghost { border: 1.5px dashed #6366f1; border-left: 3px solid #6366f1; } .lg-ghost b { position: absolute; left: 8px; top: 2px; bottom: 2px; width: 7px; background: #6366f1; border-radius: 2px; }
.lg-need { background: #2a140a; border: 1px dashed #f97316; } .lg-conflict { background: #3b0d0d; border: 1px solid var(--bad); }
.lg-brk { background: repeating-linear-gradient(135deg, #1f2533 0 4px, #2e3647 4px 8px); border: 1px solid #3a4459; }
.lg-soft { background: repeating-linear-gradient(135deg, #1f2533 0 4px, #2e3647 4px 8px); border: 1px dashed #3a4459; opacity: .65; }
.lg-clash { border: 2px solid var(--bad); }
@media (max-width: 700px) {
  .tl-toolbar { flex-direction: column; align-items: stretch; }
  .tl-controls { justify-content: space-between; }
  .tl-wrap { max-height: calc(100dvh - 260px); }
  .tl-label { padding: 5px 7px; }
  .tl-label .tl-who .av { --s: 32px !important; width: 32px; height: 32px; }
  .tl-legend .muted.small { display: none; }
}
.tl-block.ghost { align-items: flex-start; padding-top: 4px; }
.tl-block.ghost .tl-visit { top: auto; bottom: 4px; height: 12px; border-radius: 4px; }
.tl-block.ghost.tl-icon { align-items: center; padding-top: 0; }
.tl-block.ghost.tl-icon .tl-visit { height: 8px; }
/* Devices that get notifications (My account) */
.dev-list { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dev-list li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.dev-ico { font-size: 22px; }
.dev-main { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.dev-main .muted { flex-basis: 100%; }
.detail-time .small { font-size: .85rem; font-weight: 500; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ---------- Import from spreadsheet ---------- */
.sheet.wide.imp-sheet { max-width: 1100px; }
.imp-drop { border: 2px dashed var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; text-align: center; }
.imp-drop.over { border-color: var(--accent); background: rgba(244,63,94,.06); }
.imp-drop textarea { font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; min-height: 120px; }
.imp-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .85rem; }
.imp-or::before, .imp-or::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.imp-help { margin-top: 12px; } .imp-help summary { cursor: pointer; color: var(--muted); }
.imp-step { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 8px; }
.imp-n { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .85rem; }
.imp-cols { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; }
.imp-col { flex: 0 0 180px; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: var(--bg2); scroll-snap-align: start; opacity: .65; }
.imp-col.on { opacity: 1; border-color: rgba(244,63,94,.6); }
.imp-col select { padding: 6px 8px; font-size: 13px; margin-bottom: 6px; }
.imp-hd { font-weight: 700; font-size: .85rem; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-v { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-top: 1px solid var(--line); padding: 3px 0; }
.imp-defaults { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 6px 0; }
.imp-defaults label { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.imp-defaults select { width: auto; padding: 6px 8px; }
.imp-maps { display: flex; flex-direction: column; gap: 6px; }
.imp-maprow { display: grid; grid-template-columns: minmax(0, 280px) auto minmax(0, 360px) auto; justify-content: start; gap: 10px; align-items: center; }
.imp-maprow select { padding: 6px 8px; font-size: 14px; }
.imp-arrow { color: var(--muted); }
.new-chip { background: rgba(34,197,94,.15); color: #86efac; border: 1px solid rgba(34,197,94,.35); font-size: .7rem; padding: 1px 6px; border-radius: 99px; }
.imp-preview { overflow: auto; max-height: 46vh; border: 1px solid var(--line); border-radius: 12px; }
.imp-preview table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.imp-preview th { position: sticky; top: 0; background: var(--card2); text-align: left; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: 8px; }
.imp-preview td { padding: 7px 8px; border-top: 1px solid var(--line); vertical-align: top; }
.imp-preview tr.bad td { background: rgba(239,68,68,.07); }
.imp-preview tr.dupe td { opacity: .5; }
.imp-preview .nowrap { white-space: nowrap; }
.bad-t { color: #fca5a5; }
.imp-actions { position: sticky; bottom: -18px; background: var(--card); padding: 12px 0 4px; margin-top: 10px; }
.imp-done { text-align: center; } .imp-big { font-size: 48px; }
.imp-done .note { text-align: left; }
.imp-sheetpick { display: flex; gap: 8px; align-items: center; } .imp-sheetpick select { width: auto; }
@media (max-width: 760px) {
  .imp-maprow { grid-template-columns: 1fr; gap: 4px; } .imp-arrow { display: none; }
  .imp-col { flex-basis: 150px; }
}

/* ---------- Shot list checklist ---------- */
.checklist { margin: 10px 0; border: 1px solid var(--line); border-radius: 14px; padding: 10px; background: rgba(255,255,255,.02); }
.checklist.all-done { border-color: rgba(34,197,94,.45); }
.cl-head { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cl-count { font-size: .95rem; color: var(--text); letter-spacing: 0; }
.all-done .cl-count { color: #86efac; }
.cl-bar { height: 4px; border-radius: 4px; background: var(--line); margin: 6px 0 4px; overflow: hidden; }
.cl-bar span { display: block; height: 100%; background: #22c55e; transition: width .25s; }
.cl-item { display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 10px 4px; font: inherit; font-size: 1.02rem; border-top: 1px solid var(--line); cursor: pointer; min-height: 48px; }
.cl-item:first-of-type { border-top: 0; }
.cl-item:disabled { cursor: default; }
.cl-box { flex: none; width: 26px; height: 26px; border-radius: 8px; border: 2px solid #64748b; display: grid; place-items: center; font-weight: 900; color: #fff; margin-top: -1px; }
.cl-item.done .cl-box { background: #22c55e; border-color: #22c55e; }
.cl-item:not(.cl-multi) { cursor: default; align-items: center; }
/* The tick target: the box plus a little air (≈40 px finger target), nothing more. */
.cl-hit { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin: -7px -4px -7px -7px; padding: 0; background: none; border: 0; border-radius: 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cl-hit:disabled { cursor: default; }
.cl-hit:not(:disabled):hover .cl-box { border-color: #94a3b8; }
.cl-hit:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }
.cl-hit:not(:disabled):active .cl-box { transform: scale(.9); }
.cl-box { transition: transform .08s, background-color .15s, border-color .15s; }
.cl-item.done .cl-t { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(148,163,184,.5); }
.cl-text small { display: block; text-decoration: none; font-size: .75rem; color: var(--muted); }
.check-chip { font-size: .72rem; } .check-chip.some { color: #fcd34d; } .check-chip.all { color: #86efac; }

/* ---------- Share pages: status wall (TV) + department deliveries ---------- */
.share-page #share-root > .loading { min-height: 100vh; }
.share-gone { min-height: 100vh; display: grid; place-content: center; text-align: center; padding: 24px; }
body.share-wall { overflow: hidden; background: #07080c; }
body.hide-cursor, body.hide-cursor * { cursor: none !important; }
.wall { --u: clamp(14px, 1.05vw, 26px); height: 100vh; height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; gap: 1.2vh; padding: 2vh 2vw; font-size: var(--u); }
/* Avatar sizes use --u (not em): an initials avatar sets its own font-size, so em would make it balloon. */
.w-top { display: flex; align-items: center; gap: 1.4vw; }
.w-logo { height: 3.4em; }
.w-title { flex: 1; min-width: 0; } .w-title h1 { margin: 0; font-size: 2em; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-date { color: var(--muted); font-size: 1.05em; }
.w-clock { font-size: 3.6em; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.w-fs { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 10px; font-size: 1.2em; padding: .2em .5em; cursor: pointer; }
.w-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: 1.6vw; min-height: 0; }
.w-crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 23em), 1fr)); grid-auto-rows: min-content; gap: 1.1em; overflow: hidden; align-content: start; }
.w-card { display: flex; gap: 1em; align-items: center; background: var(--card); border: 2px solid var(--line); border-radius: 1.2em; padding: 1em; position: relative; }
.w-card .w-av { --s: calc(var(--u) * 7.5); box-shadow: 0 0 0 calc(var(--u) * .25) var(--ring, #334155); }
.w-body { min-width: 0; flex: 1; }
.w-name { font-size: 1.45em; font-weight: 800; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-cap { font-size: .7em; opacity: .8; }
.w-head { font-size: 1.2em; font-weight: 700; margin-top: .25em; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.w-sub { color: var(--muted); margin-top: .15em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-next { margin-top: .5em; font-size: .9em; color: #cbd5e1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.w-next span { text-transform: uppercase; font-size: .75em; letter-spacing: .08em; color: var(--muted); margin-right: .3em; }
.w-next em { font-style: normal; color: var(--muted); }
.w-bar { height: .35em; background: rgba(255,255,255,.08); border-radius: 1em; margin-top: .5em; overflow: hidden; } .w-bar span { display: block; height: 100%; background: var(--accent); }
.w-busy { border-color: rgba(244,63,94,.75); --ring: #f43f5e; background: linear-gradient(135deg, rgba(244,63,94,.14), var(--card) 55%); }
.w-way { border-color: rgba(59,130,246,.7); --ring: #3b82f6; }
.w-break { border-color: rgba(20,184,166,.6); --ring: #14b8a6; }
.w-later { border-color: rgba(245,158,11,.6); --ring: #f59e0b; }
.w-free { --ring: #22c55e; } .w-free .w-head { color: #86efac; }
.w-done { opacity: .55; --ring: #475569; }
.wall.mid .w-card .w-av { --s: calc(var(--u) * 5.6); } .wall.mid .w-name { font-size: 1.25em; } .wall.mid .w-crew { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20em), 1fr)); }
.wall.dense .w-card { padding: .6em .8em; gap: .7em; } .wall.dense .w-card .w-av { --s: calc(var(--u) * 4); } .wall.dense .w-name { font-size: 1.05em; } .wall.dense .w-head { font-size: 1em; -webkit-line-clamp: 1; } .wall.dense .w-next { display: none; }
.wall.dense .w-crew { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17em), 1fr)); gap: .6em; }
.w-up { background: var(--card); border: 1px solid var(--line); border-radius: 1.2em; padding: 1em 1.1em; overflow: hidden; }
.w-up h2 { margin: 0 0 .5em; font-size: .9em; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.w-up ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5em; }
.w-up li { display: grid; grid-template-columns: 3.6em minmax(0, 1fr); gap: .1em .7em; padding: .55em .6em; border-radius: .8em; border-left: .3em solid var(--c); background: rgba(255,255,255,.025); }
.w-up li.live { background: rgba(244,63,94,.1); }
.u-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 1.05em; }
.u-live { background: var(--accent); color: #fff; font-size: .7em; padding: .15em .4em; border-radius: .4em; letter-spacing: .06em; }
.u-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-must { background: #ef4444; color: #fff; font-size: .6em; padding: .1em .4em; border-radius: .3em; vertical-align: middle; }
.u-sub { color: var(--muted); font-size: .85em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-who { grid-column: 2; display: flex; flex-wrap: wrap; gap: .3em; align-items: center; margin-top: .2em; }
.u-who .av { --s: calc(var(--u) * 2.2) !important; } .u-p.ok .av { box-shadow: 0 0 0 calc(var(--u) * .15) #22c55e; }
.u-miss { color: #fca5a5; font-weight: 700; font-size: .85em; border: 1px dashed rgba(239,68,68,.6); border-radius: .5em; padding: .1em .4em; }
.w-feed { display: flex; gap: 1.2em; align-items: center; white-space: nowrap; overflow: hidden; color: var(--muted); font-size: .95em; border-top: 1px solid var(--line); padding-top: .8vh; }
.w-feed b { color: #86efac; } .w-feed span { color: var(--text); } .w-feed em { color: var(--muted); font-style: normal; }
.w-empty { color: var(--muted); }
.w-empty-next { margin-top: .8em; color: var(--text); line-height: 1.4; } .w-empty-next b { font-size: 1.1em; }
.w-up li.w-empty { display: block; border-left-color: transparent; background: none; padding: .3em 0; }
.wall { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px), (orientation: portrait) {
  body.share-wall { overflow: auto; }
  .wall { --u: 15px; height: auto; min-height: 100vh; padding: 14px; }
  .w-grid { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .w-up { align-self: start; }
  .w-crew { overflow: visible; grid-template-columns: minmax(0, 1fr) !important; }
  .w-card .w-av, .wall.mid .w-card .w-av, .wall.dense .w-card .w-av { --s: calc(var(--u) * 4.6); }
  .w-clock { font-size: 2.2em; } .w-title h1 { font-size: 1.4em; } .w-logo { height: 2.6em; } .w-fs { display: none; }
  .w-feed { flex-wrap: wrap; white-space: normal; }
}
.share-dl { max-width: 980px; margin: 0 auto; padding: 24px 16px 60px; }
.sd-top { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; } .sd-top h1 { margin: 0; } .sd-top .w-logo { height: 52px; }

/* Deliveries list (planner tab + share page) */
.dl-toolbar { justify-content: space-between; }
.dl-toolbar select { width: auto; }
.dl-share { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dl-group { margin-top: 18px; } .dl-group h3 { margin: 0 0 8px; font-size: 1rem; }
.dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: 14px; padding: 10px 12px; }
.dl-row[data-open] { cursor: pointer; } .dl-row[data-open]:hover { border-color: rgba(255,255,255,.18); border-left-color: var(--c); }
.dl-late .dl-row { background: linear-gradient(90deg, rgba(239,68,68,.12), var(--card) 60%); }
.dl-soon .dl-row { background: linear-gradient(90deg, rgba(245,158,11,.10), var(--card) 60%); }
.dl-main { flex: 1; min-width: 0; } .dl-title { font-weight: 700; }
.dl-due { margin-top: 2px; }
.dl-act { flex: none; }
.dl-noone { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed #64748b; display: grid; place-items: center; color: #94a3b8; font-weight: 800; }
@media (max-width: 640px) { .dl-row { flex-wrap: wrap; } .dl-act { width: 100%; } .dl-act .btn { width: 100%; } }

/* ---------- Floor plans ---------- */
.map-row { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.map-row img { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; background: #fff; }
.map-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sheet.map-sheet { max-width: 1200px; }
.map-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding-right: 36px; }
.map-head h2 { margin: 0; flex: 1; min-width: 0; }
.map-head select, .map-rename { width: auto; padding: 6px 8px; }
.map-rename { max-width: 220px; }
.map-zoom { display: flex; gap: 4px; }
.map-scroll { overflow: auto; max-height: 72vh; max-height: calc(100dvh - 160px); border-radius: 12px; background: #fff; border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
.map-scroll.placing .map-canvas { cursor: crosshair; }
.map-canvas { position: relative; min-width: 100%; }
.map-canvas img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: auto; touch-action: none; cursor: grab; z-index: 1; }
.pin i { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #f43f5e; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.45); order: 2; margin-bottom: 2px; }
.pin b { order: 1; background: rgba(15,17,23,.88); color: #fff; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 6px; white-space: nowrap; margin-bottom: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.pin.hl { z-index: 3; } .pin.hl i { width: 26px; height: 26px; background: #f43f5e; animation: pinPulse 1.4s ease-in-out infinite; }
.pin.hl b { font-size: 14px; background: #f43f5e; }
@keyframes pinPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.6); } 50% { box-shadow: 0 0 0 12px rgba(244,63,94,0); } }
.map-place { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 12px; }
.map-locs { display: flex; flex-direction: column; gap: 4px; max-height: calc(100dvh - 160px); overflow: auto; }
.map-loc { text-align: left; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .9rem; cursor: pointer; display: flex; gap: 8px; }
.map-loc.sel { border-color: var(--accent); background: rgba(244,63,94,.12); }
.map-loc.on { border-color: rgba(34,197,94,.4); } .map-loc.other { opacity: .7; }
@media (max-width: 760px) {
  .map-place { grid-template-columns: 1fr; }
  .map-locs { flex-direction: row; overflow-x: auto; max-height: none; } .map-locs p { display: none; }
  .map-loc { flex: none; }
  .map-scroll { max-height: 60vh; }
}
.viewas { display: flex; flex-direction: column; gap: 6px; font-size: .9rem; color: var(--muted); }
.preview-bar { position: fixed; left: 0; right: 0; top: 0; z-index: 80; height: 38px; box-sizing: border-box; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #7c3aed; color: #fff; text-align: center; padding: 8px 12px calc(8px); font-size: .9rem; }
.preview-bar a { color: #fff; font-weight: 800; margin-left: 10px; text-decoration: underline; }
body.is-preview { padding-top: 38px; }
body.is-preview .crew-top { top: 38px; }
@media (max-width: 760px) {
  .map-head h2 { font-size: 1.1rem; flex-basis: 100%; }
}
.imp-valblock { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; }
.imp-valhead { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 2px; }
.imp-maprow.unsure .imp-from { color: #fcd34d; }
.warn-chip { background: rgba(245,158,11,.15); color: #fcd34d; border: 1px solid rgba(245,158,11,.4); font-size: .7rem; padding: 1px 7px; border-radius: 99px; }
.imp-maps { gap: 10px; }
/* 12-hour clock: "10:30 AM" needs a little more room */
.h12 .srow { grid-template-columns: 86px minmax(0, 1fr) auto; }
.h12 .srow-time b { white-space: nowrap; font-size: .98rem; }
.h12 .srow-time span { white-space: nowrap; }
@media (max-width: 700px) { .h12 .srow { grid-template-columns: 76px 1fr; } .h12 .srow-time b { font-size: .9rem; } }
.h12 .bc-time { font-size: clamp(1.6rem, 8vw, 2.6rem); }
.tl-now span { white-space: nowrap; }
.h12 .crew-clock { font-size: 21px; white-space: nowrap; }
@media (max-width: 400px) { .h12 .crew-clock { font-size: 18px; } }
@media (max-width: 700px) { .need-row .tl-label span { font-size: 11px; line-height: 1.25; } }
.menu-item.strong { font-weight: 700; }
.noemail { color: #fcd34d; font-size: .8rem; }
.linkbtn.noemail { padding: 0; }
.addmany { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.addmany summary { cursor: pointer; font-weight: 700; }

/* ---------- More editing time ---------- */
.ext-card { display: flex; flex-direction: column; gap: 10px; }
.ext-head { display: flex; gap: 12px; align-items: flex-start; }
.quote-in { font-style: italic; color: var(--text); }
.ext-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ext-opts .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 2px; padding: 10px 12px; white-space: normal; height: auto; }
.ext-opts .btn .small { font-weight: 400; opacity: .8; font-size: .78rem; }
.ccard.flash { animation: flashCard 1.6s ease 2; }
@keyframes flashCard { 50% { box-shadow: 0 0 0 4px rgba(244,63,94,.55); } }
.ext-line { font-size: .85rem; margin-top: 6px; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.04); }
.ext-line.pending { background: rgba(245,158,11,.12); color: #fcd34d; }
.ext-line.later, .ext-line.extended, .ext-line.released { background: rgba(34,197,94,.12); color: #86efac; }
.ext-line.declined { background: rgba(148,163,184,.12); }
.deliver-card.late { border-color: rgba(239,68,68,.6); background: linear-gradient(90deg, rgba(239,68,68,.12), var(--card) 60%); }
.deliver-card.soon { border-color: rgba(245,158,11,.6); }
.busy-opt span { font-weight: 700; }
.any-card.deliver-card { flex-direction: column; align-items: stretch; gap: 10px; }
.deliver-card .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.deliver-card .row .btn { width: 100%; }
.btn .btn-sub { display: block; font-size: .72rem; font-weight: 500; opacity: .7; margin-top: 2px; }
#btnBreak { flex-direction: column; line-height: 1.15; }
/* Photo / Video / Both — no silent default */
.needs-pick .seg-opt { flex: 1 1 0; justify-content: center; }
.needs-pick.need-choice .seg-opt span { border-color: rgba(245,158,11,.7); border-style: dashed; }
.needs-hint { margin: 4px 0 6px; } .needs-hint b { color: #fcd34d; }
.count-row { display: flex; gap: 14px; flex-wrap: wrap; }
.count-row .count-pick[hidden] { display: none !important; }
.needs-pick { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.needs-pick .seg-opt span { display: flex; width: 100%; justify-content: center; padding-top: 11px; padding-bottom: 11px; }

/* Shot list per role */
.cl-role { display: inline-block; margin-left: 6px; font-size: .7rem; font-weight: 700; color: #93c5fd; background: rgba(59,130,246,.12); border-radius: 6px; padding: 1px 6px; vertical-align: middle; }
.cl-item.cl-multi { cursor: default; align-items: center; justify-content: space-between; }
.cl-ticks { display: flex; gap: 6px; flex: none; }
.cl-tick { display: inline-flex; align-items: center; gap: 4px; background: var(--bg2); border: 1px solid var(--line); color: var(--text); border-radius: 10px; padding: 5px 8px; font: inherit; font-size: .85rem; cursor: pointer; min-height: 34px; }
.cl-tick b { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; border: 2px solid #64748b; font-size: .75rem; }
.cl-tick.done { border-color: rgba(34,197,94,.5); } .cl-tick.done b { background: #22c55e; border-color: #22c55e; color: #fff; }
.cl-tick small { font-size: .7rem; color: var(--muted); }
.cl-tick:disabled { cursor: default; opacity: .85; }
.sl-box:empty { display: none; }
.sl-box { border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; margin: -4px 0 10px; }
.sl-head { display: flex; justify-content: space-between; gap: 8px; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; padding: 4px 0; }
.sl-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line); }
.sl-row.done .sl-text { color: var(--muted); text-decoration: line-through; }
.sl-text { flex: 1; min-width: 0; }
.sl-roles { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; flex: none; }
.sl-r { background: none; border: 0; color: var(--muted); font: inherit; font-size: .75rem; font-weight: 700; padding: 4px 8px; cursor: pointer; }
.sl-r + .sl-r { border-left: 1px solid var(--line); }
.sl-r.on { background: var(--accent); color: #fff; }
@media (max-width: 640px) { .sl-row { flex-wrap: wrap; } .cl-item.cl-multi { flex-wrap: wrap; } }

/* sound setting (My account) */
.sound-row { margin: 10px 0 14px; }
.sound-row label { margin-bottom: 6px; }
.sound-test { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- item editor: two clear cards for the essentials, folded sections for the rest ---------- */
.ed-col { gap: 12px; }
.ed-card { display: flex; flex-direction: column; gap: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.ed-h { margin: 0; font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .01em; }
.ed-card .needs-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-card .needs-seg .seg-opt span { display: block; text-align: center; padding: 11px 8px; }
.needs-hint:empty, .tz-note:empty { display: none; }
.ed-card .needs-hint { margin-top: -6px; }
.ed-card .count-row { margin-top: -2px; }
.ed-card .count-pick { flex-direction: row !important; align-items: center; gap: 8px !important; }
.ed-card .count-pick input { width: 64px; }
.ed-who { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; padding-top: 12px; border-top: 1px solid var(--line); }
.ed-prio { display: flex; flex-direction: column; gap: 8px; }
.ed-prio .seg-label { margin: 0; }
@media (max-width: 560px) { .ed-who { grid-template-columns: 1fr; } }
.ed-card .quick-dur { margin-top: -4px; gap: 6px; }
.ed-card .tz-note { margin: -4px 0 0; }
#fixedFields { display: flex; flex-direction: column; gap: 10px; }
#fixedFields[hidden], #dayField[hidden], #eventField[hidden], .ed-more[hidden] { display: none !important; }
.ed-card #dayField p, .ed-card #eventField { margin: 4px 0 0; }
.ed-more { background: var(--bg2); border: 1px solid var(--line); border-radius: 14px; }
.ed-more > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; }
.ed-more > summary::-webkit-details-marker { display: none; }
.ed-more > summary:hover { background: rgba(255,255,255,.03); }
.ed-more-t { font-weight: 800; font-size: 14px; white-space: nowrap; }
.ed-sum { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: right; }
.ed-chev { color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s; }
.ed-more[open] .ed-chev { transform: rotate(90deg); }
.ed-more[open] .ed-sum { visibility: hidden; }
.ed-more-body { display: flex; flex-direction: column; gap: 10px; padding: 2px 14px 14px; }
.ed-more-body .cov-role:first-child { margin-top: 0; }
.field-hint { font-weight: 400; }
@media (max-width: 480px) { .ed-more > summary { grid-template-columns: minmax(0, 1fr) auto; } .ed-sum { grid-column: 1; grid-row: 2; text-align: left; } .ed-chev { grid-row: 1 / span 2; grid-column: 2; } }
.foot-more { position: relative; }
.foot-more > summary { list-style: none; } .foot-more > summary::-webkit-details-marker { display: none; }
.foot-menu { position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 5; min-width: 270px; display: flex; flex-direction: column; background: var(--card2, #1f2433); border: 1px solid var(--line); border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.foot-menu button { background: none; border: 0; color: var(--text); text-align: left; font: 600 14px var(--font); padding: 10px 12px; border-radius: 8px; cursor: pointer; }
.foot-menu button:hover { background: rgba(255,255,255,.06); } .foot-menu button.danger { color: #fca5a5; }
.ed-card .count-row { flex-wrap: nowrap; gap: 10px; } .ed-card .count-pick { min-width: 0; }
@media (max-width: 380px) { .ed-card .count-row { flex-wrap: wrap; } }
/* setup checklist: progress + only what's left */
.setup-top { display: flex; align-items: baseline; gap: 12px; } .setup-top h2 { margin: 0; } .setup-top .btn { margin-left: auto; }
.setup-bar { height: 6px; border-radius: 6px; background: rgba(255,255,255,.07); margin: 10px 0 12px; overflow: hidden; } .setup-bar span { display: block; height: 100%; background: var(--accent); }
.setup-next { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 701px) { .srow { grid-template-columns: 96px minmax(0, 1fr) auto; } .h12 .srow { grid-template-columns: 104px minmax(0, 1fr) auto; } .srow-time span { white-space: nowrap; font-size: 12px; } }
/* settings: summarized folding sections + sticky save */
.set-sec { background: transparent; }
.set-sec .ed-more-body fieldset:first-child { margin-top: 0; }
.set-plain { display: flex; flex-direction: column; gap: 10px; }
.set-plain > p.muted { margin: 0; }
.set-save { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 0 calc(6px + var(--safe-b, 0px)); background: linear-gradient(to top, var(--card) 70%, transparent); }
#setDirty.dirty { color: #fbbf24; font-weight: 700; }
.toolbar .tb-import { margin-left: auto; }
.row-more .foot-menu { bottom: auto; top: calc(100% + 6px); left: 0; right: auto; max-width: calc(100vw - 40px); }
.foot-menu a { color: var(--text); text-decoration: none; font: 600 14px var(--font); padding: 10px 12px; border-radius: 8px; } .foot-menu a:hover { background: rgba(255,255,255,.06); }
.tl-addbreak { position: absolute; right: 6px; bottom: 4px; margin: 0 !important; padding: 2px 6px !important; border-radius: 6px; background: var(--card2, #1f2433); border: 1px solid var(--line) !important; text-decoration: none !important; opacity: 0; transition: opacity .12s; }
.tl-row:hover .tl-addbreak, .tl-addbreak:focus-visible { opacity: 1; }
@media (hover: none) { .tl-addbreak { opacity: .85; } }
.ok-banner { background: rgba(34,197,94,.1); border: 1px solid rgba(34,197,94,.35); color: #bbf7d0; border-radius: 12px; padding: 12px 14px; margin: 6px 0 14px; } .ok-banner b { color: #fff; }
.conflict-intro { max-width: 760px; margin: 0 0 10px; }
.idle.slim { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; padding: 14px 16px; border-style: solid; }
.idle.slim .idle-big { font-size: 1.1rem; margin: 0; }
.more-acts { margin-top: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.more-acts > summary { list-style: none; cursor: pointer; padding: 13px 14px; font-weight: 700; } .more-acts > summary::-webkit-details-marker { display: none; }
.more-acts > summary::after { content: '›'; float: right; color: var(--muted); font-size: 20px; line-height: 1; transition: transform .15s; } .more-acts[open] > summary::after { transform: rotate(90deg); }
.more-acts > summary .muted { font-weight: 400; font-size: 13px; }
.more-acts .action-grid { padding: 0 10px 10px; }

/* notifications reach people? */
.push-pill { display: flex; width: max-content; align-items: center; gap: 4px; margin-top: 4px; font: 600 12px var(--font); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--muted); cursor: pointer; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.push-pill.lvl-ok { color: #86efac; border-color: rgba(34,197,94,.35); }
.push-pill.lvl-unknown { color: #cbd5e1; }
.push-pill.lvl-warn { color: #fbbf24; border-color: rgba(245,158,11,.45); }
.push-pill.lvl-bad { color: #fca5a5; border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.push-sum { margin: -4px 0 8px; color: var(--muted); } .push-sum .ok { color: #86efac; } .push-sum .unk { color: #cbd5e1; } .push-sum .bad { color: #fca5a5; }
.push-state { border-radius: 12px; padding: 12px 14px; border: 1px solid var(--line); background: var(--bg2); margin: 8px 0 12px; } .push-state p { margin: 6px 0 0; color: #cbd5e1; }
.push-state.lvl-ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.08); }
.push-state.lvl-warn { border-color: rgba(245,158,11,.5); background: rgba(245,158,11,.08); }
.push-state.lvl-bad { border-color: rgba(239,68,68,.5); background: rgba(239,68,68,.08); }
.push-h { margin: 12px 0 6px; }
.push-devs { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.push-devs li { display: flex; justify-content: space-between; gap: 10px; background: var(--bg2); border-radius: 10px; padding: 8px 10px; }
.push-mini { text-decoration: none !important; font-size: 15px; }
.dev-scope { margin-top: 6px; width: 100%; max-width: 360px; font-size: 13px; padding: 6px 8px; }
.dev-scope.saved { border-color: #22c55e; }
.dev-scope-l { display: block; margin-top: 6px; } .dev-scope-l + .dev-scope { margin-top: 2px; }
.state-box { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin: 10px 0; background: var(--card); } .state-box.ok { border-color: rgba(34,197,94,.4); background: rgba(34,197,94,.07); } .state-box.warn { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.07); } .state-box .row { margin-top: 10px; gap: 8px; }

/* ---------- sheets on phones: never wider than the screen, close button always reachable, no zoom-on-type ---------- */
.sheet { overflow-wrap: anywhere; }
.sheet img, .sheet video, .sheet table { max-width: 100%; }
.sheet-x { position: sticky; top: 0; float: right; margin: 0 -6px 10px 12px; /* flow position = painted position, so text wraps around it instead of under it */ width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; line-height: 1;
  background: var(--card); box-shadow: 0 2px 10px rgba(0,0,0,.35); z-index: 5; }
.sheet-x:hover { color: #fff; }
@media (pointer: coarse), (max-width: 700px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; } /* iOS zooms in on anything smaller */
}
.draft-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.4); border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.close-ask { position: sticky; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: 6px; margin: 12px -6px -6px; padding: 14px; border-radius: 14px; background: #2a1618; border: 1px solid rgba(239,68,68,.5); box-shadow: 0 -10px 30px rgba(0,0,0,.5); animation: ec-pop .18s ease-out; }
.close-ask .row { gap: 8px; margin-top: 4px; }
/* status wall: no full-screen button once full screen; page dots when there are more people than fit */
html:fullscreen .w-fs, html:-webkit-full-screen .w-fs { display: none; }
.w-crew { position: relative; }
.w-card[hidden] { display: none !important; }
.w-pages { position: absolute; right: .4em; bottom: .2em; display: flex; align-items: center; gap: .35em; color: var(--muted); font-size: .8em; z-index: 2; }
.w-pages:empty { display: none; }
.w-pages i { width: .55em; height: .55em; border-radius: 50%; background: rgba(255,255,255,.18); } .w-pages i.on { background: var(--accent); }
.w-pages span { margin-right: .3em; font-variant-numeric: tabular-nums; }
.wall.xdense .w-crew { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14em), 1fr)); gap: .5em; }
.wall.xdense .w-card { padding: .5em .6em; } .wall.xdense .w-card .w-av { --s: calc(var(--u) * 3.2); } .wall.xdense .w-name { font-size: .95em; } .wall.xdense .w-sub { font-size: .8em; }
@media (max-width: 900px) { .w-pages { display: none; } }
@media (min-width: 901px) { .w-grid { grid-template-rows: minmax(0, 1fr); } .w-crew { min-height: 0; } }
.pmain.full { max-width: none; }
/* schedule: done is unmistakable — all roles captured = green row; some = the done half is ticked */
.srow.done-all { background: linear-gradient(90deg, rgba(34,197,94,.16), rgba(34,197,94,.05)); border-color: rgba(34,197,94,.45); }
.srow.done-all .srow-title { color: #dcfce7; }
.srow.done-part { background: linear-gradient(90deg, rgba(34,197,94,.08), transparent 60%); }
.done-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: 2px;
  background: #16a34a; color: #fff; }
.done-tag.todo { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.srow.done-all.past, .srow.done-part.past { opacity: .85; }
/* schedule: done is unmistakable — all roles captured = green row; some = ticked per role */
.srow.done-all { background: linear-gradient(90deg, rgba(34,197,94,.17), rgba(34,197,94,.05)); border-color: rgba(34,197,94,.45); }
.srow.done-all .srow-title { color: #dcfce7; }
.srow.done-part { background: linear-gradient(90deg, rgba(34,197,94,.09), transparent 60%); }
.done-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; vertical-align: 2px; background: #16a34a; color: #fff; }
.done-tag.todo { background: transparent; color: var(--muted); border: 1px solid var(--line); font-weight: 600; }
.srow.done-all.past, .srow.done-part.past { opacity: .85; }
/* timeline: any-time items as a real list, not a footnote */
.any-box { border: 1px solid var(--line); background: var(--card); border-radius: 14px; padding: 12px 14px; margin: 10px 0 12px; }
.any-box.needs { border-color: rgba(245,158,11,.55); box-shadow: inset 4px 0 0 #f59e0b; }
.any-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.any-warn { color: #fbbf24; font-weight: 800; font-size: 13px; }
.any-items { display: flex; flex-wrap: wrap; gap: 8px; }
.any-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 9px 11px; color: var(--text); font: inherit; cursor: pointer; max-width: 340px; transition: transform .12s, border-color .12s; }
.any-item:hover { transform: translateY(-1px); border-color: #475569; }
.any-item.open { border-color: rgba(245,158,11,.6); }
.any-item.done-all { border-color: rgba(34,197,94,.55); background: rgba(34,197,94,.08); }
.any-cov { display: flex; flex-wrap: wrap; gap: 4px; }
.menu-sec { margin: 10px 4px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); } .menu-item.current { border-color: var(--accent); }
.st-on_site { color: #a7f3d0; border-color: #065f46; background: #062a20; }
.pc-hint { display: block; width: 100%; margin: 8px 0 4px; text-align: left; background: none; border: 1px dashed var(--line); border-radius: 12px; padding: 11px 12px; color: var(--muted); font: inherit; cursor: pointer; }
.pc-hint b { color: var(--text); }
.pc-code { font: 800 clamp(22px, 7vw, 34px)/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .02em; text-align: center; padding: 18px 10px; margin: 10px 0; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); user-select: all; overflow-wrap: anywhere; }
.ok-text { color: #86efac; }
.known-card { border-color: rgba(59,130,246,.35); }
.kn-tools { display: flex; justify-content: space-between; align-items: center; margin: 8px 0; }
.kn-list { list-style: none; margin: 0 0 12px; padding: 0; max-height: 50vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; }
.kn-list label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.kn-list label:hover { background: rgba(255,255,255,.04); }
.kn-list label > span { display: flex; flex-direction: column; min-width: 0; }
.kn-list li[hidden] { display: none; }

/* ---------- motion: the app feels alive — but only when something actually happens ---------- */
@keyframes ec-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ec-pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes ec-in { 0% { box-shadow: 0 0 0 0 rgba(59,130,246,0); background-color: rgba(59,130,246,.22); } 100% { background-color: transparent; } }
@keyframes ec-chg { 0% { box-shadow: inset 0 0 0 2px rgba(250,204,21,.7); } 100% { box-shadow: inset 0 0 0 2px rgba(250,204,21,0); } }
@keyframes ec-bump { 0% { transform: scale(1); } 35% { transform: scale(1.18); color: #fff; } 100% { transform: scale(1); } }
@keyframes ec-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(244,63,94,.0); } 50% { box-shadow: 0 0 0 6px rgba(244,63,94,.18); } }
@keyframes ec-sheen { from { background-position: -200% 0; } to { background-position: 200% 0; } }
.tab-enter > * { animation: ec-rise .35s cubic-bezier(.2,.7,.2,1) both; }
.tab-enter > *:nth-child(2) { animation-delay: .04s; } .tab-enter > *:nth-child(3) { animation-delay: .08s; } .tab-enter > *:nth-child(4) { animation-delay: .12s; } .tab-enter > *:nth-child(n+5) { animation-delay: .16s; }
.just-in { animation: ec-in 1.6s ease-out; }
.just-changed { animation: ec-chg 1.8s ease-out; }
.stat b { display: block; transform-origin: left center; } .stat b.bump { animation: ec-bump .6s ease-out; }
/* One entrance only (there used to be a transition AND an animation fighting over the same transform → a visible hitch).
   Phones: slides up from the bottom edge. Wider screens: a short fade + lift in the centre. */
@keyframes sheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes sheetPop { from { transform: translateY(10px) scale(.985); opacity: 0; } to { transform: none; opacity: 1; } }
.sheet-wrap.open .sheet { animation: sheetUp .22s cubic-bezier(.2,.8,.2,1) both; }
@media (min-width: 760px) { .sheet-wrap.open .sheet { animation-name: sheetPop; animation-duration: .18s; } }
@media (prefers-reduced-motion: reduce) { .sheet-wrap.open .sheet { animation: none; } }
.sheet-wrap.swap, .sheet-wrap.swap .sheet { animation: none !important; transition: none !important; }
/* Locking the page behind a sheet must not make it jump sideways when the scrollbar disappears. */
html { scrollbar-gutter: stable; }
.srow, .ccard, .any-item, .w-card, .stat, .card.click, .dl-row { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .2s; }
.srow:hover, .ccard:hover, .dl-row:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(0,0,0,.28); }
.btn { transition: transform .08s ease, background-color .15s, border-color .15s, filter .15s; } .btn:active:not(:disabled) { transform: scale(.97); }
.srow.live { animation: ec-breathe 2.4s ease-in-out infinite; }
.progress span, .w-bar span, .setup-bar span { background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%); background-size: 200% 100%; animation: ec-sheen 2.6s linear infinite; transition: width .6s ease; }
.w-card { transition: border-color .4s, background-color .4s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }
/* "pre-picked for you" note under Photo / Video / Both: visible enough that it never feels like a mistake */
.ed-card .needs-hint:not(:empty) { color: #fde68a; background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.35); border-radius: 10px; padding: 6px 10px; margin-top: -4px; }
.ed-card .needs-hint:not(:empty)::before { content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 5px; vertical-align: -0.15em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8' /%3E %3Cpath d='M3 3v5h5' /%3E %3C/svg%3E") center / contain no-repeat; }

/* ---------- company people (outside events) ---------- */
.org-people { list-style: none; margin: 8px 0 0; padding: 0; }
.org-people li { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 0; border-top: 1px solid var(--line); }
.org-people li:first-child { border-top: 0; }
.op-main { flex: 1 1 280px; min-width: 0; display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; border-radius: 10px; padding: 4px 6px; margin: -4px -6px; }
.op-main:hover { background: rgba(255,255,255,.04); }
.op-txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.op-txt > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-edit { margin-left: auto; color: var(--accent); font-weight: 700; font-size: 13px; white-space: nowrap; }
.op-ctl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-ctl form { margin: 0; } .op-ctl select { width: auto; padding: 6px 10px; }
@media (max-width: 700px) { .op-ctl { padding-left: 56px; } .op-edit { display: none; } }
.crumbs { margin: 0 0 12px; } .crumbs a { color: var(--muted); text-decoration: none; font-weight: 600; } .crumbs a:hover { color: var(--text); }
.person-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.person-head h1 { margin: 0 0 2px; font-size: 1.5rem; } .person-head .ph-body { flex: 1; min-width: 200px; } .person-head .actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.person-events { list-style: none; margin: 0 0 10px; padding: 0; }
.person-events li { display: flex; flex-direction: column; padding: 8px 0; border-top: 1px solid var(--line); } .person-events li:first-child { border-top: 0; }
.person-events a { color: var(--text); text-decoration: none; } .person-events a:hover b { text-decoration: underline; }

.c-summary { padding: 12px 14px; border-radius: 12px; margin: 6px 0 14px; border: 1px solid var(--line); background: var(--card); line-height: 1.6; }
.c-summary.bad { border-color: rgba(239,68,68,.5); } .c-summary.warn { border-color: rgba(251,191,36,.45); }
.c-summary .cs-bad { color: #fca5a5; font-weight: 700; } .c-summary .cs-warn { color: #fcd34d; font-weight: 600; }

.w-push { display: inline-block; margin: .15em 0 .2em; padding: .1em .55em; border-radius: 999px; font-size: .78em; font-weight: 700; white-space: nowrap; }
.w-push.bad { background: rgba(239,68,68,.18); color: #fca5a5; } .w-push.warn { background: rgba(251,191,36,.16); color: #fcd34d; }
.w-card.w-nopush-bad { box-shadow: inset 0 0 0 2px rgba(239,68,68,.55); }
.w-pushbar { display: inline-block; margin-top: .35em; padding: .25em .7em; border-radius: 8px; background: rgba(239,68,68,.16); color: #fecaca; font-weight: 700; font-size: .85em; }

.any-more { display: block; width: 100%; margin: 4px 0 0; padding: 12px 14px; border-radius: 12px; border: 1px dashed var(--line); background: transparent; color: var(--text); font: 600 14px var(--font); text-align: left; cursor: pointer; }
.any-more:hover { background: rgba(255,255,255,.04); }
.rest-n.p3 { color: #fca5a5; } .rest-n.p2 { color: #fcd34d; } .rest-n.p1 { color: var(--muted); }

.any-jump { display: inline-block; margin: 0 0 10px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 13px; }
.any-jump b { color: #fcd34d; } .any-jump:hover { border-color: var(--accent); }
.tl-wrap + .any-box, .any-box#anyBox { margin-top: 14px; } .any-all { margin-top: 8px; }
.date-hint { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: #93c5fd; letter-spacing: .01em; }
.date-hint.warn { color: #fcd34d; }
label.req::before { content: 'Required'; float: right; font-size: 11px; font-weight: 700; color: #fcd34d; letter-spacing: .03em; text-transform: uppercase; }
label.req-miss input, label.req-miss select, label.req-miss textarea, label.req-miss .phone-field { border-color: #f87171 !important; box-shadow: 0 0 0 2px rgba(248,113,113,.25); }
.req-grid { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.lock-chip { margin-left: 8px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(251,191,36,.14); color: #fcd34d; white-space: nowrap; }
.lock-chip.ro { background: rgba(239,68,68,.16); color: #fca5a5; }
@media (max-width: 700px) { .lock-chip { display: none; } }
/* ---------- auto assign ---------- */
.aa-sum { padding: 12px 14px; border-radius: 12px; margin: 16px 0 8px; border: 1px solid var(--line); }
.aa-sum.ok { border-color: rgba(34,197,94,.5); } .aa-sum.warn { border-color: rgba(251,191,36,.5); }
.aa-pers { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 6px 0 10px; }
.aa-per { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 2px; border-radius: 999px; background: var(--card2); font-size: 13px; }
.aa-day { margin: 16px 0 6px; font-size: 15px; }
.aa-list { list-style: none; margin: 0; padding: 0; }
.aa-list li { border-top: 1px solid var(--line); }
.aa-list li > label, .aa-list.left li { display: grid; grid-template-columns: auto 92px 1fr minmax(180px, 1.1fr); gap: 4px 10px; align-items: center; padding: 8px 2px; cursor: pointer; }
.aa-list.left li { grid-template-columns: 110px 1fr 1.2fr; cursor: default; }
.aa-when { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13px; }
.aa-who { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .aa-who .muted { flex-basis: 100%; padding-left: 52px; margin-top: -2px; }
.sheet-actions.sticky { position: sticky; bottom: 0; background: linear-gradient(to top, var(--card) 75%, transparent); padding-top: 14px; }
@media (max-width: 700px) { .aa-list li > label { grid-template-columns: auto 1fr; } .aa-when { grid-column: 2; } .aa-what, .aa-who { grid-column: 2; } .aa-who .muted { padding-left: 0; } .aa-list.left li { grid-template-columns: 1fr; } }
/* ---------- table view ---------- */
.g-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.g-bar input[type=search] { width: 220px; padding: 7px 10px; } .g-bar select { width: auto; padding: 7px 10px; } .g-spacer { flex: 1; }
.g-help { margin: 4px 0 10px; }
.g-wrap { overflow: auto; max-height: calc(100vh - 250px); border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.g-table { border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 13px; min-width: 100%; }
.g-table th { position: sticky; top: 0; z-index: 2; background: var(--card2, #1b2030); text-align: left; font-weight: 700; font-size: 12px; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.g-table td { border-bottom: 1px solid var(--line); border-right: 1px solid rgba(255,255,255,.05); padding: 0; height: 34px; vertical-align: middle; background: var(--card); }
.g-table td > input, .g-table td > select, .g-table td > textarea { width: 100%; height: 100%; min-height: 33px; border: 0; border-radius: 0; background: transparent; color: var(--text); padding: 6px 7px; font: 13px/1.4 var(--font); font-variant-numeric: tabular-nums; box-shadow: none; margin: 0; }
.g-table td > textarea { resize: none; overflow: hidden; white-space: nowrap; display: block; line-height: 1.5; }
.g-table td > textarea:focus { position: relative; z-index: 3; white-space: pre-wrap; overflow: auto; height: auto; min-height: 120px; background: var(--card2, #1b2030); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.g-table td > select { appearance: none; -webkit-appearance: none; padding-right: 4px; cursor: pointer; }
.g-table td:focus-within { outline: 2px solid var(--accent); outline-offset: -2px; z-index: 1; }
.g-table td.gsel { background: rgba(244,63,94,.16); }
.g-table td.g-ro { padding: 6px 7px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
.g-table td.g-crew { color: var(--text); }
.g-table td.g-photo input, .g-table td.g-video input { text-align: center; }
.g-table td.g-title input { font-weight: 600; }
.g-table .g-chk, .g-table th:first-child { text-align: center; position: sticky; left: 0; z-index: 1; }
.g-table thead th:first-child { z-index: 3; }
.g-table .g-open { text-align: center; } .g-table .g-open a { text-decoration: none; color: var(--muted); }
.g-table tr.dirty td { background: rgba(251,191,36,.07); } .g-table tr.dirty td.g-chk { box-shadow: inset 3px 0 0 #fbbf24; }
.g-table tr.new td.g-chk { box-shadow: inset 3px 0 0 #22c55e; }
.g-table tr.err td { background: rgba(239,68,68,.10); }
.g-table tr.g-errrow td { height: auto; padding: 4px 8px 6px; color: #fca5a5; font-size: 12.5px; font-weight: 600; background: rgba(239,68,68,.06); }
.g-table input:disabled, .g-table select:disabled, .g-table textarea:disabled { opacity: .55; cursor: not-allowed; }
.g-need { color: #fcd34d; font-weight: 700; }
.g-save { position: sticky; bottom: 10px; margin-top: 10px; display: none; gap: 10px; align-items: center; justify-content: flex-end; padding: 10px 14px; border-radius: 12px; background: var(--card2, #1b2030); border: 1px solid rgba(251,191,36,.5); box-shadow: 0 8px 30px rgba(0,0,0,.4); }
.g-save.show { display: flex; } .g-save span { margin-right: auto; }

.g-table .g-chk input, .g-table th input[type=checkbox] { width: 16px; height: 16px; min-height: 0; padding: 0; margin: 0; accent-color: var(--accent); }
.aa-list li > label { grid-template-columns: auto 128px 1fr minmax(180px, 1.1fr); }
.g-table td > input, .g-table td > select, .g-table td > textarea { font-size: 13px !important; letter-spacing: 0; }
/* ---------- crew: full schedule ---------- */
.fs-days { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.chip-btn { flex: none; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 600 14px var(--font); cursor: pointer; transition: background .15s, border-color .15s, transform .12s; }
.chip-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; } .chip-btn:active { transform: scale(.96); }
.fs-filter { display: flex; gap: 6px; margin: 2px 0 12px; } .fs-filter .btn.on { background: rgba(244,63,94,.18); border-color: var(--accent); }
.fs-gaps { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; padding: 10px 12px; margin-bottom: 12px; border-radius: 12px; background: rgba(34,197,94,.08); border: 1px solid rgba(34,197,94,.3); font-size: 14px; }
.fs-gap { padding: 3px 9px; border-radius: 999px; background: rgba(34,197,94,.14); font-variant-numeric: tabular-nums; } .fs-gap em { font-style: normal; color: var(--muted); } .fs-gap b { color: #86efac; }
.fs-list { display: flex; flex-direction: column; gap: 8px; }
.fs-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--dept); transition: transform .15s, border-color .2s; }
.fs-row.mine { border-color: var(--accent); background: linear-gradient(90deg, rgba(244,63,94,.12), var(--card) 60%); cursor: pointer; }
.fs-row.fits { border-color: rgba(34,197,94,.55); } .fs-row.past { opacity: .5; }
.fs-time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; } .fs-time span { display: block; font-weight: 500; color: var(--muted); font-size: 12.5px; }
.fs-title { font-weight: 700; } .fs-sub { color: var(--muted); font-size: 13px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.fs-cov { padding: 1px 7px; border-radius: 999px; background: var(--card2); color: var(--text); font-size: 12px; } .fs-cov.short { background: rgba(251,191,36,.16); color: #fcd34d; }
.fs-state { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 600; }
.fs-me { color: var(--accent2); } .fs-free { color: #86efac; } .fs-busy { color: var(--muted); }
.set-gap { margin-top: 12px; }
/* For department ↔ Priority: same label line, same control height */
.ed-who { align-items: start; }
.ed-who .ed-dept, .ed-who .ed-prio { display: flex; flex-direction: column; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; color: #cfd5e2; }
.ed-who .ed-prio .seg-label { margin: 0; line-height: inherit; }
.ed-who .ed-dept select { height: 46px; font-size: 15px; color: var(--text); font-weight: 400; }
.ed-who .ed-prio .seg-opt span { height: 46px; display: inline-flex; align-items: center; padding: 0 16px; }
/* ---------- overview: today strip, crew load, departments, whole event ---------- */
.stats.stats6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat { position: relative; overflow: hidden; }
.stat-bar { display: block; height: 4px; margin-top: 8px; border-radius: 4px; background: rgba(255,255,255,.07); overflow: hidden; }
.stat-bar em, .load-bar em, .db-bar em { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.stat-bar.ok em, .db-bar.ok em { background: linear-gradient(90deg, #16a34a, #22c55e); }
.stat.ok .stat-bar em { background: linear-gradient(90deg, #16a34a, #22c55e); }
.tstrip { margin-bottom: 16px; } .tstrip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } .tstrip-head h2 { margin: 0; }
.tstrip-legend { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.tstrip-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tstrip-track { position: relative; height: calc(var(--lanes) * 14px + 8px); margin-top: 12px; border-radius: 8px; background: repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 40px), var(--bg2); }
.ts-m { position: absolute; top: calc(4px + var(--lane) * 14px); height: 10px; min-width: 6px; border: 0; padding: 0; border-radius: 4px; cursor: pointer; transition: transform .15s, filter .15s; }
.ts-m:hover { transform: scaleY(1.5); filter: brightness(1.2); z-index: 2; }
.ts-m.done, .tstrip-legend i.done { background: #22c55e; } .ts-m.live, .tstrip-legend i.live { background: var(--accent); }
.ts-m.live { animation: ec-breathe 2s ease-in-out infinite; }
.ts-m.miss, .tstrip-legend i.miss { background: #f59e0b; } .ts-m.todo, .tstrip-legend i.todo { background: #64748b; } .ts-m.past { background: #475569; opacity: .6; }
.ts-m.p3 { box-shadow: 0 0 0 1.5px #fca5a5; }
.tstrip-now { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #fff; border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,.6); }
.tstrip-now span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: #fff; white-space: nowrap; }
.tstrip-ticks { position: relative; height: 16px; margin-top: 4px; } .tstrip-ticks span { position: absolute; transform: translateX(-50%); font-size: 11px; color: var(--muted); white-space: nowrap; }
.load-list { display: flex; flex-direction: column; gap: 8px; }
.load-row { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; }
.load-who { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; } .load-who span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.load-bar { position: relative; height: 10px; border-radius: 6px; background: rgba(255,255,255,.06); }
.load-bar em { background: linear-gradient(90deg, #3b82f6, #60a5fa); border-radius: 6px; }
.load-row.over .load-bar em { background: linear-gradient(90deg, #ef4444, #f87171); }
.load-bar i { position: absolute; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,.35); }
.load-n { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.load-row.lr-idle .load-who, .load-row.lr-idle .load-n { opacity: .6; }
.dept-board { display: flex; flex-direction: column; gap: 12px; }
.db-row { display: grid; grid-template-columns: minmax(120px, 1fr) 1.4fr; gap: 4px 12px; align-items: center; }
.db-name { display: flex; align-items: center; gap: 8px; } .db-name i { width: 10px; height: 10px; border-radius: 50%; background: var(--dept); flex: none; }
.db-bars { display: flex; flex-direction: column; gap: 4px; } .db-bar { height: 6px; border-radius: 4px; background: rgba(255,255,255,.06); overflow: hidden; }
.db-txt { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); padding-left: 18px; }
.glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.glance-day { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px; border-radius: 14px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); cursor: pointer; font: inherit; transition: transform .15s, border-color .15s, box-shadow .15s; }
.glance-day:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.glance-day.today { border-color: var(--accent); background: linear-gradient(180deg, rgba(244,63,94,.12), var(--bg2)); } .glance-day.past { opacity: .6; }
.gd-top { font-weight: 700; } .gd-top em { font-style: normal; color: var(--muted); font-weight: 600; font-size: 12px; }
@property --p { syntax: '<number>'; inherits: false; initial-value: 0; }
.gd-ring { --c: #22c55e; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--bg2) 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.08) 0); }
.gd-ring b { font-size: 14px; }
.gd-n { font-size: 12.5px; color: var(--muted); text-align: center; }
.gd-flags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .gd-flags i { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(251,191,36,.15); color: #fcd34d; }
.gd-flags i.bad { background: rgba(239,68,68,.16); color: #fca5a5; } .gd-flags i.ok { background: rgba(34,197,94,.15); color: #86efac; }
@media (max-width: 700px) { .load-row { grid-template-columns: 90px 1fr; } .load-n { grid-column: 2; } }

/* ---------- more life: entrances, growing bars, rings, pulses ---------- */
@keyframes ec-grow { from { width: 0; } }
@keyframes ec-ring-fill { from { --p: 0; } }
@keyframes ec-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes ec-glow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.tab-enter .stat-bar em, .tab-enter .load-bar em, .tab-enter .db-bar em, .tab-enter .setup-bar span { animation: ec-grow .9s cubic-bezier(.2,.7,.2,1) both; }
.tab-enter .gd-ring { animation: ec-ring-fill 1s cubic-bezier(.2,.7,.2,1) both; }
.tab-enter .ts-m { animation: ec-pop .4s ease-out both; }
/* (rows inside the sections ride along with their section — no second, nested entrance) */
.ring { animation: ec-shake .7s ease-in-out; transform-origin: 50% 10%; }
.card { transition: border-color .2s, box-shadow .2s; } .card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.18); }
.who, .any-card, .fs-row, .load-row, .attn li { transition: transform .15s ease, background-color .2s, border-color .2s; }
.who:hover, .attn li:hover { transform: translateX(2px); }
.any-card:active, .fs-row:active, .sc:active, .glance-day:active { transform: scale(.985); }
.now-dot.busy, .live-dot { animation: ec-glow 1.6s ease-in-out infinite; }
.now-line { animation: ec-glow 2.4s ease-in-out infinite; }
#ptabs a, .crew-nav button { transition: color .2s, background-color .2s; }
/* tab underline grows in from the middle */
.ptabs a { position: relative; border-bottom-color: transparent !important; transition: color .2s, background-color .2s; }
.ptabs a::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -0px; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent); transform: scaleX(0); opacity: 0; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.ptabs a.active::after { transform: scaleX(1); opacity: 1; } .ptabs a:hover { color: var(--text); }
.crew-nav button.active span { display: inline-block; animation: ec-pop .3s ease-out; }
.chip, .prio { transition: background-color .2s, color .2s; }
.fs-sent { color: #86efac; font-weight: 700; }
.fs-row { grid-template-columns: auto 1fr; } .fs-time { min-width: 52px; white-space: nowrap; font-size: 14px; } .fs-time span { font-size: 12px; }
.fs-head { margin: 4px 0 12px; } .fs-head h2 { display: inline; margin: 0 8px 0 0; font-size: 20px; }
.fs-rel { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--card2); font-weight: 700; font-size: 13px; color: var(--muted); }
.fs-rel.now { background: var(--accent); color: #fff; }
.fs-gaps-note { flex-basis: 100%; margin: -4px 0 2px; }
/* ---------- i5 date & time picker ---------- */
.dp-native { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; clip: rect(0 0 0 0); }
.dp-btn { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: 500 15px var(--font); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s, background-color .15s; }
.dp-btn:hover:not(:disabled) { border-color: #3a4357; }
.dp-btn:focus-visible, .dp-btn[aria-expanded="true"] { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244,63,94,.18); }
.dp-btn:disabled { opacity: .55; cursor: not-allowed; }
.dp-btn .dp-ic { font-size: 15px; opacity: .85; }
.dp-btn .dp-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.dp-btn .dp-v { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.dp-btn.empty .dp-v { color: var(--muted); }
.dp-btn .dp-tag { color: #93c5fd; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dp-btn .dp-tag.warn { color: #fcd34d; }
.dp-btn .dp-caret { color: var(--muted); font-size: 11px; transition: transform .2s; } .dp-btn[aria-expanded="true"] .dp-caret { transform: rotate(180deg); }
.dp-time.dp-btn, .dp-btn.dp-time { min-width: 0; }
label > .dp-btn { margin-top: 0; }
.dp-pop { position: fixed; z-index: 120; width: 300px; padding: 12px; border-radius: 16px; background: var(--card); border: 1px solid #323b50; box-shadow: 0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03); color: var(--text); font-family: var(--font); animation: dp-in .16s cubic-bezier(.2,.7,.2,1); transform-origin: top left; }
.dp-pop.dp-wide { width: 452px; } .dp-pop.dp-wide .dp-body { display: grid; grid-template-columns: 1fr 140px; column-gap: 14px; }
.dp-pop.dp-wide .dp-time { grid-column: 2; grid-row: 1 / span 5; margin: 0; padding: 0 0 0 14px; border-top: 0; border-left: 1px solid var(--line); }
.dp-pop.dp-wide .dp-foot { grid-column: 1 / -1; }
.dp-pop.dp-out { animation: dp-out .14s ease-in forwards; }
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes dp-out { to { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dp-grab { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .dp-head b { font-size: 15px; }
.dp-nav { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font-size: 18px; line-height: 1; cursor: pointer; transition: background-color .15s, transform .1s; }
.dp-nav:hover { background: var(--card2); } .dp-nav:active { transform: scale(.94); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 0; }
.dp-dow span { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; letter-spacing: .03em; }
.dp-d { position: relative; height: 38px; border: 0; background: transparent; color: var(--text); font: 600 14px var(--font); cursor: pointer; border-radius: 10px; font-variant-numeric: tabular-nums; transition: background-color .12s, color .12s, transform .1s; }
.dp-d:hover:not(:disabled) { background: rgba(255,255,255,.07); }
.dp-d:active:not(:disabled) { transform: scale(.92); }
.dp-d:disabled { color: #4b5468; cursor: not-allowed; }
.dp-d.ev { background: rgba(244,63,94,.10); border-radius: 0; }
.dp-d.ev-s { border-radius: 10px 0 0 10px; } .dp-d.ev-e { border-radius: 0 10px 10px 0; } .dp-d.ev-s.ev-e { border-radius: 10px; }
.dp-d i { position: absolute; left: 0; right: 0; bottom: 2px; font: 700 8.5px var(--font); font-style: normal; color: #fb7185; letter-spacing: .02em; }
.dp-d.today { box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); }
.dp-d.sel, .dp-d.sel:hover { background: var(--accent); color: #fff; border-radius: 10px; box-shadow: 0 4px 14px rgba(244,63,94,.45); }
.dp-d.sel i { color: #fff; }
.dp-d:focus-visible { outline: 2px solid #93c5fd; outline-offset: -2px; }
.dp-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.dp-chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text); font: 600 12.5px var(--font); cursor: pointer; transition: border-color .15s; } .dp-chip:hover { border-color: var(--accent); }
.dp-time { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-time-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .dp-time-top span { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.dp-type { width: 92px !important; min-height: 0 !important; padding: 6px 8px !important; border-radius: 8px !important; text-align: center; font: 700 15px var(--font) !important; font-variant-numeric: tabular-nums; background: var(--bg2) !important; }
.dp-type.bad { border-color: #f87171 !important; }
.dp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.dp-col { position: relative; height: 228px; overflow-y: auto; padding-top: 30px; padding-bottom: 30px; scroll-behavior: smooth; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; scrollbar-width: thin; scrollbar-color: #333c50 transparent; mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.dp-pop:not(.dp-wide) .dp-col { height: 168px; }
.dp-col button { flex: none; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: 600 14px var(--font); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color .12s; }
.dp-col button:hover { background: rgba(255,255,255,.07); }
.dp-col button.sel { background: var(--accent); color: #fff; }
.dp-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.dp-clear { border: 0; background: none; color: var(--muted); font: 600 13px var(--font); cursor: pointer; padding: 8px 4px; } .dp-clear:hover { color: var(--text); }
.dp-done { padding: 9px 18px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: 700 14px var(--font); cursor: pointer; transition: filter .15s, transform .1s; } .dp-done:hover { filter: brightness(1.08); } .dp-done:active { transform: scale(.97); }
/* phones: a bottom sheet */
.dp-pop.dp-sheet { left: 0 !important; right: 0; bottom: 0; top: auto !important; width: auto !important; border-radius: 20px 20px 0 0; padding: 8px 16px calc(14px + var(--safe-b, 0px)); animation: dp-up .22s cubic-bezier(.2,.7,.2,1); box-shadow: 0 -20px 60px rgba(0,0,0,.6); }
.dp-pop.dp-sheet.dp-out { animation: dp-down .16s ease-in forwards; }
.dp-pop.dp-sheet .dp-grab { display: block; width: 40px; height: 4px; border-radius: 4px; background: #3a4357; margin: 0 auto 10px; }
.dp-pop.dp-sheet .dp-body { display: block; } .dp-pop.dp-sheet .dp-time { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 10px; }
.dp-pop.dp-sheet .dp-d { height: 44px; font-size: 16px; } .dp-pop.dp-sheet .dp-col { height: 170px; } .dp-pop.dp-sheet .dp-done { padding: 12px 26px; font-size: 16px; }
@keyframes dp-up { from { transform: translateY(100%); } } @keyframes dp-down { to { transform: translateY(100%); } }
.dp-pop.dp-timeonly { width: 250px; } .dp-pop.dp-timeonly .dp-time { margin-top: 0; padding-top: 0; border-top: 0; }
/* Round things stay round: fixed square box, never squeezed by flex */
.av-edit::after { width: 24px; height: 24px; padding: 0; display: grid; place-items: center; line-height: 1; font-size: 13px; box-sizing: border-box; right: -3px; bottom: -3px; }
.dchip::before, .sync-dot, .live-dot, .sc-meta .dept-dot, .now-dot, .usermenu .avatar, .av, .imp-n, .dl-noone, .w-pages i, .db-name i, .gd-ring, .sheet-x { flex: none; aspect-ratio: 1; }
/* ---------- messaging apps ---------- */
.app-ic { display: inline-block; width: var(--s, 20px); height: var(--s, 20px); flex: none; border-radius: 28%; vertical-align: -0.28em; object-fit: contain; }
.app-tile { display: inline-grid; place-items: center; background: var(--c); color: #fff; font: 800 calc(var(--s, 20px) * .44) / 1 var(--font); letter-spacing: -.02em; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.apps-field { display: flex; flex-direction: column; gap: 10px; }
.reach-apps { display: flex; flex-wrap: wrap; gap: 6px; }
.app-opt > span { display: inline-flex !important; align-items: center; gap: 7px; }
.app-handles { display: flex; flex-direction: column; gap: 10px; } .app-handles:not(:has(.app-handle:not([hidden]))) { display: none; }
.app-handle { padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); flex-direction: column; }
.app-handle .muted { font-weight: 500; }
.contact-opt .ci { display: inline-grid; place-items: center; width: 34px; height: 34px; font-size: 22px; } .contact-opt .ci .app-ic { --s: 30px !important; width: 30px; height: 30px; }
.contact-opt .ci .app-tile { font-size: 13px; }
button.contact-opt { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.reach .app-ic { margin-right: 2px; }
.app-handle[hidden] { display: none !important; }
.seg-opt span.app-tile, .seg-opt .app-ic { padding: 0; border: 0; border-radius: 28%; width: var(--s); height: var(--s); display: inline-grid; place-items: center; background: var(--c); font-weight: 800; line-height: 1; }
.seg-opt img.app-ic { background: none; }
.app-handle .ah-t { display: inline-flex; align-items: center; gap: 8px; }
.reach-minis { display: inline-flex; align-items: center; margin-left: 6px; } .reach-minis .app-ic { margin-left: -4px; box-shadow: 0 0 0 2px var(--card2, #1e2330); } .reach-minis .app-ic:first-child { margin-left: 0; }
.reach-more { margin-left: 4px; font-size: 11px; font-weight: 700; color: var(--muted); }

.reach-minis { gap: 4px; } .reach-minis .app-ic { margin-left: 0 !important; box-shadow: none; }
.reach-minis img.app-ic, .contact-opt img.app-ic, .seg-opt img.app-ic, .app-handle img.app-ic { border-radius: 0; background: none; object-fit: contain; }
/* ---------- timeline: items without a fixed time ---------- */
.any-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }
.any-tools .seg { display: flex; gap: 4px; flex-wrap: wrap; } .any-tools .btn.on { background: rgba(244,63,94,.16); border-color: var(--accent); }
.any-tools input[type=search] { width: 240px; max-width: 100%; padding: 7px 10px; margin-left: auto; }
.any-sub { margin: 14px 0 8px; font-size: 14px; } .any-sub:first-of-type { margin-top: 4px; }
.any-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.any-card2 { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px 15px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); cursor: pointer; overflow: hidden; transition: transform .15s ease, border-color .15s, box-shadow .15s; }
.any-card2::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--dept); }
.any-card2:hover, .any-card2:focus-visible { transform: translateY(-2px); border-color: #4b5568; box-shadow: 0 10px 26px rgba(0,0,0,.3); outline: none; }
.any-card2:active { transform: scale(.985); }
.any-card2.open { border-color: rgba(245,158,11,.55); background: linear-gradient(180deg, rgba(245,158,11,.06), var(--bg2) 60%); }
.any-card2.done-all { border-color: rgba(34,197,94,.45); background: linear-gradient(180deg, rgba(34,197,94,.07), var(--bg2) 60%); }
.any-card2.prio-3 { box-shadow: inset 0 0 0 1px rgba(239,68,68,.35); }
.ac-top { display: flex; align-items: flex-start; gap: 8px; } .ac-title { flex: 1; min-width: 0; font-size: 15px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 12.5px; color: var(--muted); } .ac-when { white-space: nowrap; }
.ac-info { display: flex; flex-direction: column; gap: 3px; } .ac-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ac-foot { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: auto; padding-top: 2px; } .ac-foot .any-cov { flex: 1; }
.ac-edit { font-size: 12px; font-weight: 700; color: var(--accent2); opacity: 0; transition: opacity .15s; } .any-card2:hover .ac-edit, .any-card2:focus-visible .ac-edit { opacity: 1; }
@media (hover: none) { .ac-edit { opacity: .8; } }
.any-all { margin-top: 12px; width: 100%; }
.count-row[hidden] { display: none !important; }
.count-note { margin: 2px 0 0; } .count-note .linkbtn { font-size: inherit; }
.review-banner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; background: rgba(59,130,246,.12); border: 1px solid rgba(59,130,246,.45); color: #bfdbfe; }
.chip.review { background: rgba(59,130,246,.18); color: #93c5fd; font-weight: 700; }

/* ---------- Lucide icons (replace emoji in the UI) ---------- */
.ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.17em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.ic + .ic { margin-left: .12em; }
.ic-ok { color: #22c55e; } .ic-warn { color: #f59e0b; } .ic-bad { color: #ef4444; }
/* On a coloured button the icon takes the button's text colour (a green tick on a green button is invisible). */
.btn.ok .ic, .btn.primary .ic, .btn.danger .ic, .btn.warn .ic { color: inherit; }
.ic-star { color: #fbbf24; fill: currentColor; }
.ic-dot-red, .ic-dot-amber, .ic-dot-green, .ic-dot-grey { width: .8em; height: .8em; vertical-align: -0.04em; fill: currentColor; stroke-width: 0; }
.ic-dot-red { color: #ef4444; } .ic-dot-amber { color: #f59e0b; } .ic-dot-green { color: #22c55e; } .ic-dot-grey { color: #94a3b8; }
h1 .ic, h2 .ic, h3 .ic { stroke-width: 2.1; }
.btn .ic { width: 1.05em; height: 1.05em; }
/* the camera badge on avatars */
.av-edit::after { background: var(--card) !important; }
.av-edit::before { content: ''; position: absolute; right: 2px; bottom: 2px; width: 14px; height: 14px; z-index: 2; background: var(--text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z' /%3E %3Ccircle cx='12' cy='13' r='3' /%3E %3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' %3E %3Cpath d='M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z' /%3E %3Ccircle cx='12' cy='13' r='3' /%3E %3C/svg%3E") center / contain no-repeat; pointer-events: none; }

/* ------------------------------------------------------------ severity: serious things look serious */
@keyframes sevGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0), 0 0 0 1px rgba(239,68,68,.55) inset; } 50% { box-shadow: 0 0 22px 2px rgba(239,68,68,.28), 0 0 0 1px rgba(239,68,68,.9) inset; } }
@keyframes sevDot { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes hazard { to { background-position: 28px 0; } }
@keyframes sirenTilt { 0%, 86%, 100% { transform: rotate(0); } 89% { transform: rotate(-14deg); } 92% { transform: rotate(12deg); } 95% { transform: rotate(-8deg); } }
@keyframes sevIn { 0% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } 100% { transform: none; } }

.c-summary { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.c-summary .cs-body { flex: 1; min-width: 220px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.c-summary .cs-title { width: 100%; font-size: 16px; }
.c-summary .cs-siren { font-size: 28px; line-height: 1; flex: 0 0 auto; }
.c-summary [class^="cs-"] i, .c-summary [class*=" cs-"] i { font-style: normal; font-weight: 900; margin-right: 6px; }
.c-summary .cs-bad, .c-summary .cs-warn { display: inline-flex; align-items: center; border-radius: 999px; padding: 4px 11px 4px 4px; font-size: 13.5px; }
.c-summary .cs-bad { background: rgba(239,68,68,.16); border: 1px solid rgba(239,68,68,.55); }
.c-summary .cs-warn { background: rgba(251,191,36,.10); border: 1px solid rgba(251,191,36,.4); }
.c-summary .cs-bad i, .c-summary .cs-warn i { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; color: #fff; }
.c-summary .cs-bad i { background: var(--bad); } .c-summary .cs-warn i { background: #b45309; }
.c-summary.bad { position: relative; overflow: hidden; background: linear-gradient(135deg, #2a0f12 0, var(--card) 70%); border-color: rgba(239,68,68,.75); animation: sevGlow 2.6s ease-in-out infinite; padding-top: 18px; }
.c-summary.bad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: repeating-linear-gradient(-45deg, var(--bad) 0 10px, #1a0a0c 10px 14px); background-size: 28px 6px; animation: hazard 1.2s linear infinite; }
.c-summary.bad .cs-siren { animation: sirenTilt 3.2s ease-in-out infinite; transform-origin: 50% 90%; }
.c-summary.warn { background: linear-gradient(135deg, #261d0a 0, var(--card) 70%); }

h2.sec.sec-bad { color: #fecaca; display: flex; align-items: center; gap: 10px; }
h2.sec.sec-bad::after { content: ""; flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(239,68,68,.7), transparent); }
h2.sec.sec-warn { color: #fde68a; }
.sev-pill { display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: var(--bad); color: #fff; font-weight: 900; font-size: 15px; position: relative; }
.sev-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--bad); animation: sevDot 1.8s ease-out infinite; }

.ccard.conflict-card, .ccard.severe { position: relative; border-color: rgba(239,68,68,.45); border-left: 6px solid var(--bad); background: linear-gradient(100deg, rgba(239,68,68,.10) 0, var(--card) 45%); }
.ccard.conflict-card { animation: sevIn .5s ease-out 1; }
.ccard.conflict-card.urgent, .ccard.urgent { animation: sevGlow 2.6s ease-in-out infinite; }
.ccard.conflict-card::after, .ccard.urgent::after { content: ""; position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; background: var(--bad); box-shadow: 0 0 0 0 rgba(239,68,68,.6); }
.ccard.conflict-card.urgent::after, .ccard.urgent::after { animation: sevBeacon 1.4s ease-out infinite; }
@keyframes sevBeacon { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.75); } 100% { box-shadow: 0 0 0 12px rgba(239,68,68,0); } }
.ccard.conflict-card .ccard-head { padding-right: 18px; }

.attn li.sev-3 { position: relative; background: linear-gradient(100deg, #331214 0, #1d1012 60%); border-left-width: 5px; box-shadow: 0 0 0 1px rgba(239,68,68,.35) inset; }
.attn li.sev-3 .attn-ic { position: relative; }
.attn li.sev-3 .attn-ic::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; border: 2px solid rgba(239,68,68,.8); animation: sevDot 1.8s ease-out infinite; }
.attn li.sev-2 { background: linear-gradient(100deg, #2a2009 0, var(--bg2) 60%); }
.stat.bad { border-color: rgba(239,68,68,.6); animation: sevGlow 2.6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .c-summary.bad, .c-summary.bad::before, .c-summary.bad .cs-siren, .sev-pill::after, .ccard.conflict-card, .ccard.urgent, .ccard.urgent::after, .attn li.sev-3 .attn-ic::before, .stat.bad { animation: none !important; }
}

/* ------------------------------------------------------------ any-time items in free time */
.sug-list { display: grid; gap: 10px; margin-bottom: 8px; }
.sug-card { position: relative; background: var(--card); border: 1px dashed rgba(250,204,21,.45); border-left: 5px solid var(--dept, #64748b); border-radius: 16px; padding: 12px 14px; cursor: pointer; }
.sug-card.planned { border-style: solid; border-color: rgba(56,189,248,.45); border-left-color: var(--dept, #64748b); background: linear-gradient(100deg, rgba(56,189,248,.08), var(--card) 55%); }
.sug-card.is-now { box-shadow: 0 0 0 1px rgba(250,204,21,.6), 0 0 18px rgba(250,204,21,.15); }
.sug-card.is-last { border-color: rgba(251,146,60,.8); }
.sug-top { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin-bottom: 4px; }
.sug-top .sug-gap { margin-left: auto; }
@media (max-width: 520px) { .sug-top .sug-gap { margin-left: 0; width: 100%; } }
.sug-time { font-weight: 800; font-size: 20px; color: #fde68a; letter-spacing: -.01em; white-space: nowrap; }
.sug-card.planned .sug-time { color: #7dd3fc; }
.sug-time small { font-size: 14px; font-weight: 600; color: var(--muted); }
.sug-gap { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.sug-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: #cfd5e2; margin: 4px 0 2px; }
.sug-last { margin-top: 6px; font-weight: 700; font-size: 13.5px; color: #fdba74; }
.sug-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sug-acts .btn.ok { margin-left: auto; }
.sug-risk { background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.45); border-radius: 12px; padding: 10px 12px; font-size: 14px; cursor: pointer; }
.sug-help { margin: 2px 2px 0; }
.at-line { font-size: 13.5px; font-weight: 600; margin-top: 4px; }
.at-line.sug { color: #fde68a; } .at-line.sug.last { color: #fdba74; } .at-line.planned { color: #7dd3fc; } .at-line.risk { color: #fca5a5; }
.at-sheet { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; }
.at-sheet .at-line { margin: 0; }
.at-sheet .sug-acts { width: 100%; margin-top: 2px; }
.tl-ghost { display: flex; align-items: baseline; gap: 10px; margin: 6px 0; padding: 8px 12px; border: 1px dashed rgba(250,204,21,.4); border-radius: 12px; color: #fde68a; cursor: pointer; flex-wrap: wrap; }
.tl-ghost .tg-time { font-weight: 800; font-variant-numeric: tabular-nums; }
.tl-ghost .tg-t { font-weight: 700; }
.takes-seg .seg-opt span { min-width: 56px; justify-content: center; }
.ac-takes { color: var(--muted); }