@font-face { font-family: "Space Grotesk"; src: url("assets/space-grotesk.ttf") format("truetype"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("assets/dm-sans.ttf") format("truetype"); font-weight: 100 1000; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("assets/ibm-plex-mono.ttf") format("truetype"); font-weight: 400; font-display: swap; }

:root {
  --paper: #F2EFE7;
  --surface: #FAF8F3;
  --ink: #16181C;
  --muted: #5B5950;
  --hair: #CFC9BA;
  --accent: #B92F14;
  --accent-ink: #FFFFFF;
  --accent-lite: #FF7A57;
  --dark: #15171B;
  --dark-ink: #F2EFE7;
  --dark-muted: #AEB0B5;
  --dark-line: #3A3E46;
  --tint: #F6D9CF;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --pad: 32px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  min-height: 100vh;
  overflow-x: clip;
}
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
:focus { outline-color: var(--accent); }

.skip {
  position: absolute; left: var(--s4); top: -80px; z-index: 50;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4);
  min-height: 44px; display: inline-flex; align-items: center;
}
.skip:focus { top: var(--s2); }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--pad);
  border-bottom: 2px solid var(--ink);
  min-height: 72px;
}
.brand { display: flex; align-items: center; gap: var(--s3); font: 700 1.5rem/1 var(--display); letter-spacing: -0.03em; }
.mark { color: var(--ink); flex: none; }
.mark-fill { fill: var(--accent); }
.brand-sub {
  font: 400 0.75rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--ink); padding: 5px 8px; margin-left: var(--s1);
}
.team { font: 400 0.8125rem/1.3 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; text-align: right; }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: 5fr 7fr; border-bottom: 2px solid var(--ink); }
.tile { position: relative; }
.dark {
  background: var(--dark); color: var(--dark-ink);
  padding: var(--s5) var(--pad) var(--s5) var(--pad);
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s3);
  min-height: 340px;
}
.eyebrow { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dark-muted); }
.dark-body { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex: 1; }
.big { line-height: 0.74; margin-left: -0.05em; align-self: flex-end; }
.num {
  display: block;
  font: 700 clamp(9rem, 17vw, 16.5rem)/0.74 var(--display);
  letter-spacing: -0.06em;
  color: var(--accent-lite);
  font-variant-numeric: tabular-nums;
}
.rack-wrap { align-self: flex-end; }
.rack { display: grid; grid-template-columns: repeat(3, 48px); gap: 6px; }
.rack.enter li { animation: pop 0.4s var(--ease) both; }
.rack li:nth-child(1) { animation-delay: 60ms; } .rack li:nth-child(2) { animation-delay: 120ms; }
.rack li:nth-child(3) { animation-delay: 180ms; } .rack li:nth-child(4) { animation-delay: 240ms; }
.rack li:nth-child(5) { animation-delay: 300ms; } .rack li:nth-child(6) { animation-delay: 360ms; }
.rack li:nth-child(7) { animation-delay: 420ms; } .rack li:nth-child(8) { animation-delay: 480ms; }
.rack li:nth-child(9) { animation-delay: 540ms; } .rack li:nth-child(10) { animation-delay: 600ms; }
.rack li:nth-child(11) { animation-delay: 660ms; } .rack li:nth-child(12) { animation-delay: 720ms; }
.cell {
  width: 48px; height: 48px; padding: 5px 6px; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
  background: #1F2227; border: 1px solid var(--dark-line); color: var(--dark-ink);
  transition: transform 0.18s var(--ease), opacity 0.18s var(--ease), background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.cell .n { font: 400 0.6875rem/1 var(--mono); color: var(--dark-muted); }
.cell svg { align-self: flex-end; --cut: #1F2227; }
.cell.is-blocked { color: var(--accent-lite); border-color: var(--accent-lite); }
.cell.dim { opacity: 0.3; }
.cell.is-open { background: var(--dark-ink); color: var(--ink); border-color: var(--dark-ink); }
.cell.is-open svg { --cut: var(--dark-ink); }
.cell.is-open .n { color: var(--muted); }
.dark-cap { font: 400 0.875rem/1.4 var(--body); color: var(--dark-muted); }
.dark-cap b { color: var(--dark-ink); font-weight: 600; }

.status { padding: var(--s5) var(--pad) var(--s5); display: flex; flex-direction: column; gap: var(--s4); justify-content: space-between; }
.status-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.status h2 { font: 700 1.5rem/1.15 var(--display); letter-spacing: -0.02em; }
.hint { font-size: 0.875rem; color: var(--muted); }
.bar { display: flex; height: 32px; border: 2px solid var(--ink); background: var(--surface); }
.seg { flex: 1 1 0; min-width: 0; transition: flex-grow 0.28s var(--ease); border-left: 2px solid var(--ink); }
.seg:first-child { border-left: 0; }
.seg.st-todo { background: var(--surface); }
.seg.st-in-progress { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, var(--surface) 3px 8px); }
.seg.st-blocked { background: var(--accent); }
.seg.st-done { background: var(--ink); }
.seg.zero { border-left-width: 0; }

.legend { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--ink); }
.legend li:nth-child(even) { border-left: 2px solid var(--ink); }
.legend li:nth-child(n+3) { border-top: 2px solid var(--ink); }
.lg {
  width: 100%; min-height: 84px; background: transparent; border: 0; text-align: left;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--s3);
  padding: var(--s3) var(--s4);
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease), transform 0.16s var(--ease);
}
.lg .lab { font: 600 1rem/1.2 var(--display); }
.lg .sub { display: block; font: 400 0.6875rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.lg .cnt { font: 700 2.75rem/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.lg[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lg[aria-pressed="true"] .sub { color: var(--hair); }
.lg[aria-pressed="true"] svg { --cut: var(--ink); }
.lg:focus-visible { outline-offset: -5px; }

/* ---------- status glyph colours ---------- */
.glyph { flex: none; --cut: var(--paper); }
.st-blocked .glyph { color: var(--accent); }
.lg[aria-pressed="true"] .glyph { color: var(--paper); }
.lg.is-blocked[aria-pressed="true"] .glyph { color: var(--accent-lite); }

/* ---------- tasks ---------- */
.tasks { padding: var(--s7) 0 var(--s8); }
.tasks-inner { padding-inline: var(--pad); max-width: 1600px; margin-inline: auto; }
.tasks-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s5); }
.tasks-head h2 { font: 700 clamp(2.25rem, 4vw, 3.25rem)/1 var(--display); letter-spacing: -0.035em; }
.tasks-head h2:focus { outline: none; }
.tasks-head h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.count { font: 400 0.8125rem/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

.toolbar { display: grid; grid-template-columns: 1fr 220px 220px; gap: var(--s4); margin-bottom: var(--s6); }
.field { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.field label { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
input[type="search"], select {
  width: 100%; min-height: 48px; padding: 10px var(--s4);
  background: var(--surface); border: 2px solid var(--ink); border-radius: 0;
  font-size: 1rem; line-height: 1.3;
  transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
input[type="search"]::placeholder { color: var(--muted); opacity: 1; }
select {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
}
input[type="search"]:focus-visible, select:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 4px 4px 0 var(--ink); }
input[type="search"]:focus, select:focus { outline-color: var(--accent); }

.list-head, .open {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr) 170px 120px 110px 32px;
  column-gap: var(--s4);
  align-items: center;
}
.list-head {
  padding: 0 var(--s4) var(--s2);
  font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.list { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.row { border-top: 1px solid var(--hair); }
.row:first-child { border-top: 0; }
.open {
  width: 100%; min-height: 76px; padding: var(--s3) var(--s4);
  background: transparent; border: 0; text-align: left;
  transition: background-color 0.16s var(--ease), transform 0.16s var(--ease);
}
.open:focus-visible { outline-offset: -4px; background: var(--surface); }
.c-status { display: flex; align-items: center; gap: var(--s2); font: 500 0.9375rem/1.2 var(--display); }
.c-title { display: block; min-width: 0; }
.c-title .t { display: block; font: 600 1.0625rem/1.3 var(--display); letter-spacing: -0.01em; }
.c-title .m { display: block; margin-top: 4px; font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.04em; color: var(--muted); }
.c-who { display: flex; align-items: center; gap: var(--s2); font-size: 0.9375rem; min-width: 0; }
.ini {
  flex: none; width: 28px; height: 28px; display: inline-grid; place-items: center;
  border: 1.5px solid var(--ink); font: 500 0.6875rem/1 var(--mono); letter-spacing: 0.02em;
}
.c-due { font: 400 0.8125rem/1.3 var(--mono); }
.c-prio { display: flex; align-items: center; gap: var(--s2); font-size: 0.875rem; }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.bars i { width: 4px; background: var(--hair); display: block; }
.bars i:nth-child(1) { height: 6px; } .bars i:nth-child(2) { height: 10px; } .bars i:nth-child(3) { height: 14px; }
.bars i.on { background: var(--ink); }
.p-high .bars i.on { background: var(--accent); }
.c-go { font: 400 1.25rem/1 var(--display); justify-self: end; transition: transform 0.18s var(--ease); }
.row.st-blocked .c-status { color: var(--accent); }
.row.st-done .t { color: var(--muted); }
.row.st-done .c-status { color: var(--muted); }

.row.flash .open { animation: flash 1.4s var(--ease); }
.list.enter .row { animation: rise 0.4s var(--ease) both; }
.list.enter .row:nth-child(2) { animation-delay: 50ms; } .list.enter .row:nth-child(3) { animation-delay: 100ms; }
.list.enter .row:nth-child(4) { animation-delay: 150ms; } .list.enter .row:nth-child(5) { animation-delay: 200ms; }
.list.enter .row:nth-child(6) { animation-delay: 250ms; } .list.enter .row:nth-child(n+7) { animation-delay: 300ms; }

.empty { border: 2px solid var(--ink); padding: var(--s7) var(--s6); background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.empty[hidden] { display: none; }
.empty-big { font: 700 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--display); letter-spacing: -0.03em; }
.empty-text { max-width: 56ch; color: var(--muted); margin-bottom: var(--s3); }

/* ---------- buttons ---------- */
.btn {
  min-height: 48px; padding: 12px 24px; background: var(--ink); color: var(--paper);
  border: 2px solid var(--ink); border-radius: 0; font: 600 1rem/1.2 var(--display);
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.foot { border-top: 2px solid var(--ink); padding: var(--s5) var(--pad); font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }

/* ---------- detail dialog ---------- */
dialog {
  border: 0; padding: 0; margin: 0 0 0 auto;
  width: min(600px, 100%); max-width: 100%; height: 100dvh; max-height: 100dvh;
  background: var(--paper); color: var(--ink);
  border-left: 2px solid var(--ink);
}
dialog:not([open]) { display: none; }
dialog::backdrop { background: rgba(21, 23, 27, 0.6); }
dialog[open] { animation: slide 0.26s var(--ease); }
.d-inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.d-head {
  position: sticky; top: 0; z-index: 2; background: var(--paper);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  padding: var(--s3) var(--pad); border-bottom: 2px solid var(--ink); min-height: 64px;
}
.d-id { font: 400 0.75rem/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.d-close {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 8px 16px;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 0; font: 600 0.9375rem/1 var(--display);
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.d-main { padding: var(--s6) var(--pad) var(--s7); display: flex; flex-direction: column; gap: var(--s5); }
.d-title { font: 700 clamp(1.75rem, 3.4vw, 2.375rem)/1.1 var(--display); letter-spacing: -0.03em; }
.d-title:focus { outline: none; }
.d-title:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }

.d-status { border: 2px solid var(--ink); background: var(--surface); padding: var(--s4); display: grid; gap: var(--s3); }
.d-status .row2 { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--s3); }
.d-status label { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: var(--s2); }
.d-glyph { width: 48px; height: 48px; display: grid; place-items: center; border: 2px solid var(--ink); background: var(--paper); }
.d-glyph svg { --cut: var(--paper); }
.d-fb {
  min-height: 24px; font-size: 0.9375rem; line-height: 1.45; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding-left: var(--s3); border-left: 4px solid transparent;
}
.d-fb.on { border-left-color: var(--accent); }
.d-fb.pulse { animation: fb 0.9s var(--ease); }
.undo {
  min-height: 44px; padding: 8px 16px; background: transparent; border: 2px solid var(--ink); border-radius: 0; font: 600 0.9375rem/1 var(--display);
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease), color 0.16s var(--ease);
}

.d-meta { border-top: 2px solid var(--ink); }
.d-meta div { display: grid; grid-template-columns: 120px 1fr; gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.d-meta dt { font: 400 0.75rem/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.d-meta dd { font-size: 1rem; display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.tag { font: 400 0.75rem/1 var(--mono); border: 1px solid var(--ink); padding: 5px 8px; letter-spacing: 0.04em; }

.d-body-h, .d-log-h { font: 400 0.75rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3); }
.d-body p { max-width: 62ch; font-size: 1.0625rem; line-height: 1.65; }
.d-body p + p { margin-top: var(--s4); }
.d-body p.outcome { border-left: 4px solid var(--accent); padding: var(--s3) var(--s4); background: var(--surface); }
.d-body strong { font-weight: 700; }
.d-log li { display: flex; justify-content: space-between; gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--hair); font-size: 0.9375rem; }
.d-log time { font: 400 0.8125rem/1.5 var(--mono); color: var(--muted); }
.d-log .none { color: var(--muted); border-bottom: 0; padding-left: 0; }

/* ---------- hover (pointer devices only) ---------- */
@media (hover: hover) and (pointer: fine) {
  .cell:hover { transform: translateY(-2px); border-color: var(--dark-ink); }
  .lg:hover { background: var(--tint); }
  .lg[aria-pressed="true"]:hover { background: #2A2D33; }
  .open:hover { background: var(--surface); }
  .open:hover .c-go { transform: translateX(4px); color: var(--accent); }
  .open:hover .t { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 4px 4px 0 var(--ink); }
  .d-close:hover, .undo:hover { background: var(--ink); color: var(--paper); }
  input[type="search"]:hover, select:hover { background: #fff; }
}

/* ---------- press ---------- */
.cell:active, .lg:active, .btn:active, .d-close:active, .undo:active { transform: scale(0.97); }
.open:active { background: var(--tint); }

/* ---------- motion ---------- */
@keyframes pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slide { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0%, 35% { background: var(--tint); } 100% { background: transparent; } }
@keyframes fb { 0% { background: var(--tint); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; }
  dialog[open] { animation: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .list-head, .open { grid-template-columns: 136px minmax(0, 1fr) 150px 110px 32px; }
  .list-head span:nth-child(5), .c-prio { display: none; }
}

@media (max-width: 860px) {
  :root { --pad: 20px; }
  .top { flex-wrap: wrap; padding-block: var(--s3); }
  .team { text-align: left; }
  .bento { grid-template-columns: 1fr; }
  .dark { min-height: 300px; padding-block: var(--s4) var(--s5); }
  .num { font-size: clamp(8rem, 40vw, 11rem); }
  .rack { grid-template-columns: repeat(3, 44px); }
  .cell { width: 44px; height: 44px; padding: 4px 5px; }
  .status { border-top: 2px solid var(--ink); padding-block: var(--s5); }
  .lg { grid-template-columns: auto 1fr; min-height: 96px; padding: var(--s3); row-gap: 4px; }
  .lg .cnt { grid-column: 1 / -1; font-size: 2.25rem; }
  .tasks { padding-block: var(--s6) var(--s7); }
  .toolbar { grid-template-columns: 1fr 1fr; }
  .toolbar .grow { grid-column: 1 / -1; }
  .list-head { display: none; }
  .open {
    grid-template-columns: 1fr auto; grid-template-areas: "status due" "title title" "who prio";
    row-gap: var(--s2); padding: var(--s4) var(--s3);
  }
  .c-status { grid-area: status; } .c-due { grid-area: due; justify-self: end; }
  .c-title { grid-area: title; } .c-who { grid-area: who; }
  .c-prio { display: flex; grid-area: prio; justify-self: end; }
  .c-go { display: none; }
  dialog { width: 100%; border-left: 0; }
  .d-main { padding-top: var(--s5); }
  .d-meta div { grid-template-columns: 96px 1fr; }
}

@media (max-width: 420px) {
  .brand { font-size: 1.25rem; }
  .brand-sub { display: none; }
  .legend { grid-template-columns: 1fr 1fr; }
}