/* ============================================================
   Tray — a paper sorting-tray task inbox
   Type: DM Serif Display (display) / Work Sans (UI) / IBM Plex Mono (annotations)
   ============================================================ */

@font-face{
  font-family:'DM Serif Display';
  src:url('assets/dm-serif.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('assets/ibm-plex-mono.ttf') format('truetype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Work Sans';
  src:url('assets/work-sans.ttf') format('truetype');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  --paper:#F3EEE2;
  --surface:#FBF8EF;
  --surface-2:#EDE6D4;
  --ink:#231D13;
  --ink-2:#5C5243;
  --muted:#6F6350;
  --line:#DCD1B9;
  --line-strong:#C7B995;

  --st-todo:#6B5F4D;
  --st-in-progress:#91630A;
  --st-blocked:#AC3A23;
  --st-done:#2E6B4B;
  --st-empty:#877A64;

  --serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --sans:'Work Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-s:3px; --r-m:6px; --r-l:12px;
  --shadow-sheet:0 24px 60px -24px rgba(35,29,19,.45), 0 2px 8px rgba(35,29,19,.12);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--sans);
  font-size:16px; line-height:1.55;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden;}

button{font:inherit; color:inherit; background:none; border:0; cursor:pointer;}
input,select{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px; border-radius:2px;}

.skip{
  position:absolute; left:16px; top:-60px; z-index:60;
  background:var(--ink); color:var(--surface);
  padding:.55rem .9rem; border-radius:var(--r-m);
  font-size:.85rem; text-decoration:none; transition:top .15s ease;
}
.skip:focus{top:16px;}

/* ---------- shared bits ---------- */

.mono-note{
  font-family:var(--mono); font-size:.68rem; line-height:1.7;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* The stamp — the signature device */
.stamp{
  display:inline-block;
  font-family:var(--mono); font-size:.69rem; font-weight:400;
  letter-spacing:.13em; text-transform:uppercase;
  padding:.42em .62em .36em;
  border:1.5px solid currentColor; border-radius:var(--r-s);
  color:var(--st-todo); white-space:nowrap;
}
.st-todo{color:var(--st-todo);}
.st-in-progress{color:var(--st-in-progress);}
.st-blocked{color:var(--st-blocked);}
.st-done{color:var(--st-done);}
.st-empty{color:var(--st-empty);}
.stamp-big{
  font-size:.82rem; padding:.5em .8em .44em;
  border-width:2px; border-radius:var(--r-m);
  transform:rotate(-2deg);
}
.stamp.stamped{animation:stamp-in .35s cubic-bezier(.2,1.4,.4,1);}
@keyframes stamp-in{
  0%{transform:rotate(-2deg) scale(1.35); opacity:.4;}
  100%{transform:rotate(-2deg) scale(1); opacity:1;}
}
@media (prefers-reduced-motion:reduce){
  .stamp.stamped{animation:none;}
}

.btn{
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--ink); color:var(--surface);
  font-weight:600; font-size:.9rem;
  padding:.68rem 1.15rem; border-radius:var(--r-m);
  transition:transform .12s ease, background .15s ease;
}
.btn:hover{background:#3A3225;}
.btn:active{transform:translateY(1px);}

/* ============================================================
   App frame
   ============================================================ */

.app{
  display:grid; grid-template-columns:300px minmax(0,1fr);
  max-width:1440px; margin:0 auto; min-height:100vh;
  border-right:1px solid var(--line);
}

/* ---------- sidebar: the file drawer ---------- */

.side{
  display:flex; flex-direction:column; gap:2rem;
  padding:2.2rem 1.6rem 2rem;
  border-right:1px solid var(--line);
  background:var(--paper);
}

.brand{display:flex; align-items:center; gap:.8rem;}
.brand-mark{
  width:44px; height:44px; flex:none;
  border:1.5px solid var(--ink); border-radius:var(--r-m);
  display:grid; place-items:center; background:var(--surface);
}
.brand-hole{
  width:10px; height:10px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--ink);
}
.brand-name{
  font-family:var(--serif); font-size:1.7rem; line-height:1;
  letter-spacing:.01em;
}
.brand-tag{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); margin-top:.35rem;
}

.side-label{margin-bottom:-1.1rem;}
.side-nav{display:flex; flex-direction:column; gap:.25rem;}
.side-count{
  display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.72rem .7rem; border-radius:var(--r-m);
  border:1px solid transparent;
  text-align:left; transition:background .15s ease, border-color .15s ease;
}
.side-count:hover{background:var(--surface);}
.side-count[aria-pressed="true"]{
  background:var(--surface); border-color:var(--line-strong);
  box-shadow:0 1px 0 rgba(35,29,19,.06);
}
.side-count-num{
  font-family:var(--mono); font-size:.8rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.side-stamp{font-size:.62rem; padding:.4em .55em .34em;}

.side-foot{
  margin-top:auto; padding-top:1.4rem;
  border-top:1px dashed var(--line-strong);
}

/* ---------- main column ---------- */

.main{
  background:var(--surface);
  padding:2.4rem clamp(1.4rem, 4.5vw, 4rem) 3rem;
  min-width:0;
}

.masthead{
  display:flex; align-items:flex-end; justify-content:space-between; gap:2rem;
  padding-bottom:1.6rem;
  border-bottom:2px solid var(--ink);
}
.eyebrow{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.7rem;
}
.mast-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.4rem, 4vw, 3.4rem); line-height:1; letter-spacing:.005em;
}
.mast-sub{
  margin-top:.65rem; font-size:.92rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.mast-mark{
  font-family:var(--mono); font-size:.66rem; line-height:1.5;
  letter-spacing:.16em; text-align:right; color:var(--muted);
  text-transform:uppercase; padding-bottom:.3rem; flex:none;
}

/* toolbar */
.toolbar{
  display:flex; gap:1rem; align-items:flex-end;
  padding:1.4rem 0 1.1rem;
}
.field{display:flex; flex-direction:column; gap:.35rem; min-width:0;}
.field-label{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.field-search{flex:1;}
.field-filter{width:200px; flex:none;}
.field input, .field select{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line-strong); border-radius:var(--r-m);
  padding:.62rem .8rem; font-size:1rem;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input::placeholder{color:var(--muted);}
.field input:focus, .field select:focus{
  outline:none; border-color:var(--ink);
  box-shadow:0 0 0 3px rgba(35,29,19,.12);
}
.field select{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23231D13' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center;
  padding-right:2.2rem; cursor:pointer;
}

.result-note{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  padding-bottom:.9rem;
}

/* ---------- the ledger list ---------- */

.list{list-style:none;}
.row{border-bottom:1px solid var(--line);}
.row:first-child{border-top:1px solid var(--line);}
.row-btn{
  width:100%; text-align:left;
  display:grid;
  grid-template-columns:2.4rem 8.5rem minmax(0,1fr) auto;
  grid-template-areas:"idx stamp main side";
  gap:.35rem 1.1rem; align-items:center;
  padding:1.05rem .35rem;
  transition:background .15s ease;
}
.row-btn:hover{background:var(--paper);}
.row-btn:hover .go{transform:translateX(3px); color:var(--ink);}
.row-btn:focus-visible{outline-offset:-2px;}

.idx{
  grid-area:idx; font-family:var(--mono); font-size:.72rem;
  color:var(--muted); font-variant-numeric:tabular-nums;
}
.row .stamp{grid-area:stamp; justify-self:start;}
.row-main{grid-area:main; min-width:0; display:flex; flex-direction:column; gap:.3rem;}
.row-title{font-size:1.02rem; font-weight:600; line-height:1.35;}
.row-meta{
  display:flex; flex-wrap:wrap; gap:.35rem .9rem;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted);
}
.row-tag{color:var(--ink-2);}
.row-tag::before{content:"·"; margin-right:.55rem; color:var(--line-strong);}
.row-meta .row-tag:first-of-type::before{content:""; margin:0;}

.row-side{
  grid-area:side; display:flex; align-items:center; gap:1.4rem;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.prio{display:flex; align-items:center; gap:.45rem;}
.prio-label{
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
}
.ticks{display:inline-flex; gap:2px;}
.ticks i{
  width:4px; height:10px; border-radius:1px;
  background:var(--line-strong); display:inline-block;
}
.p-high .ticks i:nth-child(-n+3),
.p-medium .ticks i:nth-child(-n+2),
.p-low .ticks i:first-child{background:var(--ink);}
.due{white-space:nowrap;}
.due-label{color:var(--muted); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; margin-right:.3rem;}
.who{display:flex; align-items:center; gap:.5rem; white-space:nowrap;}
.ava{
  width:26px; height:26px; flex:none; border-radius:50%;
  background:var(--surface-2); border:1px solid var(--line-strong);
  display:grid; place-items:center;
  font-family:var(--mono); font-size:.6rem; color:var(--ink-2);
}
.who-name{font-family:var(--sans); font-size:.85rem; color:var(--ink-2);}
.cmt{display:inline-flex; align-items:center; gap:.35rem; white-space:nowrap;}
.cmt svg{width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.6;}
.go{
  font-family:var(--sans); font-size:1.05rem; color:var(--muted);
  transition:transform .15s ease, color .15s ease;
}

/* ---------- empty state ---------- */

.empty{
  margin:2.5rem 0 1rem; padding:3rem 2rem;
  border:1.5px dashed var(--line-strong); border-radius:var(--r-l);
  text-align:center; background:var(--paper);
}
.empty-title{font-family:var(--serif); font-weight:400; font-size:1.8rem; margin:1.1rem 0 .4rem;}
.empty-copy{color:var(--ink-2); font-size:.95rem; max-width:42ch; margin:0 auto 1.4rem;}

/* ---------- footer ---------- */
.foot{
  margin-top:3rem; padding-top:1.4rem;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:.4rem 2rem; justify-content:space-between;
}
.foot-fine{font-size:.78rem; color:var(--muted);}

/* ============================================================
   Detail sheet
   ============================================================ */

.scrim{
  position:fixed; inset:0; z-index:40;
  background:rgba(35,29,19,.45);
  opacity:0; transition:opacity .22s ease;
}
.scrim.open{opacity:1;}

.detail{
  position:fixed; top:0; right:0; bottom:0; z-index:50;
  width:min(560px, 100vw);
  background:var(--surface);
  border-left:2px solid var(--ink);
  box-shadow:var(--shadow-sheet);
  padding:1.6rem clamp(1.4rem, 3.5vw, 2.6rem) 3rem;
  overflow-y:auto;
  transform:translateX(24px); opacity:0; visibility:hidden;
  transition:transform .26s cubic-bezier(.3,1,.35,1), opacity .22s ease, visibility 0s linear .26s;
}
.detail.open{
  transform:translateX(0); opacity:1; visibility:visible;
  transition:transform .26s cubic-bezier(.3,1,.35,1), opacity .22s ease;
}

.d-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding-bottom:1.1rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}
.d-close{
  display:inline-flex; align-items:center; gap:.45rem;
  font-size:.85rem; font-weight:600;
  padding:.45rem .8rem; border-radius:var(--r-m);
  border:1px solid var(--line-strong); background:var(--paper);
  transition:background .15s ease, border-color .15s ease;
}
.d-close:hover{background:var(--surface-2); border-color:var(--ink);}

.d-stamprow{margin-bottom:1.1rem;}
.d-title{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.7rem, 3.2vw, 2.15rem); line-height:1.12;
  margin-bottom:1.3rem; text-wrap:balance;
}

.d-facts{
  display:grid; grid-template-columns:repeat(3, 1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
  margin-bottom:1.6rem;
}
.d-facts > div{
  padding:.65rem .8rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
}
.d-facts dt{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); margin-bottom:.2rem;
}
.d-facts dd{font-size:.88rem; font-weight:500; line-height:1.35;}

.d-status{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.6rem;}
.d-status select{
  max-width:280px;
  background:var(--paper);
  border:1.5px solid var(--ink); border-radius:var(--r-m);
  padding:.68rem .85rem; font-size:1rem; font-weight:600;
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23231D13' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .8rem center;
  padding-right:2.4rem;
}
.d-status select:focus{
  outline:none; box-shadow:0 0 0 3px rgba(35,29,19,.15);
}

.d-body{max-width:56ch;}
.d-body p{font-size:1rem; line-height:1.62; color:var(--ink-2);}
.d-body p + p{margin-top:.9rem;}
.d-outcome{
  margin-top:1.4rem; padding:1rem 1.1rem;
  background:var(--paper); border-left:3px solid var(--ink);
  border-radius:0 var(--r-m) var(--r-m) 0;
}
.outcome-label{
  font-family:var(--mono); font-size:.72rem;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink);
}
.d-outcome p{font-size:.94rem;}

.d-footnote{margin-top:2.4rem; padding-top:1.2rem; border-top:1px dashed var(--line-strong);}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; z-index:70;
  transform:translate(-50%, 12px);
  background:var(--ink); color:var(--surface);
  font-size:.88rem; font-weight:500;
  padding:.7rem 1.15rem; border-radius:var(--r-m);
  box-shadow:var(--shadow-sheet);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
  max-width:min(90vw, 480px); text-align:center;
}
.toast.show{
  opacity:1; visibility:visible; transform:translate(-50%, 0);
  transition:opacity .2s ease, transform .2s ease;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width:1060px){
  .row-btn{grid-template-columns:2rem 7.5rem minmax(0,1fr) auto; gap:.3rem .8rem;}
  .who-name{display:none;}
  .row-side{gap:1rem;}
}

@media (max-width:900px){
  .app{grid-template-columns:1fr; border-right:0;}
  .side{
    border-right:0; border-bottom:1px solid var(--line);
    padding:1.2rem 1.4rem 1.1rem; gap:1rem;
  }
  .side-label{display:none;}
  .side-nav{
    flex-direction:row; overflow-x:auto; gap:.4rem;
    padding-bottom:.2rem; scrollbar-width:none;
  }
  .side-nav::-webkit-scrollbar{display:none;}
  .side-count{
    flex:none; gap:.6rem; padding:.5rem .75rem;
    border:1px solid var(--line-strong); background:var(--surface);
    border-radius:999px;
  }
  .side-count[aria-pressed="true"]{background:var(--ink);}
  .side-count[aria-pressed="true"] .side-count-num{color:var(--surface);}
  .side-count[aria-pressed="true"] .side-stamp{border-color:var(--surface); color:var(--surface);}
  .side-stamp{font-size:.6rem;}
  .side-foot{display:none;}
  .masthead{padding-bottom:1.3rem;}
  .mast-mark{display:none;}
}

@media (max-width:760px){
  .toolbar{flex-direction:column; align-items:stretch; gap:.8rem;}
  .field-filter{width:100%;}
  .row-btn{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "idx stamp"
      "main main"
      "side side";
    row-gap:.55rem; padding:.95rem .1rem;
  }
  .row-side{flex-wrap:wrap; gap:.5rem 1.1rem;}
  .d-facts{grid-template-columns:repeat(2, 1fr);}
  .masthead{align-items:flex-start;}
}

@media (max-width:520px){
  .detail{width:100vw; border-left:0;}
  .ava{width:22px; height:22px; font-size:.55rem;}
  .who{display:none;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *, *::before, *::after{
    transition-duration:.01ms !important;
    animation-duration:.01ms !important;
  }
}