/* ============================================================================
   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); }

/* 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; }

.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; }

/* 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); }

.os-entry { padding:13px 2px; border-bottom:1px solid var(--os-line); }
.os-entry:last-of-type { border-bottom:0; }
.os-entry .e1 { display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:5px; }
.os-entry .tm { font-size:14px; color:var(--os-muted); margin-left:auto; }
.os-entry .co { font-size:17px; font-weight:700; }
.os-entry .nt { font-size:16px; color:var(--os-soft); margin-top:2px; }
.os-entry .who { font-size:14px; color:var(--os-muted); margin-top:2px; }
.os-entry .nx { font-size:14px; color:var(--os-rel); font-weight:700; margin-top:4px; }

.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 notes block in My Week — distinct from the one-line outcome above it. */
.os-entry-notes { font-size:15px; color:var(--os-soft); margin-top:6px; padding:9px 11px;
  background:#f8fafd; border:1px solid var(--os-line); border-radius:9px; white-space:pre-wrap; }

/* 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; }
.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; }
.os-decllist li { display:flex; align-items:center; gap:11px; padding:11px 2px;
  border-top:1px solid var(--os-line); font-size:17px; min-height:var(--os-tap); }
.os-decllist li:first-child { border-top:0; }
.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; }

.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); }