/* Pass & Joyce chat and task board. Tokens, login screens and top bar copied from
   office.passandjoyce.com so the two look the same. Fonts are in /fonts/fonts.css. */

:root {
  color-scheme: light;

  --paper-50: #fdfbf8;  --paper-100: #faf7f3; --paper-200: #f8f5f2;
  --paper-300: #efe9e0; --paper-400: #e2dacd; --paper-500: #cbc1b1;
  --ink-900: #14110f;   --ink-700: #2c2722;   --ink-600: #3d362f;  --ink-500: #5a5048;
  --ink-400: #7c7167;   --ink-300: #a0958a;   --ink-200: #c9bfb4;
  --brass-200: #d8c386; --brass-300: #c2a85e; --brass-400: #b08c3f; --brass-500: #8d6f2f; --brass-600: #6b5322;
  --oxblood-500: #8a3329;
  --sage-ink: #2d4a25;

  --font-display: 'Playfair Display', 'Iowan Old Style', Garamond, serif;
  --font-wordmark: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --edge: 20px;
  --foot: max(14px, env(safe-area-inset-bottom));
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0; background: var(--paper-200); color: var(--ink-900);
  font: 500 16px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
::selection { background: var(--brass-200); color: var(--ink-900); }
p, h1, h2 { margin: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
button, label, a, select { touch-action: manipulation; }   /* no double-tap zoom swallowing a second tap */
:is(button, input, select, textarea, a):focus-visible { outline: 2px solid var(--brass-400); outline-offset: 2px; }

/* ---- shared parts ---- */

.wordmark { font-family: var(--font-wordmark); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: var(--ink-900); }
.wordmark em { font-weight: 400; font-style: italic; color: var(--ink-400); margin: 0 0.15em; }
.eyebrow { font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-600); }
.sunburst { width: 220px; height: 22px; color: var(--brass-400); flex: none; }
.error { color: var(--oxblood-500); font-weight: 600; font-size: 14px; line-height: 1.45; }

.primary {
  width: 100%; height: 56px; border: 1px solid var(--ink-900); border-radius: 0; background: var(--ink-900); color: var(--paper-100);
  font: 600 13px var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 200ms;
}
/* Hovers as on passandjoyce.com: ink buttons turn brass, outline buttons turn ink. */
.primary:hover:not(:disabled) { background: var(--brass-500); color: var(--ink-900); border-color: var(--brass-500); }
.primary:active, .tool:active { transform: translateY(1px); }
.primary:disabled, .tool:disabled { opacity: 0.4; cursor: not-allowed; }

.link {
  display: inline-flex; align-items: center;
  border: 0; background: none; padding: 10px 0; min-height: 44px; cursor: pointer;
  font: 500 14px var(--font-sans); color: var(--ink-900);
  text-decoration: underline; text-decoration-color: var(--brass-400); text-decoration-thickness: 1px; text-underline-offset: 4px;
}
.link.danger { text-decoration-color: var(--oxblood-500); }
.link.danger { justify-content: center; }
/* Armed ("Sure?"): the red is painted outward with a shadow, so the button never moves or changes size. */
.link.danger[data-armed="1"] { color: var(--paper-100); background: var(--oxblood-500); box-shadow: -6px 0 0 var(--oxblood-500), 6px 0 0 var(--oxblood-500); text-decoration: none; }
.link.danger:disabled { opacity: 0.4; cursor: progress; }

.tool {
  height: 40px; padding: 0 14px; border: 1px solid var(--ink-900); border-radius: 0; background: var(--paper-50);
  font: 600 12px var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900); cursor: pointer; flex: none;
  transition: all 200ms;
}
.tool:hover:not(:disabled), .step:hover { background: var(--ink-900); color: var(--paper-100); }

.field, .composer textarea {
  height: 40px; padding: 0 12px; border: 1px solid var(--ink-900); border-radius: 0; background: var(--paper-50);
  font: 500 15px var(--font-sans); color: var(--ink-900); min-width: 0;
}
.field::placeholder, .composer textarea::placeholder { color: var(--ink-300); }

.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px var(--edge);
  background: var(--paper-300); border-bottom: 1px solid var(--paper-400);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--ink-700);
}
.notice::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--brass-500); flex: none; margin-top: 5px; }

/* ---- login ---- */

.gate {
  min-height: 100dvh; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 28px calc(20px + var(--foot));
}
.gate-hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 18px; padding-top: 40px; }
.gate-mark { width: 44px; height: 44px; object-fit: contain; }
.gate-mark.large { width: 64px; height: 64px; }
.gate-title { font-family: var(--font-display); font-weight: 700; font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; }
.gate-title.large { font-size: 48px; line-height: 1; letter-spacing: -0.025em; }
.gate-lead { font-size: 16px; line-height: 1.55; color: var(--ink-600); max-width: 32ch; font-weight: 400; overflow-wrap: anywhere; }
.gate-lead strong { color: var(--ink-900); font-weight: 700; }

.gate-form { display: flex; flex-direction: column; gap: 8px; padding-bottom: 16px; width: 100%; max-width: 420px; margin: 0 auto; }
.gate-form input {
  width: 100%; height: 54px; padding: 0 14px; border: 1px solid var(--ink-900); border-radius: 0; background: var(--paper-50);
  font: 500 17px var(--font-sans); color: var(--ink-900); appearance: none;
}
.gate-form input::placeholder { color: var(--ink-200); }
.gate-form .primary { margin-top: 8px; }
#code { font-family: var(--font-mono); font-size: 26px; letter-spacing: 0.28em; text-align: center; font-variant-numeric: tabular-nums; }
.gate-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.legal { text-align: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); }

/* ---- top bar ---- */

.desk { min-height: 100dvh; display: flex; flex-direction: column; }
.site-bar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 60px;
  padding: env(safe-area-inset-top) var(--edge) 0; background: var(--paper-100); border-bottom: 1px solid var(--ink-900); flex: none;
}
.site-brand { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; }
.bar-mark { width: 30px; height: 30px; object-fit: contain; }
/* Nav links as on passandjoyce.com: sentence case, right-aligned, 1px brass underline on hover and the current page. */
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; min-width: 0; }
.site-nav a {
  position: relative; padding: 6px 0; white-space: nowrap; text-decoration: none;
  font: 500 15.5px var(--font-sans); color: var(--ink-700);
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink-900); }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass-400);
}
.nav-menu #logout { font-size: 14px; }
@media (max-width: 560px) {
  .site-bar { gap: 14px; }
  .site-brand .wordmark { display: none; }
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 15px; }
}
@media (max-width: 420px) {
  .site-bar { gap: 10px; padding-left: 14px; padding-right: 14px; }
  .site-nav { gap: 10px; }
  .site-nav > a, .nav-more { font-size: 14.5px; }
}

.sheet { width: 100%; max-width: 1240px; margin: 0 auto; padding: 24px var(--edge) 72px; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.page-title { font-family: var(--font-display); font-weight: 700; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; }
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ---- chat ---- */

.chat { flex: 1; display: flex; flex-direction: column; max-width: 820px; padding-bottom: 0; }
.messages { list-style: none; margin: 0; padding: 0; flex: 1; }
.messages li { padding: 12px 0; border-top: 1px dashed var(--paper-500); }
.messages li:first-child { border-top: 0; }
.messages li.day { border: 0; padding: 20px 0 4px; text-align: center; }
.msg-head { display: flex; gap: 10px; align-items: baseline; }
.msg-name { font-weight: 700; font-size: 14px; }
.msg-time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-400); }
.msg-body { white-space: pre-wrap; overflow-wrap: anywhere; font-weight: 400; color: var(--ink-700); }

.composer {
  position: sticky; bottom: 0; display: flex; gap: 8px; align-items: flex-end;
  padding: 12px 0 calc(12px + var(--foot)); background: var(--paper-200); border-top: 1px solid var(--ink-900);
}
.composer textarea { flex: 1; resize: none; padding: 9px 12px; line-height: 1.4; max-height: 160px; }

/* ---- tasks ---- */

#task-title { width: 260px; }
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 760px) {
  .columns { grid-template-columns: 1fr; }
  #task-title { width: 100%; }
  #form-task { width: 100%; }
}
.column h2 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--ink-900); }
.column h2 .col-action { font: 500 13px var(--font-sans); letter-spacing: 0; text-transform: none; }
.cards { list-style: none; margin: 0; padding: 0; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 12px; margin-top: 10px; background: var(--paper-50); border: 1px solid var(--paper-400); }
.card-title { font-weight: 600; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.column[data-status="done"] .card-title { color: var(--ink-400); text-decoration: line-through; }
.card-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.card .field { height: 32px; font-size: 13px; padding: 0 8px; }
.card .link { min-height: 32px; padding: 4px 0; font-size: 13px; }
.card .link.danger { margin-left: auto; }
.empty-col { padding: 14px 0; font-size: 14px; color: var(--ink-400); font-weight: 400; }

/* ---- rooms, links, files, reactions ---- */

.chat .page-head { margin-bottom: 8px; }
.chat .page-title { font-size: 28px; overflow-wrap: anywhere; }
#room { max-width: 100%; }
.msg-body a { color: var(--ink-900); text-decoration-color: var(--brass-400); text-underline-offset: 3px; overflow-wrap: anywhere; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 6px 8px 0 0; padding: 6px 10px;
  border: 1px solid var(--paper-500); background: var(--paper-50); color: var(--ink-900); text-decoration: none; font-size: 13px;
}
a.chip:hover { border-color: var(--ink-900); }
.chip-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-600); flex: none; }
.chip-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-x { border: 0; background: none; padding: 0 2px; font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink-500); }
.files { display: flex; flex-wrap: wrap; align-items: flex-end; }
.thumb { display: block; margin: 6px 8px 0 0; border: 1px solid var(--paper-500); }
.thumb img { display: block; max-width: 240px; max-height: 180px; }

.reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.reaction {
  height: 28px; padding: 0 8px; border: 1px solid var(--paper-500); border-radius: 0; background: var(--paper-50);
  font: 600 12px var(--font-sans); color: var(--ink-700); cursor: pointer;
}
.reaction[aria-pressed="true"] { border-color: var(--brass-500); background: var(--paper-300); }
.reaction.add { color: var(--ink-400); border-style: dashed; }
.reaction.pick { font-size: 15px; }

.composer { flex-direction: column; align-items: stretch; }
.composer-row { display: flex; gap: 8px; align-items: flex-end; }
.pending { list-style: none; margin: 0; padding: 0 0 4px; display: flex; flex-wrap: wrap; }
.attach { display: inline-flex; align-items: center; }
#file:focus-visible + .attach { outline: 2px solid var(--brass-400); outline-offset: 2px; }

/* ---- stock ---- */

.field.num { width: 90px; }
.stock { width: 100%; border-collapse: collapse; background: var(--paper-50); border: 1px solid var(--paper-400); }
.stock th {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ink-900);
  font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-600);
}
.stock td { padding: 8px 12px; border-top: 1px dashed var(--paper-500); vertical-align: middle; }
/* #49: category sub-headings in the stock table. */
.stock tr.cat-head td { padding: 20px 12px 6px; border-top: 0; border-bottom: 1px solid var(--paper-500); }
.stock tr.cat-head:first-child td { padding-top: 10px; }
.stock tr.cat-head + tr td { border-top: 0; }
.stock tr.cat-head .when { font-size: 12px; }
.stock .field.num { height: 32px; width: 80px; font-size: 14px; padding: 0 8px; }
.item-name { font-weight: 600; }
.tag {
  margin-left: 8px; padding: 2px 6px; border: 1px solid var(--oxblood-500); color: var(--oxblood-500);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
}
.stock tr.low .qty .field { border-color: var(--oxblood-500); color: var(--oxblood-500); }
.qty { white-space: nowrap; }
.step { width: 32px; height: 32px; border: 1px solid var(--ink-900); background: var(--paper-50); font: 600 16px var(--font-sans); cursor: pointer; vertical-align: middle; }
.qty .field { margin: 0 4px; vertical-align: middle; }
.unit { margin-left: 6px; color: var(--ink-500); font-size: 14px; }
.when { font-family: var(--font-mono); font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.stock .link { min-height: 32px; padding: 4px 0; font-size: 13px; }

@media (max-width: 760px) {
  #form-stock .field:not(.num) { width: 100%; }
  .stock thead { display: none; }
  .stock, .stock tbody, .stock tr, .stock td { display: block; }
  .stock tr { padding: 10px 12px; border-top: 1px dashed var(--paper-500); }
  .stock td { border: 0; padding: 4px 0; }
  .stock tr.cat-head { padding: 18px 12px 0; border-top: 0; }
  .stock tr.cat-head td { padding: 0 0 4px; border-bottom: 1px solid var(--paper-500); }
  .stock td:nth-child(3)::before { content: "Low at "; font-size: 13px; color: var(--ink-500); }
  .people-page .stock td:nth-child(3)::before { content: "Admin "; }
  .people-page .stock td:nth-child(3) { display: flex; align-items: center; gap: 8px; }
}

/* ---- connect AI ---- */

.ai { max-width: 820px; }
.ai .lead { color: var(--ink-600); font-weight: 400; margin-bottom: 24px; }
.ai h2 { margin: 20px 0 8px; }
#key-setup { padding: 16px; margin-bottom: 12px; background: var(--paper-50); border: 1px solid var(--ink-900); }
#key-setup h2:first-of-type { margin-top: 12px; }
.snippet { display: flex; gap: 8px; align-items: flex-start; }
.snippet pre {
  flex: 1; min-width: 0; margin: 0; padding: 10px 12px; background: var(--paper-300); border: 1px solid var(--paper-400);
  font: 12px/1.5 var(--font-mono); white-space: pre-wrap; word-break: break-all; user-select: all;
}
.keys { list-style: none; margin: 0; padding: 0; }
.keys li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--paper-500); }
.keys .link { min-height: 32px; padding: 4px 0; font-size: 13px; }

#stock-link { width: 200px; }
.link-cell { white-space: nowrap; }
.link-cell a { margin-right: 10px; color: var(--ink-900); text-decoration-color: var(--brass-400); text-underline-offset: 3px; }
.link-cell .link { font-size: 13px; color: var(--ink-500); }
.link-cell .field { height: 32px; width: 220px; font-size: 13px; padding: 0 8px; }
@media (max-width: 760px) { #stock-link { width: 100%; } }

/* ---- people on tasks ---- */

.people { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.person {
  display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 10px;
  background: var(--paper-300); border: 1px solid var(--paper-500); font-size: 13px; font-weight: 600;
}
.person .chip-x { font-size: 16px; padding: 0 4px; }
.field.add-person { height: 32px; font-size: 13px; padding: 0 6px; width: auto; color: var(--ink-500); }
#form-task .person, #form-task .field.add-person { height: 40px; }

/* ---- stock prices ---- */

.price-cell { white-space: nowrap; min-width: 200px; }
/* The note is taken out of the flow so it can't push the box up out of line with its neighbours. */
.price-line { position: relative; display: flex; align-items: center; }
.pound { margin-right: 4px; color: var(--ink-500); }
.price-cell .field.num { width: 96px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.price-cell .link { margin-left: 8px; font-size: 13px; color: var(--ink-500); }
.price-from {
  position: absolute; top: 100%; left: 14px; margin-top: 3px;
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.2; color: var(--ink-400);
}
@media (max-width: 760px) {
  .price-cell { min-width: 0; }
  .price-line { flex-wrap: wrap; row-gap: 4px; }
  .price-from { position: static; flex-basis: 100%; margin: 0 0 0 14px; white-space: normal; }
}

/* ---- chats, edit/delete, formatting ---- */

.chat .page-actions { margin-left: auto; }
.new-chat { flex-basis: 100%; justify-content: flex-end; }
#room-delete .link { min-height: 32px; padding: 4px 0; font-size: 13px; }

.msg-flag { font-style: italic; font-size: 13px; color: var(--ink-400); font-weight: 400; }
p.msg-flag { margin-top: 2px; }
.msg-actions { margin-left: auto; display: inline-flex; gap: 12px; }
.msg-actions .link { min-height: 24px; padding: 0; font-size: 12px; color: var(--ink-500); }
.msg-body strong { font-weight: 700; color: var(--ink-900); }
.msg-body s { color: var(--ink-400); }

.edit { margin-top: 4px; }
.edit-box { width: 100%; height: auto; padding: 8px 12px; line-height: 1.4; resize: vertical; }
.edit-actions { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.edit-actions .link { min-height: 32px; padding: 0; font-size: 13px; }

.format-bar { display: flex; gap: 4px; padding-bottom: 6px; }
.fmt {
  width: 32px; height: 28px; border: 1px solid var(--paper-500); border-radius: 0; background: var(--paper-50);
  font: 15px var(--font-sans); color: var(--ink-700); cursor: pointer; transition: all 200ms;
}
.fmt:hover { background: var(--ink-900); color: var(--paper-100); border-color: var(--ink-900); }

/* ---- sign in with Google, people ---- */

a.primary { display: flex; align-items: center; justify-content: center; text-decoration: none; }
#google-login + #form-email:not([hidden]) { border-top: 1px solid var(--paper-400); padding-top: 18px; }
.tick { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-700); }
.tick input, .stock input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--ink-900); }
.people-page { max-width: 900px; }
.people-page .lead { color: var(--ink-600); font-weight: 400; margin-bottom: 16px; }
.stock tr.gone td { color: var(--ink-400); }
.stock tr.gone .item-name { text-decoration: line-through; }

/* ---- unread markers ---- */
.count {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 1px 5px; border-radius: 9px;
  background: var(--brass-500); color: var(--paper-50); font: 600 11px/16px var(--font-sans); text-align: center; vertical-align: 1px;
}
#notify[aria-pressed="true"] { color: var(--ink-900); }

/* ---- other people's messages, replies ---- */
.messages li.mine, .messages li.other { padding-left: 14px; padding-right: 14px; }
.messages li.other { background: var(--paper-300); }
.messages li.flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--brass-200); } }
.quote, .replying {
  display: flex; align-items: center; gap: 8px; max-width: 100%; margin: 4px 0 2px; padding: 3px 0 3px 10px;
  border: 0; border-left: 2px solid var(--brass-400); background: none; text-align: left;
  font: 400 13px var(--font-sans); color: var(--ink-500);
}
.quote { cursor: pointer; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.quote:hover { color: var(--ink-900); }
.quote-label { font-weight: 700; color: var(--ink-700); }
.replying { margin: 0 0 6px; }
.replying[hidden] { display: none; }
.replying .quote-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---- message box with live formatting, emoji, unread elsewhere ---- */
.rich {
  min-height: 40px; max-height: 160px; overflow-y: auto; padding: 9px 12px; line-height: 1.4;
  border: 1px solid var(--ink-900); background: var(--paper-50); font: 500 15px var(--font-sans); color: var(--ink-900);
  white-space: pre-wrap; overflow-wrap: anywhere; cursor: text;
}
.composer-row .rich { flex: 1; min-width: 0; }
.rich:focus-visible { outline: 2px solid var(--brass-400); outline-offset: 2px; }
.rich:empty::before { content: attr(data-placeholder); color: var(--ink-300); pointer-events: none; }
.rich b, .rich strong { font-weight: 700; }
.rich s, .rich strike { color: var(--ink-400); }
.rich.edit-box { height: auto; width: 100%; font-weight: 400; }
.fmt[aria-pressed="true"], .fmt[aria-expanded="true"] { background: var(--ink-900); color: var(--paper-100); border-color: var(--ink-900); }
.emoji-panel {
  display: grid; grid-template-columns: repeat(auto-fill, 36px); gap: 2px; max-width: 460px; margin-bottom: 8px; padding: 6px;
  border: 1px solid var(--paper-500); background: var(--paper-50);
}
.emoji-panel[hidden] { display: none; }
.emoji { width: 36px; height: 36px; border: 0; background: none; font-size: 20px; cursor: pointer; }
.emoji:hover { background: var(--paper-300); }
.elsewhere {
  display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 1px solid var(--brass-400);
  background: var(--paper-50); font: 600 13px var(--font-sans); color: var(--brass-600); cursor: pointer; white-space: nowrap;
}
.elsewhere::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-500); }
.elsewhere:hover { background: var(--brass-500); border-color: var(--brass-500); color: var(--paper-50); }
.elsewhere:hover::before { background: var(--paper-50); }
.elsewhere[hidden] { display: none; }

/* ---- emoji icon, attachments that expire, pinning ---- */
.fmt .icon { width: 18px; height: 18px; vertical-align: middle; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fmt .icon .dot { fill: currentColor; stroke: none; }
.file-item { display: inline-flex; flex-direction: column; align-items: flex-start; margin-right: 8px; max-width: 100%; }
.file-item .chip, .file-item .thumb { margin-right: 0; }
.file-meta { display: flex; gap: 10px; align-items: center; margin-top: 3px; font-size: 11.5px; color: var(--ink-400); }
.file-meta .link { min-height: 22px; padding: 0; font-size: 11.5px; color: var(--ink-500); }
.pin-pick { height: 30px; font-size: 13px; }
.chip.gone { color: var(--ink-400); border-style: dashed; background: none; }
.pending .keep { display: flex; align-items: center; margin: 6px 0 0 4px; }
.pending .keep .tick { font-size: 13px; }

/* ---- task status chip ---- */
.status { font-size: 12px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--paper-500); }
.status.doing { border-color: var(--brass-400); color: var(--brass-600); }
.status.done { color: var(--ink-400); }
a.card-title { display: block; color: var(--ink-900); text-decoration: none; }
a.card-title:hover { text-decoration: underline; text-decoration-color: var(--brass-400); text-underline-offset: 3px; }

/* ---- task page ---- */
.task-page .back { display: inline-block; margin-bottom: 8px; font-size: 13px; text-decoration: none; color: var(--ink-500); }
.task-page .back:hover { color: var(--ink-900); }
a.tool { display: inline-flex; align-items: center; text-decoration: none; }
.task-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 28px; }
.task-section { padding: 18px 0 26px; border-top: 1px solid var(--ink-900); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.section-actions { display: flex; align-items: center; gap: 12px; }
.lead.small { font-size: 13px; color: var(--ink-500); font-weight: 400; margin-bottom: 14px; }
.eyebrow.sub { margin: 18px 0 10px; color: var(--ink-500); }
.notes { color: var(--ink-700); line-height: 1.55; overflow-wrap: anywhere; }
.notes ul, .notes-box ul { margin: 4px 0; padding-left: 22px; }
.notes li::marker, .notes-box li::marker { color: var(--brass-500); }
.notes a { color: var(--ink-900); text-decoration-color: var(--brass-400); text-underline-offset: 3px; }
.notes s { color: var(--ink-400); }
.notes-box { min-height: 160px; max-height: none; white-space: normal; }
.notes-box div:empty { min-height: 1.4em; }
.photo-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.photo-grid .thumb { margin: 0; }
.photo-grid .thumb img { width: 100%; max-width: none; height: 180px; max-height: none; object-fit: cover; }
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 0; border-top: 1px dashed var(--paper-500); }
.doc-list .chip { margin: 0; }
.pin-controls { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin-top: 6px; }
.doc-list .pin-controls { margin-top: 0; flex: 1; }
.pin-controls .caption { flex: 1; min-width: 140px; height: 32px; font-size: 13px; }
.pin-buttons { display: inline-flex; gap: 4px; align-items: center; }
.pin-buttons .step { width: 28px; height: 28px; font-size: 14px; }
.pin-buttons .step:disabled { opacity: 0.3; cursor: default; }
.pin-buttons .link.danger { margin-left: 6px; font-size: 12px; }
.pin-controls .when { font-size: 11.5px; flex-basis: 100%; }

/* ---- mentions, mute, grouped messages ---- */
.mention { font-weight: 600; color: var(--brass-600); }
.mention.me { padding: 0 3px; background: var(--brass-200); color: var(--ink-900); }
.composer { position: sticky; }
.mention-list {
  position: absolute; bottom: 100%; left: 0; z-index: 30; min-width: 220px; margin: 0 0 -1px; padding: 4px 0; list-style: none;
  border: 1px solid var(--ink-900); background: var(--paper-50); box-shadow: 0 6px 18px rgba(20, 17, 15, 0.12);
}
.mention-list[hidden] { display: none; }
.mention-pick { display: block; width: 100%; padding: 8px 14px; border: 0; background: none; text-align: left; font: 500 14px var(--font-sans); color: var(--ink-900); cursor: pointer; }
.mention-pick:hover, .mention-pick[aria-selected="true"] { background: var(--paper-300); }
.mute { height: 40px; font-size: 13px; padding: 0 8px; max-width: 200px; }
.mute.on { border-color: var(--brass-400); color: var(--brass-600); }

/* ---- fixes from the screenshots ---- */
.fmt.wide { width: auto; padding: 0 10px; font-size: 13px; }
.section-actions label.tool { display: inline-flex; align-items: center; cursor: pointer; }
.task-page { max-width: 900px; }

/* ---- messages: hover tools, reactions, runs from the same person ---- */
.messages li { position: relative; }
.msg-body { margin: 2px 0 0; }
/* The tools float over the top-right corner, so they never push the message about. */
.msg-tools {
  position: absolute; top: -14px; right: 12px; z-index: 5; display: none; align-items: center; gap: 12px; padding: 3px 10px;
  border: 1px solid var(--paper-500); background: var(--paper-50); box-shadow: 0 2px 8px rgba(20, 17, 15, 0.08);
}
.msg-tools .link { min-height: 26px; padding: 0; font-size: 12px; color: var(--ink-600); }
.msg-tools .link:hover { color: var(--ink-900); }
.tool-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; background: none; color: var(--ink-600); cursor: pointer; }
.tool-icon:hover, .tool-icon[aria-expanded="true"] { color: var(--brass-600); }
.tool-icon .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.tool-icon .icon .dot { fill: currentColor; stroke: none; }
.messages li.active .msg-tools, .msg-tools:focus-within, .msg-tools:has([data-armed="1"]) { display: flex; }
@media (hover: hover) { .messages li:hover .msg-tools { display: flex; } }
.messages li:first-child .msg-tools, .messages li.day + li .msg-tools { top: 4px; }
.react-pick {
  position: absolute; top: calc(100% + 4px); right: -1px; display: flex; gap: 2px; padding: 4px;
  border: 1px solid var(--paper-500); background: var(--paper-50); box-shadow: 0 6px 18px rgba(20, 17, 15, 0.12);
}
.react-choice { width: 36px; height: 36px; border: 0; background: none; font-size: 20px; cursor: pointer; border-radius: 50%; transition: transform 100ms; }
.react-choice:hover { background: var(--paper-300); transform: scale(1.15); }
.reactions { gap: 4px; margin-top: 6px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border: 1px solid var(--paper-400); border-radius: 12px;
  background: var(--paper-50); font: 600 12px var(--font-sans); color: var(--ink-600); cursor: pointer;
}
.reaction-emoji { font-size: 14px; line-height: 1; }
.reaction:hover { border-color: var(--ink-400); }
.reaction[aria-pressed="true"] { border-color: var(--brass-400); background: var(--brass-200); color: var(--ink-900); }
/* A run of messages from one person reads as one block: no name, no divider, the time small at the right. */
.messages li.cont { border-top: 0; padding-top: 0; }
.messages li:has(+ li.cont) { padding-bottom: 3px; }
.cont-time { float: right; margin: 3px 0 0 12px; font-size: 10.5px; color: var(--ink-300); }
.messages li.cont:hover .cont-time { color: var(--ink-500); }
.messages li.cont .msg-body { margin-top: 0; }
.messages li.cont::after { content: ""; display: block; clear: both; }
.messages li.cont .msg-tools { top: -16px; }

/* ---- phones ---- */
.narrow-only { display: none; }
.tool .icon, .attach .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 560px) {
  .wide-only { display: none; }
  .narrow-only { display: inline; }
  svg.narrow-only { display: block; }
  /* 16px stops iPhones zooming in when a box is tapped. */
  .field, .rich, select, input, textarea { font-size: 16px; }
  .stock .field.num { font-size: 16px; }

  /* Chat header: the chat list already names the chat, so no big title. One row to pick a chat, one small row for the rest. */
  #page-chat .page-title { display: none; }
  #page-chat .page-head { gap: 8px; margin-bottom: 10px; }
  #page-chat .page-actions { width: 100%; gap: 8px; justify-content: flex-start; }
  #page-chat .page-actions::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  #room { order: 1; flex: 1 1 0; min-width: 0; }

  /* Message box: icon buttons either side so the text gets the room. */
  .composer-row { gap: 6px; }
  .composer .attach, .composer .send { display: inline-flex; align-items: center; flex: none; width: 44px; height: 42px; padding: 0; justify-content: center; }
  .composer .rich { min-height: 42px; padding: 9px 10px; }
  .format-bar { padding-bottom: 4px; }
  .fmt { height: 30px; width: 34px; }

  .messages li.mine, .messages li.other { padding-left: 12px; padding-right: 12px; }
  .msg-tools { right: 6px; gap: 10px; }
  .msg-tools .link { min-height: 30px; font-size: 13px; }
  .tool-icon { width: 30px; height: 30px; }
  .react-pick { right: -6px; }
  .react-choice { width: 40px; height: 40px; }
  .emoji-panel { grid-template-columns: repeat(auto-fill, 40px); }
  .emoji { width: 40px; height: 40px; }
}

/* ---- each chat's task board: beside the chat on wide screens, a drawer otherwise ---- */

.chat-layout { flex: 1; display: flex; justify-content: center; align-items: stretch; width: 100%; max-width: 1480px; margin: 0 auto; }
.chat-layout > .chat { margin: 0; min-width: 0; }
.board-toggle[aria-expanded="true"] { background: var(--ink-900); color: var(--paper-100); }
.board {
  width: 360px; flex: none; align-self: flex-start; position: sticky; top: 60px;
  max-height: calc(100dvh - 60px); overflow: auto; overscroll-behavior: contain;
  padding: 24px var(--edge) 32px; border-left: 1px solid var(--paper-400); background: var(--paper-100);
}
.board h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.15; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.board-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.board-close { flex: none; width: 36px; height: 36px; border: 1px solid var(--paper-500); background: none; font-size: 22px; line-height: 1; color: var(--ink-600); cursor: pointer; }
.board-close:hover { border-color: var(--ink-900); color: var(--ink-900); }
.board-add { display: flex; gap: 6px; margin-bottom: 18px; }
.board-add .field { flex: 1; min-width: 0; }
.board-group { margin-bottom: 16px; }
.board-group > .eyebrow { display: block; padding-bottom: 6px; border-bottom: 1px solid var(--ink-900); }
.board-done summary { cursor: pointer; list-style-position: inside; }
.board-list { list-style: none; margin: 0; padding: 0; }
.board-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--paper-500); }
.board-open-task { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: var(--ink-900); }
.board-item-title { font-weight: 600; font-size: 14px; overflow-wrap: anywhere; }
.board-open-task:hover .board-item-title { color: var(--brass-600); text-decoration: underline; }
.board-item.done .board-item-title { color: var(--ink-400); text-decoration: line-through; }
.status-pick { flex: none; height: 32px; padding: 0 4px; font-size: 12px; width: 82px; }
.board-back { margin-top: 6px; }
.board-task-title { margin: 2px 0 12px; }
.board-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.board-meta .field { height: 36px; }
.board-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 18px; }
.board-notes { font-weight: 400; color: var(--ink-700); overflow-wrap: anywhere; margin-bottom: 16px; }
.board-notes ul { margin: 2px 0; padding-left: 20px; }
.board-files { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.board-files li { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.board-files .thumb img { width: 100%; max-width: none; height: 110px; object-fit: cover; }
.board-files li:has(.chip) { grid-column: 1 / -1; }
.board-pick { max-width: 100%; }

@media (max-width: 1099px) {
  .board {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(400px, 100%); max-height: none; align-self: auto;
    padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: calc(24px + env(safe-area-inset-bottom));
    border-left: 1px solid var(--ink-900); box-shadow: -12px 0 32px rgba(20, 17, 15, 0.18);
  }
}
@media (max-width: 560px) {
  .board { width: 100%; border-left: 0; box-shadow: none; }
  body.board-open { overflow: hidden; }
  .board-close { width: 44px; height: 44px; }
}

/* #12 in a message: the task's title as a link that opens it on the board */
.task-ref {
  display: inline; padding: 0 5px; margin: 0 1px; border: 1px solid var(--brass-300); background: var(--paper-50);
  font: inherit; font-weight: 600; color: var(--brass-600); cursor: pointer; overflow-wrap: anywhere; text-align: left;
}
.task-ref:hover { background: var(--brass-200); color: var(--ink-900); }
.task-ref.done { color: var(--ink-400); border-color: var(--paper-500); text-decoration: line-through; }
.task-pick .pick-id { font-family: var(--font-mono); font-size: 12px; color: var(--brass-600); }
.task-pick .when { font-size: 12px; }
.card-row .board-pick { max-width: 150px; }

/* ---- task filters ---- */
.task-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin: -6px 0 22px; padding: 12px 14px;
  border: 1px solid var(--paper-500); background: var(--paper-50);
}
.task-filters .filter { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.task-filters .filter.grow { flex: 1; min-width: 180px; max-width: 340px; }
.task-filters .field { height: 36px; }
.task-filters .when { margin-left: auto; align-self: center; font-family: var(--font-mono); font-size: 12px; }
.task-filters .link { align-self: center; min-height: 32px; font-size: 13px; }
@media (max-width: 560px) {
  .task-filters { padding: 10px; gap: 8px; }
  .task-filters .filter { flex: 1 1 45%; min-width: 0; }
  .task-filters .filter.grow { flex-basis: 100%; max-width: none; }
}

/* ---- comments under a task ---- */
.comment-count:not(:empty) { margin-left: 4px; color: var(--ink-500); }
.comment-list { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.comment { padding-left: 38px; position: relative; }
.comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.comment .avatar {
  position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center;
  background: var(--ink-900); color: var(--paper-100); font-size: 13px; font-weight: 700;
}
.comment-body { margin: 2px 0 0; color: var(--ink-700); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.comment-tools { display: inline-flex; gap: 10px; margin-left: auto; }
.comment-tools .link { min-height: 24px; padding: 0; font-size: 12px; }
.comment-add .rich { min-height: 64px; max-height: 240px; overflow-y: auto; padding: 10px 12px; }
.comment-add .edit-actions { justify-content: flex-end; }
.comment-add .edit-actions .when { margin-right: auto; font-size: 12px; }
@media (max-width: 560px) { .comment-add .edit-actions .when { display: none; } }
.board .comments { font-size: 14px; }
.board .comment { padding-left: 32px; }
.board .comment .avatar { width: 24px; height: 24px; font-size: 12px; }

/* ---- jump to the latest message ---- */
.jump-bottom {
  position: absolute; left: 50%; top: -56px; transform: translateX(-50%); width: 42px; height: 42px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ink-900); border-radius: 999px; background: var(--paper-50); color: var(--ink-900); cursor: pointer;
  box-shadow: 0 4px 14px rgb(20 18 14 / 0.12);
}
.jump-bottom[hidden] { display: none; }
.jump-bottom:hover { background: var(--ink-900); color: var(--paper-100); }
.jump-bottom .icon { width: 20px; height: 20px; }
.jump-bottom.new::after {
  content: ""; position: absolute; top: 2px; right: 2px; width: 10px; height: 10px; border-radius: 999px;
  background: var(--brass-400); border: 2px solid var(--paper-50);
}

/* ---- dragging cards ---- */
.card { cursor: grab; }
.card-top { display: flex; align-items: flex-start; gap: 8px; }
.card-top .card-title { flex: 1; min-width: 0; }
.drag-handle {
  flex: none; width: 28px; height: 28px; margin: -4px -6px 0 0; padding: 0; border: 0; background: none; color: var(--ink-300);
  font-size: 16px; line-height: 1; cursor: grab; touch-action: none;
}
.drag-handle:hover, .drag-handle:focus-visible { color: var(--ink-900); }
.card.dragging { opacity: 0.35; }
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; margin: 0; pointer-events: none; cursor: grabbing;
  box-shadow: 0 14px 30px rgb(20 18 14 / 0.2); border-color: var(--ink-900);
}
.column { transition: background-color 0.12s; }
.column.drop-target { background: var(--paper-300); outline: 2px dashed var(--brass-400); outline-offset: 4px; }
@media (min-width: 761px) { .column { min-height: 55vh; } }

/* ---- tags ---- */
.tags { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tag {
  --tag: var(--brass-400); --tag-ink: var(--ink-900);
  display: inline-flex; align-items: center; gap: 2px; padding: 1px 8px; border-radius: 999px; background: var(--tag); color: var(--tag-ink);
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; line-height: 18px; white-space: nowrap;
}
.tag .chip-x { color: inherit; opacity: 0.7; min-width: 18px; height: 18px; padding: 0; font-size: 14px; }
.tag .chip-x:hover { opacity: 1; }
.tag-brass { --tag: #e8d9a8; --tag-ink: #4f3d17; }
.tag-oxblood { --tag: #f0cfc9; --tag-ink: #6e1f17; }
.tag-sage { --tag: #d3e3cc; --tag-ink: #2d4a25; }
.tag-sky { --tag: #cfe0ef; --tag-ink: #1d4061; }
.tag-plum { --tag: #e2d3ea; --tag-ink: #4c2860; }
.tag-rose { --tag: #f4d6e1; --tag-ink: #6d2443; }
.tag-slate { --tag: #dcdcd8; --tag-ink: #3a3a36; }
.tag-ink { --tag: #24221e; --tag-ink: #f6f2ea; }
.tag-glimmer {
  --tag: #00e5ff; --tag-ink: #002a33;
  background: linear-gradient(110deg, #00e5ff 0%, #00e5ff 40%, #b8fbff 50%, #00e5ff 60%, #00e5ff 100%) 0 0 / 250% 100%;
  box-shadow: 0 0 6px rgb(0 229 255 / 0.55);
  animation: glimmer 3.2s ease-in-out infinite;
}
@keyframes glimmer { 0%, 30% { background-position: 100% 0; } 70%, 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .tag-glimmer { animation: none; } }
.tag-edit { position: relative; }
.tag-add {
  height: 22px; padding: 0 9px; border: 1px dashed var(--ink-400); border-radius: 999px; background: none; color: var(--ink-700);
  font: inherit; font-size: 12px; cursor: pointer;
}
.tag-add:hover, .tag-add[aria-expanded="true"] { border-style: solid; border-color: var(--ink-900); color: var(--ink-900); }
.tag-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(320px, calc(100vw - 32px));
  padding: 12px; background: var(--paper-50); border: 1px solid var(--ink-900); box-shadow: 0 10px 28px rgb(20 18 14 / 0.16);
  display: flex; flex-direction: column; gap: 10px;
}
.tag-menu-head { display: flex; justify-content: space-between; align-items: center; }
.tag-menu-head .link { min-height: 28px; font-size: 13px; }
.tag-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.tag-options li { display: flex; align-items: center; gap: 8px; }
.tag-options .when { font-size: 11px; min-width: 14px; }
.tag-options .link.danger { margin-left: auto; min-height: 28px; font-size: 12px; }
.tag-tick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.tag-new { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--paper-400); }
.tag-new .field { height: 34px; }
.tag-new-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tag-new-row .tool { height: 34px; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 2px solid transparent; background: var(--tag); cursor: pointer;
  box-shadow: inset 0 0 0 1px rgb(20 18 14 / 0.15);
}
.swatch[aria-checked="true"] { border-color: var(--ink-900); box-shadow: inset 0 0 0 2px var(--paper-50); }
.swatch.small { width: 16px; height: 16px; border-width: 1px; flex: none; }
.card .tags { margin-top: -2px; }
.board-item-title + .tags { margin: 3px 0 1px; }

/* ---- task settings ---- */
.task-settings { position: relative; }
.settings-menu {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 6px); width: min(300px, calc(100vw - 32px));
  padding: 14px; background: var(--paper-50); border: 1px solid var(--ink-900); box-shadow: 0 10px 28px rgb(20 18 14 / 0.16);
  display: flex; flex-direction: column; gap: 12px;
}
.settings-menu .filter { display: flex; flex-direction: column; gap: 4px; }
.settings-menu .field { height: 36px; width: 100%; max-width: none; }
.settings-menu .when { font-size: 12px; margin: -4px 0 0; white-space: normal; line-height: 1.4; }
.settings-foot { display: flex; justify-content: flex-end; gap: 18px; border-top: 1px solid var(--paper-400); padding-top: 10px; }
.board .settings-toggle { height: 32px; font-size: 11px; padding: 0 10px; }
.board .board-meta { position: relative; }
.jump-bottom .icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.card.dragging, .drag-ghost { user-select: none; }
.board .comment-add .edit-actions .when { display: none; }

/* ---- hint over the message box ---- */
.compose-hint { margin-left: auto; align-self: center; font-size: 12px; color: var(--ink-500); white-space: nowrap; }
.compose-hint kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; border: 1px solid var(--paper-500); background: var(--paper-50);
  font-family: var(--font-mono); font-size: 11px; line-height: 16px; text-align: center; color: var(--brass-600);
}

/* ---- click a task's title to rename it ---- */
.task-heading { flex: 1; min-width: 0; }
.editable-title { cursor: text; border-bottom: 1px dashed transparent; }
.editable-title:hover { border-bottom-color: var(--brass-400); }
.title-input { width: 100%; height: auto; padding: 2px 8px; margin: -3px 0; line-height: 1.2; }
.card-title { -webkit-touch-callout: none; }
.card.lifting { border-color: var(--ink-900); box-shadow: 0 6px 18px rgb(20 18 14 / 0.16); transition: box-shadow 0.15s; }
@media (max-width: 760px) { .column { min-height: 140px; } .columns { padding-bottom: 40px; } }

/* ---- task numbers (type #12 in a message to link one) ---- */
.task-num { flex: none; font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--brass-600); }
.card-top .task-num { padding-top: 2px; }
.board-item-title .task-num { margin-right: 2px; }
.task-eyebrow { margin: 4px 0 6px; }

/* ---- chats down the left, like channels ---- */
.channels {
  width: 230px; flex: none; align-self: flex-start; position: sticky; top: 60px;
  max-height: calc(100dvh - 60px); overflow: auto; overscroll-behavior: contain;
  padding: 24px 12px 32px var(--edge); border-right: 1px solid var(--paper-400);
}
.channels-head { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 0 10px; margin-bottom: 8px; }
.channel-add {
  width: 26px; height: 26px; padding: 0; border: 1px solid transparent; background: none; color: var(--ink-500);
  font-size: 20px; line-height: 1; cursor: pointer;
}
.channel-add:hover { border-color: var(--ink-900); color: var(--ink-900); }
.channel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.channel {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px; color: var(--ink-500); text-decoration: none;
  font-size: 15px; font-weight: 500; border-left: 3px solid transparent;
}
.channel:hover { background: var(--paper-300); color: var(--ink-900); }
.channel[aria-current="page"] { background: var(--paper-300); color: var(--ink-900); font-weight: 700; border-left-color: var(--brass-400); }
.channel.unread { color: var(--ink-900); font-weight: 700; }
.channel.muted { opacity: 0.5; }
.channel-hash { font-family: var(--font-mono); font-size: 16px; color: var(--ink-300); width: 12px; text-align: center; }
.channel[aria-current="page"] .channel-hash, .channel.unread .channel-hash { color: var(--brass-500); }
.channel-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-badge {
  flex: none; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--oxblood-500); color: var(--paper-50);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
/* With the list showing, the drop-down, its New chat button and "N new in…" aren't needed. */
@media (min-width: 900px) {
  #page-chat #room, #page-chat #elsewhere, #page-chat #room-new { display: none; }
}
@media (max-width: 899px) { .channels { display: none; } }
.card .card-status { display: none; }
@media (max-width: 760px) { .card .card-status { display: block; width: 100%; } }

/* ---- chat and tasks on one page (#3) ---- */
.tasks-pane { flex: 1; min-width: 0; padding: 24px var(--edge) 48px; container-type: inline-size; }
.tasks-pane[hidden] { display: none; }
.pane-head { align-items: center; }
.pane-title { font-size: 28px; flex: 1; min-width: 0; }
.pane-back { display: none; min-height: 36px; font-size: 14px; }
.tasks-pane #task-title { width: 220px; }
@media (min-width: 1100px) {
  .pane-open .chat-layout { max-width: none; }
  .pane-open .chat-layout > .chat { flex: 0 0 var(--chat-w, 440px); max-width: var(--chat-w, 440px); }
  .tasks-pane {
    position: sticky; top: 60px; align-self: flex-start; height: calc(100dvh - 60px); overflow: auto; overscroll-behavior: contain;
    border-left: 1px solid var(--paper-400); background: var(--paper-100);
  }
  .tasks-pane .column { min-height: 40vh; }
}
/* Narrower: the chat or the tasks, one at a time. */
@media (max-width: 1099px) {
  .pane-open #page-chat > .chat { display: none; }
  .pane-back { display: inline-flex; align-items: center; }
  .tasks-pane { padding-top: 16px; }
}
@container (max-width: 700px) {
  .tasks-pane .columns { grid-template-columns: 1fr; }
  .tasks-pane .column { min-height: 120px; }
  .tasks-pane .card .card-status { display: block; width: 100%; }
  .tasks-pane #form-task, .tasks-pane #task-title { width: 100%; }
}

/* The task drawer (from a #12 link) sits over the page at every width. */
.board {
  position: fixed; top: 60px; right: 0; bottom: 0; z-index: 40; width: min(420px, 100%); max-height: none; align-self: auto;
  border-left: 1px solid var(--ink-900); box-shadow: -12px 0 32px rgba(20, 17, 15, 0.18);
}
.board-head .eyebrow { align-self: center; }

/* Status icons on a task: to do, in progress, done. */
.status-icons { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border: 1px solid var(--paper-500); background: var(--paper-50); }
.status-icon {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; min-width: 34px; padding: 0 7px; border: 0; background: none;
  color: var(--ink-300); font: 600 13px var(--font-sans); cursor: pointer;
}
.status-icon .icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.status-icon .icon .fill { fill: currentColor; stroke: none; }
.status-icon:hover { color: var(--ink-900); background: var(--paper-300); }
.status-icon[aria-pressed="true"] { color: var(--ink-900); background: var(--paper-300); cursor: default; padding-right: 10px; }
.status-icon.doing[aria-pressed="true"] { color: var(--brass-600); }
.status-icon.done[aria-pressed="true"] { color: var(--sage-ink); }
.board-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Suggestions in a comment box open above it. */
.comment-add { position: relative; }

/* In the 440px chat beside the board: a smaller title, and the header buttons share one row. */
@media (min-width: 1100px) {
  .pane-open .chat .page-head { gap: 8px; flex-wrap: wrap; }
  .pane-open .chat .page-title { font-size: 26px; }
  .pane-open .chat .page-actions { gap: 6px; flex-wrap: nowrap; }
}

/* Deleted tasks, kept for 14 days. */
.task-history { margin-top: 24px; border-top: 1px solid var(--paper-400); padding-top: 12px; }
.task-history[hidden] { display: none; }
.task-history summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); width: max-content; }
.task-history ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.history-item { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border: 1px dashed var(--paper-400); background: var(--paper-50, transparent); }
.history-title { flex: 1; min-width: 140px; color: var(--ink-500); text-decoration: line-through; text-decoration-color: var(--paper-400); }
.history-title.kept { color: var(--ink-700); text-decoration: none; }
.history-title.kept:hover { text-decoration: underline; }
.history-item .tool { min-height: 32px; }

/* ---- Settings menu in the top bar (Connect AI, People, Log out) ---- */
.nav-more-wrap { position: relative; }
.nav-more {
  position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 6px 0; border: 0; background: none; cursor: pointer;
  font: 500 15.5px var(--font-sans); color: var(--ink-700); white-space: nowrap;
}
.nav-more .caret { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.nav-more[aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav-more:hover, .nav-more.current, .nav-more[aria-expanded="true"] { color: var(--ink-900); }
.nav-more:hover::after, .nav-more.current::after {
  content: ""; position: absolute; left: 0; right: 16px; bottom: 0; height: 1px; background: var(--brass-400);
}
.nav-menu {
  position: absolute; right: 0; top: calc(100% + 14px); z-index: 50; min-width: 190px; padding: 4px 0;
  display: flex; flex-direction: column; border: 1px solid var(--ink-900); background: var(--paper-50); box-shadow: 0 10px 28px rgba(20, 17, 15, 0.14);
}
.nav-menu[hidden] { display: none; }
.site-nav .nav-menu a, .nav-menu-item {
  display: block; width: 100%; padding: 11px 16px; border: 0; border-left: 2px solid transparent; background: none; cursor: pointer;
  text-align: left; text-decoration: none; font: 500 14px var(--font-sans); color: var(--ink-700);
}
.site-nav .nav-menu a::after { content: none; }
.site-nav .nav-menu a:hover, .nav-menu-item:hover, .nav-menu a:focus-visible, .nav-menu-item:focus-visible { background: var(--paper-200); color: var(--ink-900); }
.site-nav .nav-menu a[aria-current="page"] { border-left-color: var(--brass-400); color: var(--ink-900); }
.site-nav .nav-menu a[hidden] { display: none; }
.nav-menu-item { border-top: 1px solid var(--paper-400); margin-top: 4px; }
@media (max-width: 560px) { .nav-more { font-size: 15px; } }

/* ---- chat / board divider (wide): drag to resize, button for a full-width chat ---- */
.pane-split, .pane-show, .chat-tabs { display: none; }
.pane-split {
  position: sticky; top: 60px; align-self: flex-start; flex: 0 0 14px; height: calc(100dvh - 60px); margin: 0 -7px; z-index: 6;
  cursor: col-resize; touch-action: none; outline: none;
}
.pane-split::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: transparent; transition: background 0.15s, width 0.15s;
}
.pane-split:hover::before, .pane-split:focus-visible::before, .resizing .pane-split::before { width: 3px; background: var(--brass-400); }
.chat-full {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--ink-900); background: var(--paper-50); color: var(--ink-900); cursor: pointer; box-shadow: 0 2px 8px rgba(20, 17, 15, 0.12);
}
.chat-full:hover, .chat-full:focus-visible { background: var(--ink-900); color: var(--paper-100); }
.chat-full .icon, .pane-show .icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.resizing, .resizing * { cursor: col-resize !important; user-select: none; }
.pane-show {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 30; align-items: center; gap: 8px; padding: 14px 8px;
  writing-mode: vertical-rl; border: 1px solid var(--ink-900); border-right: 0; background: var(--paper-50); color: var(--ink-900); cursor: pointer;
  font: 500 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; box-shadow: -4px 0 14px rgba(20, 17, 15, 0.1);
}
.pane-show:hover, .pane-show:focus-visible { background: var(--ink-900); color: var(--paper-100); }
@media (min-width: 1100px) {
  .pane-open .pane-split { display: block; }
  body:not(.pane-open):not(.board-open) .pane-show { display: flex; }
}

/* ---- Chat / Tasks tabs on narrower screens ---- */
@media (max-width: 1099px) {
  body[data-page="chat"] .chat-tabs {
    position: sticky; top: 60px; z-index: 15; display: flex; background: var(--paper-100); border-bottom: 1px solid var(--ink-900);
  }
  .chat-tab {
    flex: 1; height: 46px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
    font: 500 12.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500);
  }
  .chat-tab[aria-pressed="true"] { color: var(--ink-900); border-bottom-color: var(--brass-400); background: var(--paper-50); }
  .chat-tab + .chat-tab { border-left: 1px solid var(--paper-400); }
  #board-toggle, .pane-back { display: none !important; }
  .board { top: 106px; }
}

/* ---- Connect AI: Claude connector steps; the Allow page for OAuth ---- */
.connector { margin-bottom: 28px; }
.steps { margin: 0 0 8px; padding-left: 22px; display: grid; gap: 12px; max-width: 72ch; color: var(--ink-700); font-weight: 400; }
.steps strong { color: var(--ink-900); font-weight: 600; }
.steps .snippet { margin-top: 8px; }
.keys .item-name { font-weight: 600; }
.consent .gate-lead { max-width: 40ch; }
.consent-form { margin-top: 8px; }
.consent-form .link { align-self: center; min-height: 40px; }
.consent-note { max-width: 42ch; font-size: 13px; line-height: 1.5; color: var(--ink-500); overflow-wrap: anywhere; }
.consent-note strong { color: var(--ink-700); }

/* ---- minimising the chat list to a slim column of initials ---- */
.channels-tools { display: flex; align-items: center; gap: 2px; }
.channels-toggle { display: grid; place-items: center; }
.channels-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.18s; }
.channel-initial { display: none; }
.channels-min .channels { width: 64px; padding: 20px 8px 32px; overflow-x: hidden; }
.channels-min .channels-head { justify-content: center; padding: 0; }
.channels-min .channels-head .eyebrow, .channels-min #channel-new { display: none; }
.channels-min .channels-toggle svg { transform: rotate(180deg); }
.channels-min .channel { position: relative; justify-content: center; padding: 5px 0; }
.channels-min .channel-hash, .channels-min .channel-name { display: none; }
.channels-min .channel-initial {
  display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--paper-500); background: var(--paper-100);
  font-size: 14px; font-weight: 700; color: var(--ink-700);
}
.channels-min .channel[aria-current="page"] { background: none; }
.channels-min .channel[aria-current="page"] .channel-initial { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper-100); }
.channels-min .channel:hover .channel-initial { border-color: var(--ink-900); }
.channels-min .channel-badge { position: absolute; top: 0; right: 0; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; line-height: 16px; }
@media (prefers-reduced-motion: no-preference) { .channels { transition: width 0.18s ease, padding 0.18s ease; } }
.channels-min .channel, .channels-min .channel[aria-current="page"] { border-left-color: transparent; }
.room-rename { max-width: 100%; font-size: inherit; }

/* ---- Mentions in the top bar ---- */
.mentions-btn .count { margin-left: 4px; background: var(--oxblood-500); }
.mentions-btn .narrow-only { font: 600 18px var(--font-sans); }
.mentions-menu { width: min(380px, calc(100vw - 24px)); max-height: min(70vh, 560px); overflow: auto; padding: 0; }
.mentions-head { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; background: var(--paper-50); border-bottom: 1px solid var(--paper-400); }
.mentions-head .link { font-size: 13px; min-height: 28px; }
.mentions-list { list-style: none; margin: 0; padding: 0; }
.mentions-list .empty-col { padding: 16px; }
.site-nav .mention-item {
  display: grid; gap: 3px; padding: 11px 16px 11px 14px; border-left: 2px solid transparent; border-bottom: 1px dashed var(--paper-400);
  text-decoration: none; white-space: normal; font: 400 14px/1.4 var(--font-sans); color: var(--ink-700);
}
.site-nav .mention-item::after { content: none; }
.site-nav .mention-item:hover, .site-nav .mention-item:focus-visible { background: var(--paper-200); color: var(--ink-900); }
.site-nav .mention-item.new { border-left-color: var(--brass-400); background: var(--paper-100); }
.mention-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.mention-top strong { font-weight: 700; color: var(--ink-900); }
.mention-top .when { flex: none; font-size: 11px; }
.mention-text { color: var(--ink-500); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.comment.flash { animation: flash 1.6s ease-out; }
@media (max-width: 560px) {
  .mentions-wrap { position: static; }
  .mentions-menu { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; }
}

/* ---- the chat's header stays put while you scroll (#29) ---- */
.chat .page-head {
  position: sticky; top: 60px; z-index: 12; margin: -10px 0 8px; padding: 10px 0;
  background: var(--paper-100); border-bottom: 1px solid var(--paper-500);
}
.messages li { scroll-margin-top: 150px; }
@media (max-width: 1099px) {
  .chat .page-head { top: 106px; }
  .messages li { scroll-margin-top: 200px; }
}

/* ---- each person's pastel (#31): other people's messages are tinted, yours have a stripe ---- */
.messages li.other { background: none; }   /* #32: no tint; everyone gets the side bar */
.messages li.mine, .messages li.other { box-shadow: inset 3px 0 0 var(--who, transparent); }
.comment .avatar { background: var(--who, var(--ink-900)); color: var(--ink-900); box-shadow: inset 0 0 0 1px rgba(20, 17, 15, 0.18); }

/* ---- delete chat: a quiet link, then a box that says what goes and wants the name typed (#30) ---- */
.link.quiet-danger { color: var(--ink-500); text-decoration-color: var(--oxblood-500); font-size: 13px; }
.link.quiet-danger:hover { color: var(--oxblood-500); }
.confirm-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--ink-900); background: var(--paper-50); color: var(--ink-900);
  box-shadow: 0 18px 48px rgba(20, 17, 15, 0.25);
}
.confirm-dialog::backdrop { background: rgba(20, 17, 15, 0.45); }
.confirm-form { display: grid; gap: 16px; padding: 24px; }
.confirm-title { margin: 0; font-family: var(--font-display); font-size: 24px; line-height: 1.15; overflow-wrap: anywhere; }
.confirm-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--ink-700); line-height: 1.5; font-weight: 400; }
.confirm-list strong { color: var(--ink-900); }
.confirm-label { display: grid; gap: 8px; font-size: 14px; color: var(--ink-700); }
.confirm-label strong { color: var(--ink-900); overflow-wrap: anywhere; }
.confirm-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.tool.danger-tool { border-color: var(--oxblood-500); background: var(--oxblood-500); color: var(--paper-100); }
.tool.danger-tool:hover:not(:disabled) { background: var(--ink-900); border-color: var(--ink-900); }
/* Phones: the sticky chat header kept to two short rows (chat, mute, + / then the small links). */
@media (max-width: 560px) {
  #page-chat .page-head { margin: -8px 0 6px; padding: 8px 0; }
}

/* ---- the Android app's "new version" bar ---- */
/* Floats above the message box, since the chat opens scrolled to the bottom. */
.app-update {
  position: fixed; left: 12px; right: 12px; bottom: calc(130px + env(safe-area-inset-bottom)); z-index: 40; margin: 0 auto; max-width: 480px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 16px; padding: 10px 16px;
  background: var(--brass-200); border: 1px solid var(--ink-900); box-shadow: 0 10px 30px rgba(20, 17, 15, 0.22); font-size: 14px; color: var(--ink-900);
}
.app-update[hidden] { display: none; }
.app-update .tool { display: inline-flex; align-items: center; height: 34px; text-decoration: none; }
.app-update .link { min-height: 34px; padding: 4px 0; }

/* ---- the chat header as icons (#34): rename, delete, tasks, notifications, mute, new chat ---- */
#room-delete { display: inline-flex; gap: 2px; }
.head-icon {
  position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0;
  border: 1px solid transparent; background: none; color: var(--ink-600); cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.head-icon .icon { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.head-icon:hover, .head-icon:focus-within { background: var(--paper-200); border-color: var(--paper-400); color: var(--ink-900); }
.head-icon:focus-visible, .icon-select:focus-within { outline: 2px solid var(--brass-400); outline-offset: 1px; }
.head-icon.danger-icon:hover { color: var(--oxblood-500); }
#notify[aria-pressed="true"] { color: var(--ink-900); }
#notify[aria-pressed="false"] { color: var(--ink-400); }
.board-toggle[aria-expanded="true"] { background: var(--ink-900); border-color: var(--ink-900); color: var(--paper-100); }
.head-count {
  position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--brass-400); color: var(--paper-50); font: 700 10px/16px var(--font-mono); text-align: center;
}
/* Mute is a real drop-down laid invisibly over its icon, so tapping the icon opens the usual picker. */
.icon-select select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
.icon-select.on { color: var(--brass-600); background: var(--brass-200); border-color: var(--brass-400); }
.icon-select.on .icon { fill: currentColor; fill-opacity: 0.25; }
/* Phones: the chat picker and the icons on one row, "N new in…" below. */
@media (max-width: 560px) {
  #page-chat .page-actions { flex-wrap: wrap; gap: 4px; }
  #room { order: 0; }
  #room-delete, #board-toggle, #notify, #mute-wrap, #room-new { order: 1; }
  #elsewhere { order: 3; height: 30px; font-size: 12px; }
  .head-icon { width: 38px; height: 44px; }
}

/* ---- Settings → download the Android app ---- */
.site-nav .nav-menu a.get-app {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: auto;
  margin: 6px 8px 4px; padding: 10px 10px 10px 10px; border: 1px solid var(--paper-400); border-left: 1px solid var(--paper-400);
  border-radius: 12px; background: var(--paper-200); color: var(--ink-900);
  transition: background 0.15s, border-color 0.15s;
}
.site-nav .nav-menu a.get-app:hover, .site-nav .nav-menu a.get-app:focus-visible { background: var(--brass-200); border-color: var(--brass-400); }
.get-app-icon { width: 40px; height: 40px; border-radius: 10px; display: block; box-shadow: 0 1px 3px rgba(20, 17, 15, 0.18); }
.get-app-text { display: grid; gap: 1px; min-width: 0; white-space: normal; }
.get-app-name { font: 600 14px/1.25 var(--font-sans); color: var(--ink-900); }
.get-app-version { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.03em; color: var(--ink-500); }
.get-app-go {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink-900); color: var(--paper-100); transition: transform 0.15s;
}
.get-app-go .icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-nav .nav-menu a.get-app:hover .get-app-go { transform: translateY(1px); }
.site-nav .nav-menu a.get-app.current { cursor: default; background: none; }
.site-nav .nav-menu a.get-app.current:hover { background: none; border-color: var(--paper-400); }
.site-nav .nav-menu a.get-app.current .get-app-go { background: var(--brass-200); color: var(--brass-600); transform: none; }
.nav-menu:has(.get-app:not([hidden])) { min-width: 290px; }
@media (max-width: 560px) { .nav-menu:has(.get-app:not([hidden])) { min-width: min(290px, calc(100vw - 32px)); } }

/* ---- stock views: items, units (#38), history (#35) ---- */
.stock-tabs { display: flex; gap: 0; margin: 0 0 18px; border-bottom: 1px solid var(--ink-900); }
.stock-tab {
  padding: 10px 18px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; cursor: pointer;
  font: 600 12px var(--font-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400);
}
.stock-tab:hover { color: var(--ink-900); }
.stock-tab[aria-pressed="true"] { color: var(--ink-900); border-bottom-color: var(--brass-400); }
#form-stock .field.cat { width: 130px; }
.low-only { align-self: center; min-height: 36px; }

.item-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.cat-box {
  width: 120px; height: 24px; padding: 0 6px; border: 1px solid transparent; background: none;
  font: 500 11px var(--font-mono); letter-spacing: 0.04em; color: var(--brass-600);
}
.cat-box:placeholder-shown { color: var(--ink-300); }
.cat-box:hover, .cat-box:focus { border-color: var(--paper-500); background: var(--paper-100); }
.cat-box:not(:placeholder-shown):not(:focus) { background: var(--brass-200); border-color: transparent; width: auto; field-sizing: content; min-width: 40px; max-width: 160px; }
.used-in { font-size: 12px; color: var(--ink-400); }
/* #51: an item's previous versions, under its name. */
.versions { font-size: 12px; color: var(--ink-400); margin-top: 2px; }
.versions summary { cursor: pointer; width: fit-content; }
.versions summary:hover { color: var(--ink-700); }
.versions ul { margin: 4px 0 0; padding-left: 16px; }
.versions li { margin: 2px 0; }
.versions .version-name { color: var(--ink-700); }
.versions .when { white-space: normal; }

.units-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 24px; flex-wrap: wrap; margin-bottom: 18px; }
.units-head .lead { max-width: 60ch; color: var(--ink-600); font-weight: 400; font-size: 14px; }
.unit-list { display: grid; gap: 18px; }
.unit-card { border: 1px solid var(--paper-400); background: var(--paper-50); }
.unit-top {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 14px;
  border-bottom: 1px solid var(--ink-900);
}
.unit-name {
  flex: 1 1 160px; min-width: 0; height: 38px; padding: 0 6px; margin-left: -6px; border: 1px solid transparent; background: none;
  font: 400 24px/1 var(--font-display); letter-spacing: -0.01em; color: var(--ink-900);
}
.unit-name:hover, .unit-name:focus { border-color: var(--paper-500); background: var(--paper-100); }
.can-build {
  padding: 4px 10px; border-radius: 999px; background: var(--brass-200); color: var(--brass-600);
  font: 600 11px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.can-build.none { background: var(--paper-300); color: var(--ink-500); }
.build-n { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink-700); }
.build-n .field.num { height: 36px; width: 80px; }
.unit-body { padding: 12px 14px 14px; display: grid; gap: 12px; }
.unit-verdict { font-size: 14.5px; padding: 10px 12px; border-left: 3px solid var(--brass-400); background: var(--paper-100); }
.unit-verdict.short { border-left-color: var(--oxblood-500); }
.unit-verdict.short strong { color: var(--oxblood-500); }
.stock.parts td { padding: 6px 10px; }
.stock.parts th { padding: 8px 10px; }
.num-cell { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.num-cell.short { color: var(--oxblood-500); font-weight: 600; }
.num-cell.enough { color: var(--brass-500); }
.add-part { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.add-part select.field { height: 36px; min-width: 200px; max-width: 100%; }
.add-part .field.num { height: 36px; width: 80px; }
.unit-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.unit-foot .link.danger:not([data-armed="1"]) { color: var(--ink-900); text-decoration-color: var(--brass-400); }

.audit { list-style: none; margin: 0; padding: 0; border: 1px solid var(--paper-400); background: var(--paper-50); }
.audit-day {
  padding: 14px 14px 6px; border-bottom: 1px solid var(--ink-900);
  font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--brass-600);
}
.audit-row {
  display: grid; grid-template-columns: 52px 90px minmax(120px, 220px) 1fr; gap: 4px 14px; align-items: baseline;
  padding: 9px 14px; border-top: 1px dashed var(--paper-500); font-size: 14px;
}
.audit-day + .audit-row { border-top: 0; }
.audit-time { font: 500 12px var(--font-mono); color: var(--ink-400); }
.audit-who { color: var(--ink-600); }
.audit-item { font-weight: 600; overflow-wrap: anywhere; }
.audit-what { color: var(--ink-700); overflow-wrap: anywhere; }
.audit-row.move .audit-what { font-family: var(--font-mono); font-size: 13px; }
.audit .empty-col { padding: 14px; }

@media (max-width: 760px) {
  .stock.parts tr { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; }
  .stock.parts td:first-child { grid-column: 1 / -1; }
  .stock.parts td.num-cell::before { content: attr(data-label) " "; font-family: var(--font-sans); font-size: 12px; color: var(--ink-400); }
  .stock.parts td:nth-child(3)::before { content: attr(data-label) " "; }
  .audit-row { grid-template-columns: 46px 1fr; }
  .audit-item, .audit-what { grid-column: 2; }
  .audit-who { font-size: 12.5px; }
  .stock-tab { flex: 1; padding: 12px 8px; }
}

/* ---- direct messages (#40) in the chat list ---- */
.dm-head { margin-top: 22px; }
.channels-min .dm-head { margin-top: 14px; border-top: 1px solid var(--paper-400); padding-top: 10px; }
.channels-min .dm-head .eyebrow { display: none; }

/* ---- units: product codes, replacing parts, previously used (#42) ---- */
.code-box:not(:placeholder-shown):not(:focus) { background: var(--paper-300); color: var(--ink-700); }
.part-code { font: 500 11.5px var(--font-mono); letter-spacing: 0.03em; color: var(--ink-500); }
.part-actions { white-space: nowrap; }
.part-actions .link + .link { margin-left: 14px; }
.previous { border: 1px dashed var(--paper-500); background: var(--paper-100); }
.previous summary {
  padding: 10px 12px; cursor: pointer; font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-600);
}
.previous[open] summary { border-bottom: 1px dashed var(--paper-500); }
.previous-list { list-style: none; margin: 0; padding: 0; }
.previous-list li { display: grid; gap: 3px; padding: 10px 12px; }
.previous-list li + li { border-top: 1px dashed var(--paper-500); }
.previous-top { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; }
.previous-top .item-name { color: var(--ink-600); }
.previous-top a { font-size: 13px; color: var(--ink-700); }
.previous-meta { font-size: 13px; color: var(--ink-500); }
.previous-note { font-size: 13.5px; color: var(--ink-700); font-style: italic; }
.previous-actions { display: flex; gap: 16px; }
.previous-actions .link { min-height: 28px; font-size: 13px; }
.confirm-note { margin: 0; font-size: 14px; color: var(--ink-600); }

.nav-menu-item kbd { float: right; font: 500 11px var(--font-mono); color: var(--ink-400); border: 1px solid var(--paper-500); padding: 0 5px; border-radius: 3px; }

/* ---- offline: a bar across the top, and messages waiting to be sent ---- */
.offline-bar { padding: 8px var(--edge); background: var(--ink-900); color: var(--paper-100); font-size: 13.5px; text-align: center; }
.messages li.queued { opacity: 0.65; }
.messages li.queued .msg-flag { font-style: normal; color: var(--brass-600); }
.messages li.queued .link { min-height: 24px; padding: 0; font-size: 13px; margin-left: 6px; }

/* ---- older messages and gaps ---- */
.messages li.load-more { border: 0; padding: 6px 0 10px; text-align: center; }
.messages li.load-more .tool { height: 34px; font-size: 12px; }
.messages li.gap { margin: 6px 0; padding: 10px 0; border-top: 1px dashed var(--brass-400); border-bottom: 1px dashed var(--brass-400); }
.typing { min-height: 20px; margin: 4px 0 0; font-size: 13px; font-style: italic; color: var(--ink-400); }

/* ---- code in messages, comments and notes ---- */
.code, .msg-body code, .notes code, .comment-body code, .rich code {
  font: 500 13px/1.5 var(--font-mono); padding: 1px 5px; border: 1px solid var(--paper-400); border-radius: 3px;
  background: var(--paper-300); color: var(--ink-900); overflow-wrap: anywhere;
}
.code-block, .rich pre {
  margin: 6px 0; padding: 10px 12px; overflow-x: auto; border: 1px solid var(--paper-400); border-left: 3px solid var(--brass-400);
  background: var(--paper-300); color: var(--ink-900); font: 500 13px/1.5 var(--font-mono); white-space: pre; tab-size: 4;
}
.code-block code { font: inherit; padding: 0; border: 0; background: none; }
.messages li.other .code-block, .messages li.other .code { background: var(--paper-100); }

/* ---- pinned messages ---- */
.messages li.pinned { background: color-mix(in srgb, var(--brass-200) 30%, transparent); }
.pin-flag { color: var(--brass-600); font-style: normal; }
.pinned { margin: 0 0 8px; border: 1px solid var(--paper-400); background: var(--paper-50); }
.pinned-toggle {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 8px 12px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 600 11px var(--font-sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--brass-600);
}
.pinned-toggle:hover { background: var(--paper-200); }
.pinned-list { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 6px; }
.pinned-item { display: flex; gap: 10px; align-items: flex-start; }
.pinned-open {
  flex: 1; min-width: 0; display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--paper-400); background: var(--paper-100);
  text-align: left; cursor: pointer; font: 400 14px/1.4 var(--font-sans); color: var(--ink-700);
}
.pinned-open:hover { border-color: var(--ink-900); }
.pinned-item .link { flex: none; min-height: 32px; padding: 4px 0; font-size: 13px; }

/* ---- search ---- */
.search-row { margin: 0 0 10px; }
.search-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.search-form .field { height: 40px; }
.search-form #search-q { flex: 1; min-width: 160px; }
.search-form .tool { height: 40px; }
.search-form .link { min-height: 40px; padding: 0; }
.search-results { margin-top: 10px; border: 1px solid var(--paper-400); background: var(--paper-50); }
.search-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--paper-400); }
.search-head .link { min-height: 32px; padding: 0; font-size: 13px; }
.search-list { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.search-list li + li { border-top: 1px dashed var(--paper-500); }
.search-item {
  display: grid; gap: 2px; width: 100%; padding: 10px 12px; border: 0; background: none; text-align: left; cursor: pointer;
  font: 400 14px/1.4 var(--font-sans); color: var(--ink-700);
}
.search-item:hover { background: var(--paper-200); }
.search-item mark { background: var(--brass-200); color: var(--ink-900); padding: 0 1px; }

/* ---- new comments on tasks: a dot on the card, the Tasks tab and the chat ---- */
.new-dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 999px; background: var(--brass-500); vertical-align: middle; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.5); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .new-dot { animation: none; } }
.new-count { font-size: 12px; font-weight: 600; color: var(--brass-600); }
.card.has-new { border-color: var(--brass-400); }
.chat-tab { position: relative; }   /* .pane-show is already fixed to the right edge, which is enough for its dot */
.chat-tab.has-new::after, .board-toggle.has-new::after, .pane-show.has-new::after {
  content: ""; position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 999px; background: var(--brass-500);
}
.channel.has-new .channel-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 999px; background: var(--brass-500); vertical-align: middle; }

/* ---- checklists in notes ---- */
.notes li.check, .board-notes li.check { list-style: none; margin-left: -22px; }
.check-label { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; }
.check-label input { flex: none; width: 16px; height: 16px; margin: 4px 0 0; accent-color: var(--brass-500); cursor: pointer; }
.check.done .check-text { color: var(--ink-400); text-decoration: line-through; text-decoration-color: var(--ink-300); }
.check-box { display: inline-block; width: 1.2em; color: var(--brass-600); }
.check-chip { font: 600 11px var(--font-mono); letter-spacing: 0.04em; padding: 2px 7px; border: 1px solid var(--paper-500); color: var(--ink-500); }
.check-chip.all { color: var(--sage-ink); border-color: var(--sage-ink); }

/* ---- stock on order ---- */
.order-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; font-size: 12.5px; color: var(--ink-500); white-space: normal; }
.order-line .link { min-height: 24px; padding: 0; font-size: 12.5px; }
.order-line.late .order-text { color: var(--oxblood-500); font-weight: 600; }
.stock .on-order-tag { border-color: var(--brass-500); color: var(--brass-600); }
.coming { font-size: 12px; color: var(--brass-600); }
.digest-btn { margin-left: auto; min-height: 36px; font-size: 13px; }
@media (max-width: 560px) { .digest-btn { flex-basis: 100%; margin: 0; justify-content: center; min-height: 40px; } }

/* ---- Ctrl+K quick switcher ---- */
.switcher {
  width: min(560px, calc(100vw - 32px)); margin: 12vh auto auto; padding: 0; border: 1px solid var(--ink-900);
  background: var(--paper-50); color: var(--ink-900); box-shadow: 0 20px 50px rgb(0 0 0 / 0.3);
}
.switcher::backdrop { background: rgb(20 17 15 / 0.45); }
.switcher-q { width: 100%; height: 52px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--paper-400); background: transparent; color: var(--ink-900); font-size: 16px; }
.switcher-q:focus-visible { outline: none; }
.switcher-list { list-style: none; margin: 0; padding: 6px 0; max-height: 60vh; overflow-y: auto; }
.switch-item {
  display: flex; gap: 12px; align-items: baseline; width: 100%; padding: 9px 16px; border: 0; border-left: 2px solid transparent;
  background: none; text-align: left; cursor: pointer; font: 500 14.5px var(--font-sans); color: var(--ink-700);
}
.switcher-list li.current .switch-item, .switch-item:hover { background: var(--paper-300); color: var(--ink-900); border-left-color: var(--brass-400); }
.switch-kind { flex: none; width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-600); }
.switch-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switcher-list .empty-col { padding: 12px 16px; }
@media (max-width: 560px) { .switch-kind { width: 80px; } }