:root {
  --paper: #ffffff; --ink: #111; --ink-soft: #4a4a4a; --ink-faint: #7f7f7f; --rule: #e7e7e7; --rule-strong: #111;
  --brand: #404f69; --brand-soft: #eef0f3; --gold: #eeba2b; --gold-soft: #fbf1d9; --gold-deep: #8a6110;
  --proof-red: #a6362c; --red-soft: #f8e9e7; --approved-green: #2e6b3e;
  --serif: 'Source Serif 4', Georgia, serif; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 4px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.4; -webkit-font-smoothing: antialiased; }
button, input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
.hidden { display: none !important; }
a { color: var(--brand); }

.page { max-width: 680px; margin: 0 auto; padding: 16px 16px 60px; }
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 3px solid var(--rule-strong); padding-bottom: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.top .toplinks { display: none; }
.page.not-today .top .toplinks { display: flex; }
.foot { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.date { font-family: var(--serif); font-size: 20px; font-weight: 600; }
.toplinks { display: flex; gap: 14px; font-size: 14px; align-items: baseline; }
.toplinks a { text-decoration: none; color: var(--ink-faint); border-bottom: 1px solid transparent; }
.toplinks a.active { color: var(--ink); border-bottom-color: var(--ink); }
.link { background: none; border: none; padding: 0; color: var(--brand); cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--brand); }
.link.danger { color: var(--proof-red); border-bottom-color: var(--proof-red); }

.notice { background: var(--gold-soft); border-left: 4px solid var(--gold); padding: 10px 12px; margin: 0 0 14px; font-size: 15px; }
.capture { display: flex; gap: 8px; margin-bottom: 22px; }
.capture input { flex: 1; padding: 12px; border: 2px solid var(--ink); border-radius: var(--radius); font-size: 17px; }

.block { margin-bottom: 22px; }
.label { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; }
details.block > summary { cursor: pointer; list-style: none; }
details.block > summary::-webkit-details-marker { display: none; }
details.block > summary::before { content: '▸ '; }
details.block[open] > summary::before { content: '▾ '; }
.count { font-weight: 500; letter-spacing: 0; color: var(--ink-faint); }

.card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 8px; background: #fff; cursor: pointer; }
.card:active { background: var(--brand-soft); }
.card .title { font-family: var(--serif); font-size: 19px; font-weight: 600; line-height: 1.25; margin: 0 0 4px; }
.card.rad { border: 2px solid var(--ink); background: var(--gold-soft); padding: 18px; }
.card.rad .title { font-size: 26px; }
.card .meta { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 13px; color: var(--ink-faint); align-items: center; }
.card .meta .q { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.chip { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: var(--brand-soft); color: var(--brand); }
.chip.overdue, .chip.flag { background: var(--red-soft); color: var(--proof-red); }
.chip.waiting { background: var(--gold-soft); color: var(--gold-deep); }
.card .next { font-size: 15px; color: var(--ink); margin: 4px 0 6px; }
.card .next::before { content: '→ '; color: var(--brand); }
.card .next.missing { color: var(--ink-faint); font-style: italic; }
.card .actions { display: none; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.card.open .actions { display: flex; }
.card .kids { display: none; }
.card.open .kids { display: block; }
.card.open { border-color: var(--ink); }
.card .kids { margin: 6px 0 0 12px; padding: 0; list-style: none; font-size: 14px; color: var(--ink-soft); }
.card .kids li::before { content: '↳ '; }
.empty { color: var(--ink-faint); font-size: 15px; padding: 8px 0; }
.empty.pick { padding: 12px; border: 1px dashed var(--ink-faint); border-radius: var(--radius); }
.doing { display: grid; gap: 8px; }
.doing .slot { border: 1px dashed var(--rule); border-radius: var(--radius); min-height: 44px; }
.blocks { display: grid; gap: 4px; font-size: 14px; }
.blocks .b { padding: 6px 10px; border-left: 3px solid var(--rule); }
.blocks .b.now { border-left-color: var(--gold); background: var(--gold-soft); }

.btn { background: #fff; border: 1.5px solid var(--ink); border-radius: var(--radius); padding: 8px 14px; cursor: pointer; font-weight: 600; font-size: 15px; }
.btn.primary { background: var(--ink); color: #fff; }
.btn.big { font-size: 18px; padding: 14px 24px; width: 100%; }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.wide { width: 100%; }
.closeday { margin: 28px 0 18px; }
.foot { text-align: center; font-size: 13px; color: var(--ink-faint); }

.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.filters select, .settings input, .settings select, .settings textarea, #ticketForm input, #ticketForm select, #ticketForm textarea, #closeForm input, #closeForm select {
  padding: 8px 10px; border: 1px solid var(--ink-faint); border-radius: var(--radius); background: #fff; width: 100%; max-width: 100%;
}
.filters select { width: auto; }

.drawer { position: fixed; inset: 0; background: rgba(17,17,17,.45); display: flex; align-items: flex-end; justify-content: center; z-index: 10; }
.drawer-card { background: #fff; width: 100%; max-width: 680px; max-height: 94vh; overflow: auto; border-radius: 8px 8px 0 0; padding: 16px; }
@media (min-width: 720px) { .drawer { align-items: center; } .drawer-card { border-radius: 8px; } }
.drawer-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.drawer-head h2 { font-family: var(--serif); margin: 0; font-size: 22px; }
label { display: block; font-size: 13px; color: var(--ink-soft); margin: 10px 0 0; }
label input, label select, label textarea { margin-top: 4px; font-size: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.row { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.row.wrap { flex-wrap: wrap; }
.error { color: var(--proof-red); background: var(--red-soft); padding: 8px 10px; border-radius: var(--radius); font-size: 14px; }
.hint { color: var(--ink-faint); font-size: 14px; }
.children { margin-top: 12px; }
.log { margin-top: 14px; font-size: 13px; color: var(--ink-soft); }
.log ul { padding-left: 18px; }

#closeForm section { border-top: 1px solid var(--rule); padding: 12px 0; }
#closeForm h3 { font-family: var(--serif); font-size: 18px; margin: 0 0 6px; }
.req { font-size: 11px; color: var(--proof-red); text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.opt { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .08em; margin-left: 6px; }
.picker { display: grid; gap: 6px; }
.picker label { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink); margin: 0; padding: 8px 10px; border: 1px solid var(--rule); border-radius: var(--radius); cursor: pointer; }
.picker input { width: auto; flex: 0 0 auto; margin: 4px 0 0; }
.picker label span { flex: 1; }
.wait-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.wait-row input[type=date] { width: auto; }

.settings fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0 0 14px; }
.settings legend { font-weight: 700; font-size: 14px; padding: 0 6px; }
.settings legend small { font-weight: 400; color: var(--ink-faint); }
.srow { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto; gap: 6px; align-items: center; margin-bottom: 6px; font-size: 14px; }
.srow input, .srow select { width: 100%; }
@media (max-width: 600px) { .srow { grid-template-columns: 1fr 1fr; } .grid2 { grid-template-columns: 1fr; } }
.dayrow { display: grid; grid-template-columns: 60px 1fr; gap: 8px; align-items: start; margin-bottom: 8px; font-size: 14px; }
.dayrow .qs { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.dayrow .qs label { display: inline-flex; gap: 4px; margin: 0; align-items: center; font-size: 13px; }
.dayrow .qs input { width: auto; margin: 0; }
.token { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); font-size: 14px; }

.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 360px; border: 1px solid var(--rule); padding: 24px; border-radius: 8px; }
.login-card h1 { font-family: var(--serif); font-size: 22px; margin: 12px 0 6px; }
.login-card .logo { height: 40px; display: block; }
.login-card input { width: 100%; padding: 10px; border: 1px solid var(--ink-faint); border-radius: var(--radius); margin-top: 4px; font-size: 16px; }
.login-card .btn { margin-top: 16px; }