/* Material Monitor console.

   The product's own look: a slate command bar, a paper ground, white cards
   with a hairline border and a 12px radius, and copper as the one accent.
   Headings are Instrument Serif, body and controls are Geist, and anything
   that labels something is Geist Mono. Fonts are served from this app, so
   the console works with no outside connection. */

@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/static/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/static/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/static/fonts/geist-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900;
  font-display: swap; src: url('/static/fonts/geist-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif'; font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/instrument-serif-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* slate, the dark end: the command bar and anything that sits on it */
  --slate-deep: #1D232B;
  --slate-dark: #2D343D;
  --slate: #424A55;
  --slate-mist: #B6BCC5;
  /* the same grey named for its job on paper: the outline of a secondary
     control, the way a crate label is printed */
  --crate: #B6BCC5;
  --quiet: #888F9C;
  /* copper, the one accent. Lift is copper on slate, dark is copper on paper */
  --copper: #C8763C;
  --copper-lift: #DE9A66;
  --copper-dark: #A85F2B;
  --copper-deeper: #8E4E1F;
  --copper-tint: #F6E7DB;
  --slate-fog: #F6E7DB;
  /* paper, the light end */
  --bg: #F5F7F9;
  --panel: #FFFFFF;
  --panel-2: #EDF1F4;
  --border: #E3E8ED;
  --border-2: #CBD2DA;
  --text: #11161C;
  --text-2: #3B434D;
  --muted: #6B7480;
  --hover-row: #F5F7F9;
  /* the status ramp the morning email sorts by */
  --danger: #B0413E;
  --warn: #A85F2B;
  --ok: #2F7350;
  --ok-dot: #3E8E62;
  --radius: 12px;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --display: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --body-font: 'Geist', 'Segoe UI', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Consolas, monospace;
  --shadow-1: 0 1px 2px rgba(17, 22, 28, .04), 0 1px 3px rgba(17, 22, 28, .04);
  --shadow-2: 0 2px 6px rgba(17, 22, 28, .05), 0 10px 22px rgba(17, 22, 28, .07);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 18px/1.6 var(--body-font);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--copper-dark); outline-offset: 2px; border-radius: 2px; }
.num, .when { font-variant-numeric: tabular-nums; }

/* ---------- command band ----------

   Three regions in one row: the lockup, the primary links, and the right
   cluster (search, company, who you are, settings, sign out). The bar is a
   flex row that is allowed to wrap, so when a laptop runs out of width the
   right cluster drops to a second line instead of painting over the links.
   Nothing here overlaps at any width. */
nav {
  position: sticky; top: 0; z-index: 30;
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 8px 20px;
  min-height: 58px;
  padding: 0 clamp(16px, 2.4vw, 40px);
  background: var(--slate-deep);
  border-bottom: 1px solid var(--slate-dark);
}
nav .brand {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; flex: 0 0 auto; align-self: stretch;
}
nav .brand:hover .wordmark { color: var(--copper-lift); }
nav .logo { height: 34px; width: auto; display: block; flex: none; }
nav .wordmark {
  font-family: var(--serif); font-weight: 400; font-size: 22px;
  line-height: 1.05; letter-spacing: -0.01em; color: #EEF1F4;
  white-space: nowrap; transition: color 140ms ease;
}
nav .nav-links {
  display: flex; flex: 0 1 auto; min-width: 0;
  align-self: stretch; align-items: stretch;
}
nav .nav-links a {
  display: flex; align-items: center; position: relative;
  font-family: var(--display); font-weight: 500; font-size: 13.5px;
  color: var(--slate-mist); text-decoration: none; padding: 0 12px;
  white-space: nowrap; transition: color 140ms ease;
}
nav .nav-links a:hover { color: var(--copper-lift); }
nav .nav-links a.active { color: #FFFFFF; }
nav .nav-links a.active::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--copper);
}
nav .nav-right {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 14px; margin-left: auto; min-width: 0;
  color: var(--slate-mist); font-size: 12.5px;
}
nav .nav-search { margin: 0; flex: 0 1 auto; min-width: 0; }
nav .nav-right a { color: var(--slate-mist); text-decoration: none; font-size: 12.5px; }
nav .nav-right a:hover { color: #FFFFFF; }
nav .who, nav .company { color: var(--slate-mist); font-size: 12.5px; white-space: nowrap; }
nav input[type="search"] {
  background: rgba(255, 255, 255, 0.12); border: 1px solid var(--slate-dark);
  color: #FFFFFF; border-radius: 999px; padding: 6px 14px; font-size: 13px;
  width: 170px; max-width: 100%;
}
nav input[type="search"]::placeholder { color: var(--slate-mist); }
nav input[type="search"]:focus { outline: none; border-color: var(--slate-mist); background: rgba(255, 255, 255, 0.18); }
nav .badge {
  background: var(--copper); color: var(--slate-deep); border-radius: 999px;
  font-family: var(--display); font-size: 11px; font-weight: 600;
  padding: 1px 7px; margin-left: 5px;
}

/* Under about a laptop the bar runs out of room before it runs out of
   things to show. The links tighten first, then the right cluster takes a
   line of its own. */
@media (max-width: 1400px) {
  nav .nav-links a { padding: 0 9px; font-size: 13px; }
  nav input[type="search"] { width: 140px; }
}
@media (max-width: 1200px) {
  nav { padding-top: 8px; padding-bottom: 8px; }
  nav .nav-links { flex-basis: 100%; order: 3; align-self: auto; }
  nav .nav-links a { padding: 8px 10px; }
  nav .nav-links a.active::after { bottom: 2px; }
  nav .nav-right { flex: 1 1 auto; justify-content: flex-end; }
}
@media (max-width: 760px) {
  nav .wordmark { display: none; }
  nav .nav-search { display: none; }
  nav .nav-links { justify-content: flex-start; overflow-x: auto; }
}

main { max-width: 1980px; margin: 0 auto; padding: clamp(20px, 2.4vw, 40px); padding-bottom: 90px; }
h1 {
  font-family: var(--serif); font-weight: 400; font-size: 34px;
  line-height: 1.15; letter-spacing: -0.01em; color: var(--text);
}
h3 { font-family: var(--display); font-weight: 600; }
/* Section heads are the small mono eyebrows from the design */
h2 {
  font-family: var(--mono); font-weight: 500; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--copper-dark);
}
h2 .count, h1 .count { color: var(--muted); font-size: 12px; font-weight: 500; margin-left: 8px; text-transform: none; letter-spacing: 0; }
a { color: var(--copper-dark); }
.hint, .empty, .muted { color: var(--muted); }
.hint, .empty { font-size: 16px; }
.saved { color: var(--ok); }

/* The primary control on paper is copper, not ink. Secondary is an
   outline that carries no color of its own, and anything that destroys
   something stays red so it never reads as the ordinary next step. */
button, .btn {
  font-family: var(--display); font-weight: 600;
  padding: 9px 16px;
  border-radius: 6px;
  border: 1px solid var(--copper-dark);
  background: var(--copper-dark);
  color: #FFFFFF;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
button:hover, .btn:hover {
  background: var(--copper-deeper); border-color: var(--copper-deeper);
  color: #FFFFFF;
}
button.ghost, .btn.ghost {
  background: transparent; border: 1.5px solid var(--crate);
  color: var(--text); font-weight: 500;
}
button.ghost:hover, .btn.ghost:hover {
  background: transparent; border-color: var(--copper-dark);
  color: var(--copper-deeper);
}
button.danger, .btn.danger {
  background: var(--danger); border-color: var(--danger); color: #FFFFFF;
}
button.danger:hover, .btn.danger:hover {
  background: #93332F; border-color: #93332F;
}

input, select, textarea {
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border-2);
  background: var(--panel);
  color: var(--text);
  font-size: 16px;
  font-family: var(--body-font);
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--copper-dark); box-shadow: 0 0 0 1px var(--copper-dark); }

/* Status and flag chips. Keep the hues distinct from each other. */
.chip {
  font-family: var(--mono); font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--panel-2);
  color: var(--muted);
  white-space: nowrap;
}
/* Waiting on a person, and not ordered yet, are the copper end. */
.chip.st-awaiting_client_approval, .chip.st-awaiting_designer_input,
.chip.st-awaiting_field_approval { background: var(--copper-tint); color: var(--copper-deeper); }
.chip.st-not_ordered { background: var(--copper-tint); color: var(--copper-deeper); }
/* Moving, but not here yet, is quiet slate. */
.chip.st-ordered { background: var(--panel-2); color: var(--slate); }
.chip.st-shipped { background: #E4EAF0; color: #35404D; }
.chip.st-ready_for_pickup { background: #E4EAF0; color: #35404D; }
/* Landed is the one green. */
.chip.st-received { background: #E1EFE7; color: var(--ok); }
.chip.st-installed { background: #E9F1EC; color: var(--ok); }
.chip.flag { background: var(--danger); color: #fff; font-weight: 600; }
.chip.src { background: transparent; border: 1px solid var(--border-2); }

/* ---------- dashboard ---------- */
.week-strip { margin-bottom: 26px; }
.week-strip ul {
  list-style: none; padding: 0; margin: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-1); overflow: hidden;
}
.week-strip li {
  display: flex; gap: 12px; align-items: center;
  padding: 11px 16px; border-bottom: 1px solid var(--border);
}
.week-strip li:last-child { border-bottom: none; }
.week-strip li:hover { background: var(--hover-row); }
.week-strip .when {
  font-family: var(--mono); font-weight: 500; color: var(--copper-dark);
  font-size: 12px; letter-spacing: 0.06em; min-width: 84px;
}
.banner {
  background: var(--panel); border: 1px solid var(--border);
  padding: 12px 16px; border-radius: 12px; margin-bottom: 20px;
  box-shadow: var(--shadow-1);
}

/* Jobs: one hairline band, dividers hold however the cells wrap */
.job-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-1); overflow: hidden;
}
.job-card {
  background: var(--panel); border: none; border-radius: 0;
  padding: 16px 20px; text-decoration: none; color: var(--text); display: block;
  transition: background 140ms ease;
}
.job-card:hover { border-color: transparent; background: var(--hover-row); }
.job-card h3 {
  margin: 0 0 2px; font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.01em;
}
.job-card .addr { color: var(--muted); font-size: 12px; margin-bottom: 10px; }
.job-card .stats { display: flex; flex-wrap: wrap; gap: 6px; }
.progress { height: 5px; background: var(--panel-2); border-radius: 3px; margin: 10px 0; }
.progress > div { height: 5px; background: var(--ok-dot); border-radius: 3px; }
.job-card .alert { color: var(--danger); font-size: 13px; margin-top: 8px; }

/* ---------- job board table ---------- */
.section { margin-bottom: 30px; }
.board-wrap { overflow-x: auto; }
table.board {
  width: 100%; border-collapse: collapse; background: var(--panel);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-1);
}
table.board th {
  text-align: left; font-family: var(--mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted);
  font-weight: 600; padding: 12px; border-bottom: 1px solid var(--border-2);
  background: none; white-space: nowrap;
}
table.board td {
  padding: 11px 10px; border-bottom: 1px solid var(--border);
  vertical-align: top; font-size: 16px;
}
/* Column budget: the item name no longer
   eats half the row, and the date columns sit shoulder to shoulder. */
table.board th.col-item { width: 26%; }
table.board th.col-vendor { width: 11%; }
table.board th.col-status { width: 15%; }
table.board th.col-date { width: 7%; }
table.board th.col-timeline { width: 10%; }
table.board th.col-tracking { width: 17%; }
table.board td.timeline { font-size: 13.5px; }
table.board td.tracking .track-status { display: block; font-size: 13.5px; }
table.board td.tracking .sub.num { font-size: 11.5px; letter-spacing: 0.02em; }
table.board tr:last-child td { border-bottom: none; }
table.board tr:hover td { background: var(--hover-row); }
table.board .item-name a { color: var(--text); text-decoration: none; font-weight: 600; }
table.board .item-name a:hover { color: var(--copper-dark); }
table.board .sub { display: block; color: var(--muted); font-size: 12.5px; font-weight: 400; }
table.board td.late { color: var(--danger); }
table.board .num { white-space: nowrap; font-variant-numeric: tabular-nums; }

.addform { display: flex; gap: 8px; margin: 14px 0 26px; flex-wrap: wrap; }
.addform input[name="name"] { flex: 1; min-width: 220px; }
.controls { margin-bottom: 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ---------- generic row list (search results, receiving) ---------- */
.item-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 12px; background: var(--panel);
  border: 1px solid var(--border); box-shadow: var(--shadow-1);
  margin-bottom: 6px; text-decoration: none; color: var(--text);
  transition: background 140ms ease, border-color 140ms ease;
}
.item-row:hover { border-color: var(--border-2); background: var(--hover-row); }
.item-row .name { flex: 1; min-width: 0; }
.item-row .name .sub { display: block; color: var(--muted); font-size: 12.5px; }
.item-row .arrives { font-size: 12.5px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.item-row .arrives.late { color: var(--danger); }

/* ---------- item detail ---------- */
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin-bottom: 8px;
  max-width: 860px;
}
.detail-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--mono); font-weight: 500; font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.detail-grid label input, .detail-grid label select, .detail-grid label textarea {
  font-family: var(--body-font); letter-spacing: normal; text-transform: none;
}
.detail-grid .full { grid-column: 1 / -1; }
.flags { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0; }
.flags label { display: flex; gap: 6px; align-items: center; font-size: 14px; font-family: var(--body-font); text-transform: none; letter-spacing: normal; }
.history { list-style: none; padding: 0; max-width: 860px; }
.history li {
  padding: 9px 14px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; margin-bottom: 5px;
  display: flex; gap: 12px; align-items: baseline;
}
.history .when { color: var(--muted); font-size: 12px; white-space: nowrap; min-width: 120px; }
.photo-grid { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.photo-grid img { max-height: 140px; border-radius: 12px; border: 1px solid var(--border); }

/* ---------- Updates page ---------- */
.quickadd { display: flex; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.quickadd input[name="message"] { flex: 1; padding: 13px 15px; font-size: 17px; min-width: 260px; }
.dropzone {
  border: 2px dashed var(--border-2); border-radius: 12px; padding: 14px;
  background: var(--panel); display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; margin: 0 0 20px;
}
.filepick { cursor: pointer; color: var(--copper-dark); font-family: var(--display); font-weight: 600;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px;
  background: var(--panel-2); }
.filepick input { display: none; }
.dropzone.drag-over { border-color: var(--copper-dark); background: var(--copper-tint); }
.dropzone .drop-inner { flex: 1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dropzone input[type="file"] { border: none; padding: 6px 0; background: transparent; }
#qa-mic.listening { border-color: var(--danger); color: var(--danger); }

.qa-result {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px; margin-bottom: 22px; box-shadow: var(--shadow-1);
}
.qa-result .match { display: flex; gap: 10px; align-items: center; padding: 6px 0; }
.staged-card, .chase-row {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; box-shadow: var(--shadow-1);
}
.staged-card .snippet {
  background: var(--panel-2); border-radius: 8px; padding: 8px 10px;
  font-size: 13px; color: var(--muted); margin: 8px 0; white-space: pre-wrap;
}
.staged-card .actions, .chase-row .actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.proposed { font-size: 13px; margin-top: 6px; }
.proposed td { padding: 2px 12px 2px 0; }
.proposed .proposed-head {
  text-align: left; font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--copper-dark); padding: 4px 0 2px;
}
.chase-cat { color: var(--danger); }
.chase-row .reason { color: var(--warn); font-size: 13px; }
.chase-row .contact { color: var(--muted); font-size: 13px; }

/* ---------- receiving (mobile-first, big targets) ---------- */
.receive-list .item-row { padding: 14px 12px; }
.receive-list .btn { padding: 12px 20px; }
.condition { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.condition label {
  flex: 1; min-width: 100px; text-align: center; padding: 14px 8px;
  background: var(--panel); border: 2px solid var(--border-2); border-radius: 12px;
  cursor: pointer;
}
.condition input { display: none; }
.condition label:has(input:checked) { border-color: var(--copper-dark); background: var(--copper-tint); }
.condition label.bad:has(input:checked) { border-color: var(--danger); background: #FBEFEE; }
.receive-form { display: flex; flex-direction: column; gap: 12px; max-width: 480px; }

.login-box { max-width: 400px; margin: 12vh auto; text-align: center; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 32px 28px; box-shadow: var(--shadow-2); }
.login-box h1 { color: var(--text); font-family: var(--serif); font-weight: 400; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }

table.plain { border-collapse: collapse; }
table.plain td, table.plain th { padding: 6px 14px 6px 0; text-align: left; }

@media (max-width: 640px) {
  nav { padding: 8px 14px; gap: 8px 10px; }
  nav .nav-links a { padding: 6px 10px; }
  nav .nav-links a.active::after { display: none; }
  nav .who, nav .company { display: none; }
  .detail-grid { grid-template-columns: 1fr; }
  .item-row { flex-wrap: wrap; }
  main { padding: 16px 12px 80px; }
}

/* Round 6: editable update cards + expandable history */
.edit-panel { margin-top: 8px; }
.edit-panel > summary { cursor: pointer; color: var(--copper-dark); }
.edit-panel .edit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin: 10px 0; }
.edit-panel label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; }
.history details > summary { cursor: pointer; display: flex; gap: 8px; align-items: baseline; list-style: none; }
.history details > summary::-webkit-details-marker { display: none; }
.history details[open] > summary { font-weight: 600; }
.history details .proposed, .history details .snippet { margin: 8px 0 8px 24px; }

/* Round 7: delete + partial delivery */
.btn.danger, button.danger { color: var(--danger); border-color: #E0C2C1; background: transparent; }
.btn.danger:hover, button.danger:hover { background: #FBEFEE; border-color: var(--danger); }
.chip.st-partially_received { background: #E9F1EC; color: var(--ok); }
.chip.st-owner_supplied { background: var(--panel-2); color: var(--muted); }
.chip.st-existing { background: var(--panel-2); color: var(--muted); }
.chip.st-partially_ordered { background: var(--panel-2); color: var(--slate); }

/* Needs ordering */
.order-box { border: 1px solid var(--border); background: var(--panel); border-radius: 12px; padding: 16px 20px; margin-bottom: 22px; box-shadow: var(--shadow-1); }
.order-box h2 { margin: 0 0 8px; color: var(--copper-dark); }
.order-box ul { list-style: none; margin: 0; padding: 0; }
.order-box li { padding: 7px 0; border-top: 1px solid var(--border); display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.order-box li:first-child { border-top: none; }
.order-box .overdue { color: var(--danger); font-weight: 700; }

/* Bulk edit (the cleanup sitting) */
table.bulk input, table.bulk select { width: 100%; min-width: 90px; font-size: 13px; padding: 4px 6px; }
table.bulk input.narrow { min-width: 56px; width: 64px; }
table.bulk td { vertical-align: middle; }
table.bulk td.stale { color: var(--danger); font-weight: 600; }
table.bulk tr.dirty td { background: var(--copper-tint); }
table.bulk input.ok { width: 18px; height: 18px; min-width: 0; accent-color: var(--copper-dark); }
.bulk-actions { margin-top: 14px; display: flex; align-items: center; gap: 12px; }

/* Chase drafts */
.pick-label { margin-right: 6px; }
input.pick { width: 17px; height: 17px; vertical-align: -3px; accent-color: var(--copper-dark); }
.draft-card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--panel);
  padding: 14px 18px; margin-bottom: 18px;
}
.draft-card h3 { margin: 0 0 8px; }
.draft-body {
  width: 100%; font: 15px/1.6 var(--mono);
  color: var(--text); background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; margin: 8px 0;
}

/* Problems from the field, on the dashboard until resolved */
.issues-box {
  border: 1px solid var(--border); background: var(--panel); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 22px; box-shadow: var(--shadow-1);
}
.issues-box h2 { margin: 0 0 8px; color: var(--danger); }
.issues-box ul { list-style: none; margin: 0; padding: 0; }
.issues-box li {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-top: 1px solid var(--border);
}
.issues-box li:first-child { border-top: none; }
.issue-desc { margin-top: 2px; }

/* Components nested under an item */
button.twist {
  border: none; background: transparent; cursor: pointer; padding: 0 6px 0 0;
  color: var(--copper-dark); font-size: 12px; line-height: 1;
}
.chip.parts { background: var(--panel-2); color: var(--slate); margin-left: 6px; }
tr.component-row { background: var(--bg); }
tr.component-row td { border-top: 1px dashed var(--border); }
tr.component-row .item-name { padding-left: 26px; }
tr.component-row .tree { color: var(--muted); margin-right: 6px; }
.components { list-style: none; padding: 0; margin: 10px 0; }
.components li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}

/* Round 9: add-a-project */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.section-head h2 { margin: 0; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- company setup, team, wizard ---------- */
.setup-page { max-width: 720px; margin: 0 auto; }
.setup-page h1 { margin-bottom: 6px; }
.lead { font-size: 19px; color: var(--text-2); max-width: 62ch; margin: 0 0 22px; }
.card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 20px 22px; margin-bottom: 18px;
  box-shadow: var(--shadow-1);
}
.card h2 { margin-top: 0; }
.card h3 { font-size: 14px; margin: 18px 0 6px; }
form.stack { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
form.stack label, form.row-form label { display: flex; flex-direction: column; gap: 5px; }
.field-label {
  font-family: var(--mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted);
}
form.row-form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
form.inline { display: inline; margin: 0; }
.form-error {
  background: #FBEFEE; border: 1px solid #E0C2C1; color: var(--danger);
  border-radius: 8px; padding: 9px 12px; max-width: 62ch;
}
.invite-row, .plain-list li {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 9px 0; border-top: 1px solid var(--border);
}
.invite-row:first-of-type, .plain-list li:first-child { border-top: none; }
.plain-list { list-style: none; margin: 0; padding: 0; }
table.plain.wide { width: 100%; }
table.plain.wide th {
  font-family: var(--mono); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--muted); border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
table.plain.wide td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--border); }
table.plain.wide td.right, table.plain.wide th.right { text-align: right; padding-right: 0; }
.role-key { list-style: none; padding: 0; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.role-key li { padding: 3px 0; }
.checkline { flex-direction: row !important; align-items: center; gap: 9px; }
.checkline input { width: 18px; height: 18px; }
nav .company-switch { display: flex; gap: 6px; align-items: center; margin: 0; }
nav .company-switch select { font-size: 12.5px; padding: 5px 8px; }
nav .company { color: var(--slate-mist); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.btn.small, button.small { padding: 5px 10px; font-size: 12px; }

/* ---------- help marks ---------- */
.help { position: relative; display: inline-block; vertical-align: middle; margin-left: 6px; }
.help-mark {
  width: 24px; height: 24px; min-width: 24px; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-2);
  background: var(--panel); color: var(--muted);
  font-family: var(--display); font-weight: 600; font-size: 13px; line-height: 1;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.help-mark:hover { background: var(--panel-2); color: var(--text); border-color: var(--border-2); }
.help-mark[aria-expanded="true"] { background: var(--copper-dark); border-color: var(--copper-dark); color: #fff; }
.help-bubble {
  position: absolute; z-index: 60; top: 30px; left: -8px;
  width: min(360px, 78vw); display: block;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-2); border-radius: 12px;
  box-shadow: var(--shadow-2); padding: 13px 15px;
  font-size: 14.5px; line-height: 1.55; font-weight: 400;
  text-transform: none; letter-spacing: normal;
}
.help-bubble[hidden] { display: none; }
.help-bubble { font-size: 16px; }
@media (max-width: 640px) { .help-bubble { left: auto; right: -8px; } }

/* ---------- setup wizard ---------- */
.step-rail { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 22px; }
.step-rail li a {
  display: flex; align-items: center; gap: 8px; text-decoration: none;
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--panel); color: var(--muted); font-size: 13.5px;
  font-family: var(--display);
}
.step-rail li .num {
  width: 20px; height: 20px; border-radius: 50%; background: var(--panel-2);
  color: var(--muted); display: inline-flex; align-items: center;
  justify-content: center; font-size: 11.5px; font-weight: 600;
}
.step-rail li.now a { border-color: var(--copper-dark); color: var(--text); }
.step-rail li.now .num { background: var(--copper-dark); color: #fff; }
.step-rail li.done a { color: var(--text-2); }
.step-rail li.done .num { background: var(--ok-dot); color: #fff; }

.door { border-top: 1px solid var(--border); padding: 18px 0 4px; }
.door:first-of-type { border-top: none; }
.door h3 { margin: 0 0 6px; font-family: var(--display); font-size: 16px; }
.door p { margin: 0 0 10px; max-width: 62ch; }
.door.primary h3 { font-size: 18px; }
.door .note { color: var(--muted); font-size: 14px; }
/* Says plainly, on the card itself, that a door is not working yet. */
.door .not-yet {
  font-family: var(--mono, ui-monospace, Consolas, monospace);
  font-size: 13px; letter-spacing: 0.02em;
  color: var(--copper-dark, #A85F2B);
  margin: 10px 0 12px;
}
/* The two facts about a company's mail sit above the doors, because they
   matter to every door and belong to none of them. */
.mail-facts {
  margin: 18px 0 24px; padding: 16px 18px;
  background: var(--panel-2); border-radius: 10px;
}
.mail-facts h3 { margin: 0 0 6px; font-size: 15px; }
.mail-facts .note { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.door-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.pending-address {
  background: var(--panel-2); border: 1px dashed var(--border-2);
  border-radius: 8px; padding: 10px 12px; color: var(--muted);
  font-family: ui-monospace, Consolas, monospace; font-size: 13.5px;
}
.chosen { background: var(--slate-fog); border-radius: 8px; padding: 9px 12px; }
.plain-bullets { margin: 0 0 4px; padding-left: 20px; max-width: 66ch; }
.plain-bullets li { padding: 3px 0; }
.plain-fieldset { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.plain-fieldset legend { padding: 0 6px; }
.or { color: var(--muted); margin: 16px 0 8px; }

/* ---------- the forwarding address, and the mail that comes to it ---------- */
/* The address is the whole credential, so it is set in mono, wide enough to
   read in one go, and next to a button rather than left to be selected by
   hand across two lines. */
.copy-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 4px 0 8px; }
.copy-row .address {
  flex: 1; min-width: 300px; font-family: var(--mono); font-size: 15px;
  background: var(--panel-2); border: 1px solid var(--border-2);
  border-radius: 8px; padding: 11px 13px; color: var(--text);
}
/* For the one address that is too long to sit on a line: it wraps and is
   read in full rather than running off the edge of its box. */
.copy-row .address.wrapping {
  resize: vertical; line-height: 1.5; word-break: break-all;
}
.mono { font-family: var(--mono); }
/* Instructions somebody follows once and never again, folded away until
   they are the thing being done. */
.how-to { margin: 10px 0; border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.how-to > summary { cursor: pointer; font-family: var(--display); font-size: 15.5px; }
.how-to[open] > summary { margin-bottom: 8px; }
.plain-steps { margin: 6px 0; padding-left: 22px; max-width: 66ch; }
.plain-steps li { padding: 4px 0; }
.how-to .note { color: var(--muted); font-size: 15px; max-width: 66ch; }
/* A sender nobody has vouched for yet. Not an alarm: it is a question. */
.sender-card { margin: 10px 0; }
.sender-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 16px; }
.sender-card .snippet {
  background: var(--panel-2); border-radius: 8px; padding: 8px 11px;
  color: var(--text-2); font-size: 14.5px; margin: 8px 0;
}
.sender-card .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* A vendor email that was read and matched nothing. Also a question rather
   than an alarm, so it wears the same clothes as a new sender. The three
   ways of answering it sit side by side, because none of them is the usual
   one and the office has to read all three. */
.message-card { margin: 10px 0; }
.message-card h3 { margin: 0 0 6px; font-family: var(--display); font-size: 16px; }
.message-card .note { color: var(--text-2); font-size: 15px; margin: 6px 0 0; }
.message-actions {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.message-actions form {
  display: flex; flex-direction: column; gap: 6px; margin: 0;
}
.message-actions label {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.message-actions select, .message-actions input { min-width: 170px; }
/* The mail has stopped. Said in the quiet grey, because it is a thing to
   check rather than a thing that has gone wrong. */
.quiet-warning { color: var(--copper-dark); }
.banner.quiet-notice { color: var(--muted); }

/* ---------- a connected mailbox ---------- */
.connection {
  border-top: 1px solid var(--border); padding: 14px 0 4px; margin-top: 6px;
}
.connection p { max-width: 66ch; }
.connection .note { color: var(--muted); font-size: 15px; }
/* One that has stopped working. Copper, not red: it is a thing to do, not
   a thing that has broken. */
.connection.stuck { border-left: none; }
.connection.stuck strong { color: var(--copper-dark); }
.inline-form { display: inline-block; margin: 0 6px 0 0; }
/* A row of buttons. A div rather than a paragraph, because a form is not
   allowed inside a paragraph and a browser that meets one closes the
   paragraph early. The margin a paragraph would have given it is set
   here. */
.actions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  margin: 14px 0;
}

/* ---------- the vendor mail status centre ---------- */
/* The same six lines in the same order, so somebody who checks it every
   Monday learns where to look rather than reading it fresh. A seventh
   turns up only on a day when mail reached an address nobody owns. */
.status-center {
  margin: 6px 0 12px; padding: 14px 16px; border-radius: 10px;
  background: var(--panel-2); border: 1px solid var(--border);
}
.status-center > div {
  display: flex; gap: 14px; flex-wrap: wrap;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.status-center > div:last-child { border-bottom: none; }
.status-center dt {
  flex: 0 0 240px; color: var(--muted); font-family: var(--mono);
  font-size: 12.5px; letter-spacing: 0.02em; padding-top: 3px;
}
.status-center dd { margin: 0; flex: 1; min-width: 200px; }
.status-center.stuck { border-color: var(--copper-dark); }
.status-center.stuck > div:last-child dd strong { color: var(--copper-dark); }
/* The one thing to do next, said once, under the table. */
.next-step { max-width: 66ch; margin: 0 0 14px; }

/* A control that is a rare repair rather than part of the everyday work.
   It reads as a line of text with an underline, so it is there for the
   person looking for it and out of the way of everybody else. */
.quiet-action { margin: 14px 0 4px; }
.quiet-action .linky {
  background: none; border: none; padding: 0; font: inherit;
  font-size: 14px; color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.quiet-action .linky:hover { color: var(--copper-dark); }