/* TallyCrew app styles, adapted from docs/design/assets/system.css (the design pages) for real pages and real
   controls: states are :hover, :active, :checked and [aria-pressed] instead of drawn classes, and the review-page
   frames are gone. Colors, spacing and corners come from tokens.css (generated from DESIGN.md, loaded first);
   type sizes mirror DESIGN.md's typography tokens, which the exporter doesn't emit. */

@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--color-surface)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;font:17px/1.5 "Atkinson Hyperlegible",system-ui,sans-serif;color:var(--color-on-surface);background:var(--color-surface);overflow-wrap:break-word}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p{margin:0}
.ic{width:1.2em;height:1.2em;flex:none;vertical-align:-.22em}
.mark{width:26px;height:26px;flex:none;display:block}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--color-on-surface-muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.nowrap{white-space:nowrap}
.inline{display:inline}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--color-link);outline-offset:3px}
.panel :focus-visible{outline-color:var(--color-accent)}
.skip{position:absolute;left:8px;top:-60px;z-index:2;background:var(--color-accent);color:var(--color-on-accent);padding:12px 16px;border-radius:var(--rounded-md);font-weight:700}
.skip:focus{top:8px}
.wrap{width:100%;max-width:1200px;margin:0 auto}

/* ---------- panel ---------- */
.panel{background:var(--color-primary);color:var(--color-on-primary);padding:8px var(--spacing-screen-side) 36px}
.panel .toprow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:48px;font-size:16px}
.panel .toprow .org{font-weight:700}
.panel .toprow .end{margin-left:auto}
.panel .toprow .tasktitle{font-weight:700}
.panel .ibtn{width:48px;height:48px;display:grid;place-items:center;border-radius:var(--rounded-md);color:var(--color-on-primary)}
.panel .ibtn.lead{margin-left:-12px}
.panel .ibtn .ic{width:24px;height:24px}
.panel .menu{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 4px;font-weight:700;color:var(--color-on-primary);text-decoration:none}
.panel .backlink{display:inline-flex;align-items:center;gap:6px;min-height:48px;font-weight:700;color:var(--color-on-primary);text-decoration:none}
.panel .datebtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:8px;font-size:19px;color:var(--color-on-primary-muted);text-decoration:none}
.panel .headnum{font:inherit;margin:0}
.panel .big{display:block;font-size:60px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;margin-top:12px}
.panel .line{display:flex;align-items:flex-start;gap:8px;font-size:19px;line-height:1.35;margin-top:10px;color:var(--color-on-primary);font-weight:400}
.panel .line .ic{margin-top:.1em}
.panel .line.muted{color:var(--color-on-primary-muted)}
.panel .q{font-size:28px;font-weight:700;line-height:1.2;margin:16px 0 0}
.panel .bigicon{display:block;margin-top:12px}
.panel .bigicon .ic{width:56px;height:56px}
.panel .daysofar{margin-top:2px;font-size:17px;color:var(--color-on-primary-muted)}
.panel .tag-demo{display:inline-block;margin-top:12px;padding:2px 10px;border-radius:var(--rounded-full);box-shadow:inset 0 0 0 2px var(--color-on-primary);font-weight:700;font-size:16px}
.panel a:not([class]){color:var(--color-on-primary);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- buttons ---------- */
.go{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 20px;margin-top:24px;border-radius:var(--rounded-lg);background:var(--color-accent);color:var(--color-on-accent);font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;text-align:center}
.go:hover{background:var(--color-accent-hover)}
.go:active{background:var(--color-accent-pressed)}
.go.busy{background:var(--color-busy);color:var(--color-on-primary);cursor:progress}
.quiet{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;margin-top:24px;padding:0 10px;border-radius:var(--rounded-lg);background:var(--color-primary);color:var(--color-on-primary);box-shadow:inset 0 0 0 2px var(--color-on-primary);font-weight:700;font-size:18px;text-decoration:none;text-align:center}
.quiet:hover,.quiet:active{background:var(--color-busy)}
.pair{display:grid;grid-template-columns:1fr 1.6fr;gap:10px}
.pair form{display:contents}
.panel .pair .go,.panel .pair .quiet{margin-top:24px}
.sheet .pair{margin-top:16px}
.sheet .pair .btn{padding:0 10px}
.pair.stack{grid-template-columns:1fr}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:56px;padding:0 20px;border-radius:var(--rounded-lg);font-weight:700;font-size:18px;line-height:1.2;text-decoration:none;text-align:center}
.btn.primary{background:var(--color-primary);color:var(--color-surface)}
.btn.primary:hover,.btn.primary:active{background:var(--color-busy)}
.btn.ghost{background:var(--color-surface);color:var(--color-on-surface);box-shadow:inset 0 0 0 2px var(--color-primary)}
.btn.ghost:hover,.btn.ghost:active{background:var(--color-surface-soft)}
.btn.auto{width:auto}
.link{color:var(--color-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.link .ic{margin-right:4px}
.linkbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------- sheet ---------- */
.sheet{flex:1;background:var(--color-surface);border-radius:var(--rounded-xl) var(--rounded-xl) 0 0;margin-top:-24px;padding:22px var(--spacing-screen-side) 24px;position:relative}
.sheet:focus{outline:0}
.sheet .head{margin:16px 0 4px;font-size:16px;font-weight:700;color:var(--color-on-surface-muted)}
.sheet .head:first-child{margin-top:0}
.sheet .title{margin:24px 0 8px;font-size:22px;font-weight:700;line-height:1.25}
.sheet .title:first-child{margin-top:0}
.sheet p{margin:0 0 12px}
.sheet .invite{text-align:center;color:var(--color-on-surface-muted);margin:24px 0}
.msg{display:flex;gap:8px;align-items:flex-start;font-weight:700;font-size:19px;line-height:1.3;margin:4px 0 8px}
.msg .ic{margin-top:.1em}
.msg.ok{color:var(--color-approved)} .msg.warn{color:var(--color-warning)} .msg.err{color:var(--color-error)}
.demo-note{margin-top:32px!important;font-size:16px;color:var(--color-on-surface-muted)}
details.more{margin:20px 0}
details.more summary{min-height:44px;display:flex;align-items:center;font-weight:700;color:var(--color-link);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
details.more form{display:flex;flex-direction:column;gap:12px;margin-top:8px}

/* ---------- rows ---------- */
.rows{list-style:none;margin:0 0 12px;padding:0}
.rows li{border-bottom:1px solid var(--color-line)}
.rows li:last-child{border-bottom:0}
.rows .rowlink{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;min-height:44px;padding:14px 0;font-size:19px;line-height:1.35;color:inherit;text-decoration:none}
.rows li > .rmain,.rows li > span{display:block;padding:14px 0;font-size:19px;line-height:1.35}
.rows .rmain{min-width:0;flex:1}
.rows .rname{display:block}
.rows small{display:block;font-size:17px;color:var(--color-on-surface-muted);line-height:1.4;margin-top:2px}
.rows small.flag{font-weight:700}
.rows small.flag .ic{margin-right:4px}
.rows small.flag.ok{color:var(--color-approved)} .rows small.flag.warn{color:var(--color-warning)} .rows small.flag.err{color:var(--color-error)}
.rows b{white-space:nowrap;font-variant-numeric:tabular-nums}
.rows .geoline{margin:-8px 0 0!important;padding-bottom:14px;font-size:17px;color:var(--color-on-surface-muted)}
.rows .geoline.warn{color:var(--color-warning);font-weight:700}
.rows .geoline .ic{margin-right:4px}
.rows .tick{flex:none}
.rows li.saved{background:var(--color-surface-soft);margin:0 -24px;padding:0 24px;animation:fade 2s ease-out forwards}
@keyframes fade{from{background:var(--color-surface-soft)}to{background:var(--color-surface)}}

/* ---------- Add time: receipt, step dots, question, recent cards ---------- */
.receipt{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.receipt li{display:grid;grid-template-columns:5em 1fr;gap:8px;font-size:17px;line-height:1.3}
.receipt .k{color:var(--color-on-primary-muted)}
.receipt .val{font-weight:700;color:var(--color-on-primary);min-width:0}
.receipt .val.wait{color:var(--color-on-primary-muted);font-weight:400}
.receipt .val.now{color:var(--color-accent)}
.stepdots{display:flex;gap:6px}
.stepdots i{width:26px;height:6px;border-radius:3px;background:var(--color-busy)}
.stepdots i.on{background:var(--color-accent)}
.question{font-size:30px;font-weight:700;line-height:1.15;margin:0 0 12px}
.question:focus,.sheet .head:focus{outline:0}
/* Each Add time step slides in from the right (DESIGN.md Animation). */
body.task .question{animation:slidein .2s ease-out}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.recent{display:flex;flex-direction:column;gap:10px}
.recent button{display:block;width:100%;padding:14px 16px;border-radius:var(--rounded-lg);background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-edge);text-align:left}
.recent button:hover{box-shadow:inset 0 0 0 2px var(--color-primary)}
.recent button:active{box-shadow:inset 0 0 0 3px var(--color-primary)}
.recent button b{display:block;font-size:19px;line-height:1.25}
.recent button span{display:block;color:var(--color-on-surface-muted);font-size:17px;line-height:1.3;margin-top:2px}
.recent + .btn,.recent + details{margin-top:14px}

/* ---------- choice list, search ---------- */
.choices{list-style:none;margin:0 0 14px;padding:0}
.choices button{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 0;font-size:19px;font-weight:700;line-height:1.3;border-bottom:1px solid var(--color-line)}
.choices li:last-child button{border-bottom:0}
.choices button > span{flex:1;min-width:0}
.choices small{display:block;font-size:17px;font-weight:400;color:var(--color-on-surface-muted)}
.choices .tick{margin-left:auto;flex:none}
.searchform{display:flex;gap:8px;margin-bottom:14px}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:10px;min-height:52px;padding:0 14px;border-radius:var(--rounded-md);background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-edge);color:var(--color-on-surface-muted)}
.search:focus-within{outline:3px solid var(--color-link);outline-offset:3px}
.search input{flex:1;min-width:0;border:0;background:none;min-height:48px;font-size:17px;color:var(--color-on-surface);outline:0}
.search input::placeholder{color:var(--color-on-surface-muted);opacity:1}
.findbtn{width:auto;min-height:52px}
.js .findbtn{display:none}

/* ---------- hours control ---------- */
.quick{display:grid;grid-template-columns:repeat(auto-fit,minmax(64px,1fr));gap:8px;margin-top:10px}
.quick button{min-height:56px;border-radius:var(--rounded-lg);box-shadow:inset 0 0 0 2px var(--color-edge);font-weight:700;font-size:18px;text-align:center;display:grid;place-items:center}
.quick button:hover{box-shadow:inset 0 0 0 2px var(--color-primary)}
.quick button[aria-pressed="true"]{background:var(--color-primary);color:var(--color-surface);box-shadow:none}
.stepper{display:grid;grid-template-columns:72px minmax(0,1fr) 72px;grid-template-areas:"minus out plus";gap:12px;align-items:center;margin-top:16px}
.stepper .sbtn{width:72px;height:72px;border-radius:18px;box-shadow:inset 0 0 0 2px var(--color-primary);display:grid;place-items:center}
.stepper .sbtn .ic{width:28px;height:28px}
.stepper .sbtn:first-child{grid-area:minus}
.stepper .sbtn:last-child{grid-area:plus}
.stepper .sbtn[disabled]{box-shadow:inset 0 0 0 2px var(--color-line);color:var(--color-edge);cursor:not-allowed}
.stepper output{grid-area:out;text-align:center;font-weight:700;line-height:1}
.stepper output .n{display:block;font-size:48px;font-variant-numeric:tabular-nums}
.stepper output small{display:block;font-size:17px;font-weight:400;color:var(--color-on-surface-muted);margin-top:4px}
.hintline{text-align:center;color:var(--color-on-surface-muted);margin-top:16px!important}
.hintline.geo{text-align:left;display:flex;gap:8px;align-items:flex-start}
.hintline.geo .ic{margin-top:.15em}
[data-done]{margin-top:20px}

/* ---------- answer rows (Change entry) ---------- */
.answers{list-style:none;margin:0 0 12px;padding:0}
.answers li{border-bottom:1px solid var(--color-line)}
.answer{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 0;color:inherit;text-decoration:none}
.answer small{display:block;font-size:16px;font-weight:700;color:var(--color-on-surface-muted)}
.answer b{display:block;font-size:19px;line-height:1.3}

/* ---------- note box, text box, select, switch ---------- */
.label{display:block;font-size:16px;font-weight:700;color:var(--color-on-surface);margin:0 0 6px}
.input,.select,.note{display:block;width:100%;min-height:52px;padding:0 14px;border:0;border-radius:var(--rounded-md);background:var(--color-surface);box-shadow:inset 0 0 0 2px var(--color-edge);font-size:17px;color:var(--color-on-surface)}
.select{appearance:none;-webkit-appearance:none;padding-right:44px;font-weight:700;background:var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231B1F3B'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") no-repeat right 14px center/20px}
.note{min-height:120px;padding:12px 14px;font-size:18px;resize:vertical}
.note.bad,.input.bad{box-shadow:inset 0 0 0 2px var(--color-error)}
.field-hint{font-size:17px;color:var(--color-on-surface-muted);margin:6px 0 0!important}
.field-err{display:flex;gap:6px;align-items:flex-start;font-size:17px;font-weight:700;color:var(--color-error);margin:6px 0 0!important}
.field-err .ic{margin-top:.15em}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-weight:700;cursor:pointer}
.switch input{position:absolute;opacity:0;width:52px;height:32px;margin:0;cursor:pointer}
.switch .track{width:52px;height:32px;border-radius:var(--rounded-full);box-shadow:inset 0 0 0 2px var(--color-edge);position:relative;background:var(--color-surface);flex:none}
.switch .track::after{content:"";position:absolute;top:6px;left:6px;width:20px;height:20px;border-radius:50%;background:var(--color-edge)}
.switch input:checked + .track{background:var(--color-primary);box-shadow:none}
.switch input:checked + .track::after{left:26px;background:var(--color-surface)}
.switch input:focus-visible + .track{outline:3px solid var(--color-link);outline-offset:3px}
.switch input:checked ~ .off-word,.switch input:not(:checked) ~ .on-word{display:none}
.switch input:disabled + .track{opacity:.6}
.stackform{display:flex;flex-direction:column;gap:20px}
.settings{display:grid;grid-template-columns:1fr;gap:24px;margin-bottom:24px}

/* ---------- menu sheet ---------- */
.menulist{list-style:none;margin:0 0 12px;padding:0}
.menulist a,.menulist .menubtn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;font-size:19px;font-weight:700;color:var(--color-on-surface);text-decoration:none;border-bottom:1px solid var(--color-line)}
.menulist li:last-child .menubtn{border-bottom:0}
.menulist form{display:block}
.menulist a[aria-current]::after{content:"You're here";margin-left:auto;font-size:16px;font-weight:400;color:var(--color-on-surface-muted)}

/* ---------- desk pieces (filters, tables, row menu, save bar) ---------- */
.filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:8px}
.filters > div{flex:0 1 240px;min-width:150px}
.filters .btn{min-height:52px}
.tablewrap{position:relative;overflow-x:auto;margin:0 0 12px}
.panel .toptitle{font:inherit;font-weight:700;margin:0}
table.data{width:100%;margin:12px 0 16px;border-collapse:collapse;font-size:17px}
table.data th{text-align:left;font-size:16px;color:var(--color-on-surface-muted);padding:12px 8px;border-bottom:2px solid var(--color-primary);white-space:nowrap}
table.data td{padding:12px 8px;border-bottom:1px solid var(--color-line);vertical-align:middle}
table.data .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tfoot td{font-weight:700;border-bottom:0;border-top:2px solid var(--color-primary)}
table.data .menucell{width:60px}
.rowmenu{width:44px;height:44px;display:grid;place-items:center;border-radius:var(--rounded-md);box-shadow:inset 0 0 0 2px var(--color-edge);color:var(--color-on-surface)}
.rowmenu[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--color-primary)}
.rowacts td{background:var(--color-surface)}
.rowacts .acts{display:flex;flex-wrap:wrap;gap:4px 24px}
.savebar{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;align-items:center;padding:14px 0;border-top:1px solid var(--color-line);background:var(--color-surface)}
.savebar .btn{width:auto}
.savebar [data-changed]{margin-right:auto}

/* ---------- desk: 900 px and up, the panel becomes a band ---------- */
.desknav{display:none}
@media (min-width:900px){
  .panel{padding:20px var(--spacing-desk-side) 28px}
  .desknav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto;align-items:center}
  .panel .desknav a,.desknav .navbtn{color:var(--color-on-primary);text-decoration:none;font-weight:400;padding:6px 0;min-height:44px;display:inline-flex;align-items:center}
  .panel .desknav a[aria-current]{box-shadow:inset 0 -3px 0 var(--color-accent);font-weight:700}
  .desknav .navbtn:hover,.panel .desknav a:hover{text-decoration:underline;text-underline-offset:3px}
  .panel .menu{display:none}
  .pbody{display:flex;flex-wrap:wrap;gap:20px 24px;align-items:flex-end;justify-content:space-between}
  .pbody .big{font-size:52px}
  .pbody .go{width:auto;min-width:160px;margin:0}
  .sheet{margin-top:0;border-radius:0;padding:24px var(--spacing-desk-side) 32px}
  .settings{grid-template-columns:1fr 1fr;gap:24px 32px}
  body.task .wrap{max-width:640px}
  body.task .panel{padding-bottom:36px}
  body.task .sheet{margin-top:-24px;border-radius:var(--rounded-xl) var(--rounded-xl) 0 0}
  body.task .sheet > .wrap{max-width:640px}
}

/* ---------- very narrow (a 360 px phone at 200% zoom is 180 px wide) ---------- */
@media (max-width:320px){
  .panel{padding-left:16px;padding-right:16px}
  .sheet{padding-left:16px;padding-right:16px}
  .rows li.saved{margin:0 -16px;padding:0 16px}
  .panel .big{font-size:48px}
  .receipt li{grid-template-columns:1fr;gap:0}
  .stepper{grid-template-columns:1fr 1fr;grid-template-areas:"out out" "minus plus";justify-items:center}
  .pair{grid-template-columns:1fr}
  .question{font-size:26px}
  .searchform{flex-direction:column}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .rows li.saved{animation:fade 2s steps(1,end) forwards}
  .question{animation:none}
}