/* =====================================================================
   RELAY — dispatch console
   A dark petrol-ink operations console for a shared team task inbox.
   Work Sans (content) + IBM Plex Mono (IDs, metadata, dates).
   ===================================================================== */

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

:root {
  /* ground — deep petrol ink, not neutral black */
  --bg:        #0c1716;
  --bg-2:      #0a1312;
  --surface:   #11201f;
  --surface-2: #152826;
  --raised:    #1a3030;
  --hairline:  #213c39;
  --hairline-soft: #18302d;

  /* ink */
  --text:     #dde9e6;
  --text-2:   #9bb1ad;
  --text-3:   #82a09b;
  --text-4:   #4d6663;

  /* accent — warm signal amber, used sparingly */
  --accent:        #e6a648;
  --accent-press:  #c98c2f;
  --accent-soft:   rgba(230, 166, 72, 0.14);

  /* status signal palette */
  --s-todo:        #6f8a93;   /* slate */
  --s-todo-soft:  rgba(111, 138, 147, 0.16);
  --s-prog:        #e6a648;   /* amber */
  --s-prog-soft:  rgba(230, 166, 72, 0.16);
  --s-blocked:     #e07168;   /* rose */
  --s-blocked-soft: rgba(224, 113, 104, 0.16);
  --s-done:        #5cc28a;  /* sea green */
  --s-done-soft:  rgba(92, 194, 138, 0.15);

  /* priority markers */
  --p-high:   #e07168;
  --p-med:    #e6a648;
  --p-low:    #647a77;

  --ring:        rgba(230, 166, 72, 0.55);
  --ring-soft:   rgba(230, 166, 72, 0.18);

  /* type */
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 14px;

  --shadow-1: 0 1px 0 rgba(0,0,0,0.30), 0 1px 2px rgba(0,0,0,0.28);
  --shadow-2: 0 18px 40px -18px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  --shadow-panel: -22px 0 60px -20px rgba(0,0,0,0.75);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(120% 80% at 100% -10%, #0e2421 0%, transparent 55%),
    radial-gradient(90% 60% at -10% 110%, #0c1c1e 0%, transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* themed browser surfaces */
::selection { background: var(--accent-soft); color: #fff; }
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 3px;
}
* { scrollbar-width: thin; scrollbar-color: var(--hairline) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--hairline);
  border-radius: 20px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: #2c4c47; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

.skip {
  position: absolute; left: 12px; top: -44px; z-index: 100;
  padding: 8px 14px; background: var(--accent); color: #1a1206;
  font-weight: 600; border-radius: var(--r-sm); text-decoration: none;
  transition: top .15s var(--ease);
}
.skip:focus { top: 12px; }

/* ---------- shell ---------- */
.app {
  max-width: 1240px;
  margin: 0 auto;
  padding: 22px clamp(16px, 3vw, 40px) 28px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--hairline-soft);
}
.brand { display: flex; align-items: baseline; gap: 11px; }
.brand__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 7px;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid rgba(230,166,72,0.25);
  align-self: center;
}
.brand__word {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.34em;
  color: #eef5f3;
}
.brand__sub {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}
.topbar__meta { min-height: 18px; }
.meta-line {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--text-2);
  white-space: nowrap;
}
.meta-line .dot { color: var(--text-4); margin: 0 8px; }
.meta-line b { color: var(--text); font-weight: 600; }
.meta-line .accent { color: var(--accent); }

.main { flex: 1; min-width: 0; }

.footbar {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--text-4);
}
.footbar__note { letter-spacing: 0.06em; text-transform: none; }

/* ---------- console head ---------- */
.console__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
}
.console__title h1 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 33px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #f2f7f5;
}
.console__hint {
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--text-2);
  max-width: 46ch;
}
.tally {
  display: flex; gap: 6px; flex-wrap: wrap;
}
.tally__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--hairline-soft);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--text-2);
}
.tally__dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.tally__num { color: var(--text); font-weight: 600; }

/* ---------- controls ---------- */
.controls {
  display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 14px;
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--search { flex: 1 1 320px; min-width: 0; }
.field--filter { flex: 0 0 auto; }
.field__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.field__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.field--search { position: relative; }
.field__input {
  width: 100%;
  padding: 11px 38px 11px 38px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14.5px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.field__input::placeholder { color: var(--text-3); }
.field__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.field__input:hover { border-color: #2c4c47; }
.field__input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring-soft); background: var(--surface-2); outline: none; }
.field__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-3); font-size: 10px;
  background: transparent;
}
.field__clear:hover { color: var(--text); background: var(--raised); }

.select { position: relative; display: inline-block; }
.field__select {
  appearance: none; -webkit-appearance: none;
  padding: 11px 38px 11px 13px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  font-size: 14px;
  min-width: 168px;
  cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field__select:hover { border-color: #2c4c47; }
.field__select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring-soft); outline: none; }
.select__chevron { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }

/* ---------- legend ---------- */
.legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 0 2px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-3);
}
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }

/* ---------- list ---------- */
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.item {
  position: relative;
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 0 16px;
  align-items: stretch;
  background: var(--surface);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.item:hover { border-color: var(--hairline); background: var(--surface-2); }
.item:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring-soft); }

.item__rail { width: 4px; align-self: stretch; }
.item__body { padding: 14px 4px 14px 0; min-width: 0; }
.item__top { display: flex; align-items: flex-start; gap: 12px; }
.item__titlebtn {
  flex: 1 1 auto; min-width: 0;
  text-align: left;
  padding: 0;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  color: var(--text);
  border-radius: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.item__titlebtn:hover { color: #fff; }
.item__titlebtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.item__titlebtn .id { display: none; }

.item__meta {
  margin-top: 9px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--text-2);
}
.item__meta .seg { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.item__meta .seg .k { color: var(--text-4); text-transform: uppercase; font-size: 10px; letter-spacing: 0.14em; }
.item__meta .due.soon { color: var(--accent); }
.item__meta .due.over { color: var(--p-high); }
.item__meta .sep { color: var(--text-4); }

.item__tags { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 4px;
  background: var(--raised); color: var(--text-2);
  border: 1px solid var(--hairline-soft);
}
.prio {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-2);
}
.prio::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--p-low); }
.prio.high::before { background: var(--p-high); }
.prio.medium::before { background: var(--p-med); }

.item__side {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between;
  gap: 10px; padding: 14px 4px 14px 12px;
}
.item__comments {
  font-family: var(--mono); font-size: 11px; color: var(--text-3);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.item__comments svg { color: var(--text-4); }
.item__open {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.item__open:hover { color: #1a1206; background: var(--accent); border-color: var(--accent); }
.item__open svg { transition: transform .15s var(--ease); }
.item__open:hover svg { transform: translateX(2px); }
.item__open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* status rail colors */
.item[data-status="todo"] .item__rail { background: var(--s-todo); }
.item[data-status="in-progress"] .item__rail { background: var(--s-prog); }
.item[data-status="blocked"] .item__rail { background: var(--s-blocked); }
.item[data-status="done"] .item__rail { background: var(--s-done); }
.item[data-status="done"] .item__titlebtn { color: var(--text-2); }

/* ---------- empty ---------- */
.empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 12px; padding: 56px 20px;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-lg);
  background: rgba(17,32,31,0.5);
}
.empty__plate {
  width: 64px; height: 64px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); color: var(--text-3);
  border: 1px solid var(--hairline);
}
.empty h2 { margin: 0; font-size: 18px; font-weight: 600; color: var(--text); }
.empty p { margin: 0; color: var(--text-2); max-width: 40ch; }

.btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: var(--r-sm); font-size: 13px; font-weight: 600; transition: all .15s var(--ease); }
.btn--ghost { background: transparent; border: 1px solid var(--hairline); color: var(--text-2); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- detail dialog ---------- */
dialog.detail {
  margin: 0;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--text);
  max-width: 100vw; max-height: 100vh;
  width: 100%; height: 100%;
}
dialog.detail::backdrop {
  background: rgba(3, 9, 9, 0.62);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.detail__inner {
  margin-left: auto;
  width: min(520px, 100%);
  height: 100%;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border-left: 1px solid var(--hairline);
  box-shadow: var(--shadow-panel);
  display: flex; flex-direction: column;
  transform: translateX(0);
}
dialog.detail[open] .detail__inner { animation: slideIn .26s var(--ease); }
@keyframes slideIn { from { transform: translateX(28px); opacity: .2; } to { transform: translateX(0); opacity: 1; } }

.detail__head {
  display: flex; align-items: center; gap: 11px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hairline-soft);
  background: rgba(10,19,18,0.4);
}
.detail__signal { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--text-4); }
.detail__status {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-2);
  flex: 1 1 auto; min-width: 0;
}
.detail__close {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--hairline);
  color: var(--text-2);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: all .15s var(--ease);
}
.detail__close:hover { color: #fff; border-color: var(--accent); background: var(--accent-soft); }
.detail__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.detail__scroll { overflow-y: auto; padding: 22px 22px 28px; flex: 1 1 auto; }
.detail__id {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
  margin: 0 0 8px;
}
.detail__title {
  margin: 0;
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(22px, 3.4vw, 27px);
  line-height: 1.2; letter-spacing: -0.018em;
  color: #f2f7f5;
}

.detail__meta {
  margin: 18px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--hairline-soft);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md); overflow: hidden;
}
.detail__meta .cell { background: var(--surface); padding: 11px 13px; }
.detail__meta .k {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3); display: block; margin-bottom: 4px;
}
.detail__meta .v { font-size: 13.5px; color: var(--text); }
.detail__meta .v.mono { font-family: var(--mono); font-size: 12.5px; }
.detail__meta .v.due.soon { color: var(--accent); }
.detail__meta .v.due.over { color: var(--p-high); }
.detail__meta .tags { display: flex; flex-wrap: wrap; gap: 5px; }

.statusctl {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  margin-bottom: 8px;
}
.statusctl__label {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--text-3);
}
.select--inline .field__select { min-width: 200px; }

.feedback {
  min-height: 18px; margin-bottom: 18px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--s-done);
  display: flex; align-items: center; gap: 8px;
  transition: opacity .2s var(--ease);
}
.feedback.show { animation: fbIn .3s var(--ease); }
.feedback .ico { width: 14px; height: 14px; flex: 0 0 auto; }
@keyframes fbIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.detail__body { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.detail__body .lead { margin: 0 0 16px; color: var(--text); }
.detail__body .outcome {
  margin: 0; padding: 14px 16px;
  background: var(--accent-soft);
  border: 1px solid rgba(230,166,72,0.28);
  border-radius: var(--r-sm);
  color: #f3e9d4;
}
.detail__body .outcome .olabel {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #f5cf8e; margin-bottom: 7px;
  padding: 2px 7px; border-radius: 4px;
  background: rgba(230,166,72,0.12);
}

.detail__comments {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--hairline-soft);
  display: flex; align-items: center; gap: 10px;
  color: var(--text-2);
}
.detail__comments .num {
  font-family: var(--mono); font-weight: 600; color: var(--text); font-size: 15px;
}
.detail__comments .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }

/* signal colors for detail head + feedback */
.detail[data-status="todo"] .detail__signal { background: var(--s-todo); }
.detail[data-status="in-progress"] .detail__signal { background: var(--s-prog); }
.detail[data-status="blocked"] .detail__signal { background: var(--s-blocked); }
.detail[data-status="done"] .detail__signal { background: var(--s-done); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  padding: 11px 18px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--hairline);
  box-shadow: var(--shadow-2);
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em;
  color: var(--text); z-index: 200;
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: flex; align-items: center; gap: 9px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .item__body { padding: 12px 0 12px 0; }
  .item__side { padding: 12px 4px 12px 8px; }
  .item__open span { display: none; }
  .item__open { padding: 8px 10px; }
  .item__meta .seg .k { display: none; }
  .item__meta .sep { display: none; }
  .item__meta { gap: 6px 12px; }
}

@media (max-width: 620px) {
  .app { padding: 16px 14px 22px; gap: 14px; }
  .topbar { flex-wrap: wrap; }
  .brand__sub { display: none; }
  .topbar__meta { order: 3; flex-basis: 100%; }
  .console__head { margin-bottom: 12px; }
  .tally { width: 100%; }
  .controls { gap: 10px; }
  .field--filter { flex: 1 1 100%; }
  .field__select { width: 100%; min-width: 0; }
  .select { width: 100%; }
  .legend { display: none; }

  .item { grid-template-columns: 4px 1fr; }
  .item__side {
    order: 3; flex-direction: row; align-items: center; justify-content: space-between;
    grid-column: 2; padding: 0 0 12px; width: 100%;
  }
  .item__body { padding: 12px 0 6px; }
  .item__open span { display: inline; }

  .detail__inner { width: 100%; }
  .detail__meta { grid-template-columns: 1fr; }
  .footbar__note { display: none; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  dialog.detail[open] .detail__inner { animation: none; }
}