* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: var(--w-body) var(--fs-md)/1.5 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: var(--w-head); margin: 0; line-height: 1.2; letter-spacing: -.01em; }
svg.i { width: 20px; height: 20px; flex-shrink: 0; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Sidebar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--nav-bg, var(--brand)); color: #fff; display: flex; flex-direction: column; z-index: 30; transition: width .2s; }
.sidebar-top { padding: 20px 18px 14px; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 24px; letter-spacing: -.02em; }
.brand-mark { width: 40px; height: 40px; border-radius: 50%; border: 2px dotted rgba(255,255,255,.55); display: grid; place-items: center; flex-shrink: 0; }
.brand-mark svg { width: 24px; height: 24px; }
.brand .dot { color: var(--sun); }
.tm { font-size: .42em; font-weight: 600; margin-left: 1px; vertical-align: super; line-height: 0; opacity: .75; }
.collapse-btn { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; }
.collapse-btn:hover { background: rgba(255,255,255,.22); }
.store { margin: 6px 14px 14px; padding: 10px 12px; border: 1.5px solid rgba(255,255,255,.55); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 10px; }
.store b { display: block; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.store small { display: block; font-size: 13px; opacity: .8; }
.nav { padding: 6px 12px; overflow-y: auto; flex: 1; border-top: 1px solid rgba(255,255,255,.18); }
.nav a { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; padding: 11px 12px; border-radius: var(--radius-sm); margin: 3px 0; font-weight: 500; font-size: 16px; position: relative; }
.nav a:hover { background: rgba(255,255,255,.1); }
.nav a.active { background: var(--brand-deep); }
.nav a.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 4px; background: var(--aqua); }
.nav .count { margin-left: auto; background: rgba(255,255,255,.18); border-radius: var(--radius-pill); font-size: 13px; padding: 1px 9px; }
.nav .group-label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; padding: 14px 12px 4px; }
.nav .nav-gap { height: 14px; }
.sidebar-foot { border-top: 1px solid rgba(255,255,255,.18); padding: 14px 16px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--action); color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.avatar.sm { width: 28px; height: 28px; font-size: 11px; }
.who b { display: block; font-size: 15px; }
.who small { display: block; font-size: 13px; opacity: .8; }
.demo-switch { margin-top: 4px; font-size: 13px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); border-radius: 4px; padding: 2px 4px; max-width: 150px; }
.demo-switch option { color: var(--ink); }

body.nav-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
body.nav-collapsed .sidebar .label, body.nav-collapsed .sidebar .brand-text, body.nav-collapsed .store-text,
body.nav-collapsed .nav .count, body.nav-collapsed .nav .group-label, body.nav-collapsed .who { display: none; }
body.nav-collapsed .sidebar-top { flex-direction: column; padding: 16px 0; }
body.nav-collapsed .collapse-btn { margin: 0; transform: rotate(180deg); }
body.nav-collapsed .store { justify-content: center; margin: 6px 10px 12px; padding: 10px 0; }
body.nav-collapsed .nav a { justify-content: center; padding: 12px 0; }
body.nav-collapsed .sidebar-foot { justify-content: center; }
body.nav-collapsed .shell { margin-left: var(--sidebar-w-collapsed); }

/* ---------- Shell ---------- */
.shell { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .2s; }
.topbar { background: var(--surface); border-bottom: 1px solid var(--line); height: 68px; display: flex; align-items: center; gap: var(--s4); padding: 0 var(--s6); position: sticky; top: 0; z-index: 20; }
.topbar .menu-btn { display: none; }
.topbar .place { font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar .place svg { color: var(--brand); }
.search-box { margin-left: auto; display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 0 12px; width: min(380px, 40vw); background: var(--surface); }
.search-box input { border: 0; outline: 0; padding: 10px 6px; flex: 1; min-width: 0; background: transparent; }
.icon-btn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: transparent; color: var(--ink-2); display: grid; place-items: center; position: relative; }
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .badge-dot { position: absolute; top: 6px; right: 7px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--action); color: #fff; font-size: 11px; display: grid; place-items: center; padding: 0 4px; font-weight: 700; }
main { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: var(--s6) var(--s6) var(--s7); }
.footer { text-align: center; color: var(--muted); font-size: var(--fs-xs); padding: 0 var(--s5) var(--s5); }

.demo-banner { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--sample-line); padding: 8px var(--s6); font-size: var(--fs-sm); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.demo-banner b { font-weight: 700; }
/* Icon, message and the reset link stay on one row; a long message wraps inside its own space. */
.demo-banner > svg { flex: none; }
.demo-banner > span { flex: 1 1 0; min-width: 0; }
.demo-banner > .link { flex: none; white-space: nowrap; }

/* ---------- Page header ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.eyebrow { font-size: var(--fs-sm); color: var(--muted); font-weight: 500; }
.page-head h1 { font-size: var(--fs-2xl); margin-top: 4px; }
.page-head h1 .sun-dot { color: var(--sun); }
.page-head p { margin: 6px 0 0; color: var(--ink-2); }
.head-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-pill); padding: 10px 20px; font-weight: 500; font-size: var(--fs-md); border: 2px solid transparent; text-decoration: none; white-space: nowrap; line-height: 1.2; }
.btn svg.i { width: 18px; height: 18px; }
.btn-primary { background: var(--action); color: #fff; }
.btn-primary:hover { background: var(--action-deep); }
.btn-outline { background: var(--surface); color: var(--brand); border-color: var(--brand); }
.btn-outline:hover { background: var(--info-bg); }
.btn-quiet { background: transparent; color: var(--brand); padding: 8px 10px; }
.btn-quiet:hover { background: var(--surface-2); }
.btn-danger { background: var(--surface); color: var(--bad); border-color: var(--bad); }
.btn-sm { padding: 6px 14px; font-size: var(--fs-sm); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.link { background: none; border: 0; padding: 0; color: var(--brand); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; }

/* ---------- Cards & layout ---------- */
.card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); border: 1px solid var(--line); min-width: 0; }
.card-pad { padding: var(--s5); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s5) var(--s5) var(--s3); flex-wrap: wrap; }
.card-head h2 { font-size: var(--fs-lg); display: flex; align-items: center; gap: 10px; }
.card-head .period { display: block; font-size: var(--fs-sm); color: var(--muted); font-weight: 400; margin-top: 2px; }
.card-head .n { font-size: var(--fs-sm); font-weight: 500; background: var(--idle-bg); color: var(--idle); border-radius: var(--radius-pill); padding: 2px 10px; }
.card-body { padding: 0 var(--s5) var(--s5); }

.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.dash > .full { grid-column: 1 / -1; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.stack > * + * { margin-top: var(--s5); }

/* Quick actions (Signal-style) */
.quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.quick button { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: var(--radius); padding: 22px; display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 700; font-size: var(--fs-lg); color: var(--ink); }
.quick button:hover { border-color: var(--action); }
.quick .qi { width: 44px; height: 44px; border: 2px solid var(--action); border-radius: 8px; display: grid; place-items: center; color: var(--action); }
.quick .qi svg { width: 24px; height: 24px; }

/* Big counts */
.counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.count-cell { padding: var(--s3) var(--s5) var(--s5); border-left: 1px solid var(--line); display: flex; flex-direction: column; align-items: flex-start; gap: 4px; background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; }
.count-cell:first-child { border-left: 0; }
button.count-cell:hover .big { color: var(--brand); }
.big { font-size: var(--fs-num); font-weight: var(--w-number); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.big.zero { color: var(--line-strong); }
.count-cell .lbl { color: var(--ink-2); font-size: var(--fs-md); }
.count-cell .sub { color: var(--muted); font-size: var(--fs-sm); }
.alert-line { display: flex; gap: var(--s5); flex-wrap: wrap; padding: 0 var(--s5) var(--s3); }
.alert-line button { background: none; border: 0; padding: 0; display: inline-flex; gap: 6px; align-items: center; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.alert-line .bad { color: var(--bad); }
.alert-line .warn { color: var(--warn); }

/* KPI cards */
.kpi { padding: var(--s5); display: flex; flex-direction: column; gap: 6px; }
.kpi-top { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-md); }
.kpi-top svg { color: var(--brand); }
.kpi .period { color: var(--muted); font-size: var(--fs-sm); }
.kpi .big { margin-top: 10px; font-size: 40px; }
.kpi .second { font-weight: 500; color: var(--ink-2); }
.kpi .source { margin-top: auto; padding-top: 10px; font-size: var(--fs-xs); color: var(--muted); }

/* Badges */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.badge svg.i { width: 14px; height: 14px; stroke-width: 2.4; }
.b-ok { background: var(--ok-bg); color: var(--ok); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-info { background: var(--info-bg); color: var(--info); }
.b-idle { background: var(--idle-bg); color: var(--idle); }
.b-sample { background: var(--sample-bg); color: var(--sample-ink); border: 1px dashed var(--sample-line); }
.b-planned { background: var(--planned-bg); color: var(--planned-ink); border: 1px dashed var(--planned-line); }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); padding: 2px 10px; border-radius: var(--radius-pill); white-space: nowrap; }

/* Rows / lists */
.rows { border-top: 1px solid var(--line); }
.row { display: flex; align-items: center; gap: var(--s3); padding: 14px var(--s5); border-bottom: 1px solid var(--line); min-width: 0; }
.row:last-child { border-bottom: 0; }
.row.clickable { cursor: pointer; }
.row.clickable:hover { background: var(--surface-2); }
.row-main { flex: 1; min-width: 0; }
.row-title { font-weight: 500; overflow-wrap: anywhere; }
.row-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--muted); font-size: var(--fs-sm); margin-top: 4px; align-items: center; }
.row-end { display: flex; align-items: center; gap: var(--s2); flex-shrink: 0; }
.row .chev { color: var(--ink-2); }
.done .row-title { text-decoration: line-through; color: var(--muted); }
.check { appearance: none; width: 22px; height: 22px; border: 2px solid var(--line-strong); border-radius: 6px; margin: 0; flex-shrink: 0; cursor: pointer; display: grid; place-items: center; background: var(--surface); }
.check:checked { background: var(--brand); border-color: var(--brand); }
.check:checked::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px); }
.overdue { color: var(--bad); font-weight: 500; }
.empty { padding: var(--s6) var(--s5); text-align: center; color: var(--muted); }
.empty b { display: block; color: var(--ink-2); font-size: var(--fs-md); margin-bottom: 4px; }

/* Tabs */
.tabs { display: flex; gap: var(--s5); padding: 0 var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button { background: none; border: 0; padding: 10px 0 12px; color: var(--ink-2); font-weight: 500; border-bottom: 3px solid transparent; white-space: nowrap; }
.tabs button.on { color: var(--ink); border-bottom-color: var(--action); }
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 6px 14px; font-weight: 500; color: var(--ink-2); }
.seg button.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }

/* Toolbar / filters */
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-bottom: var(--s4); }
.field { display: flex; flex-direction: column; gap: 6px; font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); }
.input, select.input, textarea.input { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--surface); font-size: var(--fs-md); color: var(--ink); width: 100%; font-weight: 400; }
textarea.input { resize: vertical; min-height: 84px; }
.toolbar .input { width: auto; min-width: 160px; }
.toolbar .grow { flex: 1; min-width: 200px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.form-grid .span { grid-column: 1 / -1; }
.hint { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }

/* Tool cards (ControlPoint-style) */
.tool { display: flex; align-items: center; gap: var(--s5); padding: var(--s6) var(--s5); text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; width: 100%; }
.tool:hover { border-color: var(--brand); }
.tool-icon { width: 56px; height: 56px; display: grid; place-items: center; color: var(--brand); flex-shrink: 0; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); }
.tool-icon svg { width: 30px; height: 30px; stroke-width: 1.7; }
.tool h3 { color: var(--brand); font-size: 24px; font-weight: 500; }
.tool p { margin: 4px 0 0; color: var(--ink-2); }
.tool .chev { margin-left: auto; color: var(--brand); }

/* Projects */
.progress { height: 8px; background: var(--idle-bg); border-radius: 8px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--aqua); border-radius: 8px; }
.proj-card { padding: var(--s5); display: flex; flex-direction: column; gap: 10px; cursor: pointer; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); }
.proj-card:hover { border-color: var(--brand); }
.proj-card h3 { font-size: var(--fs-lg); }
.proj-stats { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink-2); }

/* Meetings */
.dateblock { width: 56px; flex-shrink: 0; text-align: center; border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 0; background: var(--surface-2); }
.dateblock small { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--action); }
.dateblock b { font-size: 22px; font-weight: 500; }
.avatars { display: flex; }
.avatars .avatar { border: 2px solid var(--surface); margin-left: -6px; }   /* same color as everywhere else */
.avatars .avatar:first-child { margin-left: 0; }

/* Board */
.board { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: var(--s4); overflow-x: auto; padding-bottom: 4px; }
.col { background: var(--col-bg); border-radius: var(--radius); padding: var(--s3); min-height: 200px; }
.col h3 { font-size: var(--fs-md); display: flex; justify-content: space-between; padding: 4px 6px 10px; }
.col .bcard { background: var(--surface); border-radius: 8px; padding: 12px; margin-bottom: 8px; box-shadow: var(--shadow); border: 1px solid var(--line); cursor: pointer; width: 100%; text-align: left; }
.col .bcard:hover { border-color: var(--brand); }
.col .bcard[draggable="true"] { cursor: grab; }
.col .bcard.dragging { opacity: .4; }
.board .col { transition: background .12s, box-shadow .12s; }
.board .col.drop { background: color-mix(in srgb, var(--brand) 8%, var(--surface-2)); box-shadow: inset 0 0 0 2px var(--brand); }

/* Calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cal .dow { background: var(--surface-2); font-weight: 700; font-size: var(--fs-sm); padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cal .day { min-height: 110px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); min-width: 0; }
.cal .day.out { background: var(--surface-2); color: var(--muted); }
.cal .day.today .dn { background: var(--action); color: #fff; border-radius: 50%; }
.cal .dn { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 0; padding: 0; background: none; font: inherit; font-weight: 500; color: inherit; cursor: pointer; border-radius: 50%; }
button.dn:hover { background: var(--surface-2); }
.ev { display: block; width: 100%; text-align: left; border: 0; border-radius: 4px; padding: 2px 6px; margin-top: 3px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid; }
.ev.t { background: var(--info-bg); border-color: var(--brand); }
.ev.t.late { background: var(--bad-bg); border-color: var(--bad); }
.ev.m { background: var(--bad-bg); border-color: var(--action); }
.ev.e { background: var(--warn-bg); border-color: #d08a00; }

/* Charts */
.chart-wrap { padding: 0 var(--s5) var(--s5); }
.chart-wrap svg { width: 100%; height: auto; display: block; overflow: visible; }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: center; padding: var(--s3) var(--s5); font-weight: 500; font-size: var(--fs-sm); }
.legend label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
.legend input { width: 20px; height: 20px; accent-color: var(--brand); }
.swatch { width: 22px; height: 0; border-top: 3px solid; display: inline-block; }
.swatch.dash { border-top-style: dashed; }
.donut-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
.donut-legend .sq { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; }
.hbar { display: grid; grid-template-columns: minmax(110px, 200px) 1fr auto; align-items: center; gap: var(--s3); padding: 6px 0; }
.hbar .bar { height: 22px; background: var(--series-1); border-radius: 0 4px 4px 0; }
.chart-toolbar { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: center; padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.date-nav { display: flex; align-items: center; gap: 6px; }
.round { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); display: grid; place-items: center; color: var(--ink); }
.date-pill { border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 16px; font-weight: 500; min-width: 190px; text-align: center; }
table.data { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
table.data th { text-align: left; background: var(--surface-2); padding: 10px 12px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .04em; color: var(--ink-2); }
table.data td { padding: 10px 12px; border-top: 1px solid var(--line); }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table-scroll { overflow-x: auto; }

/* Notices */
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); margin-bottom: var(--s4); font-size: var(--fs-sm); }
.notice.sample { background: var(--sample-bg); color: var(--sample-ink); }
.notice.planned { background: var(--planned-bg); color: var(--planned-ink); }
.notice.ok { background: var(--ok-bg); color: var(--ok); }
.notice svg { margin-top: 1px; }

/* Drawer & dialogs */
.drawer { position: fixed; inset: 0 0 0 auto; width: min(620px, 100%); background: var(--surface); box-shadow: var(--shadow-lg); z-index: 60; display: flex; flex-direction: column; transform: translateX(105%); transition: transform .22s; }
.drawer.open { transform: none; }
.scrim { position: fixed; inset: 0; background: rgba(3, 40, 52, .35); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .2s; }
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer-head { padding: var(--s5); border-bottom: 1px solid var(--line); display: flex; gap: var(--s3); align-items: flex-start; }
.drawer-head h2 { font-size: 24px; flex: 1; }
.drawer-body { padding: var(--s5); overflow-y: auto; flex: 1; }
.drawer-body h3 { font-size: var(--fs-md); margin: var(--s5) 0 var(--s2); display: flex; align-items: center; gap: 8px; }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px var(--s3); font-size: var(--fs-sm); }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 500; }
/* Edit in place: a small pencil beside each detail; the detail turns into a box right where it is. */
.kv-edit { align-items: center; }
.kv-edit dt { align-self: center; }
.kv-edit dd { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 32px; }
.kv-edit dd .input { width: auto; min-width: 0; max-width: 100%; padding-top: 6px; padding-bottom: 6px; }
.kv-edit dd select.input { min-width: 180px; }
.kv-pen { width: 30px; height: 30px; flex: none; color: var(--muted); opacity: .7; }
.kv-pen svg { width: 15px; height: 15px; }
.kv-pen:hover, .kv-pen:focus-visible { opacity: 1; color: var(--brand); }
.drawer-head .kv-pen { margin-top: 2px; }
.te-title { flex: 1; font-size: 20px; font-weight: 600; }
.te-pair { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.te-h { display: flex; align-items: center; gap: 4px; }
.te-acts { display: flex; gap: 8px; margin-top: 8px; }
.task-top { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.task-status .input { width: auto; padding-top: 6px; padding-bottom: 6px; }
.comment { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.comment p { margin: 2px 0 0; white-space: pre-wrap; }
.comment-body { flex: 1; min-width: 0; }
.comment-del { float: right; font-size: 13px; color: var(--muted); opacity: 0; }
.comment:hover .comment-del, .comment-del:focus-visible { opacity: 1; }
@media (hover: none) { .comment-del { opacity: 1; } }
/* @mentions: a chip with the person's photo and name (opens their profile), the @ list, and "Mentioning …" under the box */
.mention-chip { display: inline-flex; align-items: center; gap: 4px; vertical-align: baseline; padding: 1px 8px 1px 2px; margin: 0 1px; border: 0; border-radius: 999px; background: var(--info-bg, rgba(0, 85, 115, .1)); color: var(--info, var(--brand)); font: inherit; font-weight: 600; font-size: .95em; cursor: pointer; line-height: 1.5; }
.mention-chip .avatar { width: 18px; height: 18px; font-size: 8px; margin: 0; }
.mention-chip:hover { filter: brightness(.95); text-decoration: underline; }
.mention-chip.static { cursor: default; text-decoration: none; filter: none; }
.mention-wrap { position: relative; }
.mention-who:not(:empty) { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 13px; }
.te-followers { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; width: 100%; }
.chip-x { border: 0; background: none; color: inherit; padding: 0 0 0 2px; cursor: pointer; display: inline-flex; opacity: .7; }
.chip-x svg { width: 12px; height: 12px; }
.chip-x:hover { opacity: 1; }
.activity { font-size: var(--fs-sm); color: var(--ink-2); border-left: 2px solid var(--line); padding-left: 12px; }
.activity div { padding: 3px 0; }
dialog { border: 0; border-radius: var(--radius-lg); padding: 0; background: var(--surface); width: min(640px, calc(100% - 24px)); max-height: calc(100vh - 32px); box-shadow: var(--shadow-lg); color: var(--ink); }
dialog::backdrop { background: rgba(3, 40, 52, .4); }
dialog:has(.dlg-wide) { width: min(920px, calc(100% - 24px)); }
dialog form, .dlg { padding: var(--s5); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s4); }
.dlg-head h2 { font-size: 24px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; align-self: center; }
.dlg-head.sticky-head { position: sticky; top: 0; z-index: 5; background: var(--surface); margin: calc(-1 * var(--s5)) calc(-1 * var(--s5)) var(--s4); padding: var(--s5); border-bottom: 1px solid var(--line); }
table.data .link { text-align: left; white-space: nowrap; }
.av-warn { display: flex; gap: 6px; align-items: center; color: var(--warn, #9a6200); font-size: 13px; margin: 0 0 8px; }
.dlg-foot { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s5); flex-wrap: wrap; }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); background: var(--nav-bg, var(--brand)); color: #fff; padding: 12px 22px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: .2s; z-index: 90; font-weight: 500; max-width: calc(100% - 32px); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
/* On touch screens the pop-up message and each notification can be swiped sideways to get rid of them. */
@media (hover: none) { #toast.show { pointer-events: auto; touch-action: pan-y; } [data-note] { touch-action: pan-y; } }

/* Admin editor */
.layout-list .row { gap: var(--s2); }
.layout-list .row[draggable=true] { cursor: grab; }
.layout-list .row.dragging { opacity: .4; }
.layout-list .handle { color: var(--muted); }
.swatch-input { display: flex; align-items: center; gap: 10px; }
.swatch-input input[type=color] { width: 48px; height: 40px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 2px; background: var(--surface); }

/* Care card (Daywell personality) */
.care { background: var(--brand); color: #fff; border-radius: var(--radius); padding: var(--s5); display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.care small { letter-spacing: .1em; font-size: 12px; font-weight: 700; opacity: .85; }
.care h3 { font-size: 22px; margin: 6px 0; }
.care p { margin: 0; opacity: .9; }
.care svg { width: 64px; height: 64px; color: var(--sun); stroke-width: 1.4; flex-shrink: 0; }

/* Sign-in screens (live mode) */
.auth { display: none; }
body.signed-out { overflow: hidden; }
body.signed-out .auth { display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--nav-bg, var(--brand)); padding: var(--s4); overflow-y: auto; }
body.signed-out .sidebar, body.signed-out .shell { visibility: hidden; }
.auth-card { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--s6); width: min(440px, 100%); }
.auth-card h1 { font-size: var(--fs-xl); margin: var(--s5) 0 var(--s3); }
.auth-card .stack > * + * { margin-top: var(--s4); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; font-weight: 700; font-size: 30px; color: var(--brand); letter-spacing: -.02em; text-align: center; }
.auth-brand .brand-mark { width: 56px; height: 56px; }
.auth-brand .brand-mark svg { width: 30px; height: 30px; }
.auth-card h1 { text-align: center; }
body.signed-out .auth { align-content: center; justify-items: center; }
.auth-card > p, .auth-card .auth-wait { text-align: center; }
.auth-card .auth-wait { margin: var(--s5) 0 0; font-size: 16px; }
/* Loading: the sun turns slowly inside a soft pulsing ring, and a bar sweeps under the message */
.auth-card.loading .brand-mark { position: relative; }
.auth-card.loading .brand-mark svg { animation: dw-sun-turn 6s linear infinite; transform-origin: 50% 50%; }
.auth-card.loading .brand-mark::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--sun, #e35205); opacity: 0; animation: dw-sun-ring 1.8s ease-out infinite; pointer-events: none; }
.auth-bar { height: 4px; width: min(220px, 70%); margin: 14px auto 0; border-radius: 99px; background: color-mix(in srgb, var(--sun, #e35205) 15%, transparent); overflow: hidden; }
.auth-bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--sun, #e35205); animation: dw-bar-sweep 1.4s ease-in-out infinite; }
#authWaitMore:not(:empty) { margin-top: 14px; }
@keyframes dw-sun-turn { to { transform: rotate(360deg); } }
@keyframes dw-sun-ring { 0% { transform: scale(.85); opacity: .55; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes dw-bar-sweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) {
  .auth-card.loading .brand-mark svg { animation: none; }
  .auth-card.loading .brand-mark::after { animation-duration: 3s; }
  .auth-bar span { animation-duration: 3s; }
}
.auth-card .auth-msg { text-align: left; }
.auth-brand .brand-mark { border-color: var(--line-strong); color: var(--sun); }
.auth-brand .dot { color: var(--sun); }
.auth-msg { padding: 10px 14px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); font-size: var(--fs-sm); }
.auth-msg.bad { background: var(--bad-bg); color: var(--bad); }

/* Home: cards packed by height so nothing leaves a gap (js: packDash) */
.dash.packed { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.empty-line { padding: var(--s3) var(--s5); color: var(--muted); font-size: var(--fs-sm); }
.card-foot { padding: var(--s2) var(--s5) var(--s4); }
.card-foot .btn { padding-left: 0; }

/* Photos */
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.xl { width: 96px; height: 96px; font-size: 30px; }
.avatar-btn { background: none; border: 0; padding: 0; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.avatar-btn:hover .avatar { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }
.avatar-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* Store switcher in the top bar */
.store-switch select { font: inherit; font-weight: 500; color: var(--ink); background: transparent; border: 1.5px solid var(--line-strong); border-radius: 999px; padding: 6px 30px 6px 12px; cursor: pointer; max-width: 340px; }
.store-boxes { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: 6px; }
.store-box { display: flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--ink-2); font-weight: 400; }
.member-row { flex-wrap: wrap; align-items: flex-start; }

/* Subtasks */
.subtask-task { display: flex; gap: 10px; align-items: center; padding: 6px 0; flex-wrap: wrap; }
.subtask-task .sub-open { text-align: left; font-weight: 500; color: var(--ink); }
#taskList .handle { color: var(--muted); cursor: grab; display: grid; }
#taskList .row.dragging { opacity: .4; }
#taskList .row.drop-target { background: var(--info-bg); box-shadow: inset 0 0 0 2px var(--aqua); }

/* Resource icon picker */
.icon-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.icon-pick input { position: absolute; opacity: 0; }
.icon-pick span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1.5px solid var(--line); border-radius: var(--radius-sm); color: var(--action); cursor: pointer; font-weight: 400; }
.icon-pick span svg { width: 28px; height: 28px; }
.icon-pick small { color: var(--ink-2); font-size: 12px; }
.icon-pick input:checked + span { border-color: var(--action); background: var(--bad-bg); box-shadow: 0 0 0 1px var(--action); }
.icon-pick input:focus-visible + span { outline: 3px solid var(--aqua); outline-offset: 2px; }

/* Admin */
.admin-tabs { background: var(--surface); border-radius: var(--radius); margin-bottom: var(--s5); box-shadow: var(--shadow); }
.admin-tabs button { display: inline-flex; gap: 6px; align-items: center; }
table.access td, table.access th { vertical-align: middle; }
.search-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; display: flex; align-items: center; gap: 12px; }
.search-row > svg:first-child { width: 18px; height: 18px; color: var(--brand); flex: none; }
.moolah-fine { margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--line); }
/* Mini chat dock (every page, computers and tablets): a sleek messages panel */
.dock { position: fixed; right: 20px; bottom: 20px; z-index: 40; font-size: var(--fs-sm); }
.dock-fab { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; box-shadow: 0 10px 30px rgba(3, 77, 99, .32); cursor: pointer; display: grid; place-items: center; transition: transform .15s, box-shadow .15s; }
.dock-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 36px rgba(3, 77, 99, .4); }
.dock-fab svg { width: 24px; height: 24px; }
.dock-fab .count { position: absolute; top: -3px; right: -3px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--action); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--surface); }
.dock.open { width: 372px; height: min(580px, calc(100vh - 100px)); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 24px 60px rgba(16, 32, 40, .22); display: flex; flex-direction: column; overflow: hidden; animation: dockIn .18s ease-out; }
@keyframes dockIn { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.dock-head { display: flex; align-items: center; gap: 8px; padding: 12px 10px 10px 14px; border-bottom: 1px solid var(--line); }
.dock-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dock-title b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-title small { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-h1 { font-size: 18px !important; letter-spacing: -.01em; }
.dock-ic { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.dock-ic:hover { background: var(--surface-2); color: var(--ink); }
.dock-ic svg { width: 17px; height: 17px; }
.dock-tools { padding: 10px 12px 6px; display: grid; gap: 8px; }
.dock-search { position: relative; display: block; }
.dock-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); pointer-events: none; }
.dock-search input { width: 100%; border: 0; background: var(--surface-2); border-radius: 999px; padding: 9px 12px 9px 34px; font: inherit; color: var(--ink); outline: none; }
.dock-search input:focus { box-shadow: 0 0 0 2px var(--aqua); }
.dock-tabs { display: flex; gap: 4px; }
.dock-tabs button { border: 0; background: transparent; color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.dock-tabs button.on { background: var(--brand); color: #fff; }
.dock-tabs button:not(.on):hover { background: var(--surface-2); }
.dock-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.dock-empty { margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); }
.dock-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; text-align: left; font: inherit; color: var(--ink); cursor: pointer; transition: background .12s; }
.dock-row:hover { background: var(--surface-2); }
.dock-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; }
/* Group conversations: two overlapping photos in the same 32px, so every name lines up.
   The same 32px spot holds a DM photo or a channel's # in the chat popup, the conversation header and the details window,
   so the conversation name doesn't jump sideways when you switch between a DM, a group and a channel. */
:is(.chat-head, .chat-dlg-title) > :is(.chat-stack, .av-dot-wrap, .chat-ic) { flex: none; width: 32px; height: 32px; display: inline-grid; place-items: center; }
:is(.dock-av, .chat-head, .chat-dlg-title) > .chat-stack { position: relative; width: 32px; height: 32px; }
:is(.dock-av, .chat-head, .chat-dlg-title) > .chat-stack .avatar { position: absolute; left: 0; top: 0; width: 22px; height: 22px; font-size: 9px; margin: 0; }
:is(.dock-av, .chat-head, .chat-dlg-title) > .chat-stack .avatar + .avatar { left: auto; top: auto; right: 0; bottom: 0; margin: 0; box-shadow: 0 0 0 2px var(--surface); }
:is(.dock-av, .chat-head, .chat-dlg-title) > .chat-stack .avatar:nth-child(n+3) { display: none; }
.dock-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dock-row-top, .dock-row-bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dock-row-top b { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-row-top time { font-size: 11px; color: var(--muted); flex: none; }
.dock-row-bot small { flex: 1; min-width: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dock-row.unread .dock-row-top b { font-weight: 700; }
.dock-row.unread .dock-row-bot small { color: var(--ink); }
.dock-row.unread .dock-row-top time { color: var(--action); font-weight: 600; }
.dock-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--action); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.dock-msgs { padding: 8px 12px 12px; background: var(--surface); }
.dock-day { text-align: center; margin: 12px 0 6px; }
.dock-day span { font-size: 11px; font-weight: 600; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: 3px 10px; }
.dock-m { display: flex; align-items: flex-end; gap: 6px; margin-top: 2px; }
.dock-m.first { margin-top: 10px; }
.dock-m.mine { justify-content: flex-end; }
.dock-m-av { width: 24px; flex: none; }
.dock-m-av .avatar { width: 24px; height: 24px; font-size: 10px; }
.dock-m-col { display: flex; flex-direction: column; max-width: 78%; min-width: 0; }
.dock-m.mine .dock-m-col { align-items: flex-end; }
.dock-m-name { font-size: 11.5px; font-weight: 600; color: var(--ink-2); margin: 0 0 3px 10px; }
.dock-bubble { padding: 8px 12px; border-radius: 18px; background: var(--surface-2); color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.dock-m:not(.mine).first .dock-bubble { border-top-left-radius: 18px; }
.dock-m:not(.mine):not(.last) .dock-bubble { border-bottom-left-radius: 6px; }
.dock-m:not(.mine):not(.first) .dock-bubble { border-top-left-radius: 6px; }
.dock-m.mine .dock-bubble { background: var(--brand); color: #fff; }
.dock-m.mine:not(.last) .dock-bubble { border-bottom-right-radius: 6px; }
.dock-m.mine:not(.first) .dock-bubble { border-top-right-radius: 6px; }
.dock-m.mine .dock-bubble a, .dock-m.mine .dock-bubble .chat-at { color: #fff; }
.dock-m.bot .dock-bubble { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 22%, transparent); }
.dock-bubble p, .dock-bubble .chat-body { margin: 0; }
.dock-bubble .chat-files img { max-width: 100%; max-height: 170px; border-radius: 12px; }
.dock-bubble .chat-poll, .dock-bubble .chat-shift { max-width: 100%; margin-top: 6px; }
.dock-m.mine .dock-bubble .chat-poll-opt, .dock-m.mine .dock-bubble .chat-shift { color: var(--ink); }
.dock-m-meta { font-size: 10.5px; color: var(--muted); margin: 3px 8px 0; }
.dock-bot { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.dock-bot svg { width: 13px; height: 13px; }
.dock-compose { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; border-top: 1px solid var(--line); }
.dock-compose textarea { flex: 1; resize: none; border: 0; background: var(--surface-2); border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 14px; line-height: 1.35; max-height: 120px; color: var(--ink); outline: none; }
.dock-compose textarea:focus { box-shadow: 0 0 0 2px var(--aqua); }
.dock-send { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; flex: none; transition: transform .12s; }
.dock-send:hover { transform: scale(1.06); }
.dock-send svg { width: 18px; height: 18px; }
.dock-locked { margin: 0; padding: 12px; border-top: 1px solid var(--line); display: flex; gap: 6px; align-items: center; justify-content: center; color: var(--muted); }
@media (max-width: 760px) { .chat-focus-btn { display: none; } }
/* Chat tools: polls, voice notes, open shifts, send later */
.chat-poll { margin-top: 6px; max-width: 420px; display: grid; gap: 6px; }
.chat-poll-sub { font-size: 12px; color: var(--muted); }
.chat-poll-opt { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius); padding: 9px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.chat-poll-opt:hover:not(:disabled) { border-color: var(--brand); }
.chat-poll-opt.on { border-color: var(--brand); }
.chat-poll-opt:disabled { cursor: default; }
.chat-poll-bar { position: absolute; inset: 0 auto 0 0; background: var(--brand); opacity: .1; transition: width .3s; }
.chat-poll-opt.on .chat-poll-bar { opacity: .18; }
.chat-poll-label { position: relative; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.chat-poll-label svg { width: 14px; height: 14px; color: var(--brand); }
.chat-poll-n { position: relative; font-size: 12px; color: var(--ink-2); white-space: nowrap; }
.chat-poll-foot { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.chat-voice { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.chat-voice svg { width: 16px; height: 16px; color: var(--brand); flex: none; }
.chat-voice audio { height: 36px; max-width: 280px; }
.chat-shift { display: flex; align-items: center; gap: 12px; margin-top: 6px; max-width: 420px; padding: 10px 12px; border: 1px solid var(--line-strong); border-left: 4px solid var(--ok); border-radius: var(--radius); background: var(--surface); }
.chat-shift > svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.chat-shift > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-shift span { font-size: 13px; color: var(--ink-2); }
.chat-shift.taken { border-left-color: var(--line-strong); opacity: .75; }
/* Phones: the text-style buttons step aside so the tools and Send fit (typing *bold* still works). */
@media (max-width: 760px) {
  .chat-bar .chat-fmt[onclick^="chatWrap"], .chat-bar .chat-bar-sep:first-of-type { display: none; }
  .chat-bar { flex-wrap: nowrap; }
  .chat-bar .chat-send { margin-left: auto; flex: none; }
}
@media (max-width: 380px) { .chat-bar .chat-send span { display: none; } }
.ct-mic.rec { color: #fff; background: var(--action); border-radius: 50%; animation: ctPulse 1s infinite; }
@keyframes ctPulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--action) 25%, transparent); } }
.ct-waiting { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; border: 0; background: var(--surface-2); color: var(--ink-2); border-radius: var(--radius-pill); padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer; }
.ct-waiting svg { width: 13px; height: 13px; }
.ct-opts { display: grid; gap: 8px; margin-top: 12px; }
.ct-preview { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; margin-top: 0; white-space: pre-wrap; }
.ct-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ct-remind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chat-msg .chat-who-btn.bot-av { width: 32px; height: 32px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; }
.bot-av svg { width: 17px; height: 17px; }
.bot-tag { font-size: 10px; padding: 1px 6px; margin-left: 4px; }
.chat-name.bot-name { cursor: default; font-weight: 700; color: var(--ink); }
/* Call-Out Autopilot */
.ap-banner { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin-bottom: var(--s3); border-left: 4px solid var(--sun); }
.ap-banner > svg { width: 20px; height: 20px; color: var(--sun); flex: none; margin-top: 2px; }
.ap-body { flex: 1; display: grid; gap: 6px; min-width: 0; }
.ap-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-sm); }
.ap-row > span:first-child { flex: 1; min-width: 180px; }
.ap-row.done { color: var(--ok); }
.ap-row.done svg { width: 14px; height: 14px; vertical-align: -2px; }
.ap-list { margin: 8px 0 14px; padding-left: 22px; display: grid; gap: 6px; }
.ap-list li span.hint { display: block; font-size: 12px; }
.ap-mine { margin-bottom: var(--s4); border-left: 4px solid var(--sun); }
/* Demo bookings (Daywell Staff) */
.demo-book .row-main { min-width: 0; }
.demo-msg { margin: 6px 0 0; }
.bh-days { display: grid; gap: 6px; }
.bh-row { display: grid; grid-template-columns: 130px 1fr auto 1fr; gap: 8px; align-items: center; }
.bh-row .input { padding: 6px 8px; }
@media (max-width: 520px) { .bh-row { grid-template-columns: 1fr 1fr; } .bh-row span { display: none; } }
/* Labor hours dialog: the math behind the hours */
.hours-math { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: var(--s3); }
.hours-math > div { background: var(--surface-2); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.hours-math span { font-size: 12px; color: var(--muted); }
.hours-math b { font-size: var(--fs-lg); }
.hours-math small { font-size: 12px; color: var(--ink-2); }
.pill-btn { border: 0; cursor: pointer; font: inherit; }
/* Projects: search and Cards/List view */
.proj-search { position: relative; flex: 1 1 220px; min-width: 180px; }
.proj-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.proj-search .input { padding-left: 36px; width: 100%; }
.proj-toolbar select.input { width: auto; flex: 0 1 auto; }
.proj-view { margin-left: auto; }
.proj-view button { display: inline-flex; align-items: center; gap: 6px; }
.proj-view svg { width: 15px; height: 15px; }
@media (max-width: 760px) { .proj-search { flex-basis: 100%; } .proj-view span { display: none; } }
/* Roles & Access: role list on the left, switches for the chosen role on the right */
.ra { display: grid; grid-template-columns: 250px minmax(0, 1fr); border-top: 1px solid var(--line); }
.ra-roles { display: flex; flex-direction: column; gap: 4px; padding: var(--s3); background: var(--surface-2); border-right: 1px solid var(--line); }
.ra-role { display: flex; flex-direction: column; gap: 2px; text-align: left; border: 1px solid transparent; background: transparent; border-radius: var(--radius); padding: 10px 12px; color: var(--ink); cursor: pointer; transition: background .15s, border-color .15s; }
.ra-role b { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.ra-role b svg { width: 14px; height: 14px; color: var(--muted); }
.ra-role small { color: var(--muted); font-size: 12px; }
.ra-role:hover { background: var(--surface); }
.ra-role.on { background: var(--surface); border-color: var(--line-strong); box-shadow: var(--shadow); }
.ra-role.on b { color: var(--brand); }
.ra-add { margin-top: var(--s2); align-self: flex-start; }
.ra-panel { padding: var(--s4) var(--s5) var(--s5); min-width: 0; }
.ra-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.ra-head h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-lg); }
.ra-name { font-size: var(--fs-lg); font-weight: 700; width: auto; min-width: 0; max-width: 320px; border-color: transparent; background: transparent; padding: 4px 8px; margin-left: -8px; }
.ra-name:hover, .ra-name:focus { border-color: var(--line-strong); background: var(--surface); }
.ra-head-actions { margin-left: auto; display: flex; gap: 6px; }
.ra-remove { color: var(--bad); }
.ra-admin-note { color: var(--ink-2); max-width: 560px; line-height: 1.55; }
.ra-search { position: relative; display: block; margin-bottom: var(--s4); }
.ra-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.ra-search .input { padding-left: 36px; }
.ra-sec { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.ra-sec-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.ra-sec-head h3 { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); font-weight: 600; }
.ra-sec-head h3 svg { width: 16px; height: 16px; color: var(--brand); }
.ra-count { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: var(--radius-pill); padding: 2px 9px; }
.ra-count:empty { display: none; }
.ra-bulk { margin-left: auto; display: flex; gap: 12px; font-size: var(--fs-xs); }
.ra-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.ra-tile { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); cursor: pointer; font-size: var(--fs-sm); font-weight: 500; transition: border-color .15s; }
.ra-tile:hover { border-color: var(--line-strong); }
.ra-tile > svg { width: 16px; height: 16px; color: var(--ink-2); flex: none; }
.ra-tile > span:not(.tg) { flex: 1; min-width: 0; }
.ra-tile small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); }
.ra-tile.is-off { background: var(--surface-2); color: var(--muted); }
.ra-list { display: grid; gap: 2px; }
.ra-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: 10px 12px; border-radius: var(--radius); cursor: pointer; }
.ra-row:hover { background: var(--surface-2); }
.ra-row b { display: block; font-weight: 500; font-size: var(--fs-sm); }
.ra-row small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.4; }
.ra-seg button { padding: 7px 14px; }
.ra-foot { border-top: 1px solid var(--line); padding-top: var(--s3); }
/* Switch */
.tg { position: relative; display: inline-flex; flex: none; width: 38px; height: 22px; }
.tg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.tg i { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background .15s; }
.tg i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.tg input:checked + i { background: var(--brand); }
.tg input:checked + i::after { transform: translateX(16px); }
.tg input:focus-visible + i { outline: 2px solid var(--aqua); outline-offset: 2px; }
.tg input:disabled { cursor: not-allowed; }
.tg input:disabled + i { opacity: .45; }
@media (max-width: 760px) {
  .ra { grid-template-columns: minmax(0, 1fr); }
  .ra-roles { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: var(--s2); scrollbar-width: none; }
  .ra-role { flex: none; padding: 8px 12px; }
  .ra-add { margin: 0; align-self: center; flex: none; }
  .ra-panel { padding: var(--s3) var(--s4) var(--s4); }
  .ra-head-actions { margin-left: 0; width: 100%; }
  .ra-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-tile { padding: 9px 10px; gap: 8px; min-width: 0; }
  .ra-tile > span:not(.tg) { overflow-wrap: anywhere; }
}
@media (max-width: 360px) { .ra-tiles { grid-template-columns: minmax(0, 1fr); } }
.roles-table .role-col { text-align: center; min-width: 150px; }
.roles-table th.role-col small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; margin-top: 4px; text-transform: none; letter-spacing: 0; }
.roles-table th.role-col b { display: block; padding: 7px 0; text-transform: none; letter-spacing: 0; color: var(--ink); font-size: var(--fs-sm); }
.roles-table .role-name { padding: 6px 8px; text-align: center; font-weight: 500; }
.roles-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.roles-table .role-col svg { color: var(--ok); }
.roles-table .group-row td { background: var(--surface-2); font-weight: 700; color: var(--brand); font-size: var(--fs-sm); }
.roles-table .muted-row td:first-child > span { color: var(--muted); }
.roles-table .page-switch { display: flex; margin-top: 4px; font-size: 12px; color: var(--ink-2); }
.toggle { display: inline-flex; gap: 8px; align-items: center; font-weight: 400; cursor: pointer; }
.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pick-grid label { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-weight: 400; }
.pick-grid small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- Schedule ---------- */
.sch-toolbar { align-items: center; }
.sch-stats { margin-bottom: var(--s5); display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.sch-stats .big { font-size: 34px; }
.sch-stats .kpi-top .badge { margin-left: auto; }
.sch-stats .of { font-size: 20px; color: var(--muted); font-weight: 400; }
.goal-input { font: inherit; font-size: 34px; font-weight: inherit; width: 3.4ch; border: 0; border-bottom: 2px dashed var(--line-strong); background: transparent; color: var(--ink); padding: 0; }
.goal-input:focus { outline: none; border-bottom-color: var(--brand); }
.goal-input:disabled { border-bottom-color: transparent; }
.labor-ok { box-shadow: inset 4px 0 0 var(--ok), var(--shadow); }
.labor-warn { box-shadow: inset 4px 0 0 var(--warn), var(--shadow); }
.labor-bad { box-shadow: inset 4px 0 0 var(--bad), var(--shadow); }
.labor-pill { display: inline-block; padding: 3px 8px; border-radius: 999px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.lp-ok { background: var(--ok-bg); color: var(--ok); } .lp-warn { background: var(--warn-bg); color: var(--warn); } .lp-bad { background: var(--bad-bg); color: var(--bad); } .lp-idle { background: var(--surface-2); color: var(--muted); }
.warn-num { color: var(--warn); } .bad-num { color: var(--bad); }
/* Computer screens: the time + counter header sticks under the top bar as the page scrolls.
   Smaller screens: the board scrolls inside its own box (so it can also scroll sideways) and the header sticks there. */
.sch-scroll { overflow: visible; }
.sch-inner { min-width: 0; }
.sch-head { position: sticky; top: 68px; z-index: 5; background: var(--surface); box-shadow: 0 6px 8px -8px rgba(0,0,0,.25); }
@media (max-width: 1180px) {
  .sch-board { overflow: hidden; }
  .sch-scroll { overflow: auto; max-height: calc(100vh - 120px); }
  .sch-inner { min-width: 900px; }
  .sch-head { top: 0; }
}
.sch-head .sch-label { z-index: 6; }
.sch-cell.ls-ok { background: var(--ok-bg); color: var(--ok); } .sch-cell.ls-under { background: var(--warn-bg); color: var(--warn); } .sch-cell.ls-over { background: var(--bad-bg); color: var(--bad); }
.sch-cell.closed-cell { color: var(--muted); }
.need-row .sch-label { color: var(--muted); font-weight: 400; font-size: 12px; }
.need-row .sch-cell span { font-size: 12px; color: var(--muted); }
.palette { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pal { width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); cursor: pointer; padding: 0; }
.pal:hover { transform: scale(1.15); }
.pal.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--ink); }
.setup-dept-head { flex-wrap: wrap; }
.date-box { width: auto; min-width: 160px; padding: 8px 12px; font-weight: 500; }
.edit-sales { font-size: 14px; font-weight: 500; vertical-align: middle; }
.goal-line { display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; }
.goal-line .goal-input { font-size: 16px; width: 4.2ch; font-weight: 700; }
.goal-chip { display: inline-flex; align-items: baseline; gap: 2px; font-size: var(--fs-sm); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.goal-input.sm { font-size: 15px; width: 4.2ch; font-weight: 700; }
.sales-cell { font-weight: 700; color: var(--ink); text-decoration: underline dotted; }
.hours-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.avail-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.avail-two > div { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; display: grid; gap: 8px; }
.avail-two .avail-day { grid-template-columns: 38px minmax(120px, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.avail-two .input { padding: 7px 8px; min-width: 0; }
.avail-two .pref-toggle { min-width: 0; }
.avail-col-head { display: flex; gap: 8px; align-items: center; margin-bottom: 2px; }
.sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.sw-av, .av-on { background: var(--p-sage); } .sw-pref, .av-pref { background: var(--p-green); }
.pref-toggle { display: flex; gap: 6px; align-items: center; font-weight: 400; font-size: var(--fs-sm); }
.avail-viz { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px 10px; background: var(--surface-2); }
.av-scale, .av-line { display: grid; grid-template-columns: 44px 1fr; align-items: center; }
.av-scale > div { position: relative; height: 18px; }
.av-scale i { position: absolute; transform: translateX(-50%); font-style: normal; font-size: 11px; color: var(--muted); }
.av-line > span { font-size: 12px; font-weight: 700; color: var(--ink-2); }
.av-track { position: relative; height: 18px; background: var(--surface); border-radius: 4px; margin: 3px 0; overflow: hidden; }
.av-seg { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.av-pref { top: 4px; bottom: 4px; }
.av-none { position: absolute; inset: 0; display: flex; align-items: center; padding-left: 8px; font-size: 11px; color: var(--muted); }
.impact { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding: 8px 10px; background: var(--surface-2); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.to-cal .day { min-height: 96px; }
.to-cal .day.blackout { background: repeating-linear-gradient(135deg, var(--bad-bg) 0 8px, var(--surface) 8px 14px); }
.bo-label { display: block; font-size: 11px; font-weight: 700; color: var(--bad); margin-bottom: 2px; }
.bo-label svg { width: 11px; height: 11px; }
.to-chip { display: block; font-size: 12px; border-radius: 4px; padding: 1px 6px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-chip.approved { background: var(--info-bg); color: var(--info); } .to-chip.pending { background: var(--warn-bg); color: var(--warn); }
.reports-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5); align-items: start; }
.report-nav { display: flex; flex-direction: column; padding: 8px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; }
.report-nav button { text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; }
.report-nav button small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.report-nav button.on { background: var(--info-bg); }
.report-nav button.on b { color: var(--brand); }
.av-table td, .av-table th { text-align: center; }
.av-table td:first-child, .av-table th:first-child { text-align: left; }
.av-cell { width: 100%; min-width: 86px; border: 0; border-radius: 8px; padding: 8px 6px; cursor: pointer; font: inherit; display: flex; flex-direction: column; align-items: center; }
.av-cell b { font-size: 22px; line-height: 1.1; } .av-cell small { font-size: 11px; opacity: .85; }
.av-cell.on { outline: 3px solid var(--ink); }
.job-filter.inline { padding: 0 20px; }
.job-filter.inline .card-body { padding: 0 0 8px; }
.pub-depts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.pub-dept { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--radius-sm); font-weight: 400; cursor: pointer; }
.pub-dept small { display: block; color: var(--muted); font-size: 12px; }
@media (max-width: 860px) { .avail-two, .reports-layout { grid-template-columns: minmax(0, 1fr); } .report-nav { position: static; flex-direction: row; overflow-x: auto; } .report-nav button small { display: none; } .hours-trio { grid-template-columns: 1fr; } }
.lp-info { background: var(--info-bg); color: var(--info); }
.lp-over { background: #fde7d9; color: #9a3a0c; }   /* palette orange tint — over preferred */
.sched-access { display: grid; gap: 10px; }
.sa-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sa-row > b { min-width: 160px; }
.my-shift .dateblock { flex-shrink: 0; }
/* ---------- Position chart ---------- */
:root { --pc-row: 46px; }
.pc-toolbar { align-items: center; }
.pc-time { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; }
.pc-time input[type=range] { flex: 1; accent-color: var(--brand); }
.pc-time b { min-width: 52px; font-size: 18px; }
.pc-summary { display: flex; align-items: center; gap: 24px; padding: 14px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.pc-stat b { font-size: 30px; display: block; line-height: 1.1; }
.pc-stat span { font-size: 13px; color: var(--muted); }
.pc-dots { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 200px; }
.pc-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--line-strong); display: inline-block; }
.pc-dot.on { background: var(--brand); } .pc-dot.gap { background: var(--bad); }
.pc-legend { display: flex; gap: 12px; font-size: 12px; color: var(--ink-2); flex-wrap: wrap; }
.pc-legend span { display: flex; gap: 4px; align-items: center; }
.pc-sugg { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 12px 20px; margin-bottom: 16px; background: var(--info-bg); color: var(--info); }
.pc-sugg-item { display: flex; gap: 8px; align-items: center; background: var(--surface); border-radius: 999px; padding: 4px 6px 4px 14px; color: var(--ink); }
.pc-wrap { overflow-x: auto; }
.pc-canvas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; position: relative; }
.pc-zone { border-radius: 12px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 30%, var(--surface)); padding: 8px 12px; z-index: 0; position: relative; }
.pc-zone > span { font-weight: 700; color: var(--c); font-size: 18px; }
.pc-box { z-index: 1; position: relative; background: var(--surface); border-radius: 10px; border: 1.5px solid var(--line-strong); display: flex; flex-direction: column; overflow: hidden; box-shadow: var(--shadow); }
.pc-head { background: var(--c); color: #fff; display: flex; gap: 8px; align-items: center; padding: 6px 10px; font-weight: 700; font-size: 15px; }
.pc-head svg { width: 14px; height: 14px; }
.pc-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-rank { background: rgba(255,255,255,.25); border-radius: 999px; font-size: 11px; padding: 1px 7px; flex-shrink: 0; }
.pc-body { padding: 6px 8px; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.pc-body.multi { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); align-content: start; }
.pc-body.multi .pc-empty, .pc-body.multi .pc-next { grid-column: 1 / -1; }
.pc-person { background: var(--surface-2); border-left: 4px solid var(--c); border-radius: 6px; padding: 3px 8px; line-height: 1.25; }
.pc-person[draggable] { cursor: grab; }
.pc-person.dragging { opacity: .4; }
.pc-person b { display: block; font-size: 15px; }
.pc-person span { font-size: 12px; color: var(--ink-2); }
.pc-person.leaving { border-left-color: var(--warn); background: var(--warn-bg); }
.pc-person.moved b::after { content: ' ⇄'; color: var(--muted); font-weight: 400; }
.pc-empty { color: var(--bad); font-weight: 700; font-size: 13px; }
.pc-empty.idle { color: var(--muted); font-weight: 400; }
.pc-next { font-size: 12px; color: var(--info); }
.pc-box.gap { border: 2px dashed var(--bad); }
.pc-box.gap .pc-head { background: var(--bad); }
.pc-box.idle { opacity: .55; }
.pc-box.idle .pc-head { background: var(--p-slate); }
.pc-box.drop { outline: 3px solid var(--aqua); outline-offset: 2px; }
.pc-off { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-edit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.pc-canvas.editing { padding: 8px; border: 2px dashed var(--line-strong); border-radius: 12px; background: var(--surface); }
.pc-canvas.editing [data-id] { cursor: move; touch-action: none; user-select: none; }
.pc-resize { position: absolute; right: 3px; bottom: 3px; width: 14px; height: 14px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, var(--ink-2) 50%); border-radius: 2px; z-index: 3; }
.pc-zone.sel, .pc-box.sel { outline: 3px solid var(--action); outline-offset: 2px; }
.pc-side { display: grid; gap: 16px; position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow-y: auto; padding-bottom: 8px; }
.side-toggle button { font-weight: 700; }
.side-tag { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .04em; border-radius: 4px; padding: 1px 5px; margin-right: 6px; color: #fff; vertical-align: middle; }
.side-tag.FOH { background: var(--action); } .side-tag.BOH { background: var(--sun); }
.sch-bar.training { background-image: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 6px, transparent 6px 12px); }
.sch-bar.training svg { width: 13px; height: 13px; }
.training-box { margin-top: 12px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.skills-grid .skill-row { display: grid; grid-template-columns: 1fr 120px; gap: 8px; align-items: center; }
.skills-grid .skill-row .input { padding: 4px 8px; }
.pc-skill { margin-left: auto; display: inline-flex; align-items: center; }
.pc-skill svg { width: 15px; height: 15px; fill: #fff; }
.pc-skill.learn { font-size: 10px; background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 7px; }
.pc-trainee { font-size: 12px; background: var(--info-bg); color: var(--info); border-radius: 6px; padding: 3px 8px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.pc-trainee svg { width: 13px; height: 13px; }
.pc-box.has-trainee { box-shadow: 0 0 0 2px var(--p-sky), var(--shadow); }
.pc-why { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--ink-2); }
.pc-why li { margin: 1px 0; }
.pc-sugg { flex-direction: column; align-items: stretch; }
.pc-sugg-title { display: flex; gap: 8px; align-items: center; }
.pc-sugg-item { border-radius: var(--radius-sm); padding: 10px 12px; justify-content: space-between; }
.pc-canvas.blueprint { background-image: radial-gradient(circle, var(--line-strong) 1px, transparent 1.4px); background-size: 24px 24px; border-radius: 12px; padding: 4px; }
.pc-windows { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; }
.pc-win { display: inline-flex; gap: 4px; align-items: center; }
.pc-win .input { width: auto; padding: 5px 8px; }
.pc-ghost { border: 2px dashed var(--action); border-radius: 10px; display: grid; place-items: center; color: var(--action); font-weight: 700; z-index: 2; background: var(--bad-bg); }
.pc-newpos { display: flex; gap: 6px; }
.ok-num { color: var(--ok); }
/* The same easy-to-read tag in light and dark mode: light orchid with dark text. */
/* Someone covering more than one spot: 2x, 3x on each of their cards */
.pc-multi { display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--brand, #034d63); color: #fff; font-size: 12px; font-weight: 800; line-height: 1; vertical-align: 1px; margin-right: 2px; }
.pc-person .pc-multi, .pc-legend-row .pc-multi { color: #fff; }
.pc-person.also { border-style: dashed; }
.minor-tag { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 6px; background: #c58bb4; color: #1a1020; font-size: 12px; font-weight: 800; line-height: 1; vertical-align: 1px; margin-left: 4px; box-shadow: none; }
:root[data-mode="dark"] .minor-tag { background: #c58bb4; color: #1a1020; box-shadow: none; }
.my-shift-link { border: 0; background: none; padding: 0; font: inherit; text-align: left; cursor: pointer; color: inherit; display: flex; gap: 12px; align-items: center; flex: 1; min-width: 0; }
.co-list { display: flex; gap: 6px; flex-wrap: wrap; }
.my-shift-link:hover .row-title { text-decoration: underline; color: var(--brand); }
.pc-canvas.blueprint .pc-body { overflow: visible; }
.tab-sep { width: 1px; align-self: stretch; background: var(--line-strong); margin: 8px 6px; }
.sch-bar.callout { background: var(--p-stone) !important; color: var(--ink-2); text-decoration: line-through; box-shadow: none; }
.callout-box { background: var(--bad-bg); }
button.pc-person { border: 0; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border-left: 4px solid var(--c); display: block; }
button.pc-person[draggable] { cursor: grab; }
.pc-person .ace svg { width: 13px; height: 13px; color: var(--p-gold); fill: var(--p-gold); vertical-align: -2px; }
.learn { font-size: 10px; font-weight: 700; background: var(--warn-bg); color: var(--warn); border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.pc-tag { margin-left: auto; font-size: 10px; background: rgba(255,255,255,.25); border-radius: 999px; padding: 1px 7px; display: inline-flex; gap: 3px; align-items: center; white-space: nowrap; }
.pc-tag + .pc-tag { margin-left: 4px; }
.pc-tag svg { width: 11px; height: 11px; }
button.pc-trainee { border: 1.5px dashed var(--info); width: 100%; text-align: left; font: inherit; cursor: pointer; }
.pc-box.has-trainee { border-color: var(--info); }
.brk { display: inline-flex; gap: 3px; align-items: center; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-top: 2px; }
.brk svg { width: 11px; height: 11px; }
.brk.soon, .brk.later { background: var(--warn-bg); color: var(--warn); } .brk.overdue { background: var(--bad-bg); color: var(--bad); } .brk.done { background: var(--ok-bg); color: var(--ok); } .brk.on { background: var(--info-bg); color: var(--info); }
.pc-legend-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 12px; color: var(--ink-2); margin: -6px 0 14px; }
.pc-legend-row > span { display: inline-flex; gap: 4px; align-items: center; }
.pc-legend-row svg { width: 13px; height: 13px; }
.pc-legend-row > span:first-child svg { color: var(--p-gold); fill: var(--p-gold); }
/* Phones: the Play Chart as a list you scroll down, one area at a time, two spots across */
.pc-canvas.pc-stack { display: block; min-width: 0 !important; }
.pc-zsec { margin-bottom: 12px; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--c) 7%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--c) 30%, var(--surface)); }
.pc-zsec h3 { margin: 0 4px 8px; font-size: 17px; color: var(--c); }
:root[data-mode="dark"] .pc-zsec h3 { color: var(--ink-2); }
.pc-zgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pc-stack .pc-box { grid-column: auto !important; grid-row: auto !important; }
.pc-stack .pc-box:has(.pc-body.multi) { grid-column: 1 / -1 !important; }
.pc-stack .pc-body { overflow: visible; }
.pc-stack .pc-person b { font-size: 15px; }
.pc-live.with-panel { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.pc-panel { position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden; }
.tp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tp-tabs { display: flex; gap: 2px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tp-tabs button { border: 0; background: none; font: inherit; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); padding: 6px 10px; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }
.tp-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.tp-tabs .count { background: var(--action); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; line-height: 17px; }
.pc-panel .cl-quick .row { padding: 10px 12px; }
.pc-acts { display: grid; gap: 8px; }
.pc-person[aria-disabled="true"] { cursor: default; }
.pc-act { justify-content: flex-start; width: 100%; }
[data-hold-pid] { -webkit-touch-callout: none; user-select: none; }
.tp-hint { padding: 8px 12px 0; margin: 0; font-size: 12px; }
.tp-body { overflow-y: auto; padding: 4px 8px 12px; flex: 1; }
.tp-body.drop { outline: 3px dashed var(--aqua); outline-offset: -4px; }
.tp-group { font-size: 12px; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; padding: 10px 4px 4px; }
.tp-empty { font-size: 12px; color: var(--muted); border: 1.5px dashed var(--line-strong); border-radius: 8px; padding: 10px; text-align: center; }
.tp-row { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name btn" "meta btn"; gap: 0 8px; align-items: center; padding: 6px 6px; border-radius: 8px; border-bottom: 1px solid var(--line); }
.tp-row[draggable] { cursor: grab; }
.tp-row:hover { background: var(--surface-2); }
.tp-name { grid-area: name; border: 0; background: none; padding: 0; font: inherit; font-weight: 700; text-align: left; cursor: pointer; color: var(--ink); }
.tp-time { grid-area: meta; font-size: 12px; color: var(--muted); }
.tp-status { grid-column: 1 / -1; font-size: 12px; color: var(--ink-2); display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.tp-status svg { width: 12px; height: 12px; }
.tp-row .btn { grid-area: btn; }
.tp-row.out .tp-name, .tp-row.out .tp-time { text-decoration: line-through; color: var(--muted); }
.tp-log { font-size: 13px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.why-list { margin: 0; padding-left: 18px; } .why-list li { margin: 3px 0; }
@media (max-width: 1100px) { .pc-live.with-panel { grid-template-columns: minmax(0, 1fr); } .pc-panel { position: static; max-height: none; } }
.pc-order { max-height: 420px; overflow: auto; padding: 0 16px 12px; }
.pc-order-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.pc-order-row.sel { background: var(--info-bg); }
.pc-order-row .pc-rank { background: var(--c); color: #fff; }
.pc-order-btns { margin-left: auto; display: flex; }
.pc-order-btns .icon-btn { width: 28px; height: 28px; }
body.kiosk .sidebar, body.kiosk .topbar, body.kiosk .demo-banner, body.kiosk .footer { display: none !important; }
body.kiosk .shell { margin-left: 0 !important; }
body.kiosk main { padding: 12px 16px; max-width: none; }
.kiosk-bar { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; font-size: 18px; }
.kiosk-bar button { margin-left: auto; }
@media (max-width: 860px) { .pc-edit-layout { grid-template-columns: minmax(0, 1fr); } .pc-canvas { min-width: 760px; } .pc-side { position: static; } }
.board-legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 14px 20px 0; font-size: var(--fs-sm); }
.legend-mini { display: flex; gap: 4px; align-items: center; font-size: 11px; font-weight: 400; color: var(--ink-2); flex-wrap: wrap; }
.legend-mini i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: 4px; }
.legend-mini .ls-ok { background: var(--ok); } .legend-mini .ls-under { background: var(--warn); } .legend-mini .ls-over { background: var(--bad); }
.sch-bar.copying { opacity: .7; outline: 2px dashed #fff; }
.sch-track.drop-target { outline: 2px dashed var(--action); outline-offset: -2px; background: var(--info-bg); }
.sch-menu { position: fixed; z-index: 1000; min-width: 220px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 1px; }
.sch-menu button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-sm); text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.sch-menu button:hover, .sch-menu button:focus-visible { background: var(--surface-2); }
.sch-menu button span { flex: 1; }
.sch-menu button.danger { color: var(--bad); }
.sch-menu kbd { font: inherit; font-size: 11px; color: var(--muted); }
.sch-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; }
.sch-menu svg { width: 16px; height: 16px; flex: none; }
.count-pill { background: var(--action); color: #fff; border-radius: 999px; font-size: 11px; padding: 1px 7px; margin-left: 2px; }
.roster-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--s5); align-items: start; }
.roster-part { padding: 10px 20px 4px; font-weight: 700; color: var(--brand); font-size: var(--fs-sm); background: var(--surface-2); }
.roster-row { width: 100%; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); }
/* Working Now: a bar per person that fills as their shift goes by; the time left sits on the right */
.now-row { align-items: center; gap: 14px; }
.now-bar { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--aqua) 18%, transparent); margin-top: 8px; overflow: hidden; }
.now-bar span { display: block; height: 100%; border-radius: inherit; background: var(--aqua); transition: width .4s ease; }
.now-left { display: grid; justify-items: end; line-height: 1.15; min-width: 64px; }
.now-left b { font-size: 17px; font-variant-numeric: tabular-nums; }
.now-left span { font-size: 12px; color: var(--muted); }
.now-left.ending b { color: var(--action); }
.roster-time { min-width: 110px; font-weight: 700; font-variant-numeric: tabular-nums; }
.job-filter { margin-bottom: var(--s4); }
.job-filter > .card-body { padding-top: var(--s4); }
.job-filter-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: var(--s3); font-size: var(--fs-sm); }
.job-filter-title .hint { font-size: var(--fs-xs); }
.job-filter.inline .job-filter-title { margin-bottom: 8px; }
.jf-dept { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.jf-dept b { min-width: 110px; font-size: var(--fs-sm); }
.jf-chip { border: 1.5px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.jf-chip.on { background: var(--c); border-color: var(--c); color: #fff; }
.av.pref { background: var(--ok); color: #fff; }
.staff-card.inactive { opacity: .65; }
.dept-dot { width: 22px; height: 22px; border-radius: 50%; display: inline-block; }
.dept-name { font-size: var(--fs-md); color: var(--c); }
.hex-input { width: 100px !important; font-family: ui-monospace, Consolas, monospace; font-weight: 400 !important; }
.job-edit label { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; }
.confirm-dlg { border: 0; border-radius: var(--radius-lg); padding: 0; box-shadow: var(--shadow-lg); width: min(460px, calc(100% - 32px)); }
.confirm-dlg::backdrop { background: rgba(16, 24, 32, .45); }
@media (max-width: 860px) { .roster-grid { grid-template-columns: minmax(0, 1fr); } .sch-scroll { max-height: calc(100vh - 120px); } }
.sch-inner { padding: var(--s4) var(--s4) 0; }
.sch-label { width: 170px; flex-shrink: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--ink); padding-right: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: sticky; left: 0; background: var(--surface); z-index: 2; align-self: stretch; display: flex; align-items: center; }
.sch-scale, .sch-crow, .sch-row, .sch-dept { display: flex; }
.sch-hours { position: relative; flex: 1; height: 26px; }
.sch-hours span { position: absolute; transform: translateX(-50%); font-size: 12px; color: var(--ink-2); white-space: nowrap; top: 4px; }
.sch-counts { border-top: 1px solid var(--line); border-bottom: 2px solid var(--line-strong); padding: 6px 0; margin-bottom: 4px; }
.sch-crow { height: 30px; }
.sch-cells { flex: 1; display: grid; grid-template-columns: repeat(18, 1fr); gap: 2px; }
.sch-cell { position: relative; border-radius: 4px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 13px; overflow: hidden; }
.sch-cell::before { content: ''; position: absolute; inset: 0; background: var(--c); opacity: calc(var(--a) * .28); }
.sch-cell b { position: relative; font-weight: 700; }
.sch-cell small { position: relative; color: var(--bad); font-weight: 700; font-size: 11px; }
.sch-dept { margin-top: 10px; align-items: center; border-left: 4px solid var(--c); background: var(--surface-2); border-radius: 0 6px 6px 0; }
.sch-dept .sch-label { background: var(--surface-2); padding: 6px 12px; font-weight: 700; color: var(--c); }
.sch-dept-meta { font-size: 12px; color: var(--muted); }
.sch-row { border-bottom: 1px solid var(--line); }
.sch-row .sch-label { color: var(--ink-2); font-weight: 400; padding-left: 16px; }
.sch-track { position: relative; flex: 1; min-height: 42px; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px); background-size: calc(100% / 18) 100%; }
.sch-track.editable { cursor: crosshair; touch-action: none; }
.sch-closed { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, rgba(0,0,0,.035) 0 6px, transparent 6px 12px); pointer-events: none; }
.sch-bar { position: absolute; height: 30px; border-radius: 6px; background: var(--c); color: #fff; font-size: 12px; display: flex; align-items: center; gap: 6px; padding: 0 8px; overflow: hidden; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 2px rgba(0,0,0,.15); user-select: none; }
.sch-track.editable .sch-bar { cursor: grab; }
.sch-track.editable .sch-bar::before, .sch-track.editable .sch-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.sch-track.editable .sch-bar::before { left: 0; } .sch-track.editable .sch-bar::after { right: 0; }
.sch-bar-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sch-bar-time { opacity: .9; }
.sch-bar.open { background: var(--surface); color: var(--bad); border: 2px dashed var(--bad); box-shadow: none; }
.sch-bar.open svg { width: 13px; height: 13px; }
.sch-bar.ghost { background: transparent; border: 2px dashed var(--c); color: var(--ink); justify-content: center; font-weight: 700; pointer-events: none; }
.sch-warn { width: 100%; border: 0; background: none; text-align: left; border-bottom: 1px solid var(--line); }
.sch-h { font-size: var(--fs-md); margin: var(--s5) 0 var(--s2); display: flex; gap: 8px; align-items: center; }
.sch-dlg { width: min(680px, 100%); }
.cand { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; }
.cand.current { border-color: var(--ok); background: var(--ok-bg); }
.cand.blocked { opacity: .78; }
.cand-main { flex: 1; min-width: 0; }
.cand-why { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cand-why .chip { font-size: 12px; }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.sch-more summary { margin: 8px 0; cursor: pointer; }
table.sch-week td { vertical-align: top; min-width: 120px; }
table.sch-week .open-row td { background: var(--warn-bg); }
table.sch-week .total-row td { background: var(--surface-2); }
.sch-chip { display: block; width: 100%; text-align: left; border: 0; border-left: 4px solid var(--c); background: var(--surface-2); border-radius: 4px; padding: 4px 8px; margin-bottom: 4px; font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.sch-chip small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.staff-card { text-align: left; border: 0; padding: var(--s5); cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 8px; }
.staff-card h3 { font-size: var(--fs-lg); margin: 0; }
.avail-row { display: flex; gap: 4px; }
.av { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--ok-bg); color: var(--ok); }
.av.off { background: var(--surface-2); color: var(--muted); text-decoration: line-through; }
.train-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.train-grid fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; margin: 0; }
.train-grid legend { font-weight: 700; font-size: var(--fs-sm); padding: 0 4px; }
.train-grid label { display: flex; gap: 8px; align-items: center; padding: 3px 0; font-weight: 400; font-size: var(--fs-sm); }
.avail-grid { display: grid; gap: 8px; }
.avail-day { display: grid; grid-template-columns: 110px 170px 1fr 1fr; gap: 8px; align-items: center; }
.sch-setup { display: grid; gap: 14px; }
.setup-dept { border-left: 4px solid var(--c); padding: 8px 0 8px 14px; }
.setup-dept-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.setup-dept-head input[type=color] { width: 40px; height: 36px; border: 0; background: none; padding: 0; }
.setup-dept-head .input { max-width: 260px; font-weight: 700; }
.setup-jobs { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chip-input { border: 0; background: transparent; font: inherit; width: 140px; color: inherit; }
@media (max-width: 520px) { .avail-day { grid-template-columns: 1fr 1fr; } .avail-day span { display: none; } }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .counts, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count-cell:nth-child(3) { border-left: 0; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w) !important; transition: transform .2s; }
  body.nav-open .sidebar { transform: none; }
  body.nav-collapsed .sidebar .label, body.nav-collapsed .sidebar .brand-text, body.nav-collapsed .store-text, body.nav-collapsed .who { display: initial; }
  .collapse-btn { display: none; }
  .shell, body.nav-collapsed .shell { margin-left: 0; }
  .topbar { padding: 0 var(--s4); }
  .topbar .menu-btn { display: grid; }
  .search-box { width: auto; flex: 1; }
  .topbar .place .label { display: none; }
  main { padding: var(--s5) var(--s4) var(--s7); }
  .demo-banner { padding: 8px var(--s4); }
  .dash, .grid-2, .grid-3, .quick { grid-template-columns: minmax(0, 1fr); }
  .dash > * { grid-column: 1 / -1; }
  .dash.packed { grid-auto-rows: auto; row-gap: var(--s5); }
  .store-switch select { max-width: 48vw; }
  .page-head h1 { font-size: var(--fs-xl); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .board { grid-template-columns: repeat(4, minmax(240px, 1fr)); }
  .cal .day { min-height: 74px; padding: 3px; }
  .cal .ev { font-size: 11px; padding: 1px 3px; }
  .tool { padding: var(--s5) var(--s4); gap: var(--s4); }
  .tool h3 { font-size: 20px; }
  .donut-legend { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .counts, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .count-cell { border-left: 0; border-top: 1px solid var(--line); }
  .count-cell:first-child { border-top: 0; }
  .quick button { justify-content: flex-start; padding: 16px; font-size: var(--fs-md); }
  .row { padding: 12px var(--s4); flex-wrap: wrap; }
  .card-head, .chart-toolbar, .legend { padding-left: var(--s4); padding-right: var(--s4); }
  .card-body, .chart-wrap { padding-left: var(--s4); padding-right: var(--s4); }
  .kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kv dd { margin-bottom: 8px; }
  .hbar { grid-template-columns: minmax(0, 1fr) auto; }
  .hbar .bar-wrap { grid-column: 1 / -1; order: 3; }
  .date-pill { min-width: 0; flex: 1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- Name search (people pickers) ---------- */
.pp { position: relative; font-weight: 400; color: var(--ink); }
.pp-box { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 44px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--surface); cursor: text; }
.pp-box:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.pp-q { flex: 1; min-width: 120px; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: 4px 2px; }
.pp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 2px; font-size: var(--fs-sm); }
.pp-chip .avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.pp:not(.multi) .pp-chip { padding-right: 10px; }
.pp-x { border: 0; background: none; color: var(--muted); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; padding: 0; }
.pp-x:hover { background: var(--line); color: var(--ink); }
.pp-x svg { width: 14px; height: 14px; }
.pp-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); max-height: 300px; overflow-y: auto; padding: 4px; }
.pp-opt { display: flex; gap: 10px; align-items: center; width: 100%; border: 0; background: none; text-align: left; padding: 8px 10px; border-radius: 8px; font: inherit; color: var(--ink); cursor: pointer; }
.pp-opt.on, .pp-opt:hover { background: var(--surface-2); }
.pp-opt b { display: block; font-weight: 500; }
.pp-opt small { display: block; color: var(--muted); font-size: 12px; }
.pp-none { padding: 10px 12px; color: var(--muted); font-size: var(--fs-sm); }
.who-cell { display: inline-flex; align-items: center; gap: 8px; }
.row-meta .who-cell .avatar.sm, .proj-stats .who-cell .avatar.sm { width: 22px; height: 22px; font-size: 9px; }
.kv .avatars { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.private-box { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 12px 14px; background: var(--surface-2); }
.form-grid { align-items: start; }

/* ---------- Performance: details for a clicked point ---------- */
.chart-hit { cursor: pointer; outline: none; }
.chart-hit:hover, .chart-hit:focus { fill: color-mix(in srgb, var(--brand) 7%, transparent); }
.chart-tip { padding: 0 var(--s5); margin: -8px 0 var(--s4); }
.fc-detail { margin: -6px var(--s5) var(--s5); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-2); }
.fc-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 17px; }
.fc-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 24px; margin: 0; }
.fc-rows dt { color: var(--ink-2); font-size: var(--fs-sm); display: flex; align-items: center; gap: 6px; }
.fc-rows dd { margin: 2px 0 0; font-size: 20px; font-weight: 500; }
.fc-rows dd .hint { font-size: 13px; font-weight: 400; }
.fc-key { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.fc-key.action { background: var(--action); } .fc-key.ok { background: var(--ok); } .fc-key.aqua { background: var(--aqua); } .fc-key.ly { background: var(--series-ly); } .fc-key.ly2 { background: var(--series-ly2); }

/* ---------- Play Chart: rotation & weather ---------- */
.rot { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; margin-top: 3px; background: var(--surface-2); color: var(--ink-2); width: fit-content; }
.rot svg { width: 12px; height: 12px; }
.rot.soon { background: var(--warn-bg); color: var(--warn); }
.rot.due { background: var(--bad-bg); color: var(--bad); animation: rotPulse 1.6s ease-in-out infinite; }
@keyframes rotPulse { 50% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { .rot.due { animation: none; } }
.weather-pill { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--line); }
.weather-pill.hot { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.weather-pill.cold, .weather-pill.rain { background: var(--info-bg); color: var(--info); border-color: transparent; }
.heat-risk { font-weight: 600; }
.heat-risk.high, .heat-risk.extreme { color: var(--bad); }
.weather-pill select { border: 1px solid currentColor; background: var(--surface); color: var(--ink); border-radius: 999px; padding: 2px 6px; font: inherit; font-size: 13px; }
.rot-sugg { background: var(--bad-bg); color: var(--bad); border: 1.5px solid var(--bad); border-left-width: 6px; }
.rot-sugg .pc-sugg-title { color: var(--bad); font-size: 17px; }
.rot-sugg .pc-sugg-title .n { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 8px; font-size: 13px; margin-left: 4px; }
.rot-sugg .pc-sugg-item { border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.rot-sugg .btn-primary { background: var(--bad); }
.rot-sugg .rot-alone { color: var(--bad); }
.rot-sugg .rot-alone .link { color: var(--bad); text-decoration: underline; }
.pos-flags { display: inline-flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.rot-grid { display: grid; grid-template-columns: auto auto auto; justify-content: start; gap: 8px 12px; align-items: center; font-size: var(--fs-sm); }
.rot-grid b { font-size: 12px; color: var(--muted); font-weight: 500; }
.inline-num { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--ink-2); }
.inline-num .input, .rot-grid .input { width: 66px; padding: 6px 8px; }
.rot-w { display: inline-flex; gap: 4px; align-items: center; font-weight: 500; }
.rot-w svg { width: 16px; height: 16px; }
.pc-order-row:has(.pos-flags) { flex-wrap: wrap; }
.pos-flags { flex-basis: 100%; order: 3; margin: 0 0 4px 24px; gap: 12px; }
.pos-flags label { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }

/* ---------- Moolah ---------- */
.moolah { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--ok); background: var(--ok-bg); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); border-radius: 999px; padding: 1px 8px 1px 5px; white-space: nowrap; }
.moolah svg { width: 15px; height: 15px; }
.moolah.big-m { font-size: 15px; padding: 2px 10px 2px 8px; margin-left: 6px; }
.moolah-list { display: flex; flex-direction: column; gap: 6px; }
.moolah-row { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; font-size: var(--fs-sm); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.moolah-row:last-child { border-bottom: 0; }
.moolah-give { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.moolah-give .input:first-child { width: 130px; }
.moolah-give .input:nth-child(2) { flex: 1; min-width: 180px; }

/* ---------- Dark mode touch-ups ---------- */
:root[data-mode="dark"] .check:checked { background: #2f8aa6; border-color: #2f8aa6; }
:root[data-mode="dark"] .lp-over { background: #3a2414; color: #ffb07a; }
:root[data-mode="dark"] dialog::backdrop { background: rgba(0, 0, 0, .6); }
:root[data-mode="dark"] .input, :root[data-mode="dark"] select.input, :root[data-mode="dark"] textarea.input { color: var(--ink); }
:root[data-mode="dark"] .pc-zone span { color: var(--ink-2); }
:root[data-mode="dark"] input[type=date]::-webkit-calendar-picker-indicator, :root[data-mode="dark"] input[type=time]::-webkit-calendar-picker-indicator { filter: invert(.85); }.rot-alone { margin: 4px 2px 0; }
.rot-sugg .pc-sugg-item > div { min-width: 0; }

/* ---------- My Moolah page ---------- */
.moolah-hero { display: flex; align-items: center; gap: 24px; padding: 24px 28px; margin-bottom: 24px; flex-wrap: wrap; border-left: 6px solid var(--ok); }
.moolah-coin { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--ok-bg); color: var(--ok); }
.moolah-coin svg { width: 44px; height: 44px; }
.moolah-big { font-size: 56px; font-weight: 700; line-height: 1.05; }
.moolah-stats { margin-left: auto; display: flex; gap: 32px; }
.moolah-stats b { display: block; font-size: 28px; }
.moolah-stats span { color: var(--ink-2); font-size: var(--fs-sm); }
.moolah-way { display: flex; gap: 12px; align-items: flex-start; }
.moolah-way .moolah { min-width: 52px; justify-content: center; }.plan-in { width: 72px; padding: 6px 8px; text-align: right; }
.plan-table td { vertical-align: middle; }
.sch-cell.below-min { box-shadow: inset 0 0 0 2px var(--bad); }
.sch-cell.below-min b { color: var(--bad); }
.agenda-row { gap: 12px; }
.agenda-open { flex: 1; min-width: 0; display: flex; gap: 12px; align-items: center; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; padding: 0; }
.agenda-open .row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agenda-row.done .row-title { text-decoration: line-through; color: var(--muted); }
.agenda-done { padding: 10px 20px 14px; border-top: 1px solid var(--line); }
.agenda-done summary { cursor: pointer; }
.topic-flags { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.topic-flags label { display: flex; gap: 8px; align-items: center; }
.agenda-n { width: 22px; color: var(--muted); }
.agenda-preview { display: block; max-width: 640px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); font-size: var(--fs-sm); }
/* Live chart: each box keeps the size it was drawn at; a box that needs more room grows on its own without stretching its neighbors. */
.pc-canvas.blueprint .pc-box { align-self: start; min-height: calc(var(--h, 2) * var(--pc-row) + (var(--h, 2) - 1) * 8px); }
.pc-canvas.blueprint .pc-body { overflow: visible; }
.plan-status { display: flex; gap: 6px; flex-wrap: wrap; }
/* Breakdown Planner: the column headings stay pinned under the top bar while scrolling through the hours. */
.plan-scroll { overflow: visible; }
.plan-table thead th { position: sticky; top: 68px; z-index: 4; background: var(--surface-2); box-shadow: 0 1px 0 var(--line); }
@media (max-width: 760px) { .plan-scroll { overflow-x: auto; } .plan-table thead th { position: static; } }
/* FOH and BOH minimums share one column; compact cells so the whole planner fits in the card */
.plan-pair { display: inline-flex; gap: 6px; justify-content: flex-end; }
.plan-pair-head { margin-left: 6px; vertical-align: middle; }
.plan-pair-head .side-tag { min-width: 50px; text-align: center; }
.plan-table .plan-in { width: 56px; padding: 6px; }
table.data.plan-table th, table.data.plan-table td { padding-left: 10px; padding-right: 10px; }
table.data.plan-table .plan-in { width: 50px; }
.plan-table .labor-pill { padding-left: 8px; padding-right: 8px; }
table.data.plan-table th { white-space: normal; line-height: 1.25; }
.plan-status { flex-wrap: nowrap; gap: 6px; }
.plan-status .labor-pill { white-space: nowrap; }
.plan-hour { white-space: nowrap; min-width: 52px; }
/* Narrow screens only: scroll the table sideways instead of cutting it off */
@media (max-width: 1099px) { .plan-scroll { overflow-x: auto; } .plan-table thead th { position: static; } }
.proj-stats.dotted { gap: 0; }
.proj-stats.dotted > span + span::before { content: '·'; margin: 0 8px; color: var(--muted); font-weight: 700; }

/* ---------- Moola Store ---------- */
.mi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.mi-card { display: flex; gap: 14px; padding: 16px; align-items: flex-start; }
.mi-card.off { opacity: .6; }
.mi-thumb { width: 64px; height: 64px; flex-shrink: 0; border-radius: 14px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; overflow: hidden; }
.mi-thumb svg { width: 32px; height: 32px; }
.mi-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mi-thumb.sm { width: 32px; height: 32px; border-radius: 8px; } .mi-thumb.sm svg { width: 18px; height: 18px; }
.mi-thumb.lg { width: 88px; height: 88px; } .mi-thumb.lg svg { width: 44px; height: 44px; }
.mi-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mi-body h3 { margin: 0; font-size: 17px; }
.mi-top { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mi-price { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mi-left { margin-left: auto; font-size: var(--fs-sm); font-weight: 700; }
.mi-actions { display: flex; gap: 8px; margin-top: 4px; }
.mi-pic-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.meal-card { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 16px; }
.meal-code { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 18px 22px; margin-bottom: 16px; border: 2px solid var(--ok); background: var(--ok-bg); }
.meal-amount { font-size: 34px; font-weight: 700; color: var(--ok); }
.meal-pin { margin-left: auto; font-size: 40px; font-weight: 700; letter-spacing: .2em; background: var(--surface); border-radius: 12px; padding: 6px 18px; }
.bonus-row { display: flex; gap: 8px; align-items: center; }
.bonus-row .input:first-child { flex: 1; } .bonus-row .input[type=number] { width: 100px; }.give-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 22px 24px; margin-bottom: 24px; }
.give-big { font-size: 20px; padding: 16px 32px; border-radius: 14px; }
.give-big svg { width: 24px; height: 24px; }
/* Every form lines up: label, box and note rows are shared across a row of fields (see alignFields in app.js). */
.form-grid > .field.aligned { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 6px; align-content: start; }
.form-grid > .field.aligned > .field-label { align-self: end; }
.form-grid > .field.aligned > .field-after { display: flex; flex-direction: column; gap: 4px; }
.form-grid > .field:not(.aligned) { grid-row: span 3; }

/* Give Moola: recognition categories as picture tiles */
.cat-pick { border: 0; padding: 0; margin: 14px 0 0; }
.cat-pick legend { font-weight: 500; font-size: var(--fs-sm); color: var(--ink-2); margin-bottom: 8px; }
.cat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat-tiles label { cursor: pointer; }
.cat-tiles input { position: absolute; opacity: 0; pointer-events: none; }
.cat-tiles span { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 12px 8px; border: 1.5px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); min-height: 86px; justify-content: center; }
.cat-tiles span svg { width: 26px; height: 26px; color: var(--ok); }
.cat-tiles b { font-size: 13px; font-weight: 500; line-height: 1.2; }
.cat-tiles input:checked + span { border-color: var(--ok); background: var(--ok-bg); box-shadow: 0 0 0 2px var(--ok); }
.cat-tiles input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 520px) { .cat-tiles { grid-template-columns: repeat(2, 1fr); } }
/* Meal code entry */
.meal-entry { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 24px; }
.meal-code-in { width: 110px; font-size: 22px; letter-spacing: .25em; text-align: center; font-weight: 700; }
/* Moola Store cards: buttons sit at the bottom of every card */
.mi-card { align-items: stretch; }
.mi-thumb { align-self: flex-start; }
.mi-actions { margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.mi-actions .btn { white-space: nowrap; }
/* ---------- Team Members list and side panel ---------- */
.tm-head, .tm-row { display: grid; grid-template-columns: 36px minmax(130px, 1.6fr) minmax(120px, 1fr) minmax(120px, 1.2fr) 110px auto 18px; gap: 12px; align-items: center; padding: 10px 20px; }
.tm-head { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); padding-top: 12px; padding-bottom: 12px; }
.tm-head span:last-child { grid-column: span 2; }
.tm-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tm-row:hover { background: var(--surface-2); }
.tm-row:last-child { border-bottom: 0; }
.tm-name { min-width: 0; } .tm-name b { display: block; font-weight: 500; } .tm-name small { display: block; color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-pos { font-size: var(--fs-sm); color: var(--ink-2); }
.tm-hours { font-size: var(--fs-sm); color: var(--ink-2); }
.tm-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 1050px) { .tm-head { display: none; } .tm-row { grid-template-columns: 36px 1fr auto; } .tm-access, .tm-pos, .tm-hours { grid-column: 2; } .tm-badges { grid-column: 3; grid-row: 1; } .tm-row > .chev { display: none; } }
.drawer.wide { width: min(780px, 100%); }
.access-box { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 20px; background: var(--surface-2); }
.access-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.access-actions .hint { margin-right: auto; }
.panel-form .avail-two { gap: 16px; }/* Availability: an easy-to-read week, with editing on request */
.av-scale, .av-line { grid-template-columns: 44px 1fr 150px; gap: 0 10px; }
.av-scale::after { content: ''; }
.av-line { padding: 3px 0; }
.av-track { height: 22px; }
.av-text { display: flex; flex-direction: column; line-height: 1.2; font-size: 13px; } .av-text small { color: var(--ok); font-size: 12px; }
.avail-two { grid-template-columns: 1fr; }
.avail-two .avail-day { grid-template-columns: 52px minmax(150px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr); gap: 10px; }
.avail-two .input { padding: 8px 10px; }
.sch-h { display: flex; align-items: center; gap: 8px; }
.staff-status { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); margin-bottom: 14px; }
.staff-status .hint { flex: 1; min-width: 180px; }
.tm-access { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; } .tm-seen { font-size: 12px; color: var(--muted); }
/* A long role ("Workspace Owner") stays inside its column: it wraps instead of running into the department */
.tm-access .chip { max-width: 100%; white-space: normal; line-height: 1.25; }
.tm-row > * { min-width: 0; }
.pc-canvas-bar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; }
.moolah-row.clickable { cursor: pointer; border-radius: 6px; padding: 6px 4px; } .moolah-row.clickable:hover { background: var(--surface-2); }
.mo-detail { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.mo-amount { font-size: 44px; font-weight: 700; line-height: 1; } .mo-amount small { display: block; font-size: 14px; font-weight: 400; color: var(--ink-2); margin-top: 4px; }
.mo-cat { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-weight: 500; } .mo-cat svg { width: 20px; height: 20px; }
.mo-giver { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
/* Availability blocks (labeled, like ShiftAgent) */
.av-scale, .av-line { grid-template-columns: 34px 1fr; }
.av-track { height: 30px; border-radius: 6px; }
.av-blk { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.av-blk span { overflow: hidden; text-overflow: ellipsis; padding: 0 6px; }
.av-blk.off { background: color-mix(in srgb, var(--bad) 75%, var(--surface)); }
.av-blk.on { background: var(--p-green); }
.av-blk.pref { background: var(--ok); box-shadow: inset 0 0 0 2px color-mix(in srgb, #fff 35%, transparent); }
:root[data-mode="dark"] .av-blk.off { background: #8a2a3a; } :root[data-mode="dark"] .av-blk.pref { background: #1f7a5c; }
.av-line.closed-day .av-none { font-style: italic; }
.av-sum { display: flex; gap: 18px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.av-sum b { display: block; font-size: 22px; line-height: 1.1; } .av-sum small { color: var(--ink-2); font-size: 12px; }
.av-key { border-bottom: 3px solid; padding-bottom: 2px; } .av-key.pref { border-color: var(--ok); } .av-key.on { border-color: var(--p-green); } .av-key.off { border-color: var(--bad); }
.av-sum .hint { margin-left: auto; }
.legal { text-align: center; font-size: 12px; color: var(--muted); padding: 0 var(--s5) var(--s5); }
.auth-legal { color: rgba(255,255,255,.75); margin-top: 16px; max-width: 440px; padding: 0; text-align: center; }

/* ---------------- Ratings ---------------- */
.t-ok { color: var(--ok); } .t-warn { color: var(--warn); } .t-bad { color: var(--bad); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.avatar.xs { width: 22px; height: 22px; font-size: 9px; }
.check-line { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.rt-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin-bottom: var(--s4); }
.rt-kpis .kpi .big { font-size: 32px; margin-top: 4px; }
/* Five numbers share one row on a computer instead of leaving the fifth alone underneath. */
@media (min-width: 1101px) { .rt-kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rt-toolbar select.input { width: auto; min-width: 230px; }
.rt-table th { white-space: nowrap; font-size: 12px; }
.rt-table td { vertical-align: middle; }
.rt-table tr.clickable { cursor: pointer; }
.rt-table tr.clickable:hover td, .rt-table tr.clickable:focus td { background: var(--surface-2); }
.rt-cell { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-cell.t-ok { background: color-mix(in srgb, var(--ok-bg) 70%, transparent); }
.rt-cell.t-warn { background: var(--warn-bg); }
.rt-cell.t-bad { background: var(--bad-bg); }
.rt-raters { display: inline-flex; } .rt-raters .avatar { margin-right: -6px; border: 2px solid var(--surface); }
.rt-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 380px; }
.rt-clock { min-width: 74px; color: var(--ink-2); }

/* Unlock */
.rt-lock-wrap { display: grid; place-items: center; padding: var(--s6) 0; }
.rt-lock { width: min(420px, 100%); padding: 32px 28px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.rt-lock h2 { margin: 4px 0 0; font-size: 24px; }
.rt-lock-icon { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); transition: transform .45s ease, background .45s ease; }
.rt-lock-icon svg { width: 34px; height: 34px; }
.rt-pin-label { font-weight: 700; margin-top: 6px; }
.rt-pin { text-align: center; font-size: 28px; letter-spacing: .25em; font-variant-numeric: tabular-nums; max-width: 260px; padding: 12px; }
.rt-lock .btn { width: 100%; max-width: 260px; justify-content: center; }
.rt-lock #rtLockMsg { color: var(--bad); min-height: 1.2em; margin: 0; }
.rt-demo-pin { background: var(--sample-bg); color: var(--sample-ink); padding: 6px 10px; border-radius: 6px; margin: 0; }
.rt-lock.shake { animation: rtShake .45s; }
.rt-lock.opening .rt-lock-icon { transform: scale(1.15) rotate(-8deg); background: var(--ok-bg); color: var(--ok); }
.rt-lock.opening { animation: rtOut .5s .1s ease-in forwards; }
@keyframes rtShake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes rtOut { to { opacity: 0; transform: scale(.96) translateY(-8px); } }

/* Reveal */
.rt-hero { display: flex; align-items: center; gap: var(--s6); padding: var(--s6); margin-bottom: var(--s5); --tone: var(--ok); }
.rt-hero.tone-top { --tone: #1f8a5b; } .rt-hero.tone-ok { --tone: var(--ok); } .rt-hero.tone-warn { --tone: var(--warn); } .rt-hero.tone-bad { --tone: var(--bad); }
.rt-hero h2 { font-size: 30px; margin: 4px 0 6px; color: var(--tone); }
.rt-hero p { margin: 0 0 10px; color: var(--ink-2); }
.rt-ring { position: relative; width: 170px; height: 170px; flex-shrink: 0; }
.rt-ring.sm { width: 120px; height: 120px; }
.rt-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-ring-bg { fill: none; stroke: var(--line); stroke-width: 10; }
.rt-ring-fg { fill: none; stroke: var(--tone, var(--brand)); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: calc(326.73 * (1 - var(--p))); }
.rt-ring-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rt-ring-num b { font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
.rt-ring.sm .rt-ring-num b { font-size: 28px; }
.rt-ring-num small { color: var(--muted); margin-top: 4px; }
.rt-check-hero { display: flex; align-items: center; gap: var(--s5); padding: var(--s5); grid-column: 1 / -1; margin-bottom: var(--s4); }
.rt-trend { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-size: 14px; }
.rt-trend svg { width: 16px; height: 16px; }
.rt-trend.up { background: var(--ok-bg); color: var(--ok); } .rt-trend.down { background: var(--warn-bg); color: var(--warn); } .rt-trend.same { background: var(--surface-2); color: var(--ink-2); }
.rt-empty-score { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); flex-shrink: 0; }
.rt-grid { align-items: start; }
.rt-cat-list { padding: 4px 0; }
.rt-cat { border-bottom: 1px solid var(--line); }
.rt-cat:last-child { border-bottom: 0; }
.rt-cat summary { display: grid; grid-template-columns: 34px minmax(120px, 1fr) minmax(90px, 1.3fr) 30px; align-items: center; gap: 12px; padding: 14px var(--s5); cursor: pointer; list-style: none; }
.rt-cat summary::-webkit-details-marker { display: none; }
.rt-cat summary:hover { background: var(--surface-2); }
.rt-cat-icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); }
.rt-cat-name { font-weight: 700; }
.rt-has-note svg { width: 14px; height: 14px; color: var(--brand); vertical-align: -2px; }
.rt-bar { height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.rt-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: currentColor; }
.rt-bar i.t-ok { color: var(--ok); } .rt-bar i.t-warn { color: var(--warn); } .rt-bar i.t-bad { color: var(--bad); }
.rt-cat-score { font-size: 20px; text-align: right; font-variant-numeric: tabular-nums; }
.rt-cat-more { padding: 0 var(--s5) 14px 62px; color: var(--ink-2); }
.rt-cat-more ul { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.rt-cat-note { display: flex; gap: 8px; background: var(--info-bg); color: var(--ink); padding: 10px 12px; border-radius: 8px; margin: 0 0 10px; }
.rt-cat-note svg { flex-shrink: 0; color: var(--brand); margin-top: 2px; }
.rt-comments { display: grid; gap: 12px; padding: 4px var(--s5) var(--s5); }
.rt-comment { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--brand); background: var(--surface); }
.rt-comment.k-glow { border-left-color: var(--ok); } .rt-comment.k-grow { border-left-color: var(--warn); } .rt-comment.k-step { border-left-color: var(--brand); }
.rt-comment-kind { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.rt-comment-kind svg { width: 15px; height: 15px; }
.rt-comment p { margin: 8px 0 10px; font-size: 16px; line-height: 1.5; }
.rt-author { display: flex; align-items: center; gap: 8px; }
.rt-author b { display: block; font-size: 14px; } .rt-author small { color: var(--muted); font-size: 12px; }
.avatar.anon { background: var(--surface-2); color: var(--ink-2); } .avatar.anon svg { width: 14px; height: 14px; }
.rt-summary p { line-height: 1.6; margin: 0 0 12px; }
.rt-response { background: var(--surface-2); border-radius: 10px; padding: 12px 14px; }
.rt-spark { width: 100%; height: 64px; margin-bottom: 8px; }
.rt-spark path { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linejoin: round; }
.rt-spark circle { fill: var(--surface); stroke: var(--brand); stroke-width: 2; }
.rt-hist { display: grid; }
.rt-hist-row { display: flex; justify-content: space-between; border: 0; background: none; padding: 9px 8px; border-radius: 8px; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.rt-hist-row:hover { background: var(--surface-2); } .rt-hist-row.on { background: var(--info-bg); font-weight: 700; }
.rt-guide > summary { padding: var(--s4) var(--s5); font-weight: 700; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.rt-scale, .rt-guide-scale { display: grid; gap: 4px; }
.rt-scale > div, .rt-guide-scale > div { display: grid; grid-template-columns: 74px 1fr; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 8px; font-size: 14px; }
.rt-guide-scale > div { grid-template-columns: 74px minmax(140px, .6fr) 1fr; }
.tone-top, .tone-ok { background: var(--ok-bg); } .tone-warn { background: var(--warn-bg); } .tone-bad { background: var(--bad-bg); }
.rt-hero.tone-top, .rt-hero.tone-ok, .rt-hero.tone-warn, .rt-hero.tone-bad { background: var(--surface); }
.rt-guide-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.rt-guide-cat { display: grid; gap: 8px; }
.rt-guide-cat textarea { font-size: 14px; }

/* Editor */
.rt-status { display: inline-flex; border: 1px solid var(--line); margin: 0; }
.rt-status label { padding: 6px 14px; border-radius: 999px; cursor: pointer; font-weight: 500; color: var(--ink-2); }
.rt-status label.on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.rt-status input { position: absolute; opacity: 0; pointer-events: none; }
.rt-status label:has(input:focus-visible) { outline: 2px solid var(--brand); }
.rt-scores-box { border: 0; padding: 0; margin: 14px 0 0; }
.rt-live { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; margin-bottom: 10px; }
.rt-live > span:first-child { font-weight: 700; }
.rt-live b { font-size: 22px; }
.rt-score-grid { display: grid; gap: 6px; }
.rt-score-row { display: grid; grid-template-columns: minmax(170px, 1fr) auto; align-items: center; gap: 12px; padding: 6px 10px; border-radius: 10px; }
.rt-score-row.hl { background: var(--warn-bg); }
.rt-score-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rt-score-name svg { color: var(--brand); }
.rt-pills { display: inline-flex; gap: 6px; }
.rt-pill input { position: absolute; opacity: 0; pointer-events: none; }
.rt-pill span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1.5px solid var(--line); font-weight: 700; cursor: pointer; background: var(--surface); color: var(--ink-2); transition: transform .1s; }
.rt-pill span:hover { border-color: var(--brand); }
.rt-pill input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rt-pill.t-ok input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.rt-pill.t-warn input:checked + span { background: var(--warn); border-color: var(--warn); color: #fff; }
.rt-pill.t-bad input:checked + span { background: var(--bad); border-color: var(--bad); color: #fff; }
.rt-pill input:checked + span { transform: scale(1.06); }
.rt-notes-box { margin-top: 10px; } .rt-notes-box summary { cursor: pointer; color: var(--brand); font-weight: 600; margin-bottom: 8px; }
.rt-raters-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rt-raters-line .chip { display: inline-flex; align-items: center; gap: 6px; }
.rt-other { display: grid; gap: 6px; }
.rt-other-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.rt-ap-cats, .rt-decide { border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; }
.rt-ap-cats legend, .rt-decide legend { font-weight: 700; padding: 0 4px; }
.rt-ap-cats label, .rt-decide label { display: flex; gap: 6px; align-items: center; }
.rt-preview-dlg { width: min(1100px, calc(100% - 24px)); }
.rt-preview-dlg .rt-hero { margin-top: 4px; }

/* Fade-in when the rating unlocks */
.rt-anim .rv { animation: rtIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0s); }
.rt-anim .rt-ring-fg { animation: rtRing 1.4s cubic-bezier(.2, .7, .2, 1) both; }
.rt-anim .rt-hero { animation: rtIn .5s ease-out both; }
.rt-anim .rt-bar i { animation: rtBar 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--d, 0s) + .15s); }
@keyframes rtIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes rtRing { from { stroke-dashoffset: 326.73; } }
@keyframes rtBar { from { width: 0; } }
@media (prefers-reduced-motion: reduce) { .rt-anim .rv, .rt-anim .rt-ring-fg, .rt-anim .rt-bar i, .rt-anim .rt-hero, .rt-lock.shake, .rt-lock.opening { animation: none; } }
@media (max-width: 860px) {
  .rt-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rt-hero { flex-direction: column; text-align: center; }
  .rt-cat summary { grid-template-columns: 30px 1fr 30px; } .rt-cat summary .rt-bar { grid-column: 1 / -1; grid-row: 2; }
  .rt-cat-more { padding-left: var(--s5); }
  .rt-score-row { grid-template-columns: 1fr; }
  .rt-guide-scale > div { grid-template-columns: 60px 1fr; } .rt-guide-scale > div input:last-child { grid-column: 1 / -1; }
  .rt-other-row { grid-template-columns: 1fr; }
}
#rtForm [hidden], #rtForm[hidden], #arForm [hidden] { display: none !important; }
/* Ratings summary cards: title, number and note share rows across all four cards, so numbers line up. */
.rt-kpis { grid-template-rows: auto auto auto; }
.rt-kpis .kpi { display: grid; grid-row: span 3; grid-template-rows: subgrid; align-content: start; row-gap: 6px; }
.rt-kpis .kpi-top { align-items: flex-start; }
.rt-kpis .kpi-top svg { flex-shrink: 0; margin-top: 2px; }
.rt-kpis .kpi .big { align-self: end; }
.rt-dept { width: auto; min-width: 210px; }
.rt-kpis .kpi .big { white-space: nowrap; }
/* Ratings: departments and peer review */
.rt-dept-line { font-size: 12px; color: var(--muted); margin-top: 2px; }
.rt-cross { color: var(--brand); font-weight: 600; }
.rt-hidden { color: var(--muted); font-weight: 500; font-size: 13px; background: repeating-linear-gradient(-45deg, var(--surface-2), var(--surface-2) 6px, transparent 6px, transparent 12px); }
.rt-hidden svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 4px; }
.rt-cell.rt-gap { box-shadow: inset 0 0 0 2px var(--warn); }
.rt-dept-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; background: var(--surface-2); border-radius: 10px; margin-bottom: 14px; }
.rt-dept-pick label { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.rt-dept-pick select.input { width: auto; min-width: 200px; }
.rt-blind { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px dashed var(--line-strong, var(--line)); border-radius: 10px; background: var(--surface-2); }
.rt-blind > svg { width: 22px; height: 22px; color: var(--muted); flex-shrink: 0; margin-top: 2px; }
.rt-raters-inline { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 13px; }
.rt-peer-table th { white-space: nowrap; } .rt-peer-table th .avatar { vertical-align: middle; }
.rt-gap-row td { background: color-mix(in srgb, var(--warn-bg) 60%, transparent); }
.rt-peer-notes { display: grid; gap: 8px; margin-top: 10px; }
.rt-peer-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; background: var(--surface-2); border-radius: 8px; font-size: 14px; }
.rt-guide-cat { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.rt-guide-cat-head { display: grid; grid-template-columns: 1fr 130px; gap: 8px; }
.rt-remove-field { color: var(--bad); justify-self: start; }
/* Rating fields: cards and the icon picker */
.rt-field-card { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.rt-field-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); }
.rt-field-ico svg { width: 22px; height: 22px; }
.rt-field-main b { font-size: 16px; } .rt-field-main ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-2); font-size: 14px; display: grid; gap: 2px; }
.rt-field-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
.rt-icon-pick { border: 0; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.rt-icon-pick legend { font-weight: 600; margin-bottom: 8px; }
.rt-icon-pick label { display: grid; justify-items: center; gap: 4px; cursor: pointer; }
.rt-icon-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rt-icon-pick span { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink-2); transition: transform .1s; }
.rt-icon-pick span svg { width: 24px; height: 24px; }
.rt-icon-pick small { font-size: 12px; color: var(--muted); }
.rt-icon-pick label:hover span { border-color: var(--brand); }
.rt-icon-pick input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; transform: scale(1.06); }
.rt-icon-pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.rpt-search { width: auto; min-width: 220px; flex: 1; }
/* Full screen hides the top bar, so pinned headers sit at the very top instead of below where it was. */
body.kiosk .sch-head, body.kiosk .plan-table thead th { top: 0; }
body.kiosk .report-nav, body.kiosk .pc-side, body.kiosk .pc-panel { top: 12px; }
/* Ratings table: the column headings, clock-in # and name stay pinned while scrolling through the team. */
.rt-scroll { max-height: calc(100vh - 150px); overflow: auto; }
.rt-table thead th { position: sticky; top: 0; z-index: 3; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.rt-table th:nth-child(1), .rt-table td:nth-child(1) { position: sticky; left: 0; z-index: 2; background: var(--surface); }
.rt-table th:nth-child(2), .rt-table td:nth-child(2) { position: sticky; left: var(--rt-c1, 92px); z-index: 2; background: var(--surface); box-shadow: inset -1px 0 0 var(--line); }
.rt-table thead th:nth-child(1), .rt-table thead th:nth-child(2) { z-index: 4; }
.rt-table tr.clickable:hover td:nth-child(1), .rt-table tr.clickable:hover td:nth-child(2) { background: var(--surface-2); }
.rt-table td:nth-child(1), .rt-table th:nth-child(1) { min-width: 92px; width: 92px; }

/* ---------------- Accountability ---------------- */
#docForm [hidden], #recForm [hidden] { display: none !important; }
.ac-meter { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: 6px; }
.ac-meter i { width: 14px; height: 8px; border-radius: 3px; background: var(--line); }
.ac-meter.big i { width: 26px; height: 12px; border-radius: 4px; }
.ac-meter i.on.s1 { background: #e9b949; } .ac-meter i.on.s2 { background: #e38b2c; } .ac-meter i.on.s3 { background: #d4562b; } .ac-meter i.on.s4 { background: var(--bad); }
.ac-attn-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); flex-shrink: 0; }
.ac-attn-ico.warn { background: var(--warn-bg); color: var(--warn); }
.ac-team-head, .ac-team-row { display: grid; grid-template-columns: minmax(180px, 1.4fr) 150px 110px minmax(150px, 1fr) 20px; gap: 12px; align-items: center; padding: 10px var(--s5); }
.ac-team-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.ac-team-row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ac-team-row:hover { background: var(--surface-2); }
.ac-kind { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; background: var(--surface-2); color: var(--ink-2); }
.ac-kind.k-s1 { background: #fbefd2; color: #8a6200; } .ac-kind.k-s2 { background: #fbe1c6; color: #8f4a07; } .ac-kind.k-s3 { background: #f7d3c3; color: #8f2f0e; } .ac-kind.k-s4 { background: var(--bad-bg); color: var(--bad); }
.ac-kind.k-coach { background: var(--info-bg); color: var(--brand); } .ac-kind.k-private { background: var(--surface-2); color: var(--ink); }
.ac-kind svg { width: 16px; height: 16px; }
.ac-void { opacity: .55; } .ac-void .row-title { text-decoration: line-through; }
.ac-person-top { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--surface-2); border-radius: 12px; }
.ac-person-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 12px 0; }
.ac-person-stats div { background: var(--surface-2); border-radius: 10px; padding: 10px; text-align: center; }
.ac-person-stats b { display: block; font-size: 20px; } .ac-person-stats small { color: var(--muted); font-size: 12px; }
.ac-strike-box { margin-top: 12px; }
.ac-strike-pick { display: grid; gap: 8px; }
.ac-step-text { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; margin: 10px 0 0; font-size: 14px; }
.ac-sigs { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.ac-sig { display: grid; gap: 6px; }
.ac-sig-label { font-weight: 600; }
.ac-pad { width: 100%; height: 110px; border: 1.5px dashed var(--line); border-radius: 10px; background: #fff; touch-action: none; cursor: crosshair; }
.ac-sig-foot { display: flex; gap: 8px; } .ac-sig-foot .input { flex: 1; }
.ac-rec-strike { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; }
.ac-signed { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.ac-signed-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; min-height: 84px; align-content: end; }
.ac-signed-box.empty { place-items: center; border-style: dashed; }
.ac-signed-box small { color: var(--muted); border-top: 1px solid var(--line); padding-top: 4px; }
.ac-sig-img { max-height: 54px; max-width: 100%; background: #fff; border-radius: 4px; }
.ac-sig-typed { font-family: 'Brush Script MT', 'Segoe Script', cursive; font-size: 26px; line-height: 1.2; color: var(--ink); }
.ac-rec-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.ac-mine-hero .card-body { text-align: center; padding: 28px; }
.ac-step-row { display: flex; gap: 10px; align-items: flex-start; }
.ac-policy-step { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ac-infractions { display: grid; gap: 12px; }
.ac-inf { border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 6px; }
.ac-todo { align-items: center; } .ac-todo .btn { margin-left: auto; }
@media (max-width: 860px) { .ac-team-head { display: none; } .ac-team-row { grid-template-columns: 1fr auto; } .ac-team-row > span:nth-child(3), .ac-team-row > span:nth-child(4) { display: none; } .ac-person-stats { grid-template-columns: repeat(2, 1fr); } }
/* Date boxes match the height of the other boxes in forms. */
.form-grid input.input[type="date"], .form-grid input.input[type="time"] { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.form-grid .pp-box { min-height: 44px; box-sizing: border-box; }
/* Accountability v2 */
.ac-kind[data-k="coach"] { background: var(--info-bg); color: var(--brand); } .ac-kind[data-k="private"] { background: var(--surface-2); color: var(--ink); }
.ac-auto { font-size: 11px; padding: 1px 8px; vertical-align: 1px; } .ac-auto svg { width: 12px; height: 12px; }
.ac-expired { opacity: .7; }
.ac-appeal-cta { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px; border: 1px dashed var(--line); border-radius: 12px; }
.ac-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ac-files .chip { cursor: pointer; border: 0; font: inherit; }
.ac-decide { margin-top: 12px; padding: 12px; background: var(--surface-2); border-radius: 12px; display: grid; gap: 8px; }
#docLead2Pick { margin-bottom: 12px; }
/* Accountability: documents and the team member reveal */
.ac-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.ac-file { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); overflow: hidden; }
.ac-file.pdf { grid-column: 1 / -1; }
.ac-file-head { display: flex; align-items: center; gap: 6px; padding: 6px 10px; }
.ac-thumb { display: block; width: 100%; border: 0; padding: 0; background: var(--surface-2); cursor: zoom-in; }
.ac-thumb img { display: block; width: 100%; max-height: 220px; object-fit: contain; }
.ac-viewer { width: min(1000px, calc(100% - 24px)); height: min(90vh, 900px); padding: 0; display: none; flex-direction: column; }
.ac-viewer[open] { display: flex; }
.ac-viewer iframe { flex: 1; width: 100%; border: 0; }
.ac-viewer-img { flex: 1; overflow: auto; display: grid; place-items: center; background: var(--surface-2); padding: 12px; }
.ac-viewer-img img { max-width: 100%; }
.ac-hero h2 { color: var(--tone); }
.ac-steps { display: flex; align-items: center; gap: 0; padding: 18px var(--s5) 22px; overflow-x: auto; }
.ac-step { display: grid; justify-items: center; gap: 6px; min-width: 96px; text-align: center; }
.ac-step b { font-size: 13px; color: var(--muted); }
.ac-step-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 2px solid var(--line); background: var(--surface); color: #fff; }
.ac-step.on .ac-step-dot { background: hsl(var(--h) 78% 48%); border-color: hsl(var(--h) 78% 48%); }
.ac-step.on b { color: var(--ink); }
.ac-step-line { flex: 1; min-width: 20px; height: 2px; background: var(--line); margin-bottom: 22px; }
.rt-anim .ac-step.on .ac-step-dot { animation: acPop .5s cubic-bezier(.2, .9, .3, 1.4) both; animation-delay: calc(var(--d, 0s) + .1s); }
@keyframes acPop { from { transform: scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .rt-anim .ac-step.on .ac-step-dot { animation: none; } }
.ac-clock { max-width: 130px; }
.ac-idok { color: var(--ok); font-weight: 600; } .ac-idok svg { width: 12px; height: 12px; vertical-align: -1px; }
/* Security: two-step verification and automatic sign-out */
.mfa-steps { margin: 8px 0; padding-left: 20px; display: grid; gap: 4px; }
.mfa-qr { display: grid; place-items: center; margin: 8px 0; } .mfa-qr img { background: #fff; padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
.mfa-key { word-break: break-all; font-size: 13px; }
.idle-warn { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); border-radius: 12px; padding: 12px 16px; max-width: calc(100% - 24px); }
.sec-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
/* Owner Portal */
/* Daywell Staff */
.nav .nav-btn { display: flex; align-items: center; gap: 12px; width: 100%; color: #fff; background: none; border: 0; text-align: left; font: inherit; font-weight: 500; font-size: 16px; padding: 11px 12px; border-radius: var(--radius-sm); margin: 3px 0; cursor: pointer; }
.nav .nav-btn:hover, .nav .nav-btn:focus-visible { background: rgba(255,255,255,.1); }
.nav .nav-btn .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.nav-collapsed .nav .nav-btn { justify-content: center; padding: 12px 0; } body.nav-collapsed .nav .nav-btn .label { display: none; }
body.dw-mode #searchForm, body.dw-mode #bellBtn { display: none; }
body.dw-mode .topbar #modeBtn { margin-left: auto; }
.own-brand { margin-bottom: var(--s4); border-left: 4px solid var(--ok); }
.own-brand.on { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad-bg) 50%, var(--surface)); }
.own-brand-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.own-brand-row > div { flex: 1 1 260px !important; min-width: 0; }
.own-brand-row > .btn { flex-shrink: 0; margin-left: auto; max-width: 100%; white-space: normal; }
.own-brand-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); flex-shrink: 0; }
.own-brand.on .own-brand-dot { background: var(--bad); box-shadow: 0 0 0 4px var(--bad-bg); }
.dw-loading { display: flex; align-items: center; gap: 12px; padding: 28px 4px; color: var(--muted); }
.dw-spin { width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: dwSpin .8s linear infinite; }
@keyframes dwSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dw-spin { animation-duration: 2.4s; } }
.dw-error { background: var(--bad-bg); color: var(--bad); }
.dw-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--s4); margin-bottom: var(--s4); align-items: start; }
.dw-two > .card { margin: 0; }
main > .card, main > section.card { margin-bottom: var(--s4); }
.dw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s4); }
.dw-ws-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dw-search { margin-bottom: var(--s4); max-width: 520px; }
.dw-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: var(--s4); }
.dw-filters .input { width: auto; min-width: 200px; flex: 1 1 200px; max-width: 320px; }
.dw-table td { vertical-align: top; } .dw-table tr.clickable { cursor: pointer; } .dw-table tr.clickable:hover td { background: var(--surface-2); }
.dw-table a { color: inherit; text-decoration: none; }
.dw-dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0; } .dw-dl dt { color: var(--muted); } .dw-dl dd { margin: 0; }
.dw-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.dw-steps li { display: flex; gap: 10px; align-items: center; color: var(--muted); } .dw-steps li.done { color: var(--ink); } .dw-steps li svg { width: 18px; height: 18px; color: var(--ok); }
.dw-dot { width: 14px; height: 14px; margin: 2px; border-radius: 50%; border: 2px solid var(--line); flex-shrink: 0; }
.dw-fieldset { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0; } .dw-fieldset legend { padding: 0 6px; font-weight: 600; }
.dw-loc { margin-bottom: 8px; }
.dw-radio { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; cursor: pointer; } .dw-radio input { margin-top: 4px; } .dw-radio > span { display: grid; gap: 2px; }
.dw-cap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.dw-caps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dw-staff.off { opacity: .65; }
.dw-h3 { font-size: 16px; margin: 0 0 6px; }
.dw-note { white-space: pre-wrap; }
.dw-change { margin-top: 4px; }
.dw-invite { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.support-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; background: #5d3754; color: #fff; font-size: 14px; position: sticky; top: 0; z-index: 30; }
.support-bar.edit { background: #8a2c1b; }
.support-bar .btn { background: #fff; color: #5d3754; border: 0; } .support-bar .btn-outline { background: transparent; color: #fff; border: 1.5px solid #fff; }
.support-bar > span { flex: 1 1 260px; }
.support-bar svg { width: 18px; height: 18px; }
@media (max-width: 700px) { .dw-dl { grid-template-columns: 1fr; } .dw-dl dt { margin-top: 6px; } .dw-filters .input { max-width: none; } }
/* Your menu (top right) */
.me-btn { border: 0; background: none; padding: 2px; border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.me-btn:focus-visible { outline: 3px solid var(--aqua); outline-offset: 2px; }
.me-btn .avatar.sm { width: 30px; height: 30px; font-size: 12px; }   /* about the size of the other top-bar icons; the tap area stays 42px */
.me-btn { padding: 6px; }
.me-menu { position: fixed; top: 62px; right: 16px; z-index: 900; width: min(320px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 8px; display: grid; gap: 2px;
  /* never taller than the screen; on a short window the menu scrolls so Sign Out is always reachable */
  max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; }
.me-head { display: flex; gap: 12px; align-items: center; padding: 10px 10px 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.me-head b { display: block; } .me-head small { display: block; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.avatar.lg { width: 48px; height: 48px; font-size: 17px; flex-shrink: 0; }
.me-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; padding: 10px; border-radius: 10px; cursor: pointer; }
.me-item:hover, .me-item:focus-visible { background: var(--surface-2); }
.me-item svg { width: 18px; height: 18px; color: var(--muted); }
.me-out { color: var(--bad); } .me-out svg { color: var(--bad); }
.me-mode { padding: 6px 10px 10px; display: grid; gap: 6px; } .me-mode .seg button { padding: 6px 10px; font-size: 14px; }
.me-demo { padding: 6px 10px 10px; display: grid; gap: 6px; }
.me-sep { height: 1px; background: var(--line); margin: 4px 0; }
.sidebar-foot:empty { display: none; }
.name-form { display: block; }
.name-form .input:disabled { background: var(--surface-2); color: var(--ink-2); }
.name-foot { display: flex; justify-content: flex-end; margin-top: 10px; }
.dw-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.dw-color { display: flex; align-items: center; gap: 10px; } .dw-color input[type=color] { width: 48px; height: 40px; padding: 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.dw-mine-row .row-meta svg { width: 14px; height: 14px; vertical-align: -2px; }

/* Top bar on tablets and phones: everything fits on one line (light/dark is also in the profile menu). */
@media (max-width: 860px) {
  .topbar { gap: 8px; }
  .topbar .place { min-width: 0; flex: 0 1 auto; }
  .topbar .store-switch select { max-width: 34vw; text-overflow: ellipsis; }
  .search-box { min-width: 0; padding: 0 8px; }
}
@media (max-width: 520px) { .topbar #modeBtn { display: none; } }

/* ---------- Chat ---------- */
.chat { display: grid; grid-template-columns: 270px minmax(0, 1fr); height: calc(100vh - 150px); min-height: 540px; overflow: hidden; margin-top: 4px; }
/* Chat fills the window and the page itself never scrolls; only the channel list and messages do. */
body[data-page="chat"] { overflow: hidden; overscroll-behavior: none; }
body[data-page="chat"] .shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
body[data-page="chat"] main { max-width: none; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: var(--s4) var(--s5); }
body[data-page="chat"] .footer, body[data-page="chat"] .legal { display: none; }
body[data-page="chat"] .chat-wrap { flex: 1; min-height: 0; display: flex; }
body[data-page="chat"] .chat { flex: 1; width: 100%; height: auto; min-height: 0; margin: 0; }
/* More room for messages: a slimmer header and composer (the typing line floats above the box). */
body[data-page="chat"] main { padding: var(--s3) var(--s4); }
body[data-page="chat"] .chat-head { min-height: 52px; padding: 6px var(--s3); }
body[data-page="chat"] .chat-compose { position: relative; padding: 6px var(--s3) var(--s3); }
body[data-page="chat"] .chat-tip { display: none; }
body[data-page="chat"] .chat-typing { position: absolute; top: -18px; left: var(--s4); margin: 0; min-height: 0; pointer-events: none; }
body[data-page="chat"] .chat-input { min-height: 40px; padding: 10px 12px 2px; }
body[data-page="chat"] .chat-bar { padding: 2px 6px 4px; }
/* Expand: the conversation fills the whole window (the menu and top bar step aside). */
body.chat-focus[data-page="chat"] .sidebar, body.chat-focus[data-page="chat"] .topbar, body.chat-focus[data-page="chat"] #tabbar, body.chat-focus[data-page="chat"] .demo-banner { display: none !important; }
body.chat-focus[data-page="chat"] .shell { margin-left: 0; }
body.chat-focus[data-page="chat"] main { padding: 0; }
body.chat-focus[data-page="chat"] .chat { border-radius: 0; border: 0; }
.chat.with-thread { grid-template-columns: 270px minmax(0, 1fr) minmax(300px, 380px); }
.chat-thread { display: none; border-left: 1px solid var(--line); min-width: 0; min-height: 0; flex-direction: column; }
.chat.with-thread .chat-thread { display: flex; }
.chat-wait { padding: var(--s5); }
.chat-side { border-right: 1px solid var(--line); overflow-y: auto; padding: var(--s3) var(--s2) var(--s4); background: var(--surface-2); }
.chat-side-top { display: flex; gap: 6px; align-items: center; padding: 0 4px var(--s2); }
.chat-search-btn { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; min-height: 38px; }
.chat-search-btn svg { width: 16px; height: 16px; }
.chat-side-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s3) 4px; font-size: 12px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .05em; }
.chat-side-head b { font-weight: 600; }
.chat .icon-btn.sm { width: 32px; height: 32px; }
.chat .icon-btn.sm svg { width: 18px; height: 18px; }
.chat .icon-btn.sm:hover { background: var(--surface-2); }
.chat-side .icon-btn.sm:hover { background: var(--surface); }
.chat-row { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; text-align: left; padding: 7px 12px; border-radius: var(--radius-sm); color: var(--ink-2); font: inherit; font-size: var(--fs-md); cursor: pointer; min-height: 38px; }
.chat-row:hover { background: var(--surface); }
.chat-row.on { background: var(--surface); color: var(--ink); box-shadow: inset 3px 0 0 var(--action); }
.chat-row.unread { color: var(--ink); font-weight: 700; }
.chat-row.muted { opacity: .62; }
.chat-row.chat-browse { color: var(--muted); font-size: var(--fs-sm); }
.chat-row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The X that closes a direct or group message from the list: shows on hover or keyboard focus (always on touch screens) */
.chat-row-x { display: none; flex: none; width: 22px; height: 22px; border-radius: 6px; align-items: center; justify-content: center; color: var(--muted); }
.chat-row-x svg { width: 14px; height: 14px; }
.chat-row-x:hover, .chat-row-x:focus-visible { background: var(--line); color: var(--ink); outline: none; }
.chat-row:hover .chat-row-x, .chat-row:focus-within .chat-row-x { display: inline-flex; }
.chat-row:hover .count { display: none; }
@media (hover: none) { .chat-row-x { display: inline-flex; } }
.chat-row .count { background: var(--action); color: #fff; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; padding: 1px 8px; }
.chat-muted-ic svg { width: 14px; height: 14px; opacity: .6; vertical-align: -2px; }
.chat-ic { display: inline-grid; place-items: center; width: 24px; color: var(--muted); flex: none; }
.chat-hash { font-weight: 700; font-size: 17px; line-height: 1; }
.chat-archived > summary { cursor: pointer; list-style: none; }
.chat-archived > summary::-webkit-details-marker { display: none; }
.chat-archived > summary .hint { margin-left: auto; }
.chat-ic svg { width: 18px; height: 18px; }
.chat-stack { display: inline-flex; flex: none; }
.chat-stack .avatar + .avatar { margin-left: -8px; box-shadow: 0 0 0 2px var(--surface-2); }
/* In the channel list every icon takes the same 24px, so group and single DM names line up with channel names */
.chat-row > .av-dot-wrap { width: 24px; justify-content: center; }
.chat-row > .chat-stack { position: relative; width: 24px; height: 24px; }
.chat-row > .chat-stack .avatar { position: absolute; left: 0; top: 0; width: 17px; height: 17px; font-size: 7px; margin: 0; }
.chat-row > .chat-stack .avatar + .avatar { left: auto; top: auto; right: 0; bottom: 0; margin: 0; }
.chat-row > .chat-stack .avatar:nth-child(n+3) { display: none; }
.chat-pad { padding: 4px 12px 8px; margin: 0; }
.chat-side-foot { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s3); }
.chat-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px var(--s4); border-bottom: 1px solid var(--line); min-height: 60px; }
.chat-head-text { flex: 1; min-width: 0; border: 0; background: none; text-align: left; padding: 4px 6px; border-radius: var(--radius-sm); font: inherit; color: inherit; cursor: pointer; }
.chat-head-text:not(.static):hover { background: var(--surface-2); }
.chat-head h2 { margin: 0; font-size: 17px; display: flex; gap: 6px; align-items: center; }
.chat-head small { color: var(--muted); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head-tools { display: flex; align-items: center; gap: 6px; }
.chat-people { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 3px 10px 3px 4px; font: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chat-people .avatar + .avatar { margin-left: -10px; box-shadow: 0 0 0 2px var(--surface); }
.chat-back { display: none; }
.chat-msgs { flex: 1; overflow-y: auto; padding: var(--s2) var(--s4) var(--s4); }
.chat-msgs.drop { outline: 2px dashed var(--action); outline-offset: -8px; background: var(--info-bg); }
.chat-msgs:focus-visible { outline: 2px solid var(--action); outline-offset: -2px; }
.chat-empty { display: grid; place-items: center; height: 100%; }
.chat-note { text-align: center; color: var(--muted); font-size: 12px; margin: 6px 0 var(--s3); }
.chat-day, .chat-new-line { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; font-weight: 600; margin: var(--s4) 0 var(--s2); }
.chat-day::before, .chat-day::after, .chat-new-line::before, .chat-new-line::after { content: ''; flex: 1; border-top: 1px solid var(--line); }
.chat-new-line { color: var(--action); }
.chat-new-line::before, .chat-new-line::after { border-color: var(--action); }
.chat-msg { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); }
.chat-msg.join { padding-top: 1px; }
.chat-msg:hover, .chat-msg:focus-within { background: var(--surface-2); }
.chat-msg.mention { background: var(--warn-bg); }
.chat-msg.pinned { background: var(--info-bg); }
.chat-msg.flash { animation: chatFlash 2.4s ease-out; }
@keyframes chatFlash { 0%, 40% { background: var(--warn-bg); box-shadow: inset 3px 0 0 var(--warn); } 100% { background: transparent; } }
.chat-pinned { font-size: 12px; color: var(--info); font-weight: 600; display: flex; gap: 4px; align-items: center; margin-bottom: 2px; }
.chat-pinned svg { width: 13px; height: 13px; }
.chat-msg-head { display: flex; gap: 8px; align-items: baseline; }
.chat-msg-head time { color: var(--muted); font-size: 12px; }
.chat-time-side { color: transparent; font-size: 11px; text-align: right; padding-top: 3px; white-space: nowrap; }
.chat-msg:hover .chat-time-side { color: var(--muted); }
.chat-body { margin: 2px 0 0; line-height: 1.5; overflow-wrap: anywhere; }
.chat-body a { color: var(--action); }
.chat-body code { background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: .9em; font-family: Consolas, 'Courier New', monospace; color: var(--bad); }
.chat-pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin: 4px 0; white-space: pre-wrap; font-family: Consolas, 'Courier New', monospace; font-size: 13px; }
.chat-quote { display: block; border-left: 3px solid var(--line-strong); padding-left: 10px; color: var(--ink-2); }
.chat-body.removed { color: var(--muted); font-style: italic; }
.chat-edited { color: var(--muted); font-size: 12px; }
.chat-at { background: var(--info-bg); color: var(--info); border-radius: 4px; padding: 0 3px; font-weight: 600; }
.chat-at.me, .chat-at.all { background: var(--warn); color: #fff; }
.chat-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.chat-img { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0; background: var(--surface-2); cursor: zoom-in; overflow: hidden; line-height: 0; }
.chat-img img { max-width: min(360px, 100%); max-height: 260px; min-width: 80px; min-height: 60px; object-fit: cover; display: block; }
.chat-video { max-width: min(400px, 100%); max-height: 260px; border-radius: var(--radius-sm); background: #000; }
.chat-file { display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--surface); color: var(--ink); text-decoration: none; max-width: 320px; }
.chat-file:hover { border-color: var(--action); }
.chat-file svg { width: 26px; height: 26px; color: var(--action); flex: none; }
.chat-file b { display: block; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file small { color: var(--muted); font-size: 12px; }
.chat-files .gone { opacity: .45; pointer-events: none; }
.chat-view { text-align: center; background: var(--surface-2); border-radius: var(--radius-sm); }
.chat-view img { max-width: 100%; max-height: 70vh; }
.chat-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.chat-react { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-pill); padding: 2px 9px; font: inherit; font-size: 14px; cursor: pointer; min-height: 28px; color: var(--ink-2); }
.chat-react span { font-size: 12px; font-weight: 600; }
.chat-react.on { background: var(--info-bg); border-color: var(--info); color: var(--info); }
.chat-react.add { opacity: 0; }
.chat-react.add svg { width: 16px; height: 16px; }
.chat-msg:hover .chat-react.add, .chat-react.add:focus { opacity: 1; }
.chat-replies { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; border: 1px solid transparent; background: none; border-radius: var(--radius-sm); padding: 3px 8px 3px 3px; font: inherit; font-size: 13px; color: var(--action); cursor: pointer; }
.chat-replies:hover { border-color: var(--line); background: var(--surface); }
.chat-replies .hint { font-size: 12px; }
.chat-seen { font-size: 13px; margin-top: 4px; display: inline-flex; gap: 6px; align-items: center; }
.chat-tools { position: absolute; top: -14px; right: 8px; display: none; align-items: center; gap: 1px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 2px; z-index: 3; }
.chat-msg:hover .chat-tools, .chat-msg:focus-within .chat-tools { display: flex; }
.chat-tools .icon-btn.on { color: var(--info); }
.chat-tool-emoji { border: 0; background: none; width: 32px; height: 32px; border-radius: 6px; font-size: 16px; cursor: pointer; }
.chat-tool-emoji:hover { background: var(--surface-2); }
.chat-edit textarea { width: 100%; resize: vertical; }
.chat-edit-btns { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 6px; }
.chat-edit-btns .hint { margin-right: auto; font-size: 12px; }
.chat-compose { padding: var(--s2) var(--s4) var(--s3); }
.chat-compose.locked { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: var(--fs-sm); background: var(--surface-2); border-top: 1px solid var(--line); padding: var(--s3) var(--s4); }
.chat-compose.locked .btn { margin-left: auto; }
.chat-compose-box { position: relative; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.chat-compose-box:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); }
.chat-input { display: block; width: 100%; border: 0; background: transparent; resize: none; min-height: 44px; max-height: 200px; padding: 12px 14px 4px; font: inherit; font-size: 15px; line-height: 1.45; color: var(--ink); outline: none; }
.chat-bar { display: flex; align-items: center; gap: 2px; padding: 4px 6px 6px; }
.chat-fmt { display: inline-grid; place-items: center; min-width: 32px; height: 32px; border: 0; background: none; border-radius: 6px; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer; }
.chat-fmt:hover { background: var(--surface-2); color: var(--ink); }
.chat-fmt svg { width: 18px; height: 18px; }
.chat-fmt code { font-size: 12px; font-family: Consolas, monospace; }
.chat-bar-sep { width: 1px; height: 20px; background: var(--line); margin: 0 4px; }
.chat-send { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; min-height: 34px; }
.chat-tip { margin: 6px 2px 0; font-size: 12px; }
.chat-typing { margin: 4px 2px 0; min-height: 1.3em; font-size: 12px; font-style: italic; color: var(--muted); }
.chat-typing:empty { min-height: 0; margin: 0; }
.chat-msg.sending .chat-msg-main { opacity: .6; }
.chat-status { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chat-status.bad { color: var(--bad); font-weight: 600; }
/* Taps register instantly on phones (no double-tap-to-zoom wait), and every press shows right away */
a, button, label, input, select, textarea, summary, [onclick] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
/* No double-tap zoom anywhere, even on empty space (pinch still works on the web). :where keeps it weakest so pan-y rules win. */
:where(html, body, *) { touch-action: manipulation; }
button:not(:disabled):active, .btn:not(:disabled):active, .icon-btn:not(:disabled):active { transform: scale(.97); opacity: .85; }
button[aria-busy="true"] { cursor: progress; opacity: .7; }
.crop-dlg { width: min(360px, 100%); }
.crop-box { position: relative; margin: 8px auto 12px; border-radius: 12px; overflow: hidden; background: #111; touch-action: none; }
.crop-box canvas { display: block; cursor: grab; touch-action: none; }
.crop-box canvas:active { cursor: grabbing; }
.crop-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.55); border: 2px solid rgba(255,255,255,.9); pointer-events: none; }
.crop-zoom input { width: 100%; }
.notify-table td { vertical-align: middle; }
.notify-table input[type=checkbox] { width: 20px; height: 20px; }
.pc-day { display: inline-flex; align-items: center; gap: 4px; }
.btn-ok { background: var(--ok); color: #fff; border-color: var(--ok); }
.btn-ok:hover { filter: brightness(.92); }
#refreshBtn.spin svg { animation: dw-spin-rot .8s linear infinite; }
@keyframes dw-spin-rot { to { transform: rotate(360deg); } }
.chat-pending { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 10px 0; }
.chat-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 4px 4px 6px; background: var(--surface-2); font-size: 13px; max-width: 240px; }
.chat-chip img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.chat-chip svg { width: 20px; height: 20px; color: var(--action); }
.chat-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-chip small { display: block; color: var(--muted); font-size: 11px; }
.chat-at-list { position: absolute; bottom: calc(100% + 6px); left: 0; width: min(340px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: 4px; z-index: 20; }
.chat-at-list button { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 7px 8px; border-radius: 6px; text-align: left; font: inherit; color: var(--ink); cursor: pointer; }
.chat-at-list button small { margin-left: auto; color: var(--muted); font-size: 12px; }
.chat-at-list button.on, .chat-at-list button:hover { background: var(--surface-2); }
.chat-emoji { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; width: 296px; }
.chat-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.chat-emoji-grid button { border: 0; background: none; font-size: 20px; height: 34px; border-radius: 6px; cursor: pointer; }
.chat-emoji-grid button:hover, .chat-emoji-grid button:focus-visible { background: var(--surface-2); }
.chat-dlg-title { display: flex; align-items: center; gap: 10px; }
.chat-detail { margin-top: var(--s3); }
.chat-about { margin: 0 0 var(--s4); display: grid; gap: 12px; }
.chat-about > div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: baseline; }
.chat-about dt { color: var(--muted); font-size: var(--fs-sm); }
.chat-about dd { margin: 0; }
.chat-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chat-leave, .chat-kick { color: var(--bad); }
.chat-members { margin-top: var(--s3); max-height: 50vh; overflow-y: auto; }
.chat-hits { margin-top: var(--s3); max-height: 60vh; overflow-y: auto; }
.chat-hits mark { background: var(--warn-bg); color: inherit; padding: 0 2px; border-radius: 3px; }
.chat-who-set { border: 0; padding: 0; margin: var(--s3) 0; display: grid; gap: 6px; }
.chat-who-set legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.chat-who { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; }
.chat-who:has(input:checked) { border-color: var(--action); box-shadow: inset 0 0 0 1px var(--action); }
.chat-who input { margin-top: 3px; }
.chat-who small { display: block; color: var(--muted); font-size: var(--fs-sm); }
.chat-checks { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 6px 0; }
.chat-checks label { display: inline-flex; gap: 6px; align-items: center; }
.chat-wrap { container: chatbox / inline-size; }
.chat-thread .chat-send span, .chat-thread .chat-tip { display: none; }
.chat-thread .chat-fmt { min-width: 28px; }
@container chatbox (max-width: 1000px) {
  .chat.with-thread { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
  .chat.with-thread .chat-side { display: none; }
}
@container chatbox (max-width: 680px) {
  .chat { grid-template-columns: minmax(0, 1fr); }
  .chat.with-thread { grid-template-columns: minmax(0, 1fr); }
  .chat.with-thread .chat-main { display: none; }
  .chat.show-list .chat-main, .chat.show-convo .chat-side { display: none; }
  .chat.show-list:not(.with-thread) .chat-side { display: block; }
  .chat-side { border-right: 0; }
  .chat-back { display: grid; }
  .chat-head, .chat-msgs, .chat-compose { padding-left: var(--s3); padding-right: var(--s3); }
  .chat-head-tools .btn, .chat-people span { display: none; }
  .chat-send span { display: none; }
  .chat-tip { display: none; }
  .chat-msg:hover .chat-tools { display: none; }
  .chat-msg.tools .chat-tools { display: flex; position: static; grid-column: 2; justify-self: start; box-shadow: none; flex-wrap: wrap; }
  .chat-react.add { opacity: 1; }
}
/* Phones: Chat fills the screen under the top bar, like a messaging app. The page itself never scrolls or slides
   sideways; only the message list does. Text boxes use 16px text so iPhones don't zoom in when you tap them. */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
  body[data-page="chat"] { overflow: hidden; overscroll-behavior: none; }
  body[data-page="chat"] .shell { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
  body[data-page="chat"] main { padding: 0; max-width: none; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
  body[data-page="chat"] .footer, body[data-page="chat"] .legal { display: none; }
  body[data-page="chat"] .chat-wrap { flex: 1; min-height: 0; display: flex; }
  body[data-page="chat"] .chat { flex: 1; width: 100%; height: auto; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; }
  body[data-page="chat"] .chat-wait { margin: var(--s4); }
  .chat-row { min-height: 46px; font-size: 16px; }
  .chat-msgs { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  /* The message box sits clear of the iPhone home bar. (The chat page's own padding rule is more specific,
     so this one has to match it or it never applies.) While typing, the keyboard covers the home bar, so a small gap is enough. */
  .chat-compose, body[data-page="chat"] .chat-compose { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  body[data-page="chat"] .chat-compose:focus-within { padding-bottom: 10px; }
  .chat-about > div { grid-template-columns: 1fr; gap: 2px; }
  .chat-emoji { width: calc(100vw - 16px); }
}
.done-toggle { display: block; margin: 10px 16px; font-size: var(--fs-sm); }

/* Chat: emoji in the device's own style, profile cards */
.emo, .chat-emoji button, .chat-react, .chat-tool-emoji, .chat-reacts { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', 'Twemoji Mozilla', var(--font-body), sans-serif; }
.chat-react span { font-family: var(--font-body); }
.chat-body .emo { font-size: 1.15em; line-height: 1; vertical-align: -0.05em; }
.chat-emoji { width: 340px; padding: 0; overflow: hidden; }
.chat-emoji-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--surface-2); overflow-x: auto; }
.chat-emoji-tabs button { flex: none; width: 34px; height: 34px; border: 0; background: none; border-radius: 8px; font-size: 18px; cursor: pointer; opacity: .65; }
.chat-emoji-tabs button.on { background: var(--surface); opacity: 1; box-shadow: var(--shadow); }
.chat-emoji-name { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px 2px; }
.chat-emoji .chat-emoji-grid { max-height: 232px; overflow-y: auto; padding: 4px 8px 8px; }
.chat-emoji-grid button { font-size: 22px; height: 38px; }
.chat-who-btn { border: 0; background: none; padding: 0; border-radius: 50%; cursor: pointer; align-self: start; line-height: 0; }
.chat-who-btn:focus-visible, .chat-name:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.chat-name { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; text-align: left; }
.chat-name:hover { text-decoration: underline; }
.chat-members .chat-name { font-weight: 500; }
.chat-profile-top { display: flex; gap: 18px; align-items: center; margin: -8px 0 var(--s4); }
.chat-profile-top h2 { margin: 0; font-size: 22px; }
.chat-profile-top p { margin: 4px 0 0; color: var(--ink-2); }
.chat-emoji .chat-emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); overflow-x: hidden; }
.chat-emoji-grid button { min-width: 0; padding: 0; }

/* Get the App */
.ga-hero { display: flex; gap: 14px; align-items: center; margin: -4px 0 8px; }
.ga-hero img { border-radius: 14px; box-shadow: var(--shadow); }
.ga-steps { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 10px; }
.ga-steps li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.ga-steps li svg { width: 16px; height: 16px; vertical-align: -3px; }
.ga-n { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 700; }

/* ---------- Phones: easy to see and easy to tap ----------
   A bar of main pages along the bottom (thumb reach), bigger tap targets and text, page buttons that wrap
   instead of running off the edge, pop-ups that rise from the bottom like an app sheet, and a search box that
   opens full width when tapped. */
#tabbar { display: none; }
@media (max-width: 760px) {
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  #tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--surface); border-top: 1px solid var(--line); padding: 4px 4px max(4px, env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(3, 40, 52, .06); }
  #tabbar a, #tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 54px; color: var(--ink-2); text-decoration: none; background: none; border: 0; font: inherit; font-size: 12px; font-weight: 600; border-radius: 12px; }
  #tabbar svg { width: 24px; height: 24px; }
  #tabbar .on { color: var(--action); }
  #tabbar .count { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--action); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
  body.signed-out #tabbar, body.kiosk #tabbar, body.chat-convo #tabbar { display: none; }
  /* The open menu covers the bottom bar, so the profile at its foot isn't hidden; it also clears the iPhone swipe bar. */
  body.nav-open .sidebar { z-index: 50; }
  .sidebar { padding-bottom: env(safe-area-inset-bottom); }
  .shell { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  body.chat-convo .shell { padding-bottom: 0; }
  body[data-page="chat"]:not(.chat-convo) .shell { height: calc(100dvh - 62px - env(safe-area-inset-bottom)); padding-bottom: 0; }

  /* Top bar: menu, store, search (opens wide), refresh, bell, you */
  .topbar { height: 60px; gap: 6px; padding: 0 10px; }
  .topbar .place > svg { display: none; }
  .topbar .store-switch select { max-width: 30vw; padding: 6px 24px 6px 10px; font-size: 15px !important; }
  .search-box { flex: 0 0 auto; width: auto; margin-left: auto; border: 0; padding: 0; background: none; }
  .search-box input { width: 0; min-width: 0; padding: 0; border: 0; opacity: 0; flex: 0 0 0; }
  .search-box.open { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 5; flex: none; border: 1.5px solid var(--line-strong); padding: 0 6px 0 12px; background: var(--surface); }
  .search-box.open input { flex: 1; width: auto; padding: 10px 6px; opacity: 1; }
  .search-box.open #searchBtn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

  /* Page headings: buttons wrap onto their own line instead of running off the screen */
  .page-head { align-items: flex-start; }
  .page-head .head-actions { flex-wrap: wrap; flex-shrink: 1; width: 100%; align-self: stretch; }
  .page-head .head-actions > .btn { flex: 1 1 auto; justify-content: center; }
  .page-head h1 { font-size: 26px; }

  /* Bigger targets and text */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding-left: 14px; padding-right: 14px; }
  .icon-btn { min-width: 44px; min-height: 44px; }
  .icon-btn.sm { min-width: 38px; min-height: 38px; }
  .hint, small, .row-meta { font-size: 14px; }
  .badge { font-size: 13px; }
  .tabs { gap: var(--s4); padding: 0 var(--s3); scrollbar-width: none; }
  .tabs button { padding: 12px 2px 14px; font-size: 16px; }
  .seg button { min-height: 40px; }
  .card { border-radius: 14px; }

  /* Pop-ups rise from the bottom and use the full width */
  dialog, dialog:has(.dlg-wide) { width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh; border-radius: 18px 18px 0 0; padding-bottom: env(safe-area-inset-bottom); }
  dialog form, .dlg { padding: var(--s4); }
  .dlg-foot { flex-wrap: wrap; }
  .dlg-foot > .btn { flex: 1 1 auto; }
  .drawer { width: 100%; }
}

/* ---------- Huddles ---------- */
#huddleBar { position: fixed; right: 20px; bottom: 20px; z-index: 55; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; background: var(--brand-deep, #00374d); color: #fff; border-radius: 999px; box-shadow: var(--shadow-lg); max-width: calc(100vw - 24px); }
#huddleBar .hud-title { display: flex; align-items: center; gap: 8px; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; text-align: left; }
#huddleBar .hud-title b { font-size: 15px; }
#huddleBar .hud-title small { opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; font-size: 13px; }
.hud-live { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .7); animation: hud-pulse 1.6s infinite; flex: none; }
@keyframes hud-pulse { 70% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } 100% { box-shadow: 0 0 0 0 rgba(61, 220, 132, 0); } }
.hud-people { display: flex; gap: 4px; }
.hud-person { position: relative; display: inline-flex; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .12s; }
.hud-person.talking { box-shadow: 0 0 0 3px #3ddc84; }
.hud-muted { position: absolute; right: -4px; bottom: -4px; width: 16px; height: 16px; border-radius: 50%; background: var(--bad); color: #fff; display: grid; place-items: center; }
.hud-muted svg { width: 10px; height: 10px; }
#huddleBar .hud-btn { color: #fff; background: rgba(255, 255, 255, .14); border-radius: 50%; }
#huddleBar .hud-btn.on { background: var(--bad); }
#huddleBar .hud-btn.lit { background: #fff; color: var(--brand-deep, #00374d); }
.hud-out { position: fixed; z-index: 60; min-width: 200px; max-width: calc(100vw - 16px); padding: 6px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); display: grid; }
.hud-out b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3, var(--ink-2)); padding: 6px 10px 4px; }
.hud-out button { text-align: left; padding: 10px; border: 0; background: none; font: inherit; color: inherit; border-radius: 10px; cursor: pointer; }
.hud-out button:hover { background: var(--tint, rgba(0,0,0,.05)); }
.hud-out button[aria-checked="true"] { font-weight: 700; color: var(--action); }
.hud-msg { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); max-width: 460px; }
.hud-msg > svg { color: var(--ok); flex: none; }
.hud-msg span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hud-msg small { color: var(--muted); }
.hud-join { white-space: nowrap; }
@media (max-width: 760px) {
  #huddleBar { left: 10px; right: 10px; bottom: calc(70px + env(safe-area-inset-bottom)); border-radius: 18px; }
  body.chat-convo #huddleBar { bottom: calc(118px + env(safe-area-inset-bottom)); }
  #huddleBar .hud-title small { max-width: 90px; }
  .hud-people .avatar.sm { width: 30px; height: 30px; }
}

/* ---------- Online dots and statuses ---------- */
.av-dot-wrap { position: relative; display: inline-flex; flex: none; }
.pdot { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); box-sizing: border-box; }
.pdot.on { background: #2bb673; border-color: var(--surface); box-shadow: 0 0 0 1.5px var(--surface); }
.avatar.xl + .pdot { width: 20px; height: 20px; right: 2px; bottom: 2px; border-width: 3px; }
.avatar.xs + .pdot { width: 9px; height: 9px; right: -2px; bottom: -2px; }
.st-tag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--font-body), sans-serif; font-size: .95em; margin-left: 4px; cursor: default; }
.st-online { margin: 4px 0 0; font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.st-online::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--muted); box-sizing: border-box; }
.st-online.on { color: #1e8a57; }
.st-online.on::before { background: #2bb673; border-color: #2bb673; }
.st-line { margin: 6px 0 0; font-size: 15px; }
.st-input { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.st-emoji-btn { width: 48px; height: 46px; flex: none; font-size: 24px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.st-input .input { flex: 1; }
.st-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.st-preset { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.st-preset:hover { border-color: var(--line-strong); }
.me-status .emo { font-size: 18px; width: 20px; text-align: center; }
dialog .chat-emoji { position: fixed; z-index: 5; }

.field[hidden], label[hidden] { display: none !important; }

/* ---------- Performance: Daywell's forecast chart ---------- */
.fc-card { overflow: hidden; }
.fc-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding: var(--s5) var(--s5) var(--s3); background: color-mix(in srgb, var(--action) 5%, var(--surface)); }
.fc-eyebrow { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.fc-eyebrow svg { width: 16px; height: 16px; color: var(--action); }
.fc-total { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; margin: 4px 0 2px; color: var(--ink); }
.fc-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fc-controls .date-nav { display: flex; align-items: center; gap: 4px; }
.fc-legend { padding: 4px var(--s5) 0; display: flex; flex-wrap: wrap; gap: 14px; }
.fc-legend label { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; cursor: pointer; }
.fc-key { width: 22px; height: 0; border-top: 3px solid var(--c); border-radius: 2px; display: inline-block; }
.fc-key.dash { border-top-style: dashed; }
.fc-key.band { height: 12px; border-top-width: 3px; background: color-mix(in srgb, var(--c) 16%, transparent); border-radius: 3px 3px 0 0; }
.fc-key.bar { width: 10px; height: 14px; border: 0; background: var(--c); border-radius: 4px; }
/* The clicked-day details: every label starts at the same spot (a color dot, or an empty space the same size),
   and each number sits right under its label's words. */
.fc-rows .fc-key { width: 10px; height: 10px; flex: none; border: 0; border-radius: 50%; }
.fc-rows .fc-key.none { visibility: hidden; }
.fc-rows dd { padding-left: 16px; }
.fc-wrap { padding: 6px var(--s3) 0; }
.fc-svg { width: 100%; height: auto; display: block; }
.fc-foot { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 6px var(--s5) var(--s4); border-top: 1px solid var(--line); }
.fc-kpis .kpi .big { font-size: 30px; }
@media (max-width: 760px) { .fc-total { font-size: 32px; } .fc-top { padding: var(--s4); } .fc-foot .hint { margin-left: 0 !important; } }

/* ---------- Sign-in screens: always centered, never cut off (even zoomed in or on a short screen) ---------- */
body.signed-out .auth { display: flex !important; flex-direction: column; justify-content: flex-start; align-items: center; padding: 24px 16px; }
body.signed-out .auth > .auth-card { margin-top: auto; flex: none; }
body.signed-out .auth > .auth-legal { margin-bottom: auto; flex: none; }
.auth-card { text-align: center; }
.auth-card form, .auth-card .field, .auth-card .auth-msg, .auth-card .dw-invite, .auth-card dl, .auth-card ul, .auth-card ol { text-align: left; }
.auth-card .check-line.auth-keep { justify-content: flex-start; margin: 2px 0 4px; font-size: 15px; }
.auth-card .dlg-foot { justify-content: center !important; }
.auth-center { text-align: center; }
.auth-word { line-height: 1.1; }
.sec-actions { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Training ---------- */
.page-tabs { margin: 0 0 18px; padding: 0; background: none; }
.tr-cards, .cl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tr-card { text-align: left; padding: 18px; border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; display: flex; flex-direction: column; gap: 10px; }
.tr-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.tr-card-top { display: flex; gap: 14px; align-items: center; }
.tr-card-title { font-size: 17px; }
.tr-desc { margin: 0; }
.tr-card-foot { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.tr-ring { --p: 0; width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--ok) calc(var(--p) * 1%), var(--surface-2) 0); position: relative; }
.tr-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--surface); }
.tr-ring b { position: relative; font-size: 14px; }
.tr-bar { flex: 1; min-width: 80px; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; display: inline-block; }
.tr-bar i { display: block; height: 100%; border-radius: 99px; background: var(--ok); }
.tr-bar.big { height: 12px; }
.tr-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.tr-row-pct { display: flex; align-items: center; gap: 8px; min-width: 150px; }
.tr-plan-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-2); display: grid; place-items: center; color: var(--brand); flex: none; }
.tr-progress-top { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; flex-wrap: wrap; }
.tr-section { border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px 8px; margin-bottom: 12px; }
.tr-section h3 { font-size: 16px; margin: 10px 0 4px; display: flex; gap: 8px; align-items: baseline; }
.tr-item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.tr-section h3 + .tr-item { border-top: 0; }
.tr-item-ic { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--muted); }
.tr-item.done .tr-item-ic { background: var(--ok-bg); color: var(--ok); }
.tr-item-main { flex: 1; min-width: 0; }
.tr-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.tr-ctl textarea { width: 100%; }
.tr-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.tr-check input { width: 20px; height: 20px; }
.tr-stars button { background: none; border: 0; font-size: 26px; color: var(--line-strong); cursor: pointer; padding: 0 2px; line-height: 1; }
.tr-stars button.on { color: #f5b301; }
.tr-stars button:disabled { cursor: default; }
.tr-signed { display: inline-flex; align-items: center; gap: 10px; }
.tr-signed img { height: 44px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tr-stamp { font-size: 12.5px; color: var(--muted); }
.tr-note { margin: 0; white-space: pre-wrap; }
.tr-ed-section { border: 1px solid var(--line); border-radius: 12px; padding: 12px; margin: 14px 0; background: var(--surface-2); }
.tr-ed-head { display: flex; gap: 8px; margin-bottom: 8px; }
.tr-ed-head .input { font-weight: 700; }
.tr-ed-item { display: grid; grid-template-columns: 190px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; }
.tr-ed-item > .input:nth-child(3), .tr-ed-item > .cl-range { grid-column: 2 / 3; }
.tr-req { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; white-space: nowrap; }
.tr-ed-btns { display: inline-flex; gap: 2px; }
.tr-ed-btns .icon-btn:nth-child(1) svg { transform: rotate(90deg); } .tr-ed-btns .icon-btn:nth-child(2) svg { transform: rotate(90deg); }
.tr-add { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Shifts at another location: one quiet line with a dashed stripe */
.my-shift.away { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 45%, transparent) 10px 11px); border-left: 3px dashed var(--line-strong); }
.my-shift.away .row-title { color: var(--ink-2); }
.loc-tag { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-2); font-weight: 500; }
.loc-tag svg { width: 13px; height: 13px; }
.sch-chip.away { display: flex; flex-direction: column; align-items: flex-start; gap: 0; cursor: default; background: transparent; border: 1px dashed var(--line-strong); color: var(--muted); box-shadow: none; }
.sch-chip.away svg { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }
/* ---------- Resources (cards like Checklists) ---------- */
.res-tabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
.res-tabs button { white-space: nowrap; }
.res-n { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 2px; }
.res-search { position: relative; display: block; max-width: 420px; margin-bottom: var(--s4); }
.res-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.res-search .input { padding-left: 36px; width: 100%; }
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s4); }
.res-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; outline: none; }
.res-card:hover, .res-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); }
.res-top { display: flex; align-items: flex-start; gap: 8px; }
.res-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); flex: none; }
.res-preview { max-width: 300px; pointer-events: none; }
.res-icon svg { width: 22px; height: 22px; }
.res-fav { color: var(--p-gold); margin-top: 2px; }
.res-fav svg { width: 16px; height: 16px; fill: currentColor; }
.res-edit { margin-left: auto; opacity: .55; }
.res-card:hover .res-edit { opacity: 1; }
.res-title { font-size: 16px; line-height: 1.3; }
.res-desc { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.res-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; font-size: 12px; }
.res-cat { background: var(--surface-2); color: var(--ink-2); border-radius: var(--radius-pill); padding: 2px 10px; font-weight: 500; }
.res-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.res-kind svg { width: 13px; height: 13px; }
/* ---------- Checklists ---------- */
.cl-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; border-left: 4px solid var(--line); }
.cl-card.done { border-left-color: var(--ok); } .cl-card.late { border-left-color: var(--bad); } .cl-card.open { border-left-color: var(--warn); }
.cl-card-top { display: flex; gap: 12px; align-items: flex-start; }
.cl-card-main { flex: 1; min-width: 0; }
.cl-card-main b { font-size: 17px; }
.cl-emoji { font-size: 26px; width: 44px; height: 44px; border-radius: 12px; background: var(--surface-2); display: grid; place-items: center; flex: none; }
.cl-emoji.sm { font-size: 20px; width: 36px; height: 36px; border-radius: 10px; }
.cl-card-foot { display: flex; gap: 8px; }
.cl-items { display: flex; flex-direction: column; }
.cl-item { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 12px 4px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.cl-item:first-child { border-top: 0; }
.cl-item.flag { background: color-mix(in srgb, var(--bad-bg) 60%, transparent); border-radius: 10px; padding: 12px 10px; }
.cl-item-main { flex: 1 1 240px; min-width: 0; }
.cl-ctl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.cl-flag { color: var(--bad); font-size: 13.5px; font-weight: 600; display: flex; gap: 4px; align-items: center; margin-top: 4px; }
.cl-tick { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line-strong); background: var(--surface); color: transparent; display: grid; place-items: center; cursor: pointer; }
.cl-tick.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.cl-tick svg { width: 24px; height: 24px; }
.cl-num { display: inline-flex; align-items: center; gap: 6px; } .cl-num .input { width: 110px; }
.cl-photo { border: 0; padding: 0; background: none; cursor: zoom-in; }
.cl-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.cl-final { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cl-lightbox { position: fixed; inset: 0; z-index: 10; background: rgba(0, 0, 0, .85); display: grid; place-items: center; border: 0; padding: 16px; cursor: zoom-out; }
.cl-lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }
.cl-days { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 6px 0; }
.cl-days label { display: inline-flex; gap: 5px; align-items: center; }
.cl-range { display: inline-grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cl-quick .row { padding: 10px 0; }
@media (max-width: 760px) { .tr-ed-item { grid-template-columns: minmax(0, 1fr) auto; } .tr-ed-item > * { grid-column: auto !important; } .tr-ed-item > .input { grid-column: 1 / -1 !important; } .tr-row-pct { min-width: 0; } }

/* ---------- Daywell Staff: premium look ---------- */
.staff-tag { display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; background: #d9b65a; color: #1a1408; vertical-align: middle; }
body.dw-premium .sidebar { background: #131c2b; border-right: 1px solid rgba(212, 175, 55, .25); }
body.dw-premium .nav a.active, body.dw-premium .nav a[aria-current="page"] { background: rgba(212, 175, 55, .16); box-shadow: inset 3px 0 0 #d4af37; }
body.dw-premium .brand-mark { border-color: rgba(212, 175, 55, .55); color: #d4af37; }
body.dw-premium .group-label { color: #d4af37; letter-spacing: .12em; }
html.staff-signin body.signed-out .auth { background: #131c2b; }
html.staff-signin .auth-word::after { content: 'STAFF'; display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 6px; font-size: 11px; font-weight: 800; letter-spacing: .14em; background: #d9b65a; color: #1a1408; vertical-align: middle; }
.dw-kpi-link { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.dw-kpi-link:hover, .dw-kpi-link:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.dw-sup-front { margin-bottom: 18px; }
.dw-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.dw-team-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 22px 14px; border: 1px solid var(--line); cursor: pointer; font: inherit; color: inherit; }
.dw-team-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.dw-team-card.off { opacity: .55; }
.dw-team-role { display: inline-flex; align-items: center; gap: 5px; font-size: 13.5px; font-weight: 600; color: var(--action); }
.dw-team-role svg { width: 15px; height: 15px; }
.dw-roster td { vertical-align: middle; }
.dw-chat { display: flex; flex-direction: column; height: calc(100vh - 230px); min-height: 420px; overflow: hidden; }
.dw-chat-msgs { flex: 1; overflow-y: auto; padding: 12px 18px; }
.dw-msg { display: flex; gap: 10px; padding: 6px 0; }
.dw-msg.join { padding-top: 0; }
.dw-msg-gap { width: 32px; flex: none; }
.dw-msg-body { white-space: normal; word-wrap: break-word; }
.dw-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.dw-chat-form textarea { flex: 1; resize: none; }
.bill-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.bill-plan { border: 1px solid var(--line); border-radius: 14px; padding: 18px; position: relative; }
.bill-plan.pop { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.bill-plan .badge { position: absolute; top: 12px; right: 12px; }
.bill-price { font-size: 30px; font-weight: 700; margin: 6px 0; }
.bill-price small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.dw-danger { border: 1px solid color-mix(in srgb, var(--bad) 40%, var(--line)); margin-top: 18px; }
.ws-support-bar { display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: #131c2b; color: #f3e6bf; font-size: 14px; }
.ws-support-bar svg { color: #d4af37; flex: none; }
/* Look & Feel palettes: small circles blending each palette's colors, named on hover */
.pal-dots { display: flex; flex-wrap: wrap; gap: 12px; }
.pal-dot { position: relative; width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .12s; }
.pal-dot:hover, .pal-dot:focus-visible { transform: scale(1.1); }
.pal-dot.on { box-shadow: 0 0 0 2px var(--text, #1f2933); }
.pal-dot::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); white-space: nowrap; background: #1f2933; color: #fff; font-size: 12.5px; font-weight: 600; padding: 4px 8px; border-radius: 6px; opacity: 0; pointer-events: none; transition: opacity .12s; z-index: 5; }
.pal-dot:hover::after, .pal-dot:focus-visible::after { opacity: 1; }
.pal-now { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.pal-now b { color: var(--text, inherit); }
/* An invitation waiting for you, inside the app */
.inv-bar { background: var(--accent-soft, #fff4d6); border-bottom: 1px solid var(--line); }
.inv-bar-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 18px; font-size: 14px; }
.inv-bar-text { flex: 1 1 220px; }
.inv-bar-acts { display: flex; gap: 6px; margin-left: auto; }
.inv-bar-row > svg { flex: none; width: 18px; height: 18px; color: var(--accent, #b8860b); }
/* ---------- Daywell Support ---------- */
.sup-hero { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px; margin-bottom: 18px; flex-wrap: wrap; background: color-mix(in srgb, var(--aqua) 9%, var(--surface)); }
.sup-hero h2 { margin: 0 0 4px; }
.sup-search { max-width: 380px; flex: 1 1 260px; }
.sup-cat { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 14px 0 6px; }
.sup-cat:first-child { margin-top: 0; }
.sup-art { border-bottom: 1px solid var(--line); padding: 10px 0; }
.sup-art summary { cursor: pointer; font-weight: 600; }
.sup-body { padding: 8px 0 4px; color: var(--ink-2); line-height: 1.55; }
.sup-row { width: 100%; border: 0; background: none; text-align: left; font: inherit; color: inherit; }
.sup-thread { display: flex; flex-direction: column; gap: 10px; max-height: 52vh; overflow-y: auto; padding: 4px 2px 12px; }
.sup-msg { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); max-width: 85%; }
.sup-msg.staff { align-self: flex-end; background: color-mix(in srgb, var(--aqua) 14%, var(--surface)); }
.sup-msg-head { font-size: 13.5px; margin-bottom: 4px; }
.sup-reply textarea { width: 100%; }

.cl-status { display: inline-block; margin-top: 6px; white-space: normal; }

.pc-note { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pc-note svg { width: 12px; height: 12px; flex: none; }
.pc-added { display: inline-block; font-size: 11px; font-weight: 700; color: var(--sun); text-transform: uppercase; letter-spacing: .04em; }

.wsb-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.wsb-plan { font-size: 28px; font-weight: 700; }
.wsb-plan small { font-size: 14px; font-weight: 500; color: var(--ink-2); }
.wsb-cycle { align-self: flex-start; }
.wsb-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.wsb-pick { border: 1px solid var(--line); border-radius: var(--r-lg, 14px); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.wsb-pick.pop { border-color: var(--action); box-shadow: 0 0 0 1px var(--action); }
.wsb-pick .hint { margin: 0 0 6px; flex: 1; }
.wsb-pick .btn { align-self: flex-start; }

/* ---------- Files ---------- */
.files-box { display: flex; flex-direction: column; gap: 8px; }
.files-list { display: flex; flex-direction: column; gap: 6px; }
.file-row { display: flex; align-items: center; gap: 6px; }
.file-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); text-align: left; font: inherit; color: inherit; cursor: pointer; }
.file-open:hover { border-color: var(--line-strong); }
.file-open span { display: flex; flex-direction: column; min-width: 0; }
.file-open b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.file-open small { color: var(--muted); font-size: 12.5px; }
.files-add { align-self: flex-start; cursor: pointer; }

/* Daywell Staff → Website: the live website on the left, the words to edit on the right */
.we-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 16px; align-items: start; }
.we-stage { overflow: hidden; }
.we-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.we-bar select { width: auto; min-width: 220px; }
.we-bar .seg button { display: inline-flex; gap: 6px; align-items: center; }
.we-bar .seg svg { width: 15px; height: 15px; }
.we-view { background: var(--surface-2); height: calc(100vh - 230px); min-height: 520px; display: flex; justify-content: center; }
.we-view iframe { width: 100%; height: 100%; border: 0; background: #fff; transition: width .2s; }
.we-view.phone { padding: 16px 0; }
.we-view.phone iframe { width: 390px; border-radius: 28px; box-shadow: 0 0 0 10px #10171b, var(--shadow-lg); }
.we-side { position: sticky; top: 84px; max-height: calc(100vh - 100px); display: flex; flex-direction: column; overflow: hidden; }
.we-list-top { padding-top: 0; }
.we-list { overflow-y: auto; }
.we-row { width: 100%; text-align: left; border: 0; background: none; font: inherit; color: inherit; }
.we-row .row-title { font-weight: 500; font-size: var(--fs-sm); line-height: 1.4; }
.we-row.is-hidden .row-title { color: var(--muted); text-decoration: line-through; }
.we-edit { padding: 16px; display: grid; gap: 12px; overflow-y: auto; }
.we-edit-top { display: flex; gap: 8px; align-items: center; }
.we-edit .hint { margin: 0; display: flex; gap: 6px; align-items: flex-start; }
.we-edit .hint svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.we-edit textarea { font-size: 16px; line-height: 1.5; }
.we-tips { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.we-orig { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px 10px; display: block !important; }
.we-acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .we-wrap { grid-template-columns: 1fr; } .we-side { position: static; max-height: none; } .we-view { height: 70vh; } }
/* Play Chart: someone on break stays in the spot they left, with a countdown */
.pc-person.on-break { background: var(--info-bg); border-left-style: dashed; border-left-color: var(--info); }
.pc-person.on-break b { color: var(--ink-2); }
.pc-box.on-break { border-style: dashed; }
.pc-box.on-break .pc-head { opacity: .75; }
.brk.on { font-variant-numeric: tabular-nums; }
.brk.on.over { background: var(--ok-bg); color: var(--ok); }
/* Task rows on a phone: the title gets the full width, and the due date and status sit underneath it */
@media (max-width: 640px) {
  .row:has(> .check) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: start; }
  .row:has(> .check):has(> .handle) { grid-template-columns: auto auto minmax(0, 1fr); }
  .row:has(> .check) > .handle, .row:has(> .check) > .check { margin-top: 2px; }
  .row:has(> .check) > .row-main, .row:has(> .check) > .row-end { grid-column: -2; }
  .row:has(> .check) > .row-end { justify-content: flex-start; flex-wrap: wrap; }
  .row:has(> .check) > .row-end .chev, .row:has(> .check) > .row-end > svg:last-child { margin-left: auto; }
}
/* Home: the Sales & Operations Snapshot as tiles. Half width: 2 by 2. Full width: 4 across. */
.snap-grid { gap: 12px; }
.snap-tile { background: var(--surface-2); border-radius: var(--radius-sm, 10px); padding: 14px 16px; min-width: 0; }
.snap-tile .big { font-size: 30px; line-height: 1.1; margin: 4px 0 2px; }
.snap-tile .second, .snap-tile .period { font-size: 12px; }
#homeDash > div:not(.full) .snap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 420px) { #homeDash .snap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .snap-tile .big { font-size: 24px; } }
/* A card that grows to even out the columns keeps its footer button at the bottom */
#homeDash > div > .card { display: flex; flex-direction: column; }
#homeDash > div > .card > .card-foot { margin-top: auto; }
/* Project page tasks: Task · Assigned to · Due */
.ptasks { display: flex; flex-direction: column; }
.ptask-head, .ptask { display: grid; grid-template-columns: 28px minmax(0, 1fr) minmax(130px, 200px) 150px; gap: 12px; align-items: center; padding: 0 var(--s5); }
.ptask-head { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ptask { min-height: 56px; border-bottom: 1px solid var(--line); cursor: pointer; }
/* Project tasks: a drag handle in the left margin (no extra column), and a line showing where the task will land */
.ptask.can-drag { position: relative; }
.ptask-handle { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); color: var(--muted); cursor: grab; opacity: .45; display: inline-flex; }
.ptask-handle svg { width: 16px; height: 16px; }
.ptask.can-drag:hover .ptask-handle { opacity: 1; }
.ptask.dragging { opacity: .45; }
.ptask.drop-above { box-shadow: inset 0 3px 0 var(--action); }
/* The blank "Add a task…" row at the end of a project's tasks: looks like a task, type a name and press Enter */
.ptask.ptask-new { cursor: text; margin: 0; }
.ptask-plus { display: grid; place-items: center; width: 22px; height: 22px; border: 2px dashed var(--line-strong); border-radius: 6px; color: var(--muted); }
.ptask-plus svg { width: 14px; height: 14px; }
.ptask-new-input { border: 0; background: none; font: inherit; color: var(--ink); padding: 8px 0; width: 100%; outline: none; min-width: 0; }
.ptask-new-input::placeholder { color: var(--muted); }
.ptask-new:hover .ptask-plus, .ptask-new.typing .ptask-plus { border-color: var(--action); color: var(--action); }
.ptask-new-hint, .ptask-new-more { visibility: hidden; font-size: 13px; }
.ptask-new.typing .ptask-new-hint, .ptask-new.typing .ptask-new-more, .ptask-new:hover .ptask-new-more { visibility: visible; }
.ptask-new-more { justify-self: start; }
@media (hover: none) { .ptask-new-more { visibility: visible; } }
.ptask.drop-below { box-shadow: inset 0 -3px 0 var(--action); }
/* Milestones and decisions: a delete X that shows on hover (always on touch screens); reached milestones are dimmed */
.row-x { opacity: 0; margin-left: auto; flex: none; }
.row:hover .row-x, .row-x:focus-visible { opacity: 1; }
@media (hover: none) { .row-x { opacity: .7; } }
.ms-row .row-main { cursor: pointer; }
/* Milestone and decision rows: checkbox or icon, the text, then the X on the same line at the right (not a new row) */
.card .rows > .row.ms-row, .card .rows > .row.dec-row { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--s3); }
.ms-row > .row-main, .dec-row > .row-main { flex: 1; min-width: 0; }
.ms-done .row-title { text-decoration: line-through; color: var(--muted); }
.ptask:hover { background: var(--surface-2); }
.ptask:last-of-type { border-bottom: 0; }
.ptask-title { font-weight: 500; overflow-wrap: anywhere; padding: 10px 0; }
.ptask.done .ptask-title { color: var(--muted); text-decoration: line-through; }
.ptask-who { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-sm); }
.ptask-who > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptask-due { justify-self: start; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; white-space: nowrap; }
.ptask-due svg { width: 15px; height: 15px; color: var(--ink-2); }
.ptask-due:hover { border-color: var(--brand); color: var(--brand); }
.ptask-due.late { border-color: color-mix(in srgb, var(--bad) 40%, var(--line)); color: var(--bad); background: var(--bad-bg); }
.ptask-due.late svg { color: var(--bad); }
.ptask-due.none { color: var(--muted); border-style: dashed; }
.ptask-rep { display: inline-flex; }
.ptasks .done-toggle { margin: 10px var(--s5); align-self: flex-start; }
@media (max-width: 640px) {
  .ptask-head { display: none; }
  .ptask { grid-template-columns: 28px minmax(0, 1fr); row-gap: 4px; padding-top: 10px; padding-bottom: 12px; align-items: start; }
  .ptask .check { margin-top: 2px; }
  .ptask-title { padding: 0; }
  .ptask-who, .ptask-due { grid-column: 2; }
}

/* The due date calendar */
.due-pop { position: fixed; z-index: 1000; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 18px 50px rgba(16, 32, 40, .2); padding: 12px; display: grid; gap: 10px; animation: duein .12s ease-out; }
@keyframes duein { from { opacity: 0; transform: translateY(-4px); } }
.due-top { display: flex; align-items: center; justify-content: space-between; }
.due-top b { font-size: 15px; }
.due-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.due-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.due-day { aspect-ratio: 1; border: 0; background: none; border-radius: 50%; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.due-day:hover { background: var(--surface-2); }
.due-day.out { color: var(--muted); opacity: .55; }
.due-day.today { font-weight: 700; color: var(--action); }
.due-day.mark, .due-key.mark { box-shadow: inset 0 0 0 2px var(--aqua); background: color-mix(in srgb, var(--aqua) 12%, transparent); }
.due-day.sel { background: var(--brand); color: #fff; font-weight: 700; box-shadow: none; }
.due-quick { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-btn { border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 13px; cursor: pointer; }
.chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.due-rep { flex-direction: row !important; align-items: center; gap: 8px !important; font-size: var(--fs-sm); }
.due-rep svg { width: 15px; height: 15px; }
.due-rep select { flex: 1; width: auto; }
.due-legend { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.due-key { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
/* Project summary cards: compact on a phone (two by two) so the tasks are on screen sooner */
@media (max-width: 640px) {
  .proj-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px !important; }
  .proj-kpis .kpi { padding: 12px 14px; }
  .proj-kpis .kpi .big { font-size: 24px !important; line-height: 1.15; overflow-wrap: anywhere; }
  .proj-kpis .kpi .second { font-size: 12px; }
}

/* A row that's a button looks like every other row: full width, no button border, a line underneath */
button.row { width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; font: inherit; color: inherit; border-radius: 0; }
button.row:last-child { border-bottom: 0; }
/* Task rows: status first, then the due date in its own column so the dates line up */
.row-end .due-col { display: inline-flex; align-items: center; gap: 4px; min-width: 8.5em; white-space: nowrap; }
.row-end .due-col svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .row-end .due-col { min-width: 0; } }
/* Task rows in a narrow card (like My Tasks on Home): the same stacked layout as a phone — the title gets the
   full width, and the status and due date sit underneath it. */
#homeDash > div > .card, .card:has(.row > .check) { container-type: inline-size; }
@container (max-width: 720px) {
  .row:has(> .check) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 6px; align-items: start; }
  .row:has(> .check):has(> .handle) { grid-template-columns: auto auto minmax(0, 1fr); }
  .row:has(> .check) > .handle, .row:has(> .check) > .check { margin-top: 2px; }
  .row:has(> .check) > .row-main, .row:has(> .check) > .row-end { grid-column: -2; }
  .row:has(> .check) > .row-end { justify-content: flex-start; flex-wrap: wrap; }
  .row:has(> .check) > .row-end .chev { margin-left: auto; }
  .row:has(> .check) .due-col { min-width: 0; }
}

/* Quiet hours (Notifications & App) */
.quiet-set { margin: 8px 0 4px 26px; display: grid; gap: 12px; }
.quiet-set[hidden] { display: none; }
.quiet-times { display: grid; grid-template-columns: repeat(2, minmax(0, 160px)); gap: 10px; }
.quiet-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.quiet-days label { position: relative; cursor: pointer; }
.quiet-days input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.quiet-days span { display: inline-grid; place-items: center; min-width: 48px; min-height: 40px; padding: 0 10px; border: 1.5px solid var(--line-strong); border-radius: 999px; font-weight: 600; font-size: 14px; }
.quiet-days input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.quiet-days input:focus-visible + span { outline: 2px solid var(--action); outline-offset: 2px; }
@media (max-width: 760px) { .quiet-set { margin-left: 0; } .quiet-times { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Phones: setup tools stay on a computer ----------
   Imports, schedule building, Play Chart setup, the Board and Workload views, Customize Home, Admin Settings and
   Reports are hidden on a phone. Nothing is removed: they're all still there on a computer. */
.phone-only { display: none !important; }
@media (max-width: 760px) {
  .notice.phone-only { display: flex !important; }
  [onclick^="openRosterImport"], [onclick^="openPunchImport"], [onclick^="openSalesImport"], [onclick^="openRatingImport"],
  [onclick^="openClockImport"], [onclick^="openImport"],
  [onclick^="UI.pc.edit=true"], [onclick^="toggleKiosk"], [onclick^="toggleSchFull"], [onclick^="openHomeCustomize"],
  [onclick^="fillOpen"], [onclick^="undoFill"], [onclick^="openTemplates"], [onclick^="clearDay"],
  [onclick^="openSalesEdit"], [onclick^="openHoursEdit"] svg,
  [onclick^="UI.sch.view='planner'"], [onclick^="UI.sch.view='setup'"],
  [onclick^="UI.taskView='board'"], [onclick^="UI.taskView='workload'"],
  #nav a[href="#admin"], #nav a[href="#reports"] { display: none !important; }
  [onclick^="openHoursEdit"] { pointer-events: none; color: inherit; }
  .goal-input { pointer-events: none; border-color: transparent !important; background: none; }
  body[data-page="admin"] main > :not(.page-head):not(.phone-only),
  body[data-page="reports"] main > :not(.page-head):not(.phone-only),
  body[data-page="admin"] .page-head .head-actions { display: none !important; }
}

/* ---------- Phones: sleeker pages ----------
   The page never slides sideways, the heading is short so the page's own content shows on the first screen,
   page buttons sit side by side, and counters and shortcuts are compact tiles. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  .demo-banner { padding: 6px 12px; font-size: 13px; flex-wrap: nowrap; gap: 6px; }
  .demo-banner > svg { width: 16px; height: 16px; flex: none; }
  .demo-banner > span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .demo-banner .link { flex: none; white-space: nowrap; }
  main { padding-top: var(--s4); }

  .page-head { gap: 12px; margin-bottom: var(--s4); padding-bottom: 14px; }
  .page-head > div:first-child { min-width: 0; }
  .page-head .eyebrow { display: none; }
  body[data-page="home"] .page-head .eyebrow { display: block; font-size: 13px; }
  .page-head h1 { font-size: 24px; line-height: 1.2; margin-top: 0; }
  .page-head p { font-size: 14px; line-height: 1.4; color: var(--muted); margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .page-head .head-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
  .page-head .head-actions:empty { display: none; }
  .page-head .head-actions > .btn { min-height: 42px; padding: 8px 12px; font-size: 15px; min-width: 0; }
  .page-head .head-actions > .badge { justify-self: start; align-self: center; }
  /* Home: the shortcuts below already have Create Task */
  body[data-page="home"]:has(#homeDash .quick) .page-head .head-actions > .btn-primary { display: none; }

  .quick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .quick button { flex-direction: column; justify-content: center; gap: 8px; padding: 14px 6px; font-size: 13px; line-height: 1.25; text-align: center; border-radius: 14px; min-height: 96px; }
  .quick .qi { width: 38px; height: 38px; border-radius: 10px; }
  .quick .qi svg { width: 20px; height: 20px; }

  .counts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .counts .count-cell { border: 0; padding: 12px 16px 14px; min-height: 44px; }
  .counts .count-cell:nth-child(even) { border-left: 1px solid var(--line); }
  .counts .count-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .counts .count-cell .big { font-size: 32px; }
  .counts .count-cell .lbl { font-size: 15px; font-weight: 600; }
  .counts .count-cell .sub { font-size: 12px; }
  .alert-line { gap: 8px 16px; padding: 0 var(--s4) var(--s3); }
  .alert-line button { min-height: 32px; }

  .card-head h2 { font-size: 19px; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; flex: none; }

  /* Search and filters: search on top, the filters two to a row */
  .toolbar:has(> select ~ select) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .toolbar:has(> select ~ select) > * { min-width: 0 !important; width: 100%; }
  .toolbar:has(> select ~ select) > :is(.grow, .seg, div, :only-child) { grid-column: 1 / -1; }
  .toolbar > select.input:only-of-type { flex: 1 1 100%; }
  .toolbar select.input { min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
  /* A toolbar with a heading and buttons: the buttons go under the heading, side by side */
  .toolbar > div[style*="margin-left:auto"] { margin-left: 0 !important; width: 100%; display: grid !important; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  /* View switches stay on one line */
  .seg { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { flex: none; white-space: nowrap; padding: 7px 12px; }
  .toolbar > .seg { justify-self: start; width: auto; }
  .toolbar > .seg button svg { display: none; }

  /* Schedule numbers: sales and labor across, open shifts and needs attention side by side */
  .sch-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sch-stats > :nth-child(-n+2) { grid-column: 1 / -1; }
  .sch-stats .kpi { padding: 14px 16px; gap: 4px; }
  .sch-stats .big { font-size: 28px; margin-top: 4px; }
  .sch-stats .kpi-top { font-size: 15px; }

  /* Forms: dates and times sit two to a row so a form isn't one long scroll */
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; }
  .form-grid > * { grid-column: 1 / -1; min-width: 0; }
  .form-grid > .field:has(> input[type="date"], > input[type="time"], > select[name="priority"], > select[name="status"]) { grid-column: auto; }
  .form-grid input[type="date"], .form-grid input[type="time"] { padding-left: 10px; padding-right: 8px; }
  dialog .dlg-head { position: sticky; top: 0; z-index: 2; background: var(--surface); }

  /* Meeting rows: the arrow is enough; the title gets the room */
  .row > .dateblock ~ .link { font-size: 0; gap: 0; }
  .row > .dateblock ~ .link svg { width: 20px; height: 20px; color: var(--muted); }
  /* My Shifts: a request badge (Giveaway requested, Cancel) goes under the shift instead of squeezing it */
  .my-shift { flex-wrap: wrap; row-gap: 8px; }
  .my-shift-link { flex: 1 1 100%; }
  .my-shift > .row-end { flex-wrap: wrap; flex-shrink: 1; margin-left: calc(56px + 12px); }
  .my-shift > .row-end:empty { display: none; }
  /* Rows with a date and a button: the button moves under the title */
  .row:has(> .dateblock):has(> .btn) { flex-wrap: wrap; }
  .row:has(> .dateblock):has(> .btn) > .row-main { flex: 1 1 calc(100% - 80px); }
  .row:has(> .dateblock) > .btn { flex: none; margin-left: calc(56px + var(--s3)); }
}
@media (max-width: 640px) {
  /* Calendar month: dots for what's on each day; tap a day to see its list */
  .cal:not(.to-cal) .dow { padding: 6px 0; text-align: center; font-size: 12px; }
  .cal:not(.to-cal) .day { min-height: 58px; padding: 4px 2px; text-align: center; cursor: pointer; }
  .cal:not(.to-cal) .dn { display: grid; width: 30px; height: 30px; margin: 0 auto 2px; font-size: 14px; }
  .cal:not(.to-cal) .ev { pointer-events: none; display: inline-block; width: 7px; height: 7px; padding: 0; margin: 1px; border: 0; border-radius: 50%; font-size: 0; vertical-align: middle; }
  .cal:not(.to-cal) .ev.t { background: var(--brand); }
  .cal:not(.to-cal) .ev.m { background: var(--action); }
  .cal:not(.to-cal) .ev.e { background: #d08a00; }
  .chart-toolbar .legend { margin-left: 0 !important; gap: 6px 14px; font-size: 14px; }
  /* The filter boxes match the dot colors */
  body[data-page="calendar"] .legend label:nth-child(1) input { accent-color: var(--brand); }
  body[data-page="calendar"] .legend label:nth-child(2) input { accent-color: var(--action); }
  body[data-page="calendar"] .legend label:nth-child(3) input { accent-color: #d08a00; }
}
/* Press-and-hold menu for a chat message (phones and tablets) */
@media (hover: none) { .chat-msg { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .chat-msg textarea { -webkit-user-select: text; user-select: text; } }
.chat-sheet { display: grid; gap: 12px; }
.chat-sheet-msg { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: var(--surface-2, var(--bg)); border-radius: 14px; }
.chat-sheet-msg p { margin: 2px 0 0; color: var(--ink-2); line-height: 1.4; overflow-wrap: anywhere; }
.chat-sheet-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.chat-sheet-emoji button { font-size: 24px; height: 48px; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; cursor: pointer; }
.chat-sheet-emoji button.on { border-color: var(--action); background: var(--tint, rgba(0,0,0,.04)); }
.chat-sheet-list { display: grid; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.chat-sheet-list button { display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 0 14px; border: 0; border-top: 1px solid var(--line); background: var(--surface); color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.chat-sheet-list button:first-child { border-top: 0; }
.chat-sheet-list svg { width: 20px; height: 20px; flex: none; color: var(--ink-2); }
.chat-sheet-cancel { width: 100%; justify-content: center; }

/* A checklist linked to a Play Chart position: a small button on that spot's header. */
.pc-cl { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; min-height: 22px; padding: 1px 7px; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; }
.pc-cl svg { width: 13px; height: 13px; }
.pc-cl.todo { color: var(--brand-deep, #00374d); }
.pc-cl.late { background: var(--bad); color: #fff; box-shadow: 0 0 0 2px #fff; }
.pc-cl.done { color: var(--ok, #1a7f4b); }
.pc-cl + .pc-tag { margin-left: 4px; }
@media (max-width: 760px) {
  .pc-cl { flex: none; gap: 1px; min-height: 18px; padding: 0 5px; font-size: 10px; }
  .pc-cl svg { width: 11px; height: 11px; }
  .pc-stack .pc-head { gap: 5px; padding: 6px 8px; }
}
.cl-pos { align-items: center; }
.cl-pos .side-tag { margin-right: 2px; }
/* A meeting on My Shifts sits between the shifts, marked so it reads differently from a shift. */
.my-shift.my-meet .row-title { color: var(--ink); }
a.my-shift-link, a.my-shift-link * { text-decoration: none; color: inherit; }
.my-meet-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; background: var(--brand-soft, rgba(0, 85, 115, .1)); color: var(--brand-deep, #00374d); font-size: 12px; font-weight: 600; }
.my-meet-tag svg { width: 13px; height: 13px; }
/* Meeting time on the schedule: striped, so it reads as paid time that isn't a spot on the floor. */
.sch-bar.meeting { background: repeating-linear-gradient(135deg, var(--c), var(--c) 8px, color-mix(in srgb, var(--c) 78%, #fff) 8px, color-mix(in srgb, var(--c) 78%, #fff) 16px); }
.sch-bar.meeting svg, .sch-chip small svg { width: 12px; height: 12px; vertical-align: -2px; }
/* ---------- Daywell Staff → Inbox (js/inbox.js) ---------- */
.inbox { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: var(--s4); align-items: start; }
.inbox .card { margin: 0; min-width: 0; }
.inbox-tools { padding: 12px; border-bottom: 1px solid var(--line); display: grid; gap: 10px; }
.inbox-tools .seg { flex-wrap: wrap; }
.inbox-search { position: relative; display: block; }
.inbox-search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }
.inbox-search .input { padding-left: 32px; }
.inbox-rows { max-height: calc(100vh - 260px); overflow: auto; }
.inbox-row { display: flex; gap: 10px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; cursor: pointer; font: inherit; }
.inbox-row:hover { background: var(--surface-2); }
.inbox-row.on { background: var(--info-bg); }
.inbox-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; }
.inbox-row.unread .inbox-dot { background: var(--action); }
.inbox-row-main { min-width: 0; flex: 1; display: grid; gap: 2px; }
.inbox-row-top { display: flex; justify-content: space-between; gap: 8px; }
.inbox-row-top b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.inbox-row.unread .inbox-row-top b, .inbox-row.unread .inbox-row-subj { font-weight: 700; }
.inbox-row-subj, .inbox-row-snip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-snip { color: var(--muted); font-size: var(--fs-sm); }
.inbox-row-meta { display: flex; gap: 8px; align-items: center; margin-top: 2px; font-size: var(--fs-sm); }
.inbox-box { font-size: 11px; padding: 1px 8px; }
.inbox-empty { display: grid; place-items: center; gap: 8px; padding: 64px 16px; color: var(--muted); text-align: center; }
.inbox-empty svg { width: 36px; height: 36px; }
.inbox-head { display: flex; gap: 10px; align-items: flex-start; padding: 16px 16px 8px; }
.inbox-head h2 { margin: 0 0 4px; font-size: 19px; overflow-wrap: anywhere; }
.inbox-head-main { min-width: 0; flex: 1; }
.inbox-head .badge { margin-left: 6px; }
.inbox-back { display: none; }
.inbox-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 16px 12px; border-bottom: 1px solid var(--line); }
.inbox-assign select { width: auto; min-width: 160px; padding-top: 6px; padding-bottom: 6px; }
.inbox-msgs { padding: 12px 16px; display: grid; gap: 12px; }
.inbox-msg { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; min-width: 0; }
.inbox-msg.out { background: var(--surface-2); }
.inbox-msg header { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.inbox-msg header > div { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.inbox-msg-when { white-space: nowrap; }
.inbox-frame { width: 100%; height: 120px; border: 0; border-radius: 8px; background: #fff; display: block; }
.inbox-text, .inbox-plain pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin: 0; }
.inbox-plain { margin-top: 8px; font-size: var(--fs-sm); }
.inbox-plain summary { cursor: pointer; color: var(--muted); }
.inbox-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.inbox-files .chip { cursor: pointer; }
.inbox-reply { padding: 12px 16px 16px; border-top: 1px solid var(--line); }
.inbox-reply-foot { display: flex; gap: 8px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; }
.inbox-reply-foot .hint { margin-right: auto; }
@media (max-width: 900px) {
  .inbox { grid-template-columns: 1fr; }
  .inbox.has-thread .inbox-list { display: none; }
  .inbox:not(.has-thread) .inbox-thread { display: none; }
  .inbox-back { display: inline-flex; }
  .inbox-rows { max-height: none; }
}
.inbox-sig { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--fs-sm); }
.inbox-sig pre { margin: 0; flex: 1; min-width: 140px; white-space: pre-wrap; font: inherit; color: var(--muted); }
.inbox-sig.off pre { text-decoration: line-through; opacity: .5; }
.inbox-sig .check-line { margin: 0; }
.inbox-sig-prev { background: var(--surface-2); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; }
.inbox-sig-prev pre { margin: 4px 0 0; white-space: pre-wrap; font: inherit; color: var(--muted); }
.inbox-tpl { width: auto; max-width: 240px; margin-right: auto; padding-top: 6px; padding-bottom: 6px; }

/* Tasks: quick add and the shorter task form */
.task-quick { display: flex; gap: 8px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.task-quick > svg { width: 18px; height: 18px; color: var(--muted); flex: none; }
.task-quick .input { flex: 1; min-width: 0; border-color: transparent; background: transparent; }
.task-quick .input:focus { border-color: var(--line); background: var(--surface); }
.due-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.due-quick .chip { cursor: pointer; font-size: 12px; }
.due-quick .chip.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.task-more { margin-top: 14px; }
.task-more > summary { cursor: pointer; margin-bottom: 10px; }
.task-more > summary .hint { margin-left: 6px; }
@media (max-width: 600px) { .task-quick .btn-quiet { display: none; } }

/* Daywell Staff: badges in People & Access line up; pending invitations get room at the top and line up with their rows */
.dw-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dw-chips .chip svg { width: 14px; height: 14px; flex: none; }
.dw-pending { margin-top: 18px; }
.dw-invites .dw-h3 { margin: 0; padding: 20px var(--s5) 6px; }
.dw-invites .row:last-child { border-bottom: 0; }

/* A box without a heading still gets room at the top (Maintenance Mode, Create Workspace, and the like). */
.card > .card-body:first-child, form.card > .card-body:first-child { padding-top: var(--s5); }

/* Schedule on phones: the date row spans the full width, so it lines up with the department filter under it. */
@media (max-width: 720px) {
  .sch-toolbar .date-nav { flex: 1 1 100%; }
  .sch-toolbar .date-nav .date-box { flex: 1; min-width: 0; }
  .sch-toolbar > .seg, .sch-toolbar > select { flex: 1 1 100%; }
}
.field-link { align-self: flex-start; margin-top: 4px; font-size: var(--fs-sm); }

/* Inbox: simple underlined tabs instead of a pill (they fit, and scroll sideways on small screens) */
.inbox-tools { padding: 0 12px 12px; }
.inbox-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--line); margin: 0 -12px; padding: 0 8px; }
.inbox-tabs::-webkit-scrollbar { display: none; }
.inbox-tabs button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 12px 10px 10px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--muted); font: inherit; font-size: var(--fs-sm); font-weight: 500; cursor: pointer; margin-bottom: -1px; white-space: nowrap; }
.inbox-tabs button:hover { color: var(--ink); }
.inbox-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.inbox-tabs .n { min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--surface-2); color: var(--ink-2); font-size: 11px; display: inline-grid; place-items: center; }
.inbox-tabs button.on .n { background: var(--brand); color: #fff; }
.inbox-search { margin-top: 2px; }
.inbox-sig-img { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; }
.sig-pic-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sig-prev { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.sig-prev img { width: 64px; height: auto; border-radius: 8px; flex: none; }
.sig-prev pre { margin: 0; white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--muted); }
.sig-prev pre b { color: var(--ink); font-size: 14px; }

/* Admin Settings → Security: settings in an even list, each name with its explanation lined up under it */
.sec-list { display: grid; gap: 0; }
.sec-list > .dw-radio, .sec-list > .sec-row { padding: 14px 0; border-bottom: 1px solid var(--line); }
.sec-row { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.sec-row > span { display: grid; gap: 2px; flex: 1 1 260px; }
.sec-row select { width: auto; min-width: 160px; }
.sec-list .sec-actions { padding-top: 14px; }

/* Ratings (leaders): a simple week view */
.rt-week .rt-hero-top { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rt-hero-top select { width: auto; max-width: 100%; }
.rt-progress { margin-top: 16px; }
.rt-progress-text { font-size: 15px; margin-bottom: 8px; }
.rt-bar-big { height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.rt-bar-big i { display: block; height: 100%; background: var(--brand); border-radius: 6px; transition: width .4s; }
.rt-more { position: relative; }
.rt-more > summary { list-style: none; cursor: pointer; }
.rt-more > summary::-webkit-details-marker { display: none; }
.rt-more-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 240px; z-index: 30; }
.rt-filters { flex-wrap: wrap; gap: 10px; align-items: center; }
.rt-filters input { width: 270px; max-width: 100%; }
.rt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rt-chips button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: var(--radius-pill); padding: 6px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.rt-chips button.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.rt-list { display: grid; }
.rt-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.rt-row:hover { background: var(--surface-2); }
.rt-row:last-child { border-bottom: 0; }
.rt-row-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rt-row-main b { font-weight: 600; }
.rt-score-col { display: grid; justify-items: end; gap: 2px; min-width: 76px; }
.rt-score { font-size: 22px; font-weight: 700; line-height: 1; }
.rt-trend { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.rt-trend svg { width: 12px; height: 12px; }
.rt-trend.up { color: var(--ok); } .rt-trend.down { color: var(--bad); }
.rt-rate { pointer-events: none; }
@media (max-width: 600px) { .rt-filters input { width: 100%; } .rt-end .badge { white-space: normal; text-align: right; } }
.rt-left { margin-left: 6px; padding: 1px 7px; border-radius: 9px; background: rgba(255,255,255,.22); font-size: 11px; font-weight: 600; }
/* Ratings list: every row uses the same columns, so labels, scores and Rate buttons line up down the page */
.rt-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; }
.rt-end { display: flex; justify-content: flex-end; align-items: center; min-width: 96px; text-align: right; }
.rt-end .hint { font-size: var(--fs-sm); }
.rt-score-col { justify-items: end; }
/* Ratings Setup: each value card fills its row's height, so Edit and Remove sit at the bottom, lined up across the row */
.rt-field-card { grid-template-rows: 1fr auto; height: 100%; }
.rt-field-actions { align-self: end; padding-top: 10px; border-top: 1px solid var(--line); margin-top: 4px; }

/* ---------- Daywell Staff: Time Clock ---------- */
.tc-clock { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: var(--s5); }
.tc-status { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.tc-big { font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tc-btn { min-height: 56px; padding: 0 28px; font-size: 18px; justify-content: center; }
.tc-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.tc-kpis { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tc-kpis .kpi .big { font-size: 26px; }
.tc-nav { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tc-actions { display: flex; gap: 10px; flex-wrap: wrap; padding: var(--s4) var(--s5) var(--s5); }
.tc-mine-actions { display: flex; padding: var(--s3) var(--s5) var(--s5); }
.tc-table tfoot th { border-top: 2px solid var(--line); }
.tc-rate { display: grid; grid-template-columns: 1fr 120px 130px; align-items: center; gap: 10px; }
.tc-money { display: flex; align-items: center; gap: 4px; }
.tc-diff { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 6px 0; font-size: 14px; }
.tc-decide { display: flex; gap: 8px; flex-wrap: wrap; }
.tc-reqs .row { flex-wrap: wrap; }
.tc-reqs .row-main { flex: 1 1 300px; min-width: 0; }
@media (max-width: 760px) {
  .tc-clock { flex-direction: column; align-items: stretch; }
  .tc-btn { width: 100%; }
  .tc-btns { flex-direction: column; }
  .tc-actions, .tc-mine-actions { padding: var(--s4); }
  .tc-decide { width: 100%; }
  .tc-decide .btn { flex: 1; justify-content: center; }
  .tc-actions .btn, .tc-mine-actions .btn { flex: 1 1 100%; justify-content: center; }
  .tc-team .card-head { padding: var(--s4) var(--s4) var(--s2); }
  .tc-nav { width: 100%; justify-content: space-between; }
  .tc-rate { grid-template-columns: 1fr 1fr; }
  /* Team Hours & Pay: each person is a small card on phones instead of a wide table. */
  .tc-table thead { display: none; }
  .tc-table, .tc-table tbody, .tc-table tfoot { display: block; width: 100%; }
  .tc-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 14px var(--s4); border-bottom: 1px solid var(--line); }
  table.data.tc-table td, table.data.tc-table th { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0; border: 0; text-align: left; }
  .tc-table [data-l]::before { content: attr(data-l); color: var(--ink-2); font-weight: 400; font-size: 13px; }
  .tc-table .tc-who, .tc-table .tc-pay, .tc-table .tc-go { grid-column: 1 / -1; }
  .tc-table .tc-who { justify-content: flex-start; flex-wrap: wrap; font-size: 16px; }
  .tc-table .tc-pay { font-weight: 700; }
  .tc-table .tc-go { justify-content: flex-start; }
  .tc-table .tc-blank { display: none; }
  .tc-table tfoot tr { border-bottom: 0; }
  .tc-team .table-scroll { overflow: visible; }
  .tc-rate .row-main { grid-column: 1 / -1; }
}

/* ---------- Below the iPhone status bar (the App Store app) ----------
   In the app, the page starts at the very top of the screen, under the time, Wi-Fi and battery. These keep everything
   below them. Everywhere else (browsers, the Home Screen web app) the status bar space is 0, so nothing changes. */
.shell { padding-top: env(safe-area-inset-top); }
.topbar, .support-bar { top: env(safe-area-inset-top); }
body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top); background: var(--surface); z-index: 45; pointer-events: none; }
.sidebar, .drawer { padding-top: env(safe-area-inset-top); }
.me-menu { top: calc(62px + env(safe-area-inset-top)); }
body.signed-out .auth { padding-top: calc(24px + env(safe-area-inset-top)); }
body.chat-focus[data-page="chat"] .shell { padding-top: env(safe-area-inset-top); }
/* On the chat screen the page itself doesn't scroll, so the top bar is already below the status bar; pushing it down
   again left a blank band and covered the conversation's name. */
body[data-page="chat"] .topbar { top: 0; }
/* Press and hold a message: it sinks a little until the menu opens. */
.chat-msg { transition: transform .3s ease; }
.chat-msg.pressing { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .chat-msg.pressing { transform: none; } }

/* ---------- Chat on phones: swiping back follows your finger ----------
   While you drag, the conversation (or thread) moves with your finger and the screen it goes back to shows underneath,
   moving a little, like iPhone apps. Opening one slides in from the right. */
@media (max-width: 760px) {
  .chat.chat-drag { position: relative; }
  .chat.chat-drag .swipe-back { display: block !important; position: absolute; inset: 0; z-index: 1; overflow: hidden; }
  .chat.chat-drag .chat-main.swipe-back { display: flex !important; }
  .chat.chat-drag .swipe-front { position: relative; z-index: 2; background: var(--surface); box-shadow: -12px 0 32px rgba(3, 40, 52, .18); will-change: transform; }
  .chat-enter { animation: chatSlideIn .28s cubic-bezier(.2, .8, .2, 1); }
}
@keyframes chatSlideIn { from { transform: translateX(45%); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-enter { animation: none; } }

/* App Store screenshots of the demo (?demo=1&shot=1) leave out the demo banner. */
html.shot .demo-banner { display: none !important; }
html.shot .demo-only { display: none !important; }

/* Due-date calendar, in the website's picker style (the demo-booking days and times): a soft panel, rounded day
   buttons with a light outline on hover, today outlined, the chosen day filled in the brand color, pill buttons below. */
.due-pop { border-radius: 16px; padding: 10px; gap: 8px; overflow-y: auto; border-color: var(--line); box-shadow: 0 20px 50px rgba(16, 32, 40, .18); }
.due-top { background: var(--surface-2); border-radius: 12px; padding: 4px 6px; }
.due-top b { font-size: 15px; font-weight: 700; }
.due-top .icon-btn { width: 30px; height: 30px; border-radius: 9px; }
.due-top .icon-btn:hover { background: var(--surface); }
.due-grid { gap: 2px; }
.due-day { aspect-ratio: auto !important; height: 28px; font-size: 13px; }
.due-dow { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.due-day { border-radius: 10px; border: 1.5px solid transparent; font-weight: 500; transition: background .12s, border-color .12s; }
.due-day:hover { background: var(--surface-2); border-color: var(--line); }
.due-day.out { color: var(--muted); opacity: .55; }
.due-day.today { border-color: var(--brand); color: var(--brand); font-weight: 700; }
.due-day.mark { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.due-day.sel, .due-day.sel:hover { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
.due-day:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.due-quick { gap: 6px; }
.due-quick .chip-btn { font: inherit; font-size: 12px; font-weight: 600; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; padding: 5px 10px; cursor: pointer; }
.due-quick .chip-btn:hover { border-color: var(--brand); color: var(--brand); }
.due-rep { background: var(--surface-2); border-radius: 10px; padding: 4px 8px; }
.due-dow { padding: 2px 0 !important; }
.due-rep select { border-radius: 10px; }
.due-key.mark { background: color-mix(in srgb, var(--brand) 18%, transparent); border-radius: 4px; }

/* Compact: the repeat picker and the legend take one slim line each */
.due-rep select.input { height: 30px; padding-top: 2px; padding-bottom: 2px; font-size: 13px; }
.due-pop .due-legend { font-size: 11px; line-height: 1.2; }
.due-pop .due-top b { font-size: 14px; }
/* Every date box uses this calendar (see openDateField): days outside the allowed range are faded and can't be picked */
.due-day:disabled, .due-day:disabled:hover { opacity: .28; background: none; border-color: transparent; cursor: default; }
.due-top .icon-btn:disabled { opacity: .3; cursor: default; background: none; }
input[type="date"]:not([data-native]) { cursor: pointer; }

/* Quick add: followers and Private under the box. They appear while you're adding a task (or once one is chosen). */
.task-quick { flex-wrap: wrap; }
.quick-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; flex-basis: 100%; grid-column: 1 / -1; padding: 2px 0 4px 30px; }
.task-quick:not(:focus-within):not(:has(.pp-chip, input[name="private"]:not(:checked))) .quick-extra,
.ptask-new:not(.typing):not(:focus-within):not(:has(.pp-chip, input[name="private"]:not(:checked))) .quick-extra { display: none; }   /* (Private is on by default, so it shows only once someone turns it off) */
.quick-fol { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; }
.quick-fol .pp { flex: 1; min-width: 0; }
.quick-fol .pp-box { min-height: 34px; padding-top: 3px; padding-bottom: 3px; }
.task-private { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 14px; }
.task-private svg { width: 15px; height: 15px; color: var(--muted); }
.task-private input:checked ~ svg { color: var(--brand); }
.task-private.compact { white-space: nowrap; }
.task-private:not(.compact) { flex-wrap: wrap; }
.task-lock { display: inline-flex; align-items: center; gap: 3px; color: var(--muted); }
.task-lock svg { width: 13px; height: 13px; }
.kv-edit dd .task-private + .hint { margin-left: 4px; }
@media (max-width: 600px) { .quick-extra { padding-left: 0; } }

/* Comments: Enter posts; your own comments can be edited or deleted */
.comment-send { display: flex; align-items: center; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.comment-acts { float: right; display: inline-flex; gap: 10px; font-size: 13px; }
.comment-acts .link { color: var(--muted); }
.comment-acts .comment-del { float: none; }
.comment-acts { opacity: 0; }
.comment:hover .comment-acts, .comment-acts:focus-within { opacity: 1; }
@media (hover: none) { .comment-acts { opacity: 1; } }
.comment-edit { margin-top: 6px; }
/* Decisions & Updates: edit in place */
.dec-edit { display: flex; align-items: center; gap: 8px; }
.dec-edit .input { flex: 1; min-width: 0; }
.row-pen + .row-x { margin-left: 0; }
/* Task details: the "More details" link for the parts that aren't set yet */
.task-more-link { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; text-align: left; }
.task-more-link svg { width: 14px; height: 14px; }
.task-more-link .hint { font-weight: 400; }
/* On phones the task details read as a tidy two-column list (label | value) instead of a tall stack */
@media (max-width: 600px) {
  .drawer .kv.kv-edit { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; align-items: center; }
  .drawer .kv.kv-edit dt { font-size: 13px; align-self: center; }
  .drawer .kv.kv-edit dd { margin: 0; min-height: 34px; }
  .drawer .kv.kv-edit dd .kv-pen { width: 28px; height: 28px; }
  .drawer .kv.kv-edit dd:has(> select, > .te-pair, > .te-followers) { grid-column: 1 / -1; }
  .drawer .kv.kv-edit .task-more-dt { display: none; }
  .drawer .kv.kv-edit .task-more-dt + dd { grid-column: 1 / -1; }
}
/* A project's Board: its own columns (stages), cards you drag between them */
.ptv-seg { margin-right: 10px; }
.ptv-hint { margin: 0; padding: 0 16px 8px; }
.pb-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 16px 12px; }
.pb-board { display: grid; grid-template-columns: repeat(var(--cols), minmax(220px, 1fr)); gap: 12px; padding: 0 16px 16px; overflow-x: auto; }
.pb-col { background: var(--surface-2); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 160px; transition: box-shadow .12s, background .12s; }
.pb-col.drop { box-shadow: inset 0 0 0 2px var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface-2)); }
.pb-col.is-done .pb-head b { color: var(--ok, #1f8a4c); }
.pb-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.pb-head b { font-size: 14px; }
.pb-head .n { font-size: 12px; color: var(--muted); background: var(--surface); border-radius: 999px; padding: 1px 8px; }
.pb-done { margin-left: auto; color: var(--ok, #1f8a4c); display: inline-flex; }
.pb-done svg { width: 15px; height: 15px; }
.pb-list { display: grid; gap: 8px; align-content: start; flex: 1; }
.pb-card { display: grid; gap: 6px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: grab; box-shadow: var(--shadow); }
.pb-card:hover { border-color: var(--brand); }
.pb-card.dragging { opacity: .4; }
.pb-card.late { border-left: 3px solid var(--bad); }
.pb-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.pb-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pb-meta svg { width: 12px; height: 12px; }
.pb-empty { border: 1.5px dashed var(--line-strong); border-radius: 10px; padding: 14px; text-align: center; font-size: 13px; color: var(--muted); }
.pb-add .input { background: transparent; border-color: transparent; padding: 7px 10px; font-size: 13px; }
.pb-add .input:focus { background: var(--surface); border-color: var(--line); }
.pcol-list { display: grid; gap: 8px; }
.pcol-row { display: flex; align-items: center; gap: 8px; }
.pcol-row .input { flex: 1; min-width: 0; }
.pcol-n { width: 22px; text-align: center; font-weight: 700; color: var(--muted); font-size: 13px; }
.pcol-done { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
/* Instant start: a small note at the bottom while the latest data loads under last time's copy */
.upd-pill { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 950; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: 13px; font-weight: 600; max-width: calc(100% - 32px); }
@media (min-width: 900px) { .upd-pill { bottom: 20px; } }
.upd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand); animation: updpulse 1s ease-in-out infinite alternate; }
@keyframes updpulse { from { opacity: .3; } to { opacity: 1; } }
.upd-pill.failed { color: var(--bad); }
.upd-pill.failed svg { width: 15px; height: 15px; }
/* Play Chart: a locked spot shows a filled lock and a solid outline; its people can't be dragged */
.pc-lock { margin-left: auto; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; border: 0; background: none; color: var(--muted); opacity: .45; cursor: pointer; flex: none; }
.pc-lock svg { width: 14px; height: 14px; }
.pc-box:hover .pc-lock, .pc-lock:focus-visible { opacity: 1; }
.pc-lock.on { opacity: 1; color: #fff; background: var(--ink); }
@media (hover: none) { .pc-lock { opacity: .8; } }
.pc-box.locked { box-shadow: 0 0 0 2px var(--ink) inset; }
.pc-box.locked .pc-person { cursor: default; }
/* Team member profile: Select all / Clear all / Set all to, with Undo, on the same line as the heading */
.bulk-h { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.bulk-bar { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 14px; font-weight: 400; }
.bulk-lvl { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.bulk-lvl select.input { width: auto; min-width: 0; padding-top: 4px; padding-bottom: 4px; font-size: 13px; }
.bulk-undo[hidden] { display: none !important; }
.bulk-dept { margin-left: 8px; font-size: 12px; font-weight: 600; }
/* Task comments: quick emoji reactions */
.c-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.c-react { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 13px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.c-react.mine { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.c-react b { font-weight: 600; font-size: 12px; }
.c-react-add { opacity: .55; }
.comment:hover .c-react-add, .c-react-add:focus-visible, .c-react-add[aria-expanded="true"] { opacity: 1; }
@media (hover: none) { .c-react-add { opacity: .8; } }
.c-pick { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); }
.c-pick button { border: 0; background: none; font-size: 18px; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; }
.c-pick button:hover { background: var(--surface-2); }
/* Play Chart: Autofill and Clear Chart sit together on the right of the chart bar */
.pc-fillbar { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
/* Roster by department: a quiet header per department (color dot), a small heading per position with Start / End
   above the time columns, then one clean line per person. The times sit in fixed columns so they line up. */
/* Each department is a solid band in its own color, its positions are tinted the same color, and every row carries a
   stripe of that color down its left side, so it's easy to see who is in which department at a glance. */
.r2-dept { display: flex; align-items: center; gap: 8px; padding: 10px 16px; margin-top: 12px; background: var(--c); color: #fff; }
.r2-dept:first-child { margin-top: 0; }
.r2-dept .side-tag { background: rgba(255, 255, 255, .22); color: #fff; }
.r2-dname { font-weight: 700; font-size: 16px; }
.r2-n { margin-left: auto; font-size: 12px; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .2); border-radius: 999px; padding: 2px 9px; }
.r2-pos { background: color-mix(in srgb, var(--c) 10%, var(--surface)); color: var(--c) !important; border-left: 4px solid var(--c); padding-left: 12px !important; }
.r2-pos .r2-cols > span { color: color-mix(in srgb, var(--c) 70%, var(--ink-2)); }
.r2-group .r2-row { border-left: 4px solid var(--c); padding-left: 12px; }
.r2-pos, .r2-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 76px 16px 76px; column-gap: 12px; align-items: center; padding-left: 16px; padding-right: 16px; }
.r2-pos { padding-top: 6px; padding-bottom: 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.r2-pos > span:first-child { grid-column: 1 / 3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-cols { display: contents; }
.r2-cols > span { text-align: right; font-size: 10px; letter-spacing: .08em; }
.r2-row { width: 100%; min-height: 50px; padding-top: 6px; padding-bottom: 6px; border: 0; background: none; font: inherit; color: inherit; text-align: left; border-bottom: 1px solid var(--line); }
.r2-group .r2-row:last-child { border-bottom: 0; }
button.r2-row { cursor: pointer; }
button.r2-row:hover { background: var(--surface-2); }
button.r2-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.r2-row .avatar.sm { width: 30px; height: 30px; font-size: 11px; }
.r2-who { display: grid; min-width: 0; }
.r2-name { font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-you { font-weight: 400; color: var(--muted); font-size: 13px; }
.r2-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r2-t { display: flex; justify-content: flex-end; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.r2-t b { font-size: 16px; font-weight: 600; color: var(--ink); }
.r2-t small { font-size: 11px; font-weight: 600; color: var(--muted); width: 16px; text-align: left; }
.r2-to { display: grid; place-items: center; color: var(--muted); }
.r2-to svg { width: 14px; height: 14px; }
.roster-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.roster-tabs { margin: 0; }
.roster-add { margin-left: auto; }
.roster-now { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--ok, #1f8a4c); }
.roster-sub { margin: 0; padding: 12px 16px 4px; }
.roster-full { overflow: hidden; }
/* Who's on right now (today only): a pulsing green dot on their photo; shifts that already ended fade back */
.r2-face { position: relative; display: inline-flex; }
.r2-live { width: 10px; height: 10px; border-radius: 50%; background: var(--ok, #1f8a4c); box-shadow: 0 0 0 2px var(--surface); display: inline-block; flex: none; }
.r2-face .r2-live { position: absolute; right: -2px; bottom: -2px; }
.r2-live { animation: r2pulse 2s ease-in-out infinite; }
@keyframes r2pulse { 0%, 100% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 2px color-mix(in srgb, var(--ok, #1f8a4c) 40%, transparent); } 50% { box-shadow: 0 0 0 2px var(--surface), 0 0 0 6px color-mix(in srgb, var(--ok, #1f8a4c) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .r2-live { animation: none; } }
.r2-on { color: var(--ok, #1f8a4c); font-weight: 600; }
.r2-row.is-live { background: color-mix(in srgb, var(--ok, #1f8a4c) 5%, var(--surface)); }
.r2-row.is-done { opacity: .5; }
.r2-row.is-done:hover { opacity: .8; }
.roster-tabs .n { margin-left: 4px; }
.r2-row.is-open .r2-name { color: var(--warn, #b26a00); }
.r2-open { background: var(--warn-bg, #fff4e0) !important; color: var(--warn, #b26a00) !important; }
.r2-open svg { width: 14px; height: 14px; }
@media (max-width: 600px) {
  .r2-pos, .r2-row { grid-template-columns: 28px minmax(0, 1fr) 62px 12px 62px; column-gap: 8px; padding-left: 14px; padding-right: 14px; }
  .r2-pos, .r2-group .r2-row { padding-left: 10px !important; }
  .r2-row .avatar.sm { width: 28px; height: 28px; }
  .r2-t b { font-size: 15px; }
  .r2-name { font-size: 14px; }
}/* Give Away or Trade: built for phones first (full width, nothing pushed to one side) */
.swap-dlg { width: min(520px, 100%); box-sizing: border-box; }
.swap-dlg .split-who { margin-top: 0; }
.swap-dlg .split-opt span { grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; }
.swap-dlg .split-opt small { grid-column: 1 / -1; }
.swap-trade { margin-top: 14px; display: grid; gap: 6px; }
.swap-trade[hidden] { display: none; }
.swap-list { display: grid; gap: 6px; max-height: 280px; overflow-y: auto; padding: 2px; }
.swap-row { cursor: pointer; display: block; }
.swap-row input { position: absolute; opacity: 0; pointer-events: none; }
.swap-row-in { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 12px; transition: border-color .12s, background .12s; }
.swap-row-in .dateblock { width: 46px; padding: 4px 0; }
.swap-row-in .dateblock b { font-size: 18px; }
.swap-row-main { display: grid; gap: 2px; min-width: 0; }
.swap-row-main small { color: var(--muted); font-size: 13px; }
.swap-row:hover .swap-row-in { border-color: var(--line-strong); }
.swap-row input:checked + .swap-row-in { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.swap-row input:focus-visible + .swap-row-in { outline: 2px solid var(--brand); outline-offset: 2px; }
.swap-none { margin: 0; padding: 10px 12px; background: var(--surface-2); border-radius: 12px; }
.swap-note { margin-top: 14px; }
.req-acts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
@media (max-width: 600px) {
  .swap-dlg .split-who { grid-template-columns: 1fr; }
  .swap-dlg .dlg-foot { flex-direction: column-reverse; }
  .swap-dlg .dlg-foot > .btn { width: 100%; }
}
/* My Shifts: one box per day, the date once on the left and that day's shifts stacked beside it */
.my-shift.my-day { align-items: flex-start; gap: 12px; flex-wrap: nowrap; }
.my-day-date { border: 0; background: none; padding: 0; cursor: pointer; flex: none; }
.my-day-date:hover .dateblock { border-color: var(--brand); }
.my-day-shifts { flex: 1; min-width: 0; display: grid; gap: 8px; }
.my-part { display: flex; align-items: center; gap: 10px; min-width: 0; }
.my-part .my-shift-link { flex: 1; }
.my-part .row-end { flex: none; }
.my-day.multi .my-part + .my-part { border-top: 1px dashed var(--line); padding-top: 8px; }
.my-day-total { font-size: 12px; font-weight: 600; }
.my-part.away { background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--line) 45%, transparent) 10px 11px); border-left: 3px dashed var(--line-strong); padding-left: 8px; border-radius: 6px; }
.my-part.away .row-title { color: var(--ink-2); }
@media (max-width: 600px) {
  .my-part { flex-wrap: wrap; row-gap: 6px; }
  .my-part .my-shift-link { flex: 1 1 100%; }
  .my-part > .row-end { margin-left: 0 !important; }
  .my-part > .row-end:empty { display: none; }
}
/* Setup: the Edit Setup / Done button sits on the right, where it's easy to see */
.setup-bar { justify-content: flex-end; align-items: center; gap: 12px; }
/* Week view: a + in each cell to add a shift there (shows on hover; always on touch screens) */
.sch-week td { position: relative; }
.wk-add { display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 2px 0 0; border: 1.5px dashed var(--line-strong); border-radius: 8px; background: none; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .12s; }
.wk-add svg { width: 14px; height: 14px; }
.sch-week td:hover .wk-add, .wk-add:focus-visible { opacity: 1; }
.wk-add:hover { border-color: var(--action); color: var(--action); }
@media (hover: none) { .wk-add { opacity: .7; } }
/* Shift window: train someone on the position and assign them in one step */
.sch-addpos { margin-top: 12px; padding: 12px; border: 1px dashed var(--line-strong); border-radius: 12px; display: grid; gap: 6px; }
/* Split Shift, in the same style as the calendar: a soft panel, a two-part bar, pill picks */
.split-dlg { width: min(480px, 100%); }
.split-k { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.split-sum { display: flex; gap: 10px; align-items: flex-start; background: var(--surface-2); border-radius: 12px; padding: 10px 12px; margin-bottom: 14px; }
.split-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-top: 6px; flex: none; }
.split-pick { border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; gap: 10px; }
.split-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; gap: 3px; }
.split-a { width: var(--split, 50%); background: var(--c); border-radius: 999px; }
.split-b { flex: 1; background: color-mix(in srgb, var(--c) 35%, transparent); border-radius: 999px; }
.split-parts { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.split-range { width: 100%; accent-color: var(--brand); margin: 0; }
.split-chips .chip-btn.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.split-who { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.split-who .split-k { grid-column: 1 / -1; margin-bottom: 0; }
.split-opt { cursor: pointer; }
.split-opt input { position: absolute; opacity: 0; pointer-events: none; }
.split-opt span { display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; height: 100%; box-sizing: border-box; transition: border-color .12s, background .12s; }
.split-opt span svg { width: 16px; height: 16px; color: var(--muted); }
.split-opt small { color: var(--muted); font-size: 12px; }
.split-opt:hover span { border-color: var(--line-strong); }
.split-opt input:checked + span { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.split-opt input:checked + span svg { color: var(--brand); }
.split-opt input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.split-job { margin-top: 14px; }
@media (max-width: 480px) { .split-who { grid-template-columns: 1fr; } }
/* Setup: drag the dots to reorder positions */
.job-handle { display: inline-grid; place-items: center; cursor: grab; color: var(--muted); padding: 0 2px; margin-left: -4px; border-radius: 4px; }
.job-handle svg { width: 14px; height: 14px; }
.job-handle:hover, .job-handle:focus-visible { color: var(--brand); }
.job-edit.dragging { opacity: .45; }
.job-edit.drop-before { box-shadow: -3px 0 0 var(--action); }
.job-edit.drop-after { box-shadow: 3px 0 0 var(--action); }
input[type="date"]:not([data-native])::-webkit-calendar-picker-indicator { cursor: pointer; }