/* Veltner workspace.
   Theme: charcoal and terracotta, per docs/reference/charcoal-terracotta-ui.png.
   Neutral charcoal surfaces, soft grey type, and a single terracotta accent
   taken from the Veltner wordmark, used only for primary actions, selection,
   links and focus. Composition from docs/reference/layout.png. */

:root {
  /* Charcoal + terracotta.
     Surfaces are neutral charcoal; the only chroma in the interface is the
     terracotta accent sampled from the Veltner wordmark (#b34a1b), plus the
     muted status colours. Change a value here and it changes everywhere. */

  /* --- neutral surfaces ------------------------------------------------- */
  --bg:            #111111;   /* page */
  --surface-1:     #151515;   /* top bar, sidebar */
  --surface-2:     #191919;   /* panels */
  --surface-3:     #202020;   /* elevated: chips, inputs, cards */
  --raised:        #272727;   /* hover on an elevated surface */

  --line:          #303030;   /* borders and separators */
  --line-strong:   #3d3d3d;   /* a border that needs to read as an edge */

  /* --- type ------------------------------------------------------------- */
  --text:          #e7e7e7;   /* primary        14.2:1 on panel */
  --text-2:        #a7a7a7;   /* secondary       7.3:1 on panel */
  --text-3:        #7a7a7a;   /* tertiary/meta   4.1:1 on panel */
  --text-disabled: #5c5c5c;   /* still legible, clearly inactive */

  /* --- terracotta accent, from the wordmark ----------------------------- */
  --accent:        #b34a1b;   /* the brand colour itself */
  --accent-strong: #c2551f;   /* primary button, top of its gradient */
  --accent-deep:   #a84417;   /* bottom of that gradient */
  --accent-hover:  #d2602a;
  --accent-dim:    #bd6440;   /* small icons that should not shout */
  --accent-text:   #e0734a;   /* links and accented text  5.6:1 on panel */
  --accent-bright: #ee8057;   /* hover for accented text */
  --accent-on:     #fff6f1;   /* label on a terracotta fill  ~4.6:1 */

  --accent-soft:   rgba(179, 74, 27, .14);   /* selected row background */
  --accent-soft-2: rgba(179, 74, 27, .22);   /* stronger selected state */
  --accent-wash:   rgba(179, 74, 27, .07);   /* quiet local tint */
  --accent-line:   rgba(179, 74, 27, .55);   /* accented border */
  --accent-ring:   rgba(179, 74, 27, .32);   /* focus ring */

  /* --- meaningful statuses, deliberately not terracotta ------------------ */
  --green:         #7fae72;   /* Won            hue 107 */
  --green-soft:    rgba(127, 174, 114, .13);
  --green-line:    rgba(127, 174, 114, .40);
  --red:           #d97070;   /* Lost, overdue  hue   0 */
  --red-soft:      rgba(217, 112, 112, .13);
  --red-line:      rgba(217, 112, 112, .42);
  --amber:         #c9a24f;   /* caution        hue  41 */
  --amber-soft:    rgba(201, 162, 79, .13);
  --amber-line:    rgba(201, 162, 79, .40);
  --neutral-soft:  rgba(167, 167, 167, .10);

  /* --- shared ------------------------------------------------------------ */
  --hover-film:    rgba(255, 255, 255, .030);  /* row hover on dark */
  --hover-film-2:  rgba(255, 255, 255, .045);
  --scrim:         rgba(17, 17, 17, .92);      /* overlays on the map band */

  --radius:   10px;
  --radius-s: 7px;
  --sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", Menlo, monospace;

  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.35);
  --sidebar-w: 228px;
  --rail-w: 318px;
  --subnav-w: 198px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--accent-bright); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- shell -- */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-rows: 58px 1fr;
  grid-template-areas: "topbar topbar" "sidebar main";
  min-height: 100vh;
}

.topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: calc(var(--sidebar-w) - 40px); flex: none; }

.brand-name { font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }

.topbar-search { flex: 1; min-width: 0; display: flex; justify-content: center; }

.search-field {
  position: relative; width: 100%; max-width: 580px;
}

.search-field input[type="text"] {
  width: 100%;
  padding: 9px 14px 9px 36px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit; font-size: 13.5px;
}
.search-field input[type="text"]::placeholder { color: var(--text-3); }
.search-field input[type="text"]:focus {
  border-color: var(--accent-strong);
  background: var(--surface-3);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.search-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-3); pointer-events: none; display: grid; place-items: center;
}

.topbar-right { display: flex; align-items: center; gap: 14px; flex: none; }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px; border-radius: 8px; border: 1px solid transparent;
}
.user-chip:hover { border-color: var(--line-strong); background: var(--surface-2); }
.user-chip .avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); border: 1px solid var(--accent-deep);
  color: var(--accent-on); display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
}
.user-chip .who { line-height: 1.2; }
.user-chip .who strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--text); }
.user-chip .who span { font-size: 10.5px; color: var(--text-3); }

.linkbutton {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--text-3); font: inherit; font-size: 12px; cursor: pointer;
}
.linkbutton:hover { color: var(--accent-text); text-decoration: underline; }

/* -------------------------------------------------------------- sidebar -- */

.sidebar {
  grid-area: sidebar;
  background: var(--surface-1);
  border-right: 1px solid var(--line);
  padding: 16px 12px;
  display: flex; flex-direction: column; gap: 3px;
  position: sticky; top: 58px; align-self: start;
  height: calc(100vh - 58px); overflow-y: auto;
}

.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--text-2); font-size: 13.5px; font-weight: 500;
  border: 1px solid transparent; text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-bright);
  font-weight: 600;
}
.nav-item.active svg { color: var(--accent-text); }
.nav-item svg { flex: none; color: var(--text-3); }
.nav-item.is-later { opacity: .42; cursor: default; }
.nav-item.is-later:hover { background: none; color: var(--text-2); }

.nav-divider { height: 1px; background: var(--line); margin: 14px 4px; }

.nav-label {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); padding: 6px 12px 4px;
}

/* ----------------------------------------------------------------- main -- */

.main { grid-area: main; padding: 18px 20px 60px; max-width: 1760px; min-width: 0; }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 16px; flex-wrap: wrap;
}
.page-head h1 { font-size: 22px; }
.page-head p { margin: 4px 0 0; color: var(--text-3); font-size: 13px; }

/* ------------------------------------------------------------ map band -- */

.map-band {
  position: relative;
  height: 330px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    radial-gradient(900px 320px at 70% 42%, rgba(255,255,255,.028), transparent 72%),
    linear-gradient(180deg, #1a1a1a 0%, #131313 100%);
  overflow: hidden;
  margin-bottom: 18px;
}

/* The viewport keeps the generated map's 1000 x 387.5 ratio, so a pin placed
   with map_x/map_y lands on the matching coastline at any window width. */
.map-viewport {
  position: absolute; top: 14px; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  aspect-ratio: 1000 / 387.5;
  max-width: calc(100% - 28px);
}
.map-world {
  position: absolute; inset: 0;
  background-color: rgba(200,200,200,.22);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-position: center; mask-position: center;
}

.map-plane { position: absolute; inset: 0; }

.map-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--accent-text);
  border: 2px solid var(--bg);
  box-shadow: 0 0 0 3px var(--accent-ring);
  display: block;
}
.map-pin:hover, .map-pin:focus-visible {
  background: var(--accent-hover);
  box-shadow: 0 0 0 5px var(--accent-soft-2);
}
.map-pin .pin-label {
  position: absolute; left: 16px; top: -5px;
  white-space: nowrap; font-size: 11px; font-weight: 600;
  color: var(--text); background: var(--scrim);
  border: 1px solid var(--line-strong); border-radius: 5px;
  padding: 2px 7px; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.map-pin:hover .pin-label, .map-pin:focus-visible .pin-label { opacity: 1; }

.map-selector {
  position: absolute; left: 16px; top: 16px;
  display: flex; align-items: center; gap: 11px;
  background: var(--scrim);
  border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 9px 14px;
  backdrop-filter: blur(6px);
}
.map-selector .mark {
  width: 28px; height: 28px; border-radius: 7px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  display: grid; place-items: center; color: var(--accent-text);
}
.map-selector .meta span {
  display: block; font-size: 10.5px; color: var(--text-3);
  letter-spacing: .04em; text-transform: uppercase;
}
.map-selector .meta strong { font-size: 18px; font-weight: 650; }

.map-legend {
  position: absolute; right: 16px; top: 16px;
  min-width: 182px;
  background: var(--scrim);
  border: 1px solid var(--line-strong);
  border-radius: 9px; padding: 10px 12px;
  backdrop-filter: blur(6px);
}
.map-legend .row {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 0; font-size: 12px; color: var(--text-2);
}
.map-legend .row strong { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }
.map-legend .dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.map-empty {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  background: var(--scrim);
  border: 1px dashed var(--line-strong);
  border-radius: 8px; padding: 8px 14px;
  font-size: 12px; color: var(--text-2); text-align: center;
}
.map-empty strong { color: var(--accent-text); font-weight: 600; }

/* --------------------------------------------------------------- panels -- */

.panel {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.panel + .panel { margin-top: 14px; }

.panel-head {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--hover-film), transparent);
}
.panel-head h3 { font-size: 13.5px; font-weight: 600; letter-spacing: .005em; }
.panel-head .icon { color: var(--accent-dim); display: grid; place-items: center; }
.panel-head .spacer { margin-left: auto; }
.panel-body { padding: 15px; }
.panel-body.tight { padding: 11px 15px; }

/* ------------------------------------------------------- company header -- */

.company-header {
  display: flex; align-items: flex-start; gap: 18px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.company-logo {
  width: 74px; height: 74px; flex: none;
  border-radius: 12px;
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  display: grid; place-items: center;
  font-size: 27px; font-weight: 700; color: var(--accent-text);
  letter-spacing: .02em; overflow: hidden;
}
.company-logo img { width: 100%; height: 100%; object-fit: contain; }

.company-id { flex: 1; min-width: 0; }
.company-id .line1 { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.company-id h1 { font-size: 27px; letter-spacing: -0.025em; }
.company-id .line2 {
  margin-top: 7px; display: flex; align-items: center;
  gap: 11px; flex-wrap: wrap; color: var(--text-2); font-size: 13px;
}
.company-id .sep { color: var(--line-strong); }
.company-id .line3 { margin-top: 7px; font-size: 12px; color: var(--text-3); }

.header-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

/* --------------------------------------------------------------- chips -- */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; line-height: 1.5;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  color: var(--text-2); white-space: nowrap;
}
.chip-accent   { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.chip-brown  { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-bright); }
.chip-amber  { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }
.chip-green  { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }
.chip-red    { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }
.chip-demo   { background: var(--amber-soft); border-color: var(--amber-line); color: var(--amber); }

/* An explicit, visible unknown. Never an empty gap. */
.unknown {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 5px;
  font-size: 11.5px; font-weight: 500; font-style: normal;
  background: var(--neutral-soft);
  border: 1px dashed var(--line-strong);
  color: var(--text-3);
  white-space: nowrap;
}

/* -------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: 8px;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--line-strong);
  background: var(--surface-3); color: var(--text);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.btn:hover { background: var(--raised); border-color: var(--accent-line); color: var(--text); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: linear-gradient(180deg, var(--accent-strong) 0%, var(--accent-deep) 100%);
  border-color: var(--accent-deep); color: var(--accent-on);
}
.btn-primary:hover { background: linear-gradient(180deg, var(--accent-hover) 0%, var(--accent-strong) 100%); color: var(--accent-on); }
.btn-ghost { background: transparent; }
.btn-small { padding: 5px 10px; font-size: 11.5px; }
.btn-danger:hover { border-color: var(--red-line); color: var(--red); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------- workspace grid -- */

.workspace {
  display: grid;
  grid-template-columns: var(--subnav-w) minmax(0, 1fr) var(--rail-w);
  gap: 16px;
  align-items: start;
}

.subnav {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px;
  position: sticky; top: 74px;
}
.subnav a, .subnav span.item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border-radius: 7px;
  color: var(--text-2); font-size: 12.5px; font-weight: 500;
  text-decoration: none; border: 1px solid transparent;
}
.subnav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.subnav a.active, .subnav .item.active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-bright); font-weight: 600;
}
.subnav .count {
  margin-left: auto; font-size: 11px; color: var(--text-3);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: 5px; padding: 0 6px; min-width: 21px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.subnav a.active .count { background: rgba(0,0,0,.26); border-color: var(--accent-line); color: var(--accent-text); }
.subnav .item.later { opacity: .4; }
.subnav svg { flex: none; color: var(--text-3); }
.subnav a.active svg, .subnav .item.active svg { color: var(--accent-text); }

.col-main { min-width: 0; }
.rail { min-width: 0; position: sticky; top: 74px; }

.card-row {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; margin-bottom: 14px;
}
.card-row.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* --------------------------------------------------------- data display -- */

.kv { display: flex; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 12.5px; }
.kv + .kv { border-top: 1px solid var(--line); }
.kv dt, .kv .k { color: var(--text-3); min-width: 92px; flex: 0 1 auto; }
.kv dd, .kv .v {
  margin: 0; color: var(--text); text-align: right; margin-left: auto;
  min-width: 0; overflow-wrap: break-word; word-break: normal;
}
/* Chips in a value cell must not be clipped by the panel edge. */
.kv .v .chip, .kv .v .unknown { white-space: normal; text-align: right; }

.product-figure {
  width: 100%; height: 104px; border-radius: 8px;
  background: repeating-linear-gradient(135deg, var(--surface-2) 0 9px, var(--surface-3) 9px 18px);
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--text-3); font-size: 11.5px; text-align: center; padding: 10px;
  margin-bottom: 12px;
}

.prose { font-size: 13px; line-height: 1.62; color: var(--text-2); white-space: pre-wrap; }
.prose.bright { color: var(--text); }

.stage-bar {
  border-left: 3px solid var(--accent-dim);
  padding-left: 13px;
}

.empty {
  padding: 16px; text-align: center;
  border: 1px dashed var(--line-strong); border-radius: 8px;
  color: var(--text-3); font-size: 12.5px; background: var(--hover-film);
}
.empty strong { display: block; color: var(--text-2); margin-bottom: 3px; font-weight: 600; }

/* --------------------------------------------------------- activity feed -- */

.filterbar {
  display: flex; align-items: center; gap: 7px;
  flex-wrap: wrap; padding: 11px 15px; border-bottom: 1px solid var(--line);
}
.filterchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 600;
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--text-2); cursor: pointer; text-decoration: none;
}
.filterchip:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.filterchip.active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-bright); }
.filterchip .n {
  font-size: 10.5px; padding: 0 5px; border-radius: 4px;
  background: rgba(0,0,0,.28); color: inherit; opacity: .8;
  font-variant-numeric: tabular-nums;
}

.entry { display: flex; gap: 12px; padding: 14px 15px; border-bottom: 1px solid var(--line); }
.entry:last-child { border-bottom: 0; }
.entry:hover { background: var(--hover-film); }
.entry.pinned { background: var(--accent-wash); border-left: 2px solid var(--accent); }

.entry-icon {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--accent-dim);
}
.entry-main { min-width: 0; flex: 1; }
.entry-body { font-size: 13px; color: var(--text); line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.entry-meta {
  margin-top: 7px; display: flex; align-items: center; gap: 9px;
  flex-wrap: wrap; font-size: 11.5px; color: var(--text-3);
}
.entry-meta .author { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-weight: 500; }
.entry-meta .mini-avatar {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-bright); display: grid; place-items: center; font-size: 9px; font-weight: 700;
}

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

.task {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.task:last-child { border-bottom: 0; }
.task-title { font-size: 13px; color: var(--text); font-weight: 500; }
.task-meta { margin-top: 5px; display: flex; gap: 9px; flex-wrap: wrap; font-size: 11.5px; color: var(--text-3); align-items: center; }
.task.done .task-title { color: var(--text-3); text-decoration: line-through; }
.task-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }

/* ---------------------------------------------------------- glossary -- */

.glossary-item { border-bottom: 1px solid var(--line); }
.glossary-item:last-child { border-bottom: 0; }
.glossary-item summary {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 15px; cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.glossary-item summary::-webkit-details-marker { display: none; }
.glossary-item summary:hover { background: var(--surface-3); }
.glossary-item summary .caret { margin-left: auto; color: var(--text-3); transition: transform .15s ease; }
.glossary-item[open] summary { background: var(--accent-soft); color: var(--accent-bright); }
.glossary-item[open] summary .caret { transform: rotate(180deg); color: var(--accent-text); }
.glossary-def { padding: 0 15px 13px; font-size: 12.5px; color: var(--text-2); line-height: 1.6; }
.glossary-def .src { display: block; margin-top: 6px; font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------- company list -- */

.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 13px; }

.company-card {
  display: flex; gap: 13px; padding: 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; color: inherit;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.company-card:hover {
  border-color: var(--accent-strong); background: var(--surface-3);
  text-decoration: none; transform: translateY(-1px);
}
.company-card:focus-visible { border-color: var(--accent-text); }
.company-card .avatar-sq {
  width: 46px; height: 46px; flex: none; border-radius: 10px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  display: grid; place-items: center; color: var(--accent-text);
  font-size: 15px; font-weight: 700; overflow: hidden;
}
.company-card .avatar-sq img { width: 100%; height: 100%; object-fit: contain; }
.company-card h3 { font-size: 15px; margin-bottom: 3px; }
.company-card .sub { font-size: 12px; color: var(--text-3); margin-bottom: 9px; }
.company-card .stats { display: flex; gap: 13px; font-size: 11.5px; color: var(--text-3); flex-wrap: wrap; }
.company-card .stats b { color: var(--text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

.stat-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.stat-tile {
  flex: 1; min-width: 132px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px;
}
.stat-tile .n { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-tile .l { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .07em; margin-top: 2px; }
.stat-tile.accent .n { color: var(--accent-text); }

/* --------------------------------------------------------------- forms -- */

.form-grid { display: grid; gap: 15px; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.field label, .field > p > label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-2); margin-bottom: 6px;
}
.field .helptext, .field .help {
  display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-3);
}

input[type="text"], input[type="url"], input[type="email"], input[type="date"],
input[type="number"], input[type="password"], textarea, select {
  width: 100%;
  padding: 9px 11px;
  background: var(--surface-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
  color: var(--text);
  font-family: inherit; font-size: 13px;
}
textarea { resize: vertical; min-height: 64px; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent-strong);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
select option { background: var(--surface-1); color: var(--text); }
input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--accent-strong); }
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7) sepia(.4); cursor: pointer; }

.checkrow { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.checkrow label { margin: 0; font-weight: 500; }

.form-actions {
  display: flex; gap: 10px; align-items: center;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line);
}

.errorlist {
  list-style: none; margin: 0 0 12px; padding: 10px 13px;
  background: var(--red-soft); border: 1px solid var(--red-line);
  border-radius: var(--radius-s); color: var(--red); font-size: 12.5px;
}
.errorlist li + li { margin-top: 4px; }
.field .errorlist { margin: 6px 0 0; }

.messages { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.messages li {
  padding: 10px 14px; border-radius: var(--radius-s); font-size: 13px;
  background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green);
}
.messages li.error { background: var(--red-soft); border-color: var(--red-line); color: var(--red); }

.inline-form { display: flex; gap: 9px; align-items: flex-start; }
.inline-form textarea { min-height: 42px; }

.form-shell { max-width: 760px; }

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

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: radial-gradient(720px 400px at 50% 8%, var(--accent-wash), transparent 70%), var(--bg); }
.login-card {
  width: 100%; max-width: 392px;
  background: var(--surface-2); border: 1px solid var(--line-strong);
  border-radius: 14px; padding: 30px; box-shadow: var(--shadow);
}
.login-card .brand { justify-content: center; margin-bottom: 7px; min-width: 0; }
.login-card h1 { font-size: 19px; text-align: center; margin-bottom: 4px; }
.login-card .sub { text-align: center; color: var(--text-3); font-size: 12.5px; margin-bottom: 22px; }
.login-card .field + .field { margin-top: 14px; }
.login-card .btn { width: 100%; justify-content: center; margin-top: 20px; padding: 10px; }
.login-note {
  margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-3); text-align: center; line-height: 1.55;
}

/* --------------------------------------------------------------- table -- */

.table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.table th {
  text-align: left; padding: 9px 13px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-3);
  border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 11px 13px; border-bottom: 1px solid var(--line); color: var(--text-2); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tr:hover td { background: var(--hover-film); }
.table td strong { color: var(--text); font-weight: 600; }

.table-scroll { overflow-x: auto; }

.breadcrumb { font-size: 12px; color: var(--text-3); margin-bottom: 12px; }
.breadcrumb a { color: var(--text-2); }

.htmx-request .htmx-hide { opacity: .5; }

@media (max-width: 1420px) {
  .workspace { grid-template-columns: var(--subnav-w) minmax(0, 1fr); }
  .rail { grid-column: 1 / -1; position: static; }
  .rail .rail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
  .rail .rail-grid .panel + .panel { margin-top: 0; }
}
@media (max-width: 1080px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-areas: "topbar" "main"; }
  .sidebar { display: none; }
  .workspace { grid-template-columns: 1fr; }
  .subnav { position: static; }
  .card-row, .card-row.two { grid-template-columns: 1fr; }
  .form-grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* Keep the header inside the viewport instead of widening the page. */
  .topbar { gap: 10px; padding: 0 12px; }
  .brand { min-width: 0; }
  .brand-logo { height: 20px; }
  .user-chip .who { display: none; }
  .user-chip { padding: 4px; }
  .main { padding: 14px 12px 48px; }
}

/* ------------------------------------------------- scope tabs and paging -- */

.scope-tabs {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 11px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.scope-hint { font-size: 11.5px; color: var(--text-3); margin-left: 6px; }

.pager {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 15px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pager-status { font-size: 12px; color: var(--text-3); margin: 0 auto; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- imported source -- */

.source-panel .panel-body { background: var(--accent-wash); }
.source-note {
  font-size: 11.5px; color: var(--text-3); margin: 0 0 11px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line);
}
.source-text {
  font-size: 12.5px; line-height: 1.62; color: var(--text-2);
  white-space: pre-wrap; word-break: break-word;
  max-height: 290px; overflow-y: auto;
}
.kind-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 5px; font-size: 11px; font-weight: 600;
  border: 1px solid var(--accent-line); background: var(--accent-soft); color: var(--accent-bright);
}
.kind-badge.supplier { background: var(--green-soft); border-color: var(--green-line); color: var(--green); }

/* ------------------------------------------------------- pipeline boards -- */

.pipeline-tabs {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin-bottom: 16px; padding: 9px 11px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pipe-spacer { flex: 1; }

.pipe-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 8px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: var(--text-2); border: 1px solid transparent;
}
.pipe-tab:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.pipe-tab.active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-bright);
}
.pipe-tab .n {
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
  background: rgba(0,0,0,.3); font-variant-numeric: tabular-nums;
}

.view-toggle {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 8px; overflow: hidden;
}
.view-btn {
  padding: 7px 14px; font-size: 12.5px; font-weight: 600;
  color: var(--text-2); text-decoration: none; background: transparent;
}
.view-btn + .view-btn { border-left: 1px solid var(--line-strong); }
.view-btn:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.view-btn.active { background: var(--accent-soft); color: var(--accent-bright); }

.pipeline-filters {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pipeline-scope-note {
  margin-bottom: 14px; padding: 10px 14px; font-size: 12.5px;
  color: var(--text-2);
  background: var(--accent-wash);
  border: 1px solid var(--accent-line); border-radius: var(--radius-s);
}

.board-footnote {
  font-size: 11.5px; color: var(--text-3); margin-top: 16px; max-width: 980px; line-height: 1.6;
}

.stage-error {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 14px; padding: 11px 14px; font-size: 13px;
  background: var(--red-soft); border: 1px solid var(--red-line);
  border-radius: var(--radius-s); color: var(--red);
}
.stage-error .btn { margin-left: auto; }

/* --- columns ------------------------------------------------------------- */

/* The board scrolls sideways inside this container; vertically the page is
   the only scroll area. `overflow-x: auto` alone still let the board subtree
   widen the document's scroll area, so the whole page scrolled sideways and
   carried the header off screen. Paint containment keeps that overflow here.
   The element's height stays automatic, so it grows with the tallest column
   and never becomes a second vertical scroller. */
.board-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  contain: paint;
  padding-bottom: 10px;
  /* Fill the viewport when the board is short, so the columns use the space
     that is there, instead of stopping at an arbitrary height. */
  min-height: max(340px, calc(100vh - 330px));
}
.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 310px;
  gap: 13px;
  /* Stretch: the tallest column sets the height and every other column
     background runs alongside it. */
  align-items: stretch;
  min-height: max(340px, calc(100vh - 330px));
}

.board-col {
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: flex; flex-direction: column;
  /* No height cap and no scroller of its own: a column grows with its cards
     and the page scrolls. */
}
.board-col.is-closed { background: rgba(17,17,17,.55); }
.board-col.is-overflow { border-style: dashed; border-color: var(--line-strong); }

.board-col-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  border-radius: var(--radius) var(--radius) 0 0;
}
.board-col-head h2 {
  font-size: 12px; font-weight: 700; letter-spacing: .055em;
  text-transform: uppercase; color: var(--text-2);
}
.board-col.is-closed .board-col-head h2 { color: var(--text-3); }
.col-count {
  /* Counts stay neutral: terracotta is reserved for actions and selection,
     and the outcome columns below override this with their own colour. */
  margin-left: auto; font-size: 11.5px; font-weight: 700;
  min-width: 24px; text-align: center; padding: 1px 7px;
  border-radius: 999px; background: var(--surface-3);
  border: 1px solid var(--line-strong); color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

.board-col-body {
  padding: 11px; display: flex; flex-direction: column; gap: 11px;
  /* flex: 1 makes the body fill the stretched column, so the empty space under
     a short column's cards is still a drop target. */
  flex: 1; min-height: 90px;
  border-radius: 0 0 var(--radius) var(--radius);
}
.board-col-body.drag-over {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent-line);
}
.col-empty {
  margin: 0; padding: 18px 10px; text-align: center;
  font-size: 12px; color: var(--text-3);
  border: 1px dashed var(--line); border-radius: 8px;
}

/* --- cards --------------------------------------------------------------- */

.opp-card {
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 9px;
  cursor: grab;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
.opp-card:hover { border-color: var(--accent-strong); background: var(--surface-3); }
.opp-card:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
.opp-card.is-dragging { opacity: .45; cursor: grabbing; transform: rotate(-1deg); }
.opp-card.is-saving { opacity: .6; pointer-events: none; }
.opp-card.just-moved {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.opp-card-open { text-decoration: none; color: inherit; display: block; }
.opp-card-open:hover { text-decoration: none; }
.opp-card-head { display: flex; gap: 10px; align-items: flex-start; }

.opp-avatar {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  display: grid; place-items: center; overflow: hidden;
  font-size: 11.5px; font-weight: 700; color: var(--accent-text);
}
.opp-avatar img { width: 100%; height: 100%; object-fit: contain; }

.opp-card-id { min-width: 0; flex: 1; }
.opp-company {
  display: block; font-size: 13px; font-weight: 650; color: var(--text);
  line-height: 1.3; overflow-wrap: break-word;
}
.opp-title {
  display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-3);
  line-height: 1.4; overflow-wrap: break-word;
}

.opp-row { display: flex; flex-direction: column; gap: 2px; }
.opp-k {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}
.opp-v { font-size: 12px; color: var(--text-2); overflow-wrap: break-word; }

.opp-action {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 9px; border-radius: 7px;
  background: var(--hover-film);
  border-left: 2px solid var(--accent-line);
  font-size: 12px; color: var(--text-2);
}
.opp-action.overdue { border-left-color: var(--red); background: var(--red-soft); }
/* With no task to show, the slot stays a single quiet line rather than a
   block that outweighs the rest of the card. */
.opp-action:has(.opp-action-empty) { padding: 6px 9px; border-left-color: var(--line-strong); }
.opp-action-empty { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.opp-action-empty a { font-size: 11.5px; font-weight: 600; }
.opp-action svg { color: var(--accent-dim); vertical-align: -1px; margin-right: 5px; }
.opp-action-text { color: var(--text); line-height: 1.4; overflow-wrap: break-word; }
.opp-action-text.muted { color: var(--text-3); }
.opp-action-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.opp-dates, .opp-money { display: flex; flex-direction: column; gap: 7px; }
.opp-date, .opp-money-item { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.opp-date b, .opp-money-item b { color: var(--text); font-weight: 600; }
.opp-hint { font-size: 10px; color: var(--text-3); font-style: italic; }

.opp-foot {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding-top: 9px; border-top: 1px solid var(--line);
}
.opp-owner { font-size: 11.5px; color: var(--text-3); }
.opp-stage-control { margin-left: auto; }
.opp-stage-control select {
  width: auto; min-width: 118px; padding: 4px 7px;
  font-size: 11px; border-radius: 6px;
  background: var(--surface-1); border-color: var(--line-strong);
}

/* Narrow screens: stack the columns instead of shrinking the type. */
@media (max-width: 880px) {
  .board {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
  }
  .board-col-body { max-height: none; }
  .board-scroll {
    overflow-x: visible;
    contain: none;
    min-height: 0;
  }
  .board { min-height: 0; }
  .pipeline-filters > * { flex: 1 1 100%; }
  .pipeline-filters select, .pipeline-filters .search-field { max-width: none; width: 100%; }
}

.stage-form { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.stage-form label { font-size: 12px; font-weight: 600; color: var(--text-2); }
.stage-form select { width: auto; min-width: 210px; }

.company-board-links {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 8px 15px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-3);
}
.company-board-links a {
  padding: 2px 9px; border-radius: 999px; font-weight: 600;
  border: 1px solid var(--line-strong); color: var(--text-2); text-decoration: none;
}
.company-board-links a:hover {
  background: var(--accent-soft); border-color: var(--accent-line);
  color: var(--accent-bright); text-decoration: none;
}
.subnav .subnav-sub { font-size: 11.5px; padding-left: 22px; color: var(--text-3); }

/* --------------------------------------------------------------- brand -- */
/* The supplied Veltner wordmark, shown at its own aspect ratio and colours. */
.brand-logo { height: 26px; width: auto; display: block; }
.login-logo { height: 34px; margin: 0 auto 6px; }

/* --------------------------------------------------------- company logo -- */
/* One component for lists, headers, boards and detail screens. Dimensions are
   fixed per size so a logo loading late cannot shift the layout. The artwork
   is never recoloured, never cropped to a circle and never stretched. */

.clogo {
  display: inline-grid;
  place-items: center;
  flex: none;
  overflow: hidden;
  border-radius: 9px;
  border: 1px solid var(--line-strong);
  background: var(--surface-3);
}
.clogo img {
  width: 100%;
  height: 100%;
  object-fit: contain;          /* preserves the original proportions */
  display: block;
}

/* A pale tile only where the artwork is dark enough to disappear otherwise.
   Decided per logo at cache time from its own pixels. */
.clogo-image.clogo-back-light {
  background: #f0f0ef;
  border-color: #c9c9c7;
}
.clogo-image.clogo-back-dark { background: var(--surface-1); }

.clogo-initials { color: var(--accent-text); font-weight: 700; letter-spacing: .02em; }

.clogo-sm { width: 32px; height: 32px; font-size: 11.5px; }
.clogo-sm img { padding: 3px; }
.clogo-md { width: 46px; height: 46px; border-radius: 10px; font-size: 15px; }
.clogo-md img { padding: 4px; }
.clogo-lg { width: 74px; height: 74px; border-radius: 12px; font-size: 27px; }
.clogo-lg img { padding: 7px; }

.clogo-preview {
  width: 148px; height: 148px; border-radius: 14px; font-size: 44px;
}
.clogo-preview img { padding: 12px; }

/* A wide wordmark would otherwise shrink to a sliver in a square tile. Less
   padding gives it the full width; it is still contained, never cropped. */
.clogo-wide.clogo-sm img { padding: 2px 1px; }
.clogo-wide.clogo-md img { padding: 3px 2px; }
.clogo-wide.clogo-lg img { padding: 5px 3px; }
.clogo-wide.clogo-preview img { padding: 10px 6px; }

.opp-detail-head { align-items: flex-start; }
.opp-detail-id { display: flex; gap: 16px; align-items: flex-start; }
.opp-detail-company { margin: 3px 0 5px !important; font-size: 13px; font-weight: 600; }

input[type="file"] {
  width: 100%; padding: 9px 11px; font-size: 12.5px; color: var(--text-2);
  background: var(--surface-1); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-s);
}
input[type="file"]::file-selector-button {
  margin-right: 11px; padding: 6px 12px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--text); background: var(--surface-3);
  border: 1px solid var(--line-strong); border-radius: 6px;
}
input[type="file"]::file-selector-button:hover {
  background: var(--raised); border-color: var(--accent-line);
}

/* ===========================================================================
   Charcoal + terracotta: states, scrollbars and pipeline strips
   =========================================================================== */

/* --- selection and focus ------------------------------------------------- */

::selection { background: var(--accent-soft-2); color: var(--text); }

:focus-visible { outline-color: var(--accent); }

/* A keyboard focus ring must be visible on every surface, including on top of
   a terracotta fill, so it pairs a dark halo with the accent. */
.btn:focus-visible,
.pipe-tab:focus-visible,
.filterchip:focus-visible,
.view-btn:focus-visible,
.nav-item:focus-visible,
.subnav a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.btn-primary:focus-visible { outline-color: var(--accent-on); }

/* --- disabled and inactive ----------------------------------------------- */
/* Inactive items stay readable: dimmed by colour, not by near-invisible
   opacity, so "later increment" never looks like a rendering fault. */

.nav-item.is-later,
.subnav .item.later {
  opacity: 1;
  color: var(--text-disabled);
}
.nav-item.is-later svg,
.subnav .item.later svg { color: var(--text-disabled); }
.nav-item.is-later:hover { background: none; color: var(--text-disabled); }

.btn[disabled],
.btn[aria-disabled="true"] {
  opacity: 1;
  color: var(--text-disabled);
  background: var(--surface-2);
  border-color: var(--line);
  cursor: not-allowed;
}
input[disabled], select[disabled], textarea[disabled] {
  color: var(--text-disabled);
  background: var(--surface-2);
  border-color: var(--line);
  cursor: not-allowed;
}

/* --- scrollbars ----------------------------------------------------------- */
/* Slim and quiet: a thin bar with a transparent track and a terracotta thumb
   at low opacity, lifting a little on hover so it is easy to find and grab.
   Opacity, not a lighter colour, keeps it from reading as a bright orange bar.
   Firefox gets the same treatment through scrollbar-width/-color; mouse,
   keyboard and touch scrolling are untouched. */

:root {
  --scroll-thumb:       rgba(179, 74, 27, .30);
  --scroll-thumb-hover: rgba(179, 74, 27, .55);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) transparent;
}

::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: transparent; }

/* The board's horizontal bar is the one people drag most, so it gets a
   slightly taller track while keeping the same muted thumb. */
.board-scroll::-webkit-scrollbar { height: 8px; }
.board-scroll:hover, .table-scroll:hover, .source-text:hover, .sidebar:hover {
  scrollbar-color: var(--scroll-thumb-hover) transparent;
}

/* --- pipeline header strips ----------------------------------------------- */
/* A 3px strip across each column header. These are small status indicators
   that supplement the written label, never a replacement for it: the title and
   count stay fully readable on the usual charcoal header. */

:root {
  --strip-slate:  #6b7785;   /* nothing committed yet */
  --strip-terra:  #b34a1b;   /* the brand accent, for active interest */
  --strip-violet: #7d6a9c;
  --strip-teal:   #4f8c8a;
  --strip-sage:   #9aa88c;   /* collaboration agreed */
  --strip-green:  #6fae5f;   /* won */
  --strip-red:    #c7625f;   /* lost */
  --strip-amber:  #c9a24f;   /* awaiting a decision */
  --strip-muted:  #4a4a4a;   /* a stage that is not part of this board */
}

.board-col-head {
  border-top: 3px solid var(--strip-muted);
  border-radius: var(--radius) var(--radius) 0 0;
}

/* Veltner: Contacted, Interested, Qualified, Proposal sent,
   Collaboration agreed, Won, Lost. */
.board-col[data-stage="contacted"]            > .board-col-head { border-top-color: var(--strip-slate); }
.board-col[data-stage="interested"]           > .board-col-head { border-top-color: var(--strip-terra); }
.board-col[data-stage="qualified"]            > .board-col-head { border-top-color: var(--strip-violet); }
.board-col[data-stage="proposal_sent"]        > .board-col-head { border-top-color: var(--strip-teal); }
.board-col[data-stage="collaboration_agreed"] > .board-col-head { border-top-color: var(--strip-sage); }

/* Supplier: To verify, Need confirmed, Preparing proposal/bid, Submitted,
   Decision, Won, Lost. Same restraint, matched to its own stages. */
.board-col[data-stage="unconfirmed"]    > .board-col-head { border-top-color: var(--strip-slate); }
.board-col[data-stage="need_confirmed"] > .board-col-head { border-top-color: var(--strip-violet); }
.board-col[data-stage="preparing"]      > .board-col-head { border-top-color: var(--strip-teal); }
.board-col[data-stage="submitted"]      > .board-col-head { border-top-color: var(--strip-terra); }
.board-col[data-stage="decision"]       > .board-col-head { border-top-color: var(--strip-amber); }

/* Shared outcomes on both boards. */
.board-col[data-stage="won"]  > .board-col-head { border-top-color: var(--strip-green); }
.board-col[data-stage="lost"] > .board-col-head { border-top-color: var(--strip-red); }

.board-col[data-stage="won"]  .col-count { color: var(--green); border-color: var(--green-line); }
.board-col[data-stage="lost"] .col-count { color: var(--red);   border-color: var(--red-line); }

/* ------------------------------------------------------------------ today -- */

.tday-section + .tday-section { margin-top: 14px; }
.tday-note {
  margin: 0 0 14px; padding: 10px 14px; font-size: 12.5px; color: var(--text-2);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-s);
}
.tday-note .chip { margin-right: 8px; }
.tday-scope {
  margin: 0 0 13px; padding-bottom: 11px; border-bottom: 1px solid var(--line);
  font-size: 11.5px; color: var(--text-3); line-height: 1.6;
}

.tday-list { display: flex; flex-direction: column; }

.tday-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.tday-row:last-child { border-bottom: 0; }
.tday-row:hover { background: var(--hover-film); }
/* Overdue carries a red edge; the row still appears in exactly one section. */
.tday-row.is-overdue { border-left: 3px solid var(--red); background: var(--red-soft); }

.tday-main { min-width: 0; }
.tday-title { font-size: 13.5px; font-weight: 600; color: var(--text); line-height: 1.45; }
.tday-meta {
  margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--text-3);
}
.tday-company { font-weight: 600; }
.tday-sep { color: var(--line-strong); }
.tday-detail {
  margin: 7px 0 0; font-size: 12px; color: var(--text-3); line-height: 1.55;
}

.tday-facts { display: flex; gap: 20px; align-items: flex-start; }
.tday-fact { display: flex; flex-direction: column; gap: 3px; font-size: 12px; white-space: nowrap; }
.tday-fact b { color: var(--text); font-weight: 600; }
.tday-k {
  font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-3); font-weight: 600;
}

.tday-actions { display: flex; align-items: center; gap: 7px; }
.tday-plan { position: relative; }
.tday-plan > summary { list-style: none; cursor: pointer; }
.tday-plan > summary::-webkit-details-marker { display: none; }
.tday-plan[open] > summary { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text); }
.tday-plan-form {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 20;
  display: flex; align-items: center; gap: 8px;
  padding: 11px; white-space: nowrap;
  background: var(--surface-3); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s); box-shadow: var(--shadow);
}
.tday-plan-form select { width: auto; min-width: 150px; }
.tday-plan-form input[type="date"] { width: auto; }

.tday-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.tday-company-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; text-decoration: none; color: inherit;
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tday-company-card:hover {
  border-color: var(--accent-line); background: var(--raised); text-decoration: none;
}
.tday-company-id { min-width: 0; flex: 1; }
.tday-company-id strong { display: block; font-size: 13.5px; color: var(--text); }
.tday-company-sub {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11.5px; color: var(--text-3);
}
.tday-company-cta {
  flex: none; font-size: 11.5px; font-weight: 600; color: var(--accent-text);
}

@media (max-width: 1080px) {
  .tday-row { grid-template-columns: auto minmax(0, 1fr); }
  .tday-facts { grid-column: 1 / -1; gap: 18px; }
  .tday-actions { grid-column: 1 / -1; }
  .tday-plan-form { right: auto; left: 0; flex-wrap: wrap; white-space: normal; }
  .tday-plan-form select, .tday-plan-form input[type="date"] { width: 100%; min-width: 0; }
}

/* -------------------------------------------------------------------- s04 -- */

.gate-list { margin: 0 0 14px; padding: 0; list-style: none; }
.gate-list li {
  padding: 9px 12px; margin-bottom: 7px; font-size: 12.5px;
  border-radius: var(--radius-s); border: 1px solid var(--line);
  background: var(--surface-3); color: var(--text-2);
}
.gate-list li.is-blocking { border-left: 3px solid var(--amber); }
.gate-list li.is-waived { border-left: 3px solid var(--green); color: var(--text-3); }
.gate-form {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.gate-form select, .gate-form input[type="text"] { width: auto; min-width: 200px; flex: 1; }
.gate-exception {
  margin: 11px 0 0; padding: 10px 12px; font-size: 12px; color: var(--text-2);
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: var(--radius-s);
}

.plain-list { margin: 5px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text); }
.plain-list li { margin-bottom: 4px; line-height: 1.5; }
.plain-list.muted li { color: var(--text-3); }

.proposal {
  padding: 13px; margin-bottom: 12px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-s);
}
.proposal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.proposal-warn {
  margin: 0 0 9px; padding: 8px 11px; font-size: 12px; color: var(--amber);
  background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: 6px;
}
.diff { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.diff-side {
  padding: 10px; background: var(--surface-1);
  border: 1px solid var(--line); border-radius: 6px;
}
.decision-form { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }

@media (max-width: 880px) { .diff { grid-template-columns: 1fr; } }

/* The facts column must not be compressed by a long title: its labels were
   being clipped under the action button on Traffic Control rows. */
.tday-facts { min-width: max-content; flex: none; }
@media (max-width: 1080px) { .tday-facts { min-width: 0; } }

/* ----------------------------------------------------------- outreach draft -- */

.draft-rules {
  margin-bottom: 16px; padding: 13px 16px;
  background: var(--amber-soft); border: 1px solid var(--amber-line);
  border-radius: var(--radius); font-size: 12.5px; color: var(--text-2);
}
.draft-rules strong { color: var(--amber); }
.draft-rules ul { margin: 8px 0 8px 18px; padding: 0; }
.draft-rules li { margin-bottom: 3px; line-height: 1.5; }
.draft-rules p { margin: 0; }
.draft-form .panel + .panel { margin-top: 14px; }
.evidence-picker {
  max-height: 220px; overflow-y: auto; padding: 9px 11px;
  background: var(--surface-1); border: 1px solid var(--line-strong);
  border-radius: var(--radius-s);
}
.evidence-picker ul { list-style: none; margin: 0; padding: 0; }
.evidence-picker li { margin-bottom: 7px; font-size: 12px; line-height: 1.45; }
.evidence-picker label { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }