:root {
  --ink: #0e0e0e;
  --paper: #f6f5f3;
  --line: #d8d6d2;
  --line-strong: #0e0e0e;
  --dim: #7a766f;
  --dimmer: #a8a39b;
  --panel: #0e0e0e;
  --panel-ink: #eceae6;
  /* The only two colours in an otherwise monochrome system, reserved for the
     operational switches: green = the behaviour is running, red = stopped.
     Named for meaning rather than hue so nothing borrows them as decoration.
     Both hold 4.5:1 contrast on --paper, and colour is an addition on top of
     the filled/hollow dot, never the sole carrier of state. */
  --ok: #1a7f37;
  --danger: #b3261e;
  --sans: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --nav-h: 59px; /* .nav-inner 58px + 1px border — keep in sync */
  /* Live height of the AI-paused banner, written by chat.html when it shows or
     hides. Measured rather than hard-coded because the banner text wraps to a
     second line on narrow screens. */
  --ai-banner-h: 0px;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  line-height: 1.45;
}
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 40px; }

/* Navigation — pinned. Sticky (not fixed) so it stays in flow: no content
   jump, and the chat shell's height calc keeps working. Needs its own paper
   background and a z-index because card/bubble animations create stacking
   contexts content would otherwise scroll through. */
.nav {
  border-bottom: 1px solid var(--line-strong);
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-height, not height: with controls in the bar the row has to be able to
     grow rather than squeeze its children past their own borders. Pages without
     controls still render at exactly 58px, so --nav-h stays correct for them. */
  min-height: 58px;
  flex-wrap: wrap;
  gap: 10px 20px;
  padding: 0 40px;
}
.brand {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.brand b { font-weight: 600; }
.tabs { display: flex; align-items: center; gap: 4px; }
.tab {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid transparent;
  color: var(--dim);
  /* A flex item shrinks by default. Without these two the labels were being
     compressed narrower than their own text and spilling over the borders. */
  flex: 0 0 auto;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); border-color: var(--line-strong); }
/* Log out lives in the nav on every page; a button styled as a tab */
button.tab { background: transparent; cursor: pointer; }
.tab.logout { margin-left: 18px; }

/* Operational stop switches — rendered on the SETTINGS page rows (the one
   place these are flipped; the chat page only shows the warning banner).
   State is coloured (green = running, red = stopped) and doubled onto the
   dot (filled = running, hollow = stopped) and the label ("Running" /
   "Paused"), so state never relies on colour alone. */
/* NAME COLLISION WARNING — do not rename these back to .switch / .dot.
   `.switch` is the Settings page's generic boolean toggle (a 52x28 track with
   a grey ::after knob) and `.dot` is the connection indicator — and both now
   share a page with these controls. Both are defined LATER in this file, so
   they would win a specificity tie and render these as fixed-width toggle
   tracks with their labels overflowing. The `ops-` prefix keeps them apart. */
.ops-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;          /* never squash — this is what let labels overflow */
  white-space: nowrap;
  line-height: 1;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--dim);
  cursor: pointer;
  transition: border-color 80ms linear, color 80ms linear;
}
.ops-toggle:hover:not(:disabled) { border-color: var(--line-strong); color: var(--ink); }
.ops-toggle:disabled { opacity: 0.45; cursor: default; }
/* Fixed box in every direction: min/max as well as width/height, so the dot can
   never be stretched by the flex row it sits in. */
.ops-toggle .ops-dot {
  width: 8px; height: 8px;
  min-width: 8px; max-width: 8px;
  min-height: 8px; max-height: 8px;
  border-radius: 50%;
  background: var(--ok);
  border: 0;
  margin: 0;
  flex: 0 0 auto;
  display: block;
}
.ops-toggle.paused { border-color: var(--danger); color: var(--danger); }
.ops-toggle.paused .ops-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--danger); }
/* The generic hover above outranks .paused (three class-level selectors to
   two), so without this a stopped switch would flip from red back to ink the
   moment the pointer reached it. */
.ops-toggle.paused:hover:not(:disabled) { border-color: var(--danger); color: var(--danger); }

.ai-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 40px;
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  position: sticky;
  top: var(--nav-h);
  z-index: 47;
}
.ai-banner[hidden] { display: none; }
.ai-banner b { font-weight: 600; }
/* The banner's link to Settings — the switches themselves live there. */
.ai-banner a {
  text-decoration: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 14px;
  border: 1px solid var(--paper);
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  white-space: nowrap;
}
.ai-banner a:hover { background: var(--paper); color: var(--ink); }

/* Backend navigation — pins directly below the primary bar */
.subnav {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: var(--nav-h);
  z-index: 49;
  background: var(--paper);
}
/* min-height must be reset too, not just height: a min-height floor wins over
   an explicit height, so inheriting the primary bar's 58px would silently make
   every sub-navigation row taller than it is drawn to be. */
.subnav .nav-inner { min-height: 46px; height: 46px; gap: 6px; justify-content: flex-start; }
.subtab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding: 6px 0;
  margin-right: 26px;
  border-bottom: 2px solid transparent;
}
.subtab:hover { color: var(--ink); }
.subtab.active { color: var(--ink); border-bottom-color: var(--ink); }

/* Masthead */
.masthead { padding: 40px 0 26px; border-bottom: 1px solid var(--line); }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 14px;
}
h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.02; }
.lede { color: var(--dim); margin: 16px 0 0; max-width: 52ch; }
.meta {
  display: flex; flex-wrap: wrap; gap: 6px 28px; margin-top: 22px;
  font-family: var(--mono); font-size: 12px; color: var(--dim);
}
.meta b { color: var(--ink); font-weight: 500; }
.dot { display: inline-block; width: 7px; height: 7px; border: 1px solid var(--ink); border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.dot.on { background: var(--ink); }
.dot.live { background: var(--ink); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Sections */
section { padding: 30px 0; border-bottom: 1px solid var(--line); }
.label {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--dim); margin: 0 0 14px;
}

/* Inputs */
input[type="text"], input[type="password"], input[type="date"], input[type="number"], textarea {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong);
  border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.01em;
}
input::placeholder, textarea::placeholder { color: var(--dimmer); }
input:focus, textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
textarea { resize: vertical; min-height: 58px; line-height: 1.5; }
.hint { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 8px; }

/* Send commands */
.cmds { border-top: 1px solid var(--line-strong); }
.cmd {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 18px;
  padding: 16px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 80ms linear;
}
.cmd:hover { background: #ecebe7; }
.cmd .idx { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.cmd .name { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.cmd .desc { font-family: var(--mono); font-size: 11.5px; color: var(--dim); margin-top: 3px; }
.cmd .go {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 9px 16px; white-space: nowrap;
  transition: background 80ms linear, color 80ms linear;
}
.cmd:hover .go { background: var(--ink); color: var(--paper); }
/* Two actions share the row's third grid column. */
.cmd-actions { display: flex; align-items: center; gap: 8px; }
/* Destructive, so it stays quiet until pointed at — and deliberately does NOT
   fill on row hover the way Preview does, or the eye would read the row's
   primary action as "delete". */
.cmd .danger {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line); background: transparent; color: var(--dim);
  padding: 9px 16px; white-space: nowrap; cursor: pointer;
  transition: background 80ms linear, color 80ms linear, border-color 80ms linear;
}
.cmd .danger:hover { border-color: var(--line-strong); background: var(--ink); color: var(--paper); }
.cmd .danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Buttons */
.actions { display: flex; gap: 14px; padding: 26px 0; }
.actions.compact { flex-wrap: wrap; align-items: center; padding: 18px 0 0; }
.btn {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 22px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  cursor: pointer; transition: background 80ms linear, color 80ms linear;
}
.btn.solid { background: var(--ink); color: var(--paper); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: transparent; color: var(--ink); }
.btn:disabled { opacity: 0.38; cursor: not-allowed; pointer-events: none; }

/* Notice */
.notice {
  border: 1px solid var(--line-strong); padding: 14px 16px; margin: 24px 0 0;
  font-family: var(--mono); font-size: 12px; line-height: 1.6;
}

/* Send log */
.console {
  background: var(--panel); color: var(--panel-ink); font-family: var(--mono);
  font-size: 12.5px; line-height: 1.7; padding: 18px 20px; margin: 12px 0 60px;
  min-height: 150px; max-height: 340px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
}
.console .ln { display: flex; gap: 12px; }
.console .ts { color: #6f6b64; flex-shrink: 0; }
.console .mk { flex-shrink: 0; width: 1.2em; }
.console .ln.err .mk, .console .ln.err .msg { color: #fff; font-weight: 600; }
.console .empty { color: #5d5952; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--panel-ink); vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Setup steps */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative; padding: 0 0 22px 46px; counter-increment: step;
  border-left: 1px solid var(--line); margin-left: 14px;
}
.steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps > li::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: -14px; top: -2px;
  width: 28px; height: 28px; background: var(--paper); border: 1px solid var(--line-strong);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px;
}
.steps h3 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.steps p { margin: 0 0 8px; color: var(--dim); font-size: 13.5px; }
.steps code, code.inline {
  font-family: var(--mono); font-size: 12px; background: #ecebe7;
  border: 1px solid var(--line); padding: 2px 6px;
}
.steps pre {
  font-family: var(--mono); font-size: 12px; background: var(--panel); color: var(--panel-ink);
  padding: 10px 14px; margin: 6px 0; overflow-x: auto;
}

/* Status badges */
.badges { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  border: 1px solid var(--line-strong); padding: 7px 12px; display: inline-flex; align-items: center; gap: 8px;
}
.badge .mk { font-weight: 600; }
.badge.miss { color: var(--dim); border-color: var(--line); }

/* Live feed */
.feed { margin: 8px 0 60px; }
.feed .empty {
  font-family: var(--mono); font-size: 12.5px; color: var(--dim);
  border: 1px dashed var(--line-strong); padding: 26px; text-align: center;
}
.card {
  border: 1px solid var(--line-strong); padding: 16px 18px; margin-bottom: 12px;
  animation: slidein 220ms ease;
}
.card.in { margin-right: 48px; }
.card.out { margin-left: 48px; background: #ecebe7; }
.card.operator { margin-left: 24px; margin-right: 24px; border-style: dashed; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.card .top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card .type {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 3px 9px;
}
.card .time { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.card .from { font-family: var(--mono); font-size: 12px; color: var(--dim); margin: 10px 0 4px; }
.card .body { font-size: 16px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.card .body.mono { font-family: var(--mono); font-size: 13px; }

/* Chat */
.chat-shell { display: flex; height: calc(100vh - var(--nav-h) - var(--ai-banner-h)); }

.convos { width: 320px; border-right: 1px solid var(--line-strong); display: flex; flex-direction: column; }
.convos-head {
  padding: 18px 20px; border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; align-items: center;
}
.convos-list { overflow-y: auto; flex: 1; }
.convos-empty { padding: 26px 20px; font-family: var(--mono); font-size: 12px; color: var(--dim); }
.convo {
  padding: 14px 20px; border-bottom: 1px solid var(--line); cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; transition: background 80ms linear;
}
.convo:hover { background: #ecebe7; }
.convo.active { background: #e7e5e0; }
.convo .num { font-family: var(--mono); font-size: 13px; font-weight: 500; }
.convo .time { font-family: var(--mono); font-size: 10.5px; color: var(--dim); text-align: right; }
.convo .preview { grid-column: 1 / -1; font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.convo .unread {
  grid-column: 2; justify-self: end; align-self: center; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ink); color: var(--paper); border-radius: 9px;
  font-family: var(--mono); font-size: 10px; display: inline-flex; align-items: center; justify-content: center;
}
/* An unread conversation carries weight as well as a badge, so the queue reads
   at a glance without counting. */
.convo.unread-row .num { font-weight: 700; }
.convo.unread-row .preview { color: var(--ink); }
.convo.unread-row { box-shadow: inset 3px 0 0 var(--ink); }
/* How the thread is filed. A suggestion the app derived is drawn hollow; a
   filing the operator made is solid, so "we think" never looks like "you said". */
.convo .label {
  grid-column: 1; justify-self: start;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid var(--line-strong); border-radius: 2px;
  background: var(--ink); color: var(--paper);
}
.convo .label.suggested { background: transparent; color: var(--dim); border-color: var(--line); border-style: dashed; }

/* Sidebar filters. */
.convo-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-bottom: 1px solid var(--line); }
.convo-filters .filter {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--line); border-radius: 2px;
  background: transparent; color: var(--dim); cursor: pointer;
}
.convo-filters .filter:hover { border-color: var(--line-strong); color: var(--ink); }
.convo-filters .filter.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.convo-filters .filter:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Right-click menu on a conversation row. Fixed to the viewport because it is
   positioned from pointer coordinates, and above the sticky nav. */
.ctx-menu {
  position: fixed; z-index: 100; min-width: 180px;
  background: var(--paper); border: 1px solid var(--line-strong);
  box-shadow: 4px 4px 0 rgba(14, 14, 14, 0.12); padding: 4px;
  display: flex; flex-direction: column;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu button {
  text-align: left; background: transparent; border: 0; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: var(--ink); padding: 7px 10px;
}
.ctx-menu button:hover { background: #ecebe7; }
.ctx-menu button:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.ctx-menu button.on { font-weight: 600; }
.ctx-menu button.on::before { content: "• "; }
.ctx-menu .ctx-sep { height: 1px; background: var(--line); margin: 4px 0; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-head {
  padding: 16px 28px; border-bottom: 1px solid var(--line-strong);
  display: flex; align-items: baseline; gap: 14px;
}
.chat-head .num { font-size: 18px; font-weight: 600; }
.chat-head .sub { font-family: var(--mono); font-size: 11px; color: var(--dim); }

.thread { flex: 1; overflow-y: auto; padding: 24px 28px; display: flex; flex-direction: column; gap: 12px; }
.thread .placeholder { margin: auto; font-family: var(--mono); font-size: 13px; color: var(--dim); text-align: center; }
.bubble { max-width: 66%; padding: 11px 14px; border: 1px solid var(--line-strong); animation: slidein 180ms ease; }
.bubble .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin-bottom: 5px; }
.bubble .text { font-size: 15px; line-height: 1.4; word-break: break-word; white-space: pre-wrap; }
.bubble .text.mono { font-family: var(--mono); font-size: 12.5px; }
.bubble .at { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 6px; }
.bubble.in { align-self: flex-start; background: var(--paper); }
.bubble.out { align-self: flex-end; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bubble.out .kind, .bubble.out .at { color: #b9b5ad; }
.bubble.handoff {
  align-self: center; max-width: 82%; background: var(--paper); color: var(--dim);
  border-style: dashed; text-align: center;
}
.bubble.handoff .kind { color: var(--dim); }
.bubble-image { display: block; max-width: 320px; width: 100%; height: auto; margin: 2px 0 9px; }
.bubble-document {
  display: block; margin: 2px 0 9px; padding: 9px 11px; border: 1px solid currentColor;
  color: inherit; font-family: var(--mono); font-size: 11px; text-decoration: none; word-break: break-all;
}
.bubble-document:hover { text-decoration: underline; }

.composer { border-top: 1px solid var(--line-strong); padding: 16px 28px; }
.composer.disabled { opacity: 0.4; pointer-events: none; }
.composer .row1 { display: flex; gap: 10px; margin-bottom: 12px; }
.composer .row1 input { flex: 1; }
.composer .types { display: flex; flex-wrap: wrap; gap: 8px; }
.composer .chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 9px 14px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  cursor: pointer; transition: background 80ms linear, color 80ms linear;
}
.composer .chip:hover { background: var(--ink); color: var(--paper); }
.composer .chip.active { background: var(--ink); color: var(--paper); }
.composer .chip:disabled { opacity: 0.38; cursor: not-allowed; }
.attachment-status {
  display: inline-flex; align-items: center; gap: 9px; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 10.5px; color: var(--dim);
}
.attachment-status[hidden] { display: none; }
.attachment-status > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 360px; }
.attachment-remove {
  border: 0; background: transparent; color: var(--ink); cursor: pointer; padding: 0 2px;
  font-family: var(--mono); font-size: 17px; line-height: 1;
}

@media (max-width: 560px) {
  h1 { font-size: 30px; }
  .cmd { grid-template-columns: 30px 1fr; }
  .cmd .go, .cmd-actions { grid-column: 2; justify-self: start; margin-top: 4px; }
  .convos { width: 130px; }
}

/* Login */
.login-box { max-width: 420px; }
.login-box label.label { display: block; margin: 0 0 10px; }
.login-box .field { margin: 0 0 22px; }
.login-err { font-family: var(--mono); font-size: 12px; font-weight: 600; margin: 16px 0 0; min-height: 18px; }

/* Settings */
.btn.sm { padding: 9px 15px; }

/* Boolean settings render as a switch; flipping it saves immediately */
.switch {
  position: relative; width: 52px; height: 28px; padding: 0;
  border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  display: inline-block; vertical-align: middle;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  background: var(--dimmer); transition: left 120ms ease, background 120ms ease;
}
.switch.on::after { left: 27px; background: var(--ink); }
.switch:disabled { opacity: 0.38; cursor: not-allowed; }
.switch-state { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-left: 12px; vertical-align: middle; }

.set-status { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--dim); }
.set-status.ok { color: var(--ink); }
.set-status.err { color: var(--ink); font-weight: 600; }
/* Inline per-action result, sitting in the same row as its trigger */
.row-status { align-self: center; white-space: nowrap; }
.row-status:empty { display: none; }

.set-rows { border-top: 1px solid var(--line-strong); margin-top: 6px; }
.set-row {
  display: grid; grid-template-columns: 230px 1fr auto; gap: 20px; align-items: start;
  padding: 16px 6px; border-bottom: 1px solid var(--line);
}
.set-row .rk { padding-top: 12px; }
.set-row .nm { font-size: 15px; font-weight: 500; letter-spacing: -0.01em; }
.set-row .src {
  display: inline-block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--line); padding: 2px 7px; color: var(--dim);
}
.set-row .src.db { border-color: var(--line-strong); color: var(--ink); }
.set-row .ri input, .set-row .ri select { width: 100%; }
.set-row input[type="file"] {
  padding: 10px 12px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--ink); font-family: var(--mono); font-size: 12px;
}
.set-row input[type="file"]::file-selector-button {
  margin-right: 12px; padding: 7px 11px; border: 1px solid var(--line-strong);
  background: transparent; color: var(--ink); font-family: var(--mono); cursor: pointer;
}
.set-row select {
  padding: 13px 15px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--mono); font-size: 14px;
}
.set-row select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.set-row input:disabled { color: var(--dim); border-color: var(--line); }
.set-row .ri .note { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 8px; }
.set-acts { display: flex; gap: 8px; padding-top: 2px; }
/* Wide enough for the widest label either button ever shows ("✓ Saved" /
   "✓ Reset"), so the success feedback swapping into the trigger's own label
   never changes the button's width — the whole point of putting it there is
   that nothing in the row moves. */
.set-row .set-acts .btn { min-width: 86px; }

.manage-copy { margin: 0 0 20px; }
.manage-link { color: var(--ink); text-decoration: none; }
.inline-fields { display: grid; grid-template-columns: 1fr 1.2fr 0.8fr; gap: 10px; }

/* New order taken in person */
.new-order { border: 1px solid var(--line-strong); padding: 20px; margin-top: 14px; }
/* Breathing room. The field titles sat directly on the neighbouring borders —
   a title must read as belonging to the control BELOW it, which takes real
   space above the title and a small fixed gap under it. Scoped to this form:
   .stacked-input elsewhere (manage.html) keeps the global 10px. */
.new-order label { display: block; }
.new-order label > input, .new-order label > select, .new-order label > .dd { margin-top: 7px; }
.new-order .stacked-input { margin-top: 22px; }
.new-row {
  display: grid;
  grid-template-columns: 1fr 0.8fr 0.6fr auto;
  gap: 10px;
  align-items: end;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.new-row:last-child { border-bottom: 0; }
.new-errors {
  border: 1px solid var(--line-strong);
  padding: 12px 14px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
}
.new-errors[hidden] { display: none; }
.new-errors div + div { margin-top: 6px; }
@media (max-width: 720px) {
  .new-row { grid-template-columns: 1fr 1fr; }
}

/* Custom dropdown — the Select2 combobox scheme rebuilt without the library:
   the native <select> stays in the DOM (hidden) as the value's source of
   truth, a toggle shows the current choice, and picking from the panel
   writes back through the select's own input/change events, so form logic
   never knows the difference. The search field is always visible, as in the
   original. If the enhancer never runs, the native select still works.
   Monochrome by mandate: option dots are filled/hollow ink (the ops-dot
   idiom), never coloured; the highlighted row is the system's inversion. */
.dd { position: relative; }
.dd > select { display: none; }
.dd-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 13px 15px; border: 1px solid var(--line-strong);
  border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.01em;
  cursor: pointer; text-align: left;
}
.dd-toggle:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.dd-value { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-caret {
  flex: 0 0 auto; width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
}
.dd.open .dd-caret { transform: rotate(180deg); }
.dd-menu {
  position: absolute; top: calc(100% - 1px); left: 0; right: 0; z-index: 30;
  background: var(--paper); border: 1px solid var(--line-strong);
  max-height: 240px; overflow-y: auto;
}
.dd-menu[hidden] { display: none; }
.dd-search input {
  width: 100%; padding: 10px 15px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: 0; background: transparent; color: var(--ink);
  font-family: var(--mono); font-size: 12px;
}
/* The global input:focus inset ring reads as a second border inside the
   panel — the panel's own border already frames the field. */
.dd-search input:focus { outline: none; box-shadow: none; }
.dd-option {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; font-family: var(--mono); font-size: 13px;
  color: var(--ink); cursor: pointer;
}
.dd-option + .dd-option { border-top: 1px solid var(--line); }
.dd-option[aria-selected="true"] .dd-label { text-decoration: underline; text-underline-offset: 3px; }
.dd-option.hl { background: var(--ink); color: var(--paper); }
/* Same fixed-box treatment as .ops-dot: the dot must never be stretched. */
.dd-dot {
  width: 8px; height: 8px; min-width: 8px; max-width: 8px;
  min-height: 8px; max-height: 8px; border-radius: 50%;
  background: var(--ink); flex: 0 0 auto;
}
.dd-dot.hollow { background: transparent; box-shadow: inset 0 0 0 1px var(--ink); }
.dd-option.hl .dd-dot { background: var(--paper); }
.dd-option.hl .dd-dot.hollow { background: transparent; box-shadow: inset 0 0 0 1px var(--paper); }
.dd-empty { padding: 11px 15px; font-family: var(--mono); font-size: 11px; color: var(--dim); }
.stacked-input { margin-top: 10px; }
.compact-list .feed { margin-bottom: 0; }

.calendar-list {
  border-top: 1px solid var(--line-strong); margin-top: 22px; max-height: 420px; overflow-y: auto;
}
.calendar-row {
  display: grid; grid-template-columns: 120px 1fr; gap: 20px;
  padding: 12px 6px; border-bottom: 1px solid var(--line);
}
.calendar-date, .calendar-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); }
.calendar-name { font-size: 14px; font-weight: 500; }
.calendar-meta { margin-top: 3px; text-transform: lowercase; }

.filter-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.order-list { display: grid; gap: 14px; }

/* Orders: list view (one row per customer) */
.view-toggle { display: flex; gap: 8px; margin-bottom: 20px; }
.customer-rows { border-top: 1px solid var(--line-strong); }
.customer-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 18px; align-items: center;
  padding: 16px 6px; border-bottom: 1px solid var(--line); cursor: pointer;
  transition: background 80ms linear;
}
.customer-row:hover { background: #ecebe7; }
.customer-row .cust-name { font-size: 18px; font-weight: 600; }
.customer-row .cust-meta { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 3px; }
.cust-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 380px; }
.customer-row .go {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid var(--line-strong); padding: 9px 16px; white-space: nowrap;
  transition: background 80ms linear, color 80ms linear;
}
.customer-row:hover .go { background: var(--ink); color: var(--paper); }
.detail-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.detail-head h2 { margin: 0; font-size: 24px; font-weight: 600; }
.detail-head .mono-sub { font-family: var(--mono); font-size: 11px; color: var(--dim); }

/* Orders: calendar view */
.cal-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cal-title { font-size: 20px; font-weight: 600; min-width: 180px; text-align: center; }
.cal-head { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--dim); padding: 6px 8px;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line-strong); }
.cal-day { background: var(--paper); min-height: 88px; padding: 8px; cursor: pointer; }
.cal-day.out { background: #f1f0ed; cursor: default; }
.cal-day.out .dn { color: var(--dimmer); }
.cal-day.closed { background: #ecebe7; }
.cal-day.selected { box-shadow: inset 0 0 0 2px var(--ink); }
.cal-day .dn { font-family: var(--mono); font-size: 11px; }
.cal-day.today .dn { font-weight: 600; text-decoration: underline; }
.cal-day .holiday {
  font-family: var(--mono); font-size: 9.5px; color: var(--dim); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-line { font-family: var(--mono); font-size: 10.5px; margin-top: 5px; }
.cal-line.delivered { font-weight: 600; }
.cal-line.pending { color: var(--dim); }
.cal-drill { margin-top: 18px; }

/* Orders: customer attachments (receipts) */
.receipts-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.receipt {
  display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--line-strong);
  padding: 8px; text-decoration: none; color: var(--ink); max-width: 200px;
}
.receipt img { display: block; max-width: 184px; height: auto; }
.receipt-doc { font-family: var(--mono); font-size: 11px; word-break: break-all; }
.receipt-time { font-family: var(--mono); font-size: 10px; color: var(--dim); }
.order-card { border: 1px solid var(--line-strong); padding: 20px; }
.order-card.status-conflict { border-width: 2px; }
.order-top { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.order-id, .order-contact {
  font-family: var(--mono); font-size: 11px; color: var(--dim); letter-spacing: 0.04em;
}
.order-card h2 { margin: 5px 0 4px; font-size: 24px; font-weight: 600; }
.order-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.verify-toggle {
  display: flex; align-items: center; gap: 9px; border: 1px solid var(--line-strong);
  padding: 9px 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.08em; cursor: pointer; white-space: nowrap;
}
.verify-toggle input { accent-color: var(--ink); width: 16px; height: 16px; }
.order-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 24px;
  padding: 18px 0; margin-top: 18px; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.order-grid .wide { grid-column: 1 / -1; }
.order-grid span { display: block; font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.order-grid b { display: block; margin-top: 4px; font-size: 14px; font-weight: 500; word-break: break-word; }
.candidate-schedule { border-bottom: 1px solid var(--line); padding: 10px 0; }
.candidate-schedule > div { padding: 8px 4px; }
.candidate-schedule b { display: block; font-size: 13px; font-weight: 500; }
.candidate-schedule span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--dim); word-break: break-word; }
.order-warning { border: 1px solid var(--line-strong); padding: 12px 14px; margin-top: 16px; font-size: 13px; }
.order-warning b { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.order-remarks { border: 1px solid var(--line); padding: 12px 14px; margin-top: 16px; font-size: 13px; }
.order-remarks b { display: block; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; color: var(--dim); }
.order-remarks div { word-break: break-all; line-height: 1.5; }
.order-remarks a { color: var(--ink); }
.editor-remarks { grid-column: 1 / -1; }
.editor-remarks textarea {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13px; resize: vertical;
}
.tracking-select {
  width: 100%; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: 0;
  background: transparent; color: var(--ink); font-family: var(--mono); font-size: 11px;
  text-transform: uppercase;
}
.order-grid .tracking-select { margin-top: 4px; }
.tracking-block { border-top: 1px solid var(--line-strong); margin-top: 18px; }
.tracking-title {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 4px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim);
}
.tracking-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 18px;
  padding: 12px 4px; border-top: 1px solid var(--line);
}
.tracking-row b { display: block; font-size: 13px; font-weight: 500; }
.tracking-row span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10px; color: var(--dim); word-break: break-word; }
.delivery-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.delivery-actions .tracking-select { flex: 1; min-width: 0; }
.tracking-empty { padding: 16px 4px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--dim); }
.automation-toggle { color: var(--ink); cursor: pointer; }
.automation-toggle input { accent-color: var(--ink); vertical-align: -2px; }
.notification-state { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.notification-state > span { margin: 0; color: var(--ink); text-transform: uppercase; }
.notification-state .btn { padding: 7px 9px; }
.order-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.editor-error { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.order-editor { border-top: 1px solid var(--line-strong); margin-top: 18px; padding-top: 18px; }
.official-delivery-editor { border-top: 1px solid var(--line-strong); padding: 12px 4px 4px; }
.editor-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.editor-grid label { font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.editor-grid label.wide { grid-column: 1 / -1; }
.editor-grid input, .editor-grid select {
  display: block; width: 100%; margin-top: 6px; padding: 11px 12px; border: 1px solid var(--line-strong);
  border-radius: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 12px;
}
.delivery-editor-row {
  display: grid; grid-template-columns: 150px 110px 90px 130px minmax(220px, 1fr) auto;
  gap: 12px; align-items: end; padding: 12px 4px; border-top: 1px solid var(--line);
}
.delivery-editor-row label { font-family: var(--mono); font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.08em; }
.delivery-editor-row input, .delivery-editor-row select {
  display: block; width: 100%; margin-top: 6px; padding: 9px 10px; border: 1px solid var(--line-strong);
  border-radius: 0; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 11px;
}
.delivery-editor-row .remove-delivery { margin-bottom: 1px; }

@media (max-width: 620px) {
  .set-row { grid-template-columns: 1fr; gap: 10px; }
  .set-row .rk { padding-top: 0; }
  .set-acts { padding-top: 0; }
  .inline-fields, .editor-grid { grid-template-columns: 1fr; }
  .editor-grid label.wide { grid-column: auto; }
  .order-top { flex-direction: column; }
  .order-grid { grid-template-columns: 1fr 1fr; }
  .tracking-row { grid-template-columns: 1fr; }
  .delivery-actions { justify-content: flex-start; }
  .delivery-editor-row { grid-template-columns: 1fr 1fr; }
  .delivery-editor-row .delivery-address { grid-column: 1 / -1; }
  .notification-state { justify-content: flex-start; }
  .calendar-row { grid-template-columns: 90px 1fr; }
  .card.in, .card.out, .card.operator { margin-left: 0; margin-right: 0; }
}