@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Source+Sans+3:wght@400;600;700&family=Caveat:wght@500;700&family=IBM+Plex+Mono:wght@500&display=swap");

/* ==========================================================================
   LocalLetters theme for the client app.
   Loaded only when the server brands the page as LocalLetters; every rule is
   scoped under html[data-brand="localletters"] so PatientScript never sees it.
   Order: brand tokens -> each page's own variables -> type -> components.
   Palette and type come from the marketing site (localletters-site/BRAND.md).
   ========================================================================== */

html[data-brand="localletters"] {
  /* Brand tokens */
  --ll-paper: #FAF6EE;
  --ll-surface: #FFFFFF;
  --ll-ink: #14233A;
  --ll-ink-soft: #1D2A44;
  --ll-muted: #56627A;          /* 5.1:1 on tint, 6.1:1 on white */
  --ll-line: #E4DCCB;
  --ll-line-soft: #EFE8DA;
  --ll-field-border: #948870;   /* 3.5:1 on white: input edges must be visible */
  --ll-accent: #C63D1F;         /* mailbox red: fills only (white text 5.1:1) */
  --ll-accent-ink: #9E2F15;     /* red for text, hover, borders (6.1:1 on tint) */
  --ll-accent-tint: #FBEAE4;
  --ll-tint: #F3EAD9;
  --ll-navy: #14233A;
  --ll-sun: #F2B33D;
  --ll-sun-tint: #FDF1D6;
  /* Status. Error is a crimson, deliberately bluer and darker than the brand
     red, and always paired with an icon or a rule so it never reads as
     "brand". */
  --ll-error: #A51D2D;
  --ll-error-bg: #FBE9EC;
  --ll-error-border: #E7B3BC;
  --ll-ok: #2C6B3B;
  --ll-ok-bg: #E4F0E4;
  --ll-ok-border: #A9CDB0;
  --ll-warn: #835410;
  --ll-warn-bg: #FDF1D6;
  --ll-warn-border: #E9C77A;

  --ll-display: "Bricolage Grotesque", system-ui, sans-serif;
  --ll-body: "Source Sans 3", system-ui, sans-serif;
  --ll-hand: "Caveat", cursive;
  --ll-mono: "IBM Plex Mono", ui-monospace, monospace;
  --ll-ring: 0 0 0 2px var(--ll-navy);

  /* index.html / handwriting-editor.html / login.html variables */
  --paper: var(--ll-paper);
  --paper-deep: var(--ll-tint);
  --paper-sidebar: var(--ll-tint);
  --card: var(--ll-surface);
  --card-lift: #FFFCF6;
  --ink: var(--ll-ink);
  --ink-soft: var(--ll-ink-soft);
  --subtext: var(--ll-muted);
  --whisper: var(--ll-muted);
  --wash: var(--ll-accent-ink);
  --wash-deep: #7F2410;
  --wash-tint: var(--ll-accent-tint);
  --hairline: var(--ll-line);
  --hairline-soft: var(--ll-line-soft);
  --hairline-strong: #CDBFA5;
  --caution: var(--ll-warn);
  --caution-bg: var(--ll-warn-bg);
  --caution-border: var(--ll-warn-border);
  --positive: var(--ll-ok);
  --positive-bg: var(--ll-ok-bg);
  --alert: var(--ll-error);
  --shadow-soft: 0 1px 0 rgba(20, 35, 58, 0.05), 0 2px 10px rgba(20, 35, 58, 0.05);
  --shadow-lift: 0 2px 0 rgba(20, 35, 58, 0.08), 0 10px 26px rgba(20, 35, 58, 0.12);
  --radius: 8px;
  --radius-lg: 10px;
  --muted: var(--ll-muted);
  --text: var(--ll-ink);
  --field: var(--ll-tint);
  --tint: var(--ll-accent-tint);

  /* auth-action.html / programs.html variables */
  --surface: var(--ll-surface);
  --line: var(--ll-line);
  --accent: var(--ll-accent);
  --warn: var(--ll-error);
  --display: var(--ll-display);
  --body: var(--ll-body);
  --mono: var(--ll-mono);
}

/* ==========================================================================
   Type
   ========================================================================== */

html[data-brand="localletters"] body {
  font-family: var(--ll-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ll-ink);
  background-color: var(--ll-paper);
  background-image: none;
}

/* The app and editor name their old typefaces (Archivo, Inter, Fraunces,
   Instrument Sans) on dozens of selectors and in inline styles. Rather than
   chase each one, the body face is set on everything on those pages, and the
   display / hand / mono faces are put back where they belong just below.
   SVG text (card previews) is left alone. */
html[data-brand="localletters"] body:is(:has(> .app-shell), :has(> header .brand-line), :has(> .login-card))
  :where(*:not(svg, svg *, code, kbd, pre)) {
  font-family: var(--ll-body) !important;
}

/* Display: headings and the few big numbers. */
html[data-brand="localletters"] :is(h1, h2, h3, h4,
  .program-title, .batch-card-title, .recurring-card h3, .format-card-title,
  .hw-upgrade-title, .vertical-card-title, .summary .stat-value,
  .wizard-price-pill .amount, .practice-name, .empty-state h3,
  .warning-header, .banner h4, .char-label, .bar b, .send-total) {
  font-family: var(--ll-display) !important;
  font-weight: 800;
  font-style: normal;
  letter-spacing: -0.02em;
}
html[data-brand="localletters"] h1 { font-size: 36px; line-height: 1.05; }
html[data-brand="localletters"] h2 { font-size: 23px; line-height: 1.15; }
html[data-brand="localletters"] h3 { font-size: 18px; line-height: 1.25; }

/* Mono: small labels, codes, counters. */
html[data-brand="localletters"] :is(code, .mono, .chip .chip-count,
  .program-item-meta, .program-meta, .program-note, .program-tier,
  .program-status, .send-month, .sub-facts, .sig-label, .sig-val,
  .send-status, .subrow .zip, .billrow .zip, .subcard .state,
  .subcard h3 .zip, .review-value.mono, .label-text,
  .slider-row .val, .variant .vlabel, .message-meta .tokens,
  .directory-header-row, .summary .stat-label, .wizard-price-pill .label,
  .review-item .review-label) {
  font-family: var(--ll-mono) !important;
  font-weight: 500;
}

/* Hand: anything that stands for the written card. */
html[data-brand="localletters"] :is(.card .card-body, .hw-library-card .hw-sample,
  .review-item .review-value.caveat, [style*="Caveat"]) {
  font-family: var(--ll-hand) !important;
}

/* The old faces leaned on italic for asides; Source Sans doesn't need it. */
html[data-brand="localletters"] :is(.serif-italic, .page-header .page-sub,
  .directory-row .name-sub, .selection-bar .count, .recurring-icon,
  .wstep-num, .format-card-price, .steps-list li::before, .vertical-card-icon,
  .brand-line .meta, .save-indicator, .signature-meta, .message-card-header strong,
  .add-message, .cycler-info, .small-help, .loading-screen, .error-screen,
  .sidebar .mark-only, .empty-state h3) {
  font-style: normal;
}

html[data-brand="localletters"] a { color: var(--ll-accent-ink); text-decoration-thickness: 1px; }
html[data-brand="localletters"] a:hover { color: var(--ll-ink); }
html[data-brand="localletters"] ::selection { background: rgba(242, 179, 61, 0.45); color: var(--ll-ink); }

/* ==========================================================================
   Focus: sun outline with a navy inner ring, everywhere, same as the site.
   ========================================================================== */

html[data-brand="localletters"] :is(a, button, input, select, textarea, summary, [tabindex], .subrow .bar):focus-visible {
  outline: 3px solid var(--ll-sun) !important;
  outline-offset: 2px !important;
  box-shadow: var(--ll-ring) !important;
}
html[data-brand="localletters"] :is(input, select, textarea):focus {
  border-color: var(--ll-navy);
  box-shadow: var(--ll-ring);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* index.html: bare <button> is the primary action. */
html[data-brand="localletters"] button,
html[data-brand="localletters"] a.btn.primary,
html[data-brand="localletters"] .btn {
  font-family: var(--ll-body);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  border-radius: 8px;
}
html[data-brand="localletters"] .app-shell button:not(.secondary, .ghost, .nav-item, .chip, .format-card,
  .hw-library-card, .vertical-card, .data-source-card, .program-item, .lockbtn, .fmt-btn, .varbtn,
  .sigmenu-btn, [id="sidebarSignOut"], .settings-nav button),
html[data-brand="localletters"] .app-shell a.btn.primary,
html[data-brand="localletters"] #onboardingOverlay button:not(.secondary, .ghost, .vertical-card, .data-source-card),
html[data-brand="localletters"] .login-card button[type="submit"],
html[data-brand="localletters"] body:has(> .card .mark) .card button,
html[data-brand="localletters"] .btn:not(.secondary, .ghost, .danger),
html[data-brand="localletters"] button.act:not(.ghost) {
  background: var(--ll-accent);
  border: 2px solid var(--ll-accent);
  color: #fff;
  padding: 10px 20px;
  min-height: 44px;
}
html[data-brand="localletters"] .app-shell button:not(.secondary, .ghost, .nav-item, .chip, .format-card,
  .hw-library-card, .vertical-card, .data-source-card, .program-item, .lockbtn, .fmt-btn, .varbtn,
  .sigmenu-btn, [id="sidebarSignOut"], .settings-nav button):hover:not(:disabled),
html[data-brand="localletters"] .app-shell a.btn.primary:hover,
html[data-brand="localletters"] #onboardingOverlay button:not(.secondary, .ghost, .vertical-card, .data-source-card):hover:not(:disabled),
html[data-brand="localletters"] .login-card button[type="submit"]:hover:not(:disabled),
html[data-brand="localletters"] body:has(> .card .mark) .card button:hover:not(:disabled),
html[data-brand="localletters"] .btn:not(.secondary, .ghost, .danger):hover:not(:disabled),
html[data-brand="localletters"] button.act:not(.ghost):hover:not(:disabled) {
  background: var(--ll-accent-ink);
  border-color: var(--ll-accent-ink);
  color: #fff;
}
html[data-brand="localletters"] .app-shell a.btn.primary { display: inline-flex; align-items: center; }

/* Small utility buttons inside rows keep their compact size. */
html[data-brand="localletters"] .app-shell :is(.nudge, .data-freshness) button { min-height: 0 !important; padding: 5px 11px !important; font-size: 13px !important; }

/* Secondary: navy outline, fills navy on hover (site's .btn.ghost). */
html[data-brand="localletters"] button.secondary,
html[data-brand="localletters"] .btn.secondary,
html[data-brand="localletters"] button.act.ghost {
  background: transparent;
  color: var(--ll-ink);
  border: 2px solid var(--ll-ink);
  min-height: 44px;
}
html[data-brand="localletters"] button.secondary:hover:not(:disabled),
html[data-brand="localletters"] .btn.secondary:hover:not(:disabled),
html[data-brand="localletters"] button.act.ghost:hover:not(:disabled) {
  background: var(--ll-ink);
  border-color: var(--ll-ink);
  color: #fff;
}

/* Ghost: a red text link with a solid underline. */
html[data-brand="localletters"] button.ghost:not(.act),
html[data-brand="localletters"] a.ghost {
  background: transparent;
  border: none;
  color: var(--ll-accent-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(158, 47, 21, 0.35);
  padding: 8px 6px;
}
html[data-brand="localletters"] button.ghost:not(.act):hover:not(:disabled),
html[data-brand="localletters"] a.ghost:hover {
  background: transparent;
  color: var(--ll-ink);
  text-decoration-color: var(--ll-sun);
}

html[data-brand="localletters"] button:disabled { opacity: 0.45; }

/* Sidebar sign-out (inline-styled) */
html[data-brand="localletters"] #sidebarSignOut {
  background: transparent !important;
  border: 1.5px solid var(--ll-field-border) !important;
  color: var(--ll-ink) !important;
  font-size: 13px !important;
  font-weight: 600;
  padding: 6px 10px !important;
}
html[data-brand="localletters"] #sidebarSignOut:hover { background: var(--ll-surface) !important; }

/* ==========================================================================
   Form fields
   ========================================================================== */

html[data-brand="localletters"] :is(input[type="text"], input[type="search"], input[type="email"],
  input[type="password"], input:not([type]), input[type="number"], input[type="tel"], select, textarea) {
  font-size: 16px;
  color: var(--ll-ink);
  background-color: var(--ll-surface);
  border: 1.5px solid var(--ll-field-border);
  border-radius: 8px;
}
html[data-brand="localletters"] input[type="file"] {
  font-size: 14px;
  border: 1.5px dashed var(--ll-field-border);
  border-radius: 8px;
  background: var(--ll-surface);
}
html[data-brand="localletters"] :is(input, textarea)::placeholder { color: #737D90; }
html[data-brand="localletters"] select {
  appearance: none;
  -webkit-appearance: none;
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2314233A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html[data-brand="localletters"] :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--ll-accent); }

html[data-brand="localletters"] .label-text {
  font-size: 11px !important;
  letter-spacing: 0.12em;
  color: var(--ll-muted);
}
html[data-brand="localletters"] .field-label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  color: var(--ll-ink);
  margin-bottom: 6px;
}

/* ==========================================================================
   App shell: sidebar
   ========================================================================== */

html[data-brand="localletters"] .sidebar {
  background: var(--ll-tint);
  border-right: 1px solid var(--ll-line);
}
html[data-brand="localletters"] .sidebar .brand { padding: 26px 22px 22px; min-height: 0; }
html[data-brand="localletters"] .sidebar .wordmark {
  width: 168px;
  max-width: 100%;
  height: auto;
  mix-blend-mode: normal;
  filter: none;
}
html[data-brand="localletters"] .sidebar .mark-only {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ll-navy);
  color: #fff;
  font-family: var(--ll-display) !important;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.02em;
  line-height: 40px;
  text-align: center;
  box-shadow: inset 0 -4px 0 var(--ll-sun);
}

html[data-brand="localletters"] .sidebar nav { padding: 6px 12px 12px; }
html[data-brand="localletters"] .nav-group { gap: 4px; }
html[data-brand="localletters"] .nav-item,
html[data-brand="localletters"] .sidebar .nav-item {
  color: var(--ll-ink);
  font-size: 15.5px;
  font-weight: 600;
  padding: 11px 14px;
  border-radius: 8px;
  min-height: 44px;
}
html[data-brand="localletters"] .nav-item .icon svg { stroke-width: 1.9; }
html[data-brand="localletters"] .sidebar .nav-item:hover:not(:disabled) {
  background: rgba(20, 35, 58, 0.07);
  color: var(--ll-ink);
}
html[data-brand="localletters"] .nav-item.active,
html[data-brand="localletters"] .sidebar .nav-item.active,
html[data-brand="localletters"] .sidebar .nav-item.active:hover:not(:disabled) {
  background: var(--ll-navy);
  color: #fff;
  font-weight: 700;
}
html[data-brand="localletters"] .sidebar .nav-item.active .icon { color: var(--ll-sun); }

html[data-brand="localletters"] .sidebar .practice-card {
  border-top: 1px solid var(--ll-line);
  padding: 16px 20px 20px;
}
html[data-brand="localletters"] .sidebar .practice-card .practice-name { font-size: 17px; }
html[data-brand="localletters"] .sidebar .practice-card .practice-sub { color: var(--ll-muted); letter-spacing: 0.02em; text-transform: none; font-size: 13px; }
html[data-brand="localletters"] #sidebarUserEmail { opacity: 1 !important; font-size: 13px !important; word-break: break-all; }

/* ==========================================================================
   Page header
   ========================================================================== */

html[data-brand="localletters"] .page { padding-top: 40px; }
html[data-brand="localletters"] .page > .page-header h1,
html[data-brand="localletters"] .page > h1 {
  font-size: clamp(30px, 4vw, 40px);
}
/* A short sun rule under each page title: the site's highlighter mark. */
html[data-brand="localletters"] .page > .page-header h1::after,
html[data-brand="localletters"] .page > h1::after {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin: 12px 0 10px;
  border-radius: 3px;
  background: var(--ll-sun);
}
html[data-brand="localletters"] .page-header .page-sub {
  color: var(--ll-muted);
  font-size: 17px;
}
html[data-brand="localletters"] .subtle { color: var(--ll-muted); font-size: 15px; }
html[data-brand="localletters"] .hint { color: var(--ll-muted); font-size: 14px; }
html[data-brand="localletters"] .whisper { color: var(--ll-muted); font-size: 13px; }
html[data-brand="localletters"] p.label { font-family: var(--ll-mono) !important; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ll-accent-ink); font-weight: 500; }

/* ==========================================================================
   Panels, cards, lists
   ========================================================================== */

html[data-brand="localletters"] :is(.panel, .card, .batch-card, .recurring-card, .subrow, .subcard,
  .billrow, [id="areaPicker"], .directory-table, .wizard-stepper) {
  border-color: var(--ll-line);
  border-radius: 10px;
}
html[data-brand="localletters"] .panel { box-shadow: var(--shadow-soft); }

/* Programs: one row per area */
html[data-brand="localletters"] .subrow { box-shadow: var(--shadow-soft); margin-bottom: 10px; }
html[data-brand="localletters"] .subrow .bar { min-height: 60px; padding: 14px 18px; }
html[data-brand="localletters"] .subrow .bar:hover { background: var(--ll-paper); }
html[data-brand="localletters"] .subrow.open { border-color: var(--ll-ink); }
html[data-brand="localletters"] .subrow.open .bar { background: var(--ll-paper); }
html[data-brand="localletters"] .subrow .nm { font-family: var(--ll-display) !important; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
html[data-brand="localletters"] .subrow .chev { font-size: 22px; font-weight: 700; color: var(--ll-ink); }
html[data-brand="localletters"] :is(.subrow .zip, .billrow .zip, .subcard h3 .zip) {
  background: var(--ll-navy);
  color: #fff;
  font-size: 12.5px;
  border-radius: 6px;
  padding: 3px 8px;
}
html[data-brand="localletters"] .subrow .cards,
html[data-brand="localletters"] .subrow .plan,
html[data-brand="localletters"] .subrow .cyc { color: var(--ll-muted); font-size: 14.5px; }
html[data-brand="localletters"] .subrow .plan { font-weight: 700; color: var(--ll-ink); }
html[data-brand="localletters"] .subrow .cyc.done { color: var(--ll-ok); font-weight: 600; }
html[data-brand="localletters"] .subrow .cyc.soon { color: var(--ll-warn); font-weight: 700; }
html[data-brand="localletters"] .subrow .cyc.warn { color: var(--ll-error); font-weight: 700; }
html[data-brand="localletters"] .subrow .detail { border-top-color: var(--ll-line); }

html[data-brand="localletters"] .sub-card { border-left: 0; border-top: 6px solid var(--ll-accent); }
html[data-brand="localletters"] .detail > .sub-card { border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; border-top: 0; }
html[data-brand="localletters"] .sub-line { font-size: 16px; }
html[data-brand="localletters"] .sub-facts { color: var(--ll-muted); border-top-color: var(--ll-line); }
html[data-brand="localletters"] .touch-row { border-top-color: var(--ll-line-soft); }
html[data-brand="localletters"] .touch-row .touch-name { font-weight: 700; font-size: 15.5px; }
html[data-brand="localletters"] .touch-row .touch-hint { color: var(--ll-muted); font-size: 13.5px; }

html[data-brand="localletters"] .addarea {
  border: 2px dashed var(--ll-ink);
  background: var(--ll-surface);
  border-radius: 10px;
  padding: 18px 20px;
}
html[data-brand="localletters"] .addarea strong { font-family: var(--ll-display) !important; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }

/* Status pills: meaning first. Done = green, in progress = sun, problem = crimson. */
html[data-brand="localletters"] :is(.status-pill, .program-status, .send-status, .subcard .state) {
  border-radius: 6px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  font-weight: 500;
}
html[data-brand="localletters"] :is(.status-pill.done, .program-status.active, .send-status.done) {
  background: var(--ll-ok-bg);
  color: var(--ll-ok);
  border: 1px solid var(--ll-ok-border);
}
html[data-brand="localletters"] :is(.status-pill.progress, .program-status.draft, .send-status.pending, .subcard .state.pending) {
  background: var(--ll-sun-tint);
  color: var(--ll-warn);
  border: 1px solid var(--ll-warn-border);
}
html[data-brand="localletters"] .status-pill.caution {
  background: var(--ll-error-bg);
  color: var(--ll-error);
  border-color: var(--ll-error-border);
}
html[data-brand="localletters"] .program-status.paused,
html[data-brand="localletters"] .subcard .state { background: var(--ll-tint); color: var(--ll-ink); border: 1px solid var(--ll-line); }
html[data-brand="localletters"] .subcard .state:is(.building, .plotting) { background: var(--ll-navy); color: #fff; border-color: var(--ll-navy); }
html[data-brand="localletters"] .subcard .state.sent { background: var(--ll-ok); color: #fff; border-color: var(--ll-ok); }
html[data-brand="localletters"] .directory-row .tag { color: var(--ll-accent-ink); background: var(--ll-accent-tint); }
html[data-brand="localletters"] .batch-progress-bar { height: 6px; background: var(--ll-tint); border-radius: 3px; }
html[data-brand="localletters"] .batch-progress-bar-inner { background: var(--ll-ok); }
html[data-brand="localletters"] .program-dot.done { background: var(--ll-ok); }

/* Banners */
html[data-brand="localletters"] .banner {
  border: 0;
  border-left: 6px solid var(--ll-sun);
  background: var(--ll-sun-tint);
  border-radius: 10px;
  padding: 16px 20px;
}
html[data-brand="localletters"] .banner.ok {
  border-left-color: var(--ll-ok);
  background: var(--ll-ok-bg);
}
html[data-brand="localletters"] .banner h4 { font-size: 18px; margin-bottom: 6px; }
html[data-brand="localletters"] .banner ul { color: var(--ll-ink); font-size: 15px; }
html[data-brand="localletters"] .banner p { font-size: 15.5px; }

/* "Before anything can go out" checklist */
html[data-brand="localletters"] #startBanner .setup {
  background: var(--ll-surface);
  border: 2px solid var(--ll-ink);
  border-radius: 10px;
  box-shadow: 5px 5px 0 var(--ll-sun);
  padding: 22px 24px;
}
html[data-brand="localletters"] #startBanner h4 { font-family: var(--ll-display) !important; font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
html[data-brand="localletters"] #startBanner p { color: var(--ll-muted); }
html[data-brand="localletters"] #startBanner .todo { font-size: 15.5px; }
html[data-brand="localletters"] #startBanner .todo .dot { width: 18px; height: 18px; border: 2px solid var(--ll-field-border); }
html[data-brand="localletters"] #startBanner .todo.done .dot {
  background: var(--ll-ok) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/14px no-repeat;
  border-color: var(--ll-ok);
}
html[data-brand="localletters"] #startBanner .todo.done span { color: var(--ll-muted); }

/* Warning box (event batch) */
html[data-brand="localletters"] .warning { border-left: 6px solid var(--ll-sun); border-radius: 10px; color: var(--ll-ink); }

/* Results / errors */
html[data-brand="localletters"] .results { background: var(--ll-ok-bg); border-color: var(--ll-ok-border); }
html[data-brand="localletters"] .results.error {
  background: var(--ll-error-bg);
  border: 1px solid var(--ll-error-border);
  border-left: 6px solid var(--ll-error);
  color: var(--ll-error);
}

/* Error text gets a round "!" so it is never mistaken for brand red. */
html[data-brand="localletters"] :is(.program-note.err, .note.err, .stepmsg.err, .login-card .error,
  .subrow .cyc.warn, .save-indicator.error, .program-meta .over, .count.over) {
  color: var(--ll-error) !important;
}
html[data-brand="localletters"] :is(.program-note.err, .note.err, .stepmsg.err, .login-card .error, .subrow .cyc.warn):not(:empty)::before {
  content: "!";
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  margin-right: 0.45em;
  border-radius: 50%;
  background: var(--ll-error);
  color: #fff;
  font: 700 0.8em/1.25em var(--ll-body);
  text-align: center;
  vertical-align: 0.08em;
  letter-spacing: 0;
}
html[data-brand="localletters"] ul.blockers {
  color: var(--ll-error);
  font-family: var(--ll-body) !important;
  list-style: none;
  padding-left: 0;
  border-left: 4px solid var(--ll-error);
  padding: 4px 0 4px 12px;
  font-weight: 600;
}

/* Programs: the monthly send button. Colour still says when. */
html[data-brand="localletters"] .lockbtn {
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700;
  min-height: 56px;
  box-shadow: 0 3px 0 rgba(20, 35, 58, 0.25);
}
html[data-brand="localletters"] .lockbtn.far { background: var(--ll-navy); color: #fff; }
html[data-brand="localletters"] .lockbtn.far:hover { background: #22375A; }
html[data-brand="localletters"] .lockbtn.soon { background: var(--ll-sun); color: var(--ll-ink); }
html[data-brand="localletters"] .lockbtn.soon:hover { background: #E5A322; }
html[data-brand="localletters"] .lockbtn.now { background: var(--ll-error); color: #fff; }
html[data-brand="localletters"] .lockbtn.now:hover { background: #861624; }
html[data-brand="localletters"] .lockbtn.blocked { background: var(--ll-muted); color: #fff; }
html[data-brand="localletters"] .lockbtn.done { background: var(--ll-ok-bg); color: var(--ll-ok); box-shadow: none; border: 1px solid var(--ll-ok-border); }
html[data-brand="localletters"] .lockbtn .when { opacity: 1; font-weight: 400; font-size: 14px; }

/* Templates list */
html[data-brand="localletters"] .program-item {
  border-color: var(--ll-line);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 15.5px;
  font-weight: 600;
  min-height: 44px;
}
html[data-brand="localletters"] .program-item:hover { border-color: var(--ll-ink); }
html[data-brand="localletters"] .program-item.active {
  border-color: var(--ll-ink);
  background: var(--ll-surface);
  box-shadow: inset 6px 0 0 var(--ll-accent), var(--shadow-soft);
}
html[data-brand="localletters"] .program-item .program-item-meta { color: var(--ll-muted); font-size: 10.5px; }
html[data-brand="localletters"] .program-meta,
html[data-brand="localletters"] .program-note { color: var(--ll-muted); }
html[data-brand="localletters"] .program-note.ok { color: var(--ll-ok); }

/* Card previews read as paper on a desk. */
html[data-brand="localletters"] .program-preview {
  background: var(--ll-tint);
  border: 1px solid var(--ll-line);
  border-radius: 10px;
  padding: 22px;
}
html[data-brand="localletters"] .program-preview > svg,
html[data-brand="localletters"] .program-preview > img {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 35, 58, 0.1), 0 14px 30px -14px rgba(20, 35, 58, 0.45);
}
html[data-brand="localletters"] .card .card-body {
  background: #fff;
  border: 0;
  border-top: 5px solid var(--ll-accent);
  border-radius: 4px;
  font-size: 21px;
  line-height: 1.35;
  color: var(--ll-ink-soft);
  box-shadow: 0 1px 2px rgba(20, 35, 58, 0.1), 0 10px 22px -12px rgba(20, 35, 58, 0.4);
  transform: rotate(-0.6deg);
}
html[data-brand="localletters"] #handSample {
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: 0 1px 2px rgba(20, 35, 58, 0.1), 0 14px 30px -14px rgba(20, 35, 58, 0.45);
  transform: rotate(-0.5deg);
}

/* Template card picker */
html[data-brand="localletters"] .stockpick .opt { border-radius: 8px; }
html[data-brand="localletters"] .stockpick .opt.on { border-color: var(--ll-ink); box-shadow: 0 0 0 2px var(--ll-sun); }
html[data-brand="localletters"] .stockpick .opt.on .nm { font-weight: 700; }

html[data-brand="localletters"] .sigmenu-btn,
html[data-brand="localletters"] .sigmenu-list { border: 1.5px solid var(--ll-field-border); border-radius: 8px; background: var(--ll-surface); }
html[data-brand="localletters"] .sigmenu-btn { min-height: 44px; font-weight: 600; }
html[data-brand="localletters"] .sigmenu-btn:hover { border-color: var(--ll-ink); }

/* Template editor: spacing & size sliders, steps divided like the rest of the form */
html[data-brand="localletters"] .tplspacing {
  background: var(--ll-paper);
  border: 1px solid var(--ll-line);
  border-radius: 10px;
}
html[data-brand="localletters"] .tplspacing .sprow label { color: var(--ll-ink); }
html[data-brand="localletters"] .tplspacing output { color: var(--ll-ink); }
html[data-brand="localletters"] .tplspacing output.norm, html[data-brand="localletters"] .tplspacing .spend { color: var(--ll-muted); }
html[data-brand="localletters"] .tplspacing input[type=range] { accent-color: var(--ll-accent, #C63D1F); }
html[data-brand="localletters"] :is(.tpl-step + .tpl-step, .tpl-actions) { border-top-color: var(--ll-line-soft); }

html[data-brand="localletters"] .fmt-btn { border-color: var(--ll-field-border); color: var(--ll-ink); border-radius: 8px; }
html[data-brand="localletters"] .fmt-btn.active { background: var(--ll-navy); border-color: var(--ll-navy); color: #fff; }

html[data-brand="localletters"] .varbtn { border-radius: 10px; border-color: var(--ll-line); }
html[data-brand="localletters"] .varbtn:hover { border-color: var(--ll-ink); background: var(--ll-paper); }

/* Send log */
html[data-brand="localletters"] .send-row { border-top-color: var(--ll-line-soft); }
html[data-brand="localletters"] .send-detail { color: var(--ll-muted); }
html[data-brand="localletters"] .send-total { font-size: 20px; }

/* Your handwriting: steps */
html[data-brand="localletters"] .scanhelp {
  background: var(--ll-sun-tint);
  border-left: 5px solid var(--ll-sun);
  border-radius: 8px;
  font-size: 15px;
}
html[data-brand="localletters"] .stepbody h3 { font-size: 21px; }
html[data-brand="localletters"] .stepnum { border: 2px solid var(--ll-ink); color: var(--ll-ink); font-family: var(--ll-display) !important; font-weight: 800; }
html[data-brand="localletters"] .startstep.done .stepnum { background: var(--ll-ok); border-color: var(--ll-ok); }
html[data-brand="localletters"] .uploadrow label { color: var(--ll-ink); font-weight: 600; font-size: 14px; }
html[data-brand="localletters"] .startfinished { border-top-color: var(--ll-line); }
html[data-brand="localletters"] .steps-list li::before { background: var(--ll-navy); color: #fff; font-family: var(--ll-display) !important; font-weight: 800; }

/* Handwriting / signature cards (inline-styled in JS) */
html[data-brand="localletters"] .hw-profile-card {
  border-color: var(--ll-line) !important;
  border-radius: 10px !important;
  box-shadow: var(--shadow-soft);
}
html[data-brand="localletters"] .hw-profile-card strong { font-weight: 700 !important; }
html[data-brand="localletters"] .hw-profile-card span[style*="text-transform: uppercase"] {
  font-family: var(--ll-mono) !important;
  border-radius: 5px !important;
  background: var(--ll-navy) !important;
}

/* Settings */
html[data-brand="localletters"] .settings-nav { gap: 4px; }
html[data-brand="localletters"] .settings-nav button {
  color: var(--ll-ink);
  font-size: 15.5px;
  font-weight: 600;
  border-radius: 8px;
  min-height: 44px;
  background: transparent;
  border: 0;
}
html[data-brand="localletters"] .settings-nav button:hover:not(:disabled) { background: rgba(20, 35, 58, 0.07); color: var(--ll-ink); }
html[data-brand="localletters"] .settings-nav button.active,
html[data-brand="localletters"] .settings-nav button.active:hover:not(:disabled) {
  background: var(--ll-surface);
  color: var(--ll-ink);
  font-weight: 700;
  box-shadow: inset 5px 0 0 var(--ll-accent), 0 0 0 1px var(--ll-line);
}
html[data-brand="localletters"] .billrow { background: var(--ll-surface); }
html[data-brand="localletters"] .billrow .price { font-family: var(--ll-display) !important; font-weight: 800; font-size: 19px; }
html[data-brand="localletters"] .billrow .meta { color: var(--ll-muted); }
html[data-brand="localletters"] .areaplans .planopt { border-color: var(--ll-line); border-radius: 8px; }
html[data-brand="localletters"] .areaplan { border-color: var(--ll-line); border-radius: 8px; }

/* Directory / chips / tables */
html[data-brand="localletters"] .chip { border: 1.5px solid var(--ll-field-border); color: var(--ll-ink); font-weight: 600; min-height: 36px; }
html[data-brand="localletters"] .chip:hover { border-color: var(--ll-ink); }
html[data-brand="localletters"] .chip.active { background: var(--ll-navy); border-color: var(--ll-navy); color: #fff; }
html[data-brand="localletters"] .directory-header-row { background: var(--ll-tint); color: var(--ll-ink); font-size: 11px; }
html[data-brand="localletters"] .directory-row:hover { background: var(--ll-paper); }
html[data-brand="localletters"] .selection-bar { background: var(--ll-navy); border-radius: 10px; }
html[data-brand="localletters"] .selection-bar button:not(.secondary) { background: var(--ll-accent) !important; border-color: var(--ll-accent) !important; color: #fff !important; }
html[data-brand="localletters"] .summary { background: var(--ll-tint); border-color: var(--ll-line); }
html[data-brand="localletters"] .toggle input:checked + .toggle-slider { background-color: var(--ll-accent); }
html[data-brand="localletters"] .toggle-slider::before { background-color: #fff; }

/* Wizard / choice cards */
html[data-brand="localletters"] :is(.format-card, .hw-library-card, .vertical-card, .data-source-card) {
  border-color: var(--ll-line);
  border-radius: 10px;
}
html[data-brand="localletters"] :is(.format-card, .hw-library-card, .vertical-card, .data-source-card):hover {
  border-color: var(--ll-ink);
  background: var(--ll-surface);
}
html[data-brand="localletters"] :is(.format-card, .hw-library-card).selected {
  border-color: var(--ll-ink);
  background: var(--ll-surface);
  box-shadow: inset 0 6px 0 var(--ll-accent), 0 0 0 1px var(--ll-ink);
}
html[data-brand="localletters"] .wizard-price-pill { background: var(--ll-surface); border: 2px solid var(--ll-ink); border-radius: 10px; }
html[data-brand="localletters"] .wizard-price-pill .amount { color: var(--ll-ink); }
html[data-brand="localletters"] .wstep { opacity: 0.6; }
html[data-brand="localletters"] .wstep.active { opacity: 1; }
html[data-brand="localletters"] .wstep.active .wstep-label { color: var(--ll-ink); font-weight: 700; }
html[data-brand="localletters"] .wstep-num { color: var(--ll-accent-ink); font-weight: 800; }
html[data-brand="localletters"] .recurring-icon { background: var(--ll-navy); color: #fff; }
html[data-brand="localletters"] .hw-upgrade { background: var(--ll-tint); border-color: var(--ll-line); }

/* Empty states */
html[data-brand="localletters"] .empty-state {
  background: var(--ll-surface);
  border: 2px dashed var(--ll-field-border);
  border-radius: 10px;
}
html[data-brand="localletters"] .empty-state h3 { font-size: 22px; }
html[data-brand="localletters"] .empty-state p { color: var(--ll-muted); font-size: 15.5px; }

/* Onboarding overlay */
html[data-brand="localletters"] #onboardingOverlay { background: rgba(20, 35, 58, 0.55); }
html[data-brand="localletters"] .onboard-card { background: var(--ll-paper); border-radius: 12px; padding-top: 58px; }
html[data-brand="localletters"] .onboard-card::before {
  /* PatientScript's dashed postmark, replaced with a red band across the top. */
  top: 0; left: 0; right: 0; width: auto; height: 8px;
  border: 0; border-radius: 0; opacity: 1;
  background: var(--ll-accent);
}
html[data-brand="localletters"] .onboard-wordmark { mix-blend-mode: normal; filter: none; height: auto; width: 180px; }
html[data-brand="localletters"] .onboard-card h2 { font-size: 34px; }

/* Mobile */
@media (max-width: 900px) {
  html[data-brand="localletters"] .sidebar .brand { padding: 18px 14px; justify-content: center; }
  html[data-brand="localletters"] .sidebar .nav-item { padding: 12px; justify-content: center; }
  html[data-brand="localletters"] .sidebar nav { padding: 6px 10px 12px; }
}
@media (max-width: 680px) {
  html[data-brand="localletters"] .page { padding: 26px 16px 60px; }
  html[data-brand="localletters"] .panel { padding: 20px 18px; }
  html[data-brand="localletters"] .subrow .bar { padding: 12px 14px; }
  html[data-brand="localletters"] .addarea { flex-wrap: wrap; }
  html[data-brand="localletters"] .addarea button { margin-left: 0; }
  html[data-brand="localletters"] h1 { font-size: 30px; }
}

/* ==========================================================================
   login.html
   ========================================================================== */

html[data-brand="localletters"] body:has(> .login-card) { background: var(--ll-tint); }
html[data-brand="localletters"] .login-card {
  border: 0;
  border-top: 8px solid var(--ll-accent);
  border-radius: 10px;
  padding: 36px 32px 32px;
  box-shadow: 0 2px 0 rgba(20, 35, 58, 0.06), 0 24px 48px -24px rgba(20, 35, 58, 0.35);
}
html[data-brand="localletters"] .login-card .brand { margin-bottom: 26px; text-align: left; }
html[data-brand="localletters"] .login-card .brand-logo { display: block; width: 170px; height: auto; }
html[data-brand="localletters"] .login-card h1 { font-size: 34px; margin-bottom: 6px; }
html[data-brand="localletters"] .login-card .subtitle { color: var(--ll-muted); font-size: 16px; }
html[data-brand="localletters"] .login-card .label-text { margin-bottom: 6px; }
html[data-brand="localletters"] .login-card input { padding: 12px 14px; }
html[data-brand="localletters"] .login-card button[type="submit"] { min-height: 48px; font-size: 17px; margin-top: 12px; }
html[data-brand="localletters"] .login-card .error { font-size: 14px; font-weight: 600; }
html[data-brand="localletters"] .login-card .hint { color: var(--ll-muted); font-size: 15px; }
html[data-brand="localletters"] .login-card .hint a { font-weight: 600; }

/* ==========================================================================
   auth-action.html
   ========================================================================== */

html[data-brand="localletters"] body:has(> .card .mark) { background: var(--ll-tint); font-size: 17px; }
html[data-brand="localletters"] body:has(> .card .mark) > .card {
  border: 0;
  border-top: 8px solid var(--ll-accent);
  border-radius: 10px;
  box-shadow: 0 2px 0 rgba(20, 35, 58, 0.06), 0 24px 48px -24px rgba(20, 35, 58, 0.35);
}
html[data-brand="localletters"] .mark-logo { display: block; width: 160px; height: auto; }
html[data-brand="localletters"] body:has(> .card .mark) h1 { font-size: 32px; }
html[data-brand="localletters"] body:has(> .card .mark) label { font-size: 11px; color: var(--ll-muted); }
html[data-brand="localletters"] body:has(> .card .mark) input { border-radius: 8px; }
html[data-brand="localletters"] body:has(> .card .mark) button { min-height: 50px; font-size: 17px; }
html[data-brand="localletters"] .who { background: var(--ll-tint); border-radius: 6px; color: var(--ll-ink); }
html[data-brand="localletters"] .note.err { text-transform: none; letter-spacing: 0; font-family: var(--ll-body); font-size: 14px; font-weight: 600; }

/* ==========================================================================
   programs.html
   ========================================================================== */

html[data-brand="localletters"] body > .bar { background: var(--ll-navy); border-bottom: 0; padding: 16px 28px; }
html[data-brand="localletters"] body > .bar b { color: #fff; font-size: 18px; }
html[data-brand="localletters"] body > .bar a { color: #fff; font-size: 12px; }
html[data-brand="localletters"] body > .bar a:hover { color: var(--ll-sun); }
html[data-brand="localletters"] .wrap > .col { border-color: var(--ll-line); }
html[data-brand="localletters"] .lbl { color: var(--ll-accent-ink); font-size: 11px; }
html[data-brand="localletters"] .plist button { border-radius: 8px; font-size: 16px; font-weight: 600; }
html[data-brand="localletters"] .plist button:hover { background: var(--ll-tint); }
html[data-brand="localletters"] .plist button.on { background: var(--ll-navy); color: #fff; }
html[data-brand="localletters"] .plist .meta { color: var(--ll-muted); }
html[data-brand="localletters"] .plist button.on .meta { color: #C9D2E0; }
html[data-brand="localletters"] .dot.done { background: var(--ll-ok); }
html[data-brand="localletters"] .wrap h1 { font-weight: 800; font-size: 30px; }
html[data-brand="localletters"] .wrap textarea { border-radius: 8px; }
html[data-brand="localletters"] .pv { background: var(--ll-tint); border-radius: 10px; padding: 20px; }
html[data-brand="localletters"] .pv svg,
html[data-brand="localletters"] .pv img {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 35, 58, 0.1), 0 14px 30px -14px rgba(20, 35, 58, 0.45);
  transform: rotate(-0.8deg);
}
html[data-brand="localletters"] .note.ok { color: var(--ll-ok); }

/* ==========================================================================
   handwriting-editor.html
   ========================================================================== */

html[data-brand="localletters"] body > header:has(.brand-line) {
  background: var(--ll-surface);
  border-bottom: 3px solid var(--ll-navy);
  padding: 14px 28px;
}
html[data-brand="localletters"] .brand-line a { color: var(--ll-accent-ink) !important; font-size: 14px !important; font-weight: 600; font-style: normal !important; }
html[data-brand="localletters"] .brand-line h1 { font-size: 24px; }
html[data-brand="localletters"] .brand-line .meta { color: var(--ll-muted); font-size: 14px; }
html[data-brand="localletters"] header .nav { background: var(--ll-tint); border-color: var(--ll-line); border-radius: 8px; }
html[data-brand="localletters"] header .nav button { color: var(--ll-ink); font-weight: 600; font-size: 14px; border-radius: 6px; }
html[data-brand="localletters"] header .nav button.active { background: var(--ll-navy); color: #fff; }
html[data-brand="localletters"] .save-indicator { color: var(--ll-muted); font-size: 14px; }
html[data-brand="localletters"] .save-indicator.saved { color: var(--ll-ok); font-weight: 600; }
html[data-brand="localletters"] .layout .panel h2 { font-size: 20px; }
html[data-brand="localletters"] .preview-svg {
  border: 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(20, 35, 58, 0.1), 0 14px 30px -14px rgba(20, 35, 58, 0.45);
}
html[data-brand="localletters"] .preview-meta,
html[data-brand="localletters"] .slider-row label,
html[data-brand="localletters"] .small-help,
html[data-brand="localletters"] .cycler-info { color: var(--ll-muted); font-size: 13.5px; }
html[data-brand="localletters"] .slider-row input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--ll-line); }
html[data-brand="localletters"] .slider-row input[type=range]::-webkit-slider-thumb { background: var(--ll-accent); width: 18px; height: 18px; margin-top: -7px; }
html[data-brand="localletters"] .slider-row input[type=range]::-moz-range-thumb { background: var(--ll-accent); }
html[data-brand="localletters"] .summary-item strong { color: var(--ll-ink); font-weight: 700; }
html[data-brand="localletters"] .char-label { font-size: 22px; }
html[data-brand="localletters"] .char-row { border-bottom-color: var(--ll-line-soft); }
html[data-brand="localletters"] .variant { border-radius: 6px; background: #fff; border-color: var(--ll-line); }
html[data-brand="localletters"] .variant:hover { border-color: var(--ll-ink); background: var(--ll-paper); }
html[data-brand="localletters"] .variant .vlabel { color: var(--ll-muted); }
html[data-brand="localletters"] .signature-card,
html[data-brand="localletters"] .message-card { background: var(--ll-paper); border-color: var(--ll-line); border-radius: 8px; }
html[data-brand="localletters"] .add-message { border: 2px dashed var(--ll-field-border); border-radius: 8px; color: var(--ll-ink); font-weight: 600; }
html[data-brand="localletters"] .add-message:hover { border-color: var(--ll-ink); color: var(--ll-ink); background: var(--ll-surface); }
html[data-brand="localletters"] .info-banner { border-left: 5px solid var(--ll-sun); border-radius: 8px; color: var(--ll-ink); }
html[data-brand="localletters"] .btn.ghost { color: var(--ll-ink); font-weight: 600; text-decoration: none; }
html[data-brand="localletters"] .btn.ghost:hover:not(:disabled) { background: var(--ll-tint); color: var(--ll-ink); }
html[data-brand="localletters"] .btn.danger { color: var(--ll-error); border-color: var(--ll-error-border); }
html[data-brand="localletters"] .btn.danger:hover:not(:disabled) { background: var(--ll-error-bg); border-color: var(--ll-error); }
html[data-brand="localletters"] .btn.tiny { min-height: 0; padding: 5px 10px; font-size: 13px; }
html[data-brand="localletters"] .error-screen { color: var(--ll-error); }
html[data-brand="localletters"] .login-card .label-text {
  font-family: var(--ll-body) !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ll-ink);
}
@media (max-width: 600px) {
  /* Glyph rows were wider than a phone; let the enable/disable links wrap. */
  html[data-brand="localletters"] .char-row { flex-wrap: wrap; }
  html[data-brand="localletters"] .variants { flex-wrap: wrap; min-width: 0; }
  html[data-brand="localletters"] body > header:has(.brand-line) { padding: 12px 16px; flex-wrap: wrap; gap: 8px; }
  html[data-brand="localletters"] .layout { padding: 16px; }
  html[data-brand="localletters"] .filter-bar { flex-wrap: wrap; }
}