:root {
  --bg: #070b14;
  --panel: #0e1524;
  --panel2: #131c2e;
  --line: #223049;
  --ink: #eaf0fa;
  --dim: #8a9ab5;
  --accent: #2f8bff;
  --accent2: #22e3d0;
  --ok: #34d399;
  --warn: #fbbf24;
  --err: #f87171;
  --radius: 12px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 15% -10%, #12243f 0%, transparent 60%),
    radial-gradient(900px 520px at 100% 0%, #0d2f3a 0%, transparent 55%),
    var(--bg);
  color: var(--ink);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.screen { min-height: 100%; }
[hidden] { display: none !important; }

/* ---------- brand ---------- */
.brand { display: flex; align-items: center; gap: 10px; }
.brand h1 {
  font-size: 26px; margin: 0; letter-spacing: -0.6px; font-weight: 700;
}
.brand h1 span { color: var(--accent2); }
.brand.small h1 { font-size: 19px; }
.pulse {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent2);
  box-shadow: 0 0 0 0 rgba(34, 227, 208, .65);
  animation: beat 2s infinite;
}
@keyframes beat {
  0%   { box-shadow: 0 0 0 0 rgba(34,227,208,.6); }
  70%  { box-shadow: 0 0 0 12px rgba(34,227,208,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,227,208,0); }
}

/* ---------- cards ---------- */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  box-shadow: 0 18px 50px rgba(0,0,0,.45);
}

/* ---------- login ---------- */
#login { display: grid; place-items: center; padding: 24px; }
.login { width: 100%; max-width: 380px; }
.tagline { color: var(--dim); margin: 10px 0 22px; font-size: 13.5px; }
label { display: block; font-size: 12.5px; color: var(--dim); margin: 14px 0 6px; }
input {
  width: 100%; padding: 11px 13px; font-size: 15px;
  background: #0a1220; color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47,139,255,.18);
}
button {
  font: inherit; cursor: pointer; border: 0; border-radius: 9px;
  padding: 11px 18px; font-weight: 600;
  background: linear-gradient(180deg, var(--accent), #1f6fd8);
  color: #fff; transition: filter .15s, transform .05s;
}
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
button[disabled] { opacity: .55; cursor: default; }
#loginBtn { width: 100%; margin-top: 22px; padding: 12px; }
/* Anchors carried the class but not the style, so every "Open" and "Download"
   rendered as the browser's default dark blue on a near-black card — legible
   only if you already knew it was there. */
button.link, a.link {
  background: none; color: var(--dim); padding: 4px 6px; font-weight: 500;
  text-decoration: underline; text-underline-offset: 3px;
}
button.link:hover, a.link:hover { color: var(--ink); }

.err {
  margin: 14px 0 0; padding: 9px 12px; font-size: 13.5px;
  background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.35);
  border-radius: 8px; color: #fca5a5;
}

/* ---------- app ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1px solid var(--line);
  background: rgba(7,11,20,.72); backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 5;
}
.who { color: var(--dim); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sep { opacity: .45; }
.wrap { max-width: 720px; margin: 0 auto; padding: 34px 24px 60px; display: grid; gap: 20px; }

h2 { margin: 0 0 6px; font-size: 20px; letter-spacing: -0.3px; }
h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.2px; }
.sub { color: var(--dim); font-size: 13.5px; margin: 0 0 18px; }

.bacRow { display: flex; gap: 10px; }
#bac {
  flex: 1; font-size: 27px; font-weight: 650; letter-spacing: 3px;
  text-align: center; padding: 14px; font-variant-numeric: tabular-nums;
}
#bac::placeholder { color: #35486a; letter-spacing: 3px; font-weight: 500; }
#goBtn { padding: 0 26px; font-size: 15px; white-space: nowrap; }

/* The book, as a dropdown hanging off the box you type in.
 *
 * It used to be a block in the card's flow, permanently open, pushing the whole
 * page down — 32 names sitting above the dealer report you were trying to read.
 * It is a dropdown now: shut until asked for, anchored to the field, floating
 * over the page instead of moving it. Alphabetical, because that is the only
 * order you can guess your way to.
 *
 * Inside, names fill ACROSS in columns. One-per-row made a ladder that ran off
 * the bottom of the screen for a list of mostly short names. */
.bacField { position: relative; }
.bacInput { position: relative; flex: 1; display: flex; min-width: 0; }
/* Symmetric padding so the caret does not shove the centred BAC off-centre. */
.bacInput #bac { flex: 1; padding-left: 44px; padding-right: 44px; }
.bacCaret {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; border-radius: 8px;
}
.bacCaret::after {
  content: ''; border: 6px solid transparent; border-top-color: var(--dim);
  transform: translateY(3px); transition: transform .15s ease;
}
.bacCaret:hover { background: rgba(255,255,255,.06); filter: none; }
.bacCaret:hover::after { border-top-color: var(--ink); }
.bacField.open .bacCaret::after { transform: translateY(-3px) rotate(180deg); }

.suggest {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 55;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 8px; box-shadow: 0 18px 40px -12px rgba(0,0,0,.7);
  max-height: min(58vh, 440px); overflow-y: auto;
}
/* One dealer per line, each row the full width of the panel. In columns the
   names truncated to the point that two different dealerships both read
   "BERGEY'S CHEVRO…"; a full-width row fits the longest name in the book with
   the BAC still on the right where it can be scanned down. */
.sugList { display: flex; flex-direction: column; gap: 4px; }
.sug {
  display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; align-items: center;
  background: #0a1220; border: 1px solid var(--line); border-radius: 9px; color: var(--ink);
  padding: 9px 12px; font-weight: 500; font-size: 13.5px; min-width: 0;
}
.sug:hover { border-color: var(--accent); }
.sug.on { border-color: var(--accent2); background: rgba(34,227,208,.07); }
.sug input { width: 16px; height: 16px; accent-color: var(--accent2); cursor: pointer; }
/* The name opens that dealer; the tick box beside it adds them to a packet.
   Two different jobs, so they cannot be the same button. */
.sug .n {
  background: none; border: 0; padding: 0; margin: 0; color: inherit; font: inherit;
  text-align: left; cursor: pointer; min-width: 0; display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sug .n:hover { color: var(--accent); filter: none; }
.sug .b { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12.5px; font-weight: 500; }
.sugEmpty { padding: 10px 4px; color: var(--dim); font-size: 13.5px; }
/* Sticks to the bottom of the open panel. The list scrolls past 400px, so a bar
   sitting at the end of it meant ticking three dealers and having to scroll the
   whole book to find the button that used them. */
.sugBar {
  position: sticky; bottom: -8px; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin: 8px -8px -8px; padding: 10px 12px; border-top: 1px solid var(--line);
  background: var(--panel); border-radius: 0 0 11px 11px;
}
.sugBarActs { display: flex; align-items: center; gap: 10px; }
.sugBar button:not(.link) { padding: 7px 14px; font-size: 13.5px; }

.resultHead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tag {
  font-size: 11.5px; padding: 4px 10px; border-radius: 99px; white-space: nowrap;
  background: rgba(52,211,153,.12); color: var(--ok); border: 1px solid rgba(52,211,153,.3);
}
.tag.partial { background: rgba(251,191,36,.12); color: var(--warn); border-color: rgba(251,191,36,.3); }

.note {
  margin: 14px 0 0; padding: 10px 13px; font-size: 13px; line-height: 1.5;
  background: rgba(251,191,36,.09); border: 1px solid rgba(251,191,36,.28);
  border-radius: 8px; color: #fcd88a;
}

.downloads { display: grid; gap: 10px; margin-top: 20px; }
.dl {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px;
  background: #0a1220;
}
.dl.primary { border-color: rgba(47,139,255,.5); background: rgba(47,139,255,.07); }
.dl .t { font-weight: 600; font-size: 14.5px; }
.dl .d { color: var(--dim); font-size: 12.5px; margin-top: 2px; }
.dl button { padding: 9px 16px; font-size: 13.5px; }
.dl.off { opacity: .45; }
.dl.off button { background: #253248; cursor: not-allowed; }

.hint { color: var(--dim); font-size: 12.5px; margin: 16px 0 0; }

.spin {
  display: inline-block; width: 13px; height: 13px; vertical-align: -2px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff;
  border-radius: 50%; animation: sp .7s linear infinite; margin-right: 7px;
}
@keyframes sp { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
  .wrap { padding: 22px 16px 48px; }
  .card { padding: 20px; }
  .bacRow { flex-direction: column; }
  #goBtn { padding: 13px; }
  .dl { flex-direction: column; align-items: stretch; }
  .dl button { width: 100%; }
}

/* ---------- admin: monthly masters ---------- */
.masters { display: grid; gap: 7px; margin-bottom: 18px; }
.mrow {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center;
  padding: 9px 13px; background: #0a1220; border: 1px solid var(--line); border-radius: 8px;
  font-size: 13px;
}
.mrow.off { opacity: .5; }
.mrow .mk { color: var(--dim); font-size: 12px; }
.mrow .mf { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow .mm { color: var(--dim); font-variant-numeric: tabular-nums; font-size: 12.5px; }
#upForm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
#upFiles {
  flex: 1; min-width: 240px; padding: 9px; font-size: 13px; cursor: pointer;
}
#upFiles::file-selector-button {
  font: inherit; margin-right: 10px; padding: 7px 13px; cursor: pointer;
  background: #1c2740; color: var(--ink); border: 1px solid var(--line); border-radius: 7px;
}
.okmsg {
  margin: 14px 0 0; padding: 9px 12px; font-size: 13.5px;
  background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.32);
  border-radius: 8px; color: #86efac;
}

/* ---------- dealer presentation ---------- */
.demoTag { background: rgba(251,191,36,.14); color: var(--warn); border-color: rgba(251,191,36,.35); }
.oppStrip { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 9px; margin: 4px 0 20px; }
.opp { background: #0a1220; border: 1px solid var(--line); border-radius: 9px; padding: 11px 13px; }
.opp .k { font-size: 10.5px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.opp .v { font-size: 17px; font-weight: 700; margin-top: 3px; font-variant-numeric: tabular-nums; }
.opp.big { border-color: rgba(34,227,208,.4); background: rgba(34,227,208,.07); }
.opp.big .v { font-size: 25px; color: var(--accent2); letter-spacing: -.6px; }

.ctrls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.ctrls.tgts { grid-template-columns: repeat(3, 1fr); margin-top: 10px; }
.ctrl label { margin: 0 0 5px; }
.ctrl.wide { grid-column: 1 / -1; }
.ctrl input { padding: 9px 11px; font-size: 14px; }
.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; background: #0a1220; border: 1px solid var(--line); color: var(--dim);
  font-size: 13px; font-weight: 500; padding: 9px 10px;
}
.seg button.on { border-color: var(--accent); background: rgba(47,139,255,.12); color: var(--ink); font-weight: 650; }
.seg button:hover { filter: none; color: var(--ink); }

.adv { margin: 16px 0 0; }
.adv summary { cursor: pointer; font-size: 13px; color: var(--ink); padding: 6px 0; }
.adv .dim { color: var(--dim); }

.actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.actions button { flex: 1; min-width: 130px; padding: 12px; }
.actions button.ghost { background: #1c2740; border: 1px solid var(--line); }

@media (max-width: 560px) {
  .oppStrip, .ctrls, .ctrls.tgts { grid-template-columns: 1fr 1fr; }
  .actions button { min-width: 100%; }
}

/* ---------- views: book, calendar, model, collateral ---------- */


/* the call list: status first, money second — read left to right */
.planList { display:flex; flex-direction:column; gap:.35rem; }
/* Last column is 11rem, not 8: it spells out "241 days since last visit" now
   rather than "241d ago", and a wrapped date column pushes every row to two
   lines. .fieldRow/.tsmRow set their own columns, so this is My Book only. */
.planRow { display:grid; grid-template-columns:7.5rem 1fr 5.5rem 6rem 6rem; gap:.75rem; align-items:center;
  width:100%; text-align:left; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem; padding:.55rem .7rem; color:inherit; font:inherit; cursor:pointer; }
.planRow:hover { background:rgba(255,255,255,.07); }
.planRow .pill { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:.15rem .45rem;
  border-radius:1rem; text-align:center; background:rgba(255,255,255,.08); }
.planRow.overdue .pill, .planRow.due .pill { background:#7f1d1d; color:#fecaca; }
.planRow.never .pill { background:#78350f; color:#fde68a; }
.planRow.stale .pill { background:#374151; color:#d1d5db; }
.planRow.scheduled .pill, .planRow.current .pill { background:#064e3b; color:#a7f3d0; }
.planRow .pName { font-weight:600; }
.planRow .pBac, .planRow .pWhen { color:var(--dim,#8a93a6); font-size:.85rem; }
.planRow .pVal { text-align:right; font-variant-numeric:tabular-nums; }

/* calendar: what is due, not what was done */
/* SEVEN EQUAL COLUMNS, and it takes minmax(0,1fr) to get them.
 *
 * `1fr` is shorthand for `minmax(auto, 1fr)`, so a column can never shrink below
 * its content's minimum width. The day tags are dealer names set to nowrap, so
 * a cell holding "MIRACLE BUICK GMC OF KUTZTOWN" pushed Thursday out to three
 * times the width of Monday and the month stopped being a grid. The ellipsis
 * never engaged either, for the same reason — there was nothing to clip against.
 * minmax(0,…) lets the column ignore its content, which is what a calendar
 * wants: the date decides the width, never what happens to be booked on it. */
.calGrid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.3rem; }
.calHead { font-size:.75rem; color:var(--dim,#8a93a6); text-align:center; padding:.2rem 0;
  min-width:0; }
.calCell { min-height:4.5rem; border:1px solid rgba(255,255,255,.06); border-radius:.4rem; padding:.3rem;
  display:flex; flex-direction:column; gap:.2rem; min-width:0; overflow:hidden; }
.calCell.empty { border-color:transparent; }
.calCell.today { border-color:var(--accent,#3b82f6); }
.calCell.has { background:rgba(59,130,246,.08); }
.calCell .dnum { font-size:.75rem; color:var(--dim,#8a93a6); }
.calTag { font-size:.7rem; text-align:left; background:rgba(59,130,246,.25); border:0; border-radius:.25rem;
  padding:.15rem .3rem; color:inherit; cursor:pointer; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; display:block; width:100%; min-width:0; }
.calTag:hover { background:rgba(59,130,246,.45); }

/* opportunity by model */
.tableWrap { overflow-x:auto; }
.modelTable { width:100%; border-collapse:collapse; font-size:.9rem; }
.modelTable th, .modelTable td { padding:.4rem .55rem; border-bottom:1px solid rgba(255,255,255,.06); }
.modelTable th { text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.03em;
  color:var(--dim,#8a93a6); }
.modelTable .n { text-align:right; font-variant-numeric:tabular-nums; }
.modelTable .strong { font-weight:700; }
.modelTable tr.opp td { background:rgba(59,130,246,.07); }

/* collateral chips fold documents into the view */
.chips { display:flex; flex-wrap:wrap; gap:.4rem; margin:.5rem 0 .75rem; }
.chip { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:1rem;
  padding:.35rem .75rem; color:inherit; font:inherit; font-size:.85rem; cursor:pointer;
  display:inline-flex; align-items:center; gap:.4rem; }
.chip.on { background:var(--accent,#3b82f6); border-color:transparent; color:#fff; }
.chip.group { font-weight:600; }
.chip .win { font-size:.7rem; opacity:.7; }
.doc { margin-top:.75rem; }
.docHead { display:flex; justify-content:space-between; align-items:center; font-size:.85rem;
  color:var(--dim,#8a93a6); margin-bottom:.3rem; }
.doc iframe { width:100%; height:34rem; border:1px solid rgba(255,255,255,.1); border-radius:.4rem; background:#fff; }

.rowhead { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.4rem; }
.ctrl.wide { grid-column:1/-1; }

@media (max-width:640px) {
  .planRow { grid-template-columns:1fr auto; grid-template-areas:'pill val' 'name name' 'when when'; }
  .planRow .pill { grid-area:pill; } .planRow .pVal { grid-area:val; }
  .planRow .pName { grid-area:name; } .planRow .pWhen { grid-area:when; }
  .planRow .pBac { display:none; }
  .doc iframe { height:22rem; }
}

/* Nav stays put. A TSM mid-call scrolling a dealer's models should be able to
 * jump to the book without scrolling back up to find the tabs. */

/* per-dealer history — the rep's own notes, newest first */
.hist { display:flex; flex-direction:column; gap:.4rem; margin-top:.75rem; }
.histRow { display:grid; grid-template-columns:4.5rem 1fr auto; gap:.6rem; align-items:baseline;
  padding:.45rem .6rem; border-left:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03); border-radius:0 .4rem .4rem 0; }
.histRow .hKind { font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--dim,#8a93a6); }
.histRow .hNote { font-size:.9rem; }
.histRow .hWhen { font-size:.78rem; color:var(--dim,#8a93a6); white-space:nowrap; }
.histRow.call { border-left-color:#3b82f6; }
.histRow.visit { border-left-color:#10b981; }
.histRow.email { border-left-color:#a78bfa; }
.histRow.note { border-left-color:#6b7280; }
.histEmpty { color:var(--dim,#8a93a6); font-size:.9rem; margin-top:.6rem; }

/* Tabs live IN the header bar, so they are always on screen and never scroll
 * away mid-call. Active state uses the brand cyan rather than the generic blue
 * — it is the same colour as "Pulse" in the wordmark, so the eye ties the two
 * together instead of reading them as two unrelated accents. */
.topbar { gap: 20px; z-index: 20; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  padding: 7px 15px; font: inherit; font-size: 14px; font-weight: 500;
  color: var(--dim); position: relative; transition: color .15s, background .15s;
}
.tab:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.tab.on {
  color: #06231f; font-weight: 650;
  background: linear-gradient(135deg, var(--accent2), #4ff0dd);
  box-shadow: 0 0 0 1px rgba(34,227,208,.35), 0 4px 14px -4px rgba(34,227,208,.55);
}
.tab.on:hover { color: #06231f; }

/* The signed-in TSM and the period are what a rep checks to be sure they are
 * looking at the right book and the right month — too dim to read at a glance
 * was the wrong call. */
.who { color: var(--ink); font-size: 13.5px; font-weight: 500; }
.who #whoTsm { color: var(--ink); letter-spacing: .01em; }
.who #whoPeriod { color: var(--accent2); font-weight: 600; }
.who .sep { color: var(--line); }
.who .link { color: var(--dim); }
.who .link:hover { color: var(--ink); }

@media (max-width: 720px) {
  .topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .tabs { order: 3; flex-basis: 100%; }
  .tab { padding: 6px 12px; font-size: 13px; }
}

/* Agenda — what was reviewed last time, opened from a scheduled follow-up. */
.agenda { margin-top: 18px; padding: 16px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel2); }
.agHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.agHead h4 { margin: 0 0 2px; font-size: 16px; }
.agLast { margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  background: rgba(34,227,208,.07); border-left: 3px solid var(--accent2); }
.agLast .hKind { display: block; margin-bottom: 4px; }
.agLast p { margin: 0; font-size: 14.5px; line-height: 1.45; }
.agHist { margin-top: 14px; }
.agHist h5 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--dim); font-weight: 600; }
.agHist .histRow { margin-bottom: 4px; }

/* Dealer profile: GM's structure on the left, the rep's own layer on the right */
.fieldBox { font-size:13.5px; line-height:1.7; }
.fieldBox .fRow { display:flex; justify-content:space-between; gap:10px; padding:3px 0;
  border-bottom:1px solid rgba(255,255,255,.04); }
.fieldBox .fLbl { color:var(--dim); }
.fieldBox a { color:var(--accent2); text-decoration:none; }
.fieldBox a:hover { text-decoration:underline; }
.rowEdit { display:grid; grid-template-columns:1fr 1fr auto; gap:6px; margin-bottom:6px; }
.rowEdit input { min-width:0; }
.rowEdit .del { background:none; border:0; color:var(--dim); cursor:pointer; font-size:16px; padding:0 6px; }
.rowEdit .del:hover { color:var(--err); }
.trainRow { display:grid; grid-template-columns:1fr 9.5rem auto auto; gap:6px; align-items:center; margin-bottom:6px; }
.trainRow.done input[type=text] { text-decoration:line-through; opacity:.55; }
#profNotes { width:100%; background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:8px 10px; font:inherit; font-size:14px; resize:vertical; }

/* Each part of the profile is its own bubble. Four flat lists under four small
 * headings read as one long column, and on a phone you cannot tell where GM's
 * facts stop and the rep's own notes start — which is the one distinction that
 * has to survive. */
.profGrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin-bottom:14px; }
.bubble { background:var(--panel2); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; }
.bubble h5 { margin:0 0 10px; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); font-weight:700; }
/* GM's layer is fact, not opinion — tint it so the difference is visible at a glance */
.bubble.gm { background:linear-gradient(180deg, rgba(34,227,208,.05), rgba(34,227,208,.015));
  border-color:rgba(34,227,208,.22); }
.bubble.gm h5 { color:var(--accent2); }
.bubbleBody { flex:1; }
.bubble textarea { width:100%; background:var(--panel); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:10px 12px; font:inherit; font-size:15px; resize:vertical; }

/* Add buttons are controls, not links — a link-sized tap target on a phone in a
 * dealership is a missed tap and a lost note. */
.addBtn { margin-top:10px; width:100%; min-height:42px; background:rgba(47,139,255,.09);
  border:1px dashed rgba(47,139,255,.45); border-radius:9px; color:var(--accent);
  font:inherit; font-size:14px; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
.addBtn:hover { background:rgba(47,139,255,.16); border-color:var(--accent); }
.addBtn::before { content:'+ '; font-weight:700; }

/* inputs sized for a thumb; 16px stops iOS zooming the page on focus */
.bubble input[type=text], .bubble input[type=date], .bubble input:not([type]) {
  min-height:40px; font-size:15px; background:var(--panel); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px; width:100%; }
.bubble input:focus, .bubble textarea:focus { outline:none; border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(34,227,208,.14); }
.rowEdit { grid-template-columns:1fr 1fr auto; gap:8px; margin-bottom:8px; }
.rowEdit .del, .trainRow .del { min-width:34px; min-height:34px; border-radius:8px; font-size:18px; }
.rowEdit .del:hover, .trainRow .del:hover { background:rgba(248,113,113,.12); }
.trainRow { grid-template-columns:1fr 9.5rem auto auto; gap:8px; margin-bottom:8px; }
.trainRow label.sub { display:flex; align-items:center; gap:5px; white-space:nowrap; }
.trainRow input[type=checkbox] { width:18px; height:18px; min-height:0; accent-color:var(--accent2); }

@media (max-width:560px) {
  .profGrid { grid-template-columns:1fr; }
  .rowEdit { grid-template-columns:1fr auto; }
  .trainRow { grid-template-columns:1fr auto; grid-template-areas:'topic del' 'date done'; }
  .trainRow input[type=text] { grid-area:topic; } .trainRow .del { grid-area:del; }
  .trainRow input[type=date] { grid-area:date; } .trainRow label.sub { grid-area:done; }
  .bubble input, .bubble textarea { font-size:16px; }
}

/* Header dropdowns. Dealers is the fastest route to a store — 32 names is
 * quicker to pick than to type, and typing a BAC from memory is not a thing
 * anyone does. Quick Tools is the reference shelf. */
.menu { position: relative; }
.menuBtn .caret { display:inline-block; margin-left:6px; border:4px solid transparent;
  border-top-color: currentColor; transform: translateY(2px); }
.menu.open .menuBtn .caret { transform: translateY(-2px) rotate(180deg); }
.menuPanel { position:absolute; top:calc(100% + 8px); left:0; z-index:60; min-width:280px;
  max-height:min(70vh,520px); overflow:auto; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:8px; box-shadow:0 18px 40px -12px rgba(0,0,0,.7); }
.menuPanel.wide { min-width:320px; }
.menuSearch { width:100%; margin-bottom:6px; background:var(--panel2); color:var(--ink);
  border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; font-size:15px; }
.menuSearch:focus { outline:none; border-color:var(--accent2); }
.menuList { display:flex; flex-direction:column; }
.menuItem { display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:9px 11px; border-radius:8px; background:none; border:0; width:100%; text-align:left;
  color:var(--ink); font:inherit; font-size:14px; cursor:pointer; text-decoration:none; }
.menuItem:hover { background:rgba(255,255,255,.06); }
.menuItem .mBac { color:var(--dim); font-size:12.5px; font-variant-numeric:tabular-nums; }
.menuItem .ext { color:var(--accent2); }
.menuItem.muted { color:var(--dim); cursor:default; font-style:italic; }
.menuItem.muted:hover { background:none; }
.menuGroup + .menuGroup { margin-top:6px; padding-top:6px; border-top:1px solid var(--line); }
.menuGroup h6 { margin:4px 11px 4px; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dim); font-weight:700; }
.menuEmpty { padding:10px 11px; color:var(--dim); font-size:13.5px; }

/* The one action in a menu of names. It sits above the list and has to not read
   as the first dealer in it. */
.menuItem.lead {
  border:1px solid var(--line); background:rgba(111,192,33,.07); margin-bottom:6px;
  font-weight:600; align-items:flex-start;
}
.menuItem.lead:hover { background:rgba(111,192,33,.14); border-color:var(--accent2); }
.menuItem.lead > span { display:flex; flex-direction:column; gap:2px; text-align:left; }
.mHint { color:var(--dim); font-size:11.5px; font-weight:400; }

/* The Dealers panel holds a whole book, not four links. Stacked one-per-row it
   became a 32-item ladder running off the bottom of the window — the thing you
   were looking for was almost never on screen. It now opens as a wide panel
   under the tab and fills across in columns, so the whole book is one glance. */
.menu[data-menu="dealers"] .menuPanel { width:min(900px, calc(100vw - 40px)); min-width:0; }
.menu[data-menu="dealers"] .menuList {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:2px;
}
.menu[data-menu="dealers"] .menuItem { min-width:0; }
.menu[data-menu="dealers"] .menuItem > span:first-child {
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media (max-width:720px) {
  .menuPanel { position:fixed; left:8px; right:8px; top:auto; min-width:0; width:auto; }
}

/* Calendar and activity side by side: what is coming, and what has happened. */
.calWrap { display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:18px; align-items:start; }
.actLog { position:sticky; top:calc(var(--topbar-h,64px) + 16px); max-height:calc(100vh - 120px);
  display:flex; flex-direction:column; }
.actLog #actList { overflow-y:auto; margin-top:8px; }
.actRow { display:grid; grid-template-columns:auto 1fr; gap:8px; padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.05); cursor:pointer; }
.actRow:hover { background:rgba(255,255,255,.03); }
.actDot { width:8px; height:8px; border-radius:50%; margin-top:6px; background:var(--dim); }
.actRow.call .actDot { background:var(--accent); }
.actRow.visit .actDot { background:var(--ok); }
.actRow.email .actDot { background:#a78bfa; }
.actName { font-size:13.5px; font-weight:600; }
.actNote { font-size:13px; color:var(--dim); line-height:1.4; margin:2px 0 0; }
.actWhen { font-size:11.5px; color:var(--dim); text-transform:uppercase; letter-spacing:.03em; }
@media (max-width:900px) {
  .calWrap { grid-template-columns:1fr; }
  .actLog { position:static; max-height:none; }
}

/* A pulse trace above the sign-in fields. The product is called DealerPulse and
 * the wordmark already carries a dot; this makes the idea move without adding
 * anything to read. Purely decorative, so it is aria-hidden and it stops
 * entirely for anyone who has asked for reduced motion. */
.ticker { display:block; width:100%; height:34px; margin:2px 0 14px; overflow:visible; }
.tickerTrace {
  fill:none; stroke:var(--accent2); stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(34,227,208,.65));
  stroke-dasharray:150 470; stroke-dashoffset:620;
  animation:sweep 2.6s linear infinite;
}
@keyframes sweep { to { stroke-dashoffset:-150; } }

@media (prefers-reduced-motion: reduce) {
  .tickerTrace { animation:none; stroke-dasharray:none; stroke-dashoffset:0; opacity:.5; }
}

/* ---------- print ----------
 *
 * Anything on screen has to come out as a clean PDF, and the browser's own
 * print-to-PDF is the most reliable way to get there: it needs no server, no
 * Chromium on the box, and it works from a phone via Share -> Print. So rather
 * than a bespoke print layout per view, the app chrome is stripped and whatever
 * the TSM is looking at prints as the document.
 */
@media print {
  :root { --bg:#fff; --panel:#fff; --panel2:#fff; --ink:#111; --dim:#555; --line:#ccc; }
  body { background:#fff !important; color:#111 !important; }

  /* chrome, navigation and anything that only exists to be clicked */
  .topbar, .tabs, .menu, .menuPanel, .actions, .addBtn, .del,
  #logout, #bacForm, .suggest, #adminCard, .ticker,
  button, .link, .chips, .seg, .ctrls { display:none !important; }

  /* panels become plain blocks — no shadows, no fills, no wasted margin */
  .card, .bubble, .agenda, .actLog {
    background:#fff !important; border:1px solid #ddd !important;
    box-shadow:none !important; break-inside:avoid; page-break-inside:avoid;
    margin:0 0 10px !important; padding:10px 12px !important;
  }
  .wrap { max-width:none !important; padding:0 !important; }
  h1,h2,h3,h4,h5 { color:#111 !important; }
  .sub, .note, .fLbl, .actWhen, .hWhen, .hKind { color:#555 !important; }
  a { color:#111 !important; text-decoration:none; }

  /* scrollable regions must print in full, not clipped to their viewport */
  .tableWrap, .actLog #actList, .doc iframe, #collDocs {
    overflow:visible !important; max-height:none !important; height:auto !important; }
  .modelTable { font-size:10pt; }
  .modelTable th { background:#f3f3f3 !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .modelTable tr.opp td { background:#f7fbff !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .calWrap { grid-template-columns:1fr !important; }
  .calCell { min-height:3.2rem; }
  /* Some rows ARE the content and only happen to be <button> so they can be
     clicked. The blanket button hide above swallowed them, so My Book printed
     as a heading with an empty list and the calendar printed bare day numbers —
     i.e. the two views most likely to be printed came out useless. */
  .planRow { display:grid !important; break-inside:avoid; border:1px solid #eee !important; background:#fff !important; }
  .planRow .pill { border:1px solid #bbb !important; background:#fff !important; color:#333 !important; }
  .calTag { display:block !important; background:#f3f3f3 !important; color:#111 !important;
    border:1px solid #ddd !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  /* hidden views must stay hidden — otherwise printing the calendar also
     prints the dealer screen behind it */
  [hidden] { display:none !important; }

  @page { margin:12mm; }
}

/* the print control itself, shown per view */
.printBtn { background:none; border:1px solid var(--line); border-radius:8px; color:var(--dim);
  font:inherit; font-size:12.5px; padding:5px 11px; cursor:pointer; }
.printBtn:hover { color:var(--ink); border-color:var(--accent2); }

/* The dealer screen is a reading column and stays narrow. The calendar is a
 * grid of 31 days beside a log — squeezed into 720px the cells collapse to
 * about 40px and the month stops being scannable, which is the only thing a
 * calendar is for. So the wrapper widens for the views that need the room. */
body[data-view="calendar"] .wrap { max-width: 1280px; }
body[data-view="book"] .wrap { max-width: 1040px; }
/* Two columns of pick lists side by side need the room, or the dealer list
   drops to one narrow column and is the ladder again. */
body[data-view="packet"] .wrap { max-width: 1240px; }

body[data-view="calendar"] .calCell { min-height: 5.5rem; }
body[data-view="calendar"] .calHead { font-size: .8rem; padding: .35rem 0; }

/* Below 1000px the log cannot hold a readable column beside the grid, so it
 * moves under the calendar rather than being crushed next to it. */
@media (max-width: 1000px) {
  .calWrap { grid-template-columns: 1fr; }
  .actLog { position: static; max-height: none; }
  .actLog #actList { max-height: 26rem; }
  body[data-view="calendar"] .calCell { min-height: 4.2rem; }
}
@media (max-width: 560px) {
  body[data-view="calendar"] .calGrid { gap: .2rem; }
  body[data-view="calendar"] .calCell { min-height: 3.4rem; padding: .2rem; }
  .calTag { font-size: .62rem; }
}

/* One list for everything a visit might need — workbooks and documents pick the
 * same way, because from the rep's side they are both "things I want for this
 * dealer". Which ones matter changes per store, so nothing is forced along. */
.dlHead { display:flex; justify-content:space-between; align-items:baseline; margin:4px 0 8px; }
.dlHead h4 { margin:0; font-size:14px; }
.pickList { display:flex; flex-direction:column; gap:4px; }
.pick { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:9px 11px; border:1px solid var(--line); border-radius:9px; background:var(--panel2);
  cursor:pointer; }
.pick:hover { border-color:rgba(34,227,208,.4); }
.pick.on { border-color:var(--accent2); background:rgba(34,227,208,.06); }
.pick.off { opacity:.45; cursor:not-allowed; }
.pick input { width:17px; height:17px; accent-color:var(--accent2); }
/* Title and subtitle were both inline, so they ran together with no space at
   all — "All-in-OnePerformance & Profit Discovery", "A & T CHEVROLET, INC.113789".
   Every .pick list has the same title/subtitle markup, so stacking them here
   fixes the dealer screen's report and document rows too. */
.pick > span:nth-child(2) { min-width: 0; }
.pick .t { display:block; font-size:14px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick .d { display:block; margin-top:1px; font-size:12.5px; color:var(--dim);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pick .tag { font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--dim);
  border:1px solid var(--line); border-radius:20px; padding:2px 8px; }
.pickGroupHead { display:flex; justify-content:space-between; align-items:baseline;
  margin:14px 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--dim); font-weight:700; }
.pickBar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line); }
.pickBar button { padding:9px 16px; font-size:14px; }
#pickDocView .doc { margin-top:14px; }
@media (max-width:560px){ .pickBar button { flex:1 1 40%; } }

/* ---- dealer packet ----
   Two columns: WHO on the left, WHAT on the right. The dealer list is the long
   one, so it gets the width and fills across in its own columns rather than
   becoming the scrolling ladder this screen exists to replace. */
.pkGrid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:20px; align-items:start; }
.pkCol { min-width:0; }
.pkHead { display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin:16px 0 8px; flex-wrap:wrap; }
.pkCol > .pkHead:first-child { margin-top:0; }
.pkHead h4 { margin:0; font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--dim); }
.pkActs { display:flex; align-items:center; gap:10px; }
.pkSearch { width:auto; min-width:180px; margin:0; font-size:13.5px; padding:6px 10px; }
.pkList { display:flex; flex-direction:column; gap:4px; max-height:340px; overflow-y:auto; padding-right:2px; }
.pkList .pick { min-width:0; }
.pkEmpty { color:var(--dim); font-size:13.5px; padding:8px 2px; }
.pkNote { margin:-2px 0 8px; }

/* One card per picked dealer. Shut, it states what that dealer gets; open, it
   is that dealer's own copy of the two lists — which is the whole point, since
   one dealer needs four flyers and the next needs eight. */
.pkPer { margin-top:22px; padding-top:6px; border-top:1px solid var(--line); }
.pkDealer { border:1px solid var(--line); border-radius:10px; background:var(--panel2); margin-bottom:6px; }
.pkDealer.open { border-color:var(--accent2); }
.pkDealerHead {
  display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:12px; align-items:center;
  width:100%; background:none; border:0; padding:11px 13px; color:var(--ink);
  font:inherit; text-align:left; cursor:pointer; border-radius:10px;
}
.pkDealerHead:hover { background:rgba(255,255,255,.04); filter:none; }
.pkdName { font-weight:600; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pkdBac { color:var(--dim); font-weight:500; font-size:12.5px; margin-left:9px;
  font-variant-numeric:tabular-nums; }
.pkdSum { color:var(--dim); font-size:12.5px; white-space:nowrap; }
.pkdCaret { border:5px solid transparent; border-top-color:var(--dim); transform:translateY(3px);
  transition:transform .15s ease; }
.pkDealer.open .pkdCaret { transform:translateY(-2px) rotate(180deg); }
.pkDealerBody { padding:2px 13px 13px; border-top:1px solid var(--line); }
.pkDealerBody h5 { margin:12px 0 6px; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim); font-weight:700; }
.pkDealerBody .pkList { max-height:none; }
.pkDealerActs { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; }

@media (min-width:901px) {
  /* Two lists side by side once a dealer is open — they are read together. */
  .pkDealerBody { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:20px; align-items:start; }
  .pkDealerBody h5:nth-of-type(1) { grid-column:1; }
  .pkDealerBody h5:nth-of-type(2) { grid-column:2; grid-row:1; }
  .pkDealerBody > .pkList:nth-of-type(1) { grid-column:1; grid-row:2; }
  .pkDealerBody > .pkList:nth-of-type(2) { grid-column:2; grid-row:2; }
  .pkDealerActs { grid-column:1 / -1; }
}

@media (max-width:900px) {
  .pkGrid { grid-template-columns:minmax(0,1fr); }
}

/* Both lists collapse. Eleven rows open at once buries the profile and the
 * numbers underneath, and on most visits a rep touches one or two — so the
 * count of what is ticked shows on the closed header and the list is one tap
 * away. Native <details> so it works without JS and reads correctly to a
 * screen reader. */
.fold { border:1px solid var(--line); border-radius:10px; background:var(--panel2); margin-bottom:8px; }
.fold > summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between;
  align-items:center; gap:10px; padding:12px 14px; font-size:14px; font-weight:600; }
.fold > summary::-webkit-details-marker { display:none; }
.fold > summary::before { content:''; border:5px solid transparent; border-left-color:var(--dim);
  margin-right:2px; transition:transform .15s; }
.fold[open] > summary::before { transform:rotate(90deg) translateX(-2px); }
.fold > summary:hover { color:var(--accent2); }
.fold > summary:hover::before { border-left-color:var(--accent2); }
.foldT { flex:1; }
.foldC { font-size:12px; font-weight:500; color:var(--dim); }
.foldC.has { color:var(--accent2); font-weight:600; }
.fold .pickList { padding:0 12px 12px; }
.foldBar { padding:0 14px 8px; }

/* Nav type: larger, tighter, and it lifts toward the brand cyan on hover so the
 * bar reads as navigation rather than labels sitting on a strip. */
.tab, .menuBtn {
  font-size: 15.5px; font-weight: 600; letter-spacing: -0.15px;
  color: #9fb0c9; transition: color .14s ease, background .14s ease, transform .14s ease;
}
.tab:hover, .menuBtn:hover { color: var(--accent2); background: rgba(34,227,208,.07); transform: translateY(-1px); }
.tab.on, .tab.on:hover { transform: none; }
.menu.open .menuBtn { color: var(--accent2); background: rgba(34,227,208,.09); }
.who { font-size: 14px; }
.who #whoTsm { font-weight: 600; letter-spacing: -0.1px; }
.bookTools { display:flex; align-items:center; gap:8px; }
.sortSel { background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:5px 9px; font:inherit; font-size:12.5px; cursor:pointer; }
.sortSel:focus { outline:none; border-color:var(--accent2); }

/* ---- profile editing, rebuilt ----
 * The old rows were a fixed grid inside a 280px bubble, so the topic field was
 * squeezed to nothing and Remove inherited the primary-button blue, which made
 * the loudest thing in the panel the destructive one. Each entry is now its own
 * small card that stacks, with the destructive action quiet until hovered. */
.cardRow, .itemRow { background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px; margin-bottom:8px; display:flex; flex-direction:column; gap:7px; }
.itemRow { flex-direction:row; align-items:center; gap:8px; }
.cardRow input, .itemRow input { width:100%; min-height:40px; font-size:15px;
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:9px 11px; }
.cardRow input::placeholder, .itemRow input::placeholder { color:#64748b; }
.cardRow input:focus, .itemRow input:focus { outline:none; border-color:var(--accent2);
  box-shadow:0 0 0 3px rgba(34,227,208,.14); }
.cardRow .fTopic { font-weight:600; }
.rowFoot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.rowFoot input[type=date] { width:auto; min-width:9.5rem; flex:0 0 auto; }
.chk { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--dim); cursor:pointer; }
.chk input[type=checkbox] { width:18px; height:18px; min-height:0; accent-color:var(--accent2); margin:0; }

/* Remove is text, muted, and only turns red on hover — it must never be the
 * brightest control in a panel whose job is adding things. */
.bubble .del, .cardRow .del, .itemRow .del {
  background:none !important; border:1px solid transparent !important; color:#64748b !important;
  font:inherit !important; font-size:12.5px !important; font-weight:500 !important;
  padding:6px 10px !important; min-height:32px !important; min-width:0 !important;
  border-radius:8px !important; cursor:pointer; margin-left:auto; box-shadow:none !important; }
.bubble .del:hover, .cardRow .del:hover, .itemRow .del:hover {
  color:var(--err) !important; border-color:rgba(248,113,113,.4) !important;
  background:rgba(248,113,113,.08) !important; }
.cardRow.done .fTopic { text-decoration:line-through; opacity:.55; }

/* Add is the primary act in these panels, so it reads as one */
.addBtn { background:rgba(34,227,208,.10); border:1px dashed rgba(34,227,208,.5); color:var(--accent2); }
.addBtn:hover { background:rgba(34,227,208,.18); border-color:var(--accent2); }

/* ================= HEADER NAV =================
 *
 * The nav lived in a fixed left column for a day. It read fine at 1440 and fell
 * apart narrower: the rail kept its width, the dealer menu opened over the
 * content beside it, and Quick Tools — last item in the list — scrolled off the
 * bottom of the rail and simply was not there. A horizontal bar cannot lose an
 * item off the end of itself, so the nav is back on top where it started.
 */
.topbar { gap: 14px; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; flex: 1; min-width: 0; flex-wrap: wrap; }
.tabs .tab { white-space: nowrap; }

/* The wordmark is the way home. It is the first thing anyone clicks to get out
   of somewhere, and it was inert. */
.brand.small {
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; gap: 10px; border-radius: 8px;
}
.brand.small:hover { filter: none; }
.brand.small:hover h1 { opacity: .85; }
.brand.small:active { transform: none; }

@media (max-width: 900px) {
  .topbar { padding: 10px 14px; }
  .tabs { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .who { font-size: 12.5px; }
}
@media print { .topbar { display: none !important; } }

/* ================= MANNEQUIN TRACKER ================= */
body[data-view="mannequin"] .wrap { max-width: 1180px; }
.mannHead { margin: 22px 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--dim); font-weight: 700; }
.mannForm { border: 1px solid var(--accent2); border-radius: 12px; padding: 14px 16px;
  margin: 4px 0 18px; background: rgba(34,227,208,.045); }
.mannForm.close { border-color: #f59e0b; background: rgba(245,158,11,.06); }
.mannForm h4 { margin: 0 0 10px; font-size: 15px; }
.mannForm .ctrl.wide { grid-column: 1 / -1; }
.mannForm .actions { margin-top: 12px; display: flex; gap: 10px; align-items: center; }
.mannForm .actions button { flex: 0 0 auto; }

/* A bare <select> renders in the OS light theme, so the dealer picker came out
   as a white slab in the middle of a dark form. */
.mannForm select, .mannForm input[type="date"] {
  width: 100%; background: #0a1220; color: var(--ink); border: 1px solid var(--line);
  border-radius: 9px; padding: 11px 13px; font: inherit; font-size: 15px;
  color-scheme: dark; appearance: none; -webkit-appearance: none;
}
.mannForm input[type="date"] { appearance: auto; -webkit-appearance: none; }
.mannForm select:focus, .mannForm input[type="date"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(47,139,255,.18); }
.mannForm select { background-image:
  linear-gradient(45deg, transparent 50%, var(--dim) 50%),
  linear-gradient(135deg, var(--dim) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.mannForm .chk { display: flex; align-items: center; gap: 8px; padding: 11px 0; }
.mannForm .chk input { width: 17px; height: 17px; accent-color: var(--accent2); }

/* Earnpower owed and not yet paid is a promise outstanding, so it is the one
 * thing on this screen allowed to shout. */
.modelTable tr.owed td { background: rgba(245,158,11,.09); }
.owedTag { color: #fbbf24; font-weight: 700; font-size: 11px; letter-spacing: .04em; }
.modelTable td .ok { color: var(--ok, #34d399); font-size: 11px; }
.modelTable td .dim { color: var(--dim); }
.modelTable td.acc { font-size: 12.5px; color: var(--dim); max-width: 22rem; }
.mAct { margin-left: 8px; font-size: 12.5px; white-space: nowrap; }
.opp.warn { border-color: rgba(245,158,11,.45); background: rgba(245,158,11,.08); }
.opp.warn .v { color: #fbbf24; }

/* Dates and money read as one token or they read as neither — "2026-08-10"
   broken over two lines in a five-column table is unreadable at a glance. */
#mannActive td.n, #mannArchive td.n, #mannActive th.n, #mannArchive th.n { white-space: nowrap; }
#mannActive td.acc { white-space: normal; }

/* An <table> ignores its container's width, so without min-width:0 the card
   grows to fit the widest row and takes the whole page sideways with it. On a
   phone that is a screen you cannot read without dragging. .tableWrap already
   scrolls; this is what lets it. */
.card, .tableWrap { min-width: 0; }
#mannStrip { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 900px) {
  #mannStrip { grid-template-columns: 1fr 1fr; }
  body[data-view="mannequin"] .wrap { max-width: none; }
}

/* Tabs the browser blocked, offered as links the rep can click themselves. */
.blockedBar { margin: 10px 0 0; padding: 9px 11px; border: 1px solid #f59e0b;
  border-radius: 9px; background: rgba(245,158,11,.08); font-size: 13px; }
.blockedBar .link { margin: 0 4px; }

/* ============ PRINT, CORRECTED ============
 *
 * The dealer screen had never actually been put on paper. Pressing Print
 * produced a page led by an empty "Enter a dealer BAC" card and a checkbox list
 * of file formats, and — worst — the opportunity tiles kept their dark fill, so
 * the five dollar figures the whole page exists for came out as black boxes
 * with black text inside them. Everything below is that page made printable:
 * controls off, content on, ink readable.
 */
@media print {
  /* Chrome that has no meaning on paper: the search box, the download picker,
     the status line under it, and the file-format checkboxes. */
  .card.lookup, .fold, .pickBar, .pickList, #pickMsg, #pickBlocked,
  #pickDocView, .hint, .demoTag, .foldBar, #followCard .ctrls,
  #followCard .ctrl, #followCard .actions { display: none !important; }

  /* Inputs keep their own dark fill, which print CSS on the body cannot reach.
     An empty one is a box of nothing; a filled one is content and has to be
     legible. */
  input, textarea, select {
    background: #fff !important; color: #111 !important;
    border: 1px solid #ddd !important; box-shadow: none !important;
  }
  input::placeholder, textarea::placeholder { color: transparent !important; }

  /* The numbers. These are the reason the page is being printed. */
  .opp {
    background: #fff !important; border: 1px solid #bbb !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .opp .k { color: #444 !important; }
  .opp .v { color: #111 !important; }
  .opp.big { border: 2px solid #111 !important; }
  .opp.big .v { color: #111 !important; }
  .opp.warn { border-color: #b45309 !important; }
  .opp.warn .v { color: #b45309 !important; }
  .oppStrip { break-inside: avoid; page-break-inside: avoid; }

  /* Tags and pills read as colour on screen and as nothing on a mono printer. */
  .tag { background: #fff !important; color: #111 !important; border: 1px solid #999 !important; }
  .owedTag { color: #b45309 !important; }
  .modelTable tr.owed td { background: #f7f2e8 !important; }

  /* An empty bubble is a sentence saying it is empty — three of them across the
     top of a leave-behind is wasted paper, but they are the rep's own sections
     so they stay. Just tighten them. */
  .profGrid { gap: 8px !important; }
  .bubbleBody .sub { margin: 0 !important; }
}

/* Tracker tile sub-line: the caveat under a number ("3 of 9 have a value",
   "2 over 30 days"). A headline figure with a hidden qualifier is how a tool
   starts lying quietly. */
.opp .kk { font-size: 10.5px; color: var(--dim); margin-top: 3px; }
.opp.warn .kk { color: #d9a441; }
.mannForm label .opt { color: var(--dim); font-weight: 400; text-transform: none;
  letter-spacing: 0; font-size: 11px; margin-left: 5px; }
.mannForm .hint { margin: 10px 0 0; }
.mannForm .hint em { color: var(--ink); font-style: normal; font-weight: 600; }
@media print { .opp .kk { color: #444 !important; } }
/* An empty notes box prints as a large empty rectangle. If it is showing its
   placeholder there is nothing in it to print. */
@media print { textarea:placeholder-shown { display: none !important; } }

/* ---- the active tab must survive the mouse sitting on it ----
 * `.tab.on` and `.tab:hover` have identical specificity, and the hover rule is
 * declared later, so hovering the tab you are already on replaced the cyan fill
 * with a faint translucent one — while `.tab.on`'s near-black text colour
 * stayed. The label of the current screen went unreadable whenever the pointer
 * rested on it, which after a click is always. */
.tab.on, .tab.on:hover, .tab.on:focus, .rail .tab.on:hover {
  color: #06231f;
  background: linear-gradient(135deg, var(--accent2), #4ff0dd);
  box-shadow: 0 0 0 1px rgba(34,227,208,.35), 0 4px 14px -4px rgba(34,227,208,.55);
}
.rail .tab.on .rIcon { opacity: .8; }

/* ---- calendar day tags: two lines beats an ellipsis ----
 * Seven equal columns leave about 100px a day, and "BERGEY'S C…" three times
 * over is not a calendar you can read — three different stores looked like the
 * same entry. Wrapping to two lines fits enough of the name to tell them apart,
 * and the full name is still on the tooltip. */
.calTag {
  white-space: normal; line-height: 1.15; padding: .2rem .3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
  /* the clamp alone leaves the tops of a third line showing through */
  max-height: calc(2 * 1.15em + .4rem);
}
body[data-view="calendar"] .calCell { min-height: 6.2rem; }
@media (max-width: 1000px) { body[data-view="calendar"] .calCell { min-height: 5rem; } }

/* Download asks which of the two Justin wanted — the PDF of the sheet, or the
   real workbook. Neither replaces the other, so neither is hidden in a menu. */
.dlChoice { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.dlChoice button { display:flex; flex-direction:column; align-items:flex-start; gap:2px;
  padding:9px 14px; font-size:14px; text-align:left; }
.dlChoice button span { font-size:11.5px; font-weight:400; opacity:.75; }
@media (max-width:560px){ .dlChoice button { flex:1 1 100%; } }

/* ================= CALENDAR, REBUILT =================
 * The day is the button now, not the little name chips inside it. Clicking a
 * date is the obvious thing to do with a calendar and it used to do nothing.
 */
.calCell {
  font: inherit; color: inherit; text-align: left; width: 100%;
  background: transparent; border-radius: .4rem; cursor: pointer;
  position: relative; transition: border-color .12s, background .12s;
}
.calCell:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.18); filter: none; }
.calCell.empty { cursor: default; background: none; }
.calCell.empty:hover { background: none; border-color: transparent; }
.calCell.has { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.35); }
.calCell.today { border-color: var(--accent2); }
.calCell.today .dnum { color: var(--accent2); font-weight: 700; }
/* the day the rep has open — unmistakable, because everything below it changes */
.calCell.picked {
  background: rgba(34,227,208,.14) !important;
  border-color: var(--accent2) !important;
  box-shadow: 0 0 0 2px rgba(34,227,208,.35);
}
.calCell .dcount {
  position: absolute; top: .28rem; right: .3rem; min-width: 15px; height: 15px;
  border-radius: 99px; background: var(--accent); color: #fff;
  font-size: .62rem; font-weight: 700; display: grid; place-items: center; padding: 0 3px;
}
/* a chip is a preview, not a control — it never clipped cleanly as a button */
.calTag {
  display: block; width: 100%; font-size: .66rem; line-height: 1.2;
  background: rgba(59,130,246,.3); border-radius: .25rem; padding: .12rem .28rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-height: none;
  color: var(--ink); text-align: left; cursor: pointer;
}
.calMore { font-size: .6rem; color: var(--dim); padding-left: .28rem; }

/* the day panel */
.dayHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.dayHead h4 { margin: 0 0 2px; font-size: 15.5px; }
.dayHead .sub { margin: 0; }
.dayPill { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 99px; vertical-align: 2px; }
.dayPill.today { background: rgba(34,227,208,.16); color: var(--accent2); }
.dayPill.overdue { background: rgba(248,113,113,.16); color: #fca5a5; }
.dayList { display: grid; gap: 10px; margin-top: 12px; }
.dayCard { border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px;
  background: rgba(255,255,255,.02); }
.dcHead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.dcHead .sub { margin: 0 0 0 8px; font-size: 12px; }
.dayCard .agLast { margin-top: 6px; }
.dayCard .agHist { margin-top: 8px; }
@media print {
  .calCell { background: #fff !important; }
  .calCell.picked { box-shadow: none; }
  .dcount, .calMore { display: none !important; }
  .dayCard { break-inside: avoid; }
}

/* ================= DEALER SCREEN LAYOUT =================
 *
 * Ordered the way the job runs: find the dealer, pick what to look at, set the
 * benchmarks, go. Search, then Performance Reports, then Dealer inputs, then
 * the model table and the follow-up log.
 *
 * Profile moves to a column on the right. It is real work when a rep is
 * building out a store, and dead space every other time — a full-width block of
 * mostly-empty bubbles sitting between the search box and the thing they came
 * for. It is LAST in the DOM so a phone stacks it at the bottom, and CSS lifts
 * it into the right column only when there is room for one.
 */
@media (min-width: 1080px) {
  body[data-view="dealer"] .wrap {
    max-width: 1260px;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
  }
  body[data-view="dealer"] .wrap > .card,
  body[data-view="dealer"] .wrap > .calWrap { grid-column: 1; }
  body[data-view="dealer"] #profileCard {
    grid-column: 2;
    grid-row: 1 / span 99;
    position: sticky;
    top: 78px;
    max-height: calc(100vh - 96px);
    overflow-y: auto;
  }
  /* four bubbles across do not fit a 340px column — stack them */
  body[data-view="dealer"] #profileCard .profGrid { grid-template-columns: 1fr; }
  body[data-view="dealer"] #profileCard .card,
  body[data-view="dealer"] #profileCard { padding: 18px; }
}
/* Below that the grid is a single column and the DOM order is the reading
   order, which already puts profile last. */
@media (min-width: 1080px) {
  /* the header was laid out for a full-width card; at 340px the meta and the
     print button pile into the title */
  body[data-view="dealer"] #profileCard .rowhead {
    display: block;
  }
  body[data-view="dealer"] #profileCard .rowhead h3 { margin-bottom: 4px; }
  body[data-view="dealer"] #profileCard .rowhead > span {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px;
  }
  body[data-view="dealer"] #profileCard #profMeta { font-size: 12px; }
  body[data-view="dealer"] #profileCard .printBtn { flex: 0 0 auto; }
}

/* ---- PDF library: a drawer, not a page ----
   The question it answers ("what have we got on bed covers for GMC?") is asked
   while looking at a dealer, so a full-page view lost the thing you were looking
   at. It slides over instead, and closing puts you back. */
.libScrim {
  position:fixed; inset:0; z-index:200; background:rgba(3,6,12,.55);
  opacity:0; transition:opacity .18s ease; backdrop-filter:blur(1px);
}
body.libOpen .libScrim { opacity:1; }
.libDrawer {
  position:fixed; top:0; right:0; bottom:0; z-index:201;
  width:min(560px, 96vw); display:flex; flex-direction:column;
  background:var(--panel); border-left:1px solid var(--line);
  box-shadow:-24px 0 60px -20px rgba(0,0,0,.8);
  transform:translateX(100%); transition:transform .2s ease;
  padding:18px 18px 0;
}
body.libOpen .libDrawer { transform:none; }

.libHead { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.libHead h3 { margin:0 0 2px; font-size:17px; }
.libHead .sub { margin:0; }
.libClose {
  background:none; border:0; color:var(--dim); font-size:26px; line-height:1;
  padding:0 4px; cursor:pointer; border-radius:8px;
}
.libClose:hover { color:var(--ink); background:rgba(255,255,255,.06); filter:none; }

.libSearch { width:100%; margin:14px 0 10px; font-size:13.5px; padding:8px 11px; }
.libGroups { display:flex; gap:6px; flex-wrap:wrap; }
.libChip {
  background:var(--panel2); border:1px solid var(--line); color:var(--dim);
  border-radius:20px; padding:5px 11px; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
}
.libChip:hover { border-color:var(--accent2); filter:none; }
.libChip.on { border-color:var(--accent2); background:rgba(34,227,208,.1); color:var(--ink); }

/* The column itself — one document per row, scrolled in one direction. */
.libBody { flex:1; overflow-y:auto; margin:12px -4px 0; padding:0 4px 8px; }
/* Sections roll up. Seven shelves open at once is a long scroll for a rep who
   only wants Programs, and the header is the obvious place to press. */
.libSecWrap { margin-bottom:14px; border-radius:10px; }
.libSecWrap:last-child { margin-bottom:0; }
.libSec {
  display:flex; align-items:center; gap:8px; width:100%;
  margin:0 0 6px; font-size:10.5px; text-transform:uppercase; letter-spacing:.07em;
  color:var(--dim); font-weight:700; font-family:inherit;
  position:sticky; top:0; background:var(--panel); padding:7px 2px 5px; z-index:1;
  border:0; border-radius:6px; cursor:pointer; text-align:left;
}
.libSec:hover { color:var(--ink); background:var(--panel); filter:none; }
.libSecName { flex:1; min-width:0; }
.libSecN { font-weight:600; letter-spacing:0; }
.libSecCaret {
  border:4px solid transparent; border-top-color:currentColor;
  transform:translateY(2px); transition:transform .15s ease; flex-shrink:0;
}
.libSecWrap.shut .libSecCaret { transform:translateY(0) rotate(-90deg); }
.libSecWrap.shut .libSecBody { display:none; }
/* The section you are dragging onto. */
.libSecWrap.drop { outline:2px dashed var(--accent2); outline-offset:3px; }
.libSecWrap.drop .libSec { color:var(--accent2); }

.libTools { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:10px; flex-wrap:wrap; }
.libTools .sub { margin:0; font-size:11.5px; }

/* Rows are drag handles for a curator, so text must stop selecting under the
   pointer — dragging a title used to just highlight it. */
.libCard[draggable="true"] { cursor:grab; user-select:none; -webkit-user-select:none; }
.libCard[draggable="true"]:active { cursor:grabbing; }
.libCard.dragging { opacity:.45; }
.libCard {
  display:flex; align-items:center; gap:10px; cursor:pointer;
  border:1px solid var(--line); border-radius:10px; background:var(--panel2);
  padding:9px 11px; margin-bottom:5px; min-width:0;
}
.libCard:hover { border-color:rgba(34,227,208,.4); }
.libMain { min-width:0; flex:1; }
.libTick { width:16px; height:16px; accent-color:#f0b429; flex-shrink:0; cursor:pointer; }
.libCard h4 { margin:0; font-size:13.5px; line-height:1.35; overflow-wrap:anywhere; }
.libMeta { margin:2px 0 0; font-size:11.5px; color:var(--dim); display:flex; gap:8px; flex-wrap:wrap; }
.libGrp { color:var(--accent2); font-weight:600; }
.libActs { display:flex; gap:8px; align-items:center; flex-shrink:0; }
.libActs .link { padding:2px 2px; font-size:12.5px; }
.link.danger { color:#f87171; }

.libAdmin { border-top:1px solid var(--line); padding:12px 0 16px; }
.libDrop {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px dashed var(--line); border-radius:10px; padding:12px;
}
.libDrop.over { border-color:var(--accent2); background:rgba(34,227,208,.06); }
.libDrop button { padding:8px 14px; font-size:13.5px; }
.libAdmin .sub { margin:8px 0 0; }

@media (max-width:520px) { .libDrawer { width:100vw; } }

/* the field — every TSM and their dealerships (admin only)
 *
 * Rows reuse .planRow on purpose, not just for the look: the print stylesheet
 * hides every <button>, and these rows ARE buttons. My Book printed as an empty
 * page for exactly that reason once already, and .planRow already carries the
 * `display:grid !important` that undoes it. */
/* This is a 133-row table of names, and it was being read inside the same
   narrow column the dealer lookup uses. "ANDRES MAGALLAN" wrapped onto two
   lines, "BILL VAN HUYSEN" onto three, and rows stopped lining up with each
   other — which is the one thing a table has to do. It gets the width it needs
   and nothing wraps: every cell is a single line, clipped with an ellipsis if
   it must be, because a name broken across lines reads as two names. */
body[data-view="field"] .wrap { max-width:1440px; }

.fieldSearch { width:100%; margin:0 0 .8rem; font-size:15px; padding:11px 13px; }
.fieldHead { margin:1.4rem 0 .5rem; font-size:.78rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--dim,#8a93a6); font-weight:700; }
.fieldRow { grid-template-columns:6rem minmax(0,1.6fr) 8rem minmax(0,1fr) 9rem; }
/* name | count | states | ADI — the name gets the room, since it is what you
   are scanning for. */
.tsmRow { grid-template-columns:minmax(0,1.5fr) 8.5rem 9rem minmax(0,1.6fr); }
.fieldRow, .tsmRow { padding:.7rem .9rem; gap:1rem; margin-bottom:.3rem; }

.tsmRow .pName { font-size:1rem; font-weight:700; letter-spacing:.01em; color:var(--ink,#e8edf5); }
.fieldRow .pWhere, .fieldRow .pAdi, .fieldRow .pCount {
  color:var(--dim,#8a93a6); font-size:.9rem; }
.fieldRow .pCount { font-variant-numeric:tabular-nums; font-weight:600; color:#cbd5e1; }
.fieldRow .pWhere { font-variant-numeric:tabular-nums; letter-spacing:.03em; }
/* Nothing in a row is allowed to wrap. */
.fieldRow > span, .tsmRow > span {
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* An unassigned group is a real thing to look at, not an error — marked, not alarmed. */
.tsmRow.unassigned .pName { color:#fbbf24; }
.cov { font-size:.7rem; padding:.1rem .4rem; border-radius:1rem; white-space:nowrap;
  background:rgba(255,255,255,.08); color:var(--dim,#8a93a6); }
.cov.all { background:#064e3b; color:#a7f3d0; }
.cov.some { background:#374151; color:#d1d5db; }

@media (max-width:820px) {
  /* Every column below the name is supporting detail; stack rather than shrink,
     because a truncated dealership name reads as a different dealership. */
  .fieldRow, .tsmRow { grid-template-columns:1fr; gap:.15rem; }
  .fieldRow .pAdi { white-space:normal; }
}

@media print {
  .fieldSearch { display:none !important; }
  .fieldHead { color:#444 !important; }
  .cov { border:1px solid #bbb !important; background:#fff !important; color:#333 !important; }
}

/* ---- monthly dealer packet + multi-select ---- */

/* The one thing in the drawer that WRITES rather than reads, so it does not
   look like another document row. Folder drawn in CSS — an <img> would be one
   more asset to ship for a 16px shape. */
.libPacketBtn {
  display:flex; align-items:center; gap:10px; width:100%; margin:12px 0 4px;
  padding:11px 13px; border-radius:10px; cursor:pointer; font:inherit;
  font-size:13.5px; font-weight:700; letter-spacing:.01em; text-align:left;
  color:#0b1220; background:linear-gradient(180deg,#f0b429,#e0a020); border:1px solid #f5c451;
}
.libPacketBtn:hover { filter:brightness(1.06); }
.libPacketBtn.has { background:linear-gradient(180deg,#7dd3fc,#38bdf8); border-color:#93d9fd; }
.libFolder {
  width:17px; height:13px; flex-shrink:0; position:relative;
  background:currentColor; border-radius:2px 3px 3px 3px; opacity:.85;
}
.libFolder::before {
  content:''; position:absolute; top:-4px; left:0; width:7px; height:4px;
  background:currentColor; border-radius:2px 2px 0 0;
}

/* Sits directly under the packet chips it acts on. With the count gone the bar
   is nothing but buttons, so it hugs them to the right rather than stretching a
   full-width slab across an empty row. */
.libSelBar {
  display:flex; align-items:center; justify-content:flex-end; gap:10px; flex-wrap:wrap;
  margin:8px 0 2px; padding:8px 10px; border-radius:9px;
  background:rgba(34,227,208,.08); border:1px solid rgba(34,227,208,.55); font-size:12.5px;
}
.libSelActs { display:flex; align-items:center; gap:10px; }
.libSelBar button:not(.link) { padding:6px 12px; font-size:12.5px; }

/* The running list of picks. Full width under the buttons so it can grow to a
 * dozen documents without shoving the actions off the row. */
.libSelList {
  flex:1 0 100%; display:flex; flex-wrap:wrap; gap:6px;
  margin-top:2px; padding-top:9px; border-top:1px solid rgba(34,227,208,.28);
}
.libSelList:empty { display:none; }
.libSelChip {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 9px 4px 11px; border-radius:20px; cursor:pointer;
  border:1px solid var(--accent2); background:rgba(34,227,208,.13);
  color:var(--ink); font:inherit; font-size:12px; line-height:1.3;
  max-width:min(340px,100%);
}
.libSelChip:hover { background:rgba(255,107,107,.16); border-color:#ff6b6b; }
.libSelChip i { font-style:normal; font-size:14px; color:var(--accent2); line-height:1; }
.libSelChip:hover i { color:#ff6b6b; }

/* A selected row. Distinct from hover, and from the drop-target outline. */
.libCard.sel { border-color:var(--accent2); background:rgba(34,227,208,.1); }
.libCard.sel .libMain h4 { color:var(--accent2); }
.libMain { cursor:pointer; }

/* The packet on the dealer screen, above the individual documents. */
.pick.monthly { border-color:#38bdf8; background:rgba(56,189,248,.08); }
.pick.monthly .tag { border-color:#38bdf8; color:#7dd3fc; }
.pick.monthly .t { color:#e0f2fe; }
/* Armed for removal — the second press is destructive, so it looks it. */
.libActs .link.danger.armed {
  color:#fff; background:#b91c1c; border-radius:6px; padding:3px 8px; text-decoration:none;
}

/* ---- the dealer screen's document list ----
   Twenty-seven full-height rows ran off the bottom of the card, so picking one
   flyer meant scrolling the whole page past everything else on the dealer. It
   scrolls inside itself now, at a density you can scan. */
.docList {
  max-height: 320px; overflow-y: auto; padding-right: 4px;
  border: 1px solid var(--line); border-radius: 10px; padding: 6px;
  background: rgba(0,0,0,.15);
}
.docList .pick { padding: 6px 9px; gap: 8px; }
.docList .pick .t { font-size: 13px; }
.docList .pick .d { font-size: 11.5px; }
.docList .pick .tag { font-size: 9.5px; padding: 1px 6px; }

/* The monthly packet row leads the list. It no longer sticks: the list is eight
   collapsed shelves now, not twenty-seven rows, so there is nothing to lose it
   behind — and a sticky row inside a scrolling flex column was half of the
   overlap that got reported. */
.docList .pick.monthly {
  margin-bottom: 8px; background: #2b2312;
  box-shadow: 0 6px 12px -6px rgba(0,0,0,.9);
}

/* Already carried by this month's packet. Marked, not disabled: a rep may still
   want it ticked individually. */
.docList .pick.inPacket { border-left: 3px solid #38bdf8; }
.docList .pick.inPacket .tag { border-color: #38bdf8; color: #7dd3fc; }

.foldBar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.docFilter {
  flex: 1; min-width: 160px; background: var(--panel2); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px;
  font: inherit; font-size: 13px;
}
.docFilter:focus { outline: none; border-color: var(--accent2); }
.libPacketBar { display:flex; align-items:center; justify-content:space-between; gap:10px;
  flex-wrap:wrap; margin:6px 0 0; }
.libPacketBar .sub { margin:0; font-size:11.5px; }

/* ---- selection colour on the dealer screen ----
   Marc's call: the gold of the empty "Create Monthly Dealer Packet" button, not
   teal and not the blue the packet row had. Scoped to #result — the dealer
   screen is the view he was looking at. The packet builder still uses teal;
   worth unifying, but that is a separate decision about a screen he did not
   ask about. */
#result .pick.on {
  border-color: #f0b429;
  background: #241e11;              /* opaque: this list scrolls under a sticky row */
}
#result .pick.on .t { color: #fde3a7; }
#result .pick input { accent-color: #f0b429; }
#result .pick.on .tag { border-color: #f0b429; color: #f5c451; }

/* This month's packet — the same gold, filled a little harder because it is the
   one row that is not a single document. */
#result .pick.monthly { border-color: #f0b429; background: #2b2312; }
.docList .pick.monthly { border-color: #f0b429; }
#result .pick.monthly .t { color: #fde3a7; }
#result .pick.monthly .tag { border-color: #f0b429; color: #f5c451; }

/* Already carried by the packet: the same family, quieter, since it is a note
   rather than a selection. */
.docList .pick.inPacket { border-left: 3px solid #f0b429; }
.docList .pick.inPacket .tag { border-color: #f0b429; color: #f5c451; }

/* The drawer's packet button keeps the gold whether or not a packet is set —
   the blue "has one" variant was the odd colour out. */
.libPacketBtn.has {
  background: linear-gradient(180deg,#f0b429,#e0a020);
  border-color: #f5c451;
}

/* In this month's packet — visible in the library itself, not only after
   pressing the button to find out. */
.libCard.inPacket { border-left:3px solid #f0b429; }
.inPacketTag {
  font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
  border:1px solid #f0b429; color:#f5c451; border-radius:20px; padding:1px 7px;
}

.libSort {
  background:var(--panel2); color:var(--dim); border:1px solid var(--line);
  border-radius:8px; padding:4px 8px; font:inherit; font-size:11.5px; cursor:pointer;
}
.libSort:focus { outline:none; border-color:var(--accent2); color:var(--ink); }
.libAdded { color:var(--dim); }
.libSec.static { cursor:default; }
.libSec.static:hover { color:var(--dim); }

/* ================= PDF LIBRARY: its own page, in tiles =================
   It was a drawer. The dealer screen now carries its own sectioned picker for
   "which of these am I taking", so this screen is for BROWSING — which wants
   room, not a 430px column. */
body[data-view="library"] .wrap { max-width: 1400px; }
.card.lib .rowhead { align-items: flex-start; gap: 16px; flex-wrap: wrap; }

.libBar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 16px 0 10px; }
.libBar .libSearch { flex: 1; min-width: 220px; margin: 0; }
.libBarRight { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.libHint { margin: 0 0 6px; font-size: 12px; }
.libBody { margin-top: 10px; }

/* Tiles, still shelved. */
/* LINE ITEMS, not tiles. As cards these were three stacked lines each in a
   230px grid cell, so eight documents filled the screen and you scrolled to
   read a list. One boxed row per document reads top to bottom at a glance and
   still holds the tick box and the same actions. */
.libGrid { display: flex; flex-direction: column; gap: 6px; padding: 2px 0 4px; }
.libTile {
  display: flex; align-items: center; gap: 12px; min-width: 0; position: relative;
  border: 1px solid var(--line); border-radius: 9px; background: var(--panel2);
  padding: 8px 12px; cursor: pointer; user-select: none; -webkit-user-select: none;
}
.libTile:hover { border-color: rgba(34,227,208,.45); background: rgba(34,227,208,.05); }
.libTile.sel { border-color: #f0b429; background: #241e11; }
.libTile.inPacket { border-left: 3px solid #f0b429; }
.libTile.dragging { opacity: .45; }
/* The tick and the IN PACKET flag ride on the left of the row, not above it. */
.ltTop { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.libTile .libTick { width: 16px; height: 16px; accent-color: #f0b429; cursor: pointer; }

/* A sheet of paper, drawn rather than shipped as an image — there are no
   thumbnails for these and rendering 27 PDFs to make some would cost more than
   it tells you. */
.ltSheet {
  height: 96px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1b2434, #131a27);
  border: 1px solid var(--line);
}
.ltPdf {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; color: var(--dim);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px;
}
.libTile.inPacket .ltPdf { color: #f5c451; border-color: #f0b429; }
.libTile h4 {
  margin: 0; font-size: 13.5px; line-height: 1.3; flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ltMeta { margin: 0; font-size: 11.5px; color: var(--dim); flex: 0 0 auto; white-space: nowrap; }
.ltActs { display: flex; gap: 12px; flex: 0 0 auto; }
.ltActs .link { padding: 2px 0; font-size: 12.5px; white-space: nowrap; }

/* ---- quick view ---- */
.pvScrim {
  position: fixed; inset: 0; z-index: 300; background: rgba(3,6,12,.7);
  opacity: 0; transition: opacity .16s ease;
}
body.pvOpen .pvScrim { opacity: 1; }
.pv {
  position: fixed; z-index: 301; left: 50%; top: 50%;
  transform: translate(-50%,-48%); opacity: 0;
  width: min(860px, 94vw); height: min(78vh, 900px);
  display: flex; flex-direction: column;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.85); overflow: hidden;
  transition: opacity .16s ease, transform .16s ease, width .16s ease, height .16s ease;
}
body.pvOpen .pv { opacity: 1; transform: translate(-50%,-50%); }
body.pvLarge .pv { width: 96vw; height: 94vh; }
.pvHead {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.pvHead h4 { margin: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pvActs { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.pvClose { background: none; border: 0; color: var(--dim); font-size: 24px; line-height: 1;
  cursor: pointer; padding: 0 4px; }
.pvClose:hover { color: var(--ink); filter: none; }
.pv iframe { flex: 1; width: 100%; border: 0; background: #1b2434; }

/* ---- the dealer's picker: shelves, shut by default ---- */
.pickSec { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; overflow: hidden; }
.pickSecHead {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 11px;
  background: rgba(255,255,255,.02); border: 0; color: var(--dim); font: inherit;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  cursor: pointer; text-align: left;
}
.pickSecHead:hover { background: rgba(255,255,255,.05); color: var(--ink); filter: none; }
.pickSecHead.has { color: #f5c451; }
.pickSecName { flex: 1; min-width: 0; }
.pickSecN { letter-spacing: 0; font-weight: 600; }
.pickCaret { border: 4px solid transparent; border-top-color: currentColor;
  transform: translateY(2px); transition: transform .15s ease; flex-shrink: 0; }
.pickSec.shut .pickCaret { transform: translateY(0) rotate(-90deg); }
.pickSec.shut .pickSecBody { display: none; }
.pickSecBody { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

/* ---- library page: readable ----
   The first pass set everything at drawer sizes — 11-13px grey on near-black,
   which is fine in a 430px panel you lean into and unreadable across a full
   page. Sizes up, contrast up, and the section headers take the teal so the
   shelves read as headings instead of more grey text. */
.card.lib .libSec,
.card.lib .libSecName { font-size: 12.5px; letter-spacing: .08em; color: var(--accent2); }
.card.lib .libSec .libSecN { color: var(--dim); font-size: 12px; }
.card.lib .libSecWrap { margin-bottom: 20px; }

.libTile h4 { font-size: 14px; font-weight: 650; line-height: 1.35; color: var(--ink); }
.ltMeta { font-size: 12px; }
.ltActs .link { font-size: 13px; font-weight: 600; color: var(--accent2); }
.ltActs .link:hover { color: var(--ink); }
.libTile .libTick { width: 18px; height: 18px; }

/* Narrow: the meta drops out before the actions do — the date is the least
   useful thing on the row and the actions are why you are looking at it. */
@media (max-width: 760px) {
  .libTile { flex-wrap: wrap; row-gap: 4px; }
  .libTile h4 { flex: 1 1 100%; white-space: normal; }
  .ltMeta { display: none; }
}
.ltSheet { height: 104px; }
.ltPdf { font-size: 12px; }

.libBar .libSearch { font-size: 14.5px; padding: 10px 12px; }
.libChip { font-size: 13px; padding: 6px 13px; }
.libSort { font-size: 13px; padding: 6px 10px; }
.libBarRight .link, .card.lib .libHint { font-size: 13px; }
.card.lib #libCount { font-size: 13.5px; }
.inPacketTag { font-size: 11px; padding: 2px 9px; }

/* The dealer's shelves, same problem at a smaller scale. */
.pickSecHead { font-size: 12px; letter-spacing: .07em; }
.pickSecHead:not(.has) { color: var(--accent2); }
.docList .pick .t, .pickSecBody .pick .t { font-size: 13.5px; }
.pv object { flex:1; width:100%; border:0; background:#1b2434; display:block; }
.pvFallback { display:flex; flex-direction:column; align-items:center; justify-content:center;
  height:100%; gap:8px; color:var(--dim); font-size:14px; text-align:center; padding:24px; }

/* A flex column with a max-height SHRINKS its children rather than scrolling —
   flex-shrink is 1 by default — so eight shelves were squeezed into 320px and
   drawn on top of each other. Nothing in this list may shrink; the container
   scrolls instead. */
.docList > * { flex: 0 0 auto; }
.docList { max-height: 380px; }
.pickSec { flex: 0 0 auto; }
.libSelBar button:not(.link) { padding: 7px 14px; font-size: 13px; }
.libActMsg { margin: 8px 0 0; font-size: 13px; }

/* A picked document, listed among the reports. Marked so it is clear it came
   from the library rather than being a fifth GM report. */
/* The assembled bundle. Marked apart from the four GM reports because it is a
   different kind of thing — one the rep built, not one GM produced. */
#downloads .pick.chosenDoc { border-left: 3px solid #f0b429; }
#downloads .pick.chosenDoc .tag { border-color: #f0b429; color: #f5c451; }
#downloads .pick.chosenDoc .d {
  color: #d6c08a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- the dealer card, uncrammed ----
   Everything here was tuned down to fit a long list that no longer exists: the
   documents you pick now sit up in the reports box and leave the shelves, so
   there is room to breathe and no reason to keep squeezing. */
#result .fold { margin-top: 18px; }
#downloads { gap: 8px; }
#downloads .pick { padding: 13px 15px; gap: 13px; }
#downloads .pick .t { font-size: 14.5px; }
#downloads .pick .d { font-size: 12.5px; margin-top: 3px; }
#downloads .pick input { width: 19px; height: 19px; }

.foldBar { margin: 12px 0 14px; gap: 16px; }
.docFilter { padding: 10px 12px; font-size: 14px; }

.docList {
  max-height: 460px; padding: 10px; gap: 8px;
  background: rgba(0,0,0,.18);
}
.pickSec { margin-bottom: 0; border-radius: 11px; }
.pickSecHead { padding: 13px 15px; font-size: 12.5px; gap: 11px; }
.pickSecBody { padding: 8px; gap: 6px; }
.pickSecBody .pick { padding: 11px 13px; gap: 12px; }
.pickSecBody .pick .t { font-size: 14px; }
.pickSecBody .pick input { width: 18px; height: 18px; }

/* The packet row leads the card, with room around it. */
.docList .pick.monthly { padding: 14px 15px; margin-bottom: 10px; }
.docList .pick.monthly .t { font-size: 14.5px; }
.docList .pick.monthly .d { font-size: 12.5px; margin-top: 3px; }

.pickBar { margin-top: 20px; padding-top: 16px; gap: 10px; }
.pickBar button { padding: 11px 20px; font-size: 14.5px; }

/* The tiles lose the drawn sheet. It was a grey box with the word PDF in it on
   every one of twenty-seven documents — the same non-answer twenty-seven times,
   taking a third of each tile. Quick view is the preview. */
.ltSheet, .ltPdf { display: none; }
.libTile { gap: 6px; padding: 14px; }
.libGrid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* What this month's packet holds, named. */
.libPacketList { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
/* Two hit areas in one chip: the name opens the document, the x takes it out.
   Without the first, a packet of four had no way to view one of them — picking
   a document removes its tile, and the tile was where Quick view lived. */
.libPacketItem {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 12px; border: 1px solid rgba(240,180,41,.45);
  background: rgba(240,180,41,.08); border-radius: 20px; overflow: hidden;
  max-width: min(340px, 100%);
}
.libPacketItem .chipName,
.libPacketItem .chipX {
  font: inherit; background: none; border: 0; color: #f5c451; cursor: pointer;
  padding: 3px 4px 3px 11px; line-height: 1.4;
}
.libPacketItem .chipName {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-decoration: underline; text-decoration-color: rgba(245,196,81,.35);
  text-underline-offset: 2px;
}
.libPacketItem .chipName:hover { background: rgba(240,180,41,.18); color: #ffe0a3; }
.libPacketItem .chipX { padding: 3px 10px 3px 4px; font-size: 14px; }
.libPacketItem .chipX:hover { background: rgba(255,107,107,.22); color: #ff9b9b; }
/* The packet before anything is in it: present and inviting, not lit up as if
   something were selected. */
#downloads .pick.chosenDoc.empty { border-left-color: var(--line); opacity: .8; }
#downloads .pick.chosenDoc.empty:hover { opacity: 1; border-color: rgba(240,180,41,.5); }
#downloads .pick.chosenDoc.empty .d { color: var(--dim); }
#downloads .pick.chosenDoc.empty .tag { border-color: var(--line); color: var(--dim); }

/* ---- the dealer screen uses the whole screen ----
   The profile was pinned to a 340px column inside a 1260px page, so "Zone
   manager  Reginald Warren Jr" wrapped, the header piled up, and the four
   bubbles had to stack. There is screen either side of that going unused.
   The page widens and the profile takes a real share of it. */
@media (min-width: 1080px) {
  body[data-view="dealer"] .wrap {
    max-width: min(1800px, calc(100vw - 48px));
    grid-template-columns: minmax(0, 1fr) minmax(380px, 30%);
    gap: 22px;
  }
  /* With room to work in, the header goes back to one line and the labelled
     rows stop wrapping. */
  body[data-view="dealer"] #profileCard .rowhead {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  }
  body[data-view="dealer"] #profileCard .rowhead > span { margin-bottom: 0; }
  body[data-view="dealer"] #profileCard #profMeta { font-size: 12.5px; }
  body[data-view="dealer"] #profileCard .card,
  body[data-view="dealer"] #profileCard { padding: 20px; }
  body[data-view="dealer"] #profileCard .fRow { padding: 5px 0; }
  body[data-view="dealer"] .fieldBox { font-size: 14px; line-height: 1.75; }
}

/* The bubbles stay ONE across, full width of the profile column. Two across
   looked like better use of the space and was not: each bubble halved, so
   "Zone manager / Reginald Warren Jr" wrapped again and the email clipped —
   the same cramping, just further right. A labelled row wants one wide line. */
@media (min-width: 1080px) {
  body[data-view="dealer"] #profileCard .profGrid { grid-template-columns: 1fr; }
  /* Label left, value right, and let a long email wrap instead of being cut. */
  body[data-view="dealer"] .fieldBox .fRow { gap: 16px; align-items: baseline; }
  body[data-view="dealer"] .fieldBox .fLbl { flex: 0 0 auto; white-space: nowrap; }
  body[data-view="dealer"] .fieldBox .fRow > :last-child {
    text-align: right; min-width: 0; overflow-wrap: anywhere;
  }
}

/* A header tab that is a link out rather than a view. Same shape as the rest so
   the row reads as one thing. */
.tabs a.tabLink { text-decoration: none; display: inline-flex; align-items: center; }
.tabs a.tabLink:hover { filter: none; }
/* The More panel hangs off the LAST tab, so it opens leftwards or it runs off
   the edge of the window. */
.menu[data-menu="more"] .menuPanel { left: auto; right: 0; }
/* The abbreviation sits UNDER the name. As an inline span it ran straight on
   from it — "Accessory Information CenterAIC". */
.menuItem > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menuItem .mHint { display: block; }
.menu[data-menu="more"] .menuItem { align-items: flex-start; gap: 12px; }
.menu[data-menu="more"] .menuPanel { min-width: 300px; }

/* ---- controls that should look pressable ----
   Print / PDF and the back link were grey outlines the same weight as body
   text, so on a screen of grey-on-navy rows they read as labels rather than
   things you can press. Teal, bigger, and they respond. */
.printBtn, #fieldBack {
  background: rgba(34,227,208,.06);
  border: 1px solid rgba(34,227,208,.45);
  border-radius: 9px;
  color: var(--accent2);
  font: inherit; font-size: 13.5px; font-weight: 650;
  padding: 9px 16px; cursor: pointer; text-decoration: none;
  transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.printBtn:hover, #fieldBack:hover {
  background: rgba(34,227,208,.16);
  border-color: var(--accent2);
  color: #eafffb;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -8px rgba(34,227,208,.8);
  filter: none;
}
.printBtn:active, #fieldBack:active { transform: translateY(0); box-shadow: none; }
#fieldBack { margin-right: 10px; }

/* ---- rows that answer the pointer ----
   A 133-row table where the only hover feedback was a barely-different grey
   gave you nothing to aim at. The row lifts, warms, and grows a teal edge so
   the one under the pointer is obvious. */
.planRow, .fieldRow, .tsmRow {
  transition: background .14s ease, border-color .14s ease, transform .12s ease, box-shadow .14s ease;
}
.planRow:hover, .fieldRow:hover, .tsmRow:hover {
  background: rgba(34,227,208,.07);
  border-color: rgba(34,227,208,.55);
  transform: translateX(3px);
  box-shadow: -3px 0 0 0 var(--accent2), 0 8px 20px -14px rgba(0,0,0,.9);
}
.planRow:hover .pName, .tsmRow:hover .pName { color: #eafffb; }
.planRow:active, .fieldRow:active, .tsmRow:active { transform: translateX(1px); }

/* The library tiles and pick rows get the same answer, so hovering means one
   thing everywhere. */
.libTile { transition: background .14s ease, border-color .14s ease, transform .12s ease, box-shadow .14s ease; }
.libTile:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(0,0,0,.9); }
.pick, .pickSecHead, .libCard {
  transition: background .14s ease, border-color .14s ease, transform .12s ease;
}
.pickSecHead:hover { transform: translateX(2px); }

@media (prefers-reduced-motion: reduce) {
  /* Motion is decoration here; the colour change carries the same information. */
  .printBtn, #fieldBack, .planRow, .fieldRow, .tsmRow, .libTile, .pick, .pickSecHead, .libCard {
    transition: none;
  }
  .printBtn:hover, #fieldBack:hover, .planRow:hover, .fieldRow:hover,
  .tsmRow:hover, .libTile:hover, .pickSecHead:hover { transform: none; }
}

/* ---- 1 & 2: progress bar and toasts ---- */
.topBar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 400;
  background: rgba(34,227,208,.12); opacity: 0; transition: opacity .2s ease;
}
.topBar.on { opacity: 1; }
.topBar span {
  display: block; height: 100%; width: 35%;
  background: linear-gradient(90deg, transparent, var(--accent2), transparent);
  animation: topSlide 1.1s ease-in-out infinite;
}
@keyframes topSlide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }

.toasts {
  position: fixed; right: 18px; bottom: 18px; z-index: 401;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  background: var(--panel); border: 1px solid var(--accent2); color: var(--ink);
  border-left-width: 4px; border-radius: 10px; padding: 11px 15px;
  font-size: 13.5px; font-weight: 550; max-width: 380px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.toast.in { opacity: 1; transform: none; }
.toast.bad { border-color: #f87171; }

/* ---- 5: a visible focus ring ----
   Several inputs set outline:none for looks, which leaves anyone on a keyboard
   with no idea where they are. :focus-visible only shows it for keyboard
   focus, so clicking still looks clean. */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: 6px;
}
.menuSearch:focus-visible, .libSearch:focus-visible, .docFilter:focus-visible,
#bac:focus-visible, .fieldSearch:focus-visible { outline-offset: 1px; }

/* ---- the header, awake ----
   The tabs were 15px mixed-case grey with a background tint on hover — the
   quietest row on a screen that is otherwise all teal and gold, and the thing
   every session starts and ends at. Caps, tracking, a teal wash and an
   underline that draws itself. */
.tabs .tab, .tabs .menuBtn {
  text-transform: uppercase;
  font-size: 12.5px;
  font-weight: 750;
  letter-spacing: .07em;
  padding: 9px 14px;
  transition: color .16s ease, background .16s ease, transform .12s ease;
}
/* The underline is a pseudo-element that scales from the centre, so it wipes
   in rather than appearing. */
.tabs .tab::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  background: var(--accent2); border-radius: 2px;
  transform: scaleX(0); transform-origin: center;
  transition: transform .18s ease;
}
.tabs .tab:hover::after { transform: scaleX(1); }
.tabs .tab:hover {
  color: var(--accent2);
  background: rgba(34,227,208,.08);
  transform: translateY(-1px);
}
/* The current tab is already a filled pill; it does not need the underline too. */
.tabs .tab.on::after { display: none; }
.tabs .tab.on {
  letter-spacing: .07em;
  box-shadow: 0 0 0 1px rgba(34,227,208,.4), 0 6px 18px -6px rgba(34,227,208,.7);
}
.tabs .menuBtn:hover .caret { border-top-color: var(--accent2); }
.tabs .tab:active { transform: translateY(0); }

/* The wordmark answers the pointer too — it is a button, and nothing said so. */
.brand.small { transition: transform .12s ease, filter .15s ease; }
.brand.small:hover { transform: translateY(-1px); }
.brand.small:hover h1 { opacity: 1; }
.brand.small:hover .pulse { box-shadow: 0 0 0 4px rgba(34,227,208,.18); }
.pulse { transition: box-shadow .18s ease; }

/* Sign out should not look like the loudest thing up there, but it should look
   like something. */
.who .link { transition: color .15s ease; }
.who .link:hover { color: #f87171; }

@media (prefers-reduced-motion: reduce) {
  .tabs .tab, .tabs .tab::after, .brand.small { transition: none; }
  .tabs .tab:hover, .brand.small:hover { transform: none; }
  .tabs .tab:hover::after { transform: scaleX(1); }
}

/* ================= one hover language, everywhere =================
 * Every box on the site — cards, rows, tiles, shelves, bubbles, inputs and
 * buttons — takes the same answer when the pointer is on it: a bold dark-teal
 * ring, a small lift, and it comes to the front of whatever it sits next to.
 *
 * The ring is a box-shadow, not a border, so nothing moves when it appears —
 * a 2px border on hover shifts the row by 2px and the whole list twitches.
 * z-index needs position:relative to take effect, hence the pairing.
 */
:root { --ring: #0e9488; --ringLit: rgba(14,148,136,.85); }

.card,
.opp,
.bubble,
.ctrl,
.mnStat,
.actRow,
.histRow,
.itemRow,
.trainRow,
.pick,
.libTile,
.libCard,
.planRow,
.fieldRow,
.tsmRow,
.pickSec,
.libSecWrap,
.sug,
.fieldBox,
.menuItem,
.libChip,
.calCell,
.dlChoice button,
.pickBar button,
.libSelBar button,
.printBtn,
#fieldBack,
.libPacketBtn,
.menuSearch,
.libSearch,
.docFilter,
.fieldSearch,
#bac,
.notes textarea,
.addBtn {
  position: relative;
  transition: box-shadow .16s ease, transform .13s ease, border-color .16s ease, background .16s ease;
}

.card:hover,
.opp:hover,
.bubble:hover,
.ctrl:hover,
.mnStat:hover,
.actRow:hover,
.histRow:hover,
.itemRow:hover,
.trainRow:hover,
.pick:hover,
.libTile:hover,
.libCard:hover,
.planRow:hover,
.fieldRow:hover,
.tsmRow:hover,
.pickSec:hover,
.sug:hover,
.fieldBox:hover,
.menuItem:hover,
.libChip:hover,
.calCell:hover,
.dlChoice button:hover,
.pickBar button:hover,
.libSelBar button:hover,
.printBtn:hover,
#fieldBack:hover,
.libPacketBtn:hover,
.addBtn:hover {
  box-shadow: 0 0 0 2px var(--ring), 0 14px 30px -18px rgba(0,0,0,.95);
  transform: translateY(-2px);
  z-index: 6;
}

/* Inputs get the ring on focus as well as hover — that is when it means most. */
.menuSearch:hover, .libSearch:hover, .docFilter:hover, .fieldSearch:hover,
#bac:hover, .notes textarea:hover,
.menuSearch:focus, .libSearch:focus, .docFilter:focus, .fieldSearch:focus,
#bac:focus, .notes textarea:focus {
  box-shadow: 0 0 0 2px var(--ring);
  z-index: 6;
}

/* Cards are big; they lift less, or the whole page bounces. */
.card:hover { transform: translateY(-1px); }

/* Rows inside a scrolling shelf keep their sideways shift — it reads better in
   a dense list than a lift does — but gain the same ring. */
.planRow:hover, .fieldRow:hover, .tsmRow:hover { transform: translateX(3px); }

/* Things that are ALREADY the answer keep their own colour and just get the
   ring, so selection still reads as selection under the pointer. */
.pick.on:hover, .libTile.sel:hover, .libCard.sel:hover {
  box-shadow: 0 0 0 2px var(--ring), 0 14px 30px -18px rgba(0,0,0,.95);
}

@media (prefers-reduced-motion: reduce) {
  .card:hover, .pick:hover, .libTile:hover, .libCard:hover, .planRow:hover,
  .fieldRow:hover, .tsmRow:hover, .pickSec:hover, .sug:hover, .fieldBox:hover,
  .menuItem:hover, .libChip:hover, .calCell:hover, .printBtn:hover,
  #fieldBack:hover, .libPacketBtn:hover, .addBtn:hover { transform: none; }
}

/* Table rows are boxes too — the mannequin floor list, the activity log. A
   <tr> cannot take a transform without breaking the table, so it gets the ring
   as an inset shadow on its cells instead. */
tbody tr { transition: background .16s ease, box-shadow .16s ease; }
tbody tr:hover > td { background: rgba(34,227,208,.05); }
tbody tr:hover > td:first-child { box-shadow: inset 2px 0 0 0 var(--ring); }
tbody tr:hover > td:last-child { box-shadow: inset -2px 0 0 0 var(--ring); }

/* ---- the dealer dropdown answers the pointer like everything else ---- */
.sug { transition: box-shadow .16s ease, transform .13s ease, background .16s ease, border-color .16s ease; }
.sug:hover {
  border-color: var(--ring);
  background: rgba(34,227,208,.07);
  box-shadow: 0 0 0 2px var(--ring), 0 10px 24px -16px rgba(0,0,0,.95);
  transform: translateX(3px);
  z-index: 6;
}
.sug:hover .n { color: #eafffb; }
.sug:hover .b { color: var(--accent2); }

/* ---- collapsed shelves need to look like shelves ----
   Rolled up, they were bare text on a flat panel with a hairline between them:
   eight labels in a stack with nothing saying each one is a thing you can open.
   Each is its own bar now, with room around it, and it slides and rings on
   hover like every other box. */
.card.lib .libSecWrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel2);
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .16s ease, transform .13s ease, border-color .16s ease;
}
/* The ring is INSET and the bar does not move. An outset 2px ring plus a 3px
 * nudge on a stacked list put the hovered shelf out of line with the ones above
 * and below it and pushed its ring under the card's own edge, which is what
 * "wonky" was — one bar in the stack sitting 3px proud with a clipped outline.
 * Inset draws inside the border box, so nothing overlaps a neighbour or the
 * card, and the stack stays in a straight line. */
.card.lib .libSecWrap:hover {
  border-color: var(--ring);
  box-shadow: inset 0 0 0 1px var(--ring), 0 12px 28px -18px rgba(0,0,0,.95);
  z-index: 6;
}
.card.lib .libSec {
  position: static; padding: 16px 18px; margin: 0; border-radius: 0;
  background: none; font-size: 13px; letter-spacing: .09em;
}
.card.lib .libSec:hover { background: rgba(34,227,208,.06); }
.card.lib .libSecWrap:not(.shut) { background: var(--panel2); }
/* Open, the tiles get a floor of their own so the shelf reads as a container. */
.card.lib .libSecWrap:not(.shut) .libSecBody {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--line);
}
.card.lib .libSecCaret { transition: transform .2s ease; }

/* The count sits in a chip rather than floating at the right margin. */
.card.lib .libSecN {
  background: rgba(255,255,255,.05); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 11px; font-size: 12px; color: var(--dim);
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.card.lib .libSecWrap:hover .libSecN {
  border-color: var(--accent2); color: var(--accent2); background: rgba(34,227,208,.1);
}
/* A shelf with picks in it says so on the closed bar — "2 of 4" — so rolling a
 * section up no longer hides what you took out of it. */
.card.lib .libSecN.picked,
.libSecN.picked {
  background: rgba(34,227,208,.18); border-color: var(--accent2);
  color: var(--accent2); font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .sug:hover, .card.lib .libSecWrap:hover { transform: none; }
}

/* ---- the sign-in screen ----
   It was a 380px card marooned in the middle of a 1400px screen — the first
   thing anyone sees, and the smallest thing on it. */
.card.login { max-width: 520px; padding: 44px 40px; }
.card.login .brand h1 { font-size: 34px; }
.card.login .brand .pulse { width: 13px; height: 13px; }
.card.login .tagline { font-size: 15px; margin-top: 6px; }
.card.login label { font-size: 13.5px; }
.card.login input { font-size: 16px; padding: 14px 15px; }
.card.login #loginBtn { font-size: 16px; padding: 15px; margin-top: 6px; }
.card.login .ticker { height: 46px; }

/* Bright, and the warning line and the joke line read the same weight — the
   whole thing is one gag, so one of them shouting over the other spoils it. */
.loginWarn {
  margin: 20px 0 0; padding: 15px 16px; text-align: center;
  border: 2px solid #ff2d55; border-radius: 12px;
  background: rgba(255,45,85,.12);
  animation: warnPulse 2s ease-in-out infinite;
}
.loginWarn strong,
.loginWarn span {
  display: block; color: #ff5b7a;
  font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.loginWarn span { margin-top: 6px; }
@keyframes warnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,45,85,.45); }
  50%      { box-shadow: 0 0 22px 2px rgba(255,45,85,.35); }
}
@media (prefers-reduced-motion: reduce) { .loginWarn { animation: none; } }

/* ---- admin: the account list ---- */
.userRow {
  border: 1px solid var(--line); border-radius: 11px; background: var(--panel2);
  margin-bottom: 8px; overflow: hidden;
}
.userHead {
  display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1.1fr) 9rem minmax(0,1fr) auto;
  gap: 14px; align-items: center; width: 100%; padding: 14px 16px;
  background: none; border: 0; color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.userHead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uName { font-weight: 700; font-size: 14.5px; }
.uWarn { display: block; font-size: 11.5px; color: #fbbf24; font-weight: 500; }
.uMail { color: var(--accent2); font-size: 13.5px; }
.uBook, .uWhere { color: var(--dim); font-size: 13px; }
.uCaret { border: 5px solid transparent; border-top-color: var(--dim); transform: translateY(3px);
  transition: transform .15s ease; }
.userRow.open .uCaret { transform: translateY(-2px) rotate(180deg); }
.userBody { padding: 4px 16px 16px; border-top: 1px solid var(--line); }
.uFacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 14px 0; }
.uFacts .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.uFacts .v { display: block; font-size: 13.5px; margin-top: 3px; }
.uPw { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uPwIn { background: var(--panel2); border: 1px solid var(--line); border-radius: 9px;
  color: var(--ink); font: inherit; font-size: 14px; padding: 10px 13px; min-width: 220px; }
.uPwGo { padding: 10px 16px; font-size: 13.5px; }
.uDealers { margin-top: 14px; max-height: 340px; overflow-y: auto; }
.uTable { width: 100%; border-collapse: collapse; font-size: 13px; }
.uTable th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--dim); padding: 6px 10px; border-bottom: 1px solid var(--line); }
.uTable td { padding: 7px 10px; border-bottom: 1px solid rgba(255,255,255,.04); }
.uTable td:first-child { font-variant-numeric: tabular-nums; color: var(--dim); }

@media (max-width: 900px) { .userHead { grid-template-columns: 1fr auto; gap: 6px; } }
.mastersBar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:10px; }
.mastersBar .sub { margin:0; }

/* ---- Dealer benchmarks (Justin, 2026-08-14) ----
   Sits inline under the All-in-One row in Performance Reports, laid out the way
   his second mail describes it: the seven categories run ACROSS as columns, the
   dealer's own numbers on the first row, the TSM's boxes on the second, and the
   comparison the three toggles switch between on the third.

   Each category column carries its own hue — Marc's ask — so a rep reading
   across a row can keep their place, and a number in the wrong column is
   obvious. The hues are held at low alpha so the table still reads as one
   object rather than a rainbow. */
.card.report .benchHead {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 12px;
}
.card.report .benchHead h3 { margin: 0 0 2px; font-size: 15px; }
.card.report .benchHead .sub { margin: 0; }
.card.report .benchHead .seg { flex: 0 0 auto; }

table.benchTable { width: 100%; border-collapse: collapse; font-size: 13px; }
table.benchTable th, table.benchTable td {
  border: 1px solid var(--line); padding: 7px 9px; text-align: center; white-space: nowrap;
}
table.benchTable thead th {
  font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  font-weight: 700; line-height: 1.25; color: #e8edf5;
}
/* Row labels down the left so each row says what it is. */
table.benchTable th.rowlbl {
  text-align: right; font-size: 11px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--dim); font-weight: 700; background: rgba(255,255,255,.03);
  white-space: nowrap; width: 1%;
}
table.benchTable tbody td { font-variant-numeric: tabular-nums; }
table.benchTable tr.rPen td { font-weight: 700; font-size: 14px; }
table.benchTable tr.rCmp td { color: var(--dim); }

/* One hue per product category, plus PNUR.
 *
 * Desaturated and held low: at full strength these read as a rainbow and the
 * numbers had to fight the fill to be legible. The job of the colour is only to
 * keep your eye in the right column while you read down it, so it sits just
 * above the panel and lets the figures carry the contrast. */
table.benchTable .c1 { background: rgba(122,146,190,.09); }  /* Floor Pen      — slate  */
table.benchTable .c2 { background: rgba(126,164,118,.09); }  /* Wheel Pen      — sage   */
table.benchTable .c3 { background: rgba(186,163,105,.09); }  /* Wheel Security — sand   */
table.benchTable .c4 { background: rgba(154,136,178,.09); }  /* Assist Steps   — mauve  */
table.benchTable .c5 { background: rgba(190,142,116,.09); }  /* Bed Covers     — clay   */
table.benchTable .c6 { background: rgba(106,166,160,.09); }  /* Emblems        — teal   */
table.benchTable .cPnur { background: rgba(203,171,110,.10); }/* PNUR          — wheat  */
table.benchTable thead th.c1 { background: rgba(122,146,190,.22); }
table.benchTable thead th.c2 { background: rgba(126,164,118,.22); }
table.benchTable thead th.c3 { background: rgba(186,163,105,.22); }
table.benchTable thead th.c4 { background: rgba(154,136,178,.22); }
table.benchTable thead th.c5 { background: rgba(190,142,116,.22); }
table.benchTable thead th.c6 { background: rgba(106,166,160,.22); }
table.benchTable thead th.cPnur { background: rgba(203,171,110,.24); }
/* One neutral header colour across all seven — tinting the text as well as the
   fill was what made the row look loud. */
table.benchTable thead th.c1, table.benchTable thead th.c2,
table.benchTable thead th.c3, table.benchTable thead th.c4,
table.benchTable thead th.c5, table.benchTable thead th.c6,
table.benchTable thead th.cPnur { color: #dbe3ee; }

/* The row the TSM types in. It reads as fields, not as numbers that happen to
   be clickable — Justin's "you select the empty text fields". */
table.benchTable td.tgt { padding: 5px 6px; }
table.benchTable td.tgt input {
  width: 58px; text-align: right; font: inherit; font-size: 13px; font-weight: 700;
  padding: 4px 6px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,.35); background: rgba(0,0,0,.35); color: var(--ink);
  -moz-appearance: textfield; appearance: textfield;
}
table.benchTable td.tgt input::-webkit-outer-spin-button,
table.benchTable td.tgt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
table.benchTable td.tgt input:focus {
  outline: none; border-color: var(--accent2); box-shadow: 0 0 0 2px rgba(34,227,208,.3);
}
table.benchTable td.tgt input::placeholder { color: var(--dim); opacity: .6; font-weight: 400; }
table.benchTable td.tgt .pc { color: var(--dim); font-size: 12px; margin-left: 3px; }
table.benchTable td.tgt .pc.pre { margin: 0 3px 0 0; }

#btnSaveBench { background: #70ad47; border-color: #70ad47; color: #08210f; font-weight: 700; }
#btnSaveBench:hover:not(:disabled) { background: #7fc052; border-color: #7fc052; }

@media (max-width: 860px) {
  table.benchTable { font-size: 12px; }
  table.benchTable th, table.benchTable td { padding: 6px 5px; }
  table.benchTable thead th { font-size: 10px; }
  table.benchTable td.tgt input { width: 46px; font-size: 12px; }
}

/* The targets fold. Same control as Performance Reports so it behaves the way
   the rest of the dealer screen does. */
.benchFold { margin: 0 0 12px; }
.benchFold > summary { cursor: pointer; }
.benchFold .foldC.has { color: var(--accent2); font-weight: 700; }
.benchFold .tableWrap { padding-top: 10px; }

/* ---- controls that live ON a report row ----
   The Dealer Model's month window sits on its own line rather than in a box
   underneath it. The row is a <label>, so these stop the click from reaching
   the checkbox — see the .rowCtl handler in renderPicks(). */
.pick .rowCtl { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pick .rowCtlLbl { font-size: 11px; color: var(--dim); margin-left: -2px; }
.seg.tiny { display: inline-flex; gap: 4px; }
.seg.tiny button {
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 9px; min-width: 30px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel2); color: var(--dim);
}
.seg.tiny button:hover { color: var(--ink); border-color: rgba(34,227,208,.45); }
.seg.tiny button.on { background: rgba(56,132,255,.18); border-color: #3b82f6; color: #cfe0ff; }
.pick .rowSave {
  font: inherit; font-size: 12px; font-weight: 700; line-height: 1;
  padding: 6px 11px; cursor: pointer; border-radius: 7px;
  border: 1px solid #70ad47; background: rgba(112,173,71,.18); color: #cdeab6;
}
.pick .rowSave:hover:not(:disabled) { background: #70ad47; color: #08210f; }
.pick .rowSave:disabled { opacity: .55; cursor: default; }

@media (max-width: 720px) {
  .pick .rowCtl { flex-wrap: wrap; justify-content: flex-end; }
  .seg.tiny button { padding: 5px 7px; min-width: 26px; }
}

/* A row carrying controls needs a fourth column for them. Without it the tag
   wrapped onto a second line and that one row stood taller than the rest. */
.pick.hasCtl { grid-template-columns: auto 1fr auto auto; }

/* ---- the book's PNUR and mannequin columns ----
   The dollar figure that used to sit here was a modelled opportunity; Justin's
   read was that it is useless. PNUR is what GM grades the rep on and what the
   saved dealer targets are set against, so the book ranks on the real number. */
.planRow .pNum { font-variant-numeric:tabular-nums; font-weight:700; font-size:.9rem; white-space:nowrap; }
.planRow .pNum.dim { color:var(--dim); font-weight:400; }
.planRow .pOf { color:var(--dim); font-weight:400; font-size:.8rem; }
.planRow .pGap { display:block; font-size:.72rem; font-weight:700; color:#fca5a5; letter-spacing:.01em; }
.planRow .pHit { display:block; font-size:.72rem; font-weight:700; color:#86efac; }
/* Units still out. A store sitting on an unsold mannequin will not take the
   next one, so it earns a column rather than a detail page. */
.planRow .pMq { font-size:.72rem; font-weight:700; text-align:center; white-space:nowrap;
  padding:.15rem .4rem; border-radius:1rem; background:rgba(240,180,41,.16);
  border:1px solid rgba(240,180,41,.5); color:#f5c451; }
.planRow .pMq.none { background:none; border:0; }

@media (max-width: 900px) {
  .planRow { grid-template-columns:7rem 1fr 8.5rem; row-gap:.3rem; }
  .planRow .pBac, .planRow .pMq { display:none; }
  .planRow .pWhen { grid-column:1 / -1; font-size:.75rem; }
}

/* Day counter in the book. A number to compare, not a sentence to read. */
.planRow .pWhen { display:flex; align-items:baseline; gap:.5rem; }
.planRow .pDays { font-variant-numeric:tabular-nums; font-weight:800; font-size:1rem; color:var(--ink); }
.planRow .pDays i { font-style:normal; font-size:.7rem; font-weight:700; opacity:.65; margin-left:1px; }
.planRow .pDays.never { color:#fbbf24; font-size:.82rem; font-weight:700; }
.planRow .pDays.fresh { color:#86efac; font-size:.82rem; font-weight:700; }
.planRow .pDays.cold  { color:#fca5a5; }
.planRow .pOn { font-size:.72rem; color:var(--dim); white-space:nowrap; }

/* ---- calendar: planning on a date ---- */
.dayHead { display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; }
.dayAddBtn { font:inherit; font-size:.8rem; font-weight:700; padding:.4rem .8rem; cursor:pointer;
  border-radius:.5rem; border:1px solid var(--accent2); background:rgba(34,227,208,.12); color:var(--accent2); }
.dayAddBtn:hover { background:var(--accent2); color:#06231f; }
.dayAddForm { display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0 .8rem;
  padding:.7rem; border-radius:.6rem; border:1px solid var(--accent2); background:rgba(34,227,208,.06); }
.dafRow { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.dafInput, .dafSel { font:inherit; font-size:.85rem; padding:.45rem .6rem; border-radius:.45rem;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink); }
.dafInput { flex:1; min-width:12rem; }
.dafSave { font:inherit; font-size:.85rem; font-weight:700; padding:.45rem 1rem; cursor:pointer;
  border-radius:.45rem; border:1px solid #70ad47; background:#70ad47; color:#08210f; }
.dafSave:disabled { opacity:.5; cursor:default; }
.dafHits { display:flex; flex-direction:column; gap:2px; max-height:11rem; overflow:auto;
  border:1px solid var(--line); border-radius:.45rem; background:var(--panel2); }
.dafHit { text-align:left; font:inherit; font-size:.82rem; padding:.4rem .6rem; cursor:pointer;
  background:none; border:0; color:var(--ink); display:flex; justify-content:space-between; gap:.6rem; }
.dafHit:hover, .dafHit.on { background:rgba(34,227,208,.14); }
.dafHit span { color:var(--dim); font-variant-numeric:tabular-nums; }

/* Move / clear on a scheduled item. */
.dcActs { display:flex; align-items:center; gap:.5rem; margin-top:.5rem; flex-wrap:wrap; }
.dcDate { font:inherit; font-size:.8rem; padding:.35rem .5rem; border-radius:.4rem;
  border:1px solid var(--line); background:var(--panel2); color:var(--ink); color-scheme:dark; }
.dcMove { font:inherit; font-size:.8rem; font-weight:700; padding:.35rem .8rem; cursor:pointer;
  border-radius:.4rem; border:1px solid var(--accent2); background:rgba(34,227,208,.12); color:var(--accent2); }
.dcMove:hover:not(:disabled) { background:var(--accent2); color:#06231f; }
.dcMove:disabled, .dcClear:disabled { opacity:.5; cursor:default; }

/* ---- My Book as a table ---- */
.planRow.planHead {
  background:none; border:0; padding:.35rem .7rem .2rem; cursor:default;
  font-size:.68rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--dim);
}
.planRow.planHead:hover { background:none; }
.planRow .pName {
  font:inherit; font-weight:700; text-align:left; background:none; border:0; padding:0;
  color:var(--ink); cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.planRow .pName:hover { color:var(--accent2); text-decoration:underline; }
.planRow .pMqCell { display:flex; justify-content:center; }
.planRow .pMqBox { width:18px; height:18px; accent-color:#f0b429; cursor:pointer; }
.planRow .pMqBox:disabled { opacity:.5; }
/* the row is no longer a button, so it needs its own hover */
.planRow:not(.planHead):hover { background:rgba(255,255,255,.07); }

@media (max-width: 820px) {
  .planRow { grid-template-columns:5.5rem 1fr 4.5rem 4.5rem; }
  .planRow .pBac, .planRow.planHead span:nth-child(3) { display:none; }
}