/* ===== Stacks — the team card catalog ===== */
@font-face { font-family: 'Plex Mono'; src: url('assets/ibm-plex-mono.ttf') format('truetype'); font-weight: 100 700; font-display: swap; }
@font-face { font-family: 'Literata'; src: url('assets/literata.ttf') format('truetype'); font-weight: 400 700; font-display: swap; }

:root{
  --paper:#ece3cf; --paper-2:#e4d9bf; --paper-edge:#cdbb93; --recess:#dccdac;
  --ink:#241b12; --ink-soft:#6a5b42; --ink-faint:#9a8a6e;
  --wood:#5a3a22; --wood-dark:#3f2814; --wood-light:#6e4830; --wood-grain:#2f1d10;
  --metal:#b3a98f; --metal-dark:#7c735c;
  --line:#cdbb93;
  --red:#b2392c; --blue:#2f5d6e; --amber:#a9771a; --green:#4f6a36;
  --cream:#f3ecd8;
  --shadow-card: 0 1px 0 rgba(255,255,255,.18) inset, 0 2px 4px rgba(20,12,4,.35), 0 10px 22px -12px rgba(0,0,0,.6);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Plex Mono',ui-monospace,monospace;
  color:var(--cream);
  min-height:100dvh;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(110,72,48,.55), transparent 60%),
    repeating-linear-gradient(92deg, rgba(0,0,0,.06) 0 3px, transparent 3px 11px),
    linear-gradient(180deg,#4a2e1a 0%, #3a2415 60%, #2c1a0e 100%);
  background-attachment:fixed;
  padding:clamp(14px,2.4vw,34px);
  display:flex; flex-direction:column; gap:clamp(12px,2vw,22px);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.filters{position:absolute;width:0;height:0;overflow:hidden}
.skip{position:absolute;left:-9999px;top:0;background:var(--paper);color:var(--ink);padding:8px 12px;z-index:50;text-decoration:none}
.skip:focus{left:10px;top:10px;outline:2px solid var(--amber)}

/* ---------- Signage ---------- */
.signage{
  color:var(--cream);
  display:flex; flex-direction:column; gap:8px;
  padding:clamp(14px,2.2vw,26px) clamp(14px,2.5vw,30px);
  border:1px solid rgba(243,236,216,.14);
  border-radius:6px;
  background:linear-gradient(180deg, rgba(110,72,48,.5), rgba(63,40,20,.35));
  position:relative;
}
.signage::before{ /* brass plate nails */
  content:""; position:absolute; inset:7px; border:1px solid rgba(243,236,216,.10); border-radius:4px; pointer-events:none;
}
.signage__brand{display:flex; align-items:center; gap:14px}
.signage__mark{color:var(--amber); display:inline-flex}
.signage__title{
  font-family:'Literata',Georgia,serif; font-weight:700;
  font-size:clamp(30px,5vw,46px); line-height:1; margin:0; letter-spacing:-.01em;
}
.signage__sub{font-family:'Plex Mono'; font-size:12px; letter-spacing:.42em; text-transform:lowercase; color:var(--metal); margin:4px 0 0}
.signage__line{margin:2px 0 0; max-width:62ch; font-size:13px; line-height:1.6; color:#d8cdb1; opacity:.85}

/* ---------- Desk (controls) ---------- */
.desk{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px 22px;
  padding:clamp(12px,1.8vw,18px);
  border-radius:6px;
  background:linear-gradient(180deg,#cdbb93,#bfa97d);
  color:var(--ink);
  box-shadow:0 2px 0 rgba(255,255,255,.25) inset, 0 6px 16px -8px rgba(0,0,0,.5);
  border:1px solid rgba(0,0,0,.12);
}
.desk__field{display:flex; flex-direction:column; gap:6px; min-width:0}
.desk__search{flex:1 1 280px}
.desk__filter{flex:0 0 auto}
.desk__label{font-size:11px; letter-spacing:.06em; color:var(--ink-soft); font-weight:700}
.desk__inputwrap,.desk__selectwrap{position:relative; display:flex; align-items:center}
.desk__icon{position:absolute; left:10px; color:var(--ink-soft); pointer-events:none}
#search{
  font-family:'Plex Mono'; font-size:14px; color:var(--ink);
  width:100%; padding:9px 12px 9px 32px;
  background:var(--paper); border:1.5px solid var(--paper-edge); border-radius:3px;
}
#search::placeholder{color:var(--ink-faint)}
#search:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.desk__selectwrap select,.stampbox__selectwrap select{
  font-family:'Plex Mono'; font-size:14px; color:var(--ink);
  appearance:none; -webkit-appearance:none;
  padding:9px 30px 9px 12px;
  background:var(--paper); border:1.5px solid var(--paper-edge); border-radius:3px;
  cursor:pointer;
}
.desk__caret,.stampbox__caret{position:absolute; right:10px; color:var(--ink-soft); pointer-events:none}
.desk__selectwrap select:focus-visible,.stampbox__selectwrap select:focus-visible{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
.desk__count{margin-left:auto; align-self:flex-end; font-size:13px; color:var(--ink); font-weight:700; white-space:nowrap; padding-bottom:3px}
.desk__count span{font-variant-numeric:tabular-nums}

/* ---------- Cabinet / drawer ---------- */
.cabinet{flex:1; display:flex}
.drawer{
  width:100%; display:flex; flex-direction:column;
  border-radius:8px; overflow:hidden;
  background:linear-gradient(180deg,var(--wood-light),var(--wood) 8%,var(--wood) 92%,var(--wood-dark));
  box-shadow:0 30px 50px -24px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.3);
}
.drawer__rail{
  height:clamp(20px,2.4vw,28px); position:relative; flex:0 0 auto;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.10) 0 2px, transparent 2px 9px),
    linear-gradient(180deg,#6e4830,#4d3019);
  border-bottom:1px solid rgba(0,0,0,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset;
}
.drawer__rail--bottom{border-bottom:none; border-top:1px solid rgba(0,0,0,.45); box-shadow:0 -1px 0 rgba(255,255,255,.06) inset}
.drawer__handle{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:clamp(60px,12vw,120px); height:7px; border-radius:4px;
  background:linear-gradient(180deg,#3a3127,#15100a);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset, 0 2px 3px rgba(0,0,0,.6);
}
.drawer__labelholder{
  position:absolute; left:clamp(10px,3vw,30px); top:50%; transform:translateY(-50%);
  background:#1f1409; color:var(--metal); padding:2px 10px; border-radius:2px;
  font-size:9px; letter-spacing:.3em; text-transform:uppercase;
  border:1px solid #0c0805; box-shadow:0 0 0 2px rgba(255,255,255,.04);
}
.drawer__interior{
  position:relative; flex:1;
  background:
    radial-gradient(140% 60% at 50% 0%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg,#3a2615,#2c1a0e);
  padding:clamp(14px,2vw,26px);
  box-shadow:inset 0 8px 18px -10px rgba(0,0,0,.8), inset 0 -6px 14px -10px rgba(0,0,0,.6);
}

/* ---------- Cards ---------- */
.cards{list-style:none; margin:0; padding:0; display:grid; gap:clamp(12px,1.6vw,20px);
  grid-template-columns:repeat(auto-fill, minmax(min(260px,100%), 1fr)); }

.card{min-width:0}
.card-btn{
  display:flex; flex-direction:column; gap:10px; width:100%; text-align:left;
  font:inherit; color:var(--ink); cursor:pointer; padding:0; border:0; background:transparent;
  position:relative; isolation:isolate;
}
.card-paper{
  position:relative; min-height:150px; padding:14px 16px 14px 22px;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--paper-edge); border-radius:2px;
  box-shadow:var(--shadow-card);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card-paper::before{ /* red binding stripe */
  content:""; position:absolute; left:9px; top:9px; bottom:9px; width:3px;
  background:var(--red); opacity:.5; border-radius:1px;
}
.card-btn:hover .card-paper,.card-btn:focus-visible .card-paper{transform:translateY(-3px); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 4px 8px rgba(20,12,4,.4), 0 16px 28px -14px rgba(0,0,0,.7)}
.card-btn:focus-visible{outline:none}
.card-btn:focus-visible .card-paper{outline:2px solid var(--blue); outline-offset:2px}

.card-head{display:flex; justify-content:space-between; align-items:flex-start; gap:8px}
.card-id{font-size:10px; letter-spacing:.18em; color:var(--ink-faint); white-space:nowrap}
.stamp{display:inline-block; padding:.22rem .5rem; border:2.5px double currentColor; color:var(--ink-soft);
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:10px; line-height:1;
  transform:rotate(-6deg); opacity:.92; filter:url(#ink-rough)}
.stamp[data-status="todo"]{color:var(--blue)}
.stamp[data-status="in-progress"]{color:var(--amber)}
.stamp[data-status="blocked"]{color:var(--red)}
.stamp[data-status="done"]{color:var(--green)}

.card-title{font-family:'Plex Mono'; font-weight:700; font-size:16px; line-height:1.32; margin:6px 0 0; color:var(--ink)}
.card-meta{margin:auto 0 0; display:flex; flex-wrap:wrap; gap:2px 14px; font-size:11px; color:var(--ink-soft); line-height:1.5}
.card-meta b{color:var(--ink); font-weight:700}
.card-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:2px}
.card-tag{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:2px; padding:2px 6px; background:rgba(0,0,0,.02)}
.card-foot{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:8px; padding-top:8px; border-top:1px dashed var(--line); font-size:11px; color:var(--ink-soft)}
.card-due b{color:var(--ink)}
.card-due[data-overdue="true"] b{color:var(--red)}
.card-comments{white-space:nowrap}

/* ---------- Empty ---------- */
.empty{display:block}
.empty__card{
  max-width:520px; margin:6vh auto; text-align:center; color:var(--ink);
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--paper-edge); border-radius:3px; padding:34px 26px;
  box-shadow:var(--shadow-card); position:relative;
}
.empty__stamp{display:inline-block; padding:.28rem .6rem; border:2.5px double var(--red); color:var(--red); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:13px; transform:rotate(-7deg); filter:url(#ink-rough); margin-bottom:12px}
.empty__title{font-family:'Literata',serif; font-size:20px; margin:0 0 6px; color:var(--ink)}
.empty__body{font-size:13px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px}
.empty__reset{font:inherit; font-weight:700; font-size:13px; color:var(--ink); background:var(--paper); border:1.5px solid var(--ink-soft); border-radius:3px; padding:9px 16px; cursor:pointer}
.empty__reset:focus-visible{outline:2px solid var(--blue); outline-offset:2px}
.empty__reset:hover{background:var(--paper-2)}

.footnote{margin:2px auto 0; text-align:center; font-size:10px; letter-spacing:.08em; color:var(--metal); opacity:.65}

/* ---------- Detail dialog ---------- */
.detail{border:0; background:transparent; padding:0; max-width:none; max-height:none; width:100%; height:100%; margin:0; color:var(--ink)}
.detail::backdrop{background:radial-gradient(120% 100% at 50% 0%, rgba(20,12,4,.72), rgba(10,6,2,.9)); backdrop-filter:blur(2px)}
.detail[open]{display:flex; align-items:flex-start; justify-content:center; overflow-y:auto}
.record{
  position:relative; width:min(720px,100%); margin:clamp(24px,6vh,64px) auto; padding:0;
  background:transparent;
  animation:slide-in .26s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes slide-in{from{opacity:0; transform:translateY(10px) rotate(-.4deg)}to{opacity:1; transform:none}}
@media (prefers-reduced-motion: reduce){.record{animation:none}}

.record__top{display:flex; justify-content:space-between; align-items:center; padding:0 4px 10px; color:var(--cream)}
.record__id{font-size:10px; letter-spacing:.22em; color:var(--metal)}
.record__close{
  font:inherit; font-weight:700; font-size:12px; letter-spacing:.04em;
  color:var(--cream); background:rgba(243,236,216,.08); border:1px solid rgba(243,236,216,.3);
  border-radius:3px; padding:7px 11px; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
}
.record__close:hover{background:rgba(243,236,216,.16)}
.record__close:focus-visible{outline:2px solid var(--amber); outline-offset:2px}

.record__cardbody{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,var(--paper),var(--paper-2));
  border:1px solid var(--paper-edge); border-radius:3px;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.7), 0 2px 0 rgba(255,255,255,.2) inset;
  padding:clamp(20px,3vw,32px) clamp(18px,3vw,34px) clamp(22px,3vw,34px);
}
.record__cardbody::before{ /* left red stripe */
  content:""; position:absolute; left:13px; top:13px; bottom:13px; width:3px; background:var(--red); opacity:.5; border-radius:1px;
}
.record__head{margin-bottom:18px}
.record__project{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px}
.record__title{font-family:'Literata',serif; font-weight:700; font-size:clamp(24px,4vw,34px); line-height:1.15; letter-spacing:-.01em; margin:0; color:var(--ink)}
.record__summary{font-size:13px; line-height:1.6; color:var(--ink-soft); margin:10px 0 0; max-width:60ch}

.record__meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px 20px;
  margin:18px 0; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.record__meta dt{font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:3px}
.record__meta dd{margin:0; font-size:13px; color:var(--ink); font-weight:700}
.record__meta--full{grid-column:1/-1}
.record__meta dd[data-record-tags]{display:flex; flex-wrap:wrap; gap:5px; font-weight:400}
.record__meta dd[data-record-tags] span{font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border:1px solid var(--line); border-radius:2px; padding:2px 6px}

.record__body{
  font-size:14px; line-height:1.7; color:var(--ink); white-space:pre-line;
  padding:6px 0 4px; max-width:64ch;
}
.record__body p{margin:0 0 1em}

/* circulation slip */
.record__stamps{margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
.record__stamps-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:6px; margin-bottom:12px}
.record__stampcap{font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); font-weight:700}
.record__stamphint{font-size:11px; color:var(--ink-faint)}
.slip{
  display:flex; flex-wrap:wrap; gap:10px; padding:14px;
  background:#f7f0dc; border:1px dashed var(--line); border-radius:2px;
  min-height:64px; align-content:flex-start;
  background-image:linear-gradient(rgba(0,0,0,.03) 1px, transparent 1px); background-size:100% 22px;
}
.slip__entry{display:flex; flex-direction:column; align-items:flex-start; gap:3px}
.slip__stamp{padding:.24rem .48rem; border:2.5px double currentColor; font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:11px; line-height:1; filter:url(#ink-rough); transform:rotate(-4deg)}
.slip__stamp[data-status="todo"]{color:var(--blue)}
.slip__stamp[data-status="in-progress"]{color:var(--amber)}
.slip__stamp[data-status="blocked"]{color:var(--red)}
.slip__stamp[data-status="done"]{color:var(--green)}
.slip__date{font-size:9px; letter-spacing:.12em; color:var(--ink-faint); transform:rotate(-4deg)}
.slip__empty{font-size:11px; color:var(--ink-faint); font-style:italic}

/* stamp box */
.stampbox{margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.stampbox__label{font-size:11px; letter-spacing:.06em; color:var(--ink-soft); font-weight:700; display:block; margin-bottom:8px}
.stampbox__row{display:flex; flex-wrap:wrap; gap:10px; align-items:stretch}
.stampbox__selectwrap{position:relative; display:flex; align-items:center; flex:1 1 220px; min-width:0}
.stampbox__select{width:100%; padding:11px 30px 11px 13px}
.stampbox__press{
  font:inherit; font-weight:700; font-size:13px; letter-spacing:.04em;
  color:var(--cream); background:linear-gradient(180deg,#7a4a2c,#5a3219);
  border:1px solid #2f1d10; border-radius:3px; padding:11px 18px; cursor:pointer;
  box-shadow:0 2px 0 rgba(0,0,0,.3) inset, 0 1px 0 rgba(255,255,255,.15) inset;
}
.stampbox__press:hover{background:linear-gradient(180deg,#8a5430,#6a3a20)}
.stampbox__press:focus-visible{outline:2px solid var(--amber); outline-offset:2px}
.stampbox__press:active{transform:translateY(1px)}
.stampbox__note{font-size:12px; color:var(--ink-soft); margin:10px 0 0; min-height:16px; font-weight:700}
.stampbox__note.is-on{color:var(--green)}

/* thud overlay */
.record__thud{
  position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0;
}
.record__thud.is-stamping{animation:thud .42s ease-out}
.record__thud-text{font-family:'Literata',serif; font-weight:700; letter-spacing:.06em; text-transform:uppercase; font-size:clamp(34px,7vw,64px); color:var(--ink); padding:.3em .6em; border:5px double currentColor; transform:rotate(-8deg) scale(1.4)}
@keyframes thud{
  0%{opacity:0; transform:scale(1.6)}
  18%{opacity:.92; transform:scale(1) rotate(0deg)}
  22%{transform:scale(1) rotate(-2deg)}
  72%{opacity:.92}
  100%{opacity:0; transform:scale(1.05)}
}
@media (prefers-reduced-motion: reduce){.record__thud.is-stamping{animation:none; opacity:0}}

/* toast */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--paper); color:var(--ink); font-weight:700; font-size:13px;
  padding:11px 18px; border-radius:3px; border:1px solid var(--paper-edge);
  box-shadow:0 12px 26px -10px rgba(0,0,0,.6); z-index:60;
  opacity:0; transition:opacity .2s, transform .2s; max-width:90vw; text-align:center;
}
.toast.is-on{opacity:1; transform:translateX(-50%) translateY(0)}
.toast[data-tone="blocked"]{border-color:var(--red)} 
.toast[data-tone="red"]{border-color:var(--red)}

/* responsive */
@media (max-width:560px){
  .desk__count{margin-left:0; flex-basis:100%; text-align:left}
  .signage__line{display:none}
  .cards{grid-template-columns:1fr}
  .record__meta{grid-template-columns:1fr 1fr}
  .record__meta--full{grid-column:1/-1}
  .stampbox__press{flex:1 1 100%}
}