/* EveShift app. Phone first: one column, bottom tabs, full-screen sheets with the main button pinned at the
   bottom, 44 px tap targets. From 900 px: tabs move to the top and the week shows seven columns. */
/* Themes are custom properties on :root[data-theme] (app.js sets it: the person's choice, else the team's default,
   else the system's light or dark). Neutral is the default; Warm is the original cream look. docs/CALENDAR-DESIGN.md §5. */
:root {
  --bg: #F3F4F6; --surface: #FFFFFF; --surface-2: #E9EBEF; --surface-3: #DFE2E7;
  --line: #D8DCE2; --line-strong: #AEB5C0;
  --ink: #171B26; --ink-2: #3B4252; --muted: #667085; --faint: #98A2B3;
  --primary: #1C1F3A; --on-primary: #FFFFFF; --primary-soft: #E7E8F0; --primary-hover: #2E3256;
  --topbar: #1C1F3A; --on-top: #FFFFFF; --today: #1C1F3A; --selected-ring: #1C1F3A; --now: #C8102E;
  --ok: #157347; --ok-bg: #E8F3EC; --warn: #9A5B00; --warn-bg: #FBF1DC; --danger: #B42318; --danger-bg: #FBEAE7; --info: #2457A6; --info-bg: #E8EFFA;
  --amber: #F29B2C; --on-amber: #1C1F3A; --badge: #C8102E; --on-badge: #FFFFFF; --mine: var(--primary); --mark: var(--primary);
  --busy: repeating-linear-gradient(135deg, #C9CED6 0 3px, transparent 3px 7px);
  --today-tint: color-mix(in srgb, var(--surface) 94%, var(--primary));
  --role-1: #4F6D9A; --role-2: #2F8F83; --role-3: #7A5C9E; --role-4: #B0603A; --role-5: #6E8B3D; --role-6: #A64D6E;
  --r-card: 8px; --r-chip: 5px; --r-ctl: 8px; --bw: 1px;
  --shadow: none; --shadow-pop: 0 8px 28px rgba(16, 20, 32, .14), 0 1px 2px rgba(16, 20, 32, .08);
  --cell-h: 112px; --row-h: 56px; --chip-h: 22px; --fs-chip: 12px; --gap: 4px; --pad: 6px;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  /* names the older screens use */
  --paper: var(--bg); --card: var(--surface); --soft: var(--surface-2); --ok-soft: var(--ok-bg); --block: var(--danger); --block-soft: var(--danger-bg);
  --info-soft: var(--info-bg); --amber-soft: var(--warn-bg); --amber-text: var(--warn); --r: var(--r-card);
  color-scheme: light;
}
:root[data-density="compact"] { --cell-h: 84px; --row-h: 40px; --chip-h: 18px; --fs-chip: 11px; --gap: 2px; --pad: 4px; }
:root[data-theme="dark"] {
  --bg: #0F1217; --surface: #161A21; --surface-2: #1E232C; --surface-3: #262C37; --line: #2A303B; --line-strong: #4A5261;
  --ink: #E7EAF0; --ink-2: #C3C9D4; --muted: #98A2B3; --faint: #6B7484;
  --primary: #E7EAF0; --on-primary: #0F1217; --primary-soft: #262C37; --primary-hover: #C3C9D4;
  --topbar: #0B0E13; --on-top: #E7EAF0; --today: #8AB4FF; --selected-ring: #8AB4FF; --now: #FF4D5E;
  --ok: #4ADE80; --ok-bg: #12301F; --warn: #FBBF24; --warn-bg: #3A2A08; --danger: #F87171; --danger-bg: #3B1512; --info: #8AB4FF; --info-bg: #15233A;
  --badge: #FF4D5E; --on-badge: #0F1217; --mine: #8AB4FF; --mark: #8AB4FF;
  --busy: repeating-linear-gradient(135deg, #39404C 0 3px, transparent 3px 7px);
  --today-tint: color-mix(in srgb, var(--surface) 90%, #8AB4FF);
  --role-1: #7E9CC9; --role-2: #5EBBAF; --role-3: #AA8BCF; --role-4: #D98A63; --role-5: #9DB868; --role-6: #D07B9B;
  --shadow-pop: 0 8px 28px rgba(0, 0, 0, .5), 0 0 0 1px var(--line);
  color-scheme: dark;
}
:root[data-theme="hc"] {
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --surface-3: #F0F0F0; --line: #000000; --line-strong: #000000;
  --ink: #000000; --ink-2: #000000; --muted: #000000; --faint: #333333;
  --primary: #000000; --on-primary: #FFFFFF; --primary-soft: #FFFFFF; --primary-hover: #000000;
  --topbar: #000000; --on-top: #FFFFFF; --today: #000000; --selected-ring: #0000EE; --now: #B00000;
  --ok: #006400; --ok-bg: #FFFFFF; --warn: #7A4B00; --warn-bg: #FFFFFF; --danger: #B00000; --danger-bg: #FFFFFF; --info: #0000EE; --info-bg: #FFFFFF;
  --badge: #B00000; --on-badge: #FFFFFF; --mine: #000000; --mark: #000000; --amber: #FFFFFF; --on-amber: #000000;
  --busy: repeating-linear-gradient(135deg, #000 0 2px, transparent 2px 6px);
  --today-tint: #F0F0F0;
  --role-1: #003E8A; --role-2: #005C52; --role-3: #4A1F7A; --role-4: #7A2E0A; --role-5: #2F4A00; --role-6: #7A0E3A;
  --bw: 2px; --shadow-pop: 0 0 0 2px #000;
}
:root[data-theme="warm"] {
  --bg: #FAF7F2; --surface: #FFFFFF; --surface-2: #F1EDE6; --surface-3: #E9E3D9; --line: #E4E0D8; --line-strong: #C9C2B5;
  --ink: #1C1F3A; --ink-2: #2E3256; --muted: #5A5D75; --faint: #8E90A6;
  --ok: #1F7A4D; --ok-bg: #E3F2EA; --warn: #8A4F06; --warn-bg: #FDEBD3; --danger: #B42318; --danger-bg: #FCE8E6; --info: #3B4A8C; --info-bg: #E9ECF8;
  --badge: #F29B2C; --on-badge: #1C1F3A; --mine: #F29B2C; --mark: #F29B2C; --selected-ring: #F29B2C;
  --today-tint: #FFFBF3;
  --r-card: 14px; --r-chip: 8px; --r-ctl: 12px;
  --shadow: 0 1px 2px rgba(28, 31, 58, .06), 0 4px 16px rgba(28, 31, 58, .06);
}
@media (forced-colors: active) { :root { --line: CanvasText; --line-strong: CanvasText; --ink: CanvasText; --surface: Canvas; --bg: Canvas; --today: Highlight; --selected-ring: Highlight; } }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 16px/1.5 Satoshi, system-ui, sans-serif; color: var(--ink); background: var(--bg); min-height: 100vh; font-variant-numeric: tabular-nums; }
h1, h2, h3 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .4em; }
h1 { font-size: 26px; font-weight: 800; } h2 { font-size: 20px; font-weight: 800; } h3 { font-size: 16px; font-weight: 700; }
p { margin: 0 0 .8em; }
a { color: var(--ink); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--selected-ring); outline-offset: 2px; border-radius: 6px; }
.mono, time { font-family: var(--mono); font-size: .92em; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.boot { display: grid; place-items: center; min-height: 80vh; }

/* ── buttons and fields ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: var(--r-ctl); border: 1.5px solid var(--primary);
  background: var(--primary); color: var(--on-primary); font: 700 15px/1.2 Satoshi, sans-serif; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--primary-hover); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: var(--soft); }
.btn.amber { background: var(--amber); border-color: var(--amber); color: var(--on-amber); }
:root[data-theme="hc"] .btn.amber { border-color: #000; }
.btn.danger { background: var(--danger); border-color: var(--danger); color: var(--on-primary); }
:root[data-theme="dark"] .btn.danger { color: #0F1217; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; border-radius: var(--r-ctl); }
.btn.wide { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.link { display: inline-flex; align-items: center; background: none; border: 0; padding: 0; min-height: 44px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font: inherit; cursor: pointer; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.spread { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
label { display: block; font-weight: 700; font-size: 14px; margin: 14px 0 6px; }
input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1.5px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); font: 16px Satoshi, sans-serif; }
input:focus, select:focus, textarea:focus { border-color: var(--ink); outline: none; }
textarea { min-height: 84px; resize: vertical; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; min-height: 0; accent-color: var(--ink); margin: 0; flex: none; }
.check { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; font-size: 15px; margin: 10px 0; padding: 10px 0; cursor: pointer; }
.check b { display: block; }
.choice { border: 1.5px solid var(--line); border-radius: var(--r-ctl); padding: 12px 14px; margin: 8px 0; }
.choice:has(input:checked) { border-color: var(--selected-ring); background: var(--surface); }
.hint { color: var(--muted); font-size: 14px; margin: 4px 0 0; }
.grid2 { display: grid; gap: 0 12px; grid-template-columns: 1fr 1fr; }
.code-input { font: 500 26px/1 var(--mono); letter-spacing: .3em; text-align: center; }

/* ── frame ── */
.top { position: sticky; top: 0; z-index: 20; background: var(--topbar); color: var(--on-top); padding: 8px 14px; padding-top: max(8px, env(safe-area-inset-top)); }
.top .in { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
.top .brand { display: flex; align-items: center; gap: 8px; color: var(--on-top); text-decoration: none; font-weight: 800; min-height: 44px; }
.top .brand img { width: 30px; height: 30px; }
.top .team { background: transparent; color: var(--on-top); border: 0; font: 700 15px Satoshi, sans-serif; min-height: 44px; padding: 0 6px; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.top .sp { flex: 1; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: inherit; cursor: pointer; }
.iconbtn:hover { background: rgba(255, 255, 255, .1); }
.iconbtn svg { width: 22px; height: 22px; }
.badge { position: absolute; top: 6px; right: 5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--badge); color: var(--on-badge); font: 800 11px/18px Satoshi; text-align: center; }
nav.tabs { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: flex; background: var(--surface); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
nav.tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 6px; min-height: 56px; color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 700; position: relative; }
nav.tabs a svg { width: 22px; height: 22px; }
nav.tabs a[aria-current=page] { color: var(--ink); }
nav.tabs a[aria-current=page]::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 3px; border-radius: 0 0 3px 3px; background: var(--mark); }
nav.tabs .badge { top: 4px; right: calc(50% - 22px); }
main { max-width: 1240px; margin: 0 auto; padding: 16px 14px 96px; }
.banner { background: var(--amber-soft); color: var(--amber-text); border-radius: var(--r); padding: 12px 14px; margin: 0 0 14px; font-size: 15px; }
.banner.info { background: var(--info-soft); color: var(--info); }
.card { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: 16px; margin: 0 0 14px; box-shadow: var(--shadow); }
.card h2 { margin-bottom: 8px; }

/* ── the week ── */
.weekbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.weekbar h1 { margin: 0; font-size: 22px; flex: 1; min-width: 160px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-ctl); padding: 3px; }
.seg button { border: 0; background: transparent; min-height: 38px; padding: 0 12px; border-radius: 9px; font: 700 14px Satoshi; color: var(--muted); cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin: 0 0 12px; }
.days button { border: 1.5px solid transparent; background: var(--surface); border-radius: var(--r-ctl); min-height: 58px; padding: 6px 0; cursor: pointer; font: 700 13px Satoshi; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.days button b { font-size: 18px; color: var(--ink); }
.days button[aria-pressed=true] { border-color: var(--selected-ring); color: var(--ink); }
.days button.today b { background: var(--today); color: var(--on-primary); border-radius: 50%; width: 30px; height: 30px; display: grid; place-items: center; }
:root[data-theme="dark"] .days button.today b { color: #0F1217; }
.days button i { width: 6px; height: 6px; border-radius: 3px; background: var(--primary); }
.days button:focus-visible { outline: 3px solid var(--selected-ring); outline-offset: 1px; }
.days button i.none { background: transparent; }
.people { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pchip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 3px; border-radius: 99px; background: var(--surface-2); font-size: 13px; font-weight: 600; max-width: 100%; }
.pchip .av { width: 24px; height: 24px; border-radius: 12px; background: var(--surface-3); color: var(--ink); border: 1px solid var(--line); display: grid; place-items: center; font-size: 11px; font-weight: 800; flex: none; }
.pchip.me { background: var(--primary-soft); }
.pchip.me .av { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.pchip.open { background: var(--surface); border: 1.5px dashed var(--line-strong); color: var(--muted); padding-left: 9px; }
.pchip.offered { outline: 2px solid var(--amber); }
:root[data-theme="hc"] .pchip.offered { outline-style: dashed; outline-color: #000; }
.pchip.busy .av { background: var(--faint); }
.cov { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; border: 1px solid color-mix(in srgb, currentColor 25%, transparent); font-size: 12px; font-weight: 700; background: var(--ok-soft); color: var(--ok); }
.tag.short { background: var(--block-soft); color: var(--block); }
.tag.plain { background: var(--surface-2); color: var(--ink-2); }
.tag.draft { background: var(--amber-soft); color: var(--amber-text); }
.tag.exp { background: var(--block-soft); color: var(--block); }
.busyline { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); padding: 6px 0; border-top: 1px dashed var(--line); }
.busyline .bar { width: 10px; height: 10px; border-radius: 3px; background: var(--busy); border: 1px solid var(--line-strong); flex: none; }
.busybox { background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-card); padding: 4px 12px; margin-bottom: 10px; }
.addshift { width: 100%; min-height: 44px; border: 1.5px dashed var(--line-strong); border-radius: var(--r-card); background: transparent; color: var(--muted); font: 700 14px Satoshi; cursor: pointer; }
/* people × days */
.cell { display: block; border-radius: var(--r-chip); padding: 4px 6px; margin-bottom: 4px; background: var(--surface); border: 1px solid var(--line) !important; font-size: 12px; border: 0; width: 100%; text-align: left; cursor: pointer; color: inherit; font-family: inherit; }
.cell.s { background: var(--surface); }
.cell.b { background: var(--busy); color: var(--muted); cursor: default; }
.cell.off { background: var(--surface-2); color: var(--muted); cursor: default; }

/* picking several shifts (managers): a round check on each card, a bar with what to do */
.shift.picked .cardbtn, .pcell.picked, .cell.picked { box-shadow: 0 0 0 3px var(--selected-ring) inset; background: var(--primary-soft); }
.selbar { position: fixed; z-index: 25; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--surface); border: 1.5px solid var(--primary); border-radius: var(--r-card); padding: 10px 12px; box-shadow: var(--shadow-pop); }
.selbar > span { grid-column: 1 / -1; }
.selbar .btn { min-height: 44px; }
main:has(.selbar) { padding-bottom: 230px; }
body:has(.selbar) #toast { bottom: 200px; }
@media (min-width: 900px) { .selbar { left: 50%; right: auto; transform: translateX(-50%); bottom: 24px; width: 560px; grid-template-columns: 1fr auto auto; align-items: center; } .selbar > span { grid-column: auto; } body:has(.selbar) #toast { bottom: 110px; } }
@media (max-width: 899px) { .desk { display: none !important; } }
.placerow { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.placerow .pchip { flex: 0 1 auto; min-width: 0; }
.placerow select { flex: 1 1 140px; width: auto; min-height: 42px; }
.placerow .check.rm { margin: 0; padding: 0; gap: 6px; align-items: center; }
.list.changes > li { align-items: flex-start; }
.dot.on { width: 10px; height: 10px; border-radius: 5px; background: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); margin: 0; flex: none; }
.pchip.live { box-shadow: 0 0 0 2px var(--ok) inset; }
.thread .msg { margin: 0 0 12px; max-width: 92%; }
.thread .msg .who { font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.thread .msg .text { white-space: pre-wrap; background: var(--surface-2); border-radius: var(--r-card); padding: 10px 12px; overflow-wrap: anywhere; }
.thread .msg.user { margin-left: auto; } .thread .msg.user .who { text-align: right; } .thread .msg.user .text { background: var(--primary-soft); }
.thread .msg.staff .text { background: var(--info-soft); }
.thread .msg.user img.shot { margin-left: auto; }
img.shot { display: block; max-width: 160px; max-height: 220px; border-radius: 10px; border: 1px solid var(--line); margin-top: 6px; }
.cand { margin: 0 0 8px; }
.cand .pick { margin: 0; }
.cand.blocked .pick { background: var(--bg); }
.cand .pick[disabled] { cursor: default; opacity: 1; color: var(--muted); }
.cand .why { list-style: none; margin: 4px 0 0; padding: 0 4px 0 14px; font-size: 13px; color: var(--muted); }
.cand .why li { padding: 2px 0 2px 10px; border-left: 3px solid var(--line); margin: 2px 0; }
.cand .why li.block { border-left-color: var(--block); color: var(--block); }
.cand .why li.warn, .cand .why li.approval { border-left-color: var(--warn); }

/* ── checks and suggestions ── */
.verdict { border-radius: var(--r); padding: 14px; margin: 12px 0; font-weight: 700; display: flex; gap: 10px; align-items: flex-start; }
.verdict svg { width: 22px; height: 22px; flex: none; margin-top: 1px; }
.verdict.ok { background: var(--ok-soft); color: var(--ok); }
.verdict.needs_approval { background: var(--amber-soft); color: var(--amber-text); }
.verdict.blocked { background: var(--block-soft); color: var(--block); }
.items { list-style: none; margin: 0 0 12px; padding: 0; }
.items li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.items li:last-child { border-bottom: 0; }
.items .lv { flex: none; font: 800 11px/1 Satoshi; text-transform: uppercase; letter-spacing: .04em; padding: 5px 7px; border-radius: 6px; height: fit-content; margin-top: 2px; }
.lv.block { background: var(--block-soft); color: var(--block); }
.lv.approval { background: var(--amber-soft); color: var(--amber-text); }
.lv.warn { background: var(--warn-bg); color: var(--warn); }
.lv.info { background: var(--info-soft); color: var(--info); }
.sugg { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.sugg:last-child { border-bottom: 0; }
.sugg .who { flex: 1; min-width: 0; }
.sugg .who b { display: block; }
.sugg .who span { color: var(--muted); font-size: 13px; }
.pick { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 12px; margin: 0 0 8px; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--surface); cursor: pointer; font: inherit; color: inherit; }
.pick[aria-pressed=true] { border-color: var(--selected-ring); box-shadow: 0 0 0 2px var(--selected-ring) inset; }
.pick .who { flex: 1; }

/* ── requests ── */
.req { background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: 14px; margin: 0 0 12px; box-shadow: var(--shadow); }
.req .head { display: flex; gap: 8px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.req .kind { font-weight: 800; }
.status { font: 700 12px Satoshi; padding: 3px 9px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); }
.status.pending_peer, .status.pending_manager, .status.open { background: var(--amber-soft); color: var(--amber-text); }
.status.approved { background: var(--ok-soft); color: var(--ok); }
.status.denied, .status.expired, .status.canceled { background: var(--soft); color: var(--muted); }
.req .what { margin: 8px 0; font-size: 15px; }
.req .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* ── lists, tables ── */
.list { list-style: none; padding: 0; margin: 0; }
.list > li { display: flex; gap: 10px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .grow b { display: block; }
.places > li { flex-wrap: wrap; }
.places > li .row { flex: 1 1 100%; justify-content: flex-end; }
@media (min-width: 900px) { .places > li .row { flex: 0 1 auto; } }
.matrix { overflow-x: auto; border: var(--bw) solid var(--line); border-radius: var(--r-card); background: var(--surface); }
.matrix table { border-collapse: collapse; width: 100%; font-size: 14px; }
.matrix th, .matrix td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: center; }
.matrix th:first-child, .matrix td:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); min-width: 210px; }
.matrix thead th { font-size: 13px; background: var(--surface-2); }
.matrix .grp td { background: var(--surface-2); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); text-align: left; }
.subtabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; }
.subtabs a { flex: none; padding: 8px 14px; min-height: 40px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; }
.subtabs a[aria-current=page] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.codebox { font: 500 22px var(--mono); letter-spacing: .08em; background: var(--surface-2); border-radius: var(--r-card); padding: 14px; text-align: center; word-break: break-all; }
.urlbox { font: 13px var(--mono); background: var(--soft); border-radius: 10px; padding: 10px 12px; word-break: break-all; }
.backup { columns: 2; font: 500 17px/2 var(--mono); background: var(--soft); border-radius: 12px; padding: 12px 18px; }
.qr { display: grid; place-items: center; background: #FFFFFF; padding: 12px; border-radius: 12px; border: 1px solid var(--line); width: fit-content; margin: 8px auto; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; }
.feed { word-break: break-all; }

/* small icons inside text (the lock next to private things) */
p > svg, h2 > svg, h3 > svg, td > svg, span > svg, li > svg, .banner svg, .hint svg { width: 16px; height: 16px; vertical-align: -3px; flex: none; }
.list.sheets > li { flex-wrap: wrap; }
.list.sheets > li .row { flex: 1 1 100%; justify-content: flex-end; }
@media (min-width: 900px) { .list.sheets > li .row { flex: 0 1 auto; } }

/* ── today and the clock ── */
.offline-bar { background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid var(--warn); font-weight: 700; font-size: 14px; padding: 8px 14px; text-align: center; }
.clock h2 { margin: 0; }
.clock-state { font-size: 20px; font-weight: 800; margin: 14px 0; }
.clock-state.in { color: var(--ok); } .clock-state.break { color: var(--amber-text); }
.clock-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.clock-big { flex: 1 1 100%; min-height: 76px; font-size: 22px; border-radius: var(--r-card); background: var(--ok); border-color: var(--ok); color: #FFFFFF; }
:root[data-theme="dark"] .clock-big { color: #0F1217; }
.clock-big:hover { filter: brightness(.92); background: var(--ok); }
.clock-big.out { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.clock-btns .btn.ghost { flex: 1; min-height: 52px; }
.punches { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.punches li { background: var(--surface-2); border-radius: 8px; padding: 4px 8px; font-size: 13px; }
.stats { display: flex; gap: 10px; flex-wrap: wrap; margin: 6px 0 10px; }
.stats > div { flex: 1; min-width: 100px; background: var(--surface-2); border-radius: var(--r-card); padding: 10px 12px; }
.stats b { display: block; font-size: 22px; font-weight: 800; }
.stats span { color: var(--muted); font-size: 13px; }
.lead-sm { font-size: 17px; font-weight: 700; margin: 12px 0 4px; }
.choice-big { display: block; width: 100%; text-align: left; border: 1.5px solid var(--primary); background: var(--surface); border-radius: var(--r-card); padding: 14px 16px; cursor: pointer; font: inherit; color: inherit; }
.choice-big b { display: block; font-size: 17px; } .choice-big span { color: var(--muted); font-size: 14px; }
.morelink { display: flex; flex-direction: column; text-decoration: none; padding: 4px 0; min-height: 44px; width: 100%; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 5px; margin-right: 8px; vertical-align: middle; }
.langs { margin-top: 6px; }

/* ── schedule views ── */

.mine-card .actual, .extra-card .actual { font-size: 13px; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.extra-card { border-left-color: var(--warn) !important; border-style: dashed; }
.cell.clock { background: var(--ok-soft); color: var(--ok); cursor: default; }
.cell svg { width: 12px; height: 12px; vertical-align: -1px; }
.pgrid .todaycol { background: var(--today-tint); }
.pgrid.compact table { min-width: 0; }
.pgrid.compact td.who { white-space: normal; }
.busyline.note { color: var(--ink); }

/* ── hours and pay ── */
table.money { width: 100%; border-collapse: collapse; font-size: 15px; margin: 6px 0 10px; }
table.money td { padding: 6px 0; border-bottom: 1px solid var(--line); }
table.money tr.sum td { font-weight: 800; border-top: 2px solid var(--ink); }
.num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.list li.gone { opacity: .55; }
.list.rules li.off b { color: var(--muted); }
.note { background: var(--warn-bg); color: var(--warn); border-radius: var(--r-card); padding: 10px 12px; font-size: 14px; }
.lv.ok { background: var(--ok-soft); color: var(--ok); }

/* ── auth ── */
.auth { max-width: 440px; margin: 0 auto; padding: 28px 18px 60px; }
.auth .logo { display: block; margin: 10px auto 22px; height: 44px; }
.auth .card { padding: 22px; }
.auth h1 { text-align: center; }
.auth .alt { text-align: center; margin-top: 16px; }
.sep { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; margin: 16px 0; }
.sep::before, .sep::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.err { color: var(--block); font-weight: 700; font-size: 14px; min-height: 0; margin: 8px 0 0; }
.err:empty { display: none; }
.starter { display: grid; gap: 8px; }
.auth.wide { max-width: 640px; }
.auth.wide h2 { text-align: left; }
.roleset { border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 4px 14px; margin: 0 0 8px; background: var(--surface); }
.roleset[open] { border-color: var(--selected-ring); }
.roleset summary { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; cursor: pointer; }
.roleset .check { margin: 2px 0; padding: 8px 0; border-top: 1px solid var(--line); }
.presets .choice { margin: 6px 0; }

/* ── sheet (dialog) ── */
dialog#sheet { padding: 0; border: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; margin: 0; background: var(--bg); color: var(--ink); }
dialog#sheet::backdrop { background: rgba(28, 31, 58, .45); }
.sh { display: flex; flex-direction: column; height: 100%; }
.sh header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 18px; padding-top: max(10px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: var(--surface); }
.sh header h2 { flex: 1; margin: 0; font-size: 18px; }
.sh .body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }
.sh footer { display: flex; gap: 10px; padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.sh footer .btn { flex: 1; }
#toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 60; background: var(--primary); color: var(--on-primary); padding: 12px 18px; border-radius: var(--r-card); font-weight: 700; max-width: calc(100vw - 32px); opacity: 0; pointer-events: none; transition: opacity .2s; }
#toast.on { opacity: 1; }
#toast.bad { background: var(--danger); }
#toast.act { display: flex; align-items: center; gap: 14px; padding: 6px 6px 6px 18px; pointer-events: auto; }
#toast .tbtn { min-height: 40px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: var(--amber); color: var(--on-amber); font: 800 15px Satoshi, sans-serif; cursor: pointer; flex: none; }

@media (max-width: 899px) {
  .weekbar h1 { font-size: 19px; min-width: 0; }
  .weekbar .iconbtn { width: 40px; height: 40px; }
}
@media (min-width: 900px) {
  nav.tabs { position: static; border: 0; background: transparent; padding: 0; gap: 2px; }
  nav.tabs a { flex: none; flex-direction: row; gap: 6px; color: color-mix(in srgb, var(--on-top) 72%, transparent); font-size: 14px; min-height: 44px; padding: 0 12px; border-radius: 10px; }
  nav.tabs a:hover { background: rgba(255, 255, 255, .08); }
  nav.tabs a[aria-current=page] { color: var(--on-top); background: color-mix(in srgb, var(--on-top) 12%, transparent); }
  nav.tabs a[aria-current=page]::before { display: none; }
  nav.tabs a svg { width: 18px; height: 18px; }
  nav.tabs .badge { position: static; }
  main { padding: 22px 24px 48px; }
  .days { display: none; }
  dialog#sheet { width: 560px; height: auto; max-height: 88vh; margin: auto; border-radius: 14px; box-shadow: var(--shadow-pop); border: 1px solid var(--line); }
  .sh { max-height: 88vh; }
  .sh header { border-radius: 14px 14px 0 0; }
  .sh footer { border-radius: 0 0 14px 14px; }
  #toast { bottom: 28px; }
  .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
a.tap { display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 480px) { .pgrid.compact .opt { display: none; } }
.nowrap { white-space: nowrap; }

/* ── tables and empty states used across screens ── */
.empty { text-align: center; color: var(--muted); padding: 28px 12px; }
.pgrid { overflow-x: auto; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); }
.pgrid table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 13px; }
.pgrid th, .pgrid td { border-bottom: 1px solid var(--line); padding: 8px; vertical-align: top; text-align: left; }
.pgrid th { font-size: 12px; color: var(--muted); font-weight: 700; background: var(--surface-2); position: sticky; top: 0; }
.pgrid td.who { font-weight: 700; white-space: nowrap; position: sticky; left: 0; background: var(--surface); }

/* ── the calendar (docs/CALENDAR-DESIGN.md, docs/calendar-mockups.html) ── */
.calbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.calbar .nav { display: flex; align-items: center; gap: 6px; min-width: 0; }
.calbar h1 { margin: 0 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; white-space: nowrap; }
.calbar .sp { flex: 1; }
.calbar .iconbtn { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); }
.calbar .iconbtn:hover { background: var(--surface-2); }
.calbar .iconbtn svg { width: 18px; height: 18px; }
.calbar .btn.small { min-height: 36px; }
.calbar .seg button { min-height: 30px; }
select.ctl { width: auto; min-height: 36px; padding: 0 30px 0 10px; font-size: 14px; font-weight: 600; }
.calbar .filters { display: contents; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 10px; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legend i.open { border: 1px dashed var(--line-strong); background: transparent; }
.calempty { border: 1px dashed var(--line-strong); border-radius: var(--r-card); padding: 22px 18px; max-width: 460px; margin: 14px auto; background: var(--surface); }
.calempty h3 { margin: 0 0 4px; font-size: 16px; color: var(--ink); }
.calempty p { margin: 0 0 12px; font-size: 14px; }
.calempty .row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }

/* the one shift card: a role bar, start–end and length, the name, where, then status as glyph + word */
.shift.card2 { position: relative; margin: 0 0 8px; }
.shift .cardbtn { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 0 10px; width: 100%; text-align: left; background: var(--surface); border: var(--bw) solid var(--line); border-radius: var(--r-card); padding: 0 10px 0 0; overflow: hidden; color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); }
div.cardbtn { cursor: default; }
.shift .cardbtn:hover { border-color: var(--line-strong); }
.shift .bar2 { background: var(--role, var(--line-strong)); }
.shift .body { padding: 9px 0; min-width: 0; }
.shift .time { font-size: 14px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.shift .time .dur { font-weight: 500; color: var(--muted); font-size: 13px; }
.shift .ttl { display: block; font-size: 15px; font-weight: 600; margin-top: 1px; overflow-wrap: anywhere; }
.shift .sub { display: block; font-size: 13px; color: var(--muted); }
.shift .side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; padding: 8px 0; }
.shift.mine .cardbtn { border-color: var(--mine); box-shadow: inset 0 0 0 1px var(--mine); }
.shift.past .cardbtn { opacity: .62; }
.shift.short .cardbtn { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.shift.draft .cardbtn { border-style: dashed; background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--surface-2) 70%, transparent) 10px 12px), var(--surface); }
.shift.extra .cardbtn { border-style: dashed; }
.shift .cardbtn[aria-pressed] { padding-right: 44px; position: relative; }
.shift .cardbtn[aria-pressed]::after { content: ''; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--muted); background: var(--surface); }
.shift .cardbtn[aria-pressed=true]::after { content: '✓'; border-color: var(--primary); background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 800 14px/1 Satoshi, sans-serif; }
.shift .people { margin-top: 6px; gap: 4px; }
.shift .pchip { font-size: 12px; padding: 2px 8px 2px 2px; }
.shift .pchip .av { width: 20px; height: 20px; font-size: 10px; }
.pill { display: inline-flex; align-items: center; gap: 5px; min-height: 20px; padding: 0 7px; border-radius: 4px; font-size: 12px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.pill.ok { color: var(--ok); background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.pill.warn { color: var(--warn); background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.pill.danger { color: var(--danger); background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.pill.info { color: var(--info); background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.pill.neutral { color: var(--ink-2); background: var(--surface-2); }
:root[data-theme="hc"] .pill, :root[data-theme="hc"] .shift .cardbtn, :root[data-theme="hc"] .chip, :root[data-theme="hc"] .pcell { border-width: 2px; }

/* lists of days: phone week and day, my day, the day under the phone month */
.daylist { display: flex; flex-direction: column; gap: 4px; }
.dayblock { margin: 0 0 10px; }
.dayblock .dh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 500; margin: 4px 0 8px; }
.dayblock .dh b { color: var(--ink); font-size: 15px; }
.nowrow { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; color: var(--now); font-size: 12px; font-weight: 800; }
.nowrow::before, .nowrow::after { content: ''; height: 2px; background: var(--now); flex: 1; }
.nowrow::before { flex: 0 0 10px; }
.nowrow span { white-space: nowrap; }
.addrow { width: 100%; min-height: 44px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: transparent; color: var(--ink-2); font: 600 14px Satoshi, sans-serif; cursor: pointer; }
.addrow:hover { background: var(--surface); }
.band { display: flex; align-items: center; gap: 6px; min-height: calc(var(--chip-h) - 2px); border-radius: 3px; background: var(--busy); border: 1px solid var(--line); font-size: 11px; color: var(--muted); padding: 0 6px; margin: 0 0 4px; overflow: hidden; }
.band span { background: var(--surface); padding: 0 4px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band.off { background: var(--surface-2); }
.band.note { background: var(--warn-bg); color: var(--warn); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.band.note span { background: transparent; white-space: normal; }
.band .x { margin-left: auto; border: 0; background: transparent; color: inherit; font-size: 16px; cursor: pointer; min-width: 28px; min-height: 24px; }
.dayblock .band { min-height: 26px; font-size: 13px; }
.fab { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 24; width: 56px; height: 56px; border-radius: 28px; border: 0; background: var(--primary); color: var(--on-primary); font: 600 30px/1 Satoshi, sans-serif; box-shadow: var(--shadow-pop); cursor: pointer; }
main:has(.fab) { padding-bottom: 150px; }

/* month, desktop: a bordered grid, date top-left, chips "6a Opening", +N more, empty cells empty */
.month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--line); gap: 1px; }
.month .wd { background: var(--surface-2); font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 8px var(--pad); }
.month .wd abbr { text-decoration: none; }
.month .wd.we { color: var(--faint); }
.month .d { background: var(--surface); min-height: var(--cell-h); padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); position: relative; cursor: pointer; min-width: 0; }
.month .d.out { background: var(--bg); }
.month .d.out .num { color: var(--faint); }
.month .d.we:not(.out) { background: color-mix(in srgb, var(--surface) 92%, var(--surface-2)); }
.month .d.sel { box-shadow: inset 0 0 0 2px var(--selected-ring); }
.month .d:focus-visible { outline: 3px solid var(--selected-ring); outline-offset: -3px; }
.month .d .addhint { position: absolute; top: 4px; right: 8px; font-size: 16px; color: var(--faint); opacity: 0; pointer-events: none; }
.month .d:hover .addhint, .month .d:focus-visible .addhint { opacity: 1; }
.month .num { font-size: 13px; font-weight: 600; width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 50%; margin: -2px 0 0 -3px; flex: none; text-align: center !important; }
.month .num.today { background: var(--today); color: var(--on-primary); }
.month .band { margin: 0; }
.chip { display: flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 6px 0 0; border-radius: var(--r-chip); border: 1px solid var(--line); background: var(--surface); font: 400 var(--fs-chip)/1 Satoshi, sans-serif; color: var(--ink); overflow: hidden; white-space: nowrap; width: 100%; text-align: left; cursor: pointer; flex: none; }
.chip::before { content: ''; width: 3px; align-self: stretch; background: var(--role, var(--line-strong)); flex: none; }
.chip .t { font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.chip .n { overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); min-width: 0; }
.chip.mine { border-color: var(--mine); box-shadow: inset 0 0 0 1px var(--mine); }
.chip.short { border-color: var(--danger); }
.chip.short .n { color: var(--danger); font-weight: 700; }
.chip.draft { border-style: dashed; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex: none; margin: 0; }
.month .more { align-self: flex-start; border: 0; background: transparent; font: 700 var(--fs-chip) Satoshi, sans-serif; color: var(--ink-2); padding: 2px 4px; border-radius: 4px; cursor: pointer; }
.month .more:hover { background: var(--surface-2); }
.month .foot { margin-top: auto; font-size: 11px; color: var(--muted); }
.month .foot b { color: var(--danger); }

/* month, phone: dots in a compact grid, the picked day's list under it */
.mini { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 2px 6px 8px; margin: 0 0 12px; }
.mini .wd { font-size: 11px; font-weight: 700; color: var(--muted); text-align: center; padding: 6px 0 2px; }
.mini .c { height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: 600 14px Satoshi, sans-serif; cursor: pointer; padding: 0; }
.mini .c.out { color: var(--faint); font-weight: 500; }
.mini .c.sel { box-shadow: inset 0 0 0 2px var(--selected-ring); }
.mini .c .n { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; }
.mini .c.today .n { background: var(--today); color: var(--on-primary); }
.dots { display: flex; gap: 3px; height: 5px; align-items: center; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--role, var(--line-strong)); }
.dots i.off { background: transparent; border: 1px solid var(--line-strong); width: 12px; border-radius: 3px; }
.dots i.plus { width: auto; height: auto; background: none; font: 800 9px/5px Satoshi, sans-serif; color: var(--muted); font-style: normal; }

/* week on a time axis (my shifts): 48 px an hour, lanes for overlaps, the current time on the axis */
.week { display: grid; grid-template-columns: 56px repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: var(--surface); position: relative; }
.week.one { grid-template-columns: 56px minmax(0, 1fr); }
.week .wh { border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); padding: 8px 8px 6px; font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: var(--surface-2); }
.week .wh.corner { border-left: 0; }
.week .wh b { display: block; font-size: 18px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.week .wh.today b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--today); color: var(--on-primary); }
.week .axis { position: relative; }
.week .axis .h { height: 48px; font-size: 11px; color: var(--muted); text-align: right; padding-right: 6px; transform: translateY(-7px); white-space: nowrap; }
.week .axis .h:first-child { visibility: hidden; }
.week .col { position: relative; border-left: 1px solid var(--line); background: repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 48px); cursor: copy; }
.week .col.today { background-color: var(--today-tint); }
.ev { position: absolute; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); padding: 5px 6px 4px 9px; font: 400 12px/1.25 Satoshi, sans-serif; color: var(--ink); overflow: hidden; text-align: left; cursor: pointer; z-index: 2; }
.ev::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--role, var(--line-strong)); }
.ev b, .ev .s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ev .s { color: var(--muted); }
.ev .s:nth-of-type(1) { color: var(--ink-2); font-weight: 600; }
.ev.mine { border-color: var(--mine); box-shadow: inset 0 0 0 1px var(--mine); }
.ev.past { opacity: .58; }
.nowline { position: absolute; left: 0; right: 0; height: 0; border-top: 2px solid var(--now); z-index: 5; pointer-events: none; }
.nowline::before { content: ''; position: absolute; left: -5px; top: -6px; width: 10px; height: 10px; border-radius: 50%; background: var(--now); }
.nowtag { position: absolute; left: 0; width: 56px; z-index: 6; transform: translateY(-9px); text-align: right; padding-right: 4px; font-size: 10px; font-weight: 800; color: #fff; white-space: nowrap; }
.nowtag span { background: var(--now); border-radius: 4px; padding: 1px 4px; }
:root[data-theme="dark"] .nowtag { color: #0F1217; }

/* team week as a board of cards */
.board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.board.week { border: 0; background: transparent; overflow: visible; }
.daycol { min-width: 0; }
.daycol h3 { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin: 0 0 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.daycol h3 b { color: var(--ink); font-size: 16px; text-transform: none; letter-spacing: 0; }
.daycol h3.today b { background: var(--today); color: var(--on-primary); border-radius: 50%; width: 26px; height: 26px; display: inline-grid; place-items: center; }
.daycol .hadd { margin-left: auto; width: 26px; height: 26px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--ink-2); cursor: pointer; font-size: 16px; line-height: 1; opacity: 0; }
.daycol:hover .hadd, .daycol .hadd:focus-visible { opacity: 1; }
.daycol .shift .cardbtn { grid-template-columns: 4px minmax(0, 1fr); padding-right: 8px; }
.daycol .shift .side { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 8px; }
.daycol .shift .time { font-size: 12px; gap: 4px; }
.daycol .shift .time .dur { font-size: 11px; }
.daycol .shift .ttl { font-size: 14px; }
.daycol .pill { font-size: 11px; padding: 0 5px; white-space: normal; }
.addshift { width: 100%; min-height: 40px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: transparent; color: var(--muted); font: 600 13px Satoshi, sans-serif; cursor: pointer; }

/* team week by person */
.pplgrid table { border-collapse: separate; border-spacing: 0; min-width: 900px; font-size: 14px; table-layout: fixed; }
.pplgrid th, .pplgrid td { border-right: 1px solid var(--line); padding: var(--pad); height: var(--row-h); }
.pplgrid thead th { text-transform: uppercase; letter-spacing: .04em; z-index: 2; }
.pplgrid thead th:first-child, .pplgrid th.who { width: 180px; }
.pplgrid th small, .pplgrid .who small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; text-transform: none; letter-spacing: 0; }
.pplgrid thead th b { color: var(--ink); font-size: 14px; text-transform: none; margin-left: 3px; }
.pplgrid thead th.today b { background: var(--today); color: var(--on-primary); border-radius: 50%; padding: 1px 6px; }
.pplgrid td.today { background: var(--today-tint); }
.pplgrid th.who { position: sticky; left: 0; z-index: 1; background: var(--surface); color: var(--ink); font-size: 14px; font-weight: 600; text-align: left; vertical-align: top; }
.pplgrid .who .pstat { display: block; font-size: 12px; line-height: 1.35; margin-top: 2px; }
.pplgrid .who .pstat .now { display: flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; }
.pplgrid .who small.over { color: var(--danger); font-weight: 700; }
.pplgrid tr.openrow td, .pplgrid tr.openrow th { background: color-mix(in srgb, var(--surface) 88%, var(--surface-2)); }
.pplgrid td.empty { cursor: copy; text-align: left; padding: var(--pad); }
.pplgrid td.empty:hover { background: var(--surface-2); }
.pplgrid td.empty:hover::after { content: '+'; color: var(--faint); font-size: 16px; }
.pplgrid tfoot th, .pplgrid tfoot td { background: var(--surface-2); font-size: 12px; color: var(--muted); height: auto; text-transform: none; position: static; }
.pplgrid tfoot b { color: var(--ink); }
.pplgrid tfoot .short { color: var(--danger); font-weight: 700; }
.pcell { display: flex; align-items: center; gap: 6px; width: 100%; min-height: calc(var(--chip-h) + 6px); padding: 0 6px 0 0; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--surface); font: 400 var(--fs-chip) Satoshi, sans-serif; color: var(--ink); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-align: left; cursor: pointer; flex-wrap: wrap; }
.pcell::before { content: ''; width: 3px; align-self: stretch; background: var(--role, var(--line-strong)); flex: none; }
.pcell b { font-weight: 700; font-variant-numeric: tabular-nums; }
.pcell .n { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.pcell.draft { border-style: dashed; }
.pcell.open { border-style: dashed; color: var(--muted); }
.pcell.open::before { background: transparent; }
.pcell.unav, .pcell.off { background: var(--busy); color: var(--muted); justify-content: center; cursor: default; }
.pcell.off { background: var(--surface-2); }
.pcell.unav::before, .pcell.off::before { display: none; }
.pcell.unav svg { width: 12px; height: 12px; }
.pcell .st { flex-basis: 100%; padding: 0 0 3px 9px; font-size: 11px; font-weight: 700; }
.pcell .st.ok { color: var(--ok); } .pcell .st.miss { color: var(--danger); }

/* add, as a popover on desktop and a sheet on phones */
.repeat { border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px 12px 10px; margin: 12px 0 0; }
.repeat legend { font-size: 13px; font-weight: 700; color: var(--muted); padding: 0 4px; }
.daypick { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.daypick label { margin: 0; }
.daypick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.daypick span { display: grid; place-items: center; min-width: 38px; height: 36px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; background: var(--surface); }
.daypick.wide span { min-width: 64px; }
.daypick input:checked + span { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.daypick input:focus-visible + span { outline: 3px solid var(--selected-ring); outline-offset: 1px; }
.repeat .inline { display: flex; align-items: center; gap: 8px; font-size: 14px; margin: 0; }
.repeat .inline input { width: auto; }
.seg.kinds { display: flex; flex-wrap: wrap; margin: 0 0 12px; }
.seg.kinds button { flex: 1; min-height: 36px; }
@media (min-width: 900px) { dialog#sheet.pop { width: 440px; } }
.kbd { font: 12px/1 ui-monospace, Menlo, monospace; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 3px 6px; background: var(--surface-2); min-width: 64px; display: inline-block; text-align: center; }
.items.keys li { gap: 12px; }
[data-drag].dragging { opacity: .5; }
.drop { box-shadow: inset 0 0 0 2px var(--selected-ring) !important; background-color: var(--primary-soft) !important; }

@media (max-width: 899px) {
  .calbar h1 { font-size: 18px; flex: 1; }
  .calbar .nav { flex: 1 1 100%; }
  .calbar .nav h1 { order: -1; margin: 0 auto 0 0; }
  .calbar .seg { flex: 1 1 auto; }
  .calbar .seg button { flex: 1; }
  .calbar select.ctl { flex: 1 1 140px; }
  .calbar .addbtn { display: none; }
  .board { grid-template-columns: 1fr; }
  .pplgrid table { min-width: 760px; }
  .pplgrid thead th:first-child, .pplgrid th.who { width: 130px; }
}
@media (min-width: 900px) { .fab { display: none; } main:has(.fab) { padding-bottom: 48px; } }

@media print {
  .top, nav.tabs, .calbar, .seg, .offline-bar, .days, .row .btn, .fab, .addrow, .addshift, .hadd, .addhint, #toast, .selbar, .calempty .row { display: none !important; }
  :root { --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --line: #999; --line-strong: #666; --ink: #000; --ink-2: #000; --muted: #333; --today-tint: #fff; color-scheme: light; }
  body { background: #fff; }
  main { padding: 0; max-width: none; }
  .shift .cardbtn, .chip, .pcell, .ev { box-shadow: none; break-inside: avoid; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .pgrid { overflow: visible; border: 0; }
  .pgrid table { min-width: 0; font-size: 10px; }
  .month .d { min-height: 90px; }
  .board { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .week { break-inside: avoid; }
  .legend { display: flex !important; }
}
.pcell.unav > span { background: var(--surface); padding: 0 5px; border-radius: 3px; display: inline-flex; align-items: center; gap: 4px; }
.calbar select.ctl { max-width: 170px; }
.calbar #sch-mode { max-width: 230px; }
.ev { display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
.calbar select.ctl { max-width: 150px; font-size: 13px; }
.calbar #sch-mode { max-width: 200px; }
.filters-ph { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; } .filters-ph select.ctl { max-width: none; width: 100%; }
@media (max-width: 899px) { .calbar select.ctl, .calbar #sch-mode { flex: 1 1 100px; min-width: 0; max-width: none; } .calbar .btn.amber { flex: none; } }
@media (max-width: 899px) { .calbar .seg button { min-height: 40px; } }
.subbar { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 12px; }
.subbar .legend { margin: 0 0 0 auto; }
.subbar .filters { display: inline-flex; gap: 8px; }
.subbar select.ctl { max-width: 170px; font-size: 13px; min-height: 36px; }
.week .axis .h.near { visibility: hidden; }
@media (max-width: 899px) { .calbar .seg { flex: 1 1 100%; } .subbar .legend { margin: 0; } .subbar .seg button { min-height: 40px; } }
.dropways { display: grid; gap: 8px; margin: 12px 0 0; } .dropways p { margin: 0; }
.steps { list-style: none; margin: 4px 0 0; padding: 0; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); }
.steps li:first-child { border-top: 0; }
.steps .mark { flex: none; width: 24px; height: 24px; border-radius: 12px; border: 2px solid var(--line-strong); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.steps li.done .mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.steps li.done b { color: var(--muted); text-decoration: line-through; }
.stack { display: grid; gap: 8px; margin-top: 14px; } .danger-text { color: var(--danger) !important; }
/* Hours: the job, then the pay period with its arrows on one line of its own */
.hoursbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; }
.hoursbar select { width: auto; max-width: 100%; flex: 0 1 260px; }
.hoursbar .pnav { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.hoursbar .iconbtn { width: 40px; height: 40px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); border-radius: var(--r-ctl); }
.hoursbar .iconbtn svg { width: 18px; height: 18px; }
@media (max-width: 899px) { .hoursbar select, .hoursbar .pnav { flex: 1 1 100%; } .hoursbar .pnav span { flex: 1; text-align: center; font-weight: 600; } }
/* the wordmark that reads on the theme: navy on light, light on dark */
.logo-d { display: none !important; }
:root[data-theme="dark"] .logo-l { display: none !important; }
:root[data-theme="dark"] .logo-d { display: block !important; }
:root[data-theme="dark"] .boot img { content: url(/mark-dark.svg); }
.auth .langs { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.themesw button { min-height: 40px; min-width: 44px; padding: 0 10px; display: inline-grid; place-items: center; }
.themesw svg { width: 18px; height: 18px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .boot img { content: url(/mark-dark.svg); } }
@media (max-width: 899px) { .calbar .btn.amber { order: 10; flex: 1 1 100%; } }
/* phones: a card's status sits under its name, so the floating + never covers it */
@media (max-width: 899px) {
  .dayblock .shift .cardbtn { grid-template-columns: 4px minmax(0, 1fr); }
  .dayblock .shift .side { grid-column: 2; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 0 0 9px; }
  /* links inside sentences: a taller touch area without moving the text (padding on an inline box doesn't change the line) */
  main p a:not(.btn), main li a:not([class]), main .small a:not(.btn), .banner a:not(.btn), .hint a:not(.btn) { padding: 10px 0; }
}