/* Duties (Chris 2026-11-06): a position for another employee, their duties today and the owner's check-in. Prefix dt-. */
.d-block { display: block; }
.dt-page { display: flex; flex-direction: column; gap: 16px; max-width: 980px; margin: 0 auto; }
.dt-page .inv-pills { margin-bottom: 0; }
.dt-page .bad { color: var(--bad); } .dt-page .ok { color: var(--ok); } .dt-page .warn { color: var(--warn); }
/* Duties | Inventory switch in the header */
.dt-area { display: inline-flex; background: var(--panel2); border-radius: 12px; padding: 4px; gap: 4px; }
.dt-area button { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 14px; padding: 8px 16px; border-radius: 9px; color: var(--muted); }
.dt-area button .ic { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; }
.dt-area button.on { background: var(--panel); color: var(--fg); box-shadow: var(--shadow); }
.dt-area button:not(.on):hover { color: var(--accent); }
/* Today hero */
.dt-hero { margin: 0; }
.dt-hero h1 { font-size: 28px; }
.dt-hero p { margin-bottom: 0; }
.dt-daynav { display: inline-flex; gap: 4px; background: rgba(0, 0, 0, .28); border-radius: 12px; padding: 4px; }
.dt-daynav button { all: unset; cursor: pointer; color: #fff; font-weight: 600; padding: 7px 13px; border-radius: 9px; font-size: 14px; }
.dt-daynav button.on { background: rgba(255, 255, 255, .18); }
.dt-daynav button:hover { background: rgba(255, 255, 255, .12); }
.dt-progress { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.dt-progress b { white-space: nowrap; font-size: 15px; }
.dt-bar { flex: 1; height: 12px; background: rgba(255, 255, 255, .16); border-radius: 999px; overflow: hidden; }
.dt-bar span { display: block; height: 100%; background: #5fd39a; border-radius: 999px; transition: width .3s; }
.dt-off { margin-top: 14px !important; }
.dt-alldone { display: flex; gap: 14px; align-items: center; background: var(--ok-soft); color: var(--fg); border-radius: 14px; padding: 14px 18px; }
.dt-alldone > .ic { width: 34px; height: 34px; padding: 6px; border-radius: 50%; background: var(--ok); stroke: #fff; fill: none; stroke-width: 3; flex: none; }
/* Groups and rows */
.dt-group { display: flex; flex-direction: column; gap: 8px; }
.dt-group > h2 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.dt-group > p { margin: -4px 0 0; }
.dt-late > h2 { color: var(--warn); }
.dt-list { display: flex; flex-direction: column; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dt-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); min-height: 64px; }
.dt-row:last-child { border-bottom: 0; }
.dt-tick { flex: none; width: 38px; height: 38px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--panel); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.dt-tick:hover:not(:disabled) { border-color: var(--ok); background: var(--ok-soft); }
.dt-tick .ic { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 3; }
.dt-tick:disabled { opacity: 1; cursor: default; border-style: dashed; }
.dt-main { all: unset; box-sizing: border-box; cursor: pointer; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
div.dt-main { cursor: default; }
.dt-main b { font-size: 15.5px; font-weight: 600; }
.dt-main small { color: var(--muted); font-size: 12.5px; }
.dt-main:hover b { color: var(--accent); } div.dt-main:hover b { color: inherit; }
.dt-askres { color: var(--accent); font-weight: 600; }
.dt-freq { flex: none; background: var(--accent-soft); color: var(--accent); border-color: transparent; font-weight: 600; }
.dt-row.did .dt-tick { background: var(--ok); border-color: var(--ok); border-style: solid; }
.dt-row.did .dt-main b { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.dt-row.did { background: color-mix(in srgb, var(--ok-soft) 35%, var(--panel)); }
.dt-row.fail .dt-tick { background: var(--bad); border-color: var(--bad); border-style: solid; }
.dt-row.fail { background: var(--bad-soft); }
.dt-row.skip .dt-tick { background: var(--warn); border-color: var(--warn); border-style: solid; }
.dt-row.skip { background: var(--warn-soft); }
.dt-row.late .dt-tick { border-color: var(--warn); }
.dt-row.miss { background: color-mix(in srgb, var(--bad-soft) 45%, var(--panel)); }
.dt-dot { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; color: var(--muted); }
.dt-dot .ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.dt-row.miss .dt-dot, .dt-row.fail .dt-dot { background: var(--bad); color: #fff; }
.dt-row.skip .dt-dot { background: var(--warn); color: #fff; }
.dt-steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; }
/* result form */
.dt-resform, .dt-form, .dt-skip { display: flex; flex-direction: column; gap: 12px; }
.dt-skip { border-top: 1px solid var(--line); padding-top: 12px; gap: 8px; } .dt-skip button { align-self: flex-start; }
.dt-pf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dt-pfbtn { cursor: pointer; } .dt-pfbtn input { position: absolute; opacity: 0; pointer-events: none; }
.dt-pfbtn span { display: flex; justify-content: center; padding: 16px; font-size: 18px; font-weight: 700; border: 2px solid var(--line); border-radius: 12px; }
.dt-pfbtn.pass input:checked + span { background: var(--ok); border-color: var(--ok); color: #fff; }
.dt-pfbtn.fail input:checked + span { background: var(--bad); border-color: var(--bad); color: #fff; }
.dt-num { font-size: 18px; width: 140px; }
.dt-form .field input, .dt-form .field select, .dt-form .field textarea, .dt-resform .field input { font-size: 15px; color: var(--fg); }
.dt-form .field, .dt-resform .field { font-size: 12.5px; font-weight: 600; }
/* chips used as radio / checkbox */
.dt-days { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.dt-chip { cursor: pointer; display: inline-flex; }
.dt-chip input { position: absolute; opacity: 0; pointer-events: none; }
.dt-chip span, button.dt-chip { font-size: 13.5px; font-weight: 600; color: var(--fg); padding: 7px 13px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); }
.dt-chip input:checked + span, button.dt-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.dt-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dt-krow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.dt-form [hidden] { display: none !important; }
.dt-del { color: var(--bad); margin-right: auto; }
/* setup */
.dt-head h1 { font-size: 24px; } .dt-head p { margin: 2px 0 0; }
.dt-poscards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dt-poscard { text-align: left; cursor: pointer; gap: 3px; border-width: 1.5px; }
.dt-poscard b { font-size: 17px; }
.dt-poscard.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dt-posbar { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.dt-posbar p { margin: 2px 0 0; }
.dt-setrow { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.dt-setrow:last-child { border-bottom: 0; }
.dt-setrow:hover { background: var(--panel2); } .dt-setrow:hover .muted { color: var(--accent); }
.dt-setrow b { display: block; font-weight: 600; font-size: 14.5px; } .dt-setrow small { color: var(--muted); font-size: 12.5px; }
.dt-empty { align-items: flex-start; padding: 22px; }
/* coming up */
.dt-week { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dt-wday { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.dt-wday.quiet { background: transparent; }
.dt-wday ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* check-in */
.dt-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dt-tile { gap: 2px; } .dt-big { font-size: 30px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.dt-gridwrap { overflow-x: auto; padding: 10px 12px; }
.dt-grid { border-collapse: collapse; width: 100%; font-size: 13px; }
.dt-grid th { font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 3px; text-align: center; line-height: 1.2; }
.dt-grid th:first-child, .dt-grid td:first-child { text-align: left; padding-right: 12px; min-width: 220px; }
.dt-grid td { border-top: 1px solid var(--line); padding: 5px 3px; }
.dt-c { text-align: center; }
.dt-c span { display: inline-block; width: 16px; height: 16px; border-radius: 5px; vertical-align: middle; }
.dt-c.did span { background: var(--ok); } .dt-c.miss span { background: var(--bad); } .dt-c.skip span { background: var(--warn); } .dt-c.fail span { background: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft), inset 0 0 0 3px #fff; } .dt-c.open span { border: 2px solid var(--muted); }
.dt-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.dt-legend .dt-c { display: inline-flex; margin-left: 6px; }
.dt-restbl td.bad b { color: var(--bad); } .dt-restbl td.ok b { color: var(--ok); }
.dt-pospick { margin: 0; }
body .s2-main { padding-bottom: 80px; }
@media (max-width: 640px) {
  .dt-poscards, .dt-week, .dt-tiles { grid-template-columns: 1fr; }
  .dt-hero h1 { font-size: 23px; }
  .dt-row { padding: 10px 12px; gap: 10px; }
  .dt-freq { display: none; }
  .dt-area button { padding: 7px 11px; }
}
/* Draft 3: top bar (date · ‹ Today › · Day | Month), month calendar, iPhone preview */
.dt-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.dt-topdate { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.dt-topdate b { font-size: 20px; font-weight: 700; white-space: nowrap; }
.dt-topdate span { font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); padding: 2px 8px; border-radius: 999px; }
.dt-short { display: none; }
.dt-nav, .dt-seg { display: inline-flex; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.dt-nav button, .dt-seg button { all: unset; cursor: pointer; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 9px; color: var(--fg); text-align: center; }
.dt-nav button:first-child, .dt-nav button:last-child { font-size: 18px; line-height: 1; padding: 6px 13px 8px; }
.dt-nav button.on { background: var(--accent-soft); color: var(--accent); }
.dt-nav button:hover, .dt-seg button:not(.on):hover { background: var(--panel2); }
.dt-seg { justify-self: end; }
.dt-seg button.on { background: var(--accent); color: #fff; }
.dt-month { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dt-mhead, .dt-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.dt-mhead span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 8px 6px; border-bottom: 1px solid var(--line); }
.dt-mday { all: unset; box-sizing: border-box; cursor: pointer; min-height: 104px; padding: 6px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dt-mday:nth-child(7n) { border-right: 0; }
.dt-mday:hover { background: var(--panel2); }
.dt-mday i { font-style: normal; font-weight: 600; font-size: 13px; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.dt-mday.out { cursor: default; background: transparent; } .dt-mday.out i { color: var(--line); }
.dt-mday.closed:not(.out) { background: color-mix(in srgb, var(--panel2) 60%, var(--panel)); } .dt-mday.closed i { color: var(--muted); }
.dt-mday.pick i { background: var(--accent); color: #fff; }
.dt-mday.today i { box-shadow: 0 0 0 1.5px var(--panel), 0 0 0 3.5px var(--accent); }
.dt-mtask { font-size: 11.5px; line-height: 1.3; padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); font-weight: 600; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.dt-mtask.did { background: var(--ok-soft); color: var(--ok); text-decoration: line-through; }
.dt-mtask.miss, .dt-mtask.fail { background: var(--bad-soft); color: var(--bad); }
.dt-mtask.skip, .dt-mtask.late { background: var(--warn-soft); color: var(--warn); }
.dt-mtask.now { border: 2px solid var(--accent); padding: 1px 4px; }
.dt-mdots { display: none; }
.dt-mrow { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.dt-mrow:last-child { border-bottom: 0; } .dt-mrow:hover { background: var(--panel2); }
.dt-mdate { flex: none; width: 40px; display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.dt-mdate b { font-size: 19px; } .dt-mdate small { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.dt-st { flex: none; font-weight: 600; border-color: transparent; }
.dt-st.did { background: var(--ok-soft); color: var(--ok); } .dt-st.miss, .dt-st.fail { background: var(--bad-soft); color: var(--bad); } .dt-st.skip, .dt-st.late { background: var(--warn-soft); color: var(--warn); } .dt-st.now { background: var(--accent-soft); color: var(--accent); }
.dt-mrow.did .dt-main b { color: var(--muted); }


@media (max-width: 640px) {
  .dt-top { grid-template-columns: 1fr auto; }
  .dt-topdate { grid-column: 1 / -1; }
  .dt-long { display: none; } .dt-short { display: inline; }
  .dt-nav button { padding: 7px 10px; font-size: 13.5px; } .dt-seg button { padding: 7px 11px; font-size: 13.5px; }
  .dt-mday { min-height: 54px; padding: 4px 2px; align-items: center; }
  .dt-mtask { display: none; }
  .dt-mdots { display: flex; gap: 3px; flex-wrap: wrap; justify-content: center; }
  .dt-mdots b { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .dt-mdots b.did { background: var(--ok); } .dt-mdots b.miss, .dt-mdots b.fail { background: var(--bad); } .dt-mdots b.skip, .dt-mdots b.late { background: var(--warn); }
  .dt-mhead span { padding: 6px 0; text-align: center; font-size: 10px; }
  .s2-top { gap: 8px; }
}
@media (max-width: 640px) { .s2-user > .muted.sm { display: none; } }
/* Draft 4: Table view */
.dt-tblwrap { padding: 0; overflow-x: auto; }
.dt-tbl { border: 0; border-radius: 0; }
.dt-tbl tbody tr { cursor: pointer; } .dt-tbl tbody tr:hover { background: var(--panel2); }
.dt-tbl td { vertical-align: top; font-size: 13.5px; } .dt-tbl td b { font-weight: 600; }
.dt-tbl .dt-freq { margin-bottom: 3px; }
@media (max-width: 640px) { .dt-tbl .dt-hide { display: none; } .dt-tbl td, .dt-tbl th { padding: 8px; } .dt-seg button { padding: 7px 9px; } }
@media (max-width: 640px) { }
/* Draft 5: editable table */
.dt-tbledit tbody tr { cursor: default; } .dt-tbledit tbody tr:hover { background: transparent; }
.dt-tbledit td { vertical-align: middle; padding: 6px 8px; }
.dt-in { font: inherit; font-size: 13.5px; color: var(--fg); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; width: 100%; max-width: 100%; }
.dt-in:hover { border-color: var(--line); } .dt-in:focus { border-color: var(--accent); background: var(--panel); outline: none; }
select.dt-in { cursor: pointer; padding-right: 4px; }
.dt-in-name { font-weight: 600; min-width: 220px; }
.dt-rule { padding: 0 8px; }
.dt-acts { white-space: nowrap; text-align: right; }
.dt-x { border: 0; background: none; font-size: 20px; line-height: 1; padding: 4px 9px; color: var(--muted); border-radius: 8px; }
.dt-x:hover { background: var(--bad-soft); color: var(--bad); }
.dt-addrow td { background: var(--panel2); }
.dt-addrow form { display: grid; grid-template-columns: minmax(200px, 2fr) 1fr 1fr auto; gap: 8px; align-items: center; }
.dt-addrow .dt-in { background: var(--panel); border-color: var(--line); }
tr.dt-new td { animation: dtflash 1.6s ease-out; }
@keyframes dtflash { from { background: var(--ok-soft); } to { background: transparent; } }
@media (max-width: 640px) { .dt-in-name { min-width: 0; } .dt-addrow form { grid-template-columns: 1fr 1fr; } .dt-addrow form .dt-in-name { grid-column: 1 / -1; } .dt-addrow form select[name=when], .dt-addrow form select[name=area] { display: none; } .dt-acts .ghost { display: none; } }
.dt-tbledit { table-layout: fixed; min-width: 760px; }
.dt-tbledit th:nth-child(1) { width: 40%; } .dt-tbledit th:nth-child(2) { width: 22%; } .dt-tbledit th:nth-child(3) { width: 14%; } .dt-tbledit th:nth-child(4) { width: 14%; } .dt-tbledit th:nth-child(5) { width: 104px; }
.dt-tbledit .dt-in-name { min-width: 0; text-overflow: ellipsis; }
@media (max-width: 640px) { .dt-tbledit { min-width: 0; } .dt-tbledit th:nth-child(1) { width: 55%; } .dt-tbledit th:nth-child(2) { width: 35%; } .dt-tbledit th:nth-child(5) { width: 40px; } }
.dt-tbledit th:nth-child(1) { width: 34%; } .dt-tbledit th:nth-child(3), .dt-tbledit th:nth-child(4) { width: 16.5%; } @media (max-width: 640px) { .dt-tbledit th:nth-child(1) { width: 55%; } }
/* Draft 6: iPhone, one duty at a time */
.dt-stepper { display: flex; flex-direction: column; gap: 12px; }
.dt-stephead { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; }
.dt-steps-bar { display: flex; gap: 3px; }
.dt-steps-bar span { flex: 1; height: 6px; border-radius: 999px; background: var(--line); }
.dt-steps-bar span.did { background: var(--ok); } .dt-steps-bar span.skip { background: var(--warn); }
.dt-steps-bar span.on { box-shadow: 0 0 0 2px var(--accent); }
.dt-stepcard { background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--shadow); }
.dt-stepcard.late { border-color: var(--warn); } .dt-stepcard.did { border-color: var(--ok); } .dt-stepcard.skip { border-color: var(--warn); }
.dt-stepgroup { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); }
.dt-stepcard.late .dt-stepgroup { color: var(--warn); }
.dt-stepcard h2 { font-size: 24px; line-height: 1.25; }
.dt-stepcard > p { margin: -6px 0 0; }
.dt-stepcard .dt-steps { font-size: 16px; gap: 8px; }
.dt-big-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px; font-size: 18px; border-radius: 14px; }
.dt-big-btn .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; }
.dt-donebtn { background: var(--ok); border-color: var(--ok); }
.dt-stepbtns { display: flex; gap: 8px; } .dt-stepbtns > button { flex: 1; padding: 11px 6px; font-weight: 600; }
.dt-stepdone { background: var(--ok-soft); color: var(--ok); font-weight: 600; padding: 10px 12px; border-radius: 10px; }
.dt-stepcard.skip .dt-stepdone { background: var(--warn-soft); color: var(--warn); }
.dt-skipline { display: flex; gap: 8px; } .dt-skipline input { flex: 1; font-size: 16px; }
.dt-listlink { align-self: center; padding: 6px; }
.dt-thanks { background: var(--ok-soft); border-radius: 18px; padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dt-thanks > .ic { width: 56px; height: 56px; padding: 12px; border-radius: 50%; background: var(--ok); stroke: #fff; fill: none; stroke-width: 3; }
.dt-thanks h2 { font-size: 22px; } .dt-thanks p { margin: 0; }
button.dt-donebtn { background: var(--ok); border-color: var(--ok); color: #fff; }
/* Draft 8 (Chris 2026-11-10 'too much up top'): phone header = one slim row, date lives in the middle button */
.dt-ph { display: none; }
@media (max-width: 640px) {
  .s2-top { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .s2-top .brand { gap: 0; } .s2-top .brand > div { display: none; } .s2-top .brand .mark { width: 26px; height: 26px; }
  .dt-area { padding: 3px; gap: 2px; border-radius: 10px; } .dt-area button { padding: 6px 10px; font-size: 13.5px; gap: 5px; } .dt-area button .ic { width: 15px; height: 15px; }
  .s2-user { gap: 4px; } .s2-user > b { display: none; } .s2-user .chip { display: none; } .s2-user button { padding: 5px 8px; font-size: 12.5px; }
  .s2-main { padding-top: 10px; }
  .dt-page { gap: 10px; }
  .dt-top-nav { grid-template-columns: 1fr auto; gap: 8px; }
  .dt-top-nav .dt-topdate { display: none; }
  .dt-dk { display: none; } .dt-ph { display: inline; }
  .dt-nav button { padding: 6px 9px; font-size: 13.5px; } .dt-nav button.on, .dt-nav button:nth-child(2) { min-width: 92px; }
  .dt-nav { justify-self: start; }
  .dt-seg button { padding: 6px 9px; font-size: 13.5px; }
  .dt-stepper { gap: 8px; } .dt-stephead { font-size: 13px; }
}
@media (max-width: 640px) {
  .dt-top-nav { gap: 6px; }
  .dt-nav button { padding: 6px 7px; font-size: 13px; } .dt-nav button.on, .dt-nav button:nth-child(2) { min-width: 84px; }
  .dt-nav button:first-child, .dt-nav button:last-child { padding: 5px 9px 7px; font-size: 16px; }
  .dt-seg button { padding: 6px 7px; font-size: 13px; }
  .dt-hero { padding: 14px 16px; border-radius: 16px; } .dt-hero h1 { font-size: 19px; } .dt-hero p { font-size: 13px; } .dt-progress { margin-top: 10px; }
}
/* Draft 11: setup list in columns with a Due status (Chris 2026-11-10) */
.dt-sethead, .dt-setcols { display: grid !important; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1.2fr) minmax(0, 1.5fr) 160px 40px; gap: 14px; align-items: center; }
.dt-sethead { padding: 8px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--panel2); border-bottom: 1px solid var(--line); }
.dt-setcols > span { min-width: 0; }
.dt-setcols small { display: block; color: var(--muted); font-size: 12px; }
.dt-c-often b { font-weight: 600; font-size: 13.5px; }
.dt-c-tod { font-size: 13px; color: var(--muted); }
.dt-stat { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--panel2); color: var(--muted); }
.dt-stat.now { background: var(--accent); color: #fff; } .dt-stat.late { background: var(--warn-soft); color: var(--warn); } .dt-stat.did { background: var(--ok-soft); color: var(--ok); } .dt-stat.soon { background: var(--accent-soft); color: var(--accent); } .dt-stat.need { background: transparent; border: 1px dashed var(--line); }
@media (max-width: 640px) { .dt-sethead { display: none !important; } .dt-setcols { grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; } .dt-setcols .dt-c-often, .dt-setcols .dt-c-tod { display: none; } .dt-setcols > span:last-child { display: none; } }

/* Draft 12: no Time of day column (Chris 2026-11-10) */
.dt-tbledit th:nth-child(1) { width: 46%; } .dt-tbledit th:nth-child(2) { width: 26%; } .dt-tbledit th:nth-child(3) { width: 18%; } .dt-tbledit th:nth-child(4) { width: 10%; min-width: 96px; }
@media (max-width: 640px) { .dt-tbledit th:nth-child(1) { width: 55%; } .dt-tbledit th:nth-child(2) { width: 35%; } .dt-tbledit th:nth-child(4) { width: 40px; } }
.dt-more summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--teal, #0e7c86); padding: 4px 0; }
.dt-more[open] summary { margin-bottom: 8px; }
.dt-form .dt-pf .field { margin: 0; }
.dt-mmore { font-size: 11.5px; font-weight: 600; color: var(--muted); padding: 0 6px; }
@media (max-width: 640px) { .dt-mmore { display: none; } }
.dt-more summary { color: var(--accent); }
/* Check-in done / not done (Draft 13) */
.dt-dlcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dt-dlcol h3 { margin: 0 0 8px; font-size: 15px; }
.dt-dlcol.yes { border: 2px solid var(--ok-soft); } .dt-dlcol.no { border: 2px solid var(--warn-soft); }
.dt-dlcol ul { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.dt-dl { display: flex; gap: 10px; align-items: flex-start; }
.dt-dl small { display: block; color: var(--muted); font-size: 12px; }
.dt-dl .dt-dot { flex: none; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; border: 2px solid var(--line); }
.dt-dl.did .dt-dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.dt-dl.skip .dt-dot { background: var(--warn-soft); border-color: var(--warn); color: var(--warn); }
.dt-dl.fail .dt-dot { background: var(--bad); border-color: var(--bad); color: #fff; }
.dt-dl.late .dt-dot { border-color: var(--warn); }
@media (max-width: 640px) { .dt-dlcols { grid-template-columns: 1fr; } }
.dt-dlcol .dt-dl { justify-content: flex-start; text-align: left; } .dt-dl > span:last-child { flex: 1; min-width: 0; }
/* Draft 14: manager tabs on one row on a phone */
@media (max-width: 640px) { .dt-page .inv-pills { flex-wrap: nowrap; gap: 6px; } .dt-page .inv-pills button { flex: 1; justify-content: center; padding: 8px 6px; font-size: 13.5px; gap: 5px; } .dt-page .inv-pills button .ic { width: 15px; height: 15px; } }
@media (max-width: 640px) { .dt-page .inv-pills button { white-space: nowrap; } .dt-page .inv-pills button .ic { display: none; } .dt-page .inv-pills button em { padding: 0 6px; } .dt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } .dt-tile { padding: 12px; } .dt-tile .dt-big { font-size: 24px; } }
@media (max-width: 640px) { .dt-setcols .dt-c-who { display: none; } }
.dt-form .dt-pf:has(select[name=pos]) { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 640px) { .dt-form .dt-pf:has(select[name=pos]) { grid-template-columns: 1fr 1fr; } }
/* Draft 16: sortable column titles */
.dt-sortth button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; }
.dt-sortth button:hover { color: var(--fg); } .dt-sortth button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.dt-sortar { font-size: 9px; opacity: .45; } .dt-sortth.on { color: var(--accent); } .dt-sortth.on .dt-sortar { opacity: 1; }
.dt-poscard { position: relative; cursor: pointer; } .dt-posedit { position: absolute; top: 12px; right: 12px; }
.dt-poscard { display: flex; flex-direction: column; } .dt-poscard.on { background: var(--accent-soft); } .dt-poscard.on b, .dt-poscard.on > span:not(.ccard-h):not(.muted) { color: var(--accent); } .dt-poscard b { padding-right: 110px; }
.dt-posadd { position: absolute; bottom: 12px; right: 12px; }
/* Draft 19: the position not picked is greyed */
.dt-poscard:not(.on) { background: var(--panel2); border-color: var(--line); color: var(--muted); }
.dt-poscard:not(.on) b, .dt-poscard:not(.on) > span { color: var(--muted); }
.dt-poscard:not(.on) .dt-posadd { background: var(--grey); border-color: var(--grey); color: var(--grey-t); }
.dt-poscard:not(.on):hover { border-color: var(--accent); }
/* Draft 20: positions are binder tabs joined to a coloured panel (Chris 2026-11-10) */
.dt-binder .dt-poscards { display: flex; gap: 6px; margin: 0; align-items: flex-end; position: relative; z-index: 1; }
.dt-binder .dt-poscard { flex: 1 1 0; max-width: 380px; border-radius: 14px 14px 0 0; border: 1px solid var(--line); border-bottom: 0; box-shadow: none; margin-bottom: -1px; padding: 12px 14px 14px; }
.dt-binder .dt-poscard.on { background: var(--accent-soft); border-color: var(--line); padding-bottom: 16px; }
.dt-binder .dt-poscard:not(.on) { background: var(--panel2); margin-top: 8px; }
.dt-binder .dt-poscard:not(.on):hover { border-color: var(--line); background: var(--grey); }
.dt-binpanel { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 0 14px 14px 14px; padding: 4px 16px 16px; }
.dt-binpanel .dt-group:first-child { margin-top: 10px; }
.dt-binpanel .dt-setlist { background: var(--panel); }
.dt-binpanel .dt-sethead { background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel)); }
@media (max-width: 640px) {
  .dt-binder .dt-poscard { padding: 10px; } .dt-binder .dt-poscard b { font-size: 14.5px; padding-right: 0; }
  .dt-binder .dt-poscard > span:not(.ccard-h) { display: none; } .dt-binder .dt-poscard .ccard-h { display: none; }
  .dt-binder .dt-posedit, .dt-binder .dt-posadd { position: static; margin-top: 6px; align-self: flex-start; }
  .dt-binder .dt-poscard:not(.on) .dt-posedit, .dt-binder .dt-poscard:not(.on) .dt-posadd { display: none; }
  .dt-binpanel { padding: 4px 10px 10px; border-radius: 0 0 14px 14px; }
}