/* Shared tokens. Homepage and app both use these; values are the live homepage palette. */
:root{
  --ink:#14213d; --muted:#5b6478; --line:#e3e7ef; --bg:#f7f8fb;
  --brand:#0f766e; --brand-hover:#0b5f58; --brand-press:#094e48; --brand2:#14b8a6;
  --soft:#e6f6f4; --warn:#b45309; --card:#fff; --r:16px; --radius-sm:12px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --shadow-lift:0 14px 30px rgba(20,33,61,.15);
  --shadow-float:0 18px 40px rgba(20,33,61,.25);
  --space:20px; --space-sm:16px;
  /* App names for the same tokens. */
  --surface:var(--card); --surface-2:var(--bg); --border:var(--line); --border-strong:#c9d0dc;
  --text:var(--ink); --text-2:var(--muted); --text-3:var(--muted);
  --accent:var(--brand); --accent-hover:var(--brand-hover); --accent-press:var(--brand-press);
  --accent-soft:var(--soft); --accent-on:#fff; --accent-text:var(--brand);
  --warn-bg:#fef3c7; --warn-border:#f3d9a4; --warn-text:var(--warn);
  --info-bg:var(--soft); --info-border:#b7e4df; --info-text:var(--brand);
  --check-bg:#fef3c7; --check-text:var(--warn);
  --night-bg:#ccfbf1; --night-text:#0f766e;
  --danger:#9b1c12; --bad-bg:#fdecea;
  --radius:var(--r);
  --shadow:none;
  --fs-xs:.75rem; --fs-sm:.875rem; --fs-md:1rem; --fs-lg:1.125rem; --fs-xl:1.125rem; --fs-2xl:1.375rem;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.app{margin:0;font-family:var(--font);font-size:16px;line-height:1.55;background:var(--bg);color:var(--ink);
  padding-bottom:env(safe-area-inset-bottom,0);overflow-x:hidden;-webkit-font-smoothing:antialiased;color-scheme:light}
body.app header{background:var(--card);border-bottom:1px solid var(--line);padding:10px var(--space);max-width:none;margin:0}
body.app header h1{max-width:640px;margin:0 auto;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--ink)}
body.app header h1::before{content:"";display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--brand);margin-right:10px;vertical-align:middle;transform:translateY(-1px)}
body.app header p{max-width:640px;margin:4px auto 0;color:var(--muted);font-size:var(--fs-sm)}
body.app main{width:100%;max-width:640px;margin:0 auto;padding:8px var(--space) 32px}
body.app .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:var(--space);margin:var(--space-sm) 0;box-shadow:var(--shadow);overflow:hidden}
body.app h3{margin:6px 0 4px;font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
body.app #count{font-weight:600}
body.app .steps{display:flex;gap:6px;margin:8px 0 4px;counter-reset:s}
body.app .steps span{flex:1;text-align:center;font-size:var(--fs-xs);padding:8px 4px;border-radius:999px;background:var(--card);color:var(--muted);font-weight:600;border:1px solid var(--line)}
body.app .steps .on{background:var(--brand);color:#fff;border-color:var(--brand)}
body.app label{display:block;font-size:var(--fs-sm);font-weight:600;color:var(--muted);margin:14px 0 6px}
body.app input,body.app select,body.app textarea{width:100%;max-width:100%;padding:12px 14px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);font:inherit;font-size:16px;
  background:var(--card);color:var(--ink);min-height:48px;transition:border-color .15s,box-shadow .15s}
body.app input:focus,body.app select:focus,body.app textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent)}
body.app input[readonly]{background:var(--bg);color:var(--muted)}
body.app ::placeholder{color:var(--muted);opacity:1}
body.app button,body.app .btn,body.app .pick-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;text-align:center;text-decoration:none;padding:14px 22px;border:1px solid transparent;
  border-radius:var(--radius-sm);background:var(--brand);color:#fff;font:inherit;font-size:16px;font-weight:700;margin:10px 0;cursor:pointer;min-height:52px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background-color .15s,transform .08s}
body.app button:hover,body.app .btn:hover,body.app .pick-btn:hover{background:var(--brand-hover)}
body.app button:active,body.app .btn:active,body.app .pick-btn:active{background:var(--brand-press);transform:scale(.98)}
body.app button:focus-visible,body.app .btn:focus-visible,body.app .pick-btn:focus-visible,body.app a:focus-visible,body.app label.pick-btn:has(+ input:focus-visible){outline:3px solid color-mix(in srgb,var(--brand) 55%,transparent);outline-offset:2px}
body.app button:disabled{opacity:.55;cursor:not-allowed;transform:none}
body.app .tap,body.app .tap-sm{-webkit-user-select:none;user-select:none}
body.app .sec,body.app .pick-btn{background:var(--soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}
body.app .sec:hover,body.app .pick-btn:hover{background:color-mix(in srgb,var(--soft) 72%,var(--brand))}
body.app .sec:active,body.app .pick-btn:active{background:color-mix(in srgb,var(--soft) 55%,var(--brand))}
body.app .pick-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
body.app .pick-btn.primary:hover{background:var(--brand-hover)}
body.app .pick-btn.primary:active{background:var(--brand-press)}
body.app #go.busy::before{content:"";width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
body.app .danger{background:transparent;color:var(--muted);width:44px;min-width:44px;min-height:44px;height:44px;padding:0;margin:0;font-size:1.05rem;border-radius:999px}
body.app .danger:hover,body.app .danger:active{background:var(--check-bg);color:var(--danger)}
body.app .drop{border:2px dashed color-mix(in srgb,var(--brand) 35%,var(--line));border-radius:var(--r);padding:24px 16px 18px;text-align:center;color:var(--muted);background:var(--soft)}
body.app .drop-icon{width:64px;height:64px;margin:0 auto 10px;border-radius:20px;background:var(--card);color:var(--brand);display:grid;place-items:center;font-size:30px}
body.app .drop-title{margin:0 0 4px;font-weight:700;font-size:var(--fs-lg);color:var(--ink)}
body.app .drop .muted{max-width:34ch;margin:0 auto}
body.app .pick-row{display:flex;flex-direction:column;gap:10px;margin:16px 0 4px}
body.app .pick-btn{margin:0}
body.app #preview{margin-top:12px}
body.app #preview:empty{display:none}
body.app #preview img{max-width:100%;height:auto;max-height:240px;border-radius:var(--radius-sm);display:block;margin:0 auto;border:1px solid var(--line)}
body.app #preview p{margin:8px 0 0;word-break:break-word}
body.app #status:empty{display:none}
body.app #status.loading{display:flex;align-items:center;gap:10px;background:var(--info-bg);color:var(--info-text);border:1px solid var(--info-border);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-sm);margin:10px 0 0}
body.app #status.loading::before{content:"";flex:0 0 auto;width:16px;height:16px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
body.app #status:not(:empty):not(.loading){display:block;background:#fdecea;border:1px solid #f3c1bc;color:var(--danger);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-sm);margin:10px 0 0;line-height:1.45}
body.app #list{display:flex;flex-direction:column;gap:12px;margin:12px 0 4px}
body.app #who{background:var(--warn-bg);border:1px solid var(--warn-border);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 12px}
body.app #who .who-q{margin:0;font-weight:700;color:var(--warn-text)}
body.app #who .who-btn{margin:8px 0 0}
body.app #who input{margin-top:8px}
body.app #pickStatus:empty{display:none}
html[data-needs-person="1"] #apple,
html[data-needs-person="1"] #google,
html[data-needs-person="1"] #dl{pointer-events:none;opacity:.55}
body.app .shift{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;align-items:end;padding:14px;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
body.app .shift>*{min-width:0}
body.app .shift .dt{grid-column:1 / -1}
body.app .shift .role{grid-column:1 / -1;margin-top:10px}
body.app .shift>div:nth-child(5){grid-column:1 / -1}
body.app .shift .danger{position:absolute;top:8px;right:8px}
body.app .shift label{margin:10px 0 4px;font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
body.app .shift input{padding:10px 12px;min-height:44px}
body.app .shift-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding-right:44px;min-height:32px}
body.app .shift-date{font-weight:700;font-size:var(--fs-lg);color:var(--ink)}
body.app .shift-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
body.app .shift-time{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-right:4px;color:var(--ink)}
body.app .shift.unsure{border-color:var(--warn-border);box-shadow:inset 4px 0 0 var(--warn);background:color-mix(in srgb,var(--warn-bg) 55%,var(--card))}
body.app .tag,body.app .chip{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-xs);font-weight:700;border-radius:999px;padding:4px 10px;line-height:1.3}
body.app .tag{background:var(--night-bg);color:var(--night-text)}
body.app .tag.chk{background:var(--check-bg);color:var(--check-text)}
body.app .chip{background:var(--bg);color:var(--muted);border:1px solid var(--line)}
body.app .chip-muted{color:var(--muted)}
body.app .warn{display:flex;gap:10px;background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text);border-radius:var(--radius-sm);padding:12px 14px;font-size:var(--fs-sm);
  margin:0 0 10px;line-height:1.45;overflow-wrap:anywhere;word-break:break-word}
body.app .warn::before{content:"!";flex:0 0 22px;height:22px;border-radius:50%;background:color-mix(in srgb,var(--warn) 16%,transparent);display:grid;place-items:center;font-weight:800;font-size:.8rem}
body.app #yearBox.warn{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}
body.app #yearBox.warn::before{content:"i";background:color-mix(in srgb,var(--brand) 16%,transparent)}
body.app #weekBox{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-sm);padding:4px 14px 12px;margin-bottom:10px}
body.app .muted{color:var(--muted);font-size:var(--fs-sm)}
body.app .tip{margin:0 0 6px;line-height:1.45}
body.app .cal-actions{display:flex;flex-direction:column;gap:2px;margin:12px 0 8px}
body.app .cal-actions .btn{margin:4px 0}
body.app table.tot{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:4px}
body.app table.tot td{padding:12px 4px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
body.app .big{font-size:var(--fs-xl);font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink)}
body.app .copy{display:flex;gap:8px;align-items:stretch}
body.app .copy input{font-size:.8rem;min-width:0}
body.app .copy button{width:auto;flex:0 0 auto;margin:0;padding:10px 16px;font-size:var(--fs-sm);min-height:48px;background:var(--soft);color:var(--brand);border-color:color-mix(in srgb,var(--brand) 22%,var(--line))}
body.app #done h3+.tip{margin-top:2px}
body.app #done h3:not(:first-child){margin-top:22px;font-size:var(--fs-lg)}
body.app .row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end}
body.app .grow{flex:1 1 140px;min-width:0}
body.app .hide{display:none !important}
body.app .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.app .shift input.bad{border-color:var(--danger);background:var(--bad-bg)}
body.app a{color:var(--brand)}
@media (max-width:430px){
  body.app main{padding:4px 12px 32px}
  body.app header{padding-left:16px;padding-right:16px}
  body.app .card{padding:16px}
}
@media (min-width:431px){
  body.app .pick-row{flex-direction:row}
  body.app .pick-btn{flex:1}
  body.app .shift{grid-template-columns:1fr 1fr 1fr}
  body.app .shift>div:nth-child(5){grid-column:auto}
}
@media (prefers-reduced-motion:reduce){body.app,body.app *{animation:none !important;transition:none !important}}