/* FreshSource Tech — web edition.
   The palette and proportions follow the Mac app's Theme.swift, which in turn
   follows the generated recap, so the tool and what it produces look like one
   family.

   Every color is a token. Dark mode gives the same tokens dark values
   (:root[data-theme="dark"], below), and /js/theme.js picks light or dark
   before the page draws: the device's setting, or the choice saved in this
   browser. The recap design preview keeps the light values, because it shows
   the recap the way principals see it. */

:root,
.design-preview {
  --forest-dark: #2c5f2d;
  --forest: #3e6b33;
  --leaf: #4a7c2f;
  --moss: #97bc62;
  --ink: #1d2b1f;
  --muted: #5c6b5e;
  --canvas: #f6f8f4;
  --card-line: #e3e8e0;
  --warn: #c0392b;
  --opportunity: #d97706;
  --caution: #f4c542;
  --info: #2f6fb0;
  --win: #2e7d32;
  --gradient: linear-gradient(135deg, #2c5f2d, #4a7c2f);

  --moss-06: rgba(151, 188, 98, 0.06);
  --moss-08: rgba(151, 188, 98, 0.08);
  --moss-10: rgba(151, 188, 98, 0.10);
  --moss-12: rgba(151, 188, 98, 0.12);
  --moss-14: rgba(151, 188, 98, 0.14);
  --moss-15: rgba(151, 188, 98, 0.15);
  --moss-18: rgba(151, 188, 98, 0.18);
  --moss-20: rgba(151, 188, 98, 0.20);
  --moss-22: rgba(151, 188, 98, 0.22);
  --moss-25: rgba(151, 188, 98, 0.25);
  --moss-40: rgba(151, 188, 98, 0.40);
  --moss-45: rgba(151, 188, 98, 0.45);
  --moss-50: rgba(151, 188, 98, 0.50);
  --warn-08: rgba(192, 57, 43, 0.08);
  --warn-15: rgba(192, 57, 43, 0.15);
  --warn-16: rgba(192, 57, 43, 0.16);
  --warn-40: rgba(192, 57, 43, 0.40);
  --warn-45: rgba(192, 57, 43, 0.45);
  --leaf-14: rgba(74, 124, 47, 0.14);
  --win-08: rgba(46, 125, 50, 0.08);
  --win-12: rgba(46, 125, 50, 0.12);
  /* Retailer table bands: caution, and a rate on arrival below target,
     shaded in the Opportunities Identified orange as the recap shades it.
     The note under the table asks the reader to tell the two apart, so the
     orange is the stronger fill, with darker text (5.1:1 on its fill). */
  --caution-fill: rgba(244, 197, 66, 0.22);
  --found-fill: rgba(217, 119, 6, 0.35);
  --found-ink: #8f3a00;

  /* Surfaces, lines and fills */
  --surface: #fff;
  --surface-raised: #fff;
  --raised-line: rgba(0, 0, 0, 0.06);
  --field: #fff;
  --field-line: #cfd6cb;
  --field-disabled: #f2f4f0;
  --line-soft: #edf0ea;
  --track: #d9ddd6;
  --faint: #b5bcb3;
  --shade: rgba(0, 0, 0, 0.06);
  --shade-strong: rgba(0, 0, 0, 0.12);
  --focus-ring: rgba(74, 124, 47, 0.18);
  --backdrop: rgba(20, 30, 20, 0.32);

  /* Text on filled colors, and a few one-offs */
  --on-accent: #fff;
  --warn-fill: #c0392b;
  --toast-bg: #1f2a20;
  --toast-ink: #fff;
  --notice-bg: #fff7e6;
  --notice-ink: #7a4d00;
  --notice-line: #f1ddb0;
  /* The test server's banner (OutboundGuard): a red no page on production has. */
  --test-server-fill: #b0281c;
  --test-server-ink: #fff;

  color-scheme: light;
}

:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark mode. Every token above has a value here; the self-checks make sure
   none is missed. Text colors are lighter so they read on dark surfaces. */
:root[data-theme="dark"] {
  --forest-dark: #a9d48c;
  --forest: #b7da9c;
  --leaf: #8cc56a;
  --moss: #a6cd72;
  --ink: #e3ebe4;
  --muted: #9db0a1;
  --canvas: #0e1511;
  --card-line: #2a372e;
  --warn: #ff8f80;
  --opportunity: #f5a524;
  --caution: #f4c542;
  --info: #6ea9e6;
  --win: #74c77a;
  --gradient: linear-gradient(135deg, #234a26, #3a6629);

  --moss-06: rgba(166, 205, 114, 0.07);
  --moss-08: rgba(166, 205, 114, 0.09);
  --moss-10: rgba(166, 205, 114, 0.11);
  --moss-12: rgba(166, 205, 114, 0.13);
  --moss-14: rgba(166, 205, 114, 0.15);
  --moss-15: rgba(166, 205, 114, 0.16);
  --moss-18: rgba(166, 205, 114, 0.19);
  --moss-20: rgba(166, 205, 114, 0.21);
  --moss-22: rgba(166, 205, 114, 0.23);
  --moss-25: rgba(166, 205, 114, 0.26);
  --moss-40: rgba(166, 205, 114, 0.40);
  --moss-45: rgba(166, 205, 114, 0.45);
  --moss-50: rgba(166, 205, 114, 0.50);
  --warn-08: rgba(255, 143, 128, 0.10);
  --warn-15: rgba(255, 143, 128, 0.16);
  --warn-16: rgba(255, 143, 128, 0.17);
  --warn-40: rgba(255, 143, 128, 0.40);
  --warn-45: rgba(255, 143, 128, 0.45);
  --leaf-14: rgba(140, 197, 106, 0.16);
  --win-08: rgba(116, 199, 122, 0.10);
  --win-12: rgba(116, 199, 122, 0.14);
  /* A deeper orange than the yellow, so the two stay apart on a dark
     surface too; the light text reads at 5.4:1 on it. */
  --caution-fill: rgba(244, 197, 66, 0.18);
  --found-fill: rgba(234, 88, 12, 0.38);
  --found-ink: #ffab70;

  --surface: #161f19;
  --surface-raised: #1c2720;
  --raised-line: rgba(255, 255, 255, 0.09);
  --field: #0f1612;
  --field-line: #36453b;
  --field-disabled: #19211c;
  --line-soft: #222d26;
  --track: #3a473f;
  --faint: #5b695f;
  --shade: rgba(255, 255, 255, 0.07);
  --shade-strong: rgba(255, 255, 255, 0.16);
  --focus-ring: rgba(140, 197, 106, 0.30);
  --backdrop: rgba(0, 0, 0, 0.6);

  --on-accent: #0c140f;
  --warn-fill: #c9463a;
  --toast-bg: #e3ebe4;
  --toast-ink: #0e1511;
  --notice-bg: #2a2314;
  --notice-ink: #f2c77c;
  --notice-line: #4a3c1d;
  --test-server-fill: #c9463a;
  --test-server-ink: #fff;

  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font);
  font-size: 13px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--leaf); }
img { max-width: 100%; }
[hidden] { display: none !important; }

#app { height: 100%; }

/* The test server's banner, along the top of every page there and never on
   production (main.js adds it when the server says it's the test server). */
.test-server-banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  height: 26px; padding: 0 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--test-server-fill); color: var(--test-server-ink);
  font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.test-server #app { padding-top: 26px; }
body.test-server .page { height: calc(100vh - 26px); }
body.test-server .auth-page { min-height: calc(100vh - 26px); }

/* ---------- Page chrome (the Mac window's layout) ---------- */

.page { height: 100vh; display: flex; flex-direction: column; background: var(--canvas); }
.page-scroll { flex: 1; overflow: auto; min-height: 0; }
.page-content { padding: 28px; }
.page-content.narrow { max-width: 860px; margin: 0 auto; }
.footer {
  border-top: 1px solid var(--card-line);
  background: var(--canvas);
  padding: 18px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.spacer { flex: 1; }
.divider { height: 1px; background: var(--card-line); flex: none; }

/* ---------- Brand header ---------- */

.brand-header {
  background: var(--gradient);
  color: #fff;
  padding: 22px 28px;
  flex: none;
}
.brand-top { display: flex; align-items: center; gap: 10px; min-height: 22px; }
.brand-mark { display: flex; align-items: center; gap: 10px; }
.brand-mark svg { width: 15px; height: 15px; opacity: .9; }
.brand-mark span { font-size: 11px; font-weight: 700; letter-spacing: 1.6px; opacity: .85; }
.brand-title { font-size: 24px; font-weight: 700; margin: 10px 0 0; }
/* Back, and every part of the app, on every screen. */
.app-nav { display: flex; align-items: center; gap: 10px; margin-top: 12px; min-width: 0; }
.app-back {
  flex: none; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 650; color: #fff; background: rgba(0, 0, 0, .18);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 5px 12px 5px 8px;
}
.app-back:hover { background: rgba(0, 0, 0, .28); }
.app-back svg { width: 13px; height: 13px; }
/* Home, Recaps, the groups and the Guide. Wraps onto a second line rather
   than hiding parts off the edge; a phone gets the one Menu button instead
   (below). */
.app-nav-list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.app-nav-item {
  flex: none; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; padding: 5px 12px;
}
.app-nav-item:hover { background: rgba(0, 0, 0, .26); }
.app-back:focus-visible, .app-nav-item:focus-visible, .app-menu-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.app-nav-item.on { background: #fff; color: var(--forest-dark); cursor: default; }
.app-nav-item svg { width: 13px; height: 13px; flex: none; }
/* A group: its own small menu. Lit, it still opens, and names the part on
   screen after the group's name. */
.app-nav-group.on { cursor: pointer; }
.app-nav-here { font-weight: 700; }
.app-nav-here::before { content: '·'; margin-right: 6px; font-weight: 600; opacity: .55; }
.app-nav-caret { display: inline-flex; margin-left: -2px; opacity: .8; }
.app-nav-item .app-nav-caret svg { width: 12px; height: 12px; }
/* ☰ Menu, on a phone only: the whole row, in the same groups. */
.app-menu-btn {
  display: none; flex: none; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 650; color: #fff; background: rgba(0, 0, 0, .16);
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; padding: 5px 12px 5px 10px;
}
.app-menu-btn:hover { background: rgba(0, 0, 0, .26); }
.app-menu-btn svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .app-nav-list { display: none; }
  .app-menu-btn { display: inline-flex; }
}
.app-nav-item.on svg { color: var(--leaf); }
:root[data-theme="dark"] .app-nav-item.on { background: var(--surface); color: var(--ink); }
.brand-subtitle { font-size: 13px; opacity: .9; margin-top: 6px; }
/* A way into the guide from the page it explains, on the green header. */
.brand-help { display: inline-block; margin-left: 10px; }
.brand-help .link-btn.guide-help { color: inherit; opacity: .85; font-size: 12px; }
.brand-help .link-btn.guide-help:hover { opacity: 1; }
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .95);
  font-size: 11px; font-weight: 500; max-width: 260px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chip svg { width: 10px; height: 10px; flex: none; }
.chip.dim { background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .7); }
.chip-text { overflow: hidden; text-overflow: ellipsis; }
.user-chip { cursor: pointer; border: 0; }
.user-chip:hover { background: rgba(255, 255, 255, .28); }

/* A recap going up to the website, on whatever screen you happen to be. */
.posting-chip { cursor: pointer; border: 0; background: rgba(255, 255, 255, .28); }
.posting-chip:hover { background: rgba(255, 255, 255, .36); }
.posting-chip.good { background: rgba(122, 176, 90, .38); cursor: default; }
.posting-chip.bad { background: rgba(214, 138, 60, .42); cursor: default; }
.posting-chip .chip-x {
  border: 0; background: none; padding: 0 0 0 3px; cursor: pointer;
  color: inherit; display: inline-flex; align-items: center;
}
.posting-chip .chip-x:hover { opacity: .75; }
/* The posting, where the library shows it. */
.posting-panel {
  display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--card-line); border-radius: 10px;
  padding: 10px 12px; margin: 0 0 12px;
  background: var(--surface);
}
.posting-panel.good { border-color: var(--moss); background: var(--moss-08); }
.posting-panel.bad { border-color: var(--warn); }
/* The chips that move on their own sit in a slot that lays out as if it
   weren't there, so swapping them changes nothing around them. */
.live-slot { display: contents; }
/* Clicked in from the corner chip: says "here it is" without a jolt. */
.posting-panel.just-landed { animation: landed 1.4s ease-out; }
@keyframes landed {
  0%, 60% { box-shadow: 0 0 0 3px var(--moss-08); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.posting-chip .chip-text.as-link {
  border: 0; background: none; color: inherit; font: inherit; padding: 0; cursor: pointer;
}
.posting-chip .chip-text.as-link:hover { text-decoration: underline; }
.posting-chip.good, .posting-chip.bad { cursor: default; }

.busy-spinner.tiny {
  width: 10px; height: 10px; border-width: 1.5px;
  border-color: rgba(255, 255, 255, .35); border-top-color: #fff;
}

.step-trail { display: flex; align-items: center; gap: 6px; margin-top: 16px; flex-wrap: wrap; }
.step-trail .st { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: rgba(255, 255, 255, .6); }
.step-trail .st .dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.step-trail .st.reached { color: #fff; }
.step-trail .st.reached .dot { background: #fff; }
.step-trail .st.current { font-weight: 700; }
.step-trail .line { width: 14px; height: 1px; background: rgba(255, 255, 255, .3); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: transform .12s ease-out, opacity .12s ease-out, background .12s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn svg { width: 14px; height: 14px; flex: none; }
.btn-primary {
  background: var(--gradient); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 11px 22px; border-radius: 10px;
}
.btn-primary:active:not(:disabled) { opacity: .85; }
.btn-primary:disabled { background: rgba(128, 128, 128, .35); cursor: default; }
.btn-secondary {
  background: var(--moss-14); color: var(--forest);
  font-size: 13px; font-weight: 500;
  padding: 9px 16px; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--moss-40);
}
.btn-secondary:hover:not(:disabled) { background: var(--moss-20); }
.btn-secondary:active:not(:disabled) { background: var(--moss-25); }
.btn-secondary:disabled { opacity: .45; cursor: default; }
.btn-capsule { border-radius: 999px; padding: 11px 18px; }
.btn-capsule svg { width: 15px; height: 15px; }
.btn-waiting { background: var(--shade); color: var(--muted); font-size: 14px; font-weight: 600; cursor: default; }
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 11px; font-weight: 500; color: var(--leaf);
  display: inline-flex; align-items: center; gap: 4px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn.warn { color: var(--warn); }
.link-btn.moss { color: var(--moss); }
.link-btn.muted { color: var(--muted); }
.link-btn:disabled { opacity: .45; cursor: default; text-decoration: none; }
.link-btn svg { width: 12px; height: 12px; }
.icon-btn { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; line-height: 0; }
.busy-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--shade-strong); border-top-color: var(--leaf);
  animation: spin .8s linear infinite; flex: none;
}
.busy-spinner.large { width: 34px; height: 34px; border-width: 3px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The first moment: the logo breathes until the first screen is ready, so the
   page is never blank. It starts at nothing, so a load that finishes straight
   away shows no flash at all. */
.app-loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: var(--canvas); padding: 24px;
}
.app-loading img {
  width: min(240px, 56vw); height: auto;
  animation: logo-breathe 1.5s ease-in-out infinite;
}
@keyframes logo-breathe {
  0% { opacity: 0; }
  25% { opacity: 1; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
/* In the dark, the logo keeps its white ground, as it does everywhere else. */
:root[data-theme="dark"] .app-loading img { background: #fff; border-radius: 16px; padding: 18px; }
@media (prefers-reduced-motion: reduce) {
  .app-loading img { animation: none; opacity: 1; }
}

/* ---------- Cards & panels ---------- */

.card {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; padding: 14px;
}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row.top { align-items: flex-start; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; } .gap-10 { gap: 10px; }
.gap-12 { gap: 12px; } .gap-14 { gap: 14px; } .gap-16 { gap: 16px; } .gap-18 { gap: 18px; }
.wrap { flex-wrap: wrap; }
.muted { color: var(--muted); }
.t-9 { font-size: 9px; } .t-95 { font-size: 9.5px; } .t-10 { font-size: 10px; } .t-105 { font-size: 10.5px; }
.t-11 { font-size: 11px; } .t-115 { font-size: 11.5px; } .t-12 { font-size: 12px; } .t-125 { font-size: 12.5px; }
.t-13 { font-size: 13px; } .t-135 { font-size: 13.5px; } .t-14 { font-size: 14px; } .t-15 { font-size: 15px; }
.t-16 { font-size: 16px; } .t-19 { font-size: 19px; }
.w5 { font-weight: 500; } .w6 { font-weight: 600; } .w7 { font-weight: 700; }
.caps { text-transform: uppercase; }
.c-warn { color: var(--warn); } .c-moss { color: var(--moss); } .c-leaf { color: var(--leaf); }
.c-forest { color: var(--forest); } .c-forest-dark { color: var(--forest-dark); } .c-win { color: var(--win); }
.c-ink { color: var(--ink); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clamp2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mono { font-family: var(--mono); }
.italic { font-style: italic; }
.selectable { user-select: text; }

.pill {
  display: inline-flex; align-items: center;
  font-size: 9.5px; font-weight: 600; padding: 2px 6px; border-radius: 999px; white-space: nowrap;
}
.pill.draft { background: var(--shade); color: var(--muted); }
.pill.needsReview { background: var(--warn-16); color: var(--warn); }
.pill.approved { background: var(--moss-22); color: var(--forest-dark); }
.pill.posted { background: var(--leaf-14); color: var(--leaf); }
.pill.kind { background: var(--moss-14); color: var(--moss); }
.pill.edited { font-size: 9px; padding: 1px 5px; background: var(--moss-15); color: var(--moss); }
.pill.house { font-size: 9px; padding: 1px 5px; background: var(--moss-14); color: var(--moss); }
.pill.live { background: var(--win-12); color: var(--win); }

.step-card-title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.step-num {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--moss-20); color: var(--forest); font-size: 11px; font-weight: 700;
}
.step-num.small { width: 20px; height: 20px; font-size: 10.5px; }
.step-num.done { background: var(--win); color: var(--on-accent); }
.step-num svg { width: 10px; height: 10px; }

.error-box {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px; border-radius: 10px; background: var(--warn-08); color: var(--warn);
  font-size: 12px; white-space: pre-wrap; user-select: text;
}
.error-box svg { width: 14px; height: 14px; flex: none; margin-top: 1px; }
.ok-box {
  display: flex; align-items: center; gap: 8px;
  padding: 12px; border-radius: 10px; background: var(--win-08);
}
.note-box {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px; border-radius: 10px; background: var(--moss-12);
}

/* ---------- Form controls ---------- */

.input, .textarea, .select {
  border: 1px solid var(--field-line); border-radius: 6px; background: var(--field);
  padding: 5px 8px; font-size: 13px; min-width: 0;
  outline: none;
}
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--leaf); box-shadow: 0 0 0 3px var(--focus-ring);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--field-disabled); color: var(--muted); }
.textarea { resize: vertical; line-height: 1.45; }
.select { padding-right: 24px; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 13px) 55%, calc(100% - 8px) 55%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.search-box {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 8px; background: var(--canvas); border: 1px solid var(--card-line);
}
.search-box input { border: 0; background: transparent; outline: none; flex: 1; font-size: 12.5px; }
.search-box svg { width: 11px; height: 11px; color: var(--muted); }

.switch { display: inline-block; vertical-align: middle; position: relative; width: 32px; height: 19px; flex: none; }
.switch input { opacity: 0; width: 100%; height: 100%; margin: 0; position: absolute; inset: 0; cursor: pointer; z-index: 1; }
.switch .track { position: absolute; inset: 0; border-radius: 999px; background: var(--track); transition: background .15s; }
.switch .knob {
  position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s;
}
.switch input:checked ~ .track { background: var(--leaf); }
.switch input:checked ~ .knob { transform: translateX(13px); }
.switch input:disabled { cursor: default; }
.switch input:disabled ~ .track { opacity: .5; }

.checkbox { display: flex; align-items: center; gap: 7px; cursor: pointer; font-size: 12px; }
.checkbox input { width: 14px; height: 14px; margin: 0; accent-color: var(--leaf); }

.segmented {
  display: flex; background: var(--shade); border-radius: 8px; padding: 2px; gap: 2px;
}
.segmented button {
  flex: 1; border: 0; background: transparent; border-radius: 6px; padding: 5px 10px;
  font-size: 12.5px; cursor: pointer; color: var(--ink);
}
.segmented button.on { background: var(--surface-raised); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); font-weight: 500; }

.stepper { display: inline-flex; border: 1px solid var(--field-line); border-radius: 6px; overflow: hidden; flex: none; }
.stepper button { border: 0; background: var(--field); width: 24px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1; color: var(--ink); }
.stepper button + button { border-left: 1px solid var(--field-line); }
.stepper button:disabled { color: var(--faint); cursor: default; }

.radio-list { display: flex; flex-direction: column; gap: 6px; }
.radio { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.radio input { margin: 0; accent-color: var(--leaf); }

/* macOS "grouped" form */
.form { padding: 10px 26px 26px; }
.form-section { margin-top: 14px; }
.form-section > .fs-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 7px 10px; }
.form-section > .fs-body {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
}
.fs-row { padding: 9px 12px; display: flex; align-items: center; gap: 10px; min-height: 38px; }
.fs-row + .fs-row { border-top: 1px solid var(--line-soft); }
/* A switch that belongs to the one above it (retailer table columns). */
.fs-sub { padding-left: 22px; }
.fs-row .fs-sub ~ .t-11 { padding-left: 22px; }

/* Review: the By Retailer panel */
.column-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.column-chip {
  font: inherit; font-size: 11px; padding: 3px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-line); background: var(--surface); color: var(--muted);
}
.column-chip.on { background: var(--moss-15); border-color: transparent; color: var(--forest-dark); font-weight: 600; }
.column-chip:disabled { opacity: .5; cursor: default; }
.rt-wrap { overflow: auto; max-height: 380px; border: 1px solid var(--line-soft); border-radius: 8px; }
.rt-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rt-table th {
  position: sticky; top: 0; background: var(--canvas); text-align: left; white-space: nowrap;
  font-size: 9.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); padding: 7px 10px;
}
.rt-table td { padding: 6px 10px; border-top: 1px solid var(--line-soft); white-space: nowrap; }
.rt-table.dim { opacity: .45; }
.rt-table td.tone-caution { background: var(--caution-fill); font-weight: 600; }
.rt-table td.tone-found { background: var(--found-fill); color: var(--found-ink); font-weight: 600; }
.rt-lead { font-size: 12px; color: var(--ink); }
.fs-row.top { align-items: flex-start; }
.fs-row.col { flex-direction: column; align-items: stretch; }
.fs-row .fs-label { font-size: 13px; }
.fs-row .fs-field { flex: 1; display: flex; justify-content: flex-end; min-width: 0; }
.fs-row .fs-field .input { width: 100%; max-width: 440px; text-align: left; }
.fs-disabled { opacity: .6; pointer-events: none; }

/* ---------- Modal ---------- */

.modal-backdrop {
  position: fixed; inset: 0; background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px;
}
.modal {
  background: var(--surface-raised); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 1px var(--raised-line);
  width: 100%; max-width: 420px; padding: 20px; display: flex; flex-direction: column; gap: 12px;
}
/* A dialog taller than the screen scrolls inside itself, so its buttons stay
   reachable on a phone. Its parts keep their own height rather than squeezing. */
.modal { max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; }
.modal > * { flex-shrink: 0; }
.modal.wide { max-width: 640px; }
.modal h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.modal .modal-buttons { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.modal .modal-buttons.inline { flex-direction: row; justify-content: flex-end; }
.modal .btn-destructive {
  background: var(--warn-fill); color: #fff; font-size: 13px; font-weight: 600; padding: 9px 16px; border-radius: 10px;
}
.modal-list { max-height: 360px; overflow: auto; border: 1px solid var(--card-line); border-radius: 8px; }
.modal-list a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; font-size: 12px; text-decoration: none; color: var(--ink); }
.modal-list a + a { border-top: 1px solid var(--line-soft); }
.modal-list a:hover { background: var(--moss-08); }

.menu {
  position: fixed; z-index: 1100; background: var(--surface-raised); border-radius: 8px; padding: 4px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18), 0 0 0 1px var(--raised-line); min-width: 180px;
  max-height: calc(100vh - 16px); overflow-y: auto;
}
.menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 6px 10px; border-radius: 5px; font-size: 13px; cursor: pointer;
}
.menu button:hover, .menu button:focus-visible { background: var(--leaf); color: var(--on-accent); outline: none; }
.menu button.checkable { display: flex; align-items: center; gap: 6px; }
.menu .menu-check { width: 14px; flex: none; display: inline-flex; justify-content: center; }
.menu .menu-check svg { width: 12px; height: 12px; }
.menu .menu-icon { display: inline-flex; flex: none; color: var(--muted); }
.menu .menu-icon svg { width: 14px; height: 14px; }
.menu button:hover .menu-icon, .menu button:focus-visible .menu-icon { color: inherit; }
.menu .menu-sep { height: 1px; background: var(--card-line); margin: 4px 2px; }
.menu .menu-head { padding: 6px 10px 4px; font-size: 11px; color: var(--muted); }
/* Bigger to tap on a phone. */
@media (max-width: 760px) {
  .menu { min-width: 220px; }
  .menu button { padding: 11px 14px; font-size: 15px; }
  .menu .menu-head { font-size: 12px; padding: 8px 14px 4px; }
}

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: 10px;
  font-size: 12.5px; z-index: 1200; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); max-width: 80vw;
}

/* ---------- Library ---------- */

.toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap; flex: none; }
.status-line { display: flex; align-items: center; gap: 6px; padding: 0 18px 6px; font-size: 11.5px; color: var(--muted); flex: none; }
.status-line svg { width: 13px; height: 13px; color: var(--moss); flex: none; }
.filter-tabs { display: flex; gap: 6px; padding: 0 18px 10px; flex-wrap: wrap; flex: none; }
.filter-tab {
  border: 0; background: transparent; border-radius: 7px; padding: 6px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted);
}
.filter-tab.on { background: var(--moss-18); color: var(--forest-dark); font-weight: 600; }
.filter-tab .count {
  font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 999px;
  background: var(--shade); color: var(--muted);
}
.filter-tab .count.warn { background: var(--warn-16); color: var(--warn); }
.library-split { flex: 1; display: flex; min-height: 0; }
.principal-list { width: 260px; min-width: 220px; flex: none; overflow: auto; padding: 10px; border-right: 1px solid var(--card-line); }
.principal-row {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; margin-bottom: 4px;
}
.principal-row.on { background: var(--moss-14); }
.principal-row:hover:not(.on) { background: var(--moss-06); }
/* An admin's "…" (Rename a principal…) sits over the row's right edge. */
.principal-row-wrap { position: relative; }
.principal-row-wrap:has(.principal-row-menu) .principal-row { padding-right: 34px; }
.principal-row-menu {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px;
  border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
  display: flex; align-items: center; justify-content: center; opacity: 0.55;
}
.principal-row-menu svg { width: 15px; height: 15px; }
.principal-row-wrap:hover .principal-row-menu, .principal-row-menu:focus-visible { opacity: 1; }
.principal-row-menu:hover { background: var(--moss-12); color: var(--ink); }
/* Rename a principal…: the preview's plain lists. */
.rename-principal .input, .rename-principal .select { width: 100%; }
.rename-lines { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.rename-section { border-top: 1px solid var(--card-line); padding-top: 8px; }
.rename-choice { align-items: flex-start; font-size: 12.5px; }
/* Principal logos sit on the recap's own logo-bar colour, #e3e8e0, in both
   themes: a white logo vanished on the white panel they used to have, and
   this way a logo looks here as it does at the top of its recap. */
.principal-logo {
  width: 26px; height: 26px; border-radius: 4px; background: #e3e8e0; object-fit: contain; flex: none;
}
.principal-logo.placeholder { background: var(--moss-12); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.principal-logo.placeholder svg { width: 11px; height: 11px; }
.recap-list { flex: 1; overflow: auto; padding: 16px; min-width: 0; }
.recap-row {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px; padding: 14px;
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px;
}
.recap-row.waiting { border: 1.5px solid var(--warn-45); }
.recap-row .actions { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.recap-row-text { flex: 1; min-width: 0; gap: 3px; }
.recap-row-quick { justify-content: flex-end; }
/* On a phone the actions go under the row's text, so a posted recap's
   quick links (Reopen, Email…, Download, Show Files, Delete) don't squeeze
   it to a sliver. */
@media (max-width: 760px) {
  .recap-row { flex-direction: column; align-items: stretch; }
  .recap-row-text { flex: none; }
  .recap-row .actions { align-items: flex-start; }
  .recap-row-quick { justify-content: flex-start; }
}
.empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 40px; }
.empty-state svg.big { width: 40px; height: 40px; color: var(--moss-50); }

/* ---------- Import & Repsly ---------- */

.source-button {
  width: 100%; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px;
  background: var(--moss-10); box-shadow: inset 0 0 0 1px var(--moss-45);
}
.source-button:hover { background: var(--moss-14); }
.or-divider { display: flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 700; color: var(--muted); }
.or-divider::before, .or-divider::after { content: ""; flex: 1; height: 1px; background: var(--card-line); }
.logo-thumb { background: #e3e8e0; border-radius: 8px; border: 1px solid var(--card-line); object-fit: contain; flex: none; }
.logo-thumb.placeholder { background: var(--moss-12); display: flex; align-items: center; justify-content: center; color: var(--muted); border: 0; }
.logo-thumb.placeholder svg { width: 16px; height: 16px; }
.saved-logo-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px;
  max-height: 52vh; overflow: auto; padding: 2px;
}
.saved-logo {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px;
  border: 1px solid var(--card-line); border-radius: 10px; background: var(--surface);
  color: inherit; font: inherit; cursor: pointer; text-align: center; min-width: 0;
}
.saved-logo:hover { border-color: var(--leaf); }
.saved-logo.on { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--focus-ring); }
.saved-logo[hidden] { display: none; }
.saved-logo .logo-thumb { width: 100%; height: 56px; }
.saved-logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.preset {
  border: 0; cursor: pointer; font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  background: var(--moss-15); color: var(--forest);
}
.preset:disabled { opacity: .5; cursor: default; }
.progress { height: 6px; border-radius: 999px; background: var(--shade); overflow: hidden; }
.progress > div { height: 100%; background: var(--leaf); border-radius: 999px; transition: width .3s; }
.progress.indeterminate > div { width: 30%; animation: slide 1.2s ease-in-out infinite; }
@keyframes slide { 0% { transform: translateX(-100%); } 100% { transform: translateX(340%); } }
.cache-panel { padding: 12px; border: 1px solid var(--card-line); border-radius: 8px; background: var(--moss-06); }
.cache-panel.covered { background: var(--moss-08); }
.selectable-row {
  width: 100%; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px;
  background: var(--moss-06); box-shadow: inset 0 0 0 1px var(--card-line);
}
.selectable-row.on { background: var(--moss-18); }
.selectable-row svg { width: 16px; height: 16px; flex: none; }
.filter-chip {
  border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 500;
  background: var(--moss-20); color: var(--forest);
}
.filter-chip.out { background: rgba(128, 128, 128, .12); color: var(--muted); }
.filter-chip svg { width: 10px; height: 10px; }
.explorer-result {
  height: 160px; overflow: auto; background: var(--field); border: 1px solid var(--card-line); border-radius: 8px;
  padding: 8px; font-family: var(--mono); font-size: 10.5px; white-space: pre-wrap; user-select: text;
}

/* ---------- Clarifying questions ---------- */

.question-box { display: flex; gap: 10px; align-items: flex-start; padding: 16px; border-radius: 12px; background: var(--moss-10); font-size: 14px; }
.question-box svg { width: 16px; height: 16px; color: var(--leaf); flex: none; margin-top: 1px; }
.option-list { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; overflow: hidden; }
.option-row {
  width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: flex-start; gap: 8px; padding: 9px 12px;
}
.option-row + .option-row { border-top: 1px solid var(--line-soft); }
.option-row.on { background: var(--moss-12); }
.option-row.empty { opacity: .55; }
.option-row svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ---------- Review ---------- */

.review-list { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.group-header {
  position: sticky; top: 0; z-index: 5; background: var(--canvas);
  display: flex; align-items: baseline; gap: 8px; padding: 8px 0; margin: 0 -24px; padding-left: 24px; padding-right: 24px;
}
.review-card {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
  content-visibility: auto; contain-intrinsic-size: auto 320px;
}
.remove-visit svg { width: 16px; height: 16px; }
.status-chip { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; }
.status-chip.complete { background: var(--moss-15); color: var(--moss); }
.status-chip.revisit { background: var(--warn-15); color: var(--warn); }
/* Edits that came from other recaps of the same Repsly report. */
.carried-edits { background: var(--moss-08); border-radius: 8px; padding: 7px 9px; display: flex; flex-direction: column; gap: 4px; }
.carried-edits.offer { background: var(--notice-bg); color: var(--notice-ink); border: 1px solid var(--notice-line); }
.carried-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; line-height: 1.35;
  padding: 2px 8px; border-radius: 9px; background: var(--moss-15); color: var(--moss);
}
.carried-chip svg { flex: none; }
/* A visit with no retailer, and the Fix them dialog (StoreRetailers). */
.retailer-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 600; line-height: 1.35;
  padding: 2px 8px; border-radius: 9px;
}
.retailer-chip.none { background: var(--warn-15); color: var(--warn); }
.retailer-chip svg { flex: none; }
.panel.retailer-banner { border-color: var(--warn-45); }
.retailer-fix-list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; }
.retailer-fix-row {
  display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; border-radius: 9px;
  border: 1px solid var(--card-line); background: var(--surface);
}
.retailer-fix-row.missing { border-color: var(--warn-40); }
.carried-details summary { cursor: pointer; }
.carried-details ul, .carried-list { margin: 3px 0 0; padding-left: 18px; font-size: 10.5px; }
.notes-field { background: var(--moss-08); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; gap: 3px; }
.notes-field textarea {
  width: 100%; border: 1px solid var(--card-line); border-radius: 8px; background: var(--field);
  padding: 8px 10px; font-size: 12.5px; line-height: 1.45; resize: none; min-height: 44px; overflow: hidden; outline: none;
}
.notes-field textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--focus-ring); }
.badge-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.badge-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.badge-chip button { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; display: inline-flex; }
.badge-chip button svg { width: 8px; height: 8px; stroke-width: 3.2; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, 100px); gap: 8px; }
.photo-thumb { position: relative; width: 100px; height: 100px; }
.photo-thumb .ph-img {
  width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid var(--card-line);
  background: rgba(128, 128, 128, .08); display: block;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-thumb .ph-label {
  position: absolute; left: 4px; bottom: 4px; font-size: 7.5px; font-weight: 700; letter-spacing: .02em;
  background: rgba(44, 95, 45, .88); color: #fff; padding: 2px 5px; border-radius: 4px; pointer-events: none;
}
.photo-thumb .ph-remove { position: absolute; top: 3px; right: 3px; }
.photo-thumb .ph-remove svg { width: 17px; height: 17px; }
.photo-thumb .ph-retry {
  width: 100%; height: 100%; border: 0; background: var(--warn-08); color: var(--warn); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 9px; font-weight: 500;
}
.photo-thumb .ph-retry svg { width: 16px; height: 16px; }
.values-row { display: flex; align-items: center; gap: 8px; }
.values-row .label { width: 170px; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.values-row .input { max-width: 180px; width: 180px; font-size: 11.5px; padding: 3px 7px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--moss-10); }
.tile b { font-size: 18px; color: var(--forest-dark); }
.tile span { font-size: 9px; font-weight: 600; color: var(--muted); text-transform: uppercase; }
.summary-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: start; }
@media (max-width: 900px) { .summary-cols { grid-template-columns: 1fr; } }
.summary-list { background: var(--canvas); border: 1px solid var(--card-line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 5px; }
.summary-item { display: flex; align-items: flex-start; gap: 5px; }
.summary-item textarea {
  flex: 1; border: 0; background: transparent; resize: none; font-size: 11.5px; line-height: 1.4;
  padding: 0; min-height: 16px; overflow: hidden; outline: none;
}
.summary-item textarea:focus { background: var(--field); box-shadow: 0 0 0 2px var(--focus-ring); border-radius: 3px; }
.summary-item .bullet { font-size: 12px; line-height: 1.3; }
.summary-item button svg { width: 10px; height: 10px; }
.summary-left-out {
  background: var(--notice-bg); color: var(--notice-ink); border: 1px solid var(--notice-line);
  border-radius: 8px; padding: 8px 10px; font-size: 11.5px;
}
.summary-left-out ul { margin: 4px 0; padding-left: 18px; }
.box-textarea { width: 100%; border: 1px solid var(--card-line); border-radius: 8px; background: var(--field); padding: 8px 10px; font-size: 12.5px; line-height: 1.45; resize: none; overflow: hidden; outline: none; min-height: 60px; }
.box-textarea:focus { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--focus-ring); }
.signoff { border-width: 1.5px; }
.signoff.complete { border-color: var(--moss-50); }
.signoff.incomplete { border-color: var(--warn-40); }
.others-banner { background: var(--notice-bg); color: var(--notice-ink); font-size: 11.5px; padding: 7px 28px; border-bottom: 1px solid var(--notice-line); flex: none; }
.unsaved-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--opportunity); margin-right: 5px; vertical-align: middle; }

/* ---------- Design ---------- */

.design-split { flex: 1; display: flex; min-height: 0; }
.design-editor { width: 460px; min-width: 380px; flex: none; overflow: auto; border-right: 1px solid var(--card-line); }
/* The preview is the recap as principals see it: light, in either mode (the
   light tokens are set on it at the top of this file). */
.design-preview { flex: 1; overflow: auto; padding: 18px; background: #f6f8f4; color: var(--ink); min-width: 0; }
.color-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.color-row input[type=color] { width: 44px; height: 22px; border: 1px solid var(--field-line); border-radius: 5px; padding: 1px; background: var(--field); cursor: pointer; flex: none; }
.color-row .hex { width: 90px; font-family: var(--mono); font-size: 11px; }
.badge-sample { font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pv-header { border-radius: 10px; padding: 14px; color: #fff; }
.pv-kicker { font-size: 8.5px; font-weight: 700; letter-spacing: 1.1px; opacity: .85; }
.pv-title { font-size: 19px; font-weight: 700; margin: 6px 0; }
.pv-fact { background: rgba(255, 255, 255, .14); border-radius: 6px; padding: 5px 8px; }
.pv-fact b { display: block; font-size: 15px; }
.pv-fact span { font-size: 7px; font-weight: 600; opacity: .9; text-transform: uppercase; }
.pv-box { background: var(--surface); border: 1px solid var(--card-line); border-radius: 8px; padding: 9px; position: relative; }
.pv-off { position: absolute; top: 6px; right: 6px; font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 999px; background: rgba(92, 107, 94, .2); color: var(--muted); }
.pv-dim { opacity: .35; }
.pv-cell { width: 54px; text-align: center; padding: 2px 0; border-radius: 4px; font-size: 10px; }

/* ---------- Done / onboarding / auth ---------- */

.center-stack { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 30px; text-align: center; }
.done-check { width: 84px; height: 84px; border-radius: 50%; background: var(--win-12); display: flex; align-items: center; justify-content: center; color: var(--win); }
.done-check svg { width: 52px; height: 52px; }
.hero { background: var(--gradient); color: #fff; text-align: center; padding: 40px 20px 32px; display: flex; flex-direction: column; align-items: center; gap: 14px; flex: none; }
.hero-logo { width: 88px; height: 88px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.hero-logo img { width: 56px; height: 56px; object-fit: contain; }
.hero-logo svg { width: 34px; height: 34px; color: #4a7c2f; }
.hero h1 { font-size: 26px; margin: 0; }
.hero p { font-size: 13.5px; opacity: .9; margin: 0; max-width: 380px; }

.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--canvas); }
.auth-card { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--card-line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .06); }
.auth-card .brand-header { padding: 22px 26px; }
.auth-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.auth-body label { font-size: 11px; font-weight: 600; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.auth-body .input { padding: 8px 10px; font-size: 13.5px; }
.auth-body .link-btn { font-size: 12px; }

/* ---------- Two-factor sign-in (2FA) ---------- */
/* The QR code stays black on white in dark mode too: scanners need it. */
.twofa-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.45; }
.twofa-qr { display: flex; justify-content: center; }
.twofa-qr img { width: 244px; height: 244px; max-width: 100%; background: #fff; border-radius: 8px; border: 1px solid var(--card-line); image-rendering: pixelated; }
.twofa-codes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px;
  background: var(--field); border: 1px solid var(--card-line); border-radius: 8px; padding: 12px 14px;
  font-size: 13.5px; user-select: all;
}
/* A tick box with its words beside it, also inside the sign-in card, whose
   labels otherwise stack. */
.twofa-check, .auth-body label.twofa-check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 8px;
  font-size: 12px; font-weight: 400; color: var(--ink);
}
.twofa-check input { margin-top: 2px; flex: none; }
.twofa-key {
  flex: 1; min-width: 0; padding: 7px 10px; border: 1px solid var(--card-line); border-radius: 8px;
  background: var(--field); font-size: 13px; letter-spacing: .03em; word-spacing: .2em; user-select: all;
}
/* Under the title on every screen, for someone who must set 2FA up. */
.twofa-banner {
  margin-top: 12px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--notice-bg); color: var(--notice-ink); border: 1px solid var(--notice-line);
  border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600;
}
.twofa-banner svg { width: 15px; height: 15px; flex: none; }
.twofa-banner .btn { padding: 5px 12px; font-size: 12px; }

.users-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.users-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--card-line); }
.users-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }

.portal-admin-card { padding: 0; overflow: hidden; }
.portal-admin-summary {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: none; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: left;
}
.portal-admin-summary:hover { background: var(--moss-08); }
.portal-admin-summary > svg { width: 12px; height: 12px; color: var(--muted); flex: none; }
.portal-admin-logo {
  width: 40px; height: 40px; flex: none; overflow: hidden; border-radius: 8px;
  border: 1px solid var(--card-line); background: #e3e8e0;
  display: flex; align-items: center; justify-content: center;
}
.portal-admin-logo.large { width: 104px; height: 68px; }
.portal-admin-logo img { max-width: 88%; max-height: 88%; object-fit: contain; }
/* The empty box's initials or "No logo", readable on #e3e8e0 in both themes. */
.portal-admin-logo > span { color: #5c6b5e; }
.portal-admin-detail { border-top: 1px solid var(--card-line); padding: 16px; }
.portal-admin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.portal-switch-row { align-items: flex-start; }
/* The principal switch on a portal's page (portalAdmin.js). */
.principal-switch { border: 1px solid var(--card-line); border-radius: 8px; padding: 12px 14px; }
.principal-switch.off { background: var(--shade); }
.principal-switch-names { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.principal-switch-name {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px;
  border: 1px solid var(--card-line); border-radius: 999px; font-size: 11.5px;
}
.principal-switch-preview { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.portal-admin-table { border: 1px solid var(--card-line); border-radius: 8px; overflow-x: auto; }
.portal-admin-table .users-table tr:last-child td { border-bottom: 0; }
@media (max-width: 760px) {
  .portal-admin-grid { grid-template-columns: 1fr; }
}
.gap-20 { gap: 20px; }


/* Which portals show a recap */
.portal-choices {
  max-height: 320px; overflow: auto; border: 1px solid var(--card-line); border-radius: 8px;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.portal-choice {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 8px 10px;
  font-size: 12.5px; cursor: pointer; border-bottom: 1px solid var(--line-soft);
}
.portal-choice:hover { background: var(--moss-08); }
.portal-choice.locked { cursor: default; }
.portal-choice input { flex: none; margin: 0; accent-color: var(--leaf); }
.portal-recap-list { padding: 2px 12px; }
.portal-recap-row { padding: 8px 0; }
.portal-recap-row + .portal-recap-row { border-top: 1px solid var(--line-soft); }

/* The Post dialog's one line, the portals a posted recap shows in, and
   posted recaps waiting to be put in a portal */
.portal-post-summary {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px; border: 1px solid var(--card-line); border-radius: 8px;
}
.portal-name-chip {
  font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 10px;
  background: var(--moss-14); color: var(--forest-dark);
}
.portal-missing { padding: 8px 10px; border-radius: 8px; background: var(--moss-08); }
.portal-stray-group + .portal-stray-group { padding-top: 14px; border-top: 1px solid var(--line-soft); }

/* Emailing a posted recap: one part per portal, its people and its message */
.recap-email-portal { padding: 12px; border: 1px solid var(--card-line); border-radius: 10px; }
.recap-email-person {
  display: flex; align-items: flex-start; gap: 8px; min-width: 0; padding: 6px 8px;
  border-radius: 8px; cursor: pointer;
}
.recap-email-person:hover { background: var(--moss-08); }
.recap-email-person input { flex: none; margin: 3px 0 0; accent-color: var(--leaf); }
.recap-email-badge {
  font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 9px;
  background: var(--moss-14); color: var(--forest-dark);
}
.recap-email-body { width: 100%; min-height: 120px; }
.recap-email-others summary, .recap-email-history summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.recap-email-others[open] summary, .recap-email-history[open] summary { margin-bottom: 4px; }
.recap-email-asked { padding: 8px 10px; border-radius: 8px; background: var(--moss-08); }
.recap-email-typed-part { padding-top: 4px; }
.recap-email-typed-row { align-items: center; }
.recap-email-typed-label { width: 22px; flex: none; }
.recap-email-typed { flex: 1; min-width: 0; }
.recap-email-confirm { padding: 8px 10px; border-radius: 8px; background: var(--moss-08); overflow-wrap: anywhere; }

/* An email as it goes, in a frame that runs nothing. Email is written for a
   white page, as most email apps show it, dark mode or not. */
.email-preview {
  width: 100%; height: 420px; border: 1px solid var(--card-line); border-radius: 10px; background: #fff;
}
.email-preview.small { height: 230px; }
.email-template-columns { display: flex; gap: 16px; align-items: flex-start; }
.email-template-edit { flex: 1 1 0; min-width: 0; }
.email-template-preview { flex: 1 1 0; min-width: 0; position: sticky; top: 12px; }
.email-template-preview .email-preview { height: 560px; }
.email-template-message { width: 100%; min-height: 160px; }
.email-template-thumb { display: block; height: auto; max-width: 150px; border: 1px solid var(--card-line); border-radius: 6px; background: #fff; }
.email-template-placeholders summary { cursor: pointer; color: var(--muted); padding: 2px 0; }
.email-template-placeholders[open] summary { margin-bottom: 6px; }
.email-template-names { padding: 10px 12px; border: 1px solid var(--card-line); border-radius: 8px; }
.email-template-names .radio { align-items: flex-start; }
.email-template-names .radio input { margin-top: 3px; }
@media (max-width: 900px) {
  .email-template-columns { flex-direction: column; align-items: stretch; }
  .email-template-preview { position: static; }
}

/* A portal's contacts, and who gets what across all of them */
.portal-welcome-text { white-space: pre-wrap; }
.portal-contacts-table td { vertical-align: top; }
.portal-contacts-table td:first-child { min-width: 120px; }
.portal-contact-phone { white-space: nowrap; }
.portal-contacts-table a { color: inherit; }
.portal-primary { color: var(--opportunity); }
.portal-contact-notes { margin-top: 2px; white-space: pre-wrap; max-width: 260px; }
.portal-wants { display: flex; flex-direction: column; gap: 4px; }
.portal-want { display: flex; flex-direction: column; gap: 1px; }
.portal-want-chip {
  align-self: flex-start; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 10px; background: var(--moss-14); color: var(--forest-dark);
}
.portal-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px; }
.portal-contact-grid .input { width: 100%; }
.portal-want-row { padding-top: 8px; border-top: 1px solid var(--line-soft); }
.portal-want-fields {
  display: grid; gap: 6px; align-items: center;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.15fr) 18px;
}
.portal-want-fields .select, .portal-want-fields .input { width: 100%; }
.portal-want-x { color: var(--muted); justify-self: end; }
.portal-want-x svg { width: 14px; height: 14px; }
.wgw-top { padding-right: 16px; }
.wgw-top .portal-admin-summary { width: auto; flex: 1; min-width: 0; }
.wgw-table { display: flex; flex-direction: column; border: 1px solid var(--card-line); border-radius: 8px; padding: 2px 12px; }
.wgw-row { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 12px; padding: 7px 0; }
.wgw-row + .wgw-row { border-top: 1px solid var(--line-soft); }
.wgw-person { line-height: 1.5; overflow-wrap: anywhere; }
.wgw-person .link-btn { display: inline; padding: 0; }
@media (max-width: 640px) {
  .portal-contact-grid { grid-template-columns: 1fr; }
  .portal-want-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .wgw-row { grid-template-columns: 1fr; gap: 2px; }
  /* Each contact as a small card: a table seven columns wide can't be read on a phone. */
  .portal-contacts-table thead { display: none; }
  .portal-contacts-table tr { display: block; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
  .portal-contacts-table tr:last-child { border-bottom: 0; }
  .portal-contacts-table td { display: block; padding: 2px 0; border-bottom: 0; }
  .portal-contacts-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11px; }
  .portal-contacts-table td[data-label] .portal-wants { margin-top: 2px; }
}

/* Weekly ads */
.weekly-ad-pending { display: flex; flex-direction: column; }
.weekly-ad-row {
  display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1fr) 150px 22px;
  gap: 10px; align-items: end; padding: 12px 0; border-top: 1px solid var(--card-line);
}
.weekly-ad-row:first-child { border-top: 0; padding-top: 0; }
.weekly-ad-row .input, .weekly-ad-row .select { width: 100%; }
.weekly-ad-row .icon-btn { color: var(--muted); padding-bottom: 8px; }
.weekly-ad-row .icon-btn svg { width: 14px; height: 14px; }
.weekly-ad-file { align-self: center; min-width: 0; }
.weekly-ad-file svg { width: 13px; height: 13px; color: var(--muted); flex: none; }
.weekly-ad-empty { padding: 14px; border: 1px dashed var(--card-line); border-radius: 10px; text-align: center; }
.weekly-ad-week-card { padding: 0; overflow: hidden; }
.weekly-ad-week { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--card-line); }
@media (max-width: 760px) {
  .weekly-ad-row { grid-template-columns: 1fr 1fr; align-items: start; }
  .weekly-ad-file { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  .library-split, .design-split { flex-direction: column; }
  .principal-list, .design-editor { width: auto; border-right: 0; border-bottom: 1px solid var(--card-line); max-height: 40vh; }
  .page-content { padding: 18px; }
  .brand-header { padding: 18px; }
}

/* ---------- Product lists: the Mac app's layout ---------- */

.pl-scroll { overflow: hidden; display: flex; }
.pl-shell { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.pl-sidebar {
  border-right: 1px solid var(--card-line); background: var(--surface);
  display: flex; flex-direction: column; min-height: 0;
}
.pl-sidebar-scroll { flex: 1; overflow-y: auto; padding: 6px 8px 14px; }
.pl-section { font-size: 10.5px; font-weight: 600; color: var(--muted); padding: 14px 8px 4px; }
.pl-nav {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: 0; background: none; color: var(--ink); font: inherit; font-size: 13px;
  padding: 5px 8px; border-radius: 6px; cursor: pointer; text-align: left;
}
.pl-nav:hover { background: var(--moss-08); }
.pl-nav.on { background: var(--moss-20); font-weight: 600; }
.pl-nav > svg { width: 15px; height: 15px; color: var(--leaf); flex: none; }
.pl-nav.caution > svg { color: var(--opportunity); }
.pl-nav .pl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-nav .pl-badge { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.pl-nav .pl-badge.caution { color: var(--opportunity); }
.pl-nav .pl-twisty { width: 10px; height: 10px; color: var(--muted); flex: none; transition: transform .12s; }
.pl-nav .pl-twisty.open { transform: rotate(90deg); }
.pl-nav.pl-list { font-size: 12px; padding: 3px 8px 3px 26px; }
.pl-nav.pl-list > svg { width: 12px; height: 12px; }
.pl-nav.pl-list.empty > svg { color: var(--opportunity); }
.pl-nav.pl-list.excluded > svg { color: var(--muted); }
.pl-sidebar-foot {
  border-top: 1px solid var(--card-line); padding: 8px 10px;
  display: flex; align-items: center; gap: 6px;
}
.pl-icon-btn {
  border: 0; background: none; color: var(--ink); padding: 5px; border-radius: 6px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pl-icon-btn:hover:not(:disabled) { background: var(--moss-12); }
.pl-icon-btn:disabled { color: var(--faint); cursor: default; }
.pl-icon-btn svg { width: 15px; height: 15px; }
.pl-main { overflow-y: auto; min-width: 0; }
.pl-main-inner { padding: 18px 22px 32px; display: flex; flex-direction: column; gap: 14px; }
/* The two membership panes use the height the screen has: a tall one shows
   more of the list instead of empty space under a fixed box, and a short one
   falls back to a sensible minimum and scrolls the page as before. */
.pl-panes { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pl-panes > .pl-card {
  flex: 1 1 340px; min-width: 280px; display: flex; flex-direction: column;
  /* Measured once the pane is on screen; the fallback is for before that. */
  max-height: var(--pl-pane-max, calc(100vh - 340px));
}
.pl-pane-scroll { overflow: auto; flex: 1 1 auto; min-height: 120px; }
.pl-title { font-size: 20px; font-weight: 650; color: var(--ink); }
.pl-blurb { font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.pl-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pl-tiles.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pl-tile {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 11px 14px; display: flex; flex-direction: column; gap: 1px; min-width: 0;
}
.pl-tile .v { font-size: 24px; font-weight: 650; color: var(--forest); font-variant-numeric: tabular-nums; }
.pl-tile .l { font-size: 11px; color: var(--muted); }
.pl-tile.caution { border-color: color-mix(in srgb, var(--opportunity) 45%, var(--card-line)); }
.pl-tile.caution .v { color: var(--opportunity); }
.pl-tile.info .v { color: var(--info); }
.pl-tile.good .v { color: var(--win); }
.pl-tile.danger { border-color: var(--warn-40); }
.pl-tile.danger .v { color: var(--warn); }
/* Availability */
.av-tile-btn { border: 0; padding: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; display: flex; min-width: 0; }
.av-tile-btn > .pl-tile { flex: 1; }
.av-tile-btn.on > .pl-tile { box-shadow: 0 0 0 2px var(--focus-ring); border-color: var(--leaf); }
.av-table td { vertical-align: top; }
.av-row { cursor: pointer; }
.av-row:hover td { background: var(--moss-06); }
.av-section td { background: var(--canvas); padding-top: 10px; }
.av-bar { width: 130px; max-width: 100%; }
.av-chart-box { width: 100%; overflow: hidden; }
.av-chart { width: 100%; height: auto; display: block; }
.av-chart .av-grid { stroke: var(--card-line); }
.av-chart text { fill: var(--muted); }
.av-chart .av-chart-title { fill: var(--ink); }
:root[data-theme="dark"] .av-line.s0 { stroke: var(--forest); }
:root[data-theme="dark"] .av-dot.s0 { fill: var(--forest); }
.av-spark { display: block; }
.av-spark-base { stroke: var(--card-line); stroke-width: 1; }
.av-spark-line { fill: none; stroke: var(--leaf); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.av-spark-dot { fill: var(--leaf); }
.av-name-group, .av-rep { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pl-card {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 13px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.pl-card.caution { border-color: color-mix(in srgb, var(--opportunity) 40%, var(--card-line)); }
.pl-card.danger { border-color: var(--warn-40); }
.pl-card-title { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pl-card-title > svg { width: 15px; height: 15px; color: var(--leaf); flex: none; }
.pl-card.danger .pl-card-title > svg { color: var(--warn); }
.pl-line { display: flex; align-items: center; gap: 8px; font-size: 12px; min-width: 0; text-align: left; }
.pl-line > svg { width: 12px; height: 12px; flex: none; }
.pl-line.caution > svg { color: var(--opportunity); }
.pl-line.good > svg { color: var(--win); }
.pl-line.muted > svg { color: var(--faint); }
.pl-line .pl-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A principal switched off on its portal page: what's left out of a screen. */
.pl-switched-off {
  align-items: flex-start; flex-wrap: wrap; padding: 8px 12px;
  border: 1px solid var(--card-line); border-radius: 8px; background: var(--shade);
}
.pl-switched-off > svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--muted); }
.pl-link { border: 0; background: none; padding: 0; font: inherit; color: var(--info); cursor: pointer; text-align: left; }
.pl-link:hover { text-decoration: underline; }
.pl-pill {
  display: inline-flex; align-items: center; align-self: flex-start;
  font-size: 10px; font-weight: 600; padding: 1px 7px;
  border-radius: 999px; background: var(--moss-14); color: var(--forest-dark); white-space: nowrap;
}
.pl-pill.caution { background: color-mix(in srgb, var(--opportunity) 16%, transparent); color: var(--opportunity); }
.pl-pill.info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.pl-pill.danger { background: var(--warn-16); color: var(--warn); }
.pl-pill.muted { background: var(--shade); color: var(--muted); }
.pl-pill.good { background: var(--win-12); color: var(--win); }
.pl-aside { align-items: flex-end; }
.pl-field-bad { border-color: var(--warn) !important; }
.pl-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; align-items: start; }
.pl-mobile-nav { display: none; }
@media (max-width: 820px) {
  .pl-shell { grid-template-columns: 1fr; }
  .pl-sidebar { display: none; }
  .pl-mobile-nav { display: flex; gap: 8px; padding: 10px 16px 0; }
  .pl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-aside { align-items: flex-start; }
  .pl-main-inner { padding: 14px 16px 28px; }
}

/* ---------- Store Visits ---------- */
/* Its pages are big labelled buttons down the left, each saying what it
   shows, so nobody has to guess where things are. On a phone they sit in a
   grid at the top instead of folding into a menu that could be missed. */
.sv-side-head { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 10px 6px; }
.sv-nav {
  display: flex; align-items: center; gap: 12px; width: 100%; margin-bottom: 4px;
  border: 1px solid transparent; background: none; color: var(--ink); font: inherit;
  padding: 10px 12px; border-radius: 10px; cursor: pointer; text-align: left;
}
.sv-nav:hover { background: var(--moss-08); border-color: var(--card-line); }
.sv-nav.on { background: var(--moss-20); border-color: var(--leaf); box-shadow: inset 4px 0 0 var(--leaf); }
.sv-nav > svg { width: 20px; height: 20px; color: var(--leaf); flex: none; }
.sv-nav-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.sv-nav-label { font-size: 14px; font-weight: 650; }
.sv-nav-hint { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.sv-side-foot {
  border-top: 1px solid var(--card-line); padding: 10px 12px; display: flex; gap: 8px; align-items: flex-start;
  font-size: 11.5px; line-height: 1.4; color: var(--muted);
}
.sv-side-foot svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--info); }
.sv-mobile-nav { display: none; }
.sv-filters {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 8px 16px -12px rgba(0, 0, 0, .35);
}
/* Pinned at the top while the page scrolls under it, on a strip of the
   page's own background so nothing shows round its corners. */
.sv-pin { position: sticky; top: 0; z-index: 6; background: var(--canvas); padding-bottom: 2px; }
.sv-showing-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-showing-row .sv-showing { flex: 1 1 260px; }
.sv-compact-actions { display: none; gap: 8px; align-items: center; }
.sv-report-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.sv-report-line > svg { width: 14px; height: 14px; color: var(--leaf); flex: none; }
.sv-filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.sv-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sv-field-label { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sv-filter-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sv-showing { font-size: 12.5px; color: var(--ink); line-height: 1.45; }
.sv-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sv-figure {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.sv-figure-label { font-size: 12px; font-weight: 650; color: var(--muted); }
.sv-figure-value { font-size: 28px; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; line-height: 1.2; }
.sv-figure-detail { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.sv-figure-change { font-size: 11.5px; font-weight: 600; color: var(--forest-dark); }
.sv-figure.caution { border-color: color-mix(in srgb, var(--opportunity) 45%, var(--card-line)); }
.sv-figure.caution .sv-figure-value { color: var(--opportunity); }
/* A figure that opens a list (the store visits with no purpose). */
.sv-figure-btn { width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.sv-figure-btn:hover { border-color: var(--leaf); }
.sv-figure-btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.sv-figure-more { font-size: 11.5px; font-weight: 600; color: var(--leaf); margin-top: 2px; }
.sv-figure-btn:hover .sv-figure-more { text-decoration: underline; }
.sv-num td:not(:first-child), .sv-num th:not(:first-child) { text-align: right; }
/* Column titles that sort their table (tableSort.js): each is a button, with
   an arrow for the way it's sorted, faint until it is. In a column of figures
   the arrow goes before the title, so the title still lines up with them.
   The padding makes a bigger target for a finger without moving anything. */
.th-sort {
  background: none; border: 0; padding: 4px 2px; margin: -4px -2px; border-radius: 4px;
  font: inherit; color: inherit; text-align: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
}
.th-sort svg { width: 11px; height: 11px; flex: none; opacity: .45; }
.th-sort:hover, .th-sort.on { color: var(--ink); }
.th-sort:hover svg { opacity: .8; }
.th-sort.on svg { opacity: 1; color: var(--leaf); }
.th-sort.asc svg { transform: rotate(180deg); }
.th-sort:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.sv-num th:not(:first-child) .th-sort { flex-direction: row-reverse; }
/* Reached with the keyboard, a title stops clear of the pinned filters
   (about 160 to 210 points tall on a computer, 130 on a phone). */
.pl-main .th-sort { scroll-margin-top: 240px; }
.sv-sort-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 18px; font-size: 11px; color: var(--muted); }
@media (max-width: 1100px) { .sv-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
  .sv-mobile-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 16px 0; }
  .sv-nav.compact { flex-direction: column; gap: 4px; padding: 8px 4px; margin: 0; text-align: center; border-color: var(--card-line); }
  .sv-nav.compact > svg { width: 18px; height: 18px; }
  .sv-nav.compact .sv-nav-label { font-size: 12px; }
  .sv-nav.compact.on { box-shadow: inset 0 -3px 0 var(--leaf); }
  .sv-filter-row > .sv-field { flex: 1 1 140px; }
  .sv-filter-row select, .sv-filter-row .btn { width: 100%; max-width: none !important; }
}
/* On a phone, or a window too short for the whole bar: pinned as the Showing
   line, and Change filters opens the rest. */
@media (max-width: 820px), (max-height: 560px) {
  .sv-filters { padding: 10px 12px; }
  .sv-filters:not(.open) .sv-filter-row { display: none; }
  .sv-pin.open { position: static; }
  .sv-compact-actions { display: flex; }
  .pl-main .th-sort { scroll-margin-top: 170px; }
}
@media (max-width: 520px) {
  .sv-figures { grid-template-columns: minmax(0, 1fr); }
  /* Just "Back" on a phone; its tooltip still says where. */
  .app-back-to { display: none; }
}

/* ---------- Sales ---------- */
/* Laid out like Store Visits: big page buttons down the left, the filters
   pinned at the top. A brand's page is its spreadsheet: the accounts stay
   put at the left while the weeks scroll across, and the titles stay put
   while the accounts scroll down. */
.sales-side-log { padding: 8px 4px 2px; }
.sales-side-log .btn { width: 100%; }
.sales-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.sales-week-label { font-size: 13px; font-weight: 600; white-space: nowrap; padding: 0 4px; }
.sales-title-pill { margin-left: 8px; vertical-align: middle; }
.sales-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sales-pre { white-space: pre-wrap; }
.sales-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px 16px; }
.sales-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sales-fact-value { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.sales-fact-value .pl-pill { margin-left: 6px; vertical-align: middle; }
.sales-note { font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 8px; background: var(--moss-08); }

/* An entry, in full. */
.sales-entries { display: flex; flex-direction: column; }
.sales-entry { display: flex; flex-direction: column; gap: 5px; padding: 10px 0; min-width: 0; }
.sales-entry + .sales-entry { border-top: 1px solid var(--line-soft); }
.sales-entries > .sales-entry:first-child { padding-top: 2px; }
.sales-entry-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.sales-entry-day { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.sales-entry-where { font-size: 12.5px; font-weight: 600; color: var(--forest-dark); }
.sales-entry-done { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.sales-entry-next { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 12.5px; line-height: 1.45; }
.sales-entry-next > span:nth-child(2) { white-space: pre-wrap; overflow-wrap: anywhere; min-width: 0; }
.sales-entry-facts { display: flex; flex-wrap: wrap; gap: 3px 14px; font-size: 12px; line-height: 1.45; }
.sales-entry-facts > span { overflow-wrap: anywhere; white-space: pre-wrap; }
.sales-entry-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 11px; color: var(--muted); }
.sales-entry-links { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; }

/* Next steps that are due. */
.sales-due-list { display: flex; flex-direction: column; }
.sales-due { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.sales-due + .sales-due { border-top: 1px solid var(--line-soft); }
.sales-due-when { flex: none; width: 128px; display: flex; flex-direction: column; gap: 2px; }
.sales-due-what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
.sales-due-actions { flex: none; display: flex; gap: 12px; align-items: center; padding-top: 2px; }

/* The form for an entry, an account or a brand. */
.sales-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px; }
.sales-form-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sales-form-field.sales-span { grid-column: 1 / -1; }
.sales-form-field .input, .sales-form-field .select, .sales-form-field .textarea { width: 100%; }
.sales-pick { align-self: flex-start; min-width: 140px; }
/* A choice made stands out, in both themes: clicking it again clears it. */
.sales-pick button.on { background: var(--leaf); color: var(--on-accent); font-weight: 600; }
.sales-seg { display: inline-flex; flex: none; }
.sales-seg button { flex: none; white-space: nowrap; }
.sales-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sales-chips .column-chip { font-size: 12px; padding: 5px 12px; }
.sales-minutes { width: 84px !important; }
.sales-settle { display: flex; flex-direction: column; gap: 6px; }
.sales-settle:empty { display: none; }
.sales-settle .checkbox { align-items: flex-start; font-size: 12.5px; line-height: 1.4; }
.sales-settle .checkbox input { margin-top: 2px; flex: none; }
.sales-plan-list { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.5; display: flex; flex-direction: column; gap: 2px; }
.sales-plan-list ul { padding-left: 18px; font-size: 12px; }
.sales-plan-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--leaf); padding: 2px 0; }
.sales-plan-more[open] summary { margin-bottom: 4px; }
.sales-plan-more .sales-plan-list { max-height: 220px; overflow: auto; }

/* A brand's grid. */
.sales-grid-wrap {
  overflow: auto; max-height: calc(100vh - 290px); max-height: calc(100dvh - 290px); min-height: 260px;
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
}
.sales-grid { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.sales-grid th { position: sticky; top: 0; z-index: 2; background: var(--surface); white-space: nowrap; }
.sales-grid td { vertical-align: top; background: var(--surface); }
.sales-grid .sales-acct { position: sticky; left: 0; z-index: 1; min-width: 190px; max-width: 230px; border-right: 1px solid var(--card-line); }
.sales-grid th.sales-acct { z-index: 3; }
.sales-grid .sales-week { min-width: 125px; max-width: 220px; border-left: 1px solid var(--line-soft); }
.sales-grid.details .sales-week { min-width: 150px; }
.sales-grid .sales-week.now { background: color-mix(in srgb, var(--moss) 9%, var(--surface)); }
.sales-grid th.sales-week.now { color: var(--forest-dark); }
.sales-grid .sales-last { white-space: nowrap; }
.sales-grid tr.sales-brandwide td { background: color-mix(in srgb, var(--moss) 5%, var(--surface)); }
.sales-grid tr.sales-brandwide td.sales-week.now { background: color-mix(in srgb, var(--moss) 12%, var(--surface)); }
.sales-grid tr.sales-retired .sales-acct-name { color: var(--muted); text-decoration: line-through; }
.sales-clip {
  max-width: 180px; min-width: 110px; white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sales-acct-btn {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.sales-acct-name { font-size: 12.5px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.sales-acct-btn:hover .sales-acct-name { color: var(--leaf); text-decoration: underline; }
.sales-acct-sub { font-size: 11px; color: var(--muted); }
.sales-acct-pill .pl-pill { margin-left: 6px; vertical-align: 1px; }
.sales-cell {
  display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 34px; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: 6px; padding: 3px 4px; margin: -3px -4px; font: inherit; color: inherit;
}
.sales-cell:hover { background: var(--moss-08); }
.sales-cell:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.sales-cell-entry { display: flex; flex-direction: column; gap: 1px; }
.sales-cell-text {
  font-size: 11.5px; line-height: 1.35; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.sales-cell-by { font-size: 10.5px; color: var(--muted); }
.sales-cell-more { font-size: 10.5px; font-weight: 600; color: var(--leaf); }
.sales-cell-add { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--leaf); opacity: 0; }
.sales-cell-add svg { width: 11px; height: 11px; }
.sales-cell:hover .sales-cell-add, .sales-cell:focus-visible .sales-cell-add { opacity: 1; }
@media (hover: none) { .sales-cell-add { opacity: .55; } }

/* Reports. */
.sales-time th, .sales-time td { white-space: nowrap; padding-left: 7px; padding-right: 7px; }
.sales-time tr.sales-total td { font-weight: 650; border-top: 1px solid var(--card-line); background: var(--canvas); }
.av-table tr.sales-quiet td { background: color-mix(in srgb, var(--opportunity) 7%, transparent); }

/* A principal's page: its tabs, the Overview's cards side by side, and
   the Contacts tab's people, one row each. */
.principal-tabs { padding: 0; }
.principal-tabs .filter-tab { display: inline-flex; align-items: center; gap: 6px; }
.principal-tabs .filter-tab svg { width: 14px; height: 14px; flex: none; }
.po-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; align-items: start; }
.po-grid > .pl-card { min-width: 0; }
.po-list { display: flex; flex-direction: column; }
.po-row { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: 12.5px; min-width: 0; }
.po-row + .po-row { border-top: 1px solid var(--line-soft); }
.po-row-btn { width: 100%; background: none; border: 0; border-radius: 6px; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.po-row-btn:hover .po-title { color: var(--leaf); text-decoration: underline; }
.po-row-btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 1px; }
.po-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.po-row-side { flex: none; display: flex; gap: 10px; align-items: center; }
.po-clamp {
  white-space: pre-wrap; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.po-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.po-big { font-size: 26px; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; line-height: 1.15; }
.po-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.po-pills:empty { display: none; }
.po-block { display: block; margin-top: 2px; }
.po-address { white-space: pre-wrap; }
.po-details .sales-fact-value { overflow-wrap: anywhere; }
.po-link { color: var(--leaf); overflow-wrap: anywhere; }
.po-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--leaf); padding: 2px 0; }
.po-more[open] summary { margin-bottom: 6px; }
.po-depts { display: flex; flex-direction: column; gap: 10px; }
.po-dept { display: flex; flex-direction: column; gap: 6px; }
.po-contact { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; min-width: 0; overflow-wrap: anywhere; }
.po-contact-ways { display: flex; flex-wrap: wrap; gap: 2px 12px; }
.po-contact a, .pc-who a { color: inherit; }
.po-table td, .po-table th { font-size: 12px; }
.pc-list { display: flex; flex-direction: column; }
.pc-row { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) auto; gap: 6px 18px; padding: 10px 0; align-items: start; }
.pc-row + .pc-row { border-top: 1px solid var(--line-soft); }
.pc-who, .pc-what { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.pc-actions { display: flex; gap: 12px; align-items: center; }
.pc-report + .pc-report { padding-top: 8px; border-top: 1px solid var(--line-soft); }
/* The contact form's divisions and retailers. */
.contact-divisions .checkbox { font-size: 12.5px; }
.contact-retailer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.contact-retailer-chips:empty { display: none; }
.contact-chip {
  display: inline-flex; align-items: center; gap: 2px; font-size: 11.5px; font-weight: 600;
  padding: 2px 3px 2px 9px; border-radius: 999px; background: var(--moss-14); color: var(--forest-dark);
}
.contact-chip-x {
  display: inline-flex; border: 0; background: none; padding: 3px; border-radius: 999px; cursor: pointer; color: inherit;
}
.contact-chip-x:hover { background: var(--moss-20); }
.contact-chip-x svg { width: 10px; height: 10px; }
@media (max-width: 640px) {
  .po-grid { grid-template-columns: minmax(0, 1fr); }
  .pc-row { grid-template-columns: minmax(0, 1fr); }
}

/* On a phone the pinned bar's buttons wrap rather than run off the edge. */
.sales-shell .sv-compact-actions { flex-wrap: wrap; }
@media (max-width: 640px) {
  .sales-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .sales-tiles .pl-tile { padding: 9px 10px; }
  .sales-tiles .pl-tile .v { font-size: 19px; }
  .sales-form-grid { grid-template-columns: minmax(0, 1fr); }
  .sales-due { flex-wrap: wrap; }
  .sales-due-when { width: auto; flex-direction: row; gap: 8px; align-items: center; }
  .sales-due-what { flex-basis: 100%; }
  .sales-grid .sales-acct { min-width: 140px; max-width: 160px; }
  .sales-grid .sales-week { min-width: 130px; }
}

/* Principals and Retailers in the sidebar: groups that fold open (the
   owner, 2026-10-21). An open group lists every row, its Find box at the
   top; the retailers sit under their banners. */
.sales-side-group { margin-top: 10px; }
.sales-side-head { font-weight: 650; padding: 7px 8px; }
.sales-side-head .pl-twisty { width: 11px; height: 11px; }
.sales-side-rows { display: flex; flex-direction: column; gap: 1px; padding: 4px 0 6px; }
.sales-side-find { margin: 2px 4px 6px 22px; width: calc(100% - 26px); font-size: 12.5px; padding: 5px 8px; }
.sales-side-banner { font-size: 10.5px; font-weight: 650; color: var(--muted); padding: 8px 8px 2px 24px; text-transform: uppercase; letter-spacing: .04em; }
.pl-nav.sales-side-row { padding-left: 24px; }
.pl-nav.sales-side-row.excluded .pl-label { color: var(--muted); }
.sales-side-none { font-size: 11.5px; color: var(--muted); padding: 2px 8px 4px 24px; line-height: 1.4; }
.sales-side-none.c-warn { color: var(--warn); }

/* The Overview's Snapshot across the top, and Product Lists, Availability
   and Store Visits a full row each at the bottom. */
.po-snap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px 22px; align-items: start; }
.po-rows { display: flex; flex-direction: column; gap: 12px; }
.po-rows > .pl-card { min-width: 0; }
.po-copy { white-space: pre-wrap; overflow-wrap: anywhere; padding: 8px 10px; border-radius: 8px; background: var(--moss-08); line-height: 1.5; user-select: text; }
.po-contact-line { gap: 2px; }
.gap-2 { gap: 2px; }

/* The log form: the retailer's part, the meeting for several principals. */
.sales-entry-retailer { font-size: 12.5px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 8px; border-left: 3px solid var(--moss-20); }
.sales-retailer-part { padding: 2px 0 2px 12px; border-left: 3px solid var(--moss-20); }
.sales-also-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px;
  max-height: 190px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--card-line); border-radius: 8px;
}
.sales-also-list .checkbox { font-size: 12.5px; }
.sales-scope-note { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, var(--info) 10%, transparent); line-height: 1.45; }
.sales-scope-note svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--info); }

/* Retailers: the banner lines in the summary, the internal part of a
   retailer's page, Retailer setup and the review of accounts to add. */
.av-table tr.sales-banner-row td { background: var(--canvas); font-size: 12px; padding-top: 10px; border-top: 1px solid var(--card-line); }
.sales-internal-head { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 650; color: var(--muted); padding-top: 6px; }
.sales-internal-head svg { width: 13px; height: 13px; flex: none; }
.sales-setup td { vertical-align: top; }
.sales-setup td:nth-child(1) { min-width: 180px; }
.sales-setup td:nth-child(2) { min-width: 170px; }
.sales-setup td:nth-child(3) { min-width: 240px; }
.sales-setup .input, .sales-setup .textarea { width: 100%; }
.sales-preload { display: flex; flex-direction: column; gap: 12px; }
.sales-preload-row { align-items: flex-start; padding: 4px 0; }
.sales-preload-row input { margin-top: 3px; flex: none; }
.sales-preload-row.there { opacity: .7; cursor: default; }
@media (max-width: 760px) {
  .po-snap { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Home ---------- */
.home-page { max-width: 980px; margin: 0 auto; padding: 28px 28px 40px; display: flex; flex-direction: column; gap: 20px; }
.home-hello { margin: 0; font-size: 24px; color: var(--forest-dark); }
.home-blurb { margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
/* A run of boxes: one group of the row at the top, under its name. */
.home-run { display: flex; flex-direction: column; gap: 8px; }
.home-group { margin: 4px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.home-tile {
  display: flex; align-items: flex-start; gap: 14px; text-align: left; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 14px; padding: 18px; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.home-tile:hover, .home-tile:focus-visible { border-color: var(--leaf); box-shadow: 0 0 0 3px var(--focus-ring); }
.home-icon {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--moss-14);
  display: inline-flex; align-items: center; justify-content: center;
}
.home-icon svg { width: 22px; height: 22px; color: var(--leaf); }
.home-text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.home-title { font-size: 16px; font-weight: 700; }
.home-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.home-hint { font-size: 12px; font-weight: 650; color: var(--opportunity); }
.home-go { flex: none; align-self: center; color: var(--faint); display: inline-flex; }
.home-go svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .home-page { padding: 18px 16px 28px; } }

/* After an update: a page open since before it offers to reload. */
.new-version {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 60;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: max-content; max-width: calc(100vw - 32px);
  background: var(--surface); color: var(--ink); border: 1px solid var(--leaf); border-radius: 12px;
  padding: 10px 14px; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); font-size: 13px;
}

/* ---------- Guide & SOP ---------- */
/* The team's procedure, read beside the work it describes: the contents stay
   put on the left while the sections scroll, and it prints as one document. */
.guide-layout {
  display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 32px;
  max-width: 1120px; margin: 0 auto; padding: 24px 28px 40px;
}
.guide-toc {
  position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: 14px;
  max-height: calc(100vh - 250px); max-height: calc(100dvh - 250px); overflow: auto; padding-right: 4px;
}
.guide-search { width: 100%; }
.guide-toc-part { display: flex; flex-direction: column; gap: 2px; }
.guide-toc-title { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.guide-toc-link {
  text-align: left; background: none; border: 0; padding: 4px 8px; border-radius: 6px;
  font: inherit; font-size: 12.5px; color: var(--ink); cursor: pointer;
}
.guide-toc-link:hover { background: var(--line-soft); }
.guide-body { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.guide-part { display: flex; flex-direction: column; gap: 14px; }
.guide-part-head h1 { margin: 0; font-size: 19px; color: var(--forest-dark); }
.guide-part-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.guide-section {
  background: var(--surface); border: 1px solid var(--card-line); border-radius: 12px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px;
}
.guide-section.just-landed { animation: landed 1.4s ease-out; }
.guide-section h2 { margin: 0; font-size: 15px; color: var(--ink); }
.guide-who { font-size: 10.5px; font-weight: 600; color: var(--leaf); text-transform: uppercase; letter-spacing: .05em; }
.guide-summary { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.guide-p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.guide-steps, .guide-list { margin: 0; padding-left: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink); }
.guide-steps li, .guide-list li { margin: 3px 0; }
.guide-body strong, .guide-quote strong { font-weight: 650; color: var(--forest-dark); }
.guide-note {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; border: 1px solid var(--card-line);
}
.guide-note svg { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.guide-note.tip { background: var(--line-soft); }
.guide-note.tip svg { color: var(--info); }
.guide-note.warn { background: var(--notice-bg); color: var(--notice-ink); border-color: var(--notice-line); }
.guide-problems { display: flex; flex-direction: column; gap: 8px; }
.guide-problem { border: 1px solid var(--card-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.guide-symptom { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.guide-symptom svg { flex: none; width: 14px; height: 14px; margin-top: 2px; color: var(--opportunity); }
.guide-fix { font-size: 12.5px; line-height: 1.55; color: var(--muted); padding-left: 22px; }
.guide-related { font-size: 12px; }
.guide-print-cover { display: none; }
/* The "?" beside the thing it explains, and what it quotes. */
.guide-help { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; }
.guide-help svg { width: 13px; height: 13px; }
.guide-quote {
  margin: 0; padding: 10px 14px; border-left: 3px solid var(--moss); background: var(--line-soft); border-radius: 0 8px 8px 0;
  display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--ink);
}
.guide-quote p { margin: 0; color: var(--ink); font-size: 12.5px; }
.modal .guide-quote .guide-steps { font-size: 12.5px; }

@media (max-width: 800px) {
  .guide-layout { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
  .guide-toc { position: static; max-height: none; }
}

/* Printing the guide is how it becomes a PDF: every section, in order, on
   white, without the app around it. */
@media print {
  html, body, #app { height: auto !important; background: #fff !important; }
  .guide-page { height: auto !important; display: block !important; background: #fff !important; }
  .guide-page .brand-header, .guide-page .footer, .guide-toc, .modal-backdrop, .toast, .new-version { display: none !important; }
  .guide-page .page-scroll { overflow: visible !important; }
  .guide-layout { display: block; padding: 0; max-width: none; }
  .guide-page, .guide-page * { color: #1d2b1f !important; box-shadow: none !important; }
  .guide-section { border-color: #d5dbd2 !important; background: #fff !important; margin-bottom: 14px; }
  .guide-section h2, .guide-who, .guide-summary { break-after: avoid; }
  .guide-steps li, .guide-list li { break-inside: avoid; }
  .guide-note, .guide-problem { break-inside: avoid; background: #fff !important; border-color: #d5dbd2 !important; }
  .guide-part { break-before: page; }
  .guide-print-cover { display: block; margin-bottom: 18px; }
  .guide-print-cover h1 { font-size: 24px; margin: 6px 0; }
  .guide-print-contents { columns: 2; column-gap: 28px; font-size: 10.5px; line-height: 1.5; margin-top: 18px; }
  .guide-print-contents-part { break-inside: avoid; margin-bottom: 10px; }
  .guide-print-mark { font-size: 11px; font-weight: 700; letter-spacing: .12em; }
  .guide-part-head h1 { color: #2c5f2d !important; }
}

/* Principals, Dan's round (2026-10-22): a retailer's class badge, the
   class chips, the page header pinned with its filter bar, sections that
   fold, Arrange sections, and the log form's accounts ticked. */
.sales-class {
  display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1; flex: none;
  background: var(--moss-15); color: var(--forest-dark);
}
.sales-class-a { background: var(--forest-dark); color: var(--surface); }
.sales-class-b { background: color-mix(in srgb, var(--info) 18%, transparent); color: var(--info); }
.sales-class-c { background: var(--moss-08); color: var(--muted); border: 1px solid var(--card-line); }
.pl-nav .sales-class { margin-left: 4px; }
.sales-class-chips { margin: 0 4px 6px 22px; gap: 4px; }
.sales-class-chips .column-chip { font-size: 11px; padding: 3px 8px; }
.sales-head-pin {
  position: sticky; top: 0; z-index: 7; background: var(--canvas);
  display: flex; flex-direction: column; gap: 14px; margin-top: -18px; padding-top: 18px;
}
.sales-head-pin > .sv-pin { position: static; }
@media (max-width: 820px), (max-height: 560px) {
  /* Too tall to pin on a phone: just the filter bar stays. */
  .sales-head-pin { display: contents; }
  .sales-head-pin > .sv-pin { position: sticky; }
  .sales-head-pin > .sv-pin.open { position: static; }
}
.sales-fold {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: -3px 0 -3px -4px;
  border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; flex: none; padding: 0;
}
.sales-fold:hover { background: var(--moss-08); color: var(--ink); }
.sales-fold svg { width: 14px; height: 14px; transition: transform .12s; }
.sales-fold[aria-expanded="true"] svg { transform: rotate(90deg); }
.pl-card.folded > :not(.pl-card-title) { display: none !important; }
.pl-card.folded { padding-bottom: 12px; }
.pl-grid-2 > .pl-card:only-child { grid-column: 1 / -1; }
.sales-arrange-row { align-items: center; }
.sales-arrange { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.sales-arrange-item { display: flex; gap: 6px; align-items: center; padding: 4px 6px; border: 1px solid var(--card-line); border-radius: 8px; }
.sales-pick-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px;
  max-height: 180px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--card-line); border-radius: 8px;
}
.sales-pick-list .checkbox { font-size: 12.5px; }
.sales-pick-list > .t-105 { grid-column: 1 / -1; padding-top: 4px; }
.sales-also-accounts { padding: 2px 0 8px 24px; }
.sales-also-list:has(.sales-also-accounts) { grid-template-columns: minmax(0, 1fr); max-height: 360px; }

/* ---------- Store Visits: the tabs, Activity and the Gallery ---------- */
/* Summary is Store Visits as it always was; Activity and the Gallery are the
   office's (not Viewers'). The tabs sit under the header, the page under them. */
.sv-tabbed { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.sv-tabbed > .pl-shell, .sv-tabbed > .pl-main { flex: 1; min-height: 0; }
.sv-tabs {
  display: flex; gap: 4px; padding: 6px 18px 0; border-bottom: 1px solid var(--card-line);
  background: var(--surface); overflow-x: auto; flex: none;
}
.sv-tab {
  display: flex; align-items: center; gap: 8px; border: 0; background: none; color: var(--ink); font: inherit;
  padding: 8px 14px 9px; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap;
}
.sv-tab:hover { background: var(--moss-08); }
.sv-tab.on { border-bottom-color: var(--leaf); }
.sv-tab:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.sv-tab > svg { width: 18px; height: 18px; color: var(--leaf); flex: none; }
.sv-tab-text { display: flex; flex-direction: column; text-align: left; }
.sv-tab-label { font-size: 14px; font-weight: 650; }
.sv-tab.on .sv-tab-label { color: var(--forest-dark); }
.sv-tab-hint { font-size: 11px; color: var(--muted); }
@media (max-width: 820px) {
  .sv-tabs { padding: 4px 8px 0; }
  .sv-tab { padding: 8px 10px; flex: 1 1 0; justify-content: center; }
  .sv-tab-hint { display: none; }
}

.act-kinds { display: flex; gap: 4px; flex-wrap: wrap; }
.act-kind, .act-view {
  border: 1px solid var(--field-line); background: var(--field); color: var(--ink); border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.act-view { border-radius: 8px; padding: 6px 14px; }
.act-kind.on, .act-view.on { background: var(--moss-20); border-color: var(--leaf); font-weight: 650; }
.act-kind svg { width: 12px; height: 12px; color: var(--leaf); }
.act-views { display: flex; gap: 6px; }
.act-list {
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--card-line);
  border-radius: 10px; overflow: hidden;
}
.act-day {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  padding: 10px 14px 5px; background: var(--canvas); border-top: 1px solid var(--card-line);
}
.act-day:first-child { border-top: 0; }
.act-row {
  display: grid; grid-template-columns: 70px minmax(0, 2.2fr) minmax(0, 1.1fr) minmax(0, 1.4fr) 60px; gap: 10px;
  align-items: center; width: 100%; border: 0; border-top: 1px solid var(--line-soft); background: none; color: var(--ink);
  font: inherit; font-size: 13px; text-align: left; padding: 9px 14px; cursor: pointer;
}
.act-day + .act-row { border-top: 0; }
.act-row:hover { background: var(--moss-08); }
.act-row:focus-visible { outline: 2px solid var(--leaf); outline-offset: -2px; }
.act-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12px; }
.act-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.act-what { display: flex; align-items: flex-start; gap: 6px; font-weight: 600; min-width: 0; }
.act-what > svg { margin-top: 2px; }
.act-what-text { min-width: 0; overflow-wrap: anywhere; }
.act-what svg, .act-rep svg, .act-store svg { width: 14px; height: 14px; color: var(--leaf); flex: none; }
.act-sub { font-weight: 400; font-size: 11.5px; color: var(--muted); }
.act-marks { display: flex; gap: 4px; flex-wrap: wrap; }
.act-marks:empty { display: none; }
.act-rep, .act-store { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.act-store { flex-wrap: wrap; }
.act-source {
  font-size: 10px; font-weight: 600; color: var(--muted); border: 1px solid var(--card-line); border-radius: 999px;
  padding: 1px 7px; justify-self: end; white-space: nowrap;
}
.act-more { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 6px 0; flex-wrap: wrap; }
@media (max-width: 820px) {
  .act-row { grid-template-columns: 62px minmax(0, 1fr); gap: 4px 10px; }
  .act-rep, .act-store, .act-source { grid-column: 2; }
  .act-source { justify-self: start; }
}

.act-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.act-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.act-fact-label { font-size: 11px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.act-fact-value { font-size: 13px; overflow-wrap: anywhere; }
.act-note { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; }
.act-note svg { width: 14px; height: 14px; color: var(--info); flex: none; margin-top: 2px; }
.act-answer { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.act-answer:first-of-type { border-top: 0; }
.act-q { font-size: 12px; font-weight: 650; color: var(--muted); }
.act-a { font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.act-thumbs { display: flex; flex-wrap: wrap; gap: 6px; }
.act-thumb {
  width: 96px; height: 96px; padding: 0; border: 1px solid var(--card-line); border-radius: 8px; overflow: hidden;
  background: var(--shade); cursor: zoom-in;
}
.act-thumb img, .act-tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.act-thumb-missing { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--faint); }
.act-thumb-missing svg { width: 24px; height: 24px; }

.act-lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(10, 14, 10, .9); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; padding: 64px 16px 16px;
}
.act-lightbox-bar { position: absolute; top: 12px; left: 16px; right: 16px; display: flex; gap: 8px; }
.act-lightbox-img { max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 6px; }
.act-lightbox-caption {
  color: #fff; font-size: 12.5px; display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
  max-width: 900px; overflow-wrap: anywhere;
}
.act-lightbox-caption a { color: #cfe6b5; }
.act-lightbox-caption .muted { color: #c8cfc5; }
.act-lightbox-missing { color: #ffd7a8; }

.act-bars { display: flex; flex-direction: column; gap: 6px; }
.act-bar-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 2fr) auto; gap: 10px; align-items: center; font-size: 12.5px; }
.act-bar-label { overflow-wrap: anywhere; }
.act-bar-track { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.act-bar { display: block; height: 100%; background: var(--leaf); border-radius: 999px; }
.act-bar-count { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.act-figures { display: flex; gap: 24px; flex-wrap: wrap; }
.act-figures > div { display: flex; flex-direction: column; gap: 2px; }
.act-figure { font-size: 22px; font-weight: 700; color: var(--forest); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .act-bar-row { grid-template-columns: minmax(0, 1fr) auto; } .act-bar-track { grid-column: 1 / -1; grid-row: 2; } }

.act-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.act-tile {
  position: relative; background: var(--surface); border: 1px solid var(--card-line); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column; min-width: 0;
}
.act-tile.on { border-color: var(--leaf); box-shadow: 0 0 0 2px var(--leaf); }
.act-tile-img { aspect-ratio: 1; padding: 0; border: 0; background: var(--shade); cursor: zoom-in; display: block; width: 100%; }
.act-tick {
  position: absolute; top: 6px; left: 6px; background: var(--surface); border-radius: 6px; padding: 4px 5px; display: flex;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.act-tick input { width: 18px; height: 18px; margin: 0; cursor: pointer; }
.act-tile-text { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 8px; font-size: 11.5px; min-width: 0; }
.act-tile-source {
  position: absolute; top: 6px; right: 6px; font-size: 10px; font-weight: 600; background: var(--surface);
  color: var(--ink); border-radius: 999px; padding: 1px 7px;
}
@media (max-width: 520px) { .act-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }