/* home — the shipping stylesheet.
   Vanilla CSS, no build step. Tokens carry both themes; nothing sets a colour
   that is only defined inside a media query. */

:root{
  --ink:#16190F; --ink-2:#3E463A; --ink-3:#6B7364;
  --paper:#F2F1EA; --card:#FCFCF8; --sunk:#E7E6DC;
  --rule:#D6D5C8; --rule-2:#C2C1B2;
  --leaf:#1E4E2A; --leaf-soft:#E2EBE0;
  --tag:#F2E90A; --tag-ink:#16190F;
  --crate:#B8401A; --crate-soft:#F7E4DC;
  --shadow:0 1px 2px rgb(22 25 15 / .07), 0 8px 24px rgb(22 25 15 / .08);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#E9E8DE; --ink-2:#B4B9AC; --ink-3:#868C7E;
    --paper:#11140D; --card:#1A1E14; --sunk:#22271A;
    --rule:#2E3426; --rule-2:#3D4433;
    --leaf:#8CC79A; --leaf-soft:#1E2A1D;
    --crate:#F09367; --crate-soft:#33200F;
    --shadow:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .4);
  }
}
:root[data-theme="dark"]{
  --ink:#E9E8DE; --ink-2:#B4B9AC; --ink-3:#868C7E;
  --paper:#11140D; --card:#1A1E14; --sunk:#22271A;
  --rule:#2E3426; --rule-2:#3D4433;
  --leaf:#8CC79A; --leaf-soft:#1E2A1D;
  --crate:#F09367; --crate-soft:#33200F;
  --shadow:0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .4);
}

*{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:16px; line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
:focus-visible{outline:2px solid var(--leaf); outline-offset:2px; border-radius:4px}
[hidden]{display:none !important}

/* ---------- shell ---------- */
.standalone{display:flex; flex-direction:column; min-height:100dvh}
.appbar{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px 12px; border-bottom:1.5px solid var(--ink);
  width:100%; max-width:640px; margin:0 auto;
}
.appbar .title{font-weight:700; font-size:18px; letter-spacing:-.01em; flex:1; min-width:0}
.appbar .sub{font-size:12px; color:var(--ink-3); font-weight:400; letter-spacing:0}

.viewport{
  flex:1; width:100%; max-width:640px; margin:0 auto;
  padding:8px 16px calc(28px + env(safe-area-inset-bottom));
}

.padtabs{
  display:flex; gap:6px; flex-wrap:wrap;
  width:100%; max-width:640px; margin:0 auto; padding:12px 16px 0;
}
.padtab{
  border:1px solid var(--rule-2); background:var(--card); color:var(--ink-2);
  border-radius:20px; padding:6px 13px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
}
.padtab:hover{border-color:var(--leaf)}
.padtab[aria-selected="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600}
.padtab .lock{opacity:.6; font-size:11px}
.padtab.add{border-style:dashed}

/* ---------- lines ---------- */
ul.lines{list-style:none; margin:0; padding:0}
.line{display:flex; align-items:flex-start; gap:12px; padding:11px 2px; border-bottom:1px solid var(--rule)}
.line.heading{
  font-weight:700; font-size:17px; letter-spacing:-.01em;
  padding-top:24px; padding-bottom:8px; border-bottom:1.5px solid var(--ink);
}
.line.text{color:var(--ink-2); font-size:15px}
.line.divider{padding:0; border-bottom:2px solid var(--ink)}

.box{
  width:22px; height:22px; border:1.5px solid var(--ink-3); border-radius:6px;
  flex:none; margin-top:1px; background:var(--card); cursor:pointer;
  display:grid; place-items:center; padding:0; color:transparent;
}
.box:hover{border-color:var(--leaf)}
.box[aria-checked="true"]{background:var(--leaf); border-color:var(--leaf); color:var(--paper)}
.box[disabled]{opacity:.4; cursor:not-allowed}
.box svg{width:13px; height:13px}

.body{flex:1; min-width:0}
.content{overflow-wrap:anywhere}
.content.tappable{cursor:pointer; text-decoration:underline; text-decoration-color:transparent; text-underline-offset:3px}
.content.tappable:hover{text-decoration-color:var(--rule-2)}
.line[data-done="1"] .content{text-decoration:line-through; color:var(--ink-3)}
.meta{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-top:4px}

.chip{font-size:11.5px; padding:2px 8px; border-radius:20px; border:1px solid var(--rule-2); color:var(--ink-3); white-space:nowrap; background:none; font-family:inherit; cursor:pointer}
.chip:hover{border-color:var(--leaf)}
.chip.who{color:var(--leaf); border-color:var(--leaf)}
.chip.due{color:var(--crate); border-color:var(--crate); background:var(--crate-soft)}
.chip.qty{font-family:var(--mono); font-size:11px; cursor:default}

/* ---------- forms & buttons ---------- */
.btn{
  border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  border-radius:10px; padding:11px 16px; font:inherit; font-weight:600; font-size:15px;
  cursor:pointer; width:100%;
}
.btn:hover{background:var(--leaf); border-color:var(--leaf)}
.btn.ghost{background:none; color:var(--ink); border-color:var(--rule-2); font-weight:500}
.btn.ghost:hover{background:var(--sunk); border-color:var(--leaf)}
.iconbtn{
  border:1px solid var(--rule-2); background:var(--card); color:var(--ink);
  border-radius:9px; padding:6px 11px; font:inherit; font-size:13px; cursor:pointer;
}
.iconbtn:hover{border-color:var(--leaf)}

.field{margin-bottom:14px}
.field label{display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:6px}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule-2); border-radius:10px; padding:10px 12px;
}
.field textarea{font-family:var(--mono); font-size:13px; line-height:1.6; resize:vertical}

#new-line{margin-top:16px}
#new-line input{
  width:100%; font:inherit; font-size:16px; color:var(--ink); background:var(--card);
  border:1px solid var(--rule-2); border-radius:10px; padding:11px 13px;
}
.pad-actions{margin-top:18px}

/* ---------- sign in ---------- */
.centered{
  display:flex; flex-direction:column; justify-content:center;
  min-height:100dvh; max-width:380px; margin:0 auto; padding:28px 22px;
}
.brand{text-align:center; margin-bottom:26px}
.brand .mark{
  width:60px; height:60px; border-radius:16px; background:var(--leaf); color:var(--paper);
  display:grid; place-items:center; margin:0 auto; font-weight:700; font-size:26px;
}
.brand h1{margin:14px 0 4px; font-size:24px; letter-spacing:-.02em}
.dev-note{text-align:center; margin-top:20px}

/* ---------- shared bits ---------- */
.hint{color:var(--ink-3); font-size:13px; margin:6px 0 12px}
.empty{color:var(--ink-3); font-size:14px; padding:28px 0; text-align:center}
.sectionlabel{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); margin:18px 0 8px}
.card{background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:14px}
.card.flush{padding:0; overflow:hidden}
.rowitem{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 14px; border:0; border-bottom:1px solid var(--rule);
  background:none; font:inherit; color:inherit; cursor:pointer;
}
.rowitem:last-child{border-bottom:0}
.rowitem:hover{background:var(--sunk)}
.rowitem[aria-selected="true"]{color:var(--leaf); font-weight:600}
.rowitem .grow{flex:1; min-width:0}
.avatar{
  width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-weight:700; font-size:13px; background:var(--leaf-soft); color:var(--leaf); border:1px solid var(--leaf);
}
.avatar.kid{background:var(--tag); color:var(--tag-ink); border-color:var(--ink)}
.avatar.none{background:var(--sunk); color:var(--ink-3); border-color:var(--rule-2)}
.nm{font-weight:600}
.sm{font-size:12.5px; color:var(--ink-3)}

.toggle{display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-bottom:1px solid var(--rule)}
.toggle .grow{flex:1}
.sw{
  width:46px; height:27px; border-radius:20px; border:1.5px solid var(--rule-2);
  background:var(--sunk); position:relative; cursor:pointer; flex:none; padding:0;
  transition:background .15s, border-color .15s;
}
.sw::after{
  content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:var(--card); box-shadow:0 1px 2px rgb(0 0 0 /.3); transition:transform .15s;
}
.sw[aria-checked="true"]{background:var(--leaf); border-color:var(--leaf)}
.sw[aria-checked="true"]::after{transform:translateX(19px)}
@media (prefers-reduced-motion:reduce){ .sw,.sw::after{transition:none} }

.note{border-left:3px solid var(--leaf); background:var(--leaf-soft); padding:10px 13px; border-radius:0 8px 8px 0; font-size:13px; margin:12px 0}
.note.warn{border-left-color:var(--crate); background:var(--crate-soft)}
.note strong{display:block; margin-bottom:2px}

/* Date options in the assign dialog. Visually kin to .padtab but a separate
   class: two unrelated controls sharing one selector is how a stylesheet and a
   test suite both end up confused. */
.daterow{display:flex; gap:6px; flex-wrap:wrap}
.pill{
  border:1px solid var(--rule-2); background:var(--card); color:var(--ink-2);
  border-radius:20px; padding:6px 13px; font:inherit; font-size:13px; cursor:pointer; white-space:nowrap;
}
.pill:hover{border-color:var(--leaf)}
.pill[aria-selected="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink); font-weight:600}

/* ---------- dialogs ---------- */
dialog{
  border:1.5px solid var(--ink); border-radius:16px; background:var(--card); color:var(--ink);
  width:min(520px, 92vw); padding:20px; box-shadow:var(--shadow);
}
dialog::backdrop{background:rgb(0 0 0 / .45)}
dialog h2{margin:0 0 8px; font-size:18px; letter-spacing:-.01em}
dialog menu{display:flex; gap:8px; justify-content:flex-end; padding:0; margin:18px 0 0}
dialog menu .btn{width:auto}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(18px + env(safe-area-inset-bottom));
  background:var(--ink); color:var(--paper);
  padding:12px 16px; border-radius:11px; font-size:14px; box-shadow:var(--shadow);
  z-index:50; max-width:min(560px, 92vw);
}
.toast.bad{background:var(--crate); color:#FFF}

code{font-family:var(--mono); font-size:.85em; background:var(--sunk); padding:1px 5px; border-radius:3px}