/* Store Opportunity Board — the DriveCentric-fed rooftops.
   Two identities only, same rule as the Hyundai board: --cc is Cam Clark and
   never changes; --brand is the manufacturer and is set per store. */

:root {
  --cc: #1B4F88;
  --brand: #003478;              /* Ford blue by default; each store overrides */
  --bg: #f7f5ef; --surface: #fff; --ink: #17233b; --muted: #6b7386;
  --line: #e4e0d6; --line-soft: #efece4;
  --gold: #a8792c; --gold-soft: #fdf6e6;
  --good: #1a7a3c; --good-soft: #eaf6ee;
  --blue: var(--brand); --blue-soft: #eaf1fa;
  --sans: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --brand: #6f9fe0;
    --bg: #0d1420; --surface: #131c2b; --ink: #e8ecf4; --muted: #93a0b8;
    --line: #22304a; --line-soft: #1a2537;
    --gold: #d9ad5c; --gold-soft: #2a2213;
    --good: #5fbf83; --good-soft: #14301f;
    --blue-soft: #17263d;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); line-height: 1.5; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px 22px 80px; }
.num { font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); font-weight: 600; }

header.top { display: flex; align-items: flex-start; gap: 16px; justify-content: space-between; flex-wrap: wrap; margin-bottom: 22px; }
.brand { display: flex; gap: 14px; align-items: center; }
.mark {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--cc); color: #fff; font-weight: 800; font-size: 15px; flex: none;
}
header h1 { margin: 0; font-size: clamp(21px, 2.6vw, 27px); letter-spacing: -.02em; }
header .sub { margin: 3px 0 0; color: var(--muted); font-size: 14.5px; max-width: 66ch; }
.live { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: right; }
.live .dot { color: var(--good); }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: 15px; padding: 20px 22px; margin-bottom: 16px; }
.card > label, .card > .lab { display: block; font-weight: 800; font-size: 15.5px; margin-bottom: 12px; }
.note { color: var(--muted); font-size: 13px; line-height: 1.6; }

/* headline tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.tile { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.tile b { display: block; font-size: 30px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tile span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.tile.blue b { color: var(--brand); }
.tile.gold b { color: var(--gold); }
.tile.good b { color: var(--good); }
.tile.sold { background: var(--line-soft); }
.tile.sold b { color: var(--ink); }

/* morning card */
.morning { border-left: 4px solid var(--brand); }
.m-callhead { font-weight: 800; font-size: 15px; margin-bottom: 10px; }
.m-today { font-size: 13.5px; color: var(--muted); margin-top: 10px; }
.people { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.person {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--blue-soft); border-radius: 999px; padding: 5px 13px; font-size: 14px;
}
.person em { font-style: normal; color: var(--muted); font-size: 12px; }
.person.flag { background: var(--gold-soft); }
.clean { background: var(--good-soft); border-left-color: var(--good); }
.clean .m-callhead { color: var(--good); }

/* aging list */
.agehead {
  display: flex; align-items: baseline; gap: 9px; margin: 16px 0 8px;
  font-size: 12px; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.agehead:first-of-type { margin-top: 4px; }
.agehead .n { color: var(--ink); font-weight: 700; }
.agehead.cold .n { color: var(--gold); }
details.fold > summary { cursor: pointer; font-weight: 800; font-size: 15.5px; list-style: none; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::before { content: "▸ "; color: var(--muted); }
details.fold[open] > summary::before { content: "▾ "; }

/* tables */
/* On a phone these tables are wider than the screen. Two cues make that
   swipe obvious and keep it readable: the store name stays pinned to the
   left as the numbers slide under it, and a soft shadow on the right edge
   says "there's more this way." background-attachment:local ties the fades
   to the scroll position so they fade out once you reach an end. */
.scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(90deg, var(--surface) 18%, transparent) 0 0 / 34px 100% no-repeat,
    linear-gradient(90deg, transparent, var(--surface) 82%) 100% 0 / 34px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(23,35,59,.16), transparent) 100% 0 / 16px 100% no-repeat;
  background-attachment: local, local, scroll;
}
.scroll th:first-child,
.scroll td:first-child {
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 2;
  box-shadow: 9px 0 8px -7px rgba(23,35,59,.22);
}
table { border-collapse: collapse; width: 100%; font-size: 14.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line-soft); }
th { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 800; border-top: 2px solid var(--line); border-bottom: 0; }
.cell { color: var(--brand); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cell.zero { color: var(--muted); cursor: default; text-decoration: none; font-weight: 400; }
.gapcell { color: var(--gold); font-weight: 800; }

/* source bars */
.track { display: block; background: var(--line-soft); border-radius: 999px; height: 8px; overflow: hidden; }
.fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; }

/* the limits panel */
.limits { border-left: 4px solid var(--line); background: var(--line-soft); }
.limits ul { margin: 8px 0 0; padding-left: 20px; }
.limits li { margin-bottom: 7px; font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.limits b { color: var(--ink); }

/* drill overlay */
.overlay { position: fixed; inset: 0; background: rgba(9,14,24,.55); z-index: 3000; display: none; padding: 20px; }
.overlay.on { display: grid; place-items: center; }
/* wide enough that the drill tables fit their columns now that each row
   carries an Assign; the pinned cell below is the fallback when they do not */
.sheet { background: var(--surface); border-radius: 16px; width: min(940px, 100%); max-height: 88vh; overflow: auto; padding: 20px 22px; }
.sheet h2 { margin: 0 0 4px; font-size: 19px; }
.sheet .close { float: right; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 5px 14px; cursor: pointer; font-weight: 700; }

.msg { text-align: center; padding: 40px 20px; }
.msg h2 { margin: 0 0 8px; font-size: 21px; }
.msg p { color: var(--muted); margin: 0 0 14px; }
.msg input { padding: 10px 13px; border: 1px solid var(--line); border-radius: 9px; font: inherit; background: var(--surface); color: var(--ink); }
.msg button { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--cc); color: #fff; font-weight: 700; cursor: pointer; }

@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) {
  .tiles { grid-template-columns: 1fr 1fr; }
  .wrap { padding: 18px 14px 60px; }
  /* the column's gutter narrows here, so the home bar's trail follows it */
  .hubbar-inner { --hb-gut: 28px; }
}

/* Confirmed bought — a delivery, not a call. */
.person.bought { background: var(--good-soft); color: var(--good); }

/* The 8:00 ledger: came in → turned into a deal → did not. */
.ledger {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin: 4px 0 14px; font-size: 15px;
}
.ledger b { font-size: 24px; margin-right: 4px; }
.ledger .arrow { color: var(--muted); }
.ledger .won b { color: var(--good); }
.ledger .todo b { color: var(--gold); }
.ledger .todo { font-weight: 700; }

/* Deal split chips */
.dealsplit .chips { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 0; list-style: none; }
.dealsplit .chips li {
  background: var(--good-soft); color: var(--good); border-radius: 10px;
  padding: 8px 14px; font-size: 14px; font-weight: 600;
}
.dealsplit .chips b { font-size: 20px; margin-right: 5px; }

/* Age bands show a workable handful; the rest is one tap away. */
.people .extra { display: none; }
.people.all .extra { display: inline-flex; }
.morebtn {
  margin: 8px 0 2px; padding: 4px 12px; font: inherit; font-size: 12.5px; font-weight: 700;
  color: var(--brand); background: none; border: 1px solid var(--line);
  border-radius: 999px; cursor: pointer;
}
.morebtn:hover { border-color: var(--brand); }

/* Making the ledger numbers clickable must not cost their meaning:
   green stays the deal, gold stays the work still to do. */
.ledger .won .cell { color: var(--good); }
.ledger .todo .cell { color: var(--gold); }

/* Deals written yesterday — the second half of the 8:00 question. */
.m-deals { margin: 12px 0 0; font-size: 14px; color: var(--muted); }
.m-deals b { font-size: 18px; color: var(--ink); margin-right: 3px; }

/* ⓘ — every number explains itself, in the card it belongs to. */
.i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 5px; padding: 0;
  border: 1px solid var(--line); border-radius: 50%; background: none;
  color: var(--muted); font: italic 700 10px Georgia, serif;
  cursor: pointer; vertical-align: 1px;
}
.i:hover { border-color: var(--brand); color: var(--brand); }
.info-note {
  margin-top: 12px; padding: 12px 14px; border-left: 3px solid var(--brand);
  background: var(--blue-soft); border-radius: 0 10px 10px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--ink);
}
.tile .info-note { margin-top: 10px; font-size: 12.5px; }
@media print { .i, .info-note { display: none; } }

/* A link that names a section should not park it flush against the top edge. */
.card[id] { scroll-margin-top: 16px; }

/* which rooftop this is, and one click to another */
.topright { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.storepick { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.storepick label {
  font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.storepick select {
  font: inherit; font-size: 13px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; cursor: pointer;
  max-width: 15rem;
}
.storepick select:hover, .storepick select:focus { border-color: var(--brand); outline: none; }
@media (max-width: 620px) {
  .topright { align-items: flex-start; width: 100%; }
  .live { text-align: left; }
}

/* arriving from a link that named this section */
.card.landed, .tile.landed { box-shadow: 0 0 0 2px var(--brand); transition: box-shadow .5s ease; }
@media print { .storepick { display: none; } }

/* the commitment log */
.card.commits .ledger { margin-bottom: 12px; }
.person.assignable { cursor: pointer; }
.person.assignable:hover { border-color: var(--brand); color: var(--brand); }
td.answers { white-space: nowrap; }
td.answers button {
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 9px; margin: 1px 3px 1px 0;
}
td.answers button:hover { border-color: var(--brand); color: var(--brand); }
.assign { display: grid; gap: 10px; margin: 12px 0 4px; max-width: 460px; }
.assign label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.assign input, .assign select {
  font: inherit; font-size: 14px; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px;
}
.assign input:focus, .assign select:focus { border-color: var(--brand); outline: none; }
/* the sheet's own actions match the access prompt's button, not the browser's */
.sheet #aGo, .sheet #whoGo {
  padding: 9px 18px; border: 0; border-radius: 999px;
  background: var(--cc); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer;
}
.sheet #aGo[disabled] { opacity: .6; cursor: default; }
.sheet #who { font: inherit; font-size: 14px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 9px; }

/* An assign column made the drill tables wrap dates and names onto two lines,
   so the cells keep their own line and the box scrolls sideways instead.

   But that put Assign off the right edge on any list with long names — a
   company name or two is enough — and a button you have to scroll sideways to
   find is a button nobody finds. Pin it to the edge so it is on screen for
   every row whatever the table does. */
.sheet table td, .sheet table th { white-space: nowrap; }
.sheet td.answers, .sheet th.answers {
  position: sticky; right: 0; text-align: right;
  background: var(--surface); border-left: 1px solid var(--line);
  padding-left: 10px;
}

/* take back something typed by mistake — quieter than the three answers,
   because it is not one of them */
td.answers button.undo {
  color: var(--muted); border-color: transparent; font-size: 14px;
  padding: 3px 8px; margin-left: 2px;
}
td.answers button.undo:hover { color: #b91c1c; border-color: #fca5a5; }

/* From a commitment straight into the Assistant, on this store and this
   customer. The board assigns "run through the Assistant and call"; before
   this there was no way to act on that without going back to the hub. */
a.toassist {
  display: inline-block; margin-left: 6px; white-space: nowrap;
  font-size: 12.5px; font-weight: 700; color: var(--brand); text-decoration: none;
  border-bottom: 1px solid transparent;
}
a.toassist:hover { border-bottom-color: currentColor; }

/* The manager's half of the loop, once it is a fact rather than a link. */
span.assistdone {
  display: inline-block; margin-left: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 700; color: #1b6b41;
}