/* ============================================================
   activity-log.css — Bundle A, the Activity module

   Load AFTER rail-canvas.css so it can lean on --fmn-* and reuse
   .fmn-btn / .fmn-btn.is-primary rather than restyling buttons.

   THE ONE RULE, inherited: yellow marks AI. In this module the only
   yellow surfaces are the parse confirm row and the generated report
   panel, because those two are AI OUTPUT awaiting a human. Every
   button here (Log activity, Save, Generate report, Export) is chrome
   or plain, because a button is an action the rep takes, not
   something the AI produced.

   iPad portrait 834px is the primary target: 44px tap targets, one
   column, 900px max so it stays a readable measure on a desktop.
   ============================================================ */

/* ---------- A-2: the solo column ----------
   Set by shell-boot.js whenever the open canvas is a RAIL destination flagged
   solo:true. The chat column is HIDDEN, never unmounted: its transcript, scroll
   position and dock state are all still there when you leave the tab.

   This file is last in the CSS chain, so these win over rail-canvas.css without
   an !important. Scoped to .is-solo, so every other view is untouched. */

.fmn-shell.is-solo .fmn-chat { display: none; }
.fmn-shell.is-solo .fmn-canvas { flex: 1 1 100%; min-width: 0; }

/* Under 1000px rail-canvas.css turns .fmn-chat into a fixed bottom sheet at
   62vh. On iPad that sheet would sit directly on top of the footer action bar,
   so hiding it is what makes the bar reachable at all on the primary device. */
@media (max-width: 1000px) {
  .fmn-shell.is-solo .fmn-chat { display: none; }
}

.alog-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: var(--space-4) var(--space-4) var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  font-family: var(--font-sans);
  color: var(--text-primary);
}

/* The classic (?classic=1) host has no canvas chrome around it. */
.alog-classic { padding: var(--space-4) 0; }

/* ---------- shared input ---------- */

.alog-input {
  width: 100%;
  min-height: var(--fmn-tap);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-input);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--text-primary);
}
.alog-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px var(--fmn-chrome-soft);
}
.alog-textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
.alog-textarea-sm { min-height: 68px; resize: vertical; line-height: 1.5; }

/* ---------- entry box ---------- */

/* A-2: the composer is the hero. It is the everyday action on this tab, so it
   gets the weight, sits at the top, and never scrolls away. Chrome only — the
   yellow belongs to the parse result, not to the box you type in. */
.alog-entry {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--bg-elev-1);
}
.alog-entry-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-primary);
}
.alog-entry-sub {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  color: var(--text-secondary);
}
.alog-entry .alog-textarea {
  min-height: 116px;
  font-size: var(--text-16);
  line-height: 1.55;
  padding: var(--space-3) var(--space-3_5);
}
.alog-entry-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.alog-entry-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
}

/* ---------- the confirm row: AI OUTPUT, so it is yellow-marked ---------- */

.alog-confirm {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--fmn-ai-line);
  border-left: 3px solid var(--fmn-ai);
  border-radius: var(--radius-lg);
  background: var(--fmn-ai-wash);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* An in-place card edit is the same surface, re-opened. */
.alog-confirm.is-edit { margin: 0 0 var(--space-3); }

.alog-confirm-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.alog-ai-dot {
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--fmn-ai);
  flex: none;
}
.alog-confirm-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--fmn-ai-ink);
}
.alog-conf {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--fmn-ai-ink);
}

.alog-confirm-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.alog-field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.alog-field-label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.alog-confirm-actions {
  display: flex;
  gap: var(--space-2_5);
  flex-wrap: wrap;
}

/* ---------- A-2: footer action bar ----------
   The range machinery and the weekly outputs, grouped at the bottom. This is a
   once-a-week job; it does not deserve the top of the page. Separated from the
   cards by a rule so it reads as a different kind of thing. */

.alog-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-default);
}
.alog-footer-filters {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.alog-footer-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  flex-wrap: wrap;
}
.alog-presets { display: flex; gap: var(--space-2); }
.alog-chip {
  height: var(--fmn-tap);
  padding: 0 var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-elev-1);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
}
.alog-chip.is-on {
  background: var(--fmn-chrome);
  border-color: var(--fmn-chrome);
  color: #fff;
}
.alog-range { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.alog-date { width: auto; min-width: 150px; }
.alog-scope { width: auto; min-width: 160px; }
.alog-range-sep { font-size: var(--text-sm); color: var(--text-tertiary); }

/* The counter reads as a label on the buttons beside it, not a floated stat —
   A-2 moved it inside .alog-footer-actions, so it no longer needs margin-left:auto. */
.alog-count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* ---------- the report panel: AI OUTPUT, yellow-marked ---------- */

.alog-report {
  padding: var(--space-4);
  border: 1px solid var(--fmn-ai-line);
  border-left: 3px solid var(--fmn-ai);
  border-radius: var(--radius-lg);
  background: var(--fmn-ai-wash);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.alog-report-head { display: flex; align-items: center; gap: var(--space-2); }
.alog-report-text {
  min-height: 340px;
  resize: vertical;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  background: var(--bg-elev-1);
}
.alog-report-note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--fmn-ai-ink);
}

/* ---------- day groups + cards ---------- */

.alog-list { display: flex; flex-direction: column; gap: var(--space-5); }
.alog-day { display: flex; flex-direction: column; gap: var(--space-2_5); }
.alog-day-head {
  display: flex;
  align-items: center;
  gap: var(--space-2_5);
  margin: 0;
  padding-bottom: var(--space-1_5);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.alog-day-count {
  min-width: 22px;
  padding: 0 var(--space-1_5);
  border-radius: var(--radius-pill);
  background: var(--color-paper-200);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 18px;
  text-align: center;
  color: var(--text-secondary);
}

.alog-card {
  padding: var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.alog-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.alog-card-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alog-card-account {
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
}
.alog-card-contact { font-size: var(--text-sm); color: var(--text-secondary); }
.alog-card-pills { display: flex; gap: var(--space-1_5); flex-wrap: wrap; }

.alog-pill {
  padding: 3px var(--space-2_5);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.alog-pill-type {
  background: var(--color-paper-100);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}
/* Status colour carries meaning, so it is worth the extra rules: a rep
   scanning a week should see Won and No Response without reading. */
.alog-pill-status { background: var(--color-paper-100); color: var(--text-secondary); border: 1px solid var(--border-subtle); }
.alog-pill-status[data-status="Won"]            { background: var(--color-sage-100);  color: var(--color-sage-800);  border-color: var(--color-sage-200); }
.alog-pill-status[data-status="Lost"]           { background: var(--color-rose-100);  color: var(--color-rose-800);  border-color: var(--color-rose-200); }
.alog-pill-status[data-status="No Response"]    { background: var(--color-sand-100);  color: var(--color-sand-900);  border-color: var(--color-sand-300); }
.alog-pill-status[data-status="Quotation Sent"] { background: var(--color-sky-100);   color: var(--color-sky-800);   border-color: var(--color-sky-200); }
.alog-pill-status[data-status="Negotiation"]    { background: var(--color-peach-100); color: var(--color-peach-800); border-color: var(--color-peach-200); }
.alog-pill-status[data-status="In Progress"]    { background: var(--color-lilac-100); color: var(--color-lilac-800); border-color: var(--color-lilac-200); }

.alog-card-comments {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.55;
  color: var(--text-primary);
}
.alog-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.alog-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}
.alog-next { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); }
.alog-next.is-none { font-weight: 400; color: var(--text-tertiary); }
.alog-card-actions { display: flex; gap: var(--space-1); }
.alog-linkbtn {
  min-height: var(--fmn-tap);
  padding: 0 var(--space-2_5);
  border: none;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-link);
  cursor: pointer;
}
.alog-linkbtn:hover { color: var(--text-link-hover); text-decoration: underline; }

/* ---------- empty / error ---------- */

.alog-empty {
  padding: var(--space-6) var(--space-4);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-lg);
  text-align: center;
  font-size: var(--text-base);
  color: var(--text-tertiary);
}
.alog-empty-bad {
  border-color: var(--color-rose-200);
  background: var(--color-rose-50);
  color: var(--color-rose-800);
}

/* ---------- undo toast ---------- */

.alog-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 1200;                    /* --z-toast tier, above every modal */
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: min(560px, calc(100vw - 32px));
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--fmn-chrome);
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
}
.alog-toast-action {
  min-height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-md);
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--fmn-ai);
  cursor: pointer;
  white-space: nowrap;
}

/* ---------- iPad portrait and narrower ---------- */

/* ---------- A-3: the multi-entry confirm panel ----------
   One note can name five companies, so the parse comes back as a panel of rows
   rather than a single row. The YELLOW IS THE PANEL'S, once, at the top: it says
   "this batch came from the AI". The rows inside are ordinary elevated surfaces,
   because six yellow rows would read as six warnings instead of one parse. The
   edit row below is de-yellowed for the same reason — editing a saved record is
   not AI output. */

.alog-panel {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--fmn-ai-line);
  border-left: 3px solid var(--fmn-ai);
  border-radius: var(--radius-lg);
  background: var(--fmn-ai-wash);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* A failed save turns the panel's edge, so a partial failure is visible without
   reading every row. */
.alog-panel.is-failed { border-left-color: var(--color-rose-400); }

.alog-panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.alog-panel.is-failed .alog-confirm-title { color: var(--color-rose-800); }

.alog-panel-rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* An in-place card edit is no longer an AI surface — it edits a saved record.
   Overrides the .alog-confirm chrome above rather than duplicating it. */
.alog-confirm.is-edit {
  border-color: var(--border-default);
  border-left-color: var(--border-default);
  background: var(--bg-elev-1);
}
.alog-confirm.is-edit .alog-confirm-title { color: var(--text-primary); }

/* ---------- a single parsed row ---------- */

.alog-prow {
  padding: var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-elev-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-2_5);
  min-width: 0;
}
.alog-prow.is-failed {
  border-color: var(--color-rose-200);
  background: var(--color-rose-50);
}

.alog-prow-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
/* The row number is the rep's handle on "the third one is wrong". */
.alog-prow-n {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: var(--radius-pill);
  background: var(--fmn-chrome-soft);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
}
.alog-prow-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
}
.alog-prow-sep { margin: 0 var(--space-1_5); color: var(--text-tertiary); font-weight: 400; }
.alog-prow .alog-conf { margin-left: auto; }

.alog-prow-x {
  flex: none;
  width: var(--fmn-tap);
  height: var(--fmn-tap);
  margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-2) * -1) 0;
  border: 0;
  border-radius: var(--radius-md);
  background: none;
  font-size: var(--text-xl);
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
}
.alog-prow-x:hover { background: var(--fmn-chrome-soft); color: var(--color-rose-600); }
.alog-prow-x:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--fmn-chrome-soft);
  color: var(--color-rose-600);
}
/* No auto margin here: .alog-conf already takes it when confidence is shown, and
   two auto margins would push the × off the row's right edge. */
.alog-prow-head > .alog-prow-x:nth-child(3) { margin-left: auto; }

.alog-prow-err {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-rose-800);
}

/* Three columns at canvas width, because a row is scanned left-to-right rather
   than read. It collapses to two at iPad and one on a phone; the row NEVER
   scrolls sideways. */
.alog-prow-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2_5);
}

@media (max-width: 834px) {
  /* A-3: rows stack rather than squeeze. Two columns still fits an iPad in
     portrait; anything narrower goes to one. No horizontal overflow at any
     width — a row that scrolls sideways hides the field the rep needs. */
  .alog-prow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alog-panel { padding: var(--space-3_5); }
  .alog-prow { padding: var(--space-3); }
  .alog-panel .alog-confirm-actions .fmn-btn { flex: 1 1 auto; }
}

@media (max-width: 560px) {
  .alog-prow-grid { grid-template-columns: 1fr; }
}

/* ---------- A-4 / A-3 addendum: the "Confirm date" advisory ----------
   Sits inside the field label, so it points at exactly the field it doubts and
   costs the row no extra vertical space. Yellow because the guess is the AI's.
   text-transform is reset: the label above it is uppercase chrome, but this is a
   short sentence the rep has to read. */

.alog-flag {
  display: inline-block;
  margin-left: var(--space-1_5);
  padding: 1px var(--space-1_5);
  border: 1px solid var(--fmn-ai-line);
  border-radius: var(--radius-sm);
  background: var(--fmn-ai-wash);
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fmn-ai-ink);
  cursor: help;
  vertical-align: baseline;
}

/* ---------- A-4: the original note, read-only, on the card ----------
   NOT yellow. These are the rep's own words, not AI output — the whole point is
   that this is the thing the interpretation above gets checked against. Reads as
   a quiet footnote until opened. */

.alog-orig {
  margin-top: var(--space-1);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--space-2);
}
.alog-orig-sum {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  min-height: var(--space-6);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  cursor: pointer;
  list-style: none;
}
.alog-orig-sum::-webkit-details-marker { display: none; }
.alog-orig-sum::before {
  content: '›';
  display: inline-block;
  font-size: var(--text-base);
  line-height: 1;
  transition: transform 120ms ease;
}
.alog-orig[open] > .alog-orig-sum::before { transform: rotate(90deg); }
.alog-orig-sum:hover { color: var(--text-secondary); }
.alog-orig-sum:focus-visible {
  outline: none;
  color: var(--text-secondary);
  box-shadow: 0 0 0 3px var(--fmn-chrome-soft);
  border-radius: var(--radius-sm);
}
.alog-orig-text {
  margin: var(--space-2) 0 0;
  padding: var(--space-2_5) var(--space-3);
  border-left: 2px solid var(--border-default);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-input);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  /* A dictated note arrives as one long unbroken line; it must wrap, not scroll. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- B-2: the computed scorecard ----------
   NOT yellow, deliberately. These numbers were counted in code from the rep's
   own entries; the AI only presents them. Yellow stays on the narrative below.
   Behind-pace items are marked with the rose scale already used by .is-failed,
   and "enter manually" items are greyed so a missing metric never reads as a
   zero that was measured. */

.alog-sc {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-3_5);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-elev-1);
}
.alog-sc-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.alog-sc-title {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-primary);
}
.alog-sc-src {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

/* The daily follow-up strip: seven cells, one per day, each its own verdict. */
.alog-sc-daily {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.alog-sc-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-1_5);
}
.alog-sc-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--space-2) var(--space-1);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-input);
  cursor: help;
  min-width: 0;
}
.alog-sc-day-n {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  line-height: 1;
  color: var(--text-primary);
}
.alog-sc-day-d {
  font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.alog-sc-day.is-behind {
  border-color: var(--color-rose-200);
  background: var(--color-rose-50);
}
.alog-sc-day.is-behind .alog-sc-day-n { color: var(--color-rose-800); }

/* One row per weekly metric: name, actual, target. */
.alog-sc-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-1_5);
}
.alog-sc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2_5);
  border-left: 3px solid var(--border-default);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-input);
  min-width: 0;
}
.alog-sc-label {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-width: 0;
  overflow-wrap: anywhere;
}
.alog-sc-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}
.alog-sc-target {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  white-space: nowrap;
}
.alog-sc-row.is-ok { border-left-color: var(--fmn-chrome); }
.alog-sc-row.is-behind {
  border-left-color: var(--color-rose-400);
  background: var(--color-rose-50);
}
.alog-sc-row.is-behind .alog-sc-value { color: var(--color-rose-800); }
/* Greyed and italic: not measured, so it must not read as a measured zero. */
.alog-sc-row.is-manual { border-left-color: var(--border-subtle); }
.alog-sc-row.is-manual .alog-sc-value {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  font-style: italic;
  color: var(--text-tertiary);
}
.alog-sc-note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--text-tertiary);
}

@media (max-width: 834px) {
  /* The day strip keeps all seven columns — it is the week at a glance and
     wrapping it to two rows breaks that read. The cells just get narrower. */
  .alog-sc { padding: var(--space-3_5); }
  .alog-sc-day { padding: var(--space-1_5) 2px; }
  .alog-sc-src { margin-left: 0; width: 100%; }
}

@media (max-width: 560px) {
  /* Below phone width the three-column row stacks: the label gets its own line
     so a long metric name is not squeezed to one word per line. */
  .alog-sc-row {
    grid-template-columns: auto 1fr;
    gap: var(--space-1) var(--space-2);
  }
  .alog-sc-label { grid-column: 1 / -1; }
}

@media (max-width: 834px) {
  .alog-wrap { padding: var(--space-3_5) var(--space-3_5) var(--space-12); }
  .alog-confirm-grid { grid-template-columns: 1fr; }

  /* A-2: the footer stacks rather than squeezing. Every control keeps its 44px
     target and the row wraps instead of overflowing sideways. */
  .alog-footer { align-items: stretch; flex-direction: column; gap: var(--space-3_5); }
  .alog-footer-filters { align-items: stretch; flex-direction: column; }
  .alog-footer-actions { flex-wrap: wrap; }
  .alog-footer-actions .fmn-btn { flex: 1 1 auto; }
  .alog-count { width: 100%; }

  .alog-presets { flex-wrap: wrap; }
  .alog-presets .alog-chip { flex: 1 1 auto; }
  .alog-range { flex-wrap: wrap; }
  .alog-date, .alog-scope { flex: 1 1 auto; min-width: 0; }

  .alog-entry { padding: var(--space-4); }
  .alog-entry-title { font-size: var(--text-xl); }
}