/* Docket — light-only, seeded from the HC Machine Shop system.
   Words: Hanken Grotesk. Data: IBM Plex Mono, uppercase, tracked. */
:root {
  --slate-0:#ffffff; --slate-50:#f5f7f9; --slate-100:#edf0f3; --slate-150:#e3e8ed;
  --slate-200:#d6dde3; --slate-300:#bcc6cf; --slate-400:#97a3ae; --slate-500:#6c7884;
  --slate-600:#4e5a66; --slate-700:#374049; --slate-800:#232a31; --slate-900:#161b21;
  --slate-950:#0c0f14;
  --teal-50:#ecfdf7; --teal-200:#9ff2da; --teal-400:#25cdaa; --teal-600:#0d9488;
  --teal-700:#0f766e; --teal-800:#115e56;
  --red-50:#fef2f2; --red-500:#dc2626; --red-600:#b91c1c;
  --amber-600:#b46c05; --green-600:#15803d;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html { height:100%; }
body {
  margin:0; min-height:100%; background:var(--slate-50); color:var(--slate-900);
  font:400 15px/1.5 var(--sans);
  padding-top:env(safe-area-inset-top);
}
button { font:inherit; border:none; background:none; padding:0; color:inherit; cursor:pointer; }
input, textarea { font:inherit; color:inherit; }
.hidden { display:none !important; }

.lbl { font:600 10px/1.3 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--slate-500); }

/* ── sign-in ── */
#signin { min-height:100dvh; display:flex; flex-direction:column; align-items:center;
          justify-content:center; padding:0 34px calc(40px + env(safe-area-inset-bottom));
          text-align:center; position:relative; }
#signin .mark { width:84px; height:84px; border-radius:22px;
                box-shadow:0 14px 34px rgba(22,27,33,.16); }
#signin .wm { font:700 32px/1 var(--sans); letter-spacing:-.03em; margin-top:22px; }
#signin .wm i { font-style:normal; color:var(--teal-600); }
#signin .tg { font:500 14px/1.4 var(--sans); color:var(--slate-600); margin-top:8px; }
#gbtn { margin-top:44px; min-height:44px; display:flex; justify-content:center; }
#signin .fine { font:500 9.5px/1.6 var(--mono); letter-spacing:.09em; color:var(--slate-400);
                text-transform:uppercase; margin-top:18px; }
#signin .url { position:absolute; bottom:calc(22px + env(safe-area-inset-bottom));
               font:500 10.5px/1 var(--mono); letter-spacing:.06em; color:var(--slate-400); }

/* ── app frame ── */
#app { max-width:560px; margin:0 auto; padding:14px 16px calc(110px + env(safe-area-inset-bottom)); }
.app-head .top { display:flex; align-items:center; gap:10px; }
.app-head .top img.logo { width:28px; height:28px; border-radius:8px; }
.app-head .name { font:700 19px/1 var(--sans); letter-spacing:-.02em; }
.app-head .avatar { margin-left:auto; width:30px; height:30px; border-radius:50%;
  background:var(--slate-800); color:#fff; font:600 12px/30px var(--sans); text-align:center;
  overflow:hidden; }
.app-head .avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.app-head .date { font:500 11px/1 var(--mono); letter-spacing:.09em; color:var(--slate-500);
                  text-transform:uppercase; margin-top:14px; }
.app-head .sum { font:500 14px/1.3 var(--sans); color:var(--slate-700); margin-top:4px; min-height:18px; }
.app-head .sum b { color:var(--amber-600); font-weight:600; }
.app-head .sum b.over { color:var(--red-600); }

.filters { display:flex; gap:7px; margin:14px -16px 2px; padding:2px 16px 6px;
           overflow-x:auto; scrollbar-width:none; }
.filters::-webkit-scrollbar { display:none; }
.fchip { flex:none; font:600 11px/1 var(--mono); letter-spacing:.04em; padding:8px 12px;
         border-radius:999px; background:var(--slate-0); border:1px solid var(--slate-200);
         color:var(--slate-600); }
.fchip.on { background:var(--slate-900); border-color:var(--slate-900); color:#fff; }
.fchip.lab { font-family:var(--sans); text-transform:none; letter-spacing:0; display:inline-flex;
             align-items:center; gap:6px; }
.fchip .dot { width:6px; height:6px; border-radius:50%; }
.fchip .x { color:var(--slate-400); margin-left:2px; }
.fchip.on .x { color:#fff; }

/* ── list ── */
.tsec { font:600 10px/1 var(--mono); letter-spacing:.1em; text-transform:uppercase;
        color:var(--slate-500); padding:16px 6px 8px; display:flex; gap:7px; align-items:baseline; }
.tsec.over { color:var(--red-600); }
.tsec .n { color:var(--slate-400); font-weight:500; }
.tsec.over .n { color:var(--red-500); }
.trow { display:flex; align-items:flex-start; gap:12px; background:var(--slate-0);
        border:1px solid var(--slate-150); border-radius:13px; padding:12px 13px;
        margin-bottom:8px; width:100%; text-align:left; }
.trow:active { background:var(--slate-100); }
.cb { width:22px; height:22px; border:2px solid var(--slate-300); border-radius:8px; flex:none;
      background:var(--slate-0); margin-top:1px; position:relative; }
.cb.on { background:var(--teal-600); border-color:var(--teal-600); }
.cb.on::after { content:""; position:absolute; left:5px; top:5px; width:9px; height:5px;
                border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
                transform:rotate(-45deg); border-radius:1px; }
.trow .grow { flex:1; min-width:0; }
.trow .ttl { font:500 15px/1.35 var(--sans); overflow-wrap:break-word; }
.trow.done .ttl { color:var(--slate-400); text-decoration:line-through;
                  text-decoration-color:var(--slate-300); }
.trow .meta { display:flex; flex-wrap:wrap; gap:7px; align-items:center; margin-top:5px; }
.trow .tcode { margin-left:auto; padding-top:3px; }
.pchip { display:inline-block; font:600 10.5px/1 var(--mono); letter-spacing:.05em;
         background:var(--teal-50); color:var(--teal-800); border-radius:6px; padding:4px 7px; }
.pchip.gen { background:var(--slate-100); color:var(--slate-600); }
.due { font:500 11px/1 var(--mono); letter-spacing:.03em; color:var(--slate-500); }
.due.over { color:var(--red-600); font-weight:600; }
.due.today { color:var(--amber-600); font-weight:600; }
.tcode { font:500 10.5px/1 var(--mono); letter-spacing:.05em; color:var(--slate-400); }
.lpill { display:inline-flex; align-items:center; gap:5px; font:500 11px/1 var(--sans);
         color:var(--slate-600); background:var(--slate-0); border:1px solid var(--slate-200);
         border-radius:999px; padding:3.5px 9px; white-space:nowrap; }
.lpill .dot { width:5px; height:5px; border-radius:50%; flex:none; }
.empty { text-align:center; color:var(--slate-400); padding:60px 20px 20px;
         font:500 13.5px/1.6 var(--sans); }
.empty .big { font-size:34px; margin-bottom:8px; }

#fab { position:fixed; right:max(18px, calc(50vw - 262px));
       bottom:calc(24px + env(safe-area-inset-bottom));
       width:58px; height:58px; border-radius:50%; background:var(--teal-600);
       box-shadow:0 10px 26px rgba(13,148,136,.45); z-index:5; }
#fab::before, #fab::after { content:""; position:absolute; left:50%; top:50%;
       transform:translate(-50%,-50%); background:#fff; border-radius:2px; }
#fab::before { width:24px; height:3px; } #fab::after { width:3px; height:24px; }

/* ── sheets ── */
#overlay { position:fixed; inset:0; background:rgba(12,15,20,.38); z-index:10;
           display:flex; align-items:flex-end; justify-content:center; }
.sheet { background:var(--slate-0); border-radius:24px 24px 0 0; width:100%; max-width:560px;
         padding:10px 20px calc(24px + env(safe-area-inset-bottom));
         max-height:88dvh; overflow-y:auto; }
.grab { width:40px; height:4px; border-radius:2px; background:var(--slate-200); margin:0 auto 16px; }
.sheet .ttl-in { width:100%; border:none; outline:none; font:500 17px/1.35 var(--sans);
                 padding:2px 2px 14px; border-bottom:1px solid var(--slate-150); background:none; }
.sheet .ttl-in::placeholder { color:var(--slate-400); }
.sheet .lbl { display:block; margin:18px 0 9px; }
.chiprow { display:flex; flex-wrap:wrap; gap:7px; }
.schip { font:600 11px/1 var(--mono); letter-spacing:.04em; padding:9px 12px; border-radius:9px;
         background:var(--slate-50); border:1px solid var(--slate-200); color:var(--slate-600); }
.schip.on { background:var(--teal-50); border-color:var(--teal-400); color:var(--teal-800); }
.schip.ghost { border-style:dashed; color:var(--slate-400); background:none; }
.lchip { font:500 12px/1 var(--sans); display:inline-flex; align-items:center; gap:6px;
         padding:8px 12px; border-radius:999px; background:var(--slate-0);
         border:1px solid var(--slate-200); color:var(--slate-600); }
.lchip .dot { width:6px; height:6px; border-radius:50%; }
.lchip.on { border-color:var(--teal-400); background:var(--teal-50); color:var(--teal-800); }
.newlab { display:inline-flex; }
.newlab input { border:1px dashed var(--slate-300); background:none; border-radius:999px;
                padding:7px 12px; font:500 12px/1 var(--sans); width:110px; outline:none; }
.newlab input:focus { border-color:var(--teal-400); border-style:solid; }
.sheet textarea { width:100%; border:1px solid var(--slate-150); border-radius:10px;
                  background:var(--slate-50); padding:10px 12px; font:400 14px/1.5 var(--sans);
                  min-height:64px; resize:vertical; outline:none; }
.sheet input[type=date] { border:1px solid var(--slate-200); border-radius:9px; padding:7px 10px;
                  font:500 12px/1 var(--mono); background:var(--slate-50); color:var(--slate-700); }
.sheet-actions { display:flex; gap:10px; margin-top:22px; align-items:center; }
.btn { border-radius:12px; text-align:center; padding:14px 18px; font:600 15px/1 var(--sans); }
.btn.primary { flex:1; background:var(--teal-600); color:#fff;
               box-shadow:0 8px 20px rgba(13,148,136,.35); }
.btn.primary:disabled { opacity:.5; box-shadow:none; }
.btn.danger { color:var(--red-600); background:var(--red-50); }
.sheet .task-id { font:500 10.5px/1 var(--mono); color:var(--slate-400); letter-spacing:.05em; }

/* ── settings ── */
.me { display:flex; align-items:center; gap:12px; padding:6px 0 2px; }
.me img { width:40px; height:40px; border-radius:50%; }
.me .who .nm { font:600 15px/1.2 var(--sans); }
.me .who .em { font:400 12px/1.4 var(--mono); color:var(--slate-500); }
.me .out { margin-left:auto; font:600 12px/1 var(--sans); color:var(--red-600);
           padding:8px 12px; background:var(--red-50); border-radius:9px; }
.keyrow { display:flex; align-items:center; gap:10px; padding:10px 0;
          border-bottom:1px solid var(--slate-100); font-size:13px; }
.keyrow .kn { font-weight:600; }
.keyrow .kp { font:400 11px/1.4 var(--mono); color:var(--slate-500); }
.keyrow .rev { margin-left:auto; font:600 11.5px/1 var(--sans); color:var(--red-600); }
.keyshow { background:var(--slate-950); color:var(--teal-400); border-radius:10px;
           font:500 12px/1.6 var(--mono); padding:12px 14px; margin-top:12px;
           word-break:break-all; user-select:all; -webkit-user-select:all; }
.keynote { font:400 12px/1.5 var(--sans); color:var(--slate-500); margin-top:8px; }

/* ── toast ── */
#toast { position:fixed; left:50%; transform:translateX(-50%);
         bottom:calc(96px + env(safe-area-inset-bottom)); background:var(--slate-900); color:#fff;
         font:500 13px/1 var(--sans); padding:11px 16px; border-radius:10px; z-index:20;
         box-shadow:0 10px 30px rgba(12,15,20,.3); transition:opacity .25s; opacity:0;
         pointer-events:none; max-width:86vw; text-align:center; }
#toast.show { opacity:1; }

@media (prefers-reduced-motion:no-preference) {
  #overlay { animation:fade .18s ease-out; }
  .sheet { animation:rise .22s cubic-bezier(.3,.9,.4,1); }
  @keyframes fade { from { opacity:0 } }
  @keyframes rise { from { transform:translateY(40px); opacity:.6 } }
}