/* StockChief Inventory — screen-specific styles.
   What was shared — buttons, fields, cards, tables, badges, the page header —
   now lives in design.css, which owns it for the whole product. What is left
   here belongs to one screen each: the item record, the movement ledger, the
   sales surfaces, the action pages. */

/*
 * Aliases, not definitions.
 *
 * design.css is the single source of every colour, radius and shadow in the
 * product. These names stay because the rules below still ask for them; each
 * one now points at the system rather than at the palette this sheet was
 * originally authored against.
 */
:root {
  --sidebar-w: 0px;
}

/* A catalogue question should read like a short conversation, not a parser
   report. Product-specific values are rendered from the submitted evidence;
   these styles are deliberately independent of product or field names. */
.clarification-head { max-width: 840px; }
.clarification-head h1 { max-width: 760px; }
.clarification-safety {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 900px;
  margin: 0 0 18px;
  padding: 14px 16px;
  border: 1px solid var(--good-line, #b8dfcf);
  border-radius: var(--r-lg, 14px);
  background: var(--good-wash, #effaf5);
  color: var(--good, #147a55);
}
.clarification-safety strong,
.clarification-safety span { display: block; }
.clarification-safety span { margin-top: 2px; color: var(--ink-soft); font-size: 13px; }
.clarification-progress {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  max-width: 900px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}
.clarification-progress [data-clarification-count] { color: var(--brand-2); }
.clarification-steps { max-width: 900px; }
.clarification-step {
  padding: clamp(20px, 4vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl, 18px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.clarification-step[hidden], .clarification-followup[hidden] { display: none !important; }
.clarification-step__number {
  margin: 0 0 8px;
  color: var(--brand-2);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.clarification-step h2 { margin: 0; max-width: 760px; font-size: clamp(22px, 3vw, 30px); line-height: 1.2; }
.clarification-step__lead { max-width: 760px; margin: 12px 0 18px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; }
.clarification-why {
  max-width: 760px;
  margin: 0 0 18px;
  padding: 13px 15px;
  border-left: 3px solid var(--brand);
  border-radius: 0 var(--r-md, 10px) var(--r-md, 10px) 0;
  background: var(--brand-wash);
}
.clarification-why strong { font-size: 13px; }
.clarification-why p { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.clarification-choices { display: grid; gap: 10px; max-width: 760px; margin: 0; padding: 0; border: 0; }
.clarification-choices .choice { padding: 15px 16px; }
.clarification-choices .choice input { width: 18px; height: 18px; accent-color: var(--brand); }
.clarification-choices .choice span { display: grid; gap: 3px; }
.clarification-followup { max-width: 760px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.clarification-followup h3 { margin: 0; font-size: 17px; }
.clarification-followup > p { margin: 6px 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.component-map { display: grid; gap: 10px; }
.component-map__row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(110px, .42fr) minmax(220px, 1.1fr);
  gap: 14px;
  align-items: end;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2);
}
.component-map__source { align-self: center; }
.component-map__source span { display: block; margin-bottom: 3px; color: var(--muted); font-size: 11px; text-transform: uppercase; }
.component-map__source strong { font-size: 14px; }
.component-map__source small { display: block; margin-top: 5px; font-size: 11.5px; }
.component-map__matched { color: var(--good); }
.component-map__missing { color: var(--flag-2, #9a5b00); }
.component-map__quantity input { max-width: 120px; }
.clarification-footnote, .clarification-final-note {
  max-width: 900px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}
.clarification-footnote { margin: 14px 0 0; }
.clarification-actions { display: flex; align-items: center; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.clarification-actions .spacer { flex: 1; }
.clarification-final-note { display: flex; gap: 7px; align-items: flex-start; margin: 12px 0 0; }
.clarification-original { max-width: 900px; margin-top: 18px; }
@media (max-width: 720px) {
  .clarification-progress { display: block; }
  .clarification-progress span { display: block; margin-top: 3px; }
  .component-map__row { grid-template-columns: 1fr; }
  .component-map__quantity input { max-width: none; }
  .clarification-actions { flex-wrap: wrap; }
}

/*
 * The geometry two long-standing surfaces are written against: the two-column
 * form the sales and purchase writers use, and the record row the order and
 * activity lists are built from. design.css restates both as part of the
 * shared system; they are declared here as well because these screens'
 * markup was authored against this file and is verified against it.
 */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s4); }
.form-grid > .field--full { grid-column: 1 / -1; }
.operation-authority-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
.operation-authority-roles { display: flex; flex-wrap: wrap; gap: 8px 16px; align-self: stretch; }
.operation-authority-roles > legend { width: 100%; }
.operation-authority-actions { grid-column: span 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.list-row { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); }

table.table { width: 100%; border-collapse: collapse; }

/* Variant stock figures are four different facts, not one dotted sentence.
   The header and every row share the exact same grid so each value sits
   directly beneath its label regardless of the number of digits. */
.stock-metrics-heading { min-width: 390px; }
.stock-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(64px, 1fr)) 34px;
  align-items: center;
  column-gap: 12px;
  width: 100%;
}
.stock-metrics-heading .stock-metrics-grid > span { text-align: right; }
.stock-metric { display: flex; justify-content: flex-end; color: var(--muted); }
.stock-metric:first-child { color: var(--ink); }
.stock-metric-label { display: none; }
.stock-metrics-cell .btn { justify-self: end; }

/* Reveal blocks are CSS-only so they work with or without JavaScript. */
[data-reveal] { display: none; }
@media (max-width: 900px) { .option-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .form-grid > .field--full { grid-column: auto; }
}

/* --------------------------------------------------------------- sales --- */

.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 0 0 16px;
}
.sales-outcome { display: block; margin-bottom: 16px; padding: 15px 17px; }
.sales-outcome strong { display: block; margin-bottom: 5px; font-size: 14px; }
.sales-outcome p { margin: 4px 0 0; line-height: 1.5; }
.sales-outcome a { font-weight: 600; }
.sales-action-card { padding: 18px; }
.sales-action-card h2 { margin: 0 0 6px; font-size: 16px; }
.sales-action-card > p { margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.sales-action-card .btn { margin-top: 2px; }
.sales-create-choices {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin: 18px 0 10px;
}
.sales-create-choices > div {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2);
}
.sales-create-choices .eyebrow { margin: 0; }
.sales-create-choices small { color: var(--muted); line-height: 1.45; }
.sales-order-explanation { margin: 0 0 16px; }
.sales-total-block { margin-left: auto; width: min(360px, 100%); padding: 16px 20px; }
.sales-total-block > div { display: flex; justify-content: space-between; gap: 20px; padding: 6px 0; }
.sales-total-block .sales-total { border-top: 1px solid var(--border); margin-top: 5px; padding-top: 12px; font-size: 16px; }
.sales-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; }
.sales-number { font-variant-numeric: tabular-nums; }
a.list-row:hover { background: var(--surface-2); text-decoration: none; }
.order-activity .list-row { justify-content: flex-start; }

@media (max-width: 720px) {
  .list-row { align-items: flex-start; }
}

/* -------------------------------------------------------------- ledger --- */

.ledger, .raw-movement-ledger { display: flex; flex-direction: column; }
.ledger-item {
  display: flex; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.ledger-item:last-child { border-bottom: 0; }
.ledger-icon {
  width: 30px; height: 30px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--muted);
}
.ledger-icon--receive { background: var(--ok-bg); border-color: #bbf7d0; color: var(--ok); }
.ledger-icon--issue { background: #fff1f2; border-color: #fecdd3; color: #be123c; }
.ledger-icon--transfer { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.ledger-icon--adjust { background: var(--warn-bg); border-color: #fde68a; color: var(--warn); }
.ledger-body { min-width: 0; flex: 1; }
.ledger-text { font-size: 13.5px; color: var(--ink); }
.ledger-text a { color: var(--ink); font-weight: 600; }
.ledger-meta {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  color: var(--muted); font-size: 12.5px; margin-top: 3px;
}
.ledger-meta .sep { color: var(--line); }
.ledger-note {
  margin-top: 6px; padding: 7px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line-soft);
  color: var(--ink-soft); font-size: 12.5px;
}
.ledger-when { color: var(--muted); font-size: 12.5px; white-space: nowrap; }

.scope-warning { width: min(680px, calc(100vw - 32px)); }
.scope-warning__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}
.scope-warning__compare > div {
  padding: 14px;
  border: 1px solid var(--warning-border, #f3c977);
  border-radius: 10px;
  background: var(--warning-bg, #fff9e8);
}
.scope-warning__compare span,
.scope-warning__compare strong { display: block; }
.scope-warning__compare span {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
@media (max-width: 560px) {
  .scope-warning__compare { grid-template-columns: 1fr; }
  .scope-warning .modal-foot { align-items: stretch; flex-direction: column-reverse; }
}

.unit-picker { border: 1px solid var(--line); border-radius: var(--radius-sm); max-height: 230px; overflow-y: auto; }
.unit-option {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px; border-bottom: 1px solid var(--line-soft); cursor: pointer;
}
.unit-option:last-child { border-bottom: 0; }
.unit-option:hover { background: var(--surface-2); }
.unit-option input { accent-color: var(--accent); width: 15px; height: 15px; }
.unit-option .serial { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.unit-option .where { margin-left: auto; color: var(--muted); font-size: 12px; }

/* ------------------------------------------------------------ item page -- */

.item-hero { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.item-total {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  min-width: 150px;
}
.item-total .value, .item-total .availability-value { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.item-total .label { color: var(--muted); font-size: 12.5px; }

.location-bars { display: flex; flex-direction: column; gap: 10px; }
.location-bar { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: baseline; }
.location-bar .name { font-size: 13px; font-weight: 550; }
.location-bar .value { font-variant-numeric: tabular-nums; font-weight: 600; }
.location-bar .track {
  grid-column: 1 / -1; display: block; height: 6px;
  border-radius: 999px; background: var(--line-soft); overflow: hidden;
}
/* Block, not inline: an inline span ignores height and the bar never shows. */
.location-bar .fill { display: block; height: 100%; min-width: 2px; background: var(--accent); border-radius: 999px; }

@media (max-width: 720px) {
  /*
   * A wide table becomes a run of records rather than a sideways scroll: the
   * subject on its own line, then every remaining column as a labelled figure
   * in a grid underneath it. No column is dropped — a phone in a warehouse
   * needs the same facts a desk does.
   */
  .table--stack thead { display: none; }
  .table--stack tbody tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px 14px;
    padding: 13px var(--s4);
    border-bottom: 1px solid var(--line-2);
  }
  .table--stack tbody td { border: 0; padding: 0; height: auto; min-width: 0; text-align: left; }
  .table--stack tbody td[data-label] { display: grid; gap: 1px; align-content: start; justify-items: start; }
  .table--stack tbody td[data-label]::before {
    content: attr(data-label);
    color: var(--muted); font-size: var(--t-2xs); font-weight: 600;
    text-transform: uppercase; letter-spacing: .05em;
  }
  .table--stack td.cell-main, .table--stack td.cell-full { grid-column: 1 / -1; }
  .table--stack td.cell-end { justify-self: start; }
  .table--stack td.cell-main[data-label]::before { content: none; }

  .table--stack td.stock-metrics-cell { grid-column: 1 / -1; margin-top: 9px; }
  .stock-metrics-heading { min-width: 0; }
  .stock-metrics-cell .stock-metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
  }
  .stock-metric { display: grid; justify-items: start; justify-content: stretch; }
  .stock-metric:nth-child(even) { justify-items: end; }
  .stock-metric-label {
    display: block; color: var(--muted); font-size: 10.5px;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: 2px;
  }
  .stock-metrics-cell .btn { grid-column: 2; justify-self: end; }

  .action-bar { display: grid; grid-template-columns: repeat(2, 1fr); }
  .action-bar .btn { width: 100%; }
  .ledger-item { padding: 12px 14px; }
  .kv { grid-template-columns: 110px 1fr; }
}

@media (max-width: 560px) {
  .stat-grid { grid-template-columns: minmax(0, 1fr); }
  .page-head h1 { font-size: 18px; }
}

@media print {
  .sidebar, .topbar, .mobilenav, .page-actions { display: none; }
}

.foundry-hero { max-width: 680px; margin: 26px auto 22px; text-align: center; }
.foundry-hero--tight { margin-top: 6px; }
.foundry-hero h1 { font-size: 25px; letter-spacing: -0.02em; margin-bottom: 8px; }
.foundry-hero p { color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.foundry-mark {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.foundry-mark--done { background: var(--ok-bg); border-color: #bbf7d0; color: var(--ok); }
.foundry-quote {
  font-style: italic; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  padding: 9px 14px; border-radius: 999px; display: inline-block; max-width: 100%;
}

.foundry-form { max-width: 760px; margin: 0 auto; }
.foundry-source {
  display: flex; align-items: center; gap: 14px; padding: 18px;
  border: 1.5px dashed var(--accent-line); border-radius: var(--radius);
  background: var(--accent-soft); cursor: pointer;
}
.foundry-source:hover { border-color: var(--accent); }
.foundry-source__icon {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  color: var(--accent); background: var(--surface); border: 1px solid var(--accent-line); flex: none;
}
.foundry-source__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.foundry-source__body strong { font-size: 15px; }
.foundry-source__body span { color: var(--ink-soft); font-size: 12.5px; }
.foundry-source__body .foundry-source__truth { color: var(--muted); }
.foundry-divider { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: var(--muted); font-size: 11.5px; }
.foundry-divider::before, .foundry-divider::after { content: ''; height: 1px; background: var(--line); flex: 1; }
.foundry-input { min-height: 116px; font-size: 15px; line-height: 1.6; border: 0; padding: 4px 2px; resize: vertical; }
.foundry-input:focus { outline: none; box-shadow: none; }
.foundry-actions {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 14px; border-top: 1px solid var(--line-soft);
}
.foundry-hint { color: var(--muted); font-size: 12.5px; }

.foundry-examples { max-width: 760px; margin: 26px auto 0; }
.foundry-examples h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-bottom: 10px; text-align: center;
}
.example-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.example {
  text-align: left; padding: 11px 14px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); font: inherit; font-size: 13px; cursor: pointer; line-height: 1.5;
}
.example:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.example--sm { display: inline-block; width: auto; font-size: 12.5px; padding: 7px 11px; }
.ask-suggestions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

.foundry-alt {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 26px auto 0; padding-top: 20px; border-top: 1px solid var(--line);
  max-width: 760px; flex-wrap: wrap;
}
.foundry-alt .muted { font-size: 12.5px; }

.proposal { max-width: 820px; margin: 0 auto; }
.setup-document-preview { max-width: 960px; margin: 0 auto 26px; border-color: var(--accent-line); }
.setup-document-preview .card-head > div { min-width: 0; }
.setup-document-preview .card-head .hint { margin: 3px 0 0; text-transform: capitalize; }
.document-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.document-facts > div { padding: 11px 12px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: var(--surface-2); }
.document-facts span { display: block; color: var(--muted); font-size: 11px; margin-bottom: 3px; }
.document-facts strong { font-size: 13px; line-height: 1.4; }
.proposal-block {
  display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--line-soft);
}
.proposal-block:last-child { border-bottom: 0; }
.proposal-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding-top: 3px;
}
.proposal-body h2 { font-size: 17px; margin-bottom: 5px; letter-spacing: -0.01em; }
.proposal-body p { color: var(--ink-soft); font-size: 13.5px; line-height: 1.6; }
.proposal-list { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.7; }
.explain-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px;
}
.explain-grid > div {
  min-width: 0; padding: 14px; border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); background: var(--surface-2);
}
.explain-grid strong { display: block; margin-bottom: 5px; font-size: 13.5px; }
.explain-grid p { margin: 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.55; }

.decision { border: 0; padding: 0; margin: 0 0 20px; }
.decision:last-child { margin-bottom: 0; }
.decision legend { font-weight: 600; font-size: 14.5px; padding: 0; }
.decision .hint { margin: 4px 0 11px; }

.rec { display: flex; gap: 12px; align-items: flex-start; padding: 13px 0; border-bottom: 1px solid var(--line-soft); cursor: pointer; }
.rec:last-child { border-bottom: 0; }
.rec input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.rec-body { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; color: var(--ink-soft); }
.rec-body strong { font-size: 14px; color: var(--ink); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rec-noticed { color: var(--muted); font-style: italic; }
.rec-why { color: var(--muted); font-size: 12.5px; }
.rec--future { cursor: default; padding-left: 28px; }
.rec-future { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.rec-future h3 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }

.foundry-confirm {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  max-width: 820px; margin: 24px auto 0; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
}
.foundry-confirm > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.foundry-confirm .muted { font-size: 12.5px; }
.foundry-confirm .btn-row { margin-left: auto; align-items: center; }

.ready-card { max-width: 720px; margin: 0 auto; }
.ready-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ready-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.55; }
.ready-list .icon { color: var(--ok); margin-top: 2px; flex: none; }
.ready-next { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.conversation { display: flex; flex-direction: column; }
.turn { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); }
.turn:last-child { border-bottom: 0; }
.turn--user { background: var(--surface-2); }
.turn-who {
  display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; margin-bottom: 4px;
}
.turn--foundry .turn-who { color: var(--accent); }
.turn-body { font-size: 13.5px; line-height: 1.65; color: var(--ink); white-space: pre-wrap; }
.turn-grounding { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 9px; }
.turn-grounding .pill { font-size: 11.5px; }
.turn .btn { margin-top: 10px; }

.ask-form { display: flex; gap: 8px; flex-wrap: wrap; }
.ask-form .input { flex: 1; min-width: 220px; }
.ask-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.ask-attach.is-chosen { border-color: var(--accent-line); color: var(--accent); }

/* The universal command has three jobs, and each must remain reachable at
   every width: the sentence, an optional file, and Continue. Grid gives the
   sentence the remaining space without allowing its intrinsic width to push
   either action outside the card. Other compact ask forms keep their existing
   flex layout. */
.ask-form--command {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
}
.ask-form--command .ask-input { min-width: 0; }

.foundry-panel {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  padding: 15px 18px; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--accent-line);
}
.foundry-panel .foundry-panel-icon {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent);
}
.foundry-panel-text { flex: 1; min-width: 200px; }
.foundry-panel-text strong { font-size: 14px; }
.foundry-panel-text div { color: var(--ink-soft); font-size: 12.5px; margin-top: 1px; }

@media (max-width: 900px) {
  .document-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .explain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundry-source { align-items: flex-start; flex-wrap: wrap; }
  .foundry-source > .btn { width: 100%; }
  .proposal-block { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .example-grid { grid-template-columns: minmax(0, 1fr); }
  .foundry-confirm .btn-row { margin-left: 0; width: 100%; }
  .foundry-confirm .btn-row .btn, .foundry-confirm .btn-row form { flex: 1; }
  .foundry-confirm .btn-row form .btn { width: 100%; }
}

/* ------------------------------------------------------- foundry thinking --
   A minute of real model time needs an honest progress report, not a spinner:
   the steps below are the actual passes the server is running. */

.thinking { max-width: 560px; margin: 44px auto 0; text-align: center; }
.thinking h1 { font-size: 21px; margin-bottom: 8px; letter-spacing: -0.02em; }
.thinking-sub { color: var(--muted); font-size: 13.5px; line-height: 1.6; margin-bottom: 26px; }

.thinking-mark {
  position: relative; width: 52px; height: 52px; border-radius: 16px;
  margin: 0 auto 16px; display: grid; place-items: center;
  background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent);
}
.thinking-pulse {
  position: absolute; inset: -1px; border-radius: 16px;
  border: 1px solid var(--accent); opacity: 0;
  animation: thinking-pulse 2s ease-out infinite;
}
@keyframes thinking-pulse {
  0%   { opacity: .55; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.28); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-pulse { animation: none; opacity: .4; }
}

.thinking-steps {
  list-style: none; margin: 0 0 22px; padding: 0;
  text-align: left; display: flex; flex-direction: column; gap: 2px;
}
.thinking-step {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 13px 15px; border-radius: var(--radius);
  border: 1px solid transparent; transition: background .2s ease, border-color .2s ease;
}
.thinking-step .thinking-dot {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 1px;
  border: 2px solid var(--line); background: var(--surface);
  display: grid; place-items: center; color: #fff;
}
.thinking-step-text { display: flex; flex-direction: column; gap: 2px; }
.thinking-step-text strong { font-size: 14px; color: var(--muted); font-weight: 600; }
.thinking-step-text span { font-size: 12.5px; color: var(--muted-soft); }

.thinking-step.is-current {
  background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-sm);
}
.thinking-step.is-current .thinking-dot {
  border-color: var(--accent);
  animation: thinking-dot 1.4s ease-in-out infinite;
}
@keyframes thinking-dot {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 5px var(--accent-soft); }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-step.is-current .thinking-dot { animation: none; }
}
.thinking-step.is-current .thinking-step-text strong { color: var(--ink); }
.thinking-step.is-current .thinking-step-text span { color: var(--ink-soft); }

.thinking-step.is-done .thinking-dot { border-color: var(--ok); background: var(--ok); }
.thinking-step.is-done .thinking-step-text strong { color: var(--ink-soft); }

.thinking-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px;
}

/* The ask/change forms are seconds, not minutes — a busy label is enough. */
.is-busy { position: relative; color: transparent !important; }
.is-busy:disabled { opacity: 1; }
.is-busy::after {
  content: ''; position: absolute; inset: 0; margin: auto;
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid var(--accent-line); border-top-color: var(--accent);
  animation: spin .7s linear infinite;
}

@media (max-width: 560px) {
  .explain-grid { grid-template-columns: minmax(0, 1fr); }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------- attention --
   The briefing. Severity is carried by a left edge rather than a wash of
   colour, so a page of urgent items still reads as a list rather than an
   alarm. Every card states the finding, the reason, and the suggestion in
   that order — the order a person asks the questions in. */

.att-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.att-filters .spacer { margin-left: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
  text-decoration: none; white-space: nowrap;
}
.chip:hover { border-color: var(--accent-line); color: var(--ink); text-decoration: none; }
.chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); font-weight: 600; }

.att-group-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; }
.att-group-head h2 { font-size: 14px; letter-spacing: -0.01em; }

.att-list { display: grid; gap: 12px; }

.att-card {
  display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap;
  padding: 16px 18px 15px; background: var(--surface);
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: var(--radius);
}
.att-card--danger { border-left-color: var(--danger); }
.att-card--warn   { border-left-color: var(--warn); }
.att-card--muted  { border-left-color: var(--line-strong, var(--line)); }

.att-card-main { flex: 1; min-width: 260px; }
.att-card-head { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.att-card-title { font-size: 15px; letter-spacing: -0.01em; margin-bottom: 3px; }
.att-card-title a { color: var(--ink); text-decoration: none; }
.att-card-title a:hover { color: var(--accent); }
.att-card-sum { font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; }
.att-card-why { font-size: 13px; line-height: 1.6; color: var(--muted); margin-bottom: 10px; }

.att-card-rec, .att-rec-box {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 12px; border-radius: 9px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 13px; line-height: 1.55; color: var(--ink);
}
.att-rec-icon { color: var(--accent); flex: none; margin-top: 1px; }
.att-rec-box { margin-top: 14px; padding: 13px 15px; }
.att-rec-box strong { display: block; font-size: 13px; margin-bottom: 3px; }
.att-rec-box p { font-size: 13px; color: var(--ink-soft); }

.att-card-meta {
  display: flex; gap: 7px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; font-size: 12px; color: var(--muted);
}
.att-card-meta a { color: var(--muted); }
.att-card-meta a:hover { color: var(--accent); }

.att-card-side { display: flex; flex-direction: column; gap: 7px; min-width: 128px; }
.att-card-side form { display: block; }
.att-card-side .btn { width: 100%; justify-content: center; }

.brief {
  padding: 18px 20px; border-radius: var(--radius); margin-bottom: 18px;
  background: linear-gradient(180deg, var(--accent-soft), var(--surface));
  border: 1px solid var(--accent-line);
}
.brief-head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.brief-head h2 { font-size: 14px; letter-spacing: -0.01em; }
.brief-head .spacer { margin-left: auto; }
.brief-body { font-size: 14px; line-height: 1.7; color: var(--ink); white-space: pre-wrap; }
.brief-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 13px; }

.lede { font-size: 14px; line-height: 1.7; color: var(--ink); }
.back-link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12.5px; color: var(--muted); text-decoration: none; margin-bottom: 5px;
}
.back-link svg { transform: rotate(180deg); }
.back-link:hover { color: var(--accent); }

.ask-examples { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 12px; }
.ask-pending { font-size: 13px; color: var(--muted); margin-top: 10px; }

@media (max-width: 720px) {
  .att-card-side { flex-direction: row; width: 100%; min-width: 0; }
  .att-card-side > * { flex: 1; }
}

/* An open finding, stated on the record it is about. */
.item-attention { display: grid; gap: 8px; margin-bottom: 16px; }
.item-attention-row {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius); text-decoration: none;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--line);
}
.item-attention-row:hover { border-color: var(--accent-line); text-decoration: none; }
.item-attention-row--danger { border-left-color: var(--danger); }
.item-attention-row--warn   { border-left-color: var(--warn); }
.item-attention-text { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; }
.item-attention-text strong { font-size: 13.5px; color: var(--ink); }
.item-attention-text span { font-size: 12.5px; color: var(--muted); }
.item-attention-go {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 12.5px; color: var(--accent); white-space: nowrap;
}

/* Dismiss with a choice of how long, rather than a fixed guess. */
.dismiss-form { display: flex; align-items: center; gap: 6px; }
.dismiss-form .select { height: 32px; width: auto; font-size: 12.5px; padding: 0 26px 0 9px; }

.usefulness { display: grid; gap: 7px; }
.usefulness-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; }
.usefulness-row .name { flex: 1; color: var(--ink-soft); }
.usefulness-row .tally { color: var(--muted); font-variant-numeric: tabular-nums; }

.pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 18px; }
.pager .muted { font-size: 12.5px; }

/* --------------------------------------------------- inventory workspaces --
   An account may hold several completely separate inventories. The switcher
   sits directly under the brand because "which inventory am I looking at?" is
   the first question every other number on the page depends on. */

.wsp-switch { position: relative; margin: 0 12px 14px; }
.wsp-switch-current {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border-radius: 9px; cursor: pointer; text-align: left;
  background: var(--surface-2); border: 1px solid var(--line); color: var(--ink);
}
.wsp-switch-current:hover { border-color: var(--accent-line); }
.wsp-switch-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.wsp-switch-text small {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600;
}
.wsp-switch-text strong {
  font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wsp-switch-caret { transform: rotate(90deg); color: var(--muted); flex: none; }
.wsp-switch.is-open .wsp-switch-caret { transform: rotate(-90deg); }

.wsp-switch-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 5px); z-index: 40;
  padding: 5px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
}
.wsp-switch-menu[hidden] { display: none; }
.wsp-switch-label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 6px 9px 4px;
}
.wsp-switch-item {
  display: flex; align-items: center; gap: 7px; width: 100%;
  padding: 7px 9px; border-radius: 7px; font-size: 13px; text-align: left;
  background: none; border: 0; cursor: pointer; color: var(--ink); text-decoration: none;
}
.wsp-switch-item:hover { background: var(--surface-2); text-decoration: none; }
.wsp-switch-item span:first-child { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wsp-switch-item--quiet { color: var(--muted); }
.wsp-switch-item--quiet:hover { color: var(--accent); }

.wsp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.wsp-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 17px 18px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.wsp-card.is-current { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--surface)); }
.wsp-card-head { display: flex; align-items: center; gap: 9px; }
.wsp-card-head h2 { font-size: 15px; letter-spacing: -0.01em; flex: 1; }
.wsp-facts { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.wsp-facts strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.wsp-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.wsp-card-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }

/* ------------------------------------------------------ controlled actions --
   The preview is the moment a person decides whether to let StockChief touch
   their inventory, so the before → after figures are the largest thing on the
   page and the warning is impossible to scroll past. */

.act-preview .card-body { padding-bottom: 4px; }

.act-subject { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.act-quantity {
  font-size: 34px; font-weight: 650; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1;
}
.act-subject-text { display: flex; flex-direction: column; gap: 2px; }
.act-subject-text strong { font-size: 15px; }
.act-subject-text span { font-size: 13px; color: var(--muted); }

.act-ledger { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.act-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; background: var(--surface);
}
.act-row--total { background: var(--surface-2); }
.act-place { flex: 1; min-width: 160px; display: flex; flex-direction: column; font-size: 13.5px; }
.act-place small { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.act-move { display: flex; align-items: center; gap: 9px; color: var(--muted); }
.act-move .num { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--muted); }
.act-move .act-after { color: var(--ink); font-weight: 650; }

.act-reason { display: flex; gap: 8px; align-items: baseline; margin-top: 14px; font-size: 13px; }
.act-instruction { font-size: 12.5px; margin-top: 10px; }

.act-warnings {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 16px 0 0; padding: 13px 16px;
  background: var(--warn-bg); border-top: 1px solid #fde68a; color: #92400e;
}
.act-warnings p { font-size: 13px; line-height: 1.55; }
.act-warnings p + p { margin-top: 4px; }
.act-warnings svg { flex: none; margin-top: 1px; }

.act-actions { display: grid; gap: 12px; }
.act-confirm {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 11px 13px; border-radius: 9px; font-size: 13px; line-height: 1.5;
  background: var(--warn-bg); border: 1px solid #fde68a; color: #92400e; cursor: pointer;
}
.act-confirm input { margin-top: 2px; }

.act-revise { padding-top: 12px; border-top: 1px solid var(--line); }
.act-revise .input { width: 110px; }

.act-question {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 14px;
  padding: 16px 18px; border-radius: 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  font-size: 13.5px; line-height: 1.6;
}
.act-question--muted { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.act-question--warning { background: var(--warn-bg); border-color: #fbbf24; color: #78350f; }

/* Blocked by a rule, not by a missing detail: it reads as a stop, and the ways
   out are listed as choices rather than buried in a sentence. */
.act-question--blocked { background: var(--surface-2); border-color: #fca5a5; }
.act-blocked-ways { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.act-blocked-ways li {
  display: grid; gap: 2px; padding: 9px 11px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
}
.act-blocked-ways a { font-weight: 600; }
.act-blocked-ways .muted { font-size: 12.5px; line-height: 1.5; }

.act-plan { display: grid; gap: 12px; }
.plain-list { list-style: disc; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }

.act-question-body { flex: 1; min-width: 0; }
.act-question-body > p:first-child { margin: 0; }
.act-choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
  min-width: 0;
}
.act-choice-grid form { min-width: 0; }
.act-choice-grid .btn {
  width: 100%;
  justify-content: flex-start;
  overflow-wrap: anywhere;
  text-align: left;
  min-height: 42px;
  padding: 10px 13px;
}

/* The action history is a short outcome list, not an unspaced raw table. */
.page-actions .card.section > .card-head { padding: 17px 20px; }
.page-actions .card.section > .table-wrap .table td { padding: 16px 20px; }
.page-actions .card.section > .table-wrap .cell-title { line-height: 1.45; }
.page-actions .card.section > .table-wrap .cell-sub { margin-top: 5px; }
.act-reply { display: flex; gap: 8px; margin-top: 10px; }
.act-reply .input { flex: 1; max-width: 320px; }

@media (max-width: 700px) {
  .operation-authority-grid { grid-template-columns: 1fr; }
  .operation-authority-actions { grid-column: auto; }
  .ask-form--command { grid-template-columns: minmax(0, 1fr) auto; }
  .ask-form--command .ask-input { grid-column: 1 / -1; }
}

@media (max-width: 440px) {
  .ask-form--command { grid-template-columns: minmax(0, 1fr); }
  .ask-form--command .ask-attach,
  .ask-form--command [data-ask-submit] { width: 100%; }
  .act-choice-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Onboarding: four ways in, each one a whole card you can hit. */
.onboard-card { padding: 0; }
.onboard-choice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 18px; background: none; border: 0; cursor: pointer; text-align: left; font: inherit;
  color: var(--text); border-radius: var(--radius);
}
.onboard-choice:hover:not(:disabled) { background: var(--accent-soft); }
.onboard-choice:disabled { opacity: .55; cursor: default; }
.onboard-icon {
  width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--accent-line); color: var(--accent);
}
.onboard-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.onboard-text strong { font-size: 15px; }
.onboard-blurb { font-size: 13.5px; }
.onboard-text .muted { font-size: 12.5px; }
.setup-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Operator home begins with the relationship, not the database. */
.operator-hero {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  padding: 34px 36px;
  margin-bottom: 22px;
  overflow: hidden;
  color: #f8fffd;
  background:
    radial-gradient(circle at 92% 5%, rgba(94, 234, 212, .2), transparent 32%),
    linear-gradient(135deg, #123c38 0%, #0c2927 100%);
  border: 1px solid rgba(15, 118, 110, .42);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(15, 42, 39, .14);
}
.page-home .content { max-width: 1320px; }
.operator-hero__copy { max-width: 650px; }
.operator-hero h1 {
  margin: 14px 0 4px;
  color: inherit;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.operator-hero__copy > p { color: #bfe1dc; font-size: 16px; }
.operator-hero__copy > p strong { color: #fff; }
.operator-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #c9fff3;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}
.operator-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #5eead4;
  box-shadow: 0 0 0 5px rgba(94, 234, 212, .12);
}
.operator-status--paused { color: #fde68a; }
.operator-status--paused .operator-status__dot { background: #fbbf24; box-shadow: 0 0 0 5px rgba(251,191,36,.14); }
.operator-hero__summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: #bfe1dc;
}
.operator-hero__summary strong { color: #fff; }
.operator-hero__control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 150px;
  color: #9fcac4;
  font-size: 12px;
}
.operator-hero__control a { color: #e8fffa; font-weight: 650; }
.operator-pause {
  margin-top: 12px;
  padding: 6px 10px;
  color: #c9e6e1;
  background: transparent;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  font: inherit;
  cursor: pointer;
}
.operator-pause:hover { color: #fff; border-color: rgba(255,255,255,.34); }
@media (max-width: 720px) {
  .operator-hero { flex-direction: column; padding: 26px 22px; }
  .operator-hero__control { align-items: flex-start; }
}

.operator-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  margin: -8px 0 20px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 11px;
}
.operator-alert div { display: grid; gap: 2px; }
.operator-alert span { color: #a16207; font-size: 13px; }

.operator-readiness {
  align-items: start;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr);
  margin: 0 0 22px;
  padding: 20px 22px;
}
.operator-readiness h2 { font-size: 17px; margin: 5px 0 0; }
.operator-readiness .plain-list { color: var(--muted); font-size: 13px; margin: 0; }
@media (max-width: 760px) { .operator-readiness { grid-template-columns: 1fr; } }

.operator-setup-callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px 18px;
  margin: -8px 0 20px;
  color: #164e63;
  background: linear-gradient(135deg, #ecfeff, #f0fdfa);
  border: 1px solid #99f6e4;
  border-radius: 13px;
}
.operator-setup-callout__icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: #fff;
  border: 1px solid #ccfbf1;
  border-radius: 11px;
}
.operator-setup-callout strong { display: block; color: var(--ink); }
.operator-setup-callout p { margin: 3px 0 0; color: #47716d; font-size: 13px; }

.quantity-takeover { max-width: 920px; margin: 0 auto; }
.quantity-takeover .card-head { padding: 22px 24px 16px; }
.quantity-takeover .card-head h2 { margin: 0; font-size: clamp(21px, 3vw, 28px); }
.quantity-status {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  align-items: baseline;
  padding: 13px 15px;
  margin-bottom: 18px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
}
.quantity-status strong { color: var(--ink); font-size: 18px; }
.quantity-options { display: grid; gap: 11px; }
.quantity-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 17px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
}
.quantity-option:hover { border-color: var(--accent-line); box-shadow: 0 5px 18px rgba(15, 42, 39, .06); }
.quantity-option--primary { align-items: flex-start; background: #f8fffd; border-color: #99f6e4; }
.quantity-option__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--accent);
  background: var(--accent-soft);
  border-radius: 10px;
}
.quantity-option h3 { margin: 0 0 3px; color: var(--ink); font-size: 15px; }
.quantity-option p { margin: 0; color: var(--muted); font-size: 13px; }
.quantity-option .ask-form { margin-top: 12px; }
.quantity-complete { justify-content: space-between; gap: 12px; }

.operator-command {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 19px 20px 16px;
  margin-bottom: 22px;
  background: var(--surface);
  border: 1px solid #d7e5e2;
  border-radius: 14px;
  box-shadow: 0 7px 24px rgba(15, 42, 39, .07);
}
.operator-command__mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid #ccfbf1;
  border-radius: 11px;
}
.operator-command__body { flex: 1; min-width: 0; }
.operator-command__body > label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.operator-command__form {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.operator-command__input {
  width: 100%;
  padding: 5px 42px 10px 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 15px;
}
.operator-command__input::placeholder { color: #94a3b8; }
.operator-command__send {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex: none;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 9px;
  cursor: pointer;
}
.operator-command__send:hover { background: var(--accent-dark); }
.operator-command__shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin-top: 10px;
  font-size: 12px;
}
.operator-command__shortcuts a { color: var(--muted); }
.operator-command__shortcuts a:hover { color: var(--accent-dark); }

.operator-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}
.operator-lane {
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
}
.operator-lane__head {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 17px 18px 14px;
  border-bottom: 1px solid var(--line-soft);
}
.operator-lane__icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: 9px;
}
.operator-lane__eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.operator-lane h2 { font-size: 16px; }
.operator-lane--needs.has-work { border-color: #f3c9c9; }
.operator-lane--needs.has-work .operator-lane__icon { color: var(--danger); background: var(--danger-bg); }
.operator-lane--prepared.has-work { border-color: #f4d38d; }
.operator-lane--prepared.has-work .operator-lane__icon { color: var(--warn); background: var(--warn-bg); }
.operator-lane--handled .operator-lane__icon { color: var(--ok); background: var(--ok-bg); }
.operator-lane__body { flex: 1; padding: 4px 18px 14px; }
.operator-empty { margin: 11px 0 2px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.operator-work-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.operator-work-item:last-child { border-bottom: 0; }
.operator-work-item > div { min-width: 0; }
.operator-work-item p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.operator-work-item > a { flex: none; font-size: 12px; font-weight: 700; }
.operator-work-item--done { justify-content: flex-start; }
.operator-done-check {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  flex: none;
  margin-top: 1px;
  color: #fff;
  background: var(--ok);
  border-radius: 50%;
  font-size: 11px;
}
.operator-lane footer {
  padding: 10px 18px;
  background: var(--surface-2);
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  font-weight: 650;
}

.operator-next {
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.operator-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}
.operator-section-head h2 { font-size: 18px; }
.operator-next__empty { padding: 18px 0 2px; color: var(--muted); }
.operator-timeline { padding-top: 7px; }
.operator-event {
  display: grid;
  grid-template-columns: 88px 10px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 0;
}
.operator-event time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.operator-event__dot { width: 7px; height: 7px; margin-top: 6px; background: #94a3b8; border-radius: 50%; }
.operator-event p { margin: 2px 0 0; color: var(--muted); font-size: 12px; }
.operator-event.is-overdue time, .operator-event.is-overdue a { color: var(--danger); }
.operator-event.is-overdue .operator-event__dot { background: var(--danger); }

.operator-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 18px;
  align-items: center;
  padding: 14px 4px 0;
  color: var(--muted);
  font-size: 11.5px;
}
.operator-proof a { margin-left: auto; }

@media (max-width: 1020px) {
  .operator-lanes { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .operator-setup-callout { grid-template-columns: auto 1fr; }
  .operator-setup-callout > .btn { grid-column: 1 / -1; width: 100%; }
  .quantity-option { padding: 14px; }
  .quantity-option--primary { grid-template-columns: auto minmax(0, 1fr); }
  .quantity-option--primary > div { min-width: 0; }
  .quantity-option .ask-form { flex-direction: column; align-items: stretch; }
  .quantity-complete { align-items: stretch; }
  .quantity-complete .btn { width: 100%; }
  .operator-command { padding: 16px; }
  .operator-command__mark { display: none; }
  .operator-command__shortcuts { gap: 8px 12px; }
  .operator-event { grid-template-columns: 1fr; gap: 2px; }
  .operator-event__dot { display: none; }
  .operator-proof a { width: 100%; margin-left: 0; }
}
.operator-command__attach {
  align-items: center;
  color: var(--teal-700, #0f766e);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  gap: 5px;
  justify-content: center;
  padding: .45rem .6rem;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.operator-command__attach:hover,
.operator-command__attach.is-chosen { color: var(--accent-dark); background: var(--accent-soft); border-radius: 8px; }
.operator-command__attach input { height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.operator-command__attachment-status {
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  color: var(--teal-800, #115e59);
  font-size: 12px;
}
.operator-command__attachment-status:not([hidden]) { display: flex; }
.operator-command__attachment-status strong { overflow-wrap: anywhere; }

/* ------------------------------------------------------ investigations -- */

.investigation-hero {
  display: flex; align-items: flex-start; gap: 14px;
  max-width: 820px; margin-top: 5px;
}
.investigation-hero__mark {
  width: 42px; height: 42px; display: grid; place-items: center; flex: none;
  color: var(--warn); background: var(--warn-bg); border: 1px solid #fde68a; border-radius: 12px;
}
.investigation-hero__copy { min-width: 0; }
.investigation-hero__copy h1 { margin-top: 6px; font-size: 24px; letter-spacing: -.025em; }
.investigation-hero__meta {
  display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px;
}

.investigation-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px; align-items: start;
}
.investigation-main { min-width: 0; }
.investigation-summary { overflow: hidden; }
.investigation-summary .card-head,
.investigation-trail .card-head,
.investigation-decision .card-head { padding: 17px 20px; }
.investigation-summary .card-head h2,
.investigation-trail .card-head h2,
.investigation-decision .card-head h2 { margin-top: 2px; font-size: 16px; }
.investigation-summary .card-body { padding: 20px; }
.investigation-kicker {
  color: var(--muted); font-size: 10.5px; font-weight: 750;
  letter-spacing: .09em; text-transform: uppercase;
}

.count-equation {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) auto minmax(110px, 1fr) auto minmax(140px, 1.15fr);
  gap: 12px; align-items: stretch;
}
.count-equation__value,
.count-equation__result {
  min-width: 0; padding: 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface-2);
}
.count-equation__value span,
.count-equation__result span {
  display: block; color: var(--muted); font-size: 12px; font-weight: 650;
}
.count-equation__value strong,
.count-equation__result strong {
  display: block; margin: 4px 0 1px; font-size: 34px; line-height: 1.05;
  letter-spacing: -.04em; font-variant-numeric: tabular-nums;
}
.count-equation__value small,
.count-equation__result small { display: block; color: var(--muted); font-size: 11.5px; }
.count-equation__result { background: var(--warn-bg); border-color: #fde68a; }
.count-equation__result strong,
.count-equation__result small { color: #92400e; }
.count-equation__result.is-match { background: var(--ok-bg); border-color: #bbf7d0; }
.count-equation__result.is-match strong,
.count-equation__result.is-match small { color: var(--ok); }
.count-equation__operator {
  display: grid; place-items: center; color: var(--muted-soft); font-size: 20px;
}

.investigation-explanation {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 11px;
  margin-top: 18px; padding: 14px; color: var(--ink-soft);
  background: #f8fafc; border: 1px solid var(--line-soft); border-radius: 10px;
}
.investigation-explanation__icon {
  width: 30px; height: 30px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 8px;
}
.investigation-explanation p { margin-top: 3px; color: var(--muted); font-size: 12.5px; line-height: 1.55; }

.investigation-decision { position: sticky; top: 76px; overflow: hidden; }
.investigation-decision .card-body { padding: 20px; }
.investigation-decision__lead { color: var(--ink-soft); line-height: 1.55; }
.investigation-safety {
  display: flex; gap: 9px; align-items: flex-start; margin: 15px 0 18px; padding: 12px;
  color: #78350f; background: var(--warn-bg); border: 1px solid #fde68a;
  border-radius: 9px; font-size: 12.5px; line-height: 1.5;
}
.investigation-safety .icon { margin-top: 1px; flex: none; }
.investigation-decision .textarea { min-height: 104px; }

.investigation-timeline { padding: 6px 20px 10px; }
.investigation-event {
  position: relative; display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: 12px; padding: 12px 0;
}
.investigation-event:not(:last-child)::before {
  content: ''; position: absolute; left: 6px; top: 28px; bottom: -8px;
  width: 1px; background: var(--line);
}
.investigation-event__marker {
  width: 13px; height: 13px; margin-top: 3px; border: 3px solid var(--surface);
  border-radius: 50%; background: var(--muted-soft); box-shadow: 0 0 0 1px var(--line);
}
.investigation-event__marker.is-current { background: var(--accent); box-shadow: 0 0 0 1px var(--accent-line); }
.investigation-event strong { display: block; font-size: 13px; }
.investigation-event time { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.investigation-resolved { text-align: center; }
.investigation-resolved__icon {
  width: 44px; height: 44px; display: grid; place-items: center; margin: 0 auto 11px;
  color: var(--ok); background: var(--ok-bg); border: 1px solid #bbf7d0; border-radius: 50%;
}
.investigation-resolved p { margin: 6px 0 16px; color: var(--muted); font-size: 12.5px; }

@media (max-width: 980px) {
  .investigation-layout { grid-template-columns: minmax(0, 1fr); }
  .investigation-decision { position: static; grid-row: 1; }
}
@media (max-width: 650px) {
  .investigation-hero__copy h1 { font-size: 20px; }
  .count-equation { grid-template-columns: 1fr 1fr; }
  .count-equation__operator { display: none; }
  .count-equation__result { grid-column: 1 / -1; }
}

/* ----------------------------------------------------------- Needs you -- */

.needs-you-hero {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  padding: 6px 0 4px;
}
.needs-you-hero h1 { margin-top: 2px; font-size: 28px; letter-spacing: -.035em; }
.needs-you-hero p { margin-top: 4px; color: var(--muted); font-size: 13.5px; }
.needs-you-total {
  display: inline-flex; align-items: center; gap: 9px; flex: none;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); font-size: 12.5px;
  box-shadow: var(--shadow-sm);
}
.needs-you-total > span {
  width: 25px; height: 25px; display: grid; place-items: center;
  border-radius: 50%;
}
.needs-you-total.has-work { color: #92400e; border-color: #fde68a; background: #fffbeb; }
.needs-you-total.has-work > span { background: #fef3c7; }
.needs-you-total.is-clear { color: var(--ok); border-color: #bbf7d0; background: var(--ok-bg); }
.needs-you-total.is-clear > span { background: #dcfce7; }

.needs-you-queue { display: grid; gap: 14px; margin-top: 20px; }
.needs-section {
  overflow: hidden; background: var(--surface); border: 1px solid var(--line);
  border-radius: 13px; box-shadow: var(--shadow-sm);
}
.needs-section--attention { border-color: #f5d98b; box-shadow: 0 1px 2px rgba(120, 53, 15, .05); }
.needs-section__head {
  min-height: 68px; display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--line-soft);
}
.needs-section--attention .needs-section__head { background: linear-gradient(90deg, #fffbeb 0, #fff 56%); }
.needs-section__icon {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none;
  color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: 10px;
}
.needs-section--attention .needs-section__icon {
  color: #a16207; background: #fef3c7; border-color: #fde68a;
}
.needs-section__head h2 { margin-top: 1px; font-size: 15px; }
.needs-section__label {
  display: block; color: var(--muted); font-size: 10.5px; font-weight: 700;
  letter-spacing: .075em; line-height: 1.25; text-transform: uppercase;
}
.needs-count {
  display: inline-flex; align-items: center; flex: none; margin-left: auto;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--muted); background: var(--surface-2); font-size: 11.5px; font-weight: 650;
  white-space: nowrap;
}
.needs-count.has-work { color: #92400e; border-color: #fde68a; background: var(--warn-bg); }
.needs-count.is-clear { color: var(--ok); border-color: #bbf7d0; background: var(--ok-bg); }

.needs-input {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 15px; align-items: start; padding: 20px 18px;
}
.needs-input__mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: #a16207; background: #fffbeb; border: 1px solid #fde68a; border-radius: 11px;
}
.needs-input__body { min-width: 0; }
.needs-input__kicker {
  color: #a16207; font-size: 10.5px; font-weight: 750;
  letter-spacing: .07em; text-transform: uppercase;
}
.needs-input__body h3 { margin: 3px 0 6px; font-size: 17px; letter-spacing: -.012em; }
.needs-input__body > p { max-width: 760px; color: var(--ink-soft); font-size: 13px; line-height: 1.55; }
.needs-input__safety {
  display: flex; gap: 8px; align-items: flex-start; max-width: 760px;
  margin-top: 13px; padding: 10px 11px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 8px;
  font-size: 12px; line-height: 1.5;
}
.needs-input__safety .icon { flex: none; margin-top: 1px; color: var(--accent); }
.needs-input__action { align-self: center; }

.needs-empty {
  display: flex; align-items: center; gap: 12px; min-height: 74px;
  padding: 14px 18px;
}
.needs-empty__icon {
  width: 32px; height: 32px; display: grid; place-items: center; flex: none;
  color: var(--ok); background: var(--ok-bg); border: 1px solid #bbf7d0; border-radius: 50%;
}
.needs-empty strong { display: block; font-size: 13.5px; }
.needs-empty p { margin-top: 2px; color: var(--muted); font-size: 12.5px; }

.needs-row {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto;
  gap: 12px; align-items: center; min-height: 76px; padding: 12px 18px;
  color: var(--ink); border-top: 1px solid var(--line-soft);
}
.needs-section__head + .needs-row { border-top: 0; }
.needs-row:hover { background: var(--surface-2); text-decoration: none; }
.needs-row__icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 9px;
}
.needs-row__icon.is-warn { color: #a16207; background: var(--warn-bg); }
.needs-row strong { display: block; font-size: 13.5px; }
.needs-row p { margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.needs-row > .icon { color: var(--muted-soft); }

@media (max-width: 1040px) {
  .needs-input { grid-template-columns: 42px minmax(0, 1fr); }
  .needs-input__action { grid-column: 2; justify-self: start; }
}
@media (max-width: 650px) {
  .needs-you-hero { align-items: flex-start; flex-direction: column; gap: 12px; }
  .needs-you-hero h1 { font-size: 24px; }
  .needs-input { grid-template-columns: 34px minmax(0, 1fr); padding: 16px 14px; gap: 11px; }
  .needs-input__mark { width: 34px; height: 34px; }
  .needs-input__action { grid-column: 1 / -1; width: 100%; }
  .needs-section__head { min-height: 62px; padding: 10px 14px; }
  .needs-section__icon { width: 32px; height: 32px; }
  .needs-section__label { font-size: 9.5px; }
  .needs-empty { padding: 13px 14px; }
  .needs-row { grid-template-columns: 34px minmax(0, 1fr) auto; padding: 12px 14px; }
  .needs-row .needs-count { grid-column: 2; justify-self: start; margin-left: 0; }
  .needs-row > .icon { grid-column: 3; grid-row: 1 / span 2; }
}

/* --------------------------------------------- missing transfer location -- */

.location-required-hero {
  display: flex; align-items: flex-start; gap: 14px; max-width: 850px; margin-top: 5px;
}
.location-required-hero__icon {
  width: 46px; height: 46px; display: grid; place-items: center; flex: none;
  color: #a16207; background: #fffbeb; border: 1px solid #fde68a; border-radius: 13px;
}
.location-required-hero__meta {
  display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12.5px;
}
.location-required-hero h1 { margin-top: 7px; font-size: 25px; letter-spacing: -.03em; }
.location-required-hero p { margin-top: 5px; color: var(--muted); line-height: 1.5; }

.location-required-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 350px;
  gap: 18px; align-items: start;
}
.location-create-preview .card-head h2,
.location-required-layout .card-head h2 { margin-top: 2px; font-size: 16px; }
.location-create-preview .card-body { padding: 20px; }
.location-create-name {
  display: flex; align-items: center; gap: 12px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.location-create-name > span {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 11px;
}
.location-create-name small { display: block; color: var(--muted); font-size: 11.5px; }
.location-create-name strong { display: block; margin-top: 1px; font-size: 17px; }
.location-create-facts {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px; margin-top: 18px;
}
.location-create-facts > div {
  padding: 12px 13px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 9px;
}
.location-create-facts span,
.location-transfer-understood span { display: block; color: var(--muted); font-size: 11.5px; }
.location-create-facts strong {
  display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 14px;
}

.location-transfer-understood {
  display: grid; grid-template-columns: minmax(0, 1.4fr) .6fr minmax(0, 1fr) minmax(0, 1fr);
  gap: 0; padding: 4px 18px 18px;
}
.location-transfer-understood > div { padding: 14px 12px; border-bottom: 1px solid var(--line-soft); }
.location-transfer-understood strong { display: block; margin-top: 3px; font-size: 13px; }
.location-required-layout .card-foot {
  display: flex; align-items: flex-start; gap: 8px; color: var(--muted);
}
.location-required-layout .card-foot .icon { flex: none; margin-top: 1px; color: var(--accent); }

.location-required-decision { position: sticky; top: 76px; overflow: hidden; }
.location-required-decision .card-body { padding: 18px; }
.location-required-steps { display: grid; gap: 14px; margin: 0 0 19px; padding: 0; list-style: none; }
.location-required-steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
.location-required-steps li > span {
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--accent); background: var(--accent-soft); border-radius: 50%;
  font-size: 11.5px; font-weight: 750;
}
.location-required-steps strong { display: block; font-size: 13px; }
.location-required-steps p { margin-top: 2px; color: var(--muted); font-size: 11.8px; line-height: 1.4; }
.location-required-decision form + form { margin-top: 7px; }

@media (max-width: 980px) {
  .location-required-layout { grid-template-columns: minmax(0, 1fr); }
  .location-required-decision { position: static; grid-row: 1; }
}
@media (max-width: 650px) {
  .location-required-hero h1 { font-size: 21px; }
  .location-create-facts { grid-template-columns: 1fr; }
  .location-transfer-understood { grid-template-columns: 1fr 1fr; }
}

/* ----------------------------------------------- item reorder entry point -- */

.item-reorder { scroll-margin-top: 76px; }
.item-reorder__kicker {
  display: block; color: var(--muted); font-size: 10px; font-weight: 750;
  letter-spacing: .08em; text-transform: uppercase;
}
.item-reorder__lines { display: grid; }
.item-reorder__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto;
  gap: 12px; align-items: center; min-height: 68px; padding: 11px 15px;
  color: var(--ink); border-bottom: 1px solid var(--line-soft);
}
.item-reorder__line:last-child { border-bottom: 0; }
.item-reorder__line:hover { background: var(--surface-2); text-decoration: none; }
.item-reorder__name { min-width: 0; }
.item-reorder__name strong { display: block; font-size: 13px; }
.item-reorder__name span { display: block; margin-top: 2px; color: var(--muted); font-size: 11.5px; }
.item-reorder__policy {
  min-width: 58px; padding: 5px 8px; border-left: 1px solid var(--line-soft);
}
.item-reorder__policy small { display: block; color: var(--muted); font-size: 9.5px; white-space: nowrap; }
.item-reorder__policy strong { display: block; margin-top: 1px; font-size: 13px; }
.item-reorder__go {
  display: inline-flex; align-items: center; gap: 2px; color: var(--accent);
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.item-reorder .card-foot { font-size: 11.5px; line-height: 1.45; }

@media (max-width: 650px) {
  .item-reorder__line { grid-template-columns: minmax(0, 1fr) auto; }
  .item-reorder__policy { display: none; }
  .item-reorder__line .badge { grid-column: 2; }
  .item-reorder__go { grid-column: 2; }
}

/* A replenishment plan: the numbers first, the working available but folded. */
.rep-plan { margin: 14px 0 4px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); }
.rep-plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rep-plan-sub { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); margin: 12px 0 5px; }
.rep-plan-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rep-plan-table th { text-align: left; font-weight: 600; color: var(--ink-soft); font-size: 12px; padding: 4px 8px 4px 0; }
.rep-plan-table td { padding: 4px 8px 4px 0; border-top: 1px solid var(--line); }
.rep-plan-table .rep-short { color: #b91c1c; font-weight: 600; }
.rep-plan-working { margin-top: 12px; font-size: 13px; }
.rep-plan-working summary { cursor: pointer; color: var(--ink-soft); }
.rep-plan-working ol { margin-top: 8px; }
.rep-plan-after { margin-top: 12px; font-size: 13px; padding-top: 10px; border-top: 1px solid var(--line); }
.rep-plan-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }

/* Needs you as an inbox: one card per thing, same shape every time. */
.needs-inbox { display: grid; gap: 12px; }
.needs-item {
  display: flex; gap: 16px; align-items: flex-start; justify-content: space-between;
  padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.needs-item__body { display: grid; gap: 6px; }
.needs-item h2 { font-size: 15.5px; margin: 0; }
.needs-item__answers { display: grid; gap: 8px; margin: 4px 0 0; }
.needs-item__answers > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
.needs-item__answers dt { font-size: 11px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; color: var(--ink-soft); }
.needs-item__answers dd { margin: 0; font-size: 13.5px; line-height: 1.45; }
.needs-item__do { flex: 0 0 auto; padding-top: 2px; }
@media (max-width: 620px) {
  .needs-item { flex-direction: column; }
  .needs-item__answers > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Two clear authority defaults; the policy machinery stays behind Custom. */
.authority-choice {
  display: grid; gap: 6px; width: 100%; min-height: 104px; padding: 18px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--ink); text-align: left; cursor: pointer;
}
.authority-choice:hover { border-color: var(--accent-line); background: var(--accent-soft); }
.authority-choice.is-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.authority-choice strong { font-size: 15px; }
.authority-choice span { color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.routine-setup {
  display: grid; gap: 16px; margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.routine-setup__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.routine-setup__head h3 { margin: 0 0 4px; font-size: 16px; }
.routine-setup__head p { margin: 0; max-width: 720px; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.routine-current { margin: 0; }
.routine-capabilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.routine-capability {
  display: grid; align-content: start; gap: 14px; padding: 16px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
}
.routine-capability:has(.routine-capability__choice input:checked) {
  border-color: var(--accent-line); background: var(--accent-soft);
}
.routine-capability__choice { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.routine-capability__choice input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); }
.routine-capability__choice span { display: grid; gap: 3px; }
.routine-capability__choice strong { font-size: 14px; }
.routine-capability__choice small { color: var(--ink-soft); font-size: 12px; line-height: 1.45; }
.routine-capability__limits { margin-left: 28px; opacity: .62; }
.routine-capability:has(.routine-capability__choice input:checked) .routine-capability__limits { opacity: 1; }
.routine-limit { display: flex; align-items: center; gap: 8px; }
.routine-limit .input { width: 112px; }
.routine-suppliers { display: grid; gap: 7px; margin-top: 12px; }
.routine-safety { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
@media (max-width: 720px) {
  .routine-capabilities { grid-template-columns: 1fr; }
  .routine-setup__head { display: grid; }
}
.advanced-settings > summary::after { content: 'Show'; color: var(--accent); font-size: 12px; font-weight: 700; }
.advanced-settings[open] > summary::after { content: 'Hide'; }
.advanced-settings > .card.section { margin: 12px; }

/* Accounting is an owner-facing explanation first. Relationships are written
   as a short story; inventory detail and formal reports stay elsewhere. */
.accounting-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.accounting-stat-grid .stat { min-height: 138px; }
.accounting-stat-grid .stat strong { font-size: clamp(1.35rem, 2vw, 1.9rem); }
.accounting-equation { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  margin-top: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--line); }
.accounting-equation > div { display: grid; gap: 5px; padding: 16px; background: var(--surface); }
.accounting-equation span, .accounting-equation small { color: var(--muted); }
.accounting-equation strong { font-size: 1.25rem; color: var(--ink); }
.accounting-inventory-table { min-width: 1180px; }
.accounting-inventory-table td:first-child { min-width: 280px; }
.accounting-inventory-table td small { display: block; margin-top: 4px; }
.accounting-inventory-table tfoot th { border-top: 2px solid var(--ink); background: var(--surface-2); }
.row-needs-evidence { background: var(--warn-bg); }
.accounting-missing { color: var(--warn); max-width: 52ch; }
.accounting-story .card-body > h2 { margin: 0 0 18px; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.accounting-plain-steps { display: grid; gap: 0; margin: 0 0 18px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.accounting-plain-steps > div { display: grid; grid-template-columns: 36px 1fr; gap: 12px;
  align-items: start; padding: 16px; border-bottom: 1px solid var(--line); }
.accounting-plain-steps > div:last-child { border-bottom: 0; }
.accounting-plain-steps p, .accounting-next-list p { margin: 0; line-height: 1.6; }
.accounting-step-number { display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.accounting-result { display: grid; gap: 6px; margin-top: 18px; padding: 20px;
  border: 2px solid var(--accent-line); border-radius: var(--radius-sm); background: var(--accent-soft); }
.accounting-result > span { font-weight: 700; }
.accounting-result > strong { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--ink); }
.accounting-result > small { max-width: 78ch; color: var(--ink-soft); line-height: 1.55; }
.accounting-inventory-sentence { margin: 0 0 8px; max-width: 78ch; font-size: 1.15rem; line-height: 1.65; }
.accounting-next-list { display: grid; gap: 12px; }
.accounting-answer { border: 2px solid var(--accent-line); background: var(--accent-soft); }
.accounting-answer h2 { margin: 0 0 8px; font-size: clamp(1.25rem, 2vw, 1.7rem); }
.accounting-answer p { margin: 0; font-size: 1.05rem; line-height: 1.6; }
.accounting-money-table { min-width: 760px; }
.accounting-money-table th:nth-child(1) { width: 36%; }
.accounting-money-table th:nth-child(2) { width: 18%; }
.accounting-money-table td:nth-child(2) { white-space: nowrap; font-size: 1.08rem; }
.accounting-money-table td:nth-child(3) { color: var(--ink-soft); line-height: 1.5; }
.accounting-cost-flow { display: grid; gap: 0; max-width: 760px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; }
.accounting-cost-flow p { display: flex; justify-content: space-between; gap: 24px;
  margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.accounting-cost-flow p:last-child { border-bottom: 0; }
.accounting-cost-flow__total { background: var(--accent-soft); font-size: 1.08rem; }

/* The Accounting landing page answers the owner's five questions before it
   exposes the ledger vocabulary that supports them. */
.accounting-owner-snapshot .card-body { padding: 14px; }
.accounting-owner-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.accounting-owner-card { display: grid; align-content: start; gap: 7px; min-height: 142px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.accounting-owner-card > span { color: var(--ink-soft); font-size: 13px; font-weight: 750; }
.accounting-owner-card > strong { color: var(--ink); font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1.05; letter-spacing: -.025em; }
.accounting-owner-card > small { margin-top: auto; color: var(--muted); line-height: 1.4; }
.accounting-owner-card--inventory { border-color: var(--accent-line); background: var(--accent-soft); }
.accounting-cash-verdict { display: grid; gap: 5px; padding: 17px 18px; border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm); background: var(--warn-bg); }
.accounting-cash-verdict.is-positive { border-color: var(--success); background: var(--success-bg); }
.accounting-cash-verdict strong { font-size: 17px; }
.accounting-cash-verdict span { color: var(--ink-soft); line-height: 1.5; }
.accounting-brief-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  margin-top: 14px; }
.accounting-brief-grid > div { display: grid; gap: 7px; padding: 17px 18px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); }
.accounting-brief-grid span { color: var(--accent); font-size: 12px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; }
.accounting-brief-grid strong { font-size: 16px; }
.accounting-brief-grid p { margin: 0; color: var(--ink-soft); font-size: 13px; line-height: 1.5; }
.accounting-briefing .notice { margin-top: 14px; }
.accounting-attention-summary .card-body { display: flex; align-items: center; justify-content: space-between;
  gap: 24px; }
.accounting-attention-summary h2 { margin: 3px 0 5px; font-size: 18px; }
.accounting-attention-summary p { margin: 0; color: var(--ink-soft); }
.accounting-attention-summary.has-needs { border-color: var(--warn); }
.accounting-details > .card-body { display: grid; gap: 28px; }

/* Mission 14 owner read model: every number starts simple and drills into the
   exact operational evidence without turning the landing page into a ledger. */
.accounting-period .card-body { display: flex; align-items: end; gap: 14px; flex-wrap: wrap; }
.accounting-period .field { min-width: 180px; margin: 0; }
.accounting-period p { flex: 1 1 360px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.accounting-owner-grid { margin-bottom: 18px; }
a.accounting-owner-card { color: inherit; text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
a.accounting-owner-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.accounting-story { display: grid; gap: 12px; max-width: 92ch; }
.accounting-story p { margin: 0; font-size: 1.02rem; line-height: 1.65; }
.accounting-needs { border-color: var(--accent-line); }
.accounting-task { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 17px 18px; border: 1px solid var(--line); border-left: 4px solid var(--warn);
  border-radius: var(--radius-sm); background: var(--warn-bg); }
.accounting-task p { margin: 5px 0 0; max-width: 82ch; line-height: 1.5; }
.accounting-task .button-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.accounting-task .button-row form { margin: 0; }
.accounting-insights { display: grid; gap: 10px; }
.accounting-insights p { margin: 0; padding: 13px 15px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.accounting-owner-section { scroll-margin-top: 20px; }
.accounting-owner-section > .card-head { align-items: center; }
.accounting-mini-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.accounting-mini-grid > div { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); }
.accounting-mini-grid span, .accounting-mini-grid small { color: var(--muted); }
.accounting-mini-grid strong { font-size: 1.1rem; }
.accounting-record-list { display: grid; gap: 10px; }
.accounting-record { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); scroll-margin-top: 20px; }
.accounting-record > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 18px; cursor: pointer; }
.accounting-record > summary:hover { background: var(--surface-2); }
.accounting-record > summary > div { display: grid; gap: 4px; }
.accounting-record > summary > div:last-child { justify-items: end; }
.accounting-record > summary span:not(.badge) { color: var(--muted); font-size: 13px; }
.accounting-record-body { display: grid; gap: 16px; padding: 18px; border-top: 1px solid var(--line); }
.accounting-record-body > p { margin: 0; }
.accounting-equation { display: grid; grid-template-columns: 1fr; gap: 0; max-width: 620px; margin: 0;
  border: 1px solid var(--line); background: var(--surface); }
.accounting-equation p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 11px 14px; border-bottom: 1px solid var(--line); }
.accounting-equation p:last-child { border-bottom: 0; }
.accounting-equation p.subtotal { border-top: 2px solid var(--line-strong, var(--ink)); background: var(--surface-2); }
.accounting-equation p.total { border-top: 2px solid var(--accent); background: var(--accent-soft); font-size: 1.08rem; }
.accounting-source, .accounting-action { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.accounting-source > summary, .accounting-action > summary { padding: 13px 15px; color: var(--accent); font-weight: 800; cursor: pointer; background: var(--surface-2); }
.accounting-source > div, .accounting-action > form { padding: 15px; border-top: 1px solid var(--line); }
.accounting-line { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.accounting-line:last-child { border-bottom: 0; }
.accounting-line > div { display: grid; gap: 3px; }
.accounting-line > div:last-child { justify-items: end; }
.accounting-line span { color: var(--ink-soft); font-size: 13px; }
.accounting-line.total { border-top: 2px solid var(--ink); }
.accounting-explanation { padding: 16px 18px; border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--accent-soft); line-height: 1.6; }
.accounting-profit-story { display: grid; grid-template-columns: minmax(280px, 620px) minmax(280px, 1fr); gap: 18px; align-items: start; }
.accounting-source-facts { display: grid; gap: 0; max-width: 820px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.accounting-source-facts p { display: flex; justify-content: space-between; gap: 20px; margin: 0; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.accounting-source-facts p:last-child { border-bottom: 0; }

/* One PO, two independent truths: physical quantity and supplier money. */
.supplier-order-tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-bottom: 16px; }
.supplier-order-track { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.supplier-order-track h3 { margin: 0 0 4px; }
.supplier-order-track__status { margin: 0 0 14px; color: var(--accent); font-weight: 800; }
.money-plain-list { display: grid; gap: 0; margin: 0; }
.money-plain-list > div { display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid var(--line); }
.money-plain-list > div:last-child { border-bottom: 0; }
.money-plain-list dt { color: var(--ink-soft); }
.money-plain-list dd { margin: 0; color: var(--ink); font-weight: 800; }
.supplier-bill-list { margin-top: 16px; }
.supplier-autonomy-next { margin-top: 16px; padding: 16px; border-left: 4px solid var(--accent);
  background: var(--surface-2); }
.supplier-autonomy-next p { margin: 5px 0 0; line-height: 1.55; }

@media (max-width: 980px) {
  .accounting-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-equation { grid-template-columns: 1fr; }
  .accounting-owner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-owner-card--inventory { grid-column: 1 / -1; }
  .accounting-brief-grid { grid-template-columns: 1fr; }
  .accounting-mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accounting-profit-story { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .accounting-stat-grid { grid-template-columns: 1fr; }
  .accounting-owner-grid { grid-template-columns: 1fr; }
  .accounting-owner-card--inventory { grid-column: auto; }
  .accounting-attention-summary .card-body { display: grid; }
  .supplier-order-tracks { grid-template-columns: 1fr; }
  .accounting-task, .accounting-record > summary, .accounting-line { align-items: stretch; display: grid; }
  .accounting-record > summary > div:last-child, .accounting-line > div:last-child { justify-items: start; }
  .accounting-mini-grid { grid-template-columns: 1fr; }
}

/* State-derived operating guidance: compact enough to live on Home. */
.operating-guide {
  margin: 0 0 18px; padding: 18px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm);
}
.operating-guide--checklist { border-color: var(--accent-line); }
.operating-guide--next.has-need { border-left: 4px solid var(--warning, #d97706); }
.operating-guide__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.operating-guide__head h2 { margin: 3px 0 4px; font-size: 18px; }
.operating-guide__head p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.operating-checklist { list-style: none; display: grid; gap: 0; margin: 0; padding: 0; }
.operating-step {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; min-height: 62px; padding: 11px 0; border-top: 1px solid var(--line);
}
.operating-step:first-child { border-top: 0; }
.operating-step__number {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: 12px; font-weight: 700;
}
.operating-step.is-current .operating-step__number { color: #fff; background: var(--accent); border-color: var(--accent); }
.operating-step.is-complete .operating-step__number { color: var(--success, #15803d); background: var(--success-bg, #f0fdf4); border-color: #bbf7d0; }
.operating-step__copy > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.operating-step__copy strong { font-size: 14px; }
.operating-step__copy p { margin: 3px 0 0; color: var(--ink-soft); font-size: 12.5px; line-height: 1.45; }
.operating-step__done { color: var(--success, #15803d); font-size: 12px; font-weight: 700; }
.operating-next-answers { display: grid; gap: 8px; margin: 0 0 14px; }
.operating-next-answers > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; }
.operating-next-answers dt { color: var(--ink-soft); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.operating-next-answers dd { margin: 0; font-size: 13.5px; line-height: 1.45; }
.guide-now {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-bottom: 18px; padding: 18px; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.guide-now h2 { margin: 3px 0 4px; font-size: 18px; }
.guide-now p { margin: 0; color: var(--ink-soft); font-size: 13px; }
.task-guide { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.task-guide__topic { border-top: 1px solid var(--line); }
.task-guide__topic:first-child { border-top: 0; }
.task-guide__topic summary {
  display: flex; justify-content: space-between; gap: 12px; padding: 15px 18px;
  cursor: pointer; list-style: none; font-weight: 650;
}
.task-guide__topic summary::-webkit-details-marker { display: none; }
.task-guide__show { color: var(--accent); font-size: 12px; font-weight: 700; }
.task-guide__topic[open] .task-guide__show { font-size: 0; }
.task-guide__topic[open] .task-guide__show::after { content: 'Close'; font-size: 12px; }
.task-guide__body { padding: 0 18px 18px; }
.task-guide__body p { margin: 0 0 10px; color: var(--ink-soft); font-size: 13.5px; line-height: 1.55; }
.task-guide__tell { padding: 10px 12px; border-radius: 8px; background: var(--surface-2); color: var(--ink) !important; }
@media (max-width: 720px) {
  .operating-step { grid-template-columns: 30px minmax(0, 1fr); }
  .operating-step > .btn, .operating-step__done { grid-column: 2; justify-self: start; }
  .operating-next-answers > div { grid-template-columns: 1fr; gap: 2px; }
  .guide-now, .operating-guide__head { display: grid; }
}

/* Activity as a readable timeline of business events. */
.act-streams { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.act-streams .chip { display: inline-flex; align-items: center; gap: 6px; }
.chip-count { font-size: 11px; opacity: .7; }
.act-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.act-log__row { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.act-log__row:first-child { border-top: 0; }
.act-log__body { display: grid; gap: 3px; }
.act-log__title { font-weight: 600; font-size: 14px; }
.act-log__detail { margin: 0; font-size: 13px; color: var(--ink-soft); }
.act-log__meta { margin: 2px 0 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); }
.connection-simple{max-width:960px;margin-inline:auto}.connection-ready{padding:20px 22px}.connection-real-sale .card-body{padding-block:24px}.connection-real-sale h2{margin:5px 0 10px}.connection-advanced>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px}.connection-advanced>summary::-webkit-details-marker{display:none}

/* Every disclosure must visibly behave like an interactive control. */
details > summary { cursor: pointer; }
.mailbox-disclosure__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  list-style: none; transition: background-color .15s ease;
}
.mailbox-disclosure__summary::-webkit-details-marker,
.message-history-entry > summary::-webkit-details-marker { display: none; }
.mailbox-disclosure__summary:hover,
.message-history-entry > summary:hover { background: var(--surface-2); }
.mailbox-disclosure__label,
.message-history-entry__label { color: var(--accent); font-size: 12px; font-weight: 700; white-space: nowrap; }
.mailbox-disclosure__label::after { content: 'Open'; }
.mailbox-disclosure[open] > .mailbox-disclosure__summary .mailbox-disclosure__label::after { content: 'Close'; }
.message-history-entry__actions { display: flex; align-items: center; gap: 10px; }
.message-history-entry__label::after { content: 'Open email'; }
.message-history-entry[open] > summary .message-history-entry__label::after { content: 'Close email'; }
.mailbox-choice-panel {
  margin: 14px 0; padding: 16px; border: 1px solid var(--warning-line, #fde68a);
  border-radius: 10px; background: var(--warn-bg, #fffbeb);
}
.mailbox-choice-panel > p { margin: 5px 0 12px; color: var(--ink-soft); }
.mailbox-attachments { display: grid; gap: 8px; margin-top: 14px; }
.mailbox-attachment {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-2);
}
.mailbox-attachment p { margin: 3px 0 0; }
@media (max-width: 720px) {
  .message-history-entry__actions, .mailbox-attachment { align-items: flex-start; flex-direction: column; }
  .mailbox-disclosure__label { display: none; }
}

/* A Sales Order is one short workflow, not a wall of equally weighted forms. */
.sales-steps {
  list-style: none; margin: 0 0 18px; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--line);
}
.sales-steps li { display: flex; gap: 10px; align-items: center; padding: 13px 14px; background: var(--surface); color: var(--ink-soft); }
.sales-steps li > span { display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 24px; border: 1px solid var(--line); border-radius: 50%; font-size: 11px; font-weight: 700; }
.sales-steps li strong, .sales-steps li small { display: block; }
.sales-steps li strong { color: var(--ink); font-size: 13px; }
.sales-steps li small { margin-top: 2px; font-size: 11px; }
.sales-steps li.is-done > span { color: white; border-color: var(--accent); background: var(--accent); }
.sales-primary-action { margin-top: 16px; border-color: var(--accent-line); box-shadow: 0 0 0 2px var(--accent-soft); }
@media (max-width: 760px) {
  .sales-steps { grid-template-columns: 1fr 1fr; }
  .sales-create-choices { grid-template-columns: 1fr; }
}

/* Fulfilment
 *
 * A pick list is read while walking, so a stop is a heading with a table
 * under it rather than a location column repeated down a page. Everything
 * else here is small: an inline quantity edit that does not look like a form,
 * and a plain description list for what a shipment turned out to be.
 */
.pick-stop + .pick-stop { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.pick-stop-name {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 8px; font-size: 13px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase; color: var(--muted);
}
.pick-stop-name svg { color: var(--muted-soft); }
.pick-stop .table { margin: 0; }

.inline-form { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.inline-form .input--tiny { width: 72px; min-height: 30px; padding: 4px 8px; text-align: right; }

.detail-list { display: grid; gap: 10px; margin: 0; }
.detail-list > div { display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: baseline; }
.detail-list dt { color: var(--muted); font-size: 13px; }
.detail-list dd { margin: 0; }

.disclosure {
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.disclosure > summary {
  padding: 12px 16px; cursor: pointer; font-size: 13px; color: var(--muted); list-style: none;
}
.disclosure > summary:hover { color: var(--ink); }
.disclosure > summary::-webkit-details-marker { display: none; }
.disclosure[open] > summary { border-bottom: 1px solid var(--line-soft); }

@media (max-width: 640px) {
  .detail-list > div { grid-template-columns: 1fr; gap: 2px; }
}
.ship-to { font-style: normal; white-space: pre-line; line-height: 1.5; }

/* A prepared message, shown as the words that will actually leave. */
.message-body {
  margin: 0; padding: 14px 16px; white-space: pre-wrap; font: inherit;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius); line-height: 1.55;
}
.message-edit { min-height: 260px; font: inherit; line-height: 1.55; resize: vertical; }

.mail-list { list-style: none; margin: 0; padding: 0; }
.mail-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-bottom: 1px solid var(--line-soft);
}
.mail-row:last-child { border-bottom: 0; }
.mail-row:hover { background: var(--surface-2); }
.mail-row-main { flex: 1; min-width: 0; display: block; color: inherit; text-decoration: none; }
.mail-row-main:hover { text-decoration: none; }
.mail-row-top { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.mail-row-subject { margin-top: 2px; font-size: 14px; }
.mail-row-preview {
  margin-top: 3px; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mail-row-why { margin-top: 5px; }
.mail-row-action { display: flex; gap: 6px; flex: none; flex-wrap: wrap; justify-content: flex-end; }

@media (max-width: 640px) {
  .mail-row { flex-direction: column; gap: 10px; }
  .mail-row-action { justify-content: flex-start; }
}
.t-ok { color: var(--ok); }

/* The forward half of the Home briefing.
 *
 * Set in the briefing's own voice rather than as a card of statistics: these
 * are sentences somebody says, so they are typeset as sentences.
 */
.briefing__next { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.briefing__next-line { font-size: 14.5px; line-height: 1.5; }
.briefing__next-line a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.briefing__next-line a:hover { border-bottom-color: currentColor; text-decoration: none; }
.briefing__next-line::before { content: ""; }
.briefing__next-line.is-late { font-weight: 600; }

/* The Orders page verdict, and the two places it leads on to. */
.orders-verdict { margin: 0 0 6px; font-size: 16px; }
.orders-elsewhere { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 18px; font-size: 13.5px; }
.orders-elsewhere a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.orders-elsewhere a:hover { color: var(--accent-dark); text-decoration: none; }
.ship-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0; }
@media (max-width: 640px) { .ship-details { grid-template-columns: 1fr; } }
.planning-decision {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid var(--border, #dedbea);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(99, 72, 235, .08), rgba(255, 255, 255, .92));
}
.planning-decision > strong { display: block; margin-top: .55rem; }
.planning-option-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .75rem;
  margin-top: .85rem;
}
.planning-option {
  padding: .85rem;
  border: 1px solid var(--border, #dedbea);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.planning-option--chosen { border-color: #6548eb; box-shadow: 0 0 0 2px rgba(101,72,235,.1); }
.supplier-response{border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:20px;padding:22px 24px;background:linear-gradient(145deg,#fff 0%,#f7f5ff 100%);box-shadow:0 12px 35px rgba(51,38,105,.07)}
.supplier-response__head{display:flex;align-items:center;justify-content:space-between;gap:16px}.supplier-response h2{font-size:clamp(20px,2.2vw,28px);margin:10px 0 8px;max-width:900px}.supplier-response .disclose{margin-top:18px}
.learning-change{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;padding:22px 24px;border-top:1px solid var(--line,#e8e7ef)}
.learning-change__copy{min-width:0;max-width:780px}.learning-change__copy h3{margin:10px 0 6px}.learning-change__copy p{margin:0 0 10px}
.learning-change__actions{display:flex;gap:10px;flex-wrap:wrap}.learning-evidence{padding:12px 0 0}.learning-metrics{display:flex;gap:24px;flex-wrap:wrap}
@media (max-width:760px){.learning-change{display:block}.learning-change__actions{margin-top:18px}.learning-metrics{display:grid;gap:8px}}