/* ============================================================================
   RESPONSIVE BREAKPOINT SCALE - apply these five widths consistently.
   Media queries can't read CSS vars, so treat these as the canonical set:
     xs  <=480   phone            (single column, drawer nav)
     sm   640    large phone      (2-up metrics/cards)
     md   768    tablet portrait  (tables -> cards below this)
     lg  1024    small laptop     (fixed sidebar returns at >=1024)
     xl  1280    desktop          (max content width cap)
   New rules should use max-width:1023 / 767 / 639 / 480 and min-width:768 /
   1024. Legacy one-off widths are being migrated onto this scale.
   ============================================================================ */
:root {
  --bg: #ffffff;
  --panel: #ffffff;
  --panel-subtle: #fafafa;
  --sidebar: #ffffff;
  --sidebar-muted: #6b6b6b;
  --text: #0a0a0a;
  --muted: #6b6b6b;
  --faint: #9a9a9a;
  --line: #e6e6e6;
  --line-soft: #efefef;
  --line-strong: #1a1a1a;
  --hover: #f6f6f6;
  --accent: #147c64;
  --accent-weak: #e7f4ef;
  --blue: #5b6b80;
  --blue-weak: #eef1f5;
  --amber: #9a7415;
  --amber-weak: #fdf8ec;
  --red: #b42318;
  --red-weak: #fdf1ef;
  --green: #1f7a4d;
  --green-weak: #f3faf6;
  --shadow: none;
  --radius: 8px;
  --radius-sm: 6px;
  --sidebar-width: 224px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--text);
  background: var(--bg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Thin, minimal scrollbars */
* {
  scrollbar-width: thin;
  scrollbar-color: #d0d0d0 transparent;
}

*::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: #b8b8b8;
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  letter-spacing: 0;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Inline "Upgrade" links inside body/hint text - accent + underline so they
   read as clickable (base <a> is color:inherit). */
.upgrade-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.upgrade-link:hover { text-decoration: none; }

button,
input,
select,
textarea {
  font: inherit;
}

.page-noise {
  display: none;
}

.app-frame {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100vh;
  transition: grid-template-columns 0.18s ease;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 18px 14px;
  color: var(--text);
  background: var(--sidebar);
  border-right: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 8px 14px;
  border-bottom: 1px solid var(--line);
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 14px;
  font-weight: 700;
}

.brand small {
  margin-top: 2px;
  color: var(--faint);
  font-size: 12px;
}

.brand-mark {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--line-strong);
}

.brand-mark svg {
  width: 16px;
  height: 16px;
  display: block;
}

.nav-stack {
  display: grid;
  gap: 2px;
  margin-top: 14px;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
}

.nav-icon {
  flex: none;
}

/* Sidebar collapse toggle */
.sidebar-toggle {
  position: absolute;
  top: 15px;
  right: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar-toggle:hover {
  color: var(--text);
  background: var(--hover);
}

.sidebar-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
}

/* Collapsed icon-rail state */
html.nav-rail {
  --sidebar-width: 64px;
}

html.nav-rail .brand-text,
html.nav-rail .nav-stack + .eyebrow,
html.nav-rail .sidebar .eyebrow,
html.nav-rail .nav-label {
  display: none;
}

/* Collapsed rail: keep the profile as an avatar-only marker. */
html.nav-rail .sidebar-footnote {
  padding: 10px 0;
}

html.nav-rail .sidebar-profile {
  justify-content: center;
  gap: 0;
  padding: 0;
}

html.nav-rail .sidebar-profile:hover {
  background: transparent;
}

html.nav-rail .sidebar-profile-text {
  display: none;
}

html.nav-rail .brand {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  margin-top: 38px;
  border-bottom-color: transparent;
}

html.nav-rail .nav-link {
  justify-content: center;
  padding: 0;
  gap: 0;
}

html.nav-rail .sidebar-toggle {
  right: 50%;
  transform: translateX(50%);
}

.nav-link:hover {
  color: var(--text);
  background: var(--hover);
}

.nav-link.is-active {
  color: var(--accent);
  background: var(--accent-weak);
  font-weight: 550;
}

.sidebar-footnote {
  margin-top: auto;
  padding: 10px 8px;
  border-top: 1px solid var(--line);
}

.sidebar-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  transition: background .15s ease;
}

.sidebar-profile:hover {
  background: var(--hover);
}

.sidebar-profile-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--text);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
}

.sidebar-profile-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.sidebar-profile-text strong {
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-owner {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-profile-domain {
  color: var(--faint);
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace {
  min-width: 0;
  padding: 0;
}

/* ---- Mobile top bar + drawer scrim. Both hidden on desktop; the <=1023px
   media query below turns the sidebar into a slide-in drawer and reveals these. */
.app-topbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 40;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 10px 16px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar-burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-left: -6px;
  color: var(--text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 9px;
  cursor: pointer;
}

.topbar-burger:hover {
  background: var(--hover);
}

.topbar-burger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.app-topbar-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 680;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-topbar-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #082e25;
  background: linear-gradient(140deg, #7cf0c6, #147c64);
}

.nav-scrim {
  display: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding: 16px 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  margin-top: 3px;
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -0.02em;
}

.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.eyebrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-content {
  display: grid;
  gap: 16px;
  padding: 22px 28px 40px;
}

.public-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.public-brand {
  margin-bottom: 18px;
}

.public-content {
  display: grid;
  gap: 16px;
}

.pill,
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  background: transparent;
}

.pill {
  color: var(--accent);
  background: var(--accent-weak);
  border-color: #cce7dd;
}

.pill-muted {
  color: var(--muted);
  background: #ffffff;
  border-color: var(--line);
}

.badge-success {
  color: var(--green);
  background: var(--green-weak);
  border-color: #cfe8d8;
}

.badge-warn {
  color: var(--amber);
  background: var(--amber-weak);
  border-color: #f0e0bf;
}

.badge-danger {
  color: var(--red);
  background: var(--red-weak);
  border-color: #f1c9c3;
}

.badge-muted {
  color: var(--muted);
  background: #ffffff;
  border-color: var(--line);
}

.trial-banner,
.sync-banner,
.flash {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  padding: 8px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  overflow: hidden;
  transition: opacity 0.35s ease, min-height 0.35s ease, padding 0.35s ease;
}

.flash.is-dismissing {
  opacity: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.trial-banner {
  justify-content: space-between;
  color: #553300;
  background: var(--amber-weak);
}

.trial-banner a {
  color: #553300;
  font-weight: 760;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.reauth-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 28px;
  color: var(--red);
  background: var(--red-weak);
  border-bottom: 1px solid #f1c9c3;
  font-size: 13px;
  font-weight: 550;
}

.reauth-banner .button {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.reauth-banner .button:hover {
  background: #fff;
  color: var(--red);
}

/* Pinned to the top of the content column and kept visible (while a sync is
   active) as the page scrolls, so import progress is never lost. */
.sync-banner {
  position: sticky;
  top: 0;
  z-index: 60;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  background: var(--panel);
  box-shadow: 0 6px 18px -12px rgba(8, 20, 16, 0.4);
}

.sync-banner.is-hidden {
  display: none;
}

/* Top row: status label + count on the left, % readout on the right. */
.sync-banner-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* The progress track - a full-width bar under the copy. */
.sync-loader {
  position: relative;
  width: 100%;
  height: 6px;
  border-radius: 5px;
  overflow: hidden;
  background: var(--line-soft);
}

.sync-loader-fill {
  position: relative;
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  overflow: hidden;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* Indeterminate shimmer sweeps across the filled portion while running. */
.sync-banner[data-status="running"] .sync-loader-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: translateX(-100%);
  animation: sync-shimmer 1.4s linear infinite;
}

@keyframes sync-shimmer {
  to { transform: translateX(100%); }
}

.sync-copy {
  min-width: 0;
  flex: 1;
}

.sync-copy strong,
.sync-copy span {
  display: block;
}

.sync-copy span {
  color: var(--muted);
  font-size: 12px;
}

/* Status dot precedes the label. Pseudo-element survives JS textContent updates. */
.sync-banner[data-status="running"] [data-role="status-label"],
.sync-banner[data-status="queued"] [data-role="status-label"],
.sync-banner[data-status="failed"] [data-role="status-label"] {
  position: relative;
  padding-left: 16px;
}

.sync-banner[data-status="running"] [data-role="status-label"]::before,
.sync-banner[data-status="queued"] [data-role="status-label"]::before,
.sync-banner[data-status="failed"] [data-role="status-label"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 50%;
  background: var(--accent);
}

.sync-banner[data-status="running"] [data-role="status-label"]::before,
.sync-banner[data-status="queued"] [data-role="status-label"]::before {
  animation: sync-pulse 1.2s ease-in-out infinite;
}

.sync-banner[data-status="failed"] [data-role="status-label"]::before {
  background: var(--red);
}

@keyframes sync-pulse {
  50% { opacity: 0.3; transform: scale(0.8); }
}

.sync-progress-value {
  min-width: 40px;
  color: var(--accent);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* The % readout is only meaningful while a determinate sync is running. */
.sync-banner:not([data-status="running"]) .sync-progress-value {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sync-banner[data-status="running"] .sync-loader-fill::after,
  .sync-banner[data-status="running"] [data-role="status-label"]::before,
  .sync-banner[data-status="queued"] [data-role="status-label"]::before {
    animation: none;
  }
}

.sync-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-banner-actions form {
  margin: 0;
}

.sync-banner-note {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.sync-recovery-panel {
  width: 100%;
  display: grid;
  gap: 10px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--line-soft);
}

.sync-recovery-panel.is-hidden,
.sync-recovery-empty.is-hidden {
  display: none;
}

.sync-recovery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-recovery-summary {
  display: grid;
  gap: 2px;
}

.sync-recovery-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

.sync-recovery-count,
.sync-recovery-empty,
.sync-request-meta,
.sync-request-error {
  color: var(--muted);
  font-size: 12px;
}

.sync-recovery-list {
  display: grid;
  gap: 8px;
}

.sync-request-card {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
}

.sync-request-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sync-request-title {
  font-size: 13px;
  font-weight: 720;
}

.sync-request-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sync-request-error {
  line-height: 1.4;
}

.sync-request-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sync-request-button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  background: #ffffff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
}

.sync-request-button:hover {
  background: var(--line-soft);
}

.sync-request-button.is-danger {
  color: var(--red);
  border-color: #f1c3bc;
  background: var(--red-weak);
}

.sync-request-button:disabled {
  opacity: 0.6;
  cursor: wait;
}

.flash {
  color: var(--accent);
  background: var(--accent-weak);
}

.flash-error {
  color: var(--red);
  background: var(--red-weak);
}

.section-card,
.metric-card,
.table-shell,
.detail-panel,
.channel-card,
.template-preview,
.preview-card,
.hero-card,
.print-sheet {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section-card,
.detail-panel,
.hero-card,
.channel-card {
  padding: 16px;
}

.hero-card {
  max-width: 640px;
}

.hero-card h1,
.section-card h2 {
  font-size: 18px;
  font-weight: 760;
}

.hero-card p,
.section-note,
.muted {
  color: var(--muted);
}

.hero-card p {
  margin-top: 8px;
}

.hero-card code {
  display: inline-block;
  margin-top: 12px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-subtle);
  font-size: 12px;
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  transition: color 0.15s ease;
}

.back-link:hover {
  color: var(--accent);
}

.back-link svg {
  transition: transform 0.15s ease;
}

.back-link:hover svg {
  transform: translateX(-2px);
}

.toolbar h2 {
  margin-top: 2px;
}

.form-row,
.button-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Bottom-align filter buttons with the inputs (whose labels add height above). */
.filter-actions {
  align-self: end;
}

.orders-filters {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) minmax(180px, 1.2fr) minmax(140px, 1fr) minmax(140px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.vendor-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
}

.vendor-filters [data-date-range] {
  min-width: 260px;
}

@media (max-width: 1040px) {
  .orders-filters {
    grid-template-columns: 1fr 1fr;
  }

  .orders-filters .filter-actions {
    grid-column: 1 / -1;
  }
}

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

.stack {
  display: grid;
  gap: 12px;
}

.grid-two,
.grid-three,
.grid-four,
.cards-grid {
  display: grid;
  gap: 12px;
}

.grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.grid-four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cards-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.metric-card {
  padding: 14px;
}

/* Vendor payout summary: net-payable hero + calculation breakdown. */
.payout-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.payout-net {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px;
  background: var(--accent);
  color: #ffffff;
}

.payout-net-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.85;
}

.payout-net-value {
  font-size: 32px;
  font-weight: 770;
  font-variant-numeric: tabular-nums;
}

.payout-net-note {
  font-size: 12px;
  opacity: 0.85;
}

.payout-breakdown {
  padding: 6px 20px;
}

.payout-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
}

.payout-row:last-child {
  border-bottom: 0;
}

.payout-row .k small {
  margin-left: 6px;
  font-size: 12px;
  color: var(--muted);
}

.payout-row .amt {
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

.payout-row .amt.neg {
  color: #b23b3b;
}

.payout-row-total {
  margin-top: 2px;
  border-top: 1px solid var(--line);
}

.payout-row-total .k {
  font-weight: 720;
}

.payout-row-total .amt {
  font-weight: 760;
  color: var(--accent);
}

@media (max-width: 640px) {
  .payout-hero {
    grid-template-columns: 1fr;
  }
}

/* Inline notice for plan-limited views (e.g. Free plan data window). */
.window-note {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--accent-weak);
  border-radius: 8px;
  font-size: 13px;
  color: var(--accent);
}

/* Plan cards: a name band on top (filled green on the current plan) keeps the
   plan names highlighted and the prices aligned across cards. Flex column so
   the action can be pinned to the bottom. */
.plan-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.plan-band {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 52px;
  margin: -16px -16px 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--line-soft);
}

.plan-band .plan-name {
  font-size: 17px;
  font-weight: 760;
}

.plan-band .plan-tag {
  margin-left: auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.plan-tagline {
  margin-top: 16px;
}

.plan-price {
  margin-top: 12px;
  font-size: 30px;
  font-weight: 780;
  letter-spacing: -0.02em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* The "/mo" suffix stays small and muted beside the big price. */
.plan-price small {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}

.plan-features {
  margin-top: 16px;
  padding-left: 18px;
}

.plan-card.is-active,
.plan-card.is-recommended {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* The current plan's band fills green with white text. */
.plan-card.is-active .plan-band {
  background: var(--accent);
  border-bottom-color: var(--accent);
}

.plan-card.is-active .plan-band .plan-name,
.plan-card.is-active .plan-band .plan-tag {
  color: #fff;
}

/* Action pinned to the bottom (aligned across cards) and full width. */
.plan-card .button-inline {
  width: 100%;
  margin-top: auto;
  padding-top: 20px;
}

.plan-card .button-inline form,
.plan-card .button-inline .button {
  width: 100%;
}

/* Selected plan's bottom action: a solid, non-interactive "Current plan" bar. */
.plan-card .button-inline .button.is-current,
.plan-card .button-inline .button.is-current:hover {
  background: var(--accent);
  color: #ffffff;
  cursor: default;
}

.metric-card .label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

.metric-card .value,
.value {
  margin-top: 6px;
  font-size: 28px;
  font-weight: 780;
  line-height: 1.05;
}

.queue-ops-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.queue-ops-stat-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 680;
}

.chart-bars {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  /* A definite height is required so the bars' percentage heights resolve. */
  height: 200px;
  margin-top: 14px;
  padding-top: 8px;
}

.chart-bars.compact {
  grid-template-columns: repeat(15, minmax(0, 1fr));
}

.chart-column {
  display: grid;
  /* value (top) · flexible plot area · caption (bottom) */
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-items: end;
  gap: 6px;
  min-width: 0;
  height: 100%;
}

.chart-bar {
  width: 100%;
  min-height: 4px;
  border-radius: 3px 3px 0 0;
  background: var(--blue);
}

.chart-caption,
.chart-value {
  overflow: hidden;
  color: var(--faint);
  font-size: 10px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.status-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
  min-height: 26px;
  font-size: 13px;
}

.meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e9ef;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 720;
}

.field small {
  color: var(--faint);
  font-size: 12px;
}

.field input,
.field select,
.field textarea,
.data-table input {
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.field textarea {
  min-height: 96px;
  resize: vertical;
}

/* Normalize native selects so they match the inputs/buttons (uniform 36px row). */
.field select {
  height: 36px;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%236b6b6b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.data-table input:focus {
  outline: 2px solid rgba(20, 124, 100, 0.16);
  border-color: var(--accent);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}

.button,
.button-secondary,
.button-ghost,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
    box-shadow 0.15s ease, transform 0.04s ease;
}

.button:active,
.button-secondary:active,
.button-ghost:active,
.button-danger:active {
  transform: translateY(1px);
}

.button:focus-visible,
.button-secondary:focus-visible,
.button-ghost:focus-visible,
.button-danger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
}

/* Primary: green outline at rest, fills green on hover. */
.button {
  color: var(--accent);
  background: #ffffff;
  border-color: var(--accent);
}

.button:hover {
  color: #ffffff;
  background: var(--accent);
}

/* Disabled (e.g. Next: Delivery before a trigger is chosen): muted + inert,
   and it must not fill green on hover. */
.button:disabled,
.button[disabled] {
  opacity: .45;
  cursor: not-allowed;
}

.button:disabled:hover,
.button[disabled]:hover {
  color: var(--accent);
  background: #ffffff;
}

/* Primary: solid brand green - the single loudest accent on a screen. */
.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  font-weight: 640;
  white-space: nowrap;
  color: #ffffff;
  background: var(--accent);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-primary:hover {
  background: #106b56;
  border-color: #106b56;
}

.button-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Secondary: ink outline at rest, fills ink on hover. */
.button-secondary {
  color: var(--text);
  background: #ffffff;
  border-color: var(--line-strong);
}

.button-secondary:hover {
  color: #ffffff;
  background: var(--text);
  border-color: var(--text);
}

/* Ghost: quiet hairline; darkens on hover. */
.button-ghost {
  color: var(--muted);
  background: #ffffff;
  border-color: var(--line);
}

.button-ghost:hover {
  color: var(--text);
  border-color: #cfcfcf;
}

/* Danger: red outline at rest, fills red on hover. */
.button-danger {
  color: var(--red);
  background: #ffffff;
  border-color: #f1c9c3;
}

.button-danger:hover {
  color: #ffffff;
  background: var(--red);
  border-color: var(--red);
}

.button-danger:focus-visible {
  box-shadow: 0 0 0 3px var(--red-weak);
}

.table-shell {
  overflow: auto;
}

/* The orders table carries many columns; give it room and let the shell scroll
   horizontally rather than cramming. */
.orders-table {
  min-width: 1240px;
}

/* Freeze the first (Order) column: it stays pinned to the left edge while the
   rest of the wide table scrolls underneath. The header row is already
   sticky-top (z-index:1), so layering is:
     header first cell (top+left)  z-index 3  - top-left corner, above both
     body first cells   (left)     z-index 2  - above the scrolling body cells
   Each frozen cell needs an opaque background so scrolling content can't show
   through, and a hairline right divider marks the freeze boundary. */
.orders-table th:first-child,
.orders-table td:first-child {
  position: sticky;
  left: 0;
  background: var(--panel);
  box-shadow: 1px 0 0 var(--line-soft);
}

.orders-table td:first-child {
  z-index: 2;
}

.orders-table th:first-child {
  z-index: 3;
  background: var(--panel-subtle);
}

/* Keep the pinned cell's background in step with the row's hover/selected
   states, otherwise it would stay white while the rest of the row highlights. */
.orders-table tbody tr:hover td:first-child {
  background: var(--hover);
}

.orders-table tbody tr.is-selected td:first-child {
  background: var(--accent-weak);
}

.data-table td.nowrap {
  white-space: nowrap;
}

/* Sortable column header (Date) - label + a small arrow, Shopify-style. */
.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
}

.th-sort:hover {
  color: var(--text);
}

/* Arrow is hidden until you hover the header, and stays visible on the column
   currently sorted so the sort state is always clear. */
.th-sort-arrow {
  display: inline-flex;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.12s ease;
}

.th-sort:hover .th-sort-arrow,
.th-sort.is-active .th-sort-arrow {
  opacity: 1;
}

.th-sort-arrow.is-asc svg {
  transform: rotate(180deg);
}

/* Tags can be long - cap the column and clip so it doesn't blow out the row. */
.order-tags-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Summary footer under the orders table: count + current page range. */
.table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  border-top: 1px solid var(--line);
  background: #fcfcfc;
  font-size: 12.5px;
  color: var(--muted);
}

.table-footer strong {
  color: var(--text);
}

.table-footer-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-footer-nav .button-ghost {
  min-height: 30px;
  padding: 0 12px;
}

.data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
}

/* ---- md breakpoint: list tables flatten into stacked cards on phones.
   A table opts in with .table-cards; each <td> is named via data-label and
   secondary cells carry .t-sec to drop out of the compact card. Above md the
   table renders normally (min-width scroll fallback intact). ---- */
@media (max-width: 767px) {
  .table-cards {
    min-width: 0;
    border-collapse: collapse;
  }

  /* Hide the header visually - each cell's data-label carries the column name. */
  .table-cards thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
  }

  .table-cards tbody tr {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
  }

  .table-cards tbody tr + tr {
    margin-top: 10px;
  }

  .table-cards tbody td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }

  .table-cards tbody td::before {
    content: attr(data-label);
    flex: none;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 650;
    text-align: left;
  }

  /* Secondary columns are dropped from the compact card. */
  .table-cards .t-sec {
    display: none !important;
  }

  /* Frozen first column / sticky header don't apply in card mode. */
  .table-cards th:first-child,
  .table-cards td:first-child {
    position: static;
  }

  /* Lead cell (order #/name) reads as the card title. */
  .table-cards tbody td:first-child {
    padding-top: 0;
    font-size: 14px;
    font-weight: 680;
  }

  .table-cards tbody td:first-child::before,
  .table-cards tbody td.row-actions-cell::before {
    content: none;
  }

  /* Actions cell: buttons align to the right, no label. */
  .table-cards tbody td.row-actions-cell {
    justify-content: flex-end;
    padding-top: 10px;
  }
}

.row-actions {
  display: inline-flex;
  gap: 8px;
  white-space: nowrap;
}

.row-actions .button-ghost {
  min-height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* Square icon actions (preview / download) used in the orders + draft-orders tables. */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.icon-button svg {
  width: 18px;
  height: 18px;
}

.icon-button:hover {
  color: var(--accent, var(--text));
  border-color: var(--accent, #cfcfcf);
  background: var(--accent-weak, #f7f9f7);
}

.icon-button:focus-visible {
  outline: 2px solid var(--accent, #4b5563);
  outline-offset: 2px;
}

.data-table th,
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--muted);
  background: var(--panel-subtle);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Keep the orders / draft-orders column headers on a single line - the shell
   scrolls horizontally if they don't all fit, rather than wrapping to two rows. */
.orders-table thead th,
.draft-orders-table thead th { white-space: nowrap; }

.data-table tbody tr:hover td {
  background: var(--hover);
}

.order-row {
  cursor: pointer;
}

.order-link {
  color: var(--text);
  text-decoration: none;
}

.order-row:hover .order-link {
  color: var(--accent);
}

.data-table tbody tr.is-selected td {
  background: var(--accent-weak);
}

.data-table td {
  font-size: 13px;
}

.table-subcopy {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.data-table input {
  max-width: 112px;
  margin-left: auto;
  text-align: right;
}

.align-right {
  text-align: right !important;
}

/* Empty state for a table or panel with no rows. Grid + gap so a call to
   action below the message spaces itself; centred because every use sits in a
   table shell or a column block. Defined once - a second, left-aligned copy
   further down this file used to win and strip the padding. */
.empty-state {
  display: grid;
  gap: 12px;
  justify-items: center;
  align-content: start;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pagination-links {
  display: flex;
  gap: 8px;
}

.detail-panel {
  display: grid;
  gap: 14px;
}

.order-detail-shell {
  gap: 16px;
}

.order-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
  gap: 16px;
  align-items: start;
}

.order-main-column,
.order-side-column {
  display: grid;
  gap: 16px;
}

.order-side-column {
  position: sticky;
  top: 16px;
}

.order-summary-grid .metric-card .value {
  font-size: 24px;
}

.order-info-card {
  display: grid;
  gap: 12px;
}

.order-facts {
  display: grid;
  gap: 8px;
  margin: 0;
}

.order-facts-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.order-facts-row dt {
  color: var(--muted);
  font-weight: 680;
}

.order-facts-row dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.order-address-block {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.order-note {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
}

.order-note strong {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.order-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ===================== Order detail - Option A (invoice document) ===================== */
.order-detail-a {
  display: block;
}

/* Top bar: the "Back to orders" strip, separated from the header by a rule. */
.order-detail-a .odt-topbar {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 12px;
}

/* Soft-pill back button (Option A). Opt in with .back-pill on any page -
   order detail, draft detail and vendor commission detail use it. */
.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 650;
  margin-bottom: 0;
  transition: border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.back-pill svg { width: 16px; height: 16px; }
.back-pill:hover {
  color: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 6px 16px -10px rgba(8, 46, 37, 0.45);
}
.back-pill:hover svg { transform: translateX(-3px); }

.order-detail-a .odt-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.order-detail-a .odt-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.order-detail-a .odt-sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.order-detail-a .odt-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  margin-top: 8px;
  align-items: start;
}

.order-detail-a .odt-main {
  display: grid;
  gap: 24px;
  min-width: 0;
}

/* Invoice document card */
.order-detail-a .odt-doc {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.order-detail-a .odt-doc-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 28px;
  background: #fffdf9;
  border-bottom: 1px solid var(--line);
}

.order-detail-a .odt-billed small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}

.order-detail-a .odt-billed strong {
  font-size: 15px;
}

.order-detail-a .odt-invmeta {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.order-detail-a .odt-invmeta b {
  font-size: 15px;
}

.order-detail-a .odt-invmeta span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
}

.order-detail-a .odt-addr {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  margin-top: 8px;
}

.order-detail-a .odt-addr p {
  margin: 0;
}

.order-detail-a .odt-doc-body {
  padding: 22px 28px 26px;
}

/* Send-invoice panel (accent) */
.order-detail-a .odt-send {
  border: 1px solid transparent;
  border-radius: 13px;
  background: var(--accent-weak);
  padding: 16px 18px;
  margin-bottom: 22px;
}

.order-detail-a .odt-send-top {
  display: flex;
  align-items: center;
  gap: 14px;
}

.order-detail-a .odt-send-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  color: var(--accent);
  display: grid;
  place-items: center;
}

.order-detail-a .odt-send-txt {
  flex: 1;
  min-width: 0;
}

.order-detail-a .odt-send-txt strong {
  display: block;
  font-size: 13px;
}

.order-detail-a .odt-send-txt span {
  font-size: 12px;
  color: var(--muted);
}

.order-detail-a .odt-send-fields {
  display: grid;
  gap: 14px;
  margin-top: 16px;
}

.order-detail-a .odt-send-fields .field input,
.order-detail-a .odt-send-fields .field textarea {
  background: #fff;
}

.order-detail-a .odt-send-note {
  margin: 14px 0 0;
  font-size: 12px;
  color: var(--muted);
}

.order-detail-a .odt-send.is-locked {
  background: var(--panel-subtle);
}

.order-detail-a .odt-send.is-locked .odt-send-ico {
  color: var(--muted);
}

/* Items ledger */
.order-detail-a .odt-items {
  width: 100%;
  border-collapse: collapse;
}

.order-detail-a .odt-items th {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: left;
  font-weight: 600;
  padding: 0 0 10px;
}

.order-detail-a .odt-items td {
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  vertical-align: top;
  font-size: 14px;
}

.order-detail-a .odt-items .r {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.order-detail-a .odt-items .sub {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

/* Document footer: pair a summary column on the left with the totals ledger on
   the right so the space beside the totals isn't left blank. */
.order-detail-a .odt-doc-foot {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.order-detail-a .odt-doc-foot-left {
  flex: 1 1 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 4px;
}

.order-detail-a .odt-foot-meta {
  margin: 0;
  display: grid;
  gap: 12px;
}

.order-detail-a .odt-foot-meta > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.order-detail-a .odt-foot-meta dt {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.order-detail-a .odt-foot-meta dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--text);
}

.order-detail-a .odt-foot-note {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

/* Totals ledger */
.order-detail-a .odt-totals {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  width: min(320px, 100%);
}

.order-detail-a .odt-totals .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.order-detail-a .odt-totals .row strong {
  color: var(--text);
  font-weight: 600;
}

.order-detail-a .odt-totals .grand {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 12px;
  font-size: 16px;
  color: var(--text);
}

.order-detail-a .odt-totals .grand span:first-child {
  font-weight: 600;
}

.order-detail-a .odt-totals .grand span:last-child {
  font-weight: 700;
}

/* Paid stamp */
.order-detail-a .odt-stamp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}

.order-detail-a .odt-stamp.is-paid {
  color: var(--accent);
}

/* Right rail */
.order-detail-a .odt-rail {
  display: grid;
  gap: 16px;
  position: sticky;
  top: 16px;
}

.order-detail-a .odt-rail .section-card {
  padding: 18px 20px;
}

.order-detail-a .odt-rail h3 {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.order-detail-a .odt-facts {
  margin: 0;
}

.order-detail-a .odt-facts .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

.order-detail-a .odt-facts .row:first-child {
  border-top: 0;
}

.order-detail-a .odt-facts dt {
  color: var(--muted);
}

.order-detail-a .odt-facts dd {
  margin: 0;
  text-align: right;
  max-width: 60%;
  overflow-wrap: anywhere;
}

.order-detail-a .odt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* Transactions + delivery history - compact row lists */
.order-detail-a .odt-tables {
  display: grid;
  gap: 24px;
  align-items: start;
}

.order-detail-a .odt-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 22px 8px;
  background: #fff;
  min-width: 0;
}

.order-detail-a .odt-block-head {
  margin-bottom: 6px;
}

.order-detail-a .odt-block-head .eyebrow {
  margin-bottom: 2px;
}

.order-detail-a .odt-block-head h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text);
}

/* Documents card: one row per document type (invoice / receipt / gift receipt). */
.order-detail-a .odt-documents {
  margin-bottom: 20px;
}

.order-detail-a .odt-doc-actions {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.order-detail-a .odt-doc-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.order-detail-a .odt-doc-action:first-child {
  border-top: 0;
  padding-top: 4px;
}

.order-detail-a .odt-doc-action-name {
  min-width: 0;
}

.order-detail-a .odt-doc-action-name strong {
  display: block;
  font-size: 14px;
}

.order-detail-a .odt-doc-action-name .muted {
  font-size: 12.5px;
}

.order-detail-a .odt-docs-head {
  margin-bottom: 6px;
}

.order-detail-a .odt-docs-head .eyebrow {
  margin-bottom: 3px;
}

.order-detail-a .odt-doc-sub {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}

.order-detail-a .odt-doc-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.order-detail-a .odt-doc-action .inline-form {
  display: inline-flex;
}

/* Locked documents: mute the row and show a compact reason instead of buttons. */
.order-detail-a .odt-doc-action.is-locked .odt-doc-action-name strong {
  color: var(--muted);
}

.order-detail-a .odt-doc-lock {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 20px;
  background: var(--line-soft);
  text-decoration: none;
}

.order-detail-a .odt-doc-lock.is-link:hover {
  color: var(--accent);
  background: var(--accent-weak);
}

.order-detail-a .odt-list {
  display: flex;
  flex-direction: column;
}

.order-detail-a .odt-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

.order-detail-a .odt-list-row:first-child {
  border-top: 0;
}

.order-detail-a .odt-list-main {
  flex: 1;
  min-width: 0;
}

.order-detail-a .odt-list-main strong {
  font-size: 14px;
}

.order-detail-a .odt-list-meta {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.order-detail-a .odt-list-side {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

.order-detail-a .odt-list-amt {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.order-detail-a .odt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 5px;
  padding: 24px 16px 28px;
}

.order-detail-a .odt-empty-ico {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--panel-subtle);
  color: var(--faint);
  display: grid;
  place-items: center;
  margin-bottom: 6px;
}

.order-detail-a .odt-empty p {
  margin: 0;
  font-weight: 600;
  font-size: 14px;
}

.order-detail-a .odt-empty .muted {
  font-size: 12.5px;
  max-width: 300px;
  line-height: 1.5;
}

@media (max-width: 960px) {
  .order-detail-a .odt-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .order-detail-a .odt-rail {
    position: static;
  }
}

@media (max-width: 680px) {
  .order-detail-a .odt-tables {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== Settings - immersive ===================== */
body:has(.settings-page) .workspace { background: #edf4f0; }

.settings-page { max-width: 900px; }

.set-hero {
  background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
  border-radius: 14px;
  color: #f3efe3;
  padding: 22px 24px;
}

.set-hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7cf0c6;
  font-weight: 700;
}

.set-hero-id { display: flex; align-items: center; gap: 15px; margin-top: 12px; }

.set-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(150deg, #1c8f6f, #0c5f49);
  border: 1px solid rgba(124, 240, 198, .25);
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 750;
  color: #eafff6;
  flex: none;
}
/* With a brand logo the tile is just a frame for it - drop the green fill so a
   transparent PNG doesn't sit on a colour it wasn't designed for. */
.set-avatar.has-logo { background: #fff; border-color: rgba(255, 255, 255, .3); padding: 6px; }
.set-avatar.has-logo img { width: 100%; height: 100%; object-fit: contain; }

.set-who strong { display: block; font-size: 19px; font-weight: 740; letter-spacing: -.01em; }
.set-who span { font-size: 12.5px; color: rgba(243, 239, 227, .66); }

.set-hero-stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(243, 239, 227, .16);
}

.set-hstat { display: flex; flex-direction: column; gap: 2px; }
.set-hstat b { font-size: 18px; font-weight: 720; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.set-hstat b.mint { color: #7cf0c6; }
.set-hstat span { font-size: 10.5px; color: rgba(243, 239, 227, .6); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.set-sec-label {
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 700;
  margin: 22px 0 10px;
}

/* Full-width configuration rows. */
.set-row {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  scroll-margin-top: 20px;
}

.set-row + .set-row { margin-top: 9px; }

.set-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.set-ico svg { width: 19px; height: 19px; }
.set-ico.is-gray { background: var(--panel-subtle); color: var(--muted); }

.set-row-txt { flex: 1; min-width: 0; }
.set-row-txt strong { font-size: 14px; font-weight: 700; display: block; }
.set-row-txt p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }

.set-row .button-sm { white-space: nowrap; }

@media (max-width: 640px) {
  .set-row { flex-wrap: wrap; }
  .set-hero-stats { gap: 22px; }
}

/* ===================== Notifications editor ===================== */
.notif-content {
  max-width: 760px;
}

/* ============ Notifications (slimmed) ============ */
body:has(.ntf-page) .workspace { background: #edf4f0; }
.ntf-page { max-width: 760px; }
.ntf-page .back-link { margin-bottom: 16px; }
.ntf-hero, .tpl-hero, .plans-hero, .brnd-hero {
  background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
  border-radius: 14px; color: #f3efe3; padding: 22px 24px; margin-bottom: 18px;
}
.ntf-hero-eyebrow, .tpl-hero-eyebrow, .plans-hero-eyebrow, .brnd-hero-eyebrow {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #7cf0c6; font-weight: 700;
}
.ntf-hero h1, .tpl-hero h1, .plans-hero h1, .brnd-hero h1 { margin: 9px 0 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; color: #fff; }
.ntf-hero p, .tpl-hero p, .plans-hero p, .brnd-hero p { margin: 6px 0 0; font-size: 12.5px; color: rgba(243, 239, 227, .72); max-width: 66ch; }
.ntf-hero p a, .tpl-hero p a, .plans-hero p a { color: #7cf0c6; text-decoration: underline; }
.ntf-hero-stats, .tpl-hero-stats, .brnd-hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(243, 239, 227, .16); }
.ntf-hstat, .tpl-hstat, .brnd-hstat { display: flex; flex-direction: column; gap: 2px; }
.ntf-hstat b, .tpl-hstat b, .brnd-hstat b { font-size: 18px; font-weight: 720; font-variant-numeric: tabular-nums; }
.ntf-hstat b.mint, .tpl-hstat b.mint, .brnd-hstat b.mint { color: #7cf0c6; }
.ntf-hstat span, .tpl-hstat span, .brnd-hstat span { font-size: 10px; color: rgba(243, 239, 227, .6); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }

.ntf-sec-label, .brnd-sec-label { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); font-weight: 700; margin: 0 0 10px; }
.ntf-stack { display: flex; flex-direction: column; gap: 10px; }
.ntf-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 15px 18px; display: flex; align-items: center; gap: 14px; }
.ntf-card-tall { flex-direction: column; align-items: stretch; gap: 0; }
.ntf-card-row { display: flex; align-items: center; gap: 14px; }
.ntf-card-body { display: grid; gap: 14px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.ntf-ico { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-weak); color: var(--accent); display: grid; place-items: center; }
.ntf-ico--brand { background: #fff; border: 1px solid var(--line); }
.ntf-card-txt { flex: 1; min-width: 0; }
.ntf-card-txt strong { font-size: 14px; font-weight: 700; display: block; }
.ntf-card-txt p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.ntf-card-txt p a { color: var(--accent); }

/* Order-event toggles: a compact checkbox grid inside the notification cards. */
.evt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 8px 14px;
}
.evt-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  cursor: pointer;
}
.evt-toggle:hover { border-color: var(--accent); }
.evt-toggle input { accent-color: var(--accent); width: 15px; height: 15px; flex: none; }
.evt-toggle:has(input:checked) { border-color: var(--accent); background: var(--accent-weak); }
.evt-name { font-size: 12.5px; font-weight: 600; }
.evt-inline-strong { font-weight: 700; color: var(--text); }

/* ============ Brand (settings sub-page) ============ */
body:has(.brnd-page) .workspace { background: #edf4f0; }
.brnd-page { max-width: 760px; }
.brnd-page .back-link { margin-bottom: 16px; }
.brnd-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.brnd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.brnd-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 18px; }
.brnd-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brnd-card-head strong { font-size: 14px; font-weight: 700; }
.brnd-preview {
  margin: 13px 0 11px; height: 108px; border-radius: 12px; border: 1px dashed var(--line);
  background: #f7faf8; display: grid; place-items: center; padding: 12px; overflow: hidden;
}
.brnd-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.brnd-initials {
  width: 56px; height: 56px; border-radius: 13px; background: var(--accent); color: #d8fdec;
  display: grid; place-items: center; font-size: 19px; font-weight: 700; letter-spacing: .02em;
}
.brnd-empty { font-size: 12.5px; color: var(--faint); }
.brnd-meta { margin: 0 0 11px; font-size: 12.5px; color: var(--muted); }
.brnd-note {
  display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px;
  border-radius: 12px; background: var(--accent-weak); color: var(--muted); font-size: 12.5px; line-height: 1.5;
}
.brnd-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--accent); }
.brnd-note a { color: var(--accent); }
.brnd-page .notif-actions { margin-top: 18px; }
@media (max-width: 640px) {
  .brnd-grid { grid-template-columns: 1fr; }
}

/* ============ Invoice templates (gallery) ============ */
body:has(.tpl-page) .workspace { background: #edf4f0; }
.tpl-page .back-link { margin-bottom: 16px; }
.tpl-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.tpl-hero-main { min-width: 0; }
.tpl-hero-locked { display: block; font-size: 12px; color: rgba(243, 239, 227, .72); margin-bottom: 8px; }

/* "New template" tile that matches the card grid. */
/* display:block (not flex) so the native <details> collapse keeps the create
   form hidden until the summary is clicked; the summary centers itself. */
.tpl-card-new { border: 1.5px dashed var(--line); border-radius: var(--radius); background: #fff; display: block; min-height: 190px; }
.tpl-card-new:hover { border-color: var(--accent); }
.tpl-card-new[open] { padding: 16px; }
.tpl-new-summary { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--accent); font-weight: 700; font-size: 13px; cursor: pointer; height: 100%; justify-content: center; min-height: 190px; text-align: center; }
.tpl-new-summary::-webkit-details-marker { display: none; }
/* When open the summary becomes a compact header above the form. */
.tpl-card-new[open] .tpl-new-summary { display: none; }
.tpl-new-plus { font-size: 26px; line-height: 1; }
/* Hidden until the card is open - an explicit display beats the UA "hide closed
   <details> children" rule, so it must be gated on [open], not left as grid. */
.tpl-new-form { display: none; gap: 8px; }
.tpl-card-new[open] .tpl-new-form { display: grid; }
.tpl-new-form input { min-height: 34px; border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; }

/* ============ Plans (comparison) ============ */
body:has(.plans-page) .workspace { background: #edf4f0; }
.plans-page .back-link { margin-bottom: 16px; }
.plans-hero { text-align: center; }
.plans-hero p { margin-left: auto; margin-right: auto; }
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; align-items: stretch; }
@media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; } }
.plans-page .plan-card { display: flex; flex-direction: column; }
.plans-page .plan-tag.is-current { background: #0f4c3d; color: #7cf0c6; }
.plans-page .plan-features { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; }
.plans-page .plan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--text); }
.plans-page .plan-features svg { color: var(--accent); flex: none; margin-top: 2px; }
.plans-page .plan-cta { margin-top: auto; }
.plans-page .plan-cta .button, .plans-page .plan-cta form, .plans-page .plan-cta .button-ghost { width: 100%; justify-content: center; }
.plans-page .plan-cta button { width: 100%; }

/* ===================== Delivery (Invoice sending) - immersive ===================== */
body:has(.dlv-page) .workspace { background: #edf4f0; }

.dlv-page { max-width: 900px; }
.dlv-page .back-link { margin-bottom: 16px; }

.dlv-hero {
  background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
  border-radius: 14px;
  color: #f3efe3;
  padding: 22px 24px;
  margin-bottom: 18px;
}

.dlv-hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7cf0c6;
  font-weight: 700;
}

.dlv-hero h1 { margin: 9px 0 0; font-size: 22px; font-weight: 750; letter-spacing: -.01em; color: #fff; }
.dlv-hero p { margin: 6px 0 0; font-size: 12.5px; color: rgba(243, 239, 227, .72); max-width: 64ch; }

/* The channel panels sit on the pastel ground; give the tab content a card. */
.dlv-page .chan-panel.is-on {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}

.dlv-page .notif-actions { margin-top: 18px; }

.notif-page .back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 16px;
}

.notif-status {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--panel-subtle);
  margin-bottom: 22px;
}

.notif-status-ico {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  display: grid;
  place-items: center;
}

.notif-status strong {
  font-size: 14px;
}

.notif-status p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.ph-label {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 600;
}

.ph-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.ph-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 7px;
}

.notif-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px 22px;
}

.notif-card + .notif-card {
  margin-top: 14px;
}

.notif-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.notif-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.notif-ico svg {
  width: 19px;
  height: 19px;
}

/* Brand marks (e.g. Slack) keep their own colors, so use a neutral tile. */
.notif-ico--brand {
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
}

.notif-ico--brand svg {
  width: 20px;
  height: 20px;
}

.notif-head-text {
  flex: 1;
  min-width: 0;
}

.notif-head-text strong {
  font-size: 14px;
}

.notif-head-text p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.notif-fields {
  margin-top: 16px;
  display: grid;
  gap: 14px;
}

.notif-card.is-collapsed .notif-fields {
  display: none;
}

/* Expand/collapse chevron in the card header (replaces the on/off toggle). */
.notif-expand {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.notif-expand svg {
  transition: transform 0.18s ease;
}

.notif-expand[aria-expanded="true"] {
  background: var(--accent-weak);
  border-color: transparent;
  color: var(--accent);
}

.notif-expand[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.notif-expand:hover {
  color: var(--text);
  border-color: #cfcfcf;
}

.notif-expand[aria-expanded="true"]:hover {
  color: var(--accent);
  border-color: transparent;
}

.notif-expand:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-weak);
}

/* First row inside an expanded card: the enable/disable checkbox. */
.notif-enable {
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
}

/* Connected-account block (Slack): status row, actions, and note aligned. */
.notif-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.notif-connect-status {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text);
}

.notif-connect-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.notif-connect .button-inline {
  margin: 0;
}

.notif-connect-note {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
}

.notif-actions {
  margin-top: 22px;
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  flex: 0 0 auto;
}

.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.switch-track {
  position: absolute;
  inset: 0;
  background: var(--line);
  border-radius: 999px;
  transition: background 0.15s ease;
  pointer-events: none;
}

.switch-track::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--accent);
}

.switch input:checked + .switch-track::before {
  transform: translateX(16px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===================== Support ===================== */
.support-head {
  margin-bottom: 28px;
}

.support-head h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.support-head p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.support-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}

.support-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 22px 24px;
}

.support-card-head {
  margin-bottom: 18px;
}

.support-card-head h2 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.support-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.support-actions {
  margin-top: 16px;
}

.support-rail {
  display: grid;
  gap: 16px;
}

.support-rail .support-card {
  padding: 20px;
}

.support-card h3 {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}

.support-sub {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}

.support-reach {
  margin-top: 6px;
}

.support-chan {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
  color: inherit;
}

.support-chan:first-child {
  border-top: 0;
}

.support-ico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-weak);
  color: var(--accent);
  display: grid;
  place-items: center;
}

.support-ico svg {
  width: 19px;
  height: 19px;
}

.support-chan strong {
  display: block;
  font-size: 14px;
}

.support-chan span {
  color: var(--muted);
  font-size: 12.5px;
}

.support-faq {
  margin-top: 24px;
}

.support-faq .faq {
  margin-top: 6px;
}

.support-faq details {
  border-top: 1px solid var(--line-soft);
}

.support-faq details:first-child {
  border-top: 0;
}

.support-faq summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 500;
}

.support-faq summary::-webkit-details-marker {
  display: none;
}

.support-faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-right: 1.6px solid var(--faint);
  border-bottom: 1.6px solid var(--faint);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex: 0 0 auto;
  margin-right: 3px;
}

.support-faq details[open] summary::after {
  transform: rotate(-135deg);
}

.support-faq details p {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  max-width: 90%;
}

@media (max-width: 900px) {
  .support-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.order-missing-state {
  border-color: #f3c9c2;
  background: var(--red-weak);
}

.preview-card {
  padding: 14px;
}

.preview-card h3,
.channel-card h3 {
  font-size: 14px;
  font-weight: 760;
}

.split-layout {
  display: grid;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.split-layout > .section-card {
  max-height: calc(100vh - 118px);
  overflow: auto;
}

.invoice-editor-shell {
  gap: 16px;
}

/* Group the editor accordions into a few labelled clusters (Design / Content /
   Line items / Layout) so the panel reads as 4 groups, not a wall of sections. */
.editor-group {
  display: grid;
  gap: 8px;
}

.editor-group-title {
  margin: 2px 2px 1px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Collapsible accordion for the invoice editor sections. */
.acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--text);
}

.acc-header:hover .acc-chevron {
  color: var(--text);
}

.acc-header:focus-visible {
  outline: 2px solid var(--accent-weak);
  outline-offset: 4px;
  border-radius: 4px;
}

.acc-chevron {
  flex: none;
  color: var(--muted);
  transition: transform 0.18s ease;
}

.acc-item.is-open .acc-chevron {
  transform: rotate(180deg);
}

/* Collapsed: hide everything but the header. Open items keep each child's
   own display (grid/flex/block) since no override is applied. */
.acc-item:not(.is-open) > :not(.acc-header) {
  display: none;
}

.template-preset-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.template-preset {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.template-preset:hover,
.template-preset.is-active {
  border-color: var(--accent);
  background: var(--accent-weak);
}

/* Templates not included in the merchant's plan: greyed with a tier badge
   showing the plan that unlocks them. */
.template-preset.is-locked {
  cursor: not-allowed;
}

.template-preset.is-locked:hover {
  border-color: var(--line);
  background: #ffffff;
}

.template-preset.is-locked .template-preset-name {
  color: var(--muted);
}

.template-lock-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  padding: 3px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.template-lock-badge.tier-basic {
  background: #eef2f1;
  color: #4b5f59;
}

.template-lock-badge.tier-pro {
  background: var(--accent-weak);
  color: var(--accent);
}

.template-preset-name {
  font-weight: 760;
}

.template-preset-meta {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Style presets: filterable, scrollable grid of curated one-click bundles. */
.preset-panel {
  display: grid;
  gap: 10px;
}

.preset-note {
  margin: 0;
}

/* One-row, horizontally scrollable layout filter (was a 3-row wrap). */
.preset-filter {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 3px;
  scrollbar-width: none;
}

.preset-filter::-webkit-scrollbar {
  display: none;
}

.preset-chip {
  flex: none;
  font: inherit;
  font-size: 11px;
  font-weight: 640;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  cursor: pointer;
  white-space: nowrap;
}

.preset-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.preset-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--line-strong);
  border-color: var(--line-strong);
}

.preset-card.is-hidden {
  display: none;
}

/* ---- Library "Start from a preset": minimal swatch + name cards ---- */
.lib-preset-scroll {
  max-height: 430px;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 2px 4px;
}

.lib-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.lib-preset {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 11px;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
}

.lib-preset:hover {
  border-color: var(--accent);
  background: var(--accent-weak);
}

.lib-preset-swatch {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.lib-preset-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.lib-preset-name {
  font-weight: 680;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lib-preset-meta {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.lib-preset.is-locked {
  cursor: not-allowed;
}

.lib-preset.is-locked:hover {
  border-color: var(--line);
  background: #fff;
}

.lib-preset.is-locked .lib-preset-swatch {
  filter: grayscale(1);
  opacity: 0.55;
}

.lib-preset.is-locked .lib-preset-name {
  color: var(--muted);
}

/* Tier badge flows inline on the right of the row (not absolute like the tall card). */
.lib-preset .template-lock-badge {
  position: static;
  margin-left: auto;
  flex: none;
}

/* ---- Live mini-invoice preset cards (no nested scroll; preview the style) ---- */
.preset-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.preset-card:hover,
.preset-card.is-active {
  background: #fff;
}

.preset-card.is-active {
  box-shadow: 0 0 0 1px var(--accent);
}

/* The tiny invoice: accent header/logo + total, faint item rows, in the
   preset's own typeface (set inline). Purely decorative preview. */
.pminv {
  --pa: #333;
  height: 84px;
  padding: 9px 10px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border-bottom: 1px solid var(--line-soft);
}

.pminv-top {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.pminv-logo {
  flex: none;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  background: var(--pa);
}

.pminv-lines {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}

.pminv-lines i {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: #ccd5d0;
}

.pminv-lines i:first-child { width: 60%; }
.pminv-lines i:last-child { width: 40%; }

.pminv-tag {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--pa);
}

.pminv-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 1px;
}

.pminv-rows i {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: #e6ece8;
}

.pminv-rows i:nth-child(1) { width: 100%; }
.pminv-rows i:nth-child(2) { width: 86%; }
.pminv-rows i:nth-child(3) { width: 66%; }

.pminv-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pminv-tl {
  font-size: 7px;
  font-weight: 600;
  color: #9aa6a0;
}

.pminv-tv {
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  background: var(--pa);
  padding: 2px 6px;
  border-radius: 4px;
}

.preset-card-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 9px;
}

.preset-card-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.preset-check {
  margin-left: auto;
  flex: none;
  color: var(--accent);
  opacity: 0;
}

.preset-card.is-active .preset-check {
  opacity: 1;
}

.preset-card .template-preset-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Locked previews read as unavailable. */
.preset-card.is-locked .pminv {
  filter: grayscale(0.5);
  opacity: 0.7;
}

/* "Show all N presets" - spans the grid; hidden once expanded or when filtering. */
.preset-showall {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 2px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 9px;
  cursor: pointer;
}

.preset-showall:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.preset-showall.is-hidden {
  display: none;
}

.style-tool-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.invoice-line-editor {
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.invoice-line-editor:first-of-type {
  padding-top: 0;
  border-top: 0;
}

/* Bundled IBM Plex families (ruby_app/public/fonts, OFL) so the on-screen
   invoice renders the SAME face the Prawn PDF embeds. Only the family actually
   referenced by --invoice-font is fetched by the browser. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Sans"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexSans-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexSerif-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexSerif-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexSerif-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Serif"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexSerif-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexMono-Bold.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/IBMPlexMono-Italic.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-style: italic; font-weight: 700; font-display: swap; src: url("/assets/fonts/IBMPlexMono-BoldItalic.ttf") format("truetype"); }

.template-preview {
  --invoice-accent: var(--accent);
  --invoice-font: "IBM Plex Sans", "Aptos", "Segoe UI", sans-serif;
  position: sticky;
  top: 94px;
  padding: 28px;
  color: #24282d;
  background: #ffffff;
  font-family: var(--invoice-font);
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.preview-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 2px solid #24282d;
}

.preview-meta,
.totals-stack {
  display: grid;
  gap: 5px;
}

.preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 22px 0;
}

.preview-line-items {
  width: 100%;
  border-collapse: collapse;
}

.preview-line-items th,
.preview-line-items td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
}

.preview-brand {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.preview-logo-mark {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 10px;
  border-radius: 12px;
  color: #fff;
  background: var(--invoice-accent);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

/* The logo is either the image OR the monogram, never both. The display rules
   above would otherwise beat the [hidden] attribute's UA display:none, so the
   hidden one must be explicitly removed. */
.preview-logo-mark[hidden],
.preview-logo-img[hidden] {
  display: none;
}

.preview-style-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin-bottom: 10px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--invoice-accent);
  background: color-mix(in srgb, var(--invoice-accent) 10%, white);
  font-size: 11px;
  font-weight: 760;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* PAID marker on a receipt's meta column. */
.preview-paid-badge {
  display: inline-flex;
  align-items: center;
  align-self: flex-end;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 999px;
  color: var(--invoice-accent);
  background: color-mix(in srgb, var(--invoice-accent) 12%, white);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.template-preview [data-preview-key="address"],
.template-preview [data-preview-key="client_address"],
.template-preview [data-preview-key="notes"],
.template-preview [data-preview-key="bank_details"],
.template-preview [data-preview-key="terms"] {
  white-space: pre-line;
}

.template-preview[data-surface-tone="paper"] {
  background: #fffdf8;
}

.template-preview[data-surface-tone="mist"] {
  background: #f7fbff;
}

.template-preview[data-surface-tone="sand"] {
  background: #fff7eb;
}

.template-preview[data-surface-tone="mint"] {
  background: #f3fcf8;
}

.template-preview[data-surface-tone="night"] {
  color: #f8fafc;
  background: #0f1720;
  border-color: #0f1720;
}

.template-preview[data-surface-tone="night"] .muted,
.template-preview[data-surface-tone="night"] .eyebrow,
.template-preview[data-surface-tone="night"] .preview-line-items th,
.template-preview[data-surface-tone="night"] .preview-line-items td,
.template-preview[data-surface-tone="night"] .preview-meta,
.template-preview[data-surface-tone="night"] .totals-stack {
  color: #d7dee7;
}

.template-preview[data-surface-tone="night"] .preview-line-items th,
.template-preview[data-surface-tone="night"] .preview-line-items td {
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

.template-preview[data-header-align="stacked"] .preview-header {
  align-items: flex-start;
  flex-direction: column;
}

.template-preview[data-header-align="left"] .preview-header {
  display: grid;
  justify-content: flex-start;
}

.template-preview[data-density="compact"] {
  padding: 20px;
}

.template-preview[data-density="compact"] .preview-grid {
  gap: 12px;
  margin: 14px 0;
}

.template-preview[data-density="compact"] .preview-line-items th,
.template-preview[data-density="compact"] .preview-line-items td {
  padding: 6px 0;
}

.template-preview[data-density="spacious"] {
  padding: 38px;
}

.template-preview[data-density="spacious"] .preview-grid {
  margin: 28px 0;
}

.template-preview[data-density="spacious"] .preview-line-items th,
.template-preview[data-density="spacious"] .preview-line-items td {
  padding: 12px 0;
}

.template-preview[data-template="modern"] {
  color: #16324f;
  background: linear-gradient(180deg, #eef6ff 0%, #ffffff 22%);
  border-color: #cfe0fb;
}

.template-preview[data-template="modern"] .preview-header {
  border-bottom-color: var(--invoice-accent);
}

.template-preview[data-template="modern"] .preview-style-badge {
  color: var(--invoice-accent);
  background: color-mix(in srgb, var(--invoice-accent) 12%, white);
}

.template-preview[data-template="modern"] .preview-line-items th {
  color: var(--invoice-accent);
}

.template-preview[data-template="minimal"] {
  padding: 36px;
  color: #1e2933;
  border-color: #f1f3f6;
  box-shadow: 0 2px 10px rgba(20, 24, 28, 0.04);
}

.template-preview[data-template="minimal"] .preview-header {
  padding-bottom: 12px;
  border-bottom: 1px solid #d8dde4;
}

.template-preview[data-template="minimal"] .preview-style-badge {
  color: #56616d;
  background: #f2f5f8;
}

.template-preview[data-template="minimal"] .preview-line-items th,
.template-preview[data-template="minimal"] .preview-line-items td {
  border-bottom-color: #edf1f5;
}

.template-preview[data-template="minimal"] .preview-footer {
  padding-top: 14px;
  border-top: 1px solid #edf1f5;
}

.template-preview[data-template="bold"] {
  color: #f8fafc;
  background: linear-gradient(145deg, #15212b 0%, #0f1720 100%);
  border-color: #0f1720;
}

.template-preview[data-template="bold"] .muted,
.template-preview[data-template="bold"] .eyebrow,
.template-preview[data-template="bold"] .preview-line-items th,
.template-preview[data-template="bold"] .preview-line-items td,
.template-preview[data-template="bold"] .preview-meta,
.template-preview[data-template="bold"] .totals-stack {
  color: #d7dee7;
}

.template-preview[data-template="bold"] .preview-header {
  border-bottom-color: var(--invoice-accent);
}

.template-preview[data-template="bold"] .preview-style-badge {
  color: #0f1720;
  background: var(--invoice-accent);
}

.template-preview[data-template="bold"] .preview-line-items th,
.template-preview[data-template="bold"] .preview-line-items td {
  border-bottom-color: rgba(255, 255, 255, 0.12);
}

.template-preview[data-template="clean"] {
  color: #23403c;
  background: linear-gradient(180deg, #f7fbf7 0%, #ffffff 16%);
  border-color: #dfe9e0;
}

.template-preview[data-template="clean"] .preview-header {
  border-bottom-color: var(--invoice-accent);
}

.template-preview[data-template="clean"] .preview-style-badge {
  color: var(--invoice-accent);
  background: color-mix(in srgb, var(--invoice-accent) 10%, white);
}

.template-preview[data-template="clean"] .preview-grid {
  padding: 16px;
  border: 1px solid #e4ebe6;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.78);
}

.template-preview[data-template="compact"] {
  padding: 20px;
  font-size: 13px;
}

.template-preview[data-template="compact"] .preview-header {
  padding-bottom: 10px;
}

.template-preview[data-template="compact"] .preview-grid {
  gap: 12px;
  margin: 16px 0;
}

.template-preview[data-template="compact"] .preview-line-items th,
.template-preview[data-template="compact"] .preview-line-items td {
  padding: 6px 0;
}

.template-preview[data-template="compact"] .preview-footer {
  gap: 12px;
  margin-top: 16px;
}

.template-preview[data-template="compact"] .preview-style-badge {
  margin-bottom: 8px;
  min-height: 20px;
  font-size: 10px;
}

.template-preview[data-template="editorial"] {
  color: #35281c;
  background: linear-gradient(180deg, #fffaf2 0%, #fff 24%);
  border-color: #e6d7c6;
  font-family: Georgia, "Times New Roman", serif;
}

.template-preview[data-template="editorial"] .preview-header {
  border-bottom: 1px solid #b08a62;
}

.template-preview[data-template="editorial"] .preview-style-badge {
  color: #8c5d2f;
  background: #f6ead9;
}

.template-preview[data-template="ledger"] {
  color: #22313f;
  background:
    linear-gradient(transparent 31px, rgba(49, 88, 126, 0.09) 32px),
    linear-gradient(90deg, transparent 63px, rgba(49, 88, 126, 0.08) 64px),
    #ffffff;
  background-size: 100% 32px, 64px 100%, auto;
  border-color: #c7d5e5;
}

.template-preview[data-template="ledger"] .preview-header {
  border-bottom-color: #4b6b8c;
}

.template-preview[data-template="ledger"] .preview-style-badge {
  color: #4b6b8c;
  background: #edf3fa;
}

.template-preview[data-template="luxe"] {
  color: #2f2618;
  background: linear-gradient(180deg, #fffdf8 0%, #f8f1e4 100%);
  border-color: #e8dac0;
  box-shadow: 0 8px 24px rgba(78, 62, 28, 0.08);
}

.template-preview[data-template="luxe"] .preview-header {
  border-bottom-color: #9b7b2f;
}

.template-preview[data-template="luxe"] .preview-style-badge {
  color: #7e5f1a;
  background: #f7ebc8;
}

.template-preview[data-template="luxe"] .preview-logo-mark {
  border-radius: 999px;
}

.template-preview[data-template="mono"] {
  color: #1f2933;
  background: #fcfcfc;
  border-color: #d5d9de;
  font-family: "Courier New", "SFMono-Regular", monospace;
}

.template-preview[data-template="mono"] .preview-header {
  border-bottom: 3px double #7d8790;
}

.template-preview[data-template="mono"] .preview-style-badge {
  color: #4a5560;
  background: #eef0f2;
}

.template-preview[data-template="mono"] .preview-logo-mark {
  border-radius: 6px;
}

.template-preview[data-template="classic"] .preview-style-badge {
  color: var(--invoice-accent);
  background: color-mix(in srgb, var(--invoice-accent) 10%, white);
}

.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.step {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: var(--muted);
  background: #e9edf2;
  font-size: 12px;
  font-weight: 760;
}

.step.is-active {
  color: #ffffff;
  background: var(--accent);
}

.step.is-complete {
  color: var(--accent);
  background: var(--accent-weak);
}

.step-line {
  width: 36px;
  height: 1px;
  background: var(--line);
}

.print-body {
  padding: 24px;
  background: #f3f4f6;
}

.print-toolbar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.print-sheet {
  max-width: 920px;
  margin: 0 auto;
  padding: 40px;
}

/* --- Packing slip preview -------------------------------------------------
   The sheet renders at its real paper size (width/height set inline in inches
   by the view, from PageSize), so A4 vs 4x6 vs a custom size all preview true
   to scale. Layout (standard/compact) is chosen via [data-layout]. */
.pack-sheet {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0.5in;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: #24282d;
  font-family: var(--pack-font, inherit);
  font-size: 12px;
  line-height: 1.4;
}
.pack-sheet[data-layout="compact"] { padding: 0.2in; font-size: 11px; }
.pack-sheet p { margin: 0; }
.pack-muted { color: #667085; }
.pack-accent { color: var(--pack-accent); }
.pack-eyebrow {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: #667085; margin-bottom: 4px;
}

.pack-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pack-brand { display: flex; gap: 12px; align-items: flex-start; }
.pack-brand h2 { margin: 2px 0 0; font-size: 18px; }
.pack-logo-mark {
  width: 42px; height: 42px; border-radius: 6px; flex: none;
  background: var(--pack-accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.pack-logo-img { width: 42px; height: 42px; object-fit: contain; }
.pack-meta { text-align: right; display: flex; flex-direction: column; gap: 1px; }
.pack-meta strong { font-size: 14px; }
.pack-meta span { color: #667085; font-size: 11px; }
.pack-accent-rule { height: 2px; background: var(--pack-accent); margin: 14px 0 16px; }
.pack-rule { height: 1px; background: var(--line); margin: 10px 0; }

.pack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 18px; }
.pack-grid p { margin: 1px 0; }

.pack-items { width: 100%; border-collapse: collapse; }
.pack-items th {
  text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--pack-accent); color: #fff; padding: 7px 8px;
}
.pack-items td { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.pack-items .r { text-align: right; }

.pack-footer { margin-top: 16px; }
.pack-footer p { margin: 3px 0; }
.pack-sign { margin-top: 18px; }
.pack-sign-line { display: inline-block; width: 180px; border-bottom: 1px solid #667085; }

.pack-compact-head { display: flex; flex-direction: column; gap: 2px; }
.pack-number { font-size: 18px; font-weight: 700; }
.pack-compact-items { list-style: none; margin: 0; padding: 0; }
.pack-compact-items li { padding: 2px 0; }

/* Packing template library thumbnails (paper-shape preview at true ratio). */
.pack-thumb {
  display: flex; align-items: center; justify-content: center;
  background: #f6f7f5; border: 1px solid var(--line); border-radius: 10px;
  height: 150px; padding: 14px; text-decoration: none;
}
.pack-thumb-paper {
  background: #fff; border: 1px solid var(--line); border-radius: 3px;
  height: 100%; max-height: 122px; padding: 8px 7px;
  display: flex; flex-direction: column; gap: 5px; box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.pack-thumb-paper.is-wide { height: auto; width: 122px; }
.pack-thumb-bar { height: 4px; border-radius: 2px; background: #e2e5e1; }
.pack-thumb-bar.accent { background: var(--accent); width: 60%; }
.pack-thumb-bar.short { width: 40%; }

/* Packing template editor: controls on the left, live preview on the right. */
/* [hidden] must beat the display rules on .field / preview blocks. */
.pack-editor [hidden] { display: none !important; }
.pack-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pack-editor-grid {
  display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 24px; align-items: start;
}
.pack-editor-controls { gap: 14px; }
.pack-custom-row { display: flex; align-items: center; gap: 8px; }
.pack-custom-row input[type="number"] { width: 84px; }
.pack-custom-row select { width: 68px; }
.pack-toggle-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.pack-editor-preview { position: sticky; top: 16px; }
.pack-preview-frame {
  background: #ececea; border: 1px solid var(--line); border-radius: 12px;
  padding: 24px; display: flex; justify-content: center; overflow: auto; max-height: 78vh;
}
.pack-editor-preview .pack-sheet { max-width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,.08); }

@media (max-width: 900px) {
  .pack-editor-grid { grid-template-columns: 1fr; }
  .pack-editor-preview { position: static; }
}

.faq-item {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 720;
}

.faq-item p {
  margin-top: 8px;
  color: var(--muted);
}

/* ---- lg breakpoint: below 1024px the fixed sidebar becomes a slide-in drawer
   and the mobile top bar takes over navigation. ---- */
@media (max-width: 1023px) {
  .app-frame {
    display: block;
  }

  .app-topbar {
    display: flex;
  }

  /* Sidebar -> off-canvas drawer. It keeps its brand-green styling verbatim. */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    width: min(284px, 82vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    overflow-y: auto;
  }

  html.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.5);
  }

  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(8, 20, 16, 0.44);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }

  html.nav-open .nav-scrim {
    opacity: 1;
    visibility: visible;
  }

  html.nav-open,
  html.nav-open body {
    overflow: hidden;
  }

  /* The desktop rail-collapse toggle has no meaning inside the drawer. */
  .sidebar-toggle {
    display: none;
  }

  /* A persisted nav-rail collapse must not hide labels in the drawer: restore
     the full-width nav regardless of the stored rail state. */
  html.nav-rail {
    --sidebar-width: 224px;
  }

  html.nav-rail .brand-text {
    display: block;
  }

  html.nav-rail .nav-label {
    display: inline;
  }

  html.nav-rail .sidebar-profile-text {
    display: flex;
  }

  html.nav-rail .brand {
    justify-content: flex-start;
    margin-top: 0;
    padding: 2px 6px 16px;
    border-bottom-color: transparent;
  }

  html.nav-rail .nav-link {
    justify-content: flex-start;
    padding: 0 11px;
    gap: 11px;
  }

  html.nav-rail .nav-link.is-active::before {
    display: block;
  }

  html.nav-rail .sidebar-profile {
    justify-content: flex-start;
    gap: 10px;
    padding: 9px;
  }

  html.nav-rail .sidebar-footnote {
    padding: 12px 4px 2px;
  }

  /* Content-level collapses retained from the previous shell breakpoint. */
  .split-layout {
    grid-template-columns: 1fr;
  }

  .order-workspace {
    grid-template-columns: 1fr;
  }

  .split-layout > .section-card,
  .template-preview {
    position: static;
    max-height: none;
  }

  .order-side-column {
    position: static;
  }
}

@media (max-width: 720px) {
  .topbar,
  .toolbar,
  .trial-banner,
  .sync-banner,
  .pagination,
  .preview-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .topbar,
  .page-content,
  .trial-banner,
  .sync-banner,
  .flash {
    padding-left: 16px;
    padding-right: 16px;
  }

  .grid-two,
  .grid-three,
  .grid-four,
  .cards-grid,
  .preview-grid {
    grid-template-columns: 1fr;
  }

  .sync-progress {
    width: 100%;
  }

  .sync-request-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-recovery-header,
  .sync-request-actions {
    width: 100%;
  }

  .sync-recovery-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .sync-recovery-tools {
    justify-content: flex-start;
  }

  .metric-card .value,
  .value {
    font-size: 24px;
  }

  .public-shell {
    padding: 16px;
  }
}

@media print {
  .sidebar,
  .topbar,
  .trial-banner,
  .sync-banner,
  .flash,
  .print-toolbar,
  .button,
  .button-secondary,
  .button-ghost {
    display: none !important;
  }

  .app-frame,
  .workspace,
  .page-content {
    display: block;
    padding: 0;
  }

  .template-preview,
  .print-sheet {
    position: static;
    box-shadow: none;
    border: 0;
  }
}

/* Date range picker */
[data-date-range] {
  position: relative;
}

.date-range-native {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* JS hides the native fallback once the rich picker mounts; an explicit
   display rule above otherwise overrides the [hidden] attribute. */
.date-range-native[hidden] {
  display: none;
}

.date-range-native input {
  flex: 1;
}

.date-range-native-sep {
  color: var(--muted);
  font-size: 12px;
}

.date-range-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 7px 10px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.date-range-trigger:hover {
  border-color: var(--accent);
}

.date-range-trigger[aria-expanded="true"] {
  outline: 2px solid rgba(20, 124, 100, 0.16);
  border-color: var(--accent);
}

.date-range-trigger-icon {
  display: inline-flex;
  color: var(--muted);
}

.date-range-trigger-label {
  flex: 1;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.date-range-trigger.has-value .date-range-trigger-label {
  color: var(--text);
  font-weight: 600;
}

.date-range-popover[hidden] {
  display: none;
}

.date-range-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.date-range-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
  margin-right: 12px;
  border-right: 1px solid var(--line-soft, var(--line));
}

.date-range-preset {
  padding: 7px 12px;
  font: inherit;
  font-size: 13px;
  text-align: left;
  white-space: nowrap;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.date-range-preset:hover {
  background: var(--bg);
}

.date-range-preset.is-active {
  color: var(--accent);
  background: var(--accent-weak);
  font-weight: 600;
}

/* Presets that fall outside the plan's data window. */
.date-range-preset.is-disabled {
  color: var(--faint, #9a9a9a);
  text-decoration: line-through;
  cursor: not-allowed;
}

.date-range-preset.is-disabled:hover {
  background: transparent;
}

.date-range-lock-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
}

.date-range-main {
  position: relative;
}

.date-range-nav {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 4px;
}

.date-range-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.date-range-nav-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.date-range-calendars {
  display: flex;
  gap: 20px;
}

.date-range-cal-head {
  margin-bottom: 8px;
  text-align: center;
}

.date-range-cal-title {
  font-size: 13px;
  font-weight: 720;
  color: var(--text);
}

.date-range-grid {
  display: grid;
  grid-template-columns: repeat(7, 32px);
  gap: 2px;
}

.date-range-weekday {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  font-size: 11px;
  font-weight: 700;
  color: var(--faint, var(--muted));
}

.date-range-day {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  font: inherit;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.date-range-day.is-empty {
  cursor: default;
}

/* Days outside the plan's data window (e.g. Free = last 30 days). */
.date-range-day.is-disabled {
  color: #cdcdcd;
  cursor: not-allowed;
}

.date-range-day:not(.is-empty):not(.is-disabled):hover {
  background: var(--accent-weak);
}

.date-range-day.is-today {
  font-weight: 720;
  box-shadow: inset 0 0 0 1px var(--line);
}

.date-range-day.is-in-range {
  background: var(--accent-weak);
  border-radius: 0;
}

.date-range-day.is-start,
.date-range-day.is-end {
  color: #ffffff;
  background: var(--accent);
  font-weight: 700;
}

.date-range-day.is-start {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.date-range-day.is-end {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.date-range-day.is-start.is-end {
  border-radius: var(--radius-sm);
}

.date-range-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft, var(--line));
}

@media (max-width: 720px) {
  .date-range-popover {
    flex-direction: column;
  }

  .date-range-presets {
    flex-direction: row;
    flex-wrap: wrap;
    padding-right: 0;
    margin-right: 0;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line-soft, var(--line));
  }

  .date-range-calendars {
    flex-direction: column;
  }
}

/* ============================ Home dashboard ============================ */
.dashboard .home-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.dashboard .home-title {
  margin: 0;
  font-size: 20px;
  font-weight: 780;
  letter-spacing: -0.01em;
}

.dashboard .home-sub {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.dashboard .home-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard .home-actions form {
  margin: 0;
}

/* Needs attention strip */
.dashboard .attn-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}

.dashboard .attn-head h2 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
}

.dashboard .attn-count {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--amber-weak);
  color: var(--amber);
  font-size: 11px;
  font-weight: 720;
}

.dashboard .attn-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.dashboard .attn-tile {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px;
}

.dashboard .attn-ico {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}

.dashboard .attn-ico.is-warn {
  color: var(--amber);
  background: var(--amber-weak);
}

.dashboard .attn-ico.is-info {
  color: var(--accent);
  background: var(--accent-weak);
}

.dashboard .attn-ico.is-ok {
  color: var(--accent);
  background: var(--accent-weak);
}

.dashboard .attn-body {
  flex: 1;
  min-width: 0;
}

.dashboard .attn-body strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.dashboard .attn-body small {
  color: var(--muted);
  font-size: 12px;
}

.dashboard .attn-tile form {
  margin: 0;
}

.dashboard .attn-tile .button-ghost {
  min-height: 30px;
  padding: 0 12px;
}

/* Status pill */
.dashboard .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 660;
  color: var(--muted);
  white-space: nowrap;
}

.dashboard .pill.is-ok {
  color: var(--accent);
  border-color: var(--accent-weak);
  background: var(--accent-weak);
}

.dashboard .pill.is-info {
  color: var(--blue);
  border-color: var(--blue-weak);
  background: var(--blue-weak);
}

.dashboard .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* Main + rail layout */
.dashboard .home-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 12px;
  align-items: start;
}

.dashboard .home-main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.dashboard .home-rail {
  display: grid;
  gap: 12px;
}

/* KPI values sit four-across beside the rail, so keep long money values from
   crowding the next column. */
.dashboard .grid-four .value {
  font-size: 23px;
  letter-spacing: -0.01em;
}

.dashboard .metric-card {
  position: relative;
}

/* Small period-over-period trend chip, top-right of a KPI card. */
.dashboard .metric-delta {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 11px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard .metric-delta.up {
  color: var(--accent);
}

.dashboard .metric-delta.down {
  color: var(--red);
}

.dashboard .metric-foot {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

/* Section card header row with trend chip */
.dashboard .card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dashboard .card-head h2 {
  margin: 2px 0 0;
}

.dashboard .delta {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.dashboard .delta.up {
  color: var(--accent);
}

.dashboard .delta.down {
  color: var(--red);
}

/* Dashboard - Total sales breakdown (Shopify-style gross -> total + KPIs) */
.dashboard .sb-card { padding: 0; overflow: hidden; }
.dashboard .sb-head { padding: 18px 24px 16px; border-bottom: 1px solid var(--line-soft); }
.dashboard .sb-head h3 { font-size: 15px; font-weight: 700; }
.dashboard .sb-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }

.dashboard .sb-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 0 24px;
  padding: 12px 24px 18px;
  align-items: stretch;
}
.dashboard .sb-rows { min-width: 0; }
.dashboard .sb-row {
  display: grid;
  grid-template-columns: 1fr auto 62px;
  align-items: baseline;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
}
/* Zebra shading matches the reference (Discounts / Net / Return fees / Total). */
.dashboard .sb-row:nth-child(even) { background: var(--hover); }
.dashboard .sb-row .k { color: var(--text); }
.dashboard .sb-row .amt { text-align: right; font-weight: 640; }
.dashboard .sb-row .amt.neg { color: var(--red); }
.dashboard .sb-row .sb-dc { justify-self: end; text-align: right; white-space: nowrap; }
.dashboard .sb-none { color: var(--faint); font-weight: 600; }
.dashboard .sb-row-net .k,
.dashboard .sb-row-net .amt { font-weight: 720; }
.dashboard .sb-row-total { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 8px 8px; }
.dashboard .sb-row-total .k { font-weight: 760; }
.dashboard .sb-row-total .amt { font-weight: 780; color: var(--accent); }

/* Supporting KPIs: a vertical stack that fills the rows' height so both
   columns line up top and bottom. */
.dashboard .sb-kpis { display: flex; flex-direction: column; gap: 10px; }
.dashboard .sb-kpi {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 15px;
  background: var(--hover);
}
.dashboard .sb-kpi-k { font-size: 12px; color: var(--muted); }
.dashboard .sb-kpi-v { font-size: 19px; font-weight: 740; margin-top: 4px; letter-spacing: -0.01em; }

@media (max-width: 768px) {
  .dashboard .sb-body { grid-template-columns: 1fr; gap: 16px; }
  .dashboard .sb-kpis { flex-direction: row; flex-wrap: wrap; }
  .dashboard .sb-kpi { flex: 1 1 45%; }
}

/* Revenue area chart */
.dashboard .area-chart {
  position: relative;
  margin-top: 14px;
}

.dashboard .area-chart svg {
  display: block;
  width: 100%;
  height: 160px;
}

/* Daily-revenue hover: hairline guide, accent dot, minimal white tooltip. */
.dashboard .spark-hit {
  fill: transparent;
  cursor: crosshair;
}

.dashboard .spark-guide {
  stroke: var(--text);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.dashboard .spark-dot {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}

.dashboard .area-chart.is-active .spark-guide,
.dashboard .area-chart.is-active .spark-dot {
  opacity: 1;
}

.dashboard .chart-tip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, calc(-100% - 12px));
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 11px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.08s ease;
  z-index: 5;
}

.dashboard .area-chart.is-active .chart-tip {
  opacity: 1;
}

.dashboard .chart-tip .tip-date {
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.dashboard .chart-tip .tip-val {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dashboard .chart-tip .tip-orders {
  font-size: 11px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Right rail cards */
.dashboard .rail-card {
  padding: 16px;
}

.dashboard .rail-card h3,
.dashboard .section-head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
}

.dashboard .store-badge {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dashboard .store-mark {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--accent-weak);
  color: var(--accent);
  font-size: 13px;
  font-weight: 780;
}

.dashboard .store-badge strong {
  font-size: 14px;
}

.dashboard .store-badge small {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.dashboard .usage {
  margin-top: 14px;
}

.dashboard .usage-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.dashboard .meterbar {
  height: 6px;
  border-radius: 999px;
  background: var(--line-soft);
  overflow: hidden;
}

.dashboard .meterbar span {
  display: block;
  height: 100%;
  background: var(--accent);
}

.dashboard .rail-list {
  display: grid;
  gap: 2px;
}

.dashboard .rail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}

.dashboard .rail-row:last-child {
  border-bottom: 0;
}

.dashboard .rail-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard .rail-row strong {
  font-variant-numeric: tabular-nums;
}

.dashboard .rail-more {
  display: inline-block;
  margin-top: 10px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 640;
}

.dashboard .rail-quick {
  display: grid;
  gap: 8px;
}

.dashboard .rail-quick .button-ghost {
  justify-content: flex-start;
}

@media (max-width: 1080px) {
  .dashboard .home-grid {
    grid-template-columns: 1fr;
  }

  .dashboard .attn-strip {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .dashboard .home-head {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ---- Invoice template library ---- */
.button-sm {
  min-height: 30px;
  padding: 0 11px;
  font-size: 12px;
}

.pill-default {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-weak);
  border-radius: 20px;
  padding: 2px 8px;
}

.library-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.library-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.library-locked {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.tpl-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.tpl-thumb {
  --tpl-accent: var(--accent);
  height: 120px;
  padding: 14px;
  background: var(--panel-subtle);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 7px;
  text-decoration: none;
}

.tpl-thumb-logo {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  background: var(--tpl-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.tpl-thumb-bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
}

.tpl-thumb-bars .bar {
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  width: 78%;
}

.tpl-thumb-bars .bar.bar-accent {
  width: 46%;
  height: 7px;
  background: var(--tpl-accent);
}

.tpl-thumb-bars .bar.short {
  width: 58%;
}

.tpl-thumb-foot {
  margin-top: auto;
  height: 5px;
  border-radius: 3px;
  background: var(--line);
  width: 88%;
}

.tpl-meta {
  padding: 12px 14px 4px;
}

.tpl-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.tpl-sub {
  margin-top: 3px;
  font-size: 12px;
  color: var(--faint);
}

.tpl-actions {
  padding: 10px 14px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.inline-form {
  display: inline-flex;
}

.rename-pop summary {
  list-style: none;
}

.rename-pop summary::-webkit-details-marker {
  display: none;
}

.rename-form {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}

.rename-form input[type="text"] {
  width: 150px;
}

/* ---- Section formatting (Phase 2) ---- */
.section-format-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-format-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text);
}

.fmt-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.fmt-select {
  height: 30px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  padding: 0 6px;
}

.fmt-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}

.fmt-check .fmt-i {
  font-style: italic;
  font-weight: 700;
}

.fmt-check:has(input:checked) {
  color: var(--accent);
  background: var(--accent-weak);
  border-color: transparent;
}

.fmt-color {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 8px 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
}

.fmt-color input[type="color"] {
  width: 26px;
  height: 20px;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}

.fmt-color input[type="color"]:disabled {
  opacity: 0.4;
  cursor: default;
}

/* Editor top bar (above the split layout). */
.editor-topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.editor-title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.editor-title-ico {
  flex: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--accent-weak);
  color: var(--accent);
}

.editor-title-ico svg {
  width: 19px;
  height: 19px;
}

.editor-title-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.editor-title-name {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.editor-title strong {
  font-size: 20px;
  font-weight: 760;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

/* ---- Line-item columns + sample rows (Phase 3) ---- */
.chip-btn {
  border: 1px dashed var(--line);
  background: transparent;
  color: var(--accent);
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  cursor: pointer;
}

.chip-btn:disabled {
  color: var(--faint);
  border-color: var(--line-soft);
  cursor: default;
}

.column-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.column-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
}

.column-item.dragging {
  opacity: 0.6;
  border-color: var(--accent);
}

.column-item .grip {
  color: var(--faint);
  cursor: grab;
  font-size: 12px;
  line-height: 1;
}

.column-item .col-vis {
  flex: none;
  cursor: pointer;
}

.column-item .col-label {
  flex: 1;
  min-width: 60px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  padding: 0 7px;
}

.col-remove {
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

.col-remove:hover {
  color: var(--red);
}

.col-remove:disabled {
  color: var(--line);
  cursor: default;
}

.line-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.line-row-num {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.line-row-remove {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  border-radius: 5px;
  font-size: 11px;
  padding: 3px 9px;
  cursor: pointer;
}

.line-row-remove:hover {
  color: var(--red);
  border-color: #f1c9c3;
}

.line-row-remove:disabled {
  color: var(--faint);
  cursor: default;
}

/* Sample rows: draggable cards whose inputs are generated from the visible
   line-item columns; "Amount" is a read-only computed cell. */
.invoice-line-editor,
.invoice-line-editor:first-of-type {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
  padding: 10px;
  margin-top: 8px;
}
.invoice-line-editor:first-of-type { margin-top: 0; }
.invoice-line-editor.dragging { opacity: 0.6; border-color: var(--accent); }
.line-row-head { gap: 8px; }
.line-row-head .grip { color: var(--faint); cursor: grab; font-size: 12px; line-height: 1; }
.line-row-head .line-row-num { flex: 1; }
.line-row-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(108px, 1fr));
  gap: 8px 10px;
  align-items: end;
}
.line-amount {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

/* ---- Logo upload (Phase 4) ---- */
.logo-editor {
  padding: 4px 0 2px;
}

/* Merged Logo control: a Monogram | Image toggle inside Visual controls. */
.logo-field { grid-column: 1 / -1; }
.logo-seg {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  margin: 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-subtle);
}
.logo-seg button {
  font: inherit;
  font-size: 12px;
  font-weight: 640;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: 5px 14px;
  cursor: pointer;
}
.logo-seg button.is-on {
  color: var(--text);
  background: var(--panel);
  box-shadow: 0 1px 2px rgba(16, 35, 28, 0.08);
}
.logo-pane[hidden] { display: none; }
.logo-field .hint { margin-top: 4px; font-size: 11.5px; color: var(--faint); }

.logo-drop {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  padding: 14px;
  background: var(--panel-subtle);
}

.logo-cur {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}

.logo-cur img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-cur.mono {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  border: 0;
}

.logo-meta {
  flex: 1;
  min-width: 0;
}

.logo-meta .fname {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo-meta .info {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
}

.logo-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.file-btn {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line-strong);
  background: var(--text);
  color: var(--bg);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.ghost-btn {
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}

.ghost-btn:hover {
  color: var(--text);
  border-color: #cfcfcf;
}

.logo-err {
  margin: 8px 0 0;
  font-size: 11.5px;
  color: var(--red);
}

.preview-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 8px;
}

/* ---- Layout: ordered blocks + custom fields/sections (Phase 5) ---- */
.preview-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.totals-block {
  display: flex;
  justify-content: flex-end;
}

.preview-footer-stack {
  border-top: 1px solid var(--line-soft);
  padding-top: 14px;
}

.preview-custom-fields {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.preview-custom-fields .cf-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.preview-custom-fields .cf-k { color: var(--muted); }
.preview-custom-fields .cf-v { color: var(--text); font-weight: 600; }

.footer-custom .eyebrow {
  margin-bottom: 2px;
}

/* editor: reorder + repeatable lists */
.order-list,
.cf-list,
.cs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.order-item,
.cf-item,
.cs-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-subtle);
}

.cs-item {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.cs-item .cs-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.order-item.dragging,
.cf-item.dragging,
.cs-item.dragging {
  opacity: 0.6;
  border-color: var(--accent);
}

.order-item .grip,
.cf-item .grip,
.cs-item .grip {
  color: var(--faint);
  cursor: grab;
  font-size: 12px;
  line-height: 1;
}

.order-item .order-label {
  font-size: 12.5px;
  font-weight: 600;
}

/* Pro-gated layout sections: inline "Pro" tag on the header + a read-only,
   dimmed preview of the current config with an upgrade prompt. */
.pro-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--accent);
  background: var(--accent-weak);
  vertical-align: middle;
}

.acc-upsell {
  margin: 0 0 10px;
  padding: 9px 11px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--accent-weak);
  color: var(--muted);
  font-size: 12.5px;
}

.acc-upsell a {
  color: var(--accent);
  font-weight: 700;
}

.acc-locked .is-readonly {
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}

.acc-locked .is-readonly .grip {
  cursor: default;
}

.cf-item.is-static .cf-ro-label {
  font-weight: 600;
  font-size: 12.5px;
}

.cf-item.is-static .cf-ro-value {
  flex: 1;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cs-item.is-static .cs-ro-title {
  font-weight: 600;
  font-size: 12.5px;
}

.cs-item.is-static .cs-ro-body {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  white-space: pre-line;
}

.cf-input,
.cs-title {
  flex: 1;
  min-width: 50px;
  height: 30px;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  padding: 0 7px;
}

.cs-body {
  width: 100%;
  min-height: 46px;
  resize: vertical;
  border: 1px solid var(--line);
  background: var(--bg);
  border-radius: 5px;
  font-size: 12px;
  color: var(--text);
  font-family: inherit;
  padding: 6px 8px;
}

/* ---- Library "Start from a preset" gallery (Phase 6) ---- */
.preset-start {
  margin-top: 22px;
}

.preset-start > summary {
  list-style: none;
  display: inline-flex;
  cursor: pointer;
}

.preset-start > summary::-webkit-details-marker {
  display: none;
}

.preset-start-panel {
  margin-top: 20px;
  display: grid;
  gap: 18px;
}

.preset-start-head {
  display: grid;
  gap: 5px;
}

.preset-start-title {
  margin: 0;
  font-size: 17px;
  font-weight: 740;
  letter-spacing: -0.01em;
  color: var(--text);
}

.preset-start-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

/* Let the card button sit directly in the grid; the wrapping form is invisible. */
.preset-card-form {
  display: contents;
}

[data-lib-preset].is-hidden,
[data-pack-preset].is-hidden {
  display: none;
}

/* ---- Automatic invoices (scheduling) ---- */
.upgrade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-subtle);
  padding: 16px 18px;
}

.upgrade-title {
  font-size: 14px;
  font-weight: 600;
}

/* Standard locked-feature state (partials/plan_lock.erb): illustration + copy +
   "Upgrade to <tier>" CTA. Reused across gated pages so locks look consistent. */
.plan-lock {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 15px;
  padding: 48px 32px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--accent-weak), transparent 70%);
}

.plan-lock-art {
  color: var(--accent);
  line-height: 0;
}

.plan-lock-art svg {
  width: 84px;
  height: 84px;
}

.plan-lock-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.plan-lock-title {
  margin: 0;
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.plan-lock-body {
  margin: 0;
  color: var(--muted);
  max-width: 44ch;
}

.plan-lock .button {
  margin-top: 4px;
}

.schedule-list {
  display: flex;
  flex-direction: column;
}

.schedule-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 0;
  border-top: 1px solid var(--line-soft);
}

/* The rail is the row's first item; .schedule-main takes the slack so the
   actions stay hard right. The edit form still wraps to its own line. */
.schedule-main { flex: 1; min-width: 0; }

/* No top rule above the first row. :first-child covers the no-JS case;
   .is-first is set by script to the first row of the current page. */
.schedule-list > .schedule-row:first-child,
.schedule-row.is-first {
  border-top: 0;
  padding-top: 2px;
}

.schedule-row[hidden] {
  display: none;
}

.schedule-row.is-paused {
  opacity: 0.62;
}

.schedule-title {
  font-size: 13.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.schedule-sub {
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}

.schedule-actions {
  display: flex;
  gap: 6px;
}

/* Nickname chip beside the schedule title. */
.schedule-nick {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 20px;
}

/* Accent pill flagging a receipt / gift-receipt schedule. */
.schedule-doc-pill {
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-weak);
  padding: 1px 8px;
  border-radius: 20px;
}

/* Advanced-rule chips under a schedule's summary. */
.schedule-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}

.schedule-rule-chip {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  font-variant-numeric: tabular-nums;
}

/* Delivery destinations (email always, Slack/WhatsApp when connected). */
.delivery-options {
  display: grid;
  gap: 8px;
}

.delivery-options .checkbox-row {
  font-size: 13px;
  color: var(--text);
}

.delivery-options .checkbox-row.is-fixed {
  color: var(--muted);
}

.delivery-options .checkbox-row small {
  color: var(--faint);
}

/* Advanced-rules disclosure: a distinct pill toggle with a sliders glyph and a
   chevron that flips open. */
.schedule-advanced {
  margin-top: 18px;
}

.schedule-advanced > summary.adv-toggle {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: fit-content;
  padding: 9px 15px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
  transition: border-color .14s ease, color .14s ease, background .14s ease, box-shadow .14s ease;
}

.schedule-advanced > summary.adv-toggle::-webkit-details-marker {
  display: none;
}

.schedule-advanced > summary.adv-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-weak);
}

.schedule-advanced > summary.adv-toggle:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-weak);
}

.schedule-advanced[open] > summary.adv-toggle {
  border-color: var(--accent);
  color: var(--accent-ink);
  background: var(--accent-weak);
}

.adv-ico {
  flex: none;
  color: var(--accent);
}

.adv-chev {
  flex: none;
  color: var(--faint);
  transition: transform .18s ease, color .14s ease;
}

.schedule-advanced[open] .adv-chev {
  transform: rotate(180deg);
  color: var(--accent);
}

.schedule-advanced > summary.adv-toggle:hover .adv-chev {
  color: var(--accent);
}

/* Advanced rules: a distinct inset panel with a tidy two-column field grid
   (full-width rows for the paired date/time controls and their notes). */
.schedule-advanced-body {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 18px;
  align-items: start;
  padding: 18px 20px;
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.schedule-advanced-body > .schedule-timing,
.schedule-advanced-body > .section-note {
  grid-column: 1 / -1;
}

.schedule-advanced-body > .section-note {
  margin-top: -6px;
}

@media (max-width: 640px) {
  .schedule-advanced-body { grid-template-columns: 1fr; }
}

/* Align an inline checkbox with sibling inputs in a timing grid cell. */
.schedule-timing .checkbox-field .checkbox-row {
  min-height: 36px;
}

/* Inline edit form wraps to a full-width row below the schedule summary. */
.schedule-edit {
  flex-basis: 100%;
  width: 100%;
  margin-top: 11px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}

.schedule-edit[hidden] {
  display: none;
}

.schedule-add-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 18px;
  align-items: start;
}

/* Nickname spans the full row so it doesn't sit orphaned under one column. */
.schedule-add-grid .field-wide {
  grid-column: 1 / -1;
}

/* Even, gap-free row: the visible timing controls share the width instead of
   leaving empty cells from a fixed 3-column track. */
.schedule-timing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px 18px;
  align-items: end;
}

@media (max-width: 640px) {
  .schedule-add-grid,
  .schedule-timing { grid-template-columns: 1fr; }
}

.schedule-help {
  margin-top: 2px;
}

.schedule-help > summary {
  cursor: pointer;
  width: fit-content;
}

@media (max-width: 640px) {
  .schedule-add-grid { grid-template-columns: 1fr; }
}

.schedule-next {
  font-size: 11px;
  color: var(--accent);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

.schedule-last {
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

/* The "Sent" column: a flex stack whose middle list scrolls while a search +
   filter header pins to the top and a pager pins to the bottom. Borderless by
   design - only hairlines separate the regions, so it stays in step with the
   page's "no box chrome" rule. The header and pager reveal via .js-sent; with
   no script the list still scrolls on its own. */
.sent-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sent-head {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}

.js-sent .sent-head {
  display: flex;
}

/* Search field - matches the app's form inputs, with a leading glass icon and
   a clear affordance that appears once there's a query. */
.sent-search {
  position: relative;
}

.sent-search > svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--faint);
  pointer-events: none;
}

.sent-search input {
  width: 100%;
  min-height: 34px;
  padding: 0 30px 0 32px;
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.sent-search input::placeholder {
  color: var(--faint);
}

.sent-search input:focus {
  outline: 2px solid rgba(20, 124, 100, 0.16);
  border-color: var(--accent);
}

/* Hide the native search "×" so only our themed clear button shows. */
.sent-search input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.sent-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--faint);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.sent-search-clear:hover {
  background: var(--hover);
  color: var(--muted);
}

.sent-search.has-value .sent-search-clear {
  display: inline-flex;
}

/* Quick filter chips (All / Auto / Test / Failed) with live counts. */
.sent-filters {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #ffffff;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.chip:hover {
  color: var(--text);
  border-color: #cfcfcf;
}

.chip.is-active {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-weak);
}

.chip .chip-n {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}

.chip.is-active .chip-n {
  color: var(--accent);
}

/* Scrolling body - grows to fill the panel, scrolls when the page overflows. */
.sent-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}

.sent-list {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* One delivery per row: order + status pill on the right, recipient and the
   kind · time caption stacked on the left. */
.sent-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "order     pill"
    "recipient pill"
    "meta      pill"
    "error     error";
  align-items: center;
  column-gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
}

.sent-item[hidden] {
  display: none;
}

/* No top rule above the first visible row. :first-child covers the no-JS case;
   .is-first is set by script to the first row of the current page. */
.sent-list > .sent-item:first-child,
.sent-item.is-first {
  border-top: 0;
  padding-top: 2px;
}

.sent-order {
  grid-area: order;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.sent-recipient {
  grid-area: recipient;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
  overflow-wrap: anywhere;
}

.sent-meta {
  grid-area: meta;
  font-size: 11px;
  color: var(--faint);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

.sent-kind {
  text-transform: capitalize;
}

/* Names the delivery channel on rows that aren't an email to the recipient shown
   (a Google Drive archive, a WhatsApp send). Sits in the meta line rather than
   the pill column so it can't collide with the status pill's grid area. */
.sent-channel {
  font-weight: 700;
  color: var(--accent);
}

/* Shown when SMTP is unconfigured: every send is being written to disk instead
   of delivered, which the neutral "Queued" pill alone doesn't convey. */
.sent-alert {
  margin: 0 0 12px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #553300;
  background: var(--amber-weak);
}

.sent-alert strong {
  font-weight: 700;
}

.status-pill {
  grid-area: pill;
  display: inline-flex;
  align-items: center;
  align-self: center;
  justify-self: end;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: capitalize;
  border-radius: 20px;
  padding: 2px 9px;
  color: var(--green);
  background: var(--green-weak);
}

.status-pill.status-failed {
  color: var(--red);
  background: var(--red-weak);
}

/* Queued ("outbox") is a normal resting state, not a warning - keep it neutral
   so only genuine failures read as red. */
.status-pill.status-outbox {
  color: var(--muted);
  background: #f1f3f2;
}

.activity-error {
  grid-area: error;
  display: block;
  font-size: 11px;
  color: var(--red);
  margin-top: 4px;
}

.sent-empty {
  padding: 28px 8px;
  text-align: center;
  color: var(--muted);
  font-size: 12px;
}

/* Pager pinned below the list. */
.sent-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  margin-top: 2px;
  border-top: 1px solid var(--line-soft);
}

.js-sent .sent-foot {
  display: flex;
}

.js-sent .sent-foot[hidden] {
  display: none;
}

.sent-foot-status {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.sent-foot-status b {
  color: var(--text);
  font-weight: 700;
}

.sent-foot-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.pager-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #ffffff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.pager-btn:hover:not(:disabled) {
  color: var(--text);
  border-color: #cfcfcf;
}

.pager-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.pager-btn svg {
  display: block;
}

/* Icon-only pager button (arrows only) for the Your-schedules panel. */
.pager-btn-icon {
  padding: 0 9px;
}

/* Your-schedules panel: search header + arrows-only pager wrap the schedule
   list, mirroring the Sent panel. Both tools reveal via .js-sched. */
.sched-panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.sched-head {
  display: none;
  padding-bottom: 12px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--line-soft);
}

.js-sched .sched-head {
  display: block;
}

.sched-foot {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  /* auto top margin pins the pager to the bottom of the full-height panel so it
     lines up straight with the Sent pager across the gutter (the Sent pager is
     pinned by its scroll area growing). */
  margin-top: auto;
  border-top: 1px solid var(--line-soft);
}

.js-sched .sched-foot {
  display: flex;
}

.js-sched .sched-foot[hidden] {
  display: none;
}

.sched-foot-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Two-step schedule wizard (Schedule rule -> Delivery). Progressive
   enhancement: the .js-wizard class is added by script; without it every
   step renders stacked so the form still works. */
.schedule-wizard {
  display: grid;
  gap: 16px;
}

.wizard-tabs {
  display: none;
}

.js-wizard .wizard-tabs {
  display: flex;
  gap: 18px;
  list-style: none;
  padding: 0 0 4px;
  margin: 0;
  border-bottom: 1px solid var(--line-soft);
}

.wizard-tabs li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--faint);
  cursor: pointer;
}

.wizard-tabs li.is-current {
  color: var(--text);
}

.wizard-tab-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--line-soft);
  color: var(--muted);
  font-size: 11px;
}

.wizard-tabs li.is-current .wizard-tab-num {
  background: var(--accent);
  color: #fff;
}

.wizard-step {
  display: grid;
  gap: 8px;
}

.js-wizard .wizard-step:not(.is-current) {
  display: none;
}

.wizard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
}

.wizard-nav [data-wizard-next],
.wizard-nav [data-wizard-back] {
  display: none;
}

.js-wizard .wizard-nav [data-wizard-next],
.js-wizard .wizard-nav [data-wizard-back] {
  display: inline-flex;
}

.wizard-nav--center {
  justify-content: flex-end;
  gap: 12px;
}

/* Card header: form title on the left, "What each trigger does" popover right. */
.wizard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Delivery channel rows (email / Slack / WhatsApp) with an optional
   per-channel custom-message editor. */
/* Delivery step: three columns - email + CC, Slack, WhatsApp. */
.delivery-heading {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}

.delivery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: start;
}

.delivery-col {
  display: grid;
  gap: 11px;
  align-content: start;
}

.delivery-col .checkbox-row small {
  color: var(--faint);
  font-weight: 400;
}

.delivery-col .checkbox-row.is-fixed {
  color: var(--muted);
}

@media (max-width: 640px) {
  .delivery-grid { grid-template-columns: 1fr; }
}

/* Delivery step: three expandable channel cards (Email / Slack / WhatsApp). */
/* Delivery channels as tabs. The old three-column grid pinned an expanded
   channel to a third of the width, which squeezed the email fields and the
   placeholder tokens into a single column. */
.chan-tabs {
  display: inline-flex;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  margin-bottom: 16px;
  /* The wizard step is a grid, so inline-flex alone would still stretch. */
  width: max-content;
  max-width: 100%;
  justify-self: start;
}

.chan-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--muted);
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
}

.chan-tab.is-on { background: #0f4c3d; color: #fff; }
.chan-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.chan-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.chan-tab.is-on .chan-dot { background: #7cf0c6; }
.chan-dot.is-off { background: #cdd4d1; }

.chan-panel { display: none; }
.chan-panel.is-on { display: block; }
.chan-panel > * + * { margin-top: 14px; }

.chan-split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  align-items: start;
}

.chan-split > * + * { margin-top: 0; }
/* Separates the invoice email from the receipt copy inside the Email tab. */
.chan-rule { border: 0; border-top: 1px solid var(--line-soft); margin: 22px 0 0; }
.chan-fields { display: grid; gap: 14px; }
.wa-varrow { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.wa-varrow select { flex: 1; }
.wa-varnum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--accent-ink); background: var(--accent-weak); border-radius: 6px; padding: 5px 9px; min-width: 46px; text-align: center; }

/* Immersive email preview. */
.mail-prev {
  background: linear-gradient(150deg, #082e25, #0f4c3d);
  border-radius: 11px;
  padding: 16px 18px;
  color: #f3efe3;
  display: grid;
  gap: 9px;
  position: sticky;
  top: 14px;
}

.mail-prev .eyebrow { color: #7cf0c6; }
.mail-prev-sub { margin: 0; font-size: 14.5px; font-weight: 680; }
.mail-prev-meta { margin: 0; font-size: 11.5px; color: rgba(243, 239, 227, .6); }

.mail-prev-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(243, 239, 227, .88);
  border-top: 1px solid rgba(243, 239, 227, .16);
  padding-top: 10px;
  white-space: pre-line;
}

.mail-prev-attach {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: #7cf0c6;
  border: 1px solid rgba(124, 240, 198, .3);
  border-radius: 7px;
  padding: 5px 9px;
  justify-self: start;
}

.mail-prev-note { font-size: 11px; color: rgba(243, 239, 227, .5); }

/* Placeholder tokens are buttons that insert at the cursor. */
.ph-chip {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  background: #f1f3f2;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 3px 7px;
  color: var(--muted);
  cursor: pointer;
}

.ph-chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-weak); }
.ph-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

@media (max-width: 860px) {
  .chan-split { grid-template-columns: 1fr; }
  .mail-prev { position: static; }
}

/* Automatic Invoices list page: header with an Add button, and the schedule
   list beside the "Sent" activity column. */
body:has(.auto-inv-page) .workspace { background: #edf4f0; }

/* Fill the viewport: the card reaches the bottom of the screen instead of
   floating with an empty band below it, and each column scrolls internally
   when its list is long. The downstream panels already carry min-height:0 and
   overflow - this just lets the height flow down from the frame. Desktop only;
   the stacked mobile layout keeps its natural height. */
@media (min-width: 901px) {
  body:has(.auto-inv-page) .workspace {
    display: flex;
    flex-direction: column;
  }

  body:has(.auto-inv-page) .page-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  body:has(.auto-inv-page) .section-card.auto-inv-page {
    flex: 1 1 auto;
    min-height: 0;
    /* Override .stack's grid so .auto-inv-columns can take the leftover height. */
    display: flex;
    flex-direction: column;
  }

  body:has(.auto-inv-page) .auto-inv-columns {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Mirror the Sent panel's scroll on the schedules side. */
  body:has(.auto-inv-page) .schedule-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
  }
}

/* ---- Automatic invoices empty state: a single autopilot on-ramp card with the
   primary Add-schedule CTA. Shown only when the shop has no schedules yet. ---- */
.autopilot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 40px 24px;
  text-align: center;
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  background: var(--panel-subtle);
}

.autopilot-ic {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 8px;
  border-radius: 13px;
  color: var(--accent);
  background: var(--accent-weak);
}

.autopilot-title {
  font-size: 18px;
  font-weight: 730;
  letter-spacing: -0.01em;
  color: var(--text);
}

.autopilot-copy {
  max-width: 42ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

.autopilot-add {
  gap: 7px;
  margin-top: 18px;
}

/* Desktop viewport-fill: let the autopilot block grow to fill the card like the
   populated columns do, so its content centers in the available space. */
@media (min-width: 901px) {
  body:has(.auto-inv-page) .autopilot {
    flex: 1 1 auto;
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .autopilot {
    padding: 30px 18px;
  }
}

/* Sentence-first builder: the schedule restated in plain English, updated live. */
.sched-sentence {
  background: linear-gradient(140deg, #082e25, #0f4c3d 84%);
  border-radius: 11px;
  padding: 16px 18px;
  color: #f3efe3;
  display: grid;
  gap: 7px;
  margin-bottom: 18px;
}

.sched-sentence .eyebrow { color: #7cf0c6; }
.sched-sentence p { margin: 0; font-size: 15px; line-height: 1.45; }

/* ---- Add-schedule (new) page: immersive pastel canvas + hero, so the builder
   matches the Automatic Invoices list instead of floating on plain white. The
   outer section-card goes bare; the inner .preview-card is the white form card. */
body:has(.auto-new-page) .workspace { background: #edf4f0; }

.section-card.auto-new-page {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.auto-new-hero {
  padding: 0 2px;
}

.auto-new-hero h2 {
  font-size: 24px;
  font-weight: 730;
  letter-spacing: -0.02em;
}

.auto-new-hero .section-note {
  margin-top: 4px;
}

/* Section headers: an accent number chip + label, with room above so each
   step reads as its own block (esp. "3 · What goes out" under the When row).
   The number comes from a CSS counter so it stays sequential when the When
   section is hidden for event triggers (display:none rows don't count). */
.schedule-wizard {
  counter-reset: sched-step;
  /* The trigger grids size to THIS form's width, not the viewport, so the
     inline edit-in-place form (narrow, beside the Sent rail) and the full-page
     add form each lay their cards out cleanly. */
  container-type: inline-size;
}

.grp-label {
  counter-increment: sched-step;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 800;
  margin: 30px 0 13px;
}

/* The first header follows the summary card; a bit less top room than the rest. */
.wizard-step > .grp-label {
  margin-top: 18px;
}

.grp-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: var(--accent-weak);
  color: var(--accent-ink);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0;
}

.grp-num::before {
  content: counter(sched-step);
}

.trig-group { display: grid; gap: 14px; margin-bottom: 0; }
.trig-heading { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 7px; }
.trig-heading-ic { display: inline-flex; color: var(--accent); }
/* Trigger cards flow by the form's own width (container query). Each group keeps
   a balanced layout at every size instead of orphaning a card on a second row:
   the 4-card repeating group is 2×2 when cramped and 4-across when roomy; the
   3-card event group stays 3-across until it must stack. */
.trig-grid { display: grid; gap: 9px; grid-template-columns: 1fr; }
@container (min-width: 440px) {
  .trig-grid--wide4 { grid-template-columns: repeat(2, 1fr); }
  .trig-grid--wide3 { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 760px) {
  .trig-grid--wide4 { grid-template-columns: repeat(4, 1fr); }
  .trig-grid--wide3 { grid-template-columns: repeat(3, 1fr); }
}

/* Either/or: the trigger sub-group without the current selection dims out. It
   stays clickable - picking a card there just moves the selection across. */
.trig-heading.is-muted,
.trig-grid.is-muted {
  opacity: .4;
  transition: opacity .15s ease;
}

/* Radio cards. The input stays in the DOM (and focusable) but is visually
   replaced by the card, so keyboard and screen readers still get a radio group. */
.trig {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 11px 32px 11px 13px;
  cursor: pointer;
  display: grid;
  gap: 3px;
  align-content: start;
  background: #fff;
  transition: border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.trig input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

.trig b { font-size: 12.5px; font-weight: 720; }
.trig .trig-desc { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.trig:hover { border-color: var(--accent); }

/* Selected state resolves via :checked (works without JS) AND the JS-added
   .is-on, so exactly one card ever reads as chosen - with a check badge. */
.trig:has(input:checked),
.trig.is-on {
  border-color: var(--accent);
  background: var(--accent-weak);
  box-shadow: inset 0 0 0 1px var(--accent);
}

.trig-check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}

.trig:has(input:checked) .trig-check,
.trig.is-on .trig-check {
  opacity: 1;
  transform: none;
}

.trig:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Automation status strip - the immersive moment on this page. */
.auto-hero {
  background: linear-gradient(140deg, #082e25, #0f4c3d 82%);
  border-radius: 12px;
  color: #f3efe3;
  padding: 20px 22px;
}

.auto-hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #7cf0c6;
  font-weight: 700;
}

.auto-hero-stats {
  display: flex;
  gap: 34px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.ahstat { display: flex; flex-direction: column; gap: 2px; }

.ahstat b {
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.ahstat span {
  font-size: 11px;
  color: rgba(243, 239, 227, .62);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
}

.ahstat.is-next b { color: #7cf0c6; }

/* Status rail: pairs with the "Paused" pill, never the only signal. */
.schedule-rail {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--accent);
  flex: none;
}

.schedule-rail.is-off { background: #d8dedb; }

/* Overflow menu for the rare + destructive row actions. <details> so it works
   without JS; a script closes it on outside click. */
.row-menu { position: relative; }

.row-menu-trigger {
  list-style: none;
  width: 28px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
}

.row-menu-trigger::-webkit-details-marker { display: none; }
.row-menu-trigger:hover { border-color: var(--accent); color: var(--accent); }
.row-menu[open] .row-menu-trigger { border-color: var(--accent); color: var(--accent); }

.row-menu-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  z-index: 20;
  min-width: 150px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 6px 18px rgba(8, 46, 37, .1);
}

.row-menu-item {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  text-align: left;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.row-menu-item:hover { background: var(--hover); }
.row-menu-item.is-danger { color: var(--red); }
.row-menu-item.is-danger:hover { background: var(--red-weak); }

/* Quick send: the menu shows the destination under each channel, grouped by who
   it reaches - "to customer" actually delivers, "share internally" only posts to
   the merchant's own workspace. */
.row-menu-group {
  margin: 5px 0 2px;
  padding: 0 9px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--faint);
}
.row-menu-group:first-child { margin-top: 1px; }

.row-menu-item.is-stacked {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-decoration: none;
}
.row-menu-item.is-stacked strong { font-size: 12.5px; font-weight: 650; color: inherit; }
.row-menu-item.is-stacked small {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.row-menu-item.is-muted { color: var(--faint); cursor: default; }
.row-menu-item.is-muted:hover { background: transparent; }
a.row-menu-item.is-muted { cursor: pointer; }
a.row-menu-item.is-muted:hover { background: var(--hover); }

/* "Send to another email" - an inline recipient field at the foot of the group. */
.row-menu-form {
  margin: 4px 4px 2px;
  padding: 8px 5px 2px;
  border-top: 1px solid var(--line-soft);
}
.row-menu-form label {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
}
.row-menu-form-line { display: flex; gap: 5px; }
.row-menu-form input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  font: inherit;
  font-size: 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
}
.row-menu-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: var(--accent); }
.row-menu-form button {
  flex: 0 0 auto;
  width: 30px;
  display: grid;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
}
.row-menu-form button:hover { filter: brightness(1.08); }

.odt-sendmenu .row-menu-pop { min-width: 232px; }
.odt-sendbtn {
  width: auto;
  height: 34px;
  gap: 5px;
  grid-auto-flow: column;
  padding: 0 11px;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text);
  border-radius: 8px;
}

.auto-inv-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.auto-inv-head .button {
  flex: none;
  white-space: nowrap;
}

.auto-inv-columns {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
  gap: 28px;
  /* Stretch both columns to the same height so each panel's pager can pin to a
     shared baseline at the bottom of the card. */
  align-items: stretch;
}

/* Plain labelled regions - no box chrome, so the only borders on the page are
   the outer panel and the hairline dividers between schedule rows. The panel
   row (below the eyebrow) fills the column height so its pager sits at the
   bottom. */
.auto-inv-col {
  gap: 8px;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

/* Divider between "Your schedules" and "Sent". With the 28px grid gap plus this
   28px padding, the hairline sits centered in the gutter. */
.auto-inv-sent {
  border-left: 1px solid var(--line);
  padding-left: 28px;
}

@media (max-width: 900px) {
  .auto-inv-columns { grid-template-columns: 1fr; }

  /* Stacked layout: the divider moves above "Sent" as a top rule. */
  .auto-inv-sent {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--line);
    padding-top: 16px;
  }
}

.channel-message {
  margin-left: 27px;
}

.channel-message > summary {
  cursor: pointer;
  width: fit-content;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.channel-message textarea {
  width: 100%;
  margin-top: 8px;
  min-height: 66px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
}

.placeholder-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.placeholder-chips code {
  font-size: 11px;
  background: var(--line-soft);
  padding: 2px 6px;
  border-radius: 5px;
  color: var(--muted);
}

/* ===== Dashboard redesign - "Focus Hero" (minimal-immersive) ===== */
.dash2 { display: flex; flex-direction: column; gap: 20px; padding-top: 4px; }
.metric-group { display: flex; flex-direction: column; gap: 10px; }
.tnum { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dash2 .dhead, .dashboard .dhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash2 .dhead .dt h2 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.dash2 .dhead .dt p { color: var(--muted); margin-top: 4px; }
.dash2 .dact { display: flex; align-items: center; gap: 12px; }
.dash2 .updated { color: var(--faint); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.dash2 .updated .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.dash-refresh svg { width: 15px; height: 15px; }
.dash2 .section-head { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin: 0; }

/* Bold brand-green hero banner (Total Sales) with translucent KPI tiles. */
.hero2 {
  position: relative; overflow: hidden; border-radius: var(--radius);
  padding: 26px 28px; color: #eafaf3;
  background: linear-gradient(135deg, #082e25, #0f4c3d 72%, #147c64);
}
.hero2-orb { position: absolute; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(124,240,198,0.26), transparent 70%); pointer-events: none; }
.hero2-back { position: absolute; left: 0; right: 0; bottom: 0; height: 56%; pointer-events: none; }
.hero2-in { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.hero2-main { min-width: 0; }
.hero2-lab { font-size: 12px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mint, #7cf0c6); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero2-chip { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-transform: none; letter-spacing: 0; color: #eafaf3; background: rgba(124,240,198,0.18); }
.hero2-chip.down { color: #ffd9d0; background: rgba(194,90,72,0.28); }
.hero2-big { font-size: 50px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-top: 12px; }
.hero2-foot { color: rgba(234,250,243,0.72); margin-top: 9px; font-size: 14px; }
.hero2-tiles { display: flex; gap: 12px; flex-wrap: wrap; }
.hero2-tile { background: rgba(255,255,255,0.08); border: 1px solid rgba(124,240,198,0.16); border-radius: 12px; padding: 13px 16px; min-width: 132px; }
.hero2-tile .k { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(234,250,243,0.66); }
.hero2-tile .v { font-size: 24px; font-weight: 760; letter-spacing: -0.01em; margin-top: 6px; }
.hero2-tile .d { font-size: 11px; font-weight: 700; margin-top: 4px; color: var(--mint, #7cf0c6); }
.hero2-tile .d.down { color: #ffb5a6; }
@media (max-width: 720px) { .hero2-big { font-size: 40px; } .hero2-tiles { width: 100%; } .hero2-tile { flex: 1; } }

.metric-row { display: grid; gap: 12px; }
.metric-row-3 { grid-template-columns: repeat(3, 1fr); }
.metric-row-5 { grid-template-columns: repeat(5, 1fr); }
.op2 { padding: 14px; }
/* Invoicing tiles carry no meter, so keep them compact. */
.metric-row-3 .op2 { padding: 12px 14px; }
.metric-row-3 .op2-val { font-size: 20px; margin-top: 6px; }
.metric-row-3 .op2-rate { margin-top: 1px; }
.op2-top { display: flex; align-items: center; gap: 8px; }
.op2-ic { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; flex: none; }
.op2-ic svg { width: 14px; height: 14px; }
.op2-ic.ok { background: var(--green-weak); color: var(--green); }
.op2-ic.warn { background: var(--amber-weak); color: var(--amber); }
.op2-ic.pay { background: var(--accent-weak); color: var(--accent); }
.op2-ic.ship { background: var(--blue-weak); color: var(--blue); }
.op2-ic.ret { background: var(--red-weak); color: var(--red); }
.op2-lab { font-size: 12px; font-weight: 600; color: var(--muted); }
.op2-val { font-size: 24px; font-weight: 730; letter-spacing: -0.01em; margin-top: 10px; }
.op2-of { font-size: 14px; font-weight: 600; color: var(--faint); margin-left: 2px; }
.op2-rate { font-size: 12px; color: var(--muted); margin-top: 2px; }
.op2-meter { height: 5px; border-radius: 999px; background: var(--line-soft); margin-top: 10px; overflow: hidden; }
.op2-meter i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.op2-meter i.warn { background: var(--amber); }
.op2-meter i.ret { background: var(--red); }
.op2-meter i.ship { background: var(--blue); }

.chart2 { padding: 18px; }
.chart2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.chart2-head h3 { font-size: 15px; font-weight: 700; }
.chart2-head .sub { color: var(--muted); margin-top: 3px; }
.rangelbl { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; font-weight: 600; }

/* Performance-chart range selector: a segmented pill that reloads the chart. */
.range-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; flex: none; }
.range-seg-btn { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); padding: 6px 13px; border-radius: 999px; cursor: pointer; transition: background .14s ease, color .14s ease; }
.range-seg-btn:hover { color: var(--text); }
.range-seg-btn.is-on { background: var(--accent); color: #fff; }
.range-seg-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }

/* Performance-chart controls: a metric multi-select, a mark-style toggle, and
   the range control, all in the card header (wrapping to the right). */
.chart2-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.metric-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.metric-chip { appearance: none; display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 11px; cursor: pointer; transition: background .14s ease, color .14s ease, border-color .14s ease; }
.metric-chip .mp-dot { width: 9px; height: 9px; border-radius: 3px; opacity: .45; transition: opacity .14s ease; }
.metric-chip:hover { color: var(--text); border-color: var(--muted); }
.metric-chip.is-on { color: var(--text); border-color: var(--accent); background: var(--accent-weak); }
.metric-chip.is-on .mp-dot { opacity: 1; }
.metric-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }
.style-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; background: #fff; border: 1px solid var(--line); border-radius: 999px; flex: none; }
.style-seg button { appearance: none; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 650; color: var(--muted); padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: background .14s ease, color .14s ease; }
.style-seg button:hover { color: var(--text); }
.style-seg button.is-on { background: var(--accent); color: #fff; }
.style-seg button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-weak); }

.chart2-summary { display: flex; gap: 34px; margin: 16px 0 6px; flex-wrap: wrap; }
.chart2-summary .k { font-size: 12px; color: var(--muted); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.chart2-summary .sw { width: 10px; height: 10px; border-radius: 3px; }
.chart2-summary .v { font-size: 22px; font-weight: 730; letter-spacing: -0.01em; margin-top: 3px; }
.chart2-wrap { position: relative; margin-top: 10px; height: 264px; }
.chart2-wrap canvas { width: 100% !important; }
.chart2-svg { width: 100%; height: 250px; display: block; overflow: visible; }
.chart2-axis text { fill: var(--faint); font-size: 10px; }
.chart2-grid line { stroke: var(--line-soft); stroke-width: 1; }
.chart2-rev { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.chart2-ord { fill: none; stroke: var(--blue); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.chart2-area { fill: url(#dashrev); }
.chart2-hit { fill: transparent; cursor: crosshair; }
.chart2-guide { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.chart2-dot { opacity: 0; }
.chart2-tip { position: absolute; pointer-events: none; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .18); padding: 9px 11px; font-size: 12px; opacity: 0; transition: opacity .1s; min-width: 132px; transform: translate(-50%, -115%); }
.chart2-tip .d { font-weight: 700; margin-bottom: 6px; }
.chart2-tip .r { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); }
.chart2-tip .r b { color: var(--text); font-variant-numeric: tabular-nums; }

.dash-empty { padding: 48px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dash-empty-ic { width: 48px; height: 48px; border-radius: 12px; background: var(--panel-subtle); color: var(--muted); display: grid; place-items: center; }
.dash-empty-ic svg { width: 24px; height: 24px; }
.dash-empty h3 { font-size: 16px; font-weight: 700; }
.dash-empty p { color: var(--muted); max-width: 44ch; }
.dash-empty .button { margin-top: 6px; }

/* ---- Light-pastel theme (the immersive green/mint identity in a soft, light
   key), scoped to the dashboard page only: a gentle mint-cream ground, white
   cards, deep-green ink. Overriding these tokens re-themes every component,
   including the inline-SVG chart which paints with var(--accent)/var(--blue). ---- */
body:has(.dashboard) .workspace { background: #edf4f0; }
.dashboard {
  --accent: #147c64; --accent-weak: #e2f1ea;
  /* Orders series in soft sage so it reads clearly against the green revenue line. */
  --blue: #6fa693; --blue-weak: #e7efeb;
  --green: #1f9469; --green-weak: #e2f4ec;
  --amber: #b58a2a; --amber-weak: #f6eede;
  --red: #c25a48; --red-weak: #f7e7e3;
  --text: #10231c; --muted: #566b62; --faint: #8ba095;
  --panel: #ffffff; --line: #dbe8e2; --line-soft: #e9f0ec;
  --hover: #eef5f1;
  color: #10231c;
}
.dashboard .section-card { background: #fff; border-color: var(--line); }
.dashboard .op2-meter { background: #e9f0ec; }
.dashboard .chart2-tip { background: #fff; border-color: var(--line); color: var(--text); }
.dashboard .chart2-grid line { stroke: #e6efeb; }
.dashboard .chart2-guide { stroke: #cdddd5; }
.dashboard .rangelbl { color: var(--muted); border-color: var(--line); }
.dashboard .dash-refresh { background: #fff; border: 1px solid var(--line); color: var(--text); }
.dashboard .dash-refresh:hover, .dashboard .button-ghost:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.dashboard .button { border-color: var(--accent); color: var(--accent); background: #fff; }
.dashboard .button:hover { background: var(--accent); color: #fff; }
.dashboard .dash-empty-ic { background: #eef5f1; color: var(--muted); }

/* ---- Brand-green sidebar (global chrome). Same scoped-token approach: redefine
   the sidebar's tokens so its nav, brand mark, active state and profile all
   re-theme to cream-on-green with a mint accent. ---- */
.sidebar {
  --sidebar: #0f4c3d;
  --text: #f3efe3;
  --muted: rgba(243, 239, 227, .68);
  --faint: rgba(243, 239, 227, .48);
  --line: rgba(255, 255, 255, .11);
  --line-strong: rgba(255, 255, 255, .22);
  --hover: rgba(255, 255, 255, .07);
  --accent: #7cf0c6;
  --accent-weak: rgba(124, 240, 198, .16);
}
.sidebar-toggle { background: transparent; }

/* ---- Sidebar redesign: solid gradient brand mark + avatar, roomier rounded
   pill nav with a clear mint active state, and a carded profile. ---- */
.sidebar { padding: 20px 12px; }
.brand { padding: 2px 6px 16px; gap: 11px; }
.brand-mark { width: 30px; height: 30px; border: 0; border-radius: 9px; color: #082e25; background: linear-gradient(140deg, #7cf0c6, #147c64); }
.brand-mark svg { width: 17px; height: 17px; }
.brand strong { font-size: 14.5px; letter-spacing: -0.01em; }
.brand small { color: rgba(243, 239, 227, .55); }
.nav-stack { gap: 3px; margin-top: 8px; }
.nav-link { position: relative; min-height: 40px; padding: 0 11px; border-radius: 9px; }
/* Every icon lives in a fixed 28px slot, so the filled active chip drops in
   without nudging the labels out of alignment row-to-row. */
.nav-link .nav-icon {
  width: 28px; height: 28px; padding: 5px; box-sizing: border-box;
  border-radius: 8px; opacity: .82;
  transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.nav-link:hover { background: rgba(255, 255, 255, .06); }
.nav-link:hover .nav-icon { opacity: 1; }
/* Active row (B+C): tinted pill with a mint inset ring and a short accent rail,
   plus the icon in a filled mint-gradient chip. */
.nav-link.is-active {
  background: rgba(124, 240, 198, .14);
  color: #bafbe0;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(124, 240, 198, .22);
}
.nav-link.is-active .nav-icon {
  opacity: 1;
  color: #082e25;
  background: linear-gradient(140deg, #7cf0c6, #22b98d);
}
.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: 3px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px;
  border-radius: 3px;
  background: #7cf0c6;
}
/* Collapsed rail: the filled chip is indicator enough - drop the edge rail. */
html.nav-rail .nav-link.is-active::before { display: none; }
.sidebar .eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 239, 227, .42); padding: 0 11px; margin: 16px 0 6px; }
.sidebar-footnote { margin-top: auto; padding: 12px 4px 2px; border-top: 1px solid rgba(255, 255, 255, .09); }
.sidebar-profile { padding: 9px; border-radius: 12px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .08); }
.sidebar-profile:hover { background: rgba(255, 255, 255, .09); }
.sidebar-profile-avatar { background: linear-gradient(140deg, #7cf0c6, #147c64); color: #082e25; border-radius: 10px; }

/* Identity chips carrying the brand logo: a white tile framing the image, so a
   transparent PNG reads correctly against the dark rail. */
.sidebar-profile-avatar.has-logo,
.app-topbar-avatar.has-logo { background: #fff; padding: 4px; }
.sidebar-profile-avatar.has-logo img,
.app-topbar-avatar.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; }

@media (max-width: 1080px) { .metric-row-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) {
  .metric-row-3 { grid-template-columns: 1fr; }
  .metric-row-5 { grid-template-columns: repeat(2, 1fr); }
  .hero2-in { align-items: flex-start; }
  .hero2-big { font-size: 38px; }
}
@media (max-width: 560px) { .metric-row-5 { grid-template-columns: 1fr; } }

/* ============================================================
   Orders page redesign - pastel green/mint identity (matching
   the dashboard's light key) + Orders/Draft Orders switcher.
   Scoping the pastel tokens to .orders-page re-themes the
   section cards, tables, badges and buttons in one place.
   ============================================================ */
body:has(.orders-page) .workspace { background: #edf4f0; }
.orders-page {
  /* Grid item in .page-content: without min-width:0 it defaults to min-width:auto
     and expands to the orders table's 1240px min-width, overflowing the workspace
     (the green bg then appears to "cut off"). Zeroing it lets .table-shell's
     overflow:auto scroll the wide table internally instead. */
  min-width: 0;
  /* Uniform vertical rhythm between header, switcher, filter card and table. */
  display: flex; flex-direction: column; gap: 18px;
  --accent: #147c64; --accent-weak: #e2f1ea;
  --blue: #6fa693; --blue-weak: #e7efeb;
  --green: #1f9469; --green-weak: #e2f4ec;
  --amber: #b58a2a; --amber-weak: #f6eede;
  --red: #c25a48; --red-weak: #f7e7e3;
  --text: #10231c; --muted: #566b62; --faint: #8ba095;
  --panel: #ffffff; --line: #dbe8e2; --line-soft: #e9f0ec;
  --hover: #eef5f1;
  color: #10231c;
}
/* Drop block-flow margins so they don't double the flex gap above. */
.orders-page > .orders-head,
.orders-page > .view-switch { margin-bottom: 0; }
.orders-page .section-card,
.orders-page .table-shell { background: #fff; border-color: var(--line); }
.orders-page .button { border-color: var(--accent); color: var(--accent); background: #fff; }
.orders-page .button:hover:not([disabled]) { background: var(--accent); color: #fff; }
.orders-page .button[disabled] { opacity: 0.6; cursor: default; }
.orders-page .button-ghost:hover { color: var(--accent); border-color: var(--accent); }

.orders-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.orders-head-actions { flex: none; }
@media (max-width: 600px) { .orders-head { flex-direction: column; } }
.orders-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; margin: 0; color: var(--text); }
.orders-subtitle { color: var(--muted); margin: 5px 0 0; font-size: 14px; }

/* Segmented Orders / Draft Orders switcher */
.view-switch {
  display: inline-flex; gap: 4px; padding: 4px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  margin-bottom: 20px;
  /* Hug the tabs' width even inside a flex-column page (e.g. the vendors
     fill layout), so it matches the compact Orders/Draft Orders switcher. */
  align-self: flex-start;
}
.view-switch-tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.view-switch-tab:hover { color: var(--accent); }
.view-switch-tab.is-active { background: var(--accent); color: #fff; }
.view-switch-count {
  font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700;
  padding: 1px 7px; border-radius: 999px;
  background: var(--accent-weak); color: var(--accent);
}
.view-switch-tab.is-active .view-switch-count { background: rgba(255,255,255,0.22); color: #fff; }

/* Draft-order status badge (OPEN reads as accent) */
.badge-info { color: var(--accent); background: var(--accent-weak); border-color: #bfe0d3; }

.draft-synced-note { color: var(--faint); }
.draft-sync-warn { color: var(--amber); }

/* Draft view states */
.empty-state-title { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 4px; }
.empty-state-error { color: var(--muted); }
.empty-state-action { margin-top: 12px; }
.draft-syncing-state { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.draft-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2.5px solid var(--accent-weak); border-top-color: var(--accent);
  animation: draft-spin 0.8s linear infinite;
}
@keyframes draft-spin { to { transform: rotate(360deg); } }

/* Shared line-item thumbnail (Order/Draft detail + HTML invoice) */
.li-cell { display: flex; gap: 12px; align-items: flex-start; }
.li-thumb { flex: none; border-radius: 9px; overflow: hidden; border: 1px solid var(--line); display: grid; place-items: center; background: #fff; }
.li-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-thumb-empty { border-style: dashed; background: var(--line-soft, #eef2f0); color: var(--faint, #8ba095); }
.li-custom-tag { display:inline-block; font-size:10px; font-weight:700; color:var(--accent,#147c64); background:var(--accent-weak,#e2f1ea); border-radius:4px; padding:1px 6px; margin-left:6px; text-transform:uppercase; letter-spacing:.03em; vertical-align:middle; }
.draft-row[data-href] { cursor: pointer; }
/* Product image in HTML invoice line-item desc cell */
.inv-li-cell { display: flex; gap: 10px; align-items: flex-start; }
.inv-li-cell .li-thumb { margin-top: 1px; }
/* Multi-page print: keep line-item rows intact and repeat the table header. */
@media print {
  .preview-line-items tr, .odt-items tr { break-inside: avoid; }
  .preview-line-items thead, .odt-items thead { display: table-header-group; }
}

/* Pastel brand background for the Order & Draft Order detail pages (both render
   inside .order-detail-a), matching the dashboard + orders-list treatment:
   soft mint-cream workspace, white cards, single brand-green accent. */
body:has(.order-detail-a) .workspace { background: #edf4f0; }
.order-detail-a {
  --accent: #147c64; --accent-weak: #e2f1ea;
  --blue: #6fa693; --blue-weak: #e7efeb;
  --green: #1f9469; --green-weak: #e2f4ec;
  --amber: #b58a2a; --amber-weak: #f6eede;
  --red: #c25a48; --red-weak: #f7e7e3;
  --text: #10231c; --muted: #566b62; --faint: #8ba095;
  --panel: #ffffff; --panel-subtle: #f2f8f5; --line: #dbe8e2; --line-soft: #e9f0ec;
  --hover: #eef5f1;
  color: #10231c;
}
.order-detail-a .button:hover:not([disabled]) { background: var(--accent); color: #fff; }
.order-detail-a .button-ghost:hover { color: var(--accent); border-color: var(--accent); }

/* Order detail - immersive hero + minimal Documents panel (B1) */
.order-detail-a .odt-hero{ background:linear-gradient(135deg,#0b3b30,#0f4c3d 62%,#147c64); border-radius:20px; padding:26px 28px; color:#f3efe3; position:relative; overflow:hidden; margin-bottom:16px; }
.order-detail-a .odt-hero::after{ content:""; position:absolute; right:-60px; top:-70px; width:230px; height:230px; border-radius:50%; background:radial-gradient(circle,rgba(124,240,198,.26),transparent 70%); pointer-events:none; }
.order-detail-a .odt-hero-in{ position:relative; z-index:1; display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap; }
.order-detail-a .odt-hero-title{ font-size:26px; font-weight:800; letter-spacing:-0.02em; color:#fff; display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.order-detail-a .odt-hero-sub{ color:rgba(243,239,227,.72); margin-top:8px; font-size:13.5px; }
.order-detail-a .odt-hero-total{ text-align:right; }
.order-detail-a .odt-hero-total small{ display:block; font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:rgba(243,239,227,.6); }
.order-detail-a .odt-hero-total b{ font-size:22px; font-weight:800; color:#fff; }
.order-detail-a .odt-pill{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; vertical-align:middle; }
.order-detail-a .odt-pill-dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.order-detail-a .odt-pill-solid{ color:#082e25; background:#a9f7db; }
.order-detail-a .odt-pill-ghost{ color:#a9f7db; background:rgba(124,240,198,.15); }
.order-detail-a .odt-pill-warn{ color:#f6d99a; background:rgba(181,138,42,.30); }

.order-detail-a .odt-docpanel{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
/* ...but an open send menu has to escape the panel, or it gets clipped. */
.order-detail-a .odt-docpanel:has(.row-menu[open]){ overflow:visible; }
.order-detail-a .odt-docpanel-head{ padding:16px 22px 2px; }
.order-detail-a .odt-docpanel-head .odt-doc-sub{ color:var(--muted); font-size:12.5px; margin-top:2px; }
.order-detail-a .odt-docrow{ display:flex; align-items:center; gap:15px; padding:15px 20px; border-top:1px solid var(--line-soft); }
.order-detail-a .odt-docrow:first-of-type{ border-top:0; }
.order-detail-a .odt-docrow-ico{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:11px; background:var(--accent-weak); color:var(--accent); }
.order-detail-a .odt-docrow-ico svg{ width:19px; height:19px; }
.order-detail-a .odt-docrow-info{ flex:1; min-width:0; }
.order-detail-a .odt-docrow-info strong{ display:block; font-size:15px; font-weight:750; }
.order-detail-a .odt-docrow-info span{ color:var(--muted); font-size:12.5px; }
.order-detail-a .odt-docrow-acts{ display:flex; align-items:center; gap:6px; }
.order-detail-a .odt-docrow.is-locked{ opacity:.72; }
.order-detail-a .odt-iconbtn{ width:36px; height:36px; display:grid; place-items:center; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted); cursor:pointer; }
.order-detail-a .odt-iconbtn:hover{ color:var(--accent); border-color:var(--accent); background:var(--accent-weak); }
.order-detail-a .odt-iconbtn svg{ width:17px; height:17px; }
.order-detail-a .odt-wa-form{ display:contents; }
.order-detail-a .odt-wa-btn:hover{ color:#1fa855; border-color:#1fa855; background:rgba(37,211,102,.08); }
.order-detail-a .odt-wa-btn[disabled]{ opacity:.55; cursor:default; }
.order-detail-a .odt-send{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 15px; border-radius:9px; border:1px solid var(--accent); background:var(--accent); color:#fff; font-family:inherit; font-size:13px; font-weight:650; cursor:pointer; }
.order-detail-a .odt-send:hover{ background:#106b56; }
.order-detail-a .odt-send svg{ width:15px; height:15px; }
.order-detail-a .odt-docrow .inline-form{ margin:0; }

/* Freeze the back button + hero at the top of the order/draft detail pages
   while the rest scrolls. The window is the scroll container (sidebar is
   already sticky), so sticky top:0 pins to the viewport. The pastel background
   matches the workspace so content scrolls cleanly underneath. */
.order-detail-a .odt-topfreeze {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #edf4f0;
  padding: 6px 0 4px;
}

/* ============ Vendor Commissions ============ */
body:has(.vendors-page) .workspace { background: #edf4f0; }
.vendors-page {
  min-width: 0;
  --accent: #147c64; --accent-weak: #e2f1ea;
  --green: #1f9469; --green-weak: #e2f4ec;
  --amber: #b58a2a; --amber-weak: #f6eede;
  --red: #c25a48; --red-weak: #f7e7e3;
  --text: #10231c; --muted: #566b62; --faint: #8ba095;
  --panel: #ffffff; --line: #dbe8e2; --line-soft: #e9f0ec; --hover: #eef5f1;
  color: #10231c;
}

/* Fill the viewport: the vendor table reaches the bottom of the screen and
   scrolls internally, while the switcher, headline cards and filters stay put.
   The list and summary views end in a .table-shell; the settings view is a
   form and keeps its natural height (no .is-fill). Desktop only, like #34. */
@media (min-width: 901px) {
  /* Cap the frame to the viewport (not just min-height) so the trailing table
     is forced to scroll inside instead of growing the whole page. The fixed
     blocks above it - switcher, cards, filters - sit outside the scroll region. */
  body:has(.vendors-page.is-fill) .app-frame {
    height: 100vh;
  }

  body:has(.vendors-page.is-fill) .workspace {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body:has(.vendors-page.is-fill) .page-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
  }

  .vendors-page.is-fill {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    /* Consistent breathing room between the switcher, totals, filter card and
       table - the flex gap is the single source of vertical spacing here. */
    gap: 18px;
  }
  /* Drop the block-flow margins so they don't double the flex gap above. */
  .vendors-page.is-fill > .view-switch,
  .vendors-page.is-fill > .vc-cards { margin-bottom: 0; }

  /* The trailing table is the scroll region; everything above it stays fixed. */
  .vendors-page.is-fill > .table-shell {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* Keep the column headers visible while the rows scroll under them. */
  .vendors-page.is-fill > .table-shell thead th {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
  }
}
/* Detail views (vendor commission) carry no .is-fill, so they miss the flex
   gap the list view uses for spacing. Stack them with the same 18px rhythm so
   the cards and table don't butt against each other. */
.vendors-page:not(.is-fill) {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vendors-page:not(.is-fill) > .orders-head,
.vendors-page:not(.is-fill) > .view-switch,
.vendors-page:not(.is-fill) > .vc-cards { margin-bottom: 0; }

.vendors-page .section-card,
.vendors-page .table-shell { background: #fff; border-color: var(--line); }
.vendors-page .button { border-color: var(--accent); color: var(--accent); background: #fff; }
.vendors-page .button:hover { background: var(--accent); color: #fff; }
.vendors-page .button-ghost:hover { color: var(--accent); border-color: var(--accent); }

.vc-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.vc-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.vc-lbl { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.vc-val { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.vc-val.is-accent { color: var(--accent); }
@media (max-width: 820px) { .vc-cards { grid-template-columns: 1fr 1fr; } }

.vc-src { display: inline-flex; font-size: 11px; font-weight: 650; padding: 2px 8px; border-radius: 6px; background: #eef2f0; color: var(--muted); vertical-align: middle; }
.vc-src.is-shopify { background: var(--accent-weak); color: var(--accent); }
.vc-rule { font-size: 12.5px; }
.vc-rule-tag { font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .03em; }
.vc-rule-tag.is-custom { color: var(--accent); }
.vc-addvendor { margin-top: 16px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.vc-addvendor summary { font-weight: 700; font-size: 13px; color: var(--accent); cursor: pointer; }

/* Illustrated empty state. Deliberately not .empty-state, which is defined
   twice in this file (the later grid rule wins and strips the padding). */
.empty-rich {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding: 52px 32px;
}

.empty-rich-compact { padding: 38px 28px; }

/* Wash fades into the panel, so it stops short of the rounded bottom corners. */
.empty-rich-tinted {
  background: linear-gradient(180deg, var(--accent-weak), transparent 72%);
  border-radius: 7px 7px 0 0;
}

.empty-rich-art { display: block; }
.empty-rich-copy { display: grid; gap: 6px; justify-items: center; }
.empty-rich-title { font-size: 15px; font-weight: 700; margin: 0; color: var(--text); }
.empty-rich-body { margin: 0; color: var(--muted); max-width: 46ch; }

.empty-rich-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.empty-rich-actions form { margin: 0; }

/* align-items:start matters: .field is itself a grid, so a stretched column
   spreads the slack across its rows and the control drifts below its label.
   The "Effective from" hint makes that column tallest, which staggered the
   whole row. */
/* One flex column drives the whole form's vertical rhythm, so the fields grid,
   checkbox, advanced disclosure, example callout and buttons all sit an even
   16px apart instead of relying on per-block margins that drift out of sync. */
.commission-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.commission-form .cf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  align-items: start;
  gap: 14px;
}

/* Native date inputs render a pixel taller than text inputs at the same
   min-height, which shows up next to them in the same row. */
.commission-form .field input[type="date"] { height: 36px; }
.cf-hint { color: var(--faint); font-size: 11.5px; margin-top: 5px; }
.cf-advanced summary { font-weight: 700; font-size: 12.5px; color: var(--accent); cursor: pointer; }
.cf-advanced[open] summary { margin-bottom: 10px; }
.cf-advanced .checkbox-row + .checkbox-row { margin-top: 8px; }
.cf-preview { background: linear-gradient(160deg, #0b3b30, #0f4c3d); border-radius: 12px; padding: 16px 18px; color: #f3efe3; max-width: 380px; }
.cf-preview .eyebrow { color: #a9f7db; margin-bottom: 10px; }
.cf-prow { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; font-size: 13px; color: rgba(243,239,227,.85); font-variant-numeric: tabular-nums; }
.cf-prow.cf-sub { border-top: 1px solid rgba(124,240,198,.18); margin-top: 5px; padding-top: 9px; }
.cf-prow.cf-grand { border-top: 1px solid rgba(124,240,198,.3); margin-top: 5px; padding-top: 10px; font-size: 15px; font-weight: 800; color: #fff; }
.cf-warn { color: var(--amber); font-size: 12.5px; font-weight: 650; }

/* Live-filter results: dim briefly while the filtered page is fetched. */
.is-filtering { opacity: 0.55; transition: opacity 0.12s ease; }

/* ---- First-run orders import state ---- */
.orders-syncing-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 44px 24px; }
.orders-syncing-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 3px solid var(--accent-weak); border-top-color: var(--accent);
  animation: orders-spin 0.9s linear infinite;
}
@keyframes orders-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orders-syncing-spinner { animation: none; } }

/* ---- In-app coach-mark tour ---- */
body.tour-active { overflow: hidden; }
.tour-blocker { position: fixed; inset: 0; z-index: 4000; background: transparent; }
.tour-blocker.is-solid { background: rgba(8, 20, 16, 0.6); }
.tour-spot {
  position: fixed; z-index: 4001; border-radius: 12px; pointer-events: none;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(8, 20, 16, 0.6);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
@media (prefers-reduced-motion: reduce) { .tour-spot { transition: none; } }
.tour-pop {
  position: fixed; z-index: 4002; width: min(320px, calc(100vw - 28px));
  background: var(--panel, #fff); color: var(--text, #10231c);
  border: 1px solid var(--line, #dbe8e2); border-radius: 14px;
  box-shadow: 0 24px 60px -24px rgba(8, 20, 16, 0.55); padding: 18px 18px 15px;
}
.tour-pop-count { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.tour-pop-title { margin: 8px 0 0; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.tour-pop-body { margin: 7px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #566b62); }
.tour-pop-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.tour-pop-actions .tour-sp { flex: 1; }
.tour-btn { appearance: none; font-family: inherit; font-size: 13px; font-weight: 700; border-radius: 40px; padding: 8px 16px; cursor: pointer; border: 1.5px solid transparent; }
.tour-btn.tour-next { background: var(--accent); color: #fff; }
.tour-btn.tour-next:hover { background: #0f6650; }
.tour-btn.tour-back { background: transparent; border-color: var(--line, #dbe8e2); color: var(--text, #10231c); }
.tour-btn.tour-back:hover { border-color: var(--accent); color: var(--accent); }
.tour-btn.tour-skip { background: transparent; color: var(--faint, #8ba095); padding-left: 4px; padding-right: 4px; }
.tour-btn.tour-skip:hover { color: var(--muted, #566b62); }

/* ============================================================================
   RESPONSIVE ADDITIONS (see the breakpoint legend at the top of this file).
   Editor stacking + touch reorder, dense-row wrapping, popover clamps, and
   invoice-preview reflow. Desktop (>=1024px) is unaffected.
   ============================================================================ */

/* ---- Invoice editor: Edit/Preview toggle (shown only on tablet/phone) ---- */
.editor-viewtab {
  display: none;
  margin-left: auto;
  gap: 2px;
  padding: 3px;
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.editor-viewtab-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 650;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
}

.editor-viewtab-btn.is-active {
  background: var(--accent);
  color: #fff;
}

/* ---- Toolbars wrap instead of overflowing ---- */
.toolbar {
  flex-wrap: wrap;
}

/* ---- Floating row menu never exceeds the viewport ---- */
.row-menu-pop {
  max-width: calc(100vw - 24px);
}

/* ---- lg: stack the two-pane invoice editor and reveal the view toggle ---- */
@media (max-width: 1023px) {
  .editor-viewtab {
    display: inline-flex;
  }

  .split-layout[data-editor-view="edit"] .template-preview {
    display: none;
  }

  .split-layout[data-editor-view="preview"] .invoice-editor-shell {
    display: none;
  }
}

/* ---- md: dense editor rows wrap so their controls stop overflowing ---- */
@media (max-width: 767px) {
  .column-item,
  .order-item,
  .cf-item,
  .cs-item .cs-top {
    flex-wrap: wrap;
  }

  .column-item .col-label {
    flex: 1 1 100%;
  }

  .style-tool-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- sm: invoice preview sheet reflows for phones ---- */
@media (max-width: 639px) {
  .print-sheet {
    padding: 16px;
  }

  /* Let a wide line-item table scroll within the sheet rather than bleed off. */
  .template-preview {
    overflow-x: auto;
  }

  .preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  /* Order-detail invoice: Billed-to and Invoice-meta stack instead of squeezing. */
  .order-detail-a .odt-doc-head {
    flex-wrap: wrap;
  }
}

/* Invoice line-item columns need horizontal breathing room. Cells have no
   inline padding by default, so a right-aligned Qty butts against a
   right-aligned Rate ("3$32.00"). Add a gap before every column after the
   first; outer edges stay flush with the rest of the sheet. Placed last (and
   scoped via .template-preview) so it wins over the per-density / per-template
   padding shorthands that would otherwise reset padding-left to 0. */
.template-preview .preview-line-items th:not(:first-child),
.template-preview .preview-line-items td:not(:first-child) {
  padding-left: 16px;
}

/* --- Custom sending domain (Delivery page) -------------------------------- */
.dlv-domain {
  margin-top: 20px;
  padding: 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.dlv-domain-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.dlv-domain-title {
  margin: 0 0 4px;
  font-size: 15px;
}

.dlv-domain .plan-pill {
  flex: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--green);
  background: var(--green-weak);
  border-radius: 20px;
  padding: 3px 10px;
}

.dlv-domain-locked {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}

.dlv-domain-add,
.dlv-domain-from,
.dlv-domain-verify {
  margin-top: 12px;
}

.dlv-domain-status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 6px;
  font-size: 14px;
}

.dns-records {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}

.dns-row {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 12px;
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.dns-type {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.dns-kv {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.dns-label {
  font-size: 11px;
  color: var(--muted);
  flex: none;
}

.dns-kv code {
  font-size: 12px;
  word-break: break-all;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  transition: background 0.15s ease;
}

.dns-kv code.is-copied {
  background: var(--green-weak);
  color: var(--green);
}

.dns-check {
  grid-column: 1 / -1;
  font-size: 11px;
  color: var(--muted);
}

.dns-check.is-ok {
  color: var(--green);
  font-weight: 600;
}

.dlv-domain-remove {
  margin-top: 14px;
}

.dlv-domain-remove .button-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.dlv-domain-remove .button-link:hover {
  color: var(--text);
}

@media (min-width: 620px) {
  .dns-row {
    grid-template-columns: 130px 1fr 1fr auto;
  }
  .dns-check {
    grid-column: auto;
    justify-self: end;
  }
}

/* --- Google Drive archiving (Delivery page) ------------------------------- */
.drive-folder {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0;
  padding: 10px 12px;
  background: var(--panel-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.drive-folder code {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.04);
  word-break: break-all;
}

.drive-badge {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--green);
  background: var(--green-weak);
  border-radius: 20px;
  padding: 2px 9px;
}

.drive-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.drive-actions .button-link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--muted);
  text-decoration: underline;
  cursor: pointer;
}

.drive-actions .button-link:hover {
  color: var(--text);
}

[data-drive-picker-error] {
  display: block;
  margin-top: 8px;
  color: var(--red);
}