/* ============================================================================
   OUTSIDE SALES — MOBILE FIRST
   ----------------------------------------------------------------------------
   Base styles ARE the phone (390px). Desktop is ADDED with min-width queries.
   Not a desktop layout that squeezes: the rep lives on a phone in a truck.

   TYPE FLOOR: 14px absolute, 18px body, per the ClientPulse standard in CLAUDE.md.
   The signed-off prototype carried 10.5 / 11 / 11.5 / 12 / 12.5 / 13 / 13.5px in
   places; every one of those is raised to 14px here on instruction. Where a tab
   label would not fit at 14px the WORD is shortened — the type is never shrunk.

   TOUCH: nothing tappable below 48px (--os-tap). Touch targets matter more than
   density on this screen.
   ========================================================================== */

:root {
  --os-navy:#0f1729; --os-navy2:#1b2740;
  --os-ink:#172033; --os-muted:#6b7789; --os-soft:#4a5567;
  --os-line:#e3e8f0; --os-bg:#f4f6fa;
  --os-blue:#1d4ed8; --os-blue-soft:#eaf0fe;
  --os-open:#0f7a52; --os-open-bg:#e3f5ed; --os-open-br:#7fcdae;
  --os-rel:#9a5a05;  --os-rel-bg:#fdf3e2;  --os-rel-br:#e6bb6a;
  --os-own:#a81b5d;  --os-own-bg:#fdeaf2;  --os-own-br:#eea3c3;
  --os-un:#5b6472;   --os-un-bg:#eef1f6;   --os-un-br:#c4ccd9;
  --os-red:#b42318;
  --os-sh:0 1px 2px rgba(16,24,40,.05),0 6px 20px rgba(16,24,40,.06);
  --os-tap:48px;
}

.os { font-size:18px; line-height:1.5; color:var(--os-ink); padding-bottom:96px; }
.os h1 { font-size:26px; font-weight:800; letter-spacing:-.015em; margin:0 0 4px; }
.os .lede { margin:8px 0 20px; color:var(--os-soft); font-size:16.5px; max-width:70ch; }
.os .small { font-size:14px; }           /* floor */
.os .muted { color:var(--os-muted); }

/* tenant strip — name + logo come from the SESSION, never hardcoded, so A&P get
   their own branding. object-fit guards against a source image of any dimensions
   (PAG's tenant logo is currently 3016px wide — see H2 in NEXT-SESSION-PRIORITIES). */
.os-top { display:flex; gap:11px; align-items:center; padding:11px 0 15px; border-bottom:1px solid var(--os-line); margin-bottom:16px; }
.os-top img.os-logo { height:32px; max-width:104px; object-fit:contain; flex:none; }
.os-top .os-lgfallback { height:32px; min-width:32px; padding:0 8px; border:1px solid var(--os-line); border-radius:8px;
  display:grid; place-items:center; font-size:14px; font-weight:800; color:var(--os-navy); flex:none; }
.os-top .os-tn { font-size:16px; font-weight:750; line-height:1.15; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-top .os-tn small { display:block; font-size:14px; font-weight:600; color:var(--os-muted); }
.os-top .os-rep { margin-left:auto; text-align:right; font-size:14px; color:var(--os-muted); flex:none; }
.os-top .os-rep b { display:block; font-size:15px; color:var(--os-ink); }

/* card + fields */
.os-card { background:#fff; border:1px solid var(--os-line); border-radius:14px; box-shadow:var(--os-sh); padding:16px; }
.os-field { margin-bottom:18px; }
.os-lab { display:flex; gap:8px; align-items:baseline; margin-bottom:7px; }
.os-lab b { font-size:16px; font-weight:700; }
.os-lab span { font-size:14px; color:var(--os-muted); }

.os-search { position:relative; }
.os-search input { width:100%; padding:14px; border:1.5px solid var(--os-line); border-radius:12px;
  background:#fff; font-size:17px; min-height:var(--os-tap); }
.os-search input:focus { outline:none; border-color:var(--os-blue); box-shadow:0 0 0 4px var(--os-blue-soft); }

.os-results { margin-top:8px; border:1px solid var(--os-line); border-radius:12px; background:#fff; overflow:hidden; }
.os-results button { display:block; width:100%; text-align:left; border:0; background:none;
  padding:12px 14px; border-bottom:1px solid var(--os-line); cursor:pointer; min-height:56px; }
.os-results button:last-child { border-bottom:0; }
.os-results button:hover, .os-results button:focus-visible { background:var(--os-blue-soft); outline:none; }
.os-results .r1 { display:flex; gap:8px; justify-content:space-between; align-items:flex-start; }
.os-results b { font-size:16px; font-weight:650; }
.os-results .sub { font-size:14px; color:var(--os-muted); margin-top:2px; }
.os-fz { font-size:14px; color:var(--os-rel); font-weight:700; margin-top:3px; }
.os-empty { padding:14px; font-size:15px; color:var(--os-muted); }

/* claim chips */
.os-claim { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:14px; font-weight:750; border:1.5px solid; white-space:nowrap; line-height:1.35; }
.os-claim .dot { width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; }
.os-claim.open { color:var(--os-open); background:var(--os-open-bg); border-color:var(--os-open-br); }
.os-claim.rel  { color:var(--os-rel);  background:var(--os-rel-bg);  border-color:var(--os-rel-br); }
.os-claim.own  { color:var(--os-own);  background:var(--os-own-bg);  border-color:var(--os-own-br); }
.os-claim.un   { color:var(--os-un);   background:var(--os-un-bg);   border-color:var(--os-un-br); }
/* DO NOT CONTACT is the loudest of the five on purpose. The other four describe who is working an
   account; this one is an instruction, and a rep skimming a list must not read it as another
   shade of "someone's on it". */
.os-claim.dnc  { color:var(--color-danger); background:var(--color-danger-light); border-color:#eeaaa4;
  font-weight:800; letter-spacing:.02em; }

/* chosen company */
.os-chosen { border:1.5px solid var(--os-blue); background:var(--os-blue-soft); border-radius:12px; padding:13px; }
.os-chosen .hd { display:flex; gap:9px; align-items:flex-start; }
.os-chosen b { font-size:17px; font-weight:700; flex:1; }
.os-chosen small { display:block; font-weight:500; color:var(--os-muted); font-size:14px; margin-top:2px; }
.os-chosen .x { border:0; background:none; color:var(--os-blue); font-weight:700; font-size:15px;
  cursor:pointer; padding:6px; min-height:44px; }
.os-ownline { margin-top:10px; padding-top:10px; border-top:1px solid #cddcfa; font-size:15px; }
.os-ownline .adv { display:block; margin-top:6px; color:var(--os-soft); font-size:14px; }
.os-decl { margin-top:9px; font-size:14px; font-weight:700; color:var(--os-open); }
.os-decl.no { color:var(--os-rel); }
/* The marker on a picker row that was floated to the top. Small — it explains an ordering, it is
   not a status the rep has to act on. */
.os-declchip { display:inline-block; margin-left:7px; padding:1px 8px; border-radius:999px;
  background:#fef3c7; border:1px solid #fcd34d; color:#92400e; font-size:13px; font-weight:800;
  vertical-align:middle; white-space:nowrap; }
/* DECLARED AND ALREADY TOUCHED. Green and quieter than the amber above it: still on his list, but
   no longer the thing outstanding, so it must not compete for attention with the ones that are. */
.os-declchip.done { background:#ecfdf5; border-color:#a7f3d0; color:#047857; }
/* HIS OWN ACCOUNT, not declared this cycle. Quietest of the three — it explains why a row is above
   the alphabetical mass without claiming he committed to it this week. */
.os-leadchip { display:inline-block; margin-left:7px; padding:1px 8px; border-radius:999px;
  background:#f1f5f9; border:1px solid #e2e8f0; color:#64748b; font-size:13px; font-weight:700;
  vertical-align:middle; white-space:nowrap; }

.os-acts { display:flex; gap:8px; margin-top:11px; }
.os-acts a { flex:1; text-align:center; border:1.5px solid var(--os-line); background:#fff; border-radius:11px;
  padding:11px 6px; font-size:15px; font-weight:700; text-decoration:none; color:var(--os-ink);
  min-height:var(--os-tap); display:flex; align-items:center; justify-content:center; }
.os-acts a.off { opacity:.4; pointer-events:none; }

/* type picker — five across even at 390px */
.os-types { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; }
.os-types button { border:1.5px solid var(--os-line); background:#fff; border-radius:12px; padding:10px 2px;
  cursor:pointer; min-height:var(--os-tap); font-size:14px; font-weight:700; color:var(--os-soft); }
.os-types button[aria-pressed="true"] { border-color:var(--os-blue); background:var(--os-blue); color:#fff; }

.os-input { width:100%; padding:13px; border:1.5px solid var(--os-line); border-radius:12px;
  background:#fff; font-size:17px; min-height:var(--os-tap); }
.os-input:focus { outline:none; border-color:var(--os-blue); box-shadow:0 0 0 4px var(--os-blue-soft); }

/* appointment checkbox — only rendered for Call / Email / Visit */
.os-appt { display:flex; gap:12px; align-items:flex-start; border:1.5px solid var(--os-line);
  border-radius:12px; padding:13px; background:#fff; min-height:var(--os-tap); cursor:pointer; }
.os-appt input { width:24px; height:24px; accent-color:var(--os-blue); flex:none; margin:2px 0 0; }
.os-appt b { font-size:16px; font-weight:650; display:block; }
.os-appt small { display:block; font-size:14px; color:var(--os-muted); margin-top:2px; }

.os-next { border:1.5px dashed #c3cddf; border-radius:12px; padding:13px; background:#fff; }
.os-next .row { display:grid; grid-template-columns:1fr 150px; gap:8px; margin-top:8px; align-items:center; }

.os-savebar { position:sticky; bottom:96px; background:var(--os-bg); padding:12px 0 4px; margin-top:4px; }
.os-save { width:100%; border:0; background:var(--os-blue); color:#fff; font-size:18px; font-weight:750;
  padding:16px; border-radius:13px; cursor:pointer; min-height:56px; box-shadow:var(--os-sh); }
.os-save:disabled { background:#c3cddf; cursor:not-allowed; }
.os-stamp { text-align:center; font-size:14px; color:var(--os-muted); margin-top:8px; }

.os-toast { position:fixed; left:15px; right:15px; bottom:104px; background:var(--os-navy); color:#fff;
  border-radius:13px; padding:14px 16px; z-index:70; box-shadow:var(--os-sh); }
.os-toast b { display:block; font-size:16px; }
.os-toast small { display:block; color:#9fb0cd; font-size:14px; }
/* SIGN OFF, INSIDE THE SAVE CONFIRMATION. Full width and a real tap target, because it writes an
   attestation — it must not read as the toast's dismiss affordance. */
.os-signoff { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  margin-top:12px; padding:12px 14px; min-height:var(--os-tap);
  border:1.5px solid rgba(255,255,255,.35); border-radius:11px; background:rgba(255,255,255,.10);
  color:#fff; font:inherit; font-size:16px; font-weight:750; text-align:left; cursor:pointer; }
.os-signoff:hover:not(:disabled) { background:rgba(255,255,255,.18); }
.os-signoff:focus-visible { outline:2px solid #fff; outline-offset:2px; }
.os-signoff:disabled { opacity:.6; cursor:not-allowed; }
.os-signoff-done { margin-top:10px; font-size:15px; font-weight:700; color:#7ee2a8; }
.os-signoff-err  { margin-top:10px; font-size:14px; font-weight:650; color:#ffc9c9; line-height:1.35; }

/* bottom tab bar — the primary nav on a phone; hidden at desktop where the sidebar group takes over */
/* Four tabs since Territory was dropped 2026-07-30 (/companies does that job). Auto-fit rather
   than a fixed count so adding or removing a tab does not require touching this rule again. */
.os-tabbar { position:fixed; left:0; right:0; bottom:0; z-index:60; background:#fff;
  border-top:1px solid var(--os-line); display:grid; grid-auto-flow:column; grid-auto-columns:1fr;
  padding-bottom:env(safe-area-inset-bottom); }
.os-tabbar a { border:0; background:none; padding:9px 2px 8px; display:grid; gap:3px; justify-items:center;
  font-size:14px; font-weight:650; color:var(--os-muted); text-decoration:none; min-height:var(--os-tap);
  align-content:center; text-align:center; line-height:1.15; }
.os-tabbar a.active { color:var(--os-blue); font-weight:750; }
.os-tabbar a:focus-visible { outline:2px solid var(--os-blue); outline-offset:-2px; }

.os-note { background:#fff; border:1px solid var(--os-line); border-left:4px solid var(--os-blue);
  border-radius:0 12px 12px 0; padding:14px 16px; margin:18px 0; box-shadow:var(--os-sh); }
.os-note b { display:block; margin-bottom:3px; font-size:16px; }
.os-note p { margin:0; font-size:15px; color:var(--os-soft); }

/* ===================== TABLET / DESKTOP ADDITIONS ===================== */
@media (min-width:760px) {
  .os h1 { font-size:32px; }
}
@media (min-width:1000px) {
  .os-tabbar { display:none; }          /* sidebar group takes over */
  .os { padding-bottom:0; }
  .os-savebar { position:static; padding:14px 0 0; }
  .os-toast { left:auto; right:26px; bottom:26px; width:340px; }
  .os-split { display:grid; grid-template-columns:minmax(0,460px) minmax(0,1fr); gap:36px; align-items:start; }
}
@media (prefers-reduced-motion:reduce) { .os * { transition:none !important; } }

/* ============================ MY WEEK ============================ */
.os-weekbar { display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.os-weekbar > div { flex:1; }
.os-weekbar b { font-size:18px; font-weight:750; display:block; }
.os-weekbar small { font-size:14px; color:var(--os-muted); }
.os-weekbtn { border:1.5px solid var(--os-line); background:#fff; border-radius:11px;
  min-width:var(--os-tap); min-height:var(--os-tap); font-size:20px; color:var(--os-soft); cursor:pointer; }
.os-weekbtn:disabled { opacity:.35; cursor:not-allowed; }

.os-tallies { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:22px; }
.os-tally { background:#fff; border:1px solid var(--os-line); border-radius:13px; padding:13px 15px; box-shadow:var(--os-sh); }
.os-tally .k { font-size:14px; font-weight:750; letter-spacing:.04em; text-transform:uppercase; color:var(--os-muted); }
.os-tally .v { font-size:26px; font-weight:800; margin:1px 0; letter-spacing:-.02em; }
.os-tally .g { font-size:14px; color:var(--os-muted); }
.os-tally.hit .v { color:var(--os-open); }
.os-tally.miss .v { color:var(--os-red); }

.os-day { margin-bottom:18px; }
.os-dayhead { display:flex; gap:9px; align-items:baseline; padding-bottom:7px; border-bottom:2px solid var(--os-line); }
.os-dayhead b { font-size:18px; font-weight:750; }
.os-dayhead .n { margin-left:auto; font-size:14px; color:var(--os-muted); }

/* ── THE TOUCH ROW ────────────────────────────────────────────────────────────
   THE GAP BETWEEN TWO TOUCHES MUST BEAT EVERY GAP INSIDE ONE. That inversion was the whole
   problem: the largest whitespace on the page sat INSIDE a touch, around the bordered note box,
   so two touches read as one continuous block and the eye had nothing to cut on. The rule now:
     between touches   10px of canvas + a card edge + a 4px left rule   <- structural
     inside a touch    2-5px                                            <- always smaller
   The boundary is a surface change, not a bigger space — whitespace alone loses this argument
   the moment a note runs long.

   The left rule carries the DUE STATE (see .fu-rule-*), so the shape of the week is readable
   down the left margin before a single word is read. */
.os-entry { position:relative; background:#fff; border:1px solid var(--os-line);
  border-left:4px solid var(--os-un-br); border-radius:11px; box-shadow:var(--os-sh);
  padding:11px 13px; margin-bottom:10px; }
.os-entry:last-of-type { margin-bottom:0; }

/* Row 1 — company left, due pill right. The single most-scanned line on the page. */
.os-entry .e1 { display:flex; gap:9px; align-items:center; }
.os-entry .co { font-size:17px; font-weight:700; line-height:1.3; min-width:0;
  overflow-wrap:anywhere; }
.os-entry .e1 .fu-pill { margin-left:auto; flex:none; }

/* Row 2 — ONE muted metadata line replacing the old badge row AND the "Spoke to" line:
   icon + type + time + contact. Nothing was dropped; three rows became one. */
.os-entry .meta { display:flex; gap:6px; align-items:center; flex-wrap:wrap;
  font-size:14px; color:var(--os-muted); margin-top:2px; }
.os-entry .meta .ic { font-size:13px; opacity:.85; }
.os-entry .meta .sep { opacity:.5; }
.os-entry .meta .flag { color:var(--os-rel); font-weight:700; }
.os-entry .meta .flag.cov { color:var(--os-un); }

/* Row 3/4 — summary in primary text, full note in secondary. NO BOX, NO BORDER: the box was
   what made the note look like a separate object and put the page's biggest gap inside a touch.
   pre-wrap keeps the rep's own line breaks. NEVER truncated — no line-clamp, no ellipsis, no
   max-height. A meeting write-up he dictated in full must be readable in full. */
.os-entry .nt { font-size:16px; color:var(--os-ink); margin-top:5px; overflow-wrap:anywhere; }
.os-entry .note { font-size:15px; color:var(--os-soft); margin-top:3px; white-space:pre-wrap;
  overflow-wrap:anywhere; }

/* The whole row is the target. A button, not a div with a handler, so it is keyboard-reachable
   and announced — the rep is on a phone but the manager reviewing a rep is not. */
.os-entry-tap { display:block; width:100%; text-align:left; border:0; background:none;
  padding:0; margin:0; font:inherit; color:inherit; cursor:pointer; }
.os-entry-tap:focus-visible { outline:2px solid var(--os-blue); outline-offset:3px; border-radius:8px; }
@media (hover:hover) {
  .os-entry:hover { box-shadow:0 1px 2px rgba(16,24,40,.06),0 8px 24px rgba(16,24,40,.10); }
}

/* ── DUE-STATUS PILL — SHARED BY MY WEEK AND TODAY ────────────────────────────
   Rendered from ClientPulse.Web.Helpers.FollowUpStatus, which BOTH pages call. Do not add a
   fifth state or a second colour scale here without changing that helper: the CSS and the C#
   are one contract, and a class this file styles but the helper never emits is a state nobody
   can reach.

   COMPUTED AT RENDER, NEVER STORED. The colour changes because the day turned, not because a
   job ran — so there is no stale window and no 3am job whose failure leaves the board lying.

   Green/amber/red/grey come from the canonical status tokens in cp-variables.css rather than
   the os-* palette, so a follow-up looks the same here as everywhere else in ClientPulse. */
.fu-pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:999px;
  font-size:14px; font-weight:750; white-space:nowrap; border:1px solid transparent; }
.fu-pill.fu-future { background:var(--color-success-light); color:var(--color-success); border-color:#a8d8c1; }
.fu-pill.fu-today  { background:var(--color-warning-light); color:var(--color-warning); border-color:#e8c48a; }
.fu-pill.fu-past   { background:var(--color-danger-light);  color:var(--color-danger);  border-color:#eeaaa4; }
.fu-pill.fu-none   { background:var(--os-un-bg);            color:var(--os-un);         border-color:var(--os-un-br); }

/* The left rule takes the pill's colour, so the week's shape is readable down the margin. */
.fu-rule-future { border-left-color:var(--color-success) !important; }
.fu-rule-today  { border-left-color:var(--color-warning) !important; }
.fu-rule-past   { border-left-color:var(--color-danger)  !important; }
.fu-rule-none   { border-left-color:var(--os-un-br)      !important; }

.os-pill { display:inline-flex; padding:4px 10px; border-radius:999px; font-size:14px; font-weight:750;
  background:var(--os-blue-soft); color:var(--os-blue); }
.os-pill.mtg  { background:var(--os-open-bg); color:var(--os-open); }
.os-pill.evt  { background:#f0eafc; color:#5b34c4; }
.os-pill.appt { background:var(--os-rel-bg); color:var(--os-rel); }

/* The recording stamp — CreatedAt, not Date. Answers "was it logged on the day". */
.os-logged { font-size:14px; color:var(--os-muted); padding:9px 2px 0; border-top:1px dashed var(--os-line); }

/* THE GAP. A weekday with no entries is rendered loudly and never collapsed — a blank day nobody
   notices is how weeks of missing records accumulate. Deliberately the most visually assertive
   element on the page. */
.os-gap { border:2px dashed var(--os-rel-br); background:var(--os-rel-bg); border-radius:13px;
  padding:15px; margin-top:12px; }
.os-gap b { display:block; font-size:17px; color:var(--os-rel); }
.os-gap p { margin:3px 0 0; font-size:15px; color:#7a4c10; }

.os-editlink { border:0; background:none; color:var(--os-blue); font-size:14px; font-weight:750;
  cursor:pointer; padding:8px 0 0; min-height:44px; }
.os-editrow { display:grid; gap:8px; margin-top:8px; }
.os-editbtns { display:flex; gap:8px; }
.os-save-sm { flex:1; border:0; background:var(--os-blue); color:#fff; font-size:15px; font-weight:700;
  border-radius:10px; padding:11px; cursor:pointer; min-height:var(--os-tap); }
.os-cancel-sm { flex:1; border:1.5px solid var(--os-line); background:#fff; color:var(--os-soft);
  font-size:15px; font-weight:700; border-radius:10px; padding:11px; cursor:pointer; min-height:var(--os-tap); }

.os-roundup { background:#fff; border:1px solid var(--os-line); border-radius:14px; padding:17px;
  box-shadow:var(--os-sh); margin-top:24px; }
.os-roundup h3 { font-size:19px; font-weight:700; margin:0 0 4px; }
.os-check { display:flex; gap:12px; align-items:center; padding:13px 0; border-bottom:1px solid var(--os-line);
  cursor:pointer; min-height:var(--os-tap); }
.os-check:last-of-type { border-bottom:0; }
.os-check input { width:24px; height:24px; accent-color:var(--os-blue); flex:none; }
.os-check b { font-size:17px; font-weight:650; display:block; }
.os-check small { display:block; font-weight:500; color:var(--os-muted); font-size:14px; }

@media (min-width:760px) {
  .os-tallies { grid-template-columns:repeat(4,1fr); }
  .os-editrow { grid-template-columns:1fr 190px auto; align-items:center; }
}

/* ---- worked-by-someone-else: informational, NOT a wall ----
   Amber, not pink/red. Nothing here blocks anything: the rep may well be taking an inbound call
   from this account, and an accurate record plus a note to the owner beats a barrier that leaves
   only mislabelling or not logging at all. */
.os-heads-up { margin-top:10px; padding:12px 13px; border-radius:11px; font-size:15px;
  background:var(--os-rel-bg); border:1.5px solid var(--os-rel-br); color:#7a4c10; }
.os-heads-up b { display:block; font-size:16px; color:var(--os-rel); margin-bottom:2px; }

/* A missing phone/email is LABELLED, never left silently dead — a greyed button with no
   explanation reads as "you are blocked" when the truth is "we have no number". */
.os-act-missing { flex:1; text-align:center; border:1.5px dashed var(--os-line); background:#f8fafd;
  border-radius:11px; padding:8px 6px; font-size:15px; font-weight:700; color:var(--os-muted);
  min-height:var(--os-tap); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.os-act-missing small { display:block; font-size:14px; font-weight:500; }

/* Coverage — a measurable in its own right, not a demotion. Neutral slate, deliberately NOT the
   red/green of a goal-bearing row, because coverage is tracked and never targeted. */
.os-pill.cov { background:var(--os-un-bg); color:var(--os-un); }

@media (min-width:760px) {
  .os-tallies { grid-template-columns:repeat(5,1fr); }   /* five tallies incl. Coverage */
}

/* ======================= ACCOUNT REVIEW =======================
   Built for VOLUME, not beauty: ~422 rows worked through by two people in one sitting. Every choice
   here serves "do not lose your place" — sticky filter bar, live per-preset counts, in-place saves
   with no navigation, and a row that stays put after it saves. */
.ar-bar { position:sticky; top:0; z-index:20; background:var(--os-bg); padding:10px 0;
  display:flex; gap:8px; flex-wrap:wrap; align-items:center; border-bottom:1px solid var(--os-line); margin-bottom:12px; }
.ar-chip { border:1.5px solid var(--os-line); background:#fff; border-radius:999px; padding:9px 14px;
  font-size:15px; font-weight:700; color:var(--os-soft); cursor:pointer; min-height:44px; }
.ar-chip.on { background:var(--os-blue); border-color:var(--os-blue); color:#fff; }
.ar-chip .ct { opacity:.72; font-weight:650; margin-left:5px; }
.ar-find { flex:1; min-width:190px; padding:11px 13px; border:1.5px solid var(--os-line);
  border-radius:11px; font-size:16px; min-height:44px; }
.ar-find:focus { outline:none; border-color:var(--os-blue); box-shadow:0 0 0 4px var(--os-blue-soft); }
.ar-count { font-size:14px; color:var(--os-muted); margin-bottom:8px; }

.ar-row { background:#fff; border:1px solid var(--os-line); border-radius:12px; padding:12px 14px;
  margin-bottom:8px; display:grid; gap:10px; }
.ar-row.saved { border-color:var(--os-open-br); background:var(--os-open-bg); }
.ar-name b { font-size:17px; font-weight:700; }
.ar-sub { font-size:14px; color:var(--os-muted); margin-top:2px; }
/* The preserved spreadsheet string — what the source said, so the reviewer can decide from it. */
.ar-note { font-size:14px; color:var(--os-soft); margin-top:5px; padding:7px 9px;
  background:#f8fafd; border:1px solid var(--os-line); border-radius:8px; }
.ar-lab { display:block; font-size:14px; font-weight:700; color:var(--os-muted); margin-bottom:3px; }
.ar-sel { width:100%; padding:11px; border:1.5px solid var(--os-line); border-radius:10px;
  background:#fff; font-size:16px; min-height:var(--os-tap); }
.ar-sel:focus { outline:none; border-color:var(--os-blue); box-shadow:0 0 0 4px var(--os-blue-soft); }
.ar-ok { font-size:14px; font-weight:750; color:var(--os-open); min-height:18px; }

/* Duplicates: side by side, archive only. Never a merge — archiving the wrong row is recoverable. */
.ar-dupe { display:grid; gap:10px; background:#fff; border:1.5px solid var(--os-rel-br);
  border-radius:12px; padding:12px; margin-bottom:10px; }
.ar-dupe-side { border:1px solid var(--os-line); border-radius:10px; padding:11px; }
.ar-dupe-side.archived { opacity:.55; background:#f8fafd; }
.ar-dupe-side b { font-size:16px; }
.ar-btn { margin-top:9px; border:1.5px solid var(--os-line); background:#fff; border-radius:10px;
  padding:9px 13px; font-size:15px; font-weight:700; cursor:pointer; min-height:44px; }
.ar-btn.danger { border-color:var(--os-own-br); color:var(--os-own); }

@media (min-width:900px) {
  .ar-row { grid-template-columns: minmax(0,1fr) 230px 230px 60px; align-items:start; }
  .ar-dupe { grid-template-columns: 1fr 1fr; }
}

/* Collapsed disclosure — keeps optional depth off the fifteen-second path. */
.os-disclose { border:0; background:none; color:var(--os-blue); font-size:15px; font-weight:750;
  cursor:pointer; padding:10px 0; min-height:var(--os-tap); text-align:left; }
/* Auto-growing notes. field-sizing:content is the modern path; min-height keeps it usable where
   that is unsupported, so the box never collapses to one line on an older mobile browser. */
/* Auto-growing text. NO max-height on purpose: three to five paragraphs after a long meeting must
   fit without fighting the box. field-sizing:content does the growing in Chromium/Safari;
   autogrow.js covers Firefox, where field-sizing is not yet supported. */
.os-grow { field-sizing:content; height:auto; resize:vertical; line-height:1.45; padding:12px 13px;
  overflow-y:hidden; }
/* Notes wants a visible starting box; the one-line outcome should start at one line and grow. */
/* Keyed to the ROWS ACTUALLY SET on the textareas — these selectors are attribute-exact, so
   changing rows without changing them here silently drops the min-height. Raised for dictation:
   a spoken paragraph should not arrive into a box the size of one line. */
.os-field .os-grow[rows="4"] { min-height:124px; }
.os-field .os-grow[rows="2"] { min-height:76px; }
/* The My Week note is now .os-entry .note — plain secondary text, no box. The bordered block
   that used to live here is gone on purpose: its padding was the largest gap on the page and it
   sat INSIDE a touch, which is what made consecutive entries read as one. */

/* Odometer soft-validation notice — amber, informational. Never styled as an error: the save
   always proceeds, and a red block would read as a refusal. */
.os-odo-warn { margin-top:7px; padding:9px 11px; border-radius:9px; font-size:14px;
  background:var(--os-rel-bg); border:1.5px solid var(--os-rel-br); color:#7a4c10; }
/* LOUDER THAN THE WARNING BESIDE IT, because this one actually holds the save. The warning is
   amber and advisory; this is red and blocking, and the difference has to be visible at a glance. */
.os-odo-err { margin-top:7px; padding:9px 11px; border-radius:9px; font-size:14px; font-weight:650;
  background:#fdeaea; border:1.5px solid #f2b8b8; color:var(--os-red); }
.os-odo-hint { margin-top:6px; font-size:14px; color:var(--os-muted); }
.os-exp { display:grid; grid-template-columns:1fr 1fr; gap:8px; }

/* ── Rep selector ────────────────────────────────────────────────────────────────────────────
   Whose data is on screen. Managers only; a rep never sees this.
   Mobile-first like everything else here: full width and 48px tall at 390px, because a manager
   checking numbers before the shop opens is doing it on a phone. */
.rep-selector { display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  margin:0 0 14px; padding:10px 12px; background:#f4f7fb;
  border:1px solid var(--os-line); border-left:4px solid #2563eb; border-radius:8px; }
.rep-selector-label { font-size:15px; font-weight:600; color:#3d4753; letter-spacing:.01em; }
.rep-selector-select { flex:1 1 190px; min-height:48px; font-size:17px; padding:8px 12px;
  border:1px solid #b9c2cf; border-radius:8px; background:#fff; color:#111827; }
/* The read-only notice must not be mistaken for a disabled control — it is amber, not grey. */
.rep-selector-ro { flex:1 1 100%; font-size:15px; font-weight:600; color:#92400e; }

@media (min-width:1000px) {
  .rep-selector { padding:8px 14px; }
  .rep-selector-select { flex:0 0 260px; }
  .rep-selector-ro { flex:0 1 auto; }
}

/* The record a scorecard drill row linked to. Loud enough to find in a 40-entry week without
   looking like an error state — this is "here it is", not "something is wrong". */
.os-entry-linked { background:#fffbeb; border-left:4px solid #d97706;
  box-shadow:0 0 0 2px rgba(217,119,6,.18); scroll-margin-top:80px; }

/* ── DECLARED LIST (My week) ──────────────────────────────────────────────────
   Sits above the tallies because it is the only forward-looking thing on that page. Not-yet
   contacted reads plainly; contacted recedes — the point of the list is what is still outstanding,
   so the done ones must not compete for attention with the ones that still need a call. */
.os-declsec { background:#fff; border:1px solid var(--os-line); border-radius:14px;
  padding:14px 16px; margin:0 0 14px; box-shadow:var(--os-sh); }
.os-declhead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.os-declhead h2 { margin:0; font-size:19px; font-weight:800; }
.os-declcount { margin-left:auto; font-size:16px; font-weight:800; color:var(--os-blue); }
.os-declcount.done { color:var(--os-open); }
.os-decllist { list-style:none; margin:0; padding:0; }
/* TWO TAP TARGETS IN ONE BAND. The <li> is now a container only — it holds no padding and no
   handler; the row button carries the padding so that its own tappable area is the full band
   rather than a strip inside it. Both children clear --os-tap (48px) independently. */
.os-decllist li { display:flex; align-items:center; gap:4px; padding:0;
  border-top:1px solid var(--os-line); font-size:17px; min-height:var(--os-tap); }
.os-decllist li:first-child { border-top:0; }
/* PRIMARY: log a touch. Takes the whole row minus the open-account control. */
.os-declrow { flex:1; min-width:0; display:flex; align-items:center; gap:11px;
  padding:11px 2px; min-height:var(--os-tap); font:inherit; font-size:17px; text-align:left;
  border:0; background:none; color:inherit; cursor:pointer; }
.os-declrow:focus-visible { outline:2px solid var(--os-blue); outline-offset:-2px; border-radius:8px; }
/* SECONDARY: open the account. Square, so the chevron is a 48px target and not a 14px glyph. */
.os-declopen { flex:none; display:flex; align-items:center; justify-content:center;
  min-width:var(--os-tap); min-height:var(--os-tap); border-radius:9px;
  color:var(--os-blue); font-size:22px; font-weight:800; text-decoration:none; }
.os-declopen:hover, .os-declopen:focus-visible { background:var(--os-blue-soft); text-decoration:none; }
.os-decllist .mk { flex:none; width:26px; text-align:center; font-size:19px; font-weight:800;
  color:var(--os-muted); }
.os-decllist li.hit .mk { color:var(--os-open); }
.os-decllist .nm { font-weight:700; flex:1; min-width:0; }
.os-decllist li.hit .nm { font-weight:500; color:var(--os-soft); }
.os-decllist .st { font-size:14px; color:var(--os-muted); white-space:nowrap; }
.os-declnote { margin:10px 0 0; font-size:14px; color:var(--os-muted); }
.os-declsec.empty b { display:block; font-size:17px; font-weight:750; margin-bottom:4px; }
.os-declsec.empty p { margin:0; font-size:15px; color:var(--os-soft); }

/* ON-BEHALF BANNER (Log a touch). Loud on purpose: this is a claim that the record about to be
   written belongs to somebody other than the person typing. */
.os-onbehalf { background:var(--os-own-bg); border:1.5px solid var(--os-own-br); border-left:5px solid var(--os-own);
  border-radius:12px; padding:12px 14px; margin:0 0 14px; }
.os-onbehalf b { display:block; font-size:16.5px; font-weight:800; color:var(--os-own); }
.os-onbehalf span { display:block; font-size:14px; color:var(--os-soft); margin-top:3px; }

/* DICTATION. The mic sits INSIDE the field's top-right rather than beside the label: it belongs to
   the box, and on a 390px screen a button in the label row competes with the label. */
.os-dictate { position:relative; }
.os-dictate textarea { padding-right:56px; }
.os-mic { position:absolute; top:7px; right:7px; width:42px; height:42px; border-radius:11px;
  border:1.5px solid var(--os-line); background:#fff; font-size:19px; line-height:1; cursor:pointer;
  display:grid; place-items:center; }
.os-mic:focus-visible { outline:3px solid var(--os-blue); outline-offset:2px; }
.os-mic.listening { background:var(--os-red); border-color:var(--os-red); color:#fff;
  animation:os-pulse 1.3s ease-in-out infinite; }
@keyframes os-pulse { 0%,100%{opacity:1} 50%{opacity:.55} }
@media(prefers-reduced-motion:reduce){ .os-mic.listening{animation:none} }

/* Backdating notice — quiet, but unmissable once the date is not today. */
.os-backdate { margin:7px 0 0; font-size:14px; color:var(--os-rel); font-weight:650; }

/* Shown only where the Web Speech button is not available — i.e. on the phone. */
.os-dictatehint { margin:7px 0 0; font-size:14px; color:var(--os-muted); }

/* ── THE CONCLUDE GATE ────────────────────────────────────────────────────────
   Rendered INSTEAD of the page. Deliberately plain and unhurried: it is not an error, it is the
   last thirty seconds of yesterday's work. */
.gate { max-width:640px; margin:0 auto; }
.gate-head { background:var(--os-navy); color:#fff; border-radius:14px; padding:18px 18px 16px; margin-bottom:14px; }
.gate-head .k { font-size:14px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:#79a4ff; }
.gate-head h1 { margin:5px 0 6px; font-size:25px; font-weight:800; color:#fff; }
.gate-head p { margin:0; font-size:15.5px; color:#b6c3d8; line-height:1.5; }
.gate-head b { color:#fff; }

.gate-items { background:#fff; border:1px solid var(--os-line); border-radius:14px; overflow:hidden; box-shadow:var(--os-sh); }
.gi { display:grid; grid-template-columns:30px 1fr; gap:12px; padding:14px 15px; border-bottom:1px solid var(--os-line); }
.gi:last-child { border-bottom:0; }
.gi .mk { width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:800; border:2px solid var(--os-line); color:var(--os-muted); }
.gi.ok .mk { background:var(--os-open); border-color:var(--os-open); color:#fff; }
.gi.dec .mk { background:var(--os-un-bg); border-color:var(--os-un-br); color:var(--os-un); }
.gi.open .mk { background:var(--os-rel-bg); border-color:var(--os-rel-br); color:var(--os-rel); }
.gi .bd b { display:block; font-size:16.5px; font-weight:700; }
.gi .bd p { margin:2px 0 0; font-size:14px; color:var(--os-muted); }
.gi .acts { grid-column:2; display:flex; gap:9px; flex-wrap:wrap; margin-top:11px; }

.gb { border-radius:11px; font-size:15px; font-weight:750; padding:11px 15px; cursor:pointer;
  min-height:var(--os-tap); border:1.5px solid var(--os-line); background:#fff; color:var(--os-ink); }
.gb.solve { background:var(--os-blue); border-color:var(--os-blue); color:#fff; }
/* SAME WEIGHT AS "Add it" ON PURPOSE. The honest answer must not look like the lesser one. */
.gb.dec { background:#fff; border-color:var(--os-blue); color:var(--os-blue); }
.gb.why { background:var(--os-un-bg); border-color:var(--os-un-br); font-size:14.5px; }
.gb.cancel { background:none; border:0; color:var(--os-muted); font-weight:650; }
.gb.go { width:100%; background:var(--os-open); border-color:var(--os-open); color:#fff; font-size:17px; }
.gb.go:disabled { background:#c3cddf; border-color:#c3cddf; cursor:not-allowed; }

/* THE INLINE READING BOX. Same slot and same background as the declare panel below, because they
   are the two ways to answer one question and neither should look like the "real" one. */
.gate-entry { background:#f8fafd; border-top:1px solid var(--os-line); padding:14px 15px; }
.gate-entry label { display:block; font-size:14.5px; font-weight:650; color:var(--os-soft); margin-bottom:8px; }
.gate-entry .ge-in { width:100%; box-sizing:border-box; border:1.5px solid var(--os-line); border-radius:10px;
  padding:12px 13px; background:#fff; font-size:19px; font-weight:700; min-height:var(--os-tap); }
.gate-entry .ge-in:focus { outline:2px solid var(--os-blue); outline-offset:1px; border-color:var(--os-blue); }
.gate-entry .ge-acts { display:flex; align-items:center; gap:9px; margin-top:10px; }
.gate-entry .ge-acts .gb.go { width:auto; flex:1; min-height:var(--os-tap); }
.gate-entry .ge-acts .gb.cancel { min-height:var(--os-tap); }
.gate-entry .err { font-size:15px; color:var(--os-red); font-weight:650; margin:10px 0 0; }

.gate-why { background:#f8fafd; border-top:1px solid var(--os-line); padding:14px 15px; }
.gate-why p { margin:0 0 10px; font-size:14.5px; color:var(--os-soft); }
.gate-why .whys { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.gate-foot { margin-top:14px; }
.gate-foot .why { font-size:15px; color:var(--os-rel); font-weight:650; margin:0 0 10px; }
.gate-foot .note { font-size:14px; color:var(--os-muted); margin:9px 0 0; text-align:center; }
.gate-foot .err { font-size:15px; color:var(--os-red); font-weight:650; margin:9px 0 0; }

/* The same notice on Log a touch, where saving is narrowed rather than blocked. */
.gate-log { background:var(--os-rel-bg); border:1.5px solid var(--os-rel-br); border-left:5px solid var(--os-rel);
  border-radius:12px; padding:13px 15px; margin:0 0 16px; }
.gate-log b { display:block; font-size:16.5px; font-weight:800; color:var(--os-rel); }
.gate-log p { margin:4px 0 0; font-size:14.5px; color:#7a4c10; line-height:1.5; }
.gate-log a { color:var(--os-rel); font-weight:750; }
.os-saveerr { margin:0 0 10px; font-size:15px; font-weight:650; color:var(--os-red); }

/* DO NOT CONTACT — an instruction, not context. Loud enough that it cannot be scrolled past on the
   screen where the next action is to dial. */
.os-donotcontact { margin-top:10px; padding:11px 13px; border-radius:11px;
  background:#fdeceb; border:1.5px solid #f3b4ae; border-left:5px solid var(--os-red); }
.os-donotcontact b { display:block; font-size:16.5px; font-weight:800; color:var(--os-red);
  text-transform:uppercase; letter-spacing:.04em; }
.os-donotcontact span { display:block; font-size:14.5px; color:#7a2e28; margin-top:4px; line-height:1.5; }

/* ── END-OF-WEEK ROUND-UP: MEETING CHECKS ───────────────────────────────────────────────────
   Three states, and the middle one carries the design. Neutral while the week runs says "not
   yet"; red only once the week has closed says "did not happen". A blank said neither, which is
   how a skipped 1-on-1 and an unrecorded one looked identical. */
.os-meetcheck { border:1px solid #e2e8f0; border-left:5px solid #cbd5e1; border-radius:10px;
                padding:12px 14px; margin-bottom:12px; background:#fff; }
.os-meetcheck.is-done   { border-left-color:#0f7a52; background:#f4fbf7; }
.os-meetcheck.is-notyet { border-left-color:#cbd5e1; }
.os-meetcheck.is-missed { border-left-color:#c0392b; background:#fdf5f4; }

.os-meetcheck .os-check { display:flex; align-items:flex-start; gap:12px; margin:0; }
.os-meetstate { margin-left:auto; font-size:15px; font-weight:700; white-space:nowrap;
                padding:3px 10px; border-radius:999px; align-self:center; }
.is-done   .os-meetstate { color:#0f7a52; background:#dcf3e8; }
.is-notyet .os-meetstate { color:#64748b; background:#f1f5f9; }
.is-missed .os-meetstate { color:#a5281c; background:#fbe2df; }

.os-meetdetail { margin:12px 0 0; padding-top:12px; border-top:1px dashed #e2e8f0; }
.os-meetrow { display:flex; flex-wrap:wrap; gap:14px; }
/* Fixed-ish but shrinkable: two side by side on a phone, never a squeezed date field. */
.os-meetrow > label { display:flex; flex-direction:column; gap:4px; flex:1 1 150px; min-width:0; }
.os-meetrow > label > span { font-size:16px; font-weight:600; color:#334155; }
.os-meetrow input { min-height:44px; font-size:18px; }

/* WARN, DO NOT BLOCK — a typo is likelier than a time machine. */
.os-meetwarn { margin:10px 0 0; font-size:16px; color:#8a5a00; background:#fff7e6;
               border:1px solid #f2d98a; border-radius:8px; padding:8px 10px; }

.os-meetnotes { display:flex; flex-direction:column; gap:4px; margin-top:12px; }
.os-meetnotes > span { font-size:16px; font-weight:600; color:#334155; }
.os-meetnotes em { font-style:normal; font-weight:400; color:#64748b; }
.os-meetnotes textarea { font-size:18px; }

.os-recentnotes { margin-top:16px; border-top:1px solid #e2e8f0; padding-top:12px; }
.os-recentnotes > summary { cursor:pointer; font-size:17px; font-weight:700; color:#334155;
                            min-height:44px; display:flex; align-items:center; }
.os-recentnote { border-left:3px solid #e2e8f0; padding:2px 0 2px 12px; margin:10px 0; }
.os-recentnote__hd { display:flex; gap:10px; flex-wrap:wrap; align-items:baseline;
                     font-size:16px; color:#475569; }
.os-recentnote__hd > b { color:#0f172a; }
.os-recentnote > p { margin:4px 0 0; font-size:17px; white-space:pre-wrap; }

/* ══ RECORD PANEL — SHARED BY MY WEEK AND TODAY ═══════════════════════════════
   Tapping a row opens the record it summarises. A sheet from the bottom rather than a route,
   because there is no per-communication or per-task page to navigate to and inventing two of
   them to satisfy a tap is a much larger change than the tap is worth — and because losing the
   scroll position in a 40-entry week to read one note is its own small punishment.

   The links OUT of the panel are real routes (/companies/{id}), so the record is a waypoint,
   never a dead end. */
.os-sheet-bg { position:fixed; inset:0; background:rgba(15,23,41,.45); z-index:60;
  animation:os-fade .12s ease-out; }
.os-sheet { position:fixed; left:0; right:0; bottom:0; z-index:61; background:#fff;
  border-radius:18px 18px 0 0; box-shadow:0 -8px 40px rgba(16,24,40,.22);
  max-height:88vh; overflow-y:auto; padding:0 0 28px;
  animation:os-rise .16s cubic-bezier(.2,.8,.3,1); }
@keyframes os-fade { from { opacity:0 } to { opacity:1 } }
@keyframes os-rise { from { transform:translateY(14px); opacity:.6 } to { transform:none; opacity:1 } }
@media (prefers-reduced-motion:reduce) {
  .os-sheet, .os-sheet-bg { animation:none; }
}

/* The grab handle is decorative; the CLOSE BUTTON is the accessible control and is never
   removed in favour of "tap outside", which a keyboard cannot do. */
.os-sheet-grip { width:38px; height:4px; border-radius:999px; background:var(--os-un-br);
  margin:9px auto 0; }
.os-sheet-hd { display:flex; gap:10px; align-items:flex-start; padding:13px 17px 11px;
  border-bottom:1px solid var(--os-line); position:sticky; top:0; background:#fff; z-index:1; }
.os-sheet-hd .t { min-width:0; flex:1; }
.os-sheet-hd .t b { display:block; font-size:19px; font-weight:750; line-height:1.3;
  overflow-wrap:anywhere; }
.os-sheet-hd .t span { display:block; font-size:14px; color:var(--os-muted); margin-top:2px; }
.os-sheet-x { flex:none; border:0; background:var(--os-un-bg); color:var(--os-soft);
  width:40px; height:40px; border-radius:999px; font-size:20px; line-height:1; cursor:pointer; }
.os-sheet-x:focus-visible { outline:2px solid var(--os-blue); outline-offset:2px; }
.os-sheet-bd { padding:15px 17px 0; }

/* One fact per row, label above value — reads on a 390px screen without a table. */
.os-kv { padding:11px 0; border-bottom:1px solid var(--os-line); }
.os-kv:last-child { border-bottom:0; }
.os-kv > span { display:block; font-size:14px; color:var(--os-muted); font-weight:650; }
.os-kv > div { font-size:17px; color:var(--os-ink); margin-top:2px; white-space:pre-wrap;
  overflow-wrap:anywhere; }
.os-kv .fu-pill { margin-top:4px; }

/* A real link to a real route. Absent, not disabled, when there is no company — a dead control
   asks the rep to wonder what he did wrong. */
.os-sheet-link { display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:14px; padding:14px 15px; min-height:var(--os-tap);
  background:var(--os-blue-soft); color:var(--os-blue); border-radius:11px;
  font-size:17px; font-weight:750; text-decoration:none; }
.os-sheet-link:hover { text-decoration:none; }
.os-sheet-acts { display:flex; gap:9px; margin-top:14px; flex-wrap:wrap; }
.os-sheet-acts .os-save-sm, .os-sheet-acts .os-cancel-sm { min-height:var(--os-tap); }