@font-face{
  font-family:"Space Grotesk";
  src:url("assets/space-grotesk.ttf") format("truetype");
  font-weight:100 700; font-display:swap;
}
@font-face{
  font-family:"Literata";
  src:url("assets/literata.ttf") format("truetype");
  font-weight:200 900; font-display:swap;
}
:root{
  --paper:#FDFCF8;
  --desk:#E3E6F0;
  --desk-deep:#CBD1E6;
  --ink:#16213B;
  --ink-soft:#3D4A6B;
  --ink-faint:#6B7694;
  --line:#16213B;
  --sort-blue:#2949E1;
  --stamp-red:#C23B22;
  --done-green:#0E7A4D;
  --blocked-amber:#9A5B00;
  --slip-yellow:#FFD84D;
  --card:#FFFDF6;
  --radius:14px;
  --focus:#2949E1;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--desk);
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.7), transparent 34%),
    repeating-linear-gradient(0deg, rgba(22,33,59,.045) 0 1px, transparent 1px 26px);
  font-family:"Literata", Georgia, serif; font-size:17px; line-height:1.6;
}
h1,h2,h3,.brand-name,.stamp,.slot-count,.tray-count,.btn{font-family:"Space Grotesk", system-ui, sans-serif}
h1{font-size:clamp(2rem,1.2rem + 2.6vw,3rem); line-height:1.02; letter-spacing:-.02em; margin:0}
h2{font-size:1.05rem; letter-spacing:-.01em; margin:0 0 .35rem}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:.6rem 1rem; border-radius:10px; z-index:99; transition:top .15s}
.skip:focus{top:12px; color:#fff}

/* top bar */
.topbar{border-bottom:2.5px solid var(--line); background:var(--paper); position:sticky; top:0; z-index:20}
.topbar-inner{max-width:1180px; margin:0 auto; padding:.85rem 1.25rem; display:flex; gap:1.5rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
.brand{display:flex; gap:.8rem; align-items:center}
.brand-name{display:block; font-size:1.55rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.brand-sub{display:block; font-size:.92rem; color:var(--ink-soft); line-height:1.3; margin-top:.15rem}
.topbar-meta{text-align:right}
.today{margin:0; font-family:"Space Grotesk",sans-serif; font-size:.92rem; font-weight:600}
.progress-wrap{margin:.3rem 0 0; display:flex; align-items:center; gap:.6rem; justify-content:flex-end; font-size:.85rem; color:var(--ink-soft)}
.progress-track{display:inline-block; width:150px; height:10px; border:2px solid var(--ink); border-radius:99px; background:#fff; overflow:hidden}
.progress-fill{display:block; height:100%; background:var(--sort-blue); transition:width .35s}

/* desk layout */
.desk{max-width:1180px; margin:0 auto; padding:1.5rem 1.25rem 2rem; display:grid; grid-template-columns:290px 1fr; gap:1.25rem; align-items:start}
.shelf{display:grid; gap:1rem; position:sticky; top:96px}
.shelf-card{background:var(--paper); border:2.5px solid var(--line); border-radius:var(--radius); padding:1rem 1rem .9rem; box-shadow:5px 5px 0 var(--line)}
.shelf-note{margin:.1rem 0 .8rem; font-size:.93rem; color:var(--ink-soft)}
.slot-list{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.slot-list button{
  width:100%; display:flex; align-items:center; gap:.6rem; text-align:left; cursor:pointer;
  border:2px solid var(--line); border-radius:10px; background:#fff; padding:.5rem .6rem;
  font-family:"Space Grotesk",sans-serif; font-size:.93rem; font-weight:600;
}
.slot-list button .slot-count{margin-left:auto; min-width:2rem; text-align:center; border:2px solid var(--ink); border-radius:99px; font-size:.82rem; padding:.02rem .45rem; background:var(--desk)}
.slot-list button[aria-pressed="true"]{background:var(--ink); color:#fff}
.slot-list button[aria-pressed="true"] .slot-count{background:var(--slip-yellow); color:var(--ink); border-color:var(--slip-yellow)}
.slot-dot{width:12px; height:12px; border-radius:4px; border:2px solid var(--ink); flex:none}
.roster-list{list-style:none; margin:.6rem 0 0; padding:0; display:grid; gap:.5rem; font-size:.95rem}
.roster-list li{display:flex; gap:.6rem; align-items:center}
.roster-list em{color:var(--ink-faint); font-style:normal; font-size:.85rem; margin-left:.3rem}
.initials{width:30px; height:30px; border-radius:50%; background:var(--c); color:#fff; display:grid; place-items:center; font-family:"Space Grotesk",sans-serif; font-size:.72rem; font-weight:700; border:2px solid var(--line); flex:none}
.practice-note{font-size:.82rem; color:var(--ink-faint); margin:.8rem 0 0}

/* inbox */
.inbox{background:var(--paper); border:2.5px solid var(--line); border-radius:18px; box-shadow:8px 8px 0 var(--line); padding:1.4rem 1.4rem 1.2rem; min-width:0}
.inbox-lede{margin:.5rem 0 0; max-width:62ch; color:var(--ink-soft)}
.tray-count{display:inline-block; font-size:.95rem; background:var(--slip-yellow); border:2px solid var(--ink); border-radius:99px; padding:.05rem .7rem; vertical-align:middle; margin-left:.5rem}
.toolbar{display:grid; grid-template-columns:1fr 230px; gap:.8rem; align-items:end; margin:1.1rem 0; border:2px dashed var(--ink-faint); border-radius:12px; padding:.9rem; background:#fff}
.field label{display:block; font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.9rem; margin-bottom:.35rem}
.input-wrap,.select-wrap{position:relative; display:block}
.input-wrap svg{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); color:var(--ink-faint)}
.input-wrap input{width:100%; font:inherit; font-family:"Space Grotesk",sans-serif; font-size:.98rem; padding:.6rem .7rem .6rem 2.2rem; border:2px solid var(--ink); border-radius:10px; background:var(--paper)}
.select-wrap select{width:100%; appearance:none; font-family:"Space Grotesk",sans-serif; font-size:.96rem; font-weight:600; padding:.6rem 2rem .6rem .7rem; border:2px solid var(--ink); border-radius:10px; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" fill="none" stroke="%2316213B" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat right .7rem center}
.select-wrap.full select{padding:.7rem 2.2rem .7rem .8rem}
.result-line{grid-column:1/-1; margin:.1rem 0 0; font-family:"Space Grotesk",sans-serif; font-size:.88rem; color:var(--ink-soft)}

/* slips */
.slip-list{list-style:none; margin:0; padding:0; display:grid; gap:.7rem}
.slip{
  display:grid; grid-template-columns:10px 1fr auto; gap:.9rem; align-items:stretch;
  background:var(--card); border:2.5px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:3px 3px 0 rgba(22,33,59,.9);
}
.slip-spine{background:var(--spine,#999)}
.slip[data-status="todo"]{--spine:#41546F}
.slip[data-status="in-progress"]{--spine:#2949E1}
.slip[data-status="blocked"]{--spine:#C23B22}
.slip[data-status="done"]{--spine:#0E7A4D}
.slip-main{padding:.75rem .2rem .8rem 0; min-width:0}
.slip-title{margin:0; font-size:1.08rem; line-height:1.25; letter-spacing:-.01em}
.slip-title a,.slip-title button.linklike{all:unset; cursor:pointer; font:inherit; font-weight:700; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:3px; text-decoration-color:var(--spine)}
.slip-title button.linklike:focus-visible{outline:3px solid var(--focus); outline-offset:3px}
.slip-facts{margin:.35rem 0 0; font-size:.9rem; color:var(--ink-soft); display:flex; flex-wrap:wrap; gap:.35rem .8rem}
.slip-facts strong{color:var(--ink); font-weight:700}
.slip-tags{margin:.35rem 0 0; display:flex; flex-wrap:wrap; gap:.35rem}
.slip-tags span{font-family:"Space Grotesk",sans-serif; font-size:.76rem; border:1.5px solid var(--ink); border-radius:99px; padding:.05rem .55rem; background:#fff}
.slip-side{padding:.7rem .8rem; display:flex; flex-direction:column; gap:.55rem; align-items:flex-end; justify-content:center; border-left:2px dashed var(--desk-deep); min-width:150px}
.mini-stamp{font-family:"Space Grotesk",sans-serif; font-size:.74rem; font-weight:700; letter-spacing:.02em; border:2px solid currentColor; border-radius:7px; padding:.12rem .5rem; transform:rotate(-3deg); background:#fff}
.mini-stamp.todo{color:#41546F} .mini-stamp.in-progress{color:var(--sort-blue)}
.mini-stamp.blocked{color:var(--stamp-red)} .mini-stamp.done{color:var(--done-green)}
.btn{font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:.92rem; border:2.5px solid var(--ink); border-radius:10px; padding:.5rem .85rem; background:#fff; color:var(--ink); cursor:pointer; box-shadow:2px 2px 0 var(--ink)}
.btn:active{transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink)}
.btn.primary{background:var(--ink); color:#fff}
.btn.ghost{background:#fff; box-shadow:none; display:inline-flex; gap:.5rem; align-items:center}
.kbd{font-size:.72rem; border:1.5px solid currentColor; border-radius:6px; padding:0 .35rem; opacity:.7}

.empty{border:2.5px solid var(--line); border-radius:12px; padding:2rem 1.5rem; text-align:center; background:#fff; margin-top:.8rem}
.empty-stamp{display:inline-block; font-family:"Space Grotesk",sans-serif; font-weight:700; border:3px double var(--stamp-red); color:var(--stamp-red); border-radius:10px; padding:.3rem .9rem; transform:rotate(-5deg); margin-bottom:.7rem}
.empty h2{font-size:1.5rem}
.empty p{color:var(--ink-soft); max-width:44ch; margin:.4rem auto 1rem}

/* drawer */
.drawer-root{position:fixed; inset:0; z-index:50}
.drawer-root[hidden]{display:none}
.scrim{position:absolute; inset:0; background:rgba(22,33,59,.48)}
.drawer{
  position:absolute; top:0; right:0; height:100dvh; width:min(480px, 100%);
  background:var(--paper); border-left:3px solid var(--line); overflow:auto; padding:1.1rem 1.25rem 2rem;
  box-shadow:-12px 0 30px rgba(22,33,59,.25);
}
.drawer[hidden]{display:none}
.drawer-grip{width:64px; height:6px; border-radius:99px; background:var(--desk-deep); margin:0 auto .8rem}
.drawer-top{display:flex; justify-content:space-between; align-items:center; gap:.8rem}
.drawer-code{margin:0; font-family:"Space Grotesk",sans-serif; font-size:.85rem; font-weight:600; color:var(--ink-soft)}
.stamp{display:inline-block; margin:.8rem 0 .4rem; font-weight:700; font-size:.95rem; border:2.5px solid currentColor; border-radius:8px; padding:.2rem .8rem; transform:rotate(-2.5deg); background:#fff}
.stamp.todo{color:#41546F} .stamp.in-progress{color:var(--sort-blue)}
.stamp.blocked{color:var(--stamp-red)} .stamp.done{color:var(--done-green)}
.drawer-title{font-size:1.9rem; line-height:1.05; letter-spacing:-.02em; margin:.2rem 0 .8rem; text-wrap:balance}
.drawer-facts{margin:0 0 1rem; display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
.drawer-facts div{border:2px solid var(--line); border-radius:10px; padding:.5rem .7rem; background:#fff}
.drawer-facts dt{font-family:"Space Grotesk",sans-serif; font-size:.76rem; font-weight:700; color:var(--ink-faint)}
.drawer-facts dd{margin:.1rem 0 0; font-size:.95rem; font-weight:600}
.drawer-body{white-space:pre-line; font-size:1.02rem; line-height:1.65; max-width:62ch}
.drawer-body p{margin:0 0 .8rem}
.tag-row{display:flex; flex-wrap:wrap; gap:.4rem; margin:1rem 0}
.tag-row span{font-family:"Space Grotesk",sans-serif; font-size:.8rem; border:2px solid var(--ink); background:var(--slip-yellow); border-radius:99px; padding:.1rem .65rem; font-weight:600}
.status-form{margin-top:1.1rem; border:2.5px solid var(--line); border-radius:12px; padding:.9rem; background:#fff; box-shadow:3px 3px 0 var(--line)}
.status-form label{font-family:"Space Grotesk",sans-serif; font-weight:700; display:block; margin-bottom:.4rem}
.status-hint{font-size:.86rem; color:var(--ink-soft); margin:.5rem 0 0}
.drawer-toast{margin:.9rem 0 0; background:var(--ink); color:#fff; border-radius:10px; padding:.6rem .8rem; font-family:"Space Grotesk",sans-serif; font-size:.9rem}
.drawer-toast[hidden]{display:none}

.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:#fff; font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:.93rem; padding:.65rem 1rem; border-radius:12px; border:2px solid #fff; box-shadow:0 8px 24px rgba(0,0,0,.3); z-index:80; max-width:min(92vw,480px); text-align:center}
.toast[hidden]{display:none}

.colophon{max-width:1180px; margin:0 auto; padding:0 1.25rem 2rem; color:var(--ink-soft); font-size:.9rem; display:flex; gap:1rem; justify-content:space-between; flex-wrap:wrap}
.colophon p{margin:0}
.colophon-small{font-size:.82rem}

@media (max-width:900px){
  .desk{grid-template-columns:1fr; padding-top:1rem}
  .shelf{position:static}
  .slot-list{grid-template-columns:repeat(2,1fr)}
  .toolbar{grid-template-columns:1fr}
  .slip{grid-template-columns:8px 1fr}
  .slip-side{grid-column:2; flex-direction:row; align-items:center; justify-content:space-between; border-left:0; border-top:2px dashed var(--desk-deep); padding:.6rem 0 .1rem; margin-right:.8rem}
  .topbar-meta{text-align:left}
  .progress-wrap{justify-content:flex-start}
  .drawer{width:100%; border-left:0}
  .drawer-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:420px){
  body{font-size:16px}
  .slot-list{grid-template-columns:1fr 1fr}
  .drawer-title{font-size:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}