/* Inlet - utilitarian postal inbox
   Fonts: Space Grotesk (display), DM Sans (body), IBM Plex Mono (meta)
   Palette: paper #EDEEE7, ink #111214, accent vermillion #D93D2B, rules #D6D4CB
   Shape: sharp (0) for cards, pill for tags/buttons only
*/
@font-face{
  font-family:"Space Grotesk";
  src:url("assets/space-grotesk.ttf") format("truetype");
  font-display:swap;
  font-weight:300 700;
}
@font-face{
  font-family:"DM Sans";
  src:url("assets/dm-sans.ttf") format("truetype");
  font-display:swap;
  font-weight:400 700;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/ibm-plex-mono.ttf") format("truetype");
  font-display:swap;
}
:root{
  --paper:#EDEEE7;
  --paper-2:#E8E6DE;
  --card:#FFFFFF;
  --ink:#111214;
  --muted:#6B6A63;
  --rule:#D6D4CB;
  --rule-strong:#B8B6AC;
  --accent:#D93D2B;
  --accent-hover:#BD3325;
  --accent-soft:#FBE9E6;
  --todo:#B7791F;
  --progress:#1B6B8A;
  --blocked:#D93D2B;
  --done:#1F7A4A;
  --focus:#111214;
  --shadow:0 1px 0 rgba(17,18,20,.06), 0 8px 24px rgba(17,18,20,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"DM Sans", system-ui, -apple-system, sans-serif;
  font-size:15px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
button, input, select{font:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
}
.skip{
  position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 12px; z-index:100;
}
.skip:focus{left:8px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:20;
  background:var(--ink);
  color:#F2F0E9;
  border-bottom:1px solid #1E1F22;
}
.header-inner{
  max-width:1400px; margin:0 auto; padding:0 24px;
  height:64px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.brand-mark{
  width:36px; height:36px; background:#fff; color:var(--ink);
  display:flex; flex-direction:column; justify-content:center; gap:4px; padding:8px 7px;
}
.mark-lines{height:2px; background:var(--ink); display:block}
.mark-lines:nth-child(2){width:70%}
.brand-text{line-height:1}
.brand-name{font-family:"Space Grotesk", sans-serif; font-weight:700; letter-spacing:.04em; font-size:15px}
.brand-sub{font-family:"IBM Plex Mono", monospace; font-size:11px; color:#B8B6AC; margin-top:2px; letter-spacing:.02em}
.header-nav{display:flex; gap:4px}
.nav-link{
  font-family:"IBM Plex Mono", monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:8px 12px; text-decoration:none; color:#B8B6AC; border:1px solid transparent;
}
.nav-link.is-active{color:#fff; border-color:#2A2B2E; background:#1A1B1E}
.header-actions{display:flex; align-items:center; gap:16px}
.filter-summary{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:#B8B6AC; border-left:1px solid #2A2B2E; padding-left:16px;
}
.avatar-stack{display:flex}
.av{
  width:28px; height:28px; border-radius:999px; display:grid; place-items:center;
  font-size:11px; font-weight:700; border:2px solid var(--ink); margin-left:-6px;
}
.av1{background:#F2D6C9; color:#5A2A18}
.av2{background:#C9DDF2; color:#1A3A5A}
.av3{background:#D6E8D0; color:#1E3A1A}
.av4{background:#fff; color:var(--ink); font-size:10px}

/* Hero */
.hero{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.hero-inner{
  max-width:1400px; margin:0 auto; padding:28px 24px 24px;
  display:grid; grid-template-columns:1.15fr .85fr; gap:32px; align-items:start;
}
.hero-title{
  font-family:"Space Grotesk", sans-serif;
  font-size:42px; line-height:.95; letter-spacing:-.03em; font-weight:700;
  margin:0; max-width:14ch;
}
.hero-sub{
  margin:12px 0 0; max-width:48ch; color:var(--muted); font-size:15px; line-height:1.6;
}
.hero-inline{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.hero-badge{
  background:var(--ink); color:#fff; font-family:"IBM Plex Mono", monospace;
  font-size:11px; letter-spacing:.06em; text-transform:uppercase; padding:6px 10px;
}
.hero-meta{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--muted); letter-spacing:.02em}
.hero-card{
  background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow);
  overflow:hidden;
}
.hero-card-top{
  display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--rule);
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.dot{width:8px; height:8px; border-radius:50%; background:var(--rule); display:inline-block}
.hero-card img{height:180px; width:100%; object-fit:cover; filter:grayscale(.1) contrast(1.05)}
.hero-card-foot{padding:12px}
.foot-line{height:8px; background:var(--paper-2); margin-bottom:8px}
.foot-line.short{width:60%}
.foot-stats{display:flex; gap:16px; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border-top:1px solid var(--rule); padding-top:10px; margin-top:6px}
.foot-stats strong{color:var(--ink); font-size:12px}

/* Workspace */
.workspace{
  background:var(--paper);
}
.workspace-inner{
  max-width:1400px; margin:0 auto; padding:18px 24px 32px;
  display:grid; grid-template-columns: 560px 1fr; gap:18px; align-items:start;
}
.queue-col{
  background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow);
}
.queue-header{
  display:flex; align-items:baseline; justify-content:space-between;
  padding:16px 16px 0; gap:12px;
}
.queue-title{
  font-family:"Space Grotesk", sans-serif; font-size:18px; font-weight:700; letter-spacing:-.02em; margin:0;
}
.queue-count{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--paper); border:1px solid var(--rule); padding:4px 8px;
}
.toolbar{
  display:grid; grid-template-columns:1fr 170px; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--rule);
}
.field label{
  display:block; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.input-wrap, .select-wrap{
  position:relative; display:flex; align-items:center;
  border:1px solid var(--rule); background:#fff;
}
.input-wrap svg{margin-left:10px; color:var(--muted); flex-shrink:0}
.input-wrap input{
  flex:1; border:0; padding:10px 10px; background:transparent; outline:0; font-size:14px; min-width:0;
}
.select-wrap select{
  width:100%; border:0; padding:10px 28px 10px 10px; background:transparent; outline:0; font-size:14px; appearance:none; cursor:pointer;
}
.select-wrap::after{
  content:""; position:absolute; right:10px; width:8px; height:8px;
  border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg) translateY(-2px); pointer-events:none;
}
.list-info{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  color:var(--muted); padding:10px 16px; border-bottom:1px solid var(--rule); background:var(--paper);
  min-height:35px; display:flex; align-items:center;
}
.task-list{list-style:none; margin:0; padding:0}
.task-row{
  border-bottom:1px solid var(--rule);
  display:grid; grid-template-columns: 4px 1fr;
  background:var(--card);
  transition:background .15s ease;
}
.task-row:hover{background:#FFFEFB}
.task-row.is-active{background:var(--paper); border-left-color:var(--accent)}
.status-stripe{width:4px; background:var(--todo)}
.status-stripe.todo{background:var(--todo)}
.status-stripe.in-progress{background:var(--progress)}
.status-stripe.blocked{background:var(--blocked)}
.status-stripe.done{background:var(--done)}
.task-main{padding:14px 14px 12px; min-width:0}
.task-top{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.status-pill{
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 7px; border-radius:999px; border:1px solid var(--rule); background:#fff; font-weight:600; line-height:1;
}
.status-pill.todo{color:var(--todo); border-color:#E8D3A0; background:#FFF6DF}
.status-pill.in-progress{color:var(--progress); border-color:#B9D6E2; background:#E6F2F7}
.status-pill.blocked{color:var(--blocked); border-color:#E8B4AF; background:var(--accent-soft)}
.status-pill.done{color:var(--done); border-color:#B9D6C0; background:#E6F3E9}

.task-project{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
}
.task-title{
  font-family:"Space Grotesk", sans-serif; font-size:15px; font-weight:600; line-height:1.3; letter-spacing:-.01em;
  margin:0 0 6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.task-summary{
  font-size:13px; line-height:1.5; color:var(--muted); margin:0 0 10px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.task-meta{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--muted);
}
.meta-sep{width:1px; height:12px; background:var(--rule); display:inline-block}
.tag{
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.05em; text-transform:uppercase;
  border:1px solid var(--rule); background:var(--paper); padding:3px 6px; border-radius:999px;
}
.task-actions{margin-top:10px; display:flex; gap:8px}
.btn{
  appearance:none; border:1px solid var(--rule); background:#fff; color:var(--ink);
  padding:8px 12px; font-size:13px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; line-height:1;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.btn-primary:hover{background:#1E1F22}
.btn-ghost:hover{background:var(--paper); border-color:var(--rule-strong)}
.btn-small{padding:7px 10px; font-size:12px}
.empty-state{
  padding:28px 20px; text-align:center; border-top:1px solid var(--rule);
}
.empty-state h3{font-family:"Space Grotesk", sans-serif; font-size:16px; margin:8px 0 6px}
.empty-state p{color:var(--muted); font-size:13px; line-height:1.5; max-width:32ch; margin:0 auto 14px}
.empty-icon{width:40px; height:40px; display:grid; place-items:center; margin:0 auto; border:1px solid var(--rule); background:var(--paper); font-size:18px}

/* Detail column */
.detail-col{
  position:sticky; top:78px; align-self:start;
  background:var(--card); border:1px solid var(--rule); box-shadow:var(--shadow);
  min-height:520px;
}
.detail-placeholder{
  padding:24px; display:flex; flex-direction:column; min-height:520px;
}
.placeholder-card{
  border:1px dashed var(--rule); background:var(--paper); padding:22px; text-align:left;
}
.placeholder-icon{
  width:44px; height:44px; background:#fff; border:1px solid var(--rule); display:grid; place-items:center; color:var(--muted); margin-bottom:14px;
}
.detail-placeholder h3{
  font-family:"Space Grotesk", sans-serif; font-size:16px; margin:0 0 6px; letter-spacing:-.02em;
}
.detail-placeholder p{margin:0; font-size:13px; line-height:1.6; color:var(--muted); max-width:36ch}
.placeholder-hints{list-style:none; padding:0; margin:16px 0 0; display:flex; flex-direction:column; gap:8px}
.placeholder-hints li{font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:8px}
.hint-kbd{background:#fff; border:1px solid var(--rule); padding:2px 6px; font-size:10px; color:var(--ink)}
.placeholder-foot{
  margin-top:auto; padding-top:18px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.placeholder-foot .mono{
  font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}

.detail-wrap{padding:0}
.detail-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--rule); background:var(--paper);
}
.detail-header-left{display:flex; align-items:center; gap:10px; min-width:0}
.detail-kicker{
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
.detail-title{
  font-family:"Space Grotesk", sans-serif; font-size:20px; line-height:1.2; letter-spacing:-.02em; font-weight:700; margin:8px 0 0;
}
.detail-body{
  font-size:14px; line-height:1.65; color:var(--ink); margin:0; white-space:pre-wrap; border-top:1px solid var(--rule); padding:16px; background:#FFFEFB;
}
.detail-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.detail-cell{padding:12px 16px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); background:#fff}
.detail-cell:nth-child(2n){border-right:0}
.detail-cell:nth-last-child(-n+2){border-bottom:0}
.cell-label{font-family:"IBM Plex Mono", monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:4px}
.cell-value{font-size:13px; font-weight:600}
.status-control-wrap{
  padding:16px; background:var(--paper); border-bottom:1px solid var(--rule);
}
.status-control-wrap label{
  display:block; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;
}
.status-select{
  width:100%; padding:10px 12px; border:1px solid var(--rule); background:#fff; font-size:14px; font-weight:600;
}
.status-hint{font-size:12px; color:var(--muted); margin-top:8px}
.feedback{
  margin-top:10px; background:var(--ink); color:#fff; padding:8px 10px;
  font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; display:flex; align-items:center; gap:8px;
}
.feedback::before{content:""; width:6px; height:6px; background:#5FE19B; border-radius:50%; display:inline-block}
.detail-actions{padding:12px 16px; display:flex; gap:8px; flex-wrap:wrap}
.comments-note{font-size:12px; color:var(--muted); padding:0 16px 16px; font-family:"IBM Plex Mono", monospace}

/* Overlay for mobile */
.detail-overlay{
  position:fixed; inset:0; background:rgba(17,18,20,.42); backdrop-filter:blur(2px); z-index:30;
}

/* Log strip */
.log-strip{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); background:var(--ink); color:#B8B6AC}
.log-inner{max-width:1400px; margin:0 auto; padding:10px 24px; display:flex}
.log-item{display:flex; gap:12px; align-items:center; flex-wrap:wrap; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em}
.log-label{text-transform:uppercase; color:#fff; border:1px solid #2A2B2E; padding:4px 8px; background:#1A1B1E}
.log-value{opacity:.8}

/* Footer */
.site-footer{border-top:1px solid var(--rule); background:var(--paper-2)}
.footer-inner{max-width:1400px; margin:0 auto; padding:16px 24px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:"IBM Plex Mono", monospace; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.footer-links{display:flex; gap:16px; flex-wrap:wrap}

/* Toast */
.toast-stack{position:fixed; right:16px; bottom:16px; z-index:40; display:flex; flex-direction:column; gap:8px; pointer-events:none}
.toast{
  background:var(--ink); color:#fff; padding:12px 14px; font-size:13px; font-weight:600;
  border:1px solid #2A2B2E; box-shadow:var(--shadow); min-width:240px; display:flex; align-items:center; gap:10px;
  animation:toastIn .2s ease;
}
.toast::before{content:""; width:8px; height:8px; background:#5FE19B; border-radius:50%}
@keyframes toastIn{from{transform:translateY(6px); opacity:0} to{transform:translateY(0); opacity:1}}

/* Responsive */
@media(max-width:1100px){
  .workspace-inner{grid-template-columns:1fr}
  .detail-col{position:static; min-height:auto}
  .detail-placeholder{min-height:auto}
  .hero-inner{grid-template-columns:1fr}
  .hero-card{display:none}
}
@media(max-width:640px){
  .header-inner{padding:0 16px; height:56px}
  .header-nav{display:none}
  .filter-summary{display:none}
  .hero-inner{padding:20px 16px 16px}
  .hero-title{font-size:30px}
  .workspace-inner{padding:12px 12px 20px}
  .toolbar{grid-template-columns:1fr; }
  .queue-header{padding:14px 14px 0}
  .site-header{position:static}
  /* Mobile detail as dialog overlay */
  .detail-col{position:static}
  .detail-col.is-open{
    position:fixed; inset:0; z-index:35; overflow:auto; background:var(--card);
  }
  .detail-col.is-open .detail-placeholder{display:none}
}