* { box-sizing: border-box; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

:root {
  --bg: #eeeae2;
  --card: #ffffff;
  --ink: #1f1d19;
  --ink-soft: #33302a;
  --label: #4a463d;
  --muted: #686257;
  --muted-2: #70695d;
  --line: #e4ddd0;
  --accent: #262b33;
  --accent-hover: #37434f;
  --accent-ink: #ffffff;
  --input-bg: #fdfcf9;
  --gold: #765d2f;
  --focus-ring: #7a4b00;
  --danger: #dc2626;
  --ok: #2f6d43;
  /* status */
  --status-flagged: #c0432c;  --status-flagged-bg: #fbe0d8;
  --status-review: #a9720a;   --status-review-bg: #faedd0;
  --status-waiting: #55606b;  --status-waiting-bg: #e8ebee;
  --status-scheduled: #6d4aa8;--status-scheduled-bg: #ede7f7;
  --status-ok: #2f6d43;       --status-ok-bg: #dfeee1;
  --status-skipped: #70695d;  --status-skipped-bg: #efece4;
  --status-error: #b0301c;    --status-error-bg: #f8ded6;
  /* radii */
  --r-sm: 6px; --r: 8px; --r-md: 10px; --r-lg: 12px;
  --rail-w: 168px;
}

body {
  margin: 0;
  font-family: -apple-system, "Helvetica Neue", Segoe UI, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

.skip-link {
  position: fixed; z-index: 1000; top: 8px; left: 8px;
  padding: 10px 14px; border-radius: var(--r); background: var(--card);
  color: var(--ink); font: 650 13px system-ui; box-shadow: 0 4px 16px rgba(31,29,25,.2);
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus { transform: translateY(0); }

/* ---------- app shell + nav rail ---------- */
.app-shell { display: flex; min-height: 100vh; }
.rail {
  width: var(--rail-w); flex: none; background: var(--card);
  border-right: 1px solid var(--line); padding: 18px 14px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width 0.15s ease, padding 0.15s ease; overflow: hidden; box-sizing: border-box;
}
.rail.collapsed { width: 56px; padding: 18px 8px; }
.rail-head { display: flex; align-items: center; justify-content: space-between; padding: 0 2px 16px; }
.wordmark { font: 700 14px/1 system-ui; color: var(--ink); white-space: nowrap; overflow: hidden; }
.rail-toggle {
  width: 22px; height: 22px; border-radius: var(--r-sm); background: #f2efe6;
  border: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; flex: none;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.rail-nav { display: flex; flex-direction: column; gap: 2px; }
.rail-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: 600 13px system-ui; color: var(--label); background: none; border: none;
  padding: 9px 10px; border-radius: var(--r); cursor: pointer; white-space: nowrap; text-align: left;
}
.rail-item:hover { background: #f5f2ea; }
.rail-item.active { background: var(--accent); color: #fff; }
.mobile-more-trigger, .mobile-more-menu { display: none; }
.rail-icon { width: 18px; height: 18px; flex: none; display: flex; align-items: center; justify-content: center; }
.rail-icon svg { width: 18px; height: 18px; }
.rail.collapsed .rail-item { justify-content: center; padding: 9px 0; }
.rail.collapsed .rail-label { display: none; }
.rail-fill { flex: 1; }
.rail-user { display: flex; align-items: center; gap: 9px; padding: 8px 6px; border-top: 1px solid var(--line); margin-top: 10px; }
.rail.collapsed .rail-user { padding: 8px 0; justify-content: center; }
.rail-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff;
  font: 650 10.5px system-ui; display: flex; align-items: center; justify-content: center; flex: none;
}
.rail-userinfo { min-width: 0; line-height: 1.35; }
.rail-username { font: 650 12px system-ui; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-subtitle { font: 10.5px system-ui; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-subtitle:empty { display: none; }
.rail-signout { display: inline-block; margin-top: 2px; font: 10.5px system-ui; color: var(--muted-2); text-decoration: none; }
.rail-signout:hover { color: var(--ink); text-decoration: underline; }

.app-main { flex: 1; min-width: 0; padding: 22px 28px 60px; max-width: 1280px; }

.topbar { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 18px; }
.topbar-filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }

/* ---------- in-rail screens (views) ---------- */
.view#view-library, .view#view-settings { display: flex; flex-direction: column; }
.screen-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.screen-title { font: 700 20px system-ui; color: var(--ink); margin: 0; }
.screen-sub { font: 400 14px system-ui; color: var(--muted); }
.micro-label { font: 700 10.5px system-ui; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 4px 0 7px; }
.save-note-row { margin-top: 14px; }
.lib-brand-chips { margin-bottom: 14px; }
.lib-source-chips { margin-bottom: 14px; }
#view-library.lib-dragging { outline: 3px dashed var(--accent); outline-offset: -8px; border-radius: var(--r-lg); }
.settings-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; }
.settings-tabs { display: flex; flex-direction: column; position: sticky; top: 18px; }
.settings-nav-heading { margin: 16px 9px 5px; color: var(--muted-2); font: 700 10px system-ui; text-transform: uppercase; letter-spacing: .06em; }
.settings-nav-heading:first-child { margin-top: 0; }
.settings-nav-item { padding: 8px 9px; border: none; background: transparent; color: var(--label); text-align: left; }
.settings-nav-item:hover { background: #f5f2ea; }
.settings-nav-item.active { background: var(--card); color: var(--ink); box-shadow: inset 2px 0 0 var(--accent); }
.settings-content { min-width: 0; max-width: 840px; }
.settings-content select { min-width: 0; max-width: 100%; }
.settings-select-label { display: none; }
.settings-select { display: none; width: 100%; min-width: 0; max-width: 100%; margin-bottom: 14px; }

.readiness-notice {
  max-width: 1200px; margin: 10px auto 0; border: 1px solid #e1d4ae;
  border-radius: var(--r); padding: 0; background: #fdf8e9; color: var(--ink-soft);
}
.readiness-notice summary {
  min-height: 42px; padding: 8px 12px; display: flex; align-items: center; gap: 9px;
  cursor: pointer; list-style: none; font: 650 13px system-ui;
}
.readiness-notice summary::-webkit-details-marker { display: none; }
.readiness-mark {
  width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  flex: none; background: #b7791f; color: #fff; font: 750 12px system-ui;
}
.readiness-review { margin-left: auto; color: var(--label); font-size: 12px; }
.readiness-review::after { content: " ▾"; }
.readiness-notice[open] .readiness-review::after { content: " ▴"; }
.readiness-items { border-top: 1px solid #e7dcc0; padding: 2px 12px 8px; }
.readiness-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.readiness-item + .readiness-item { border-top: 1px solid #ece3cc; }
.readiness-copy { flex: 1; min-width: 0; }
.readiness-item-title { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 13px; }
.readiness-badge {
  padding: 2px 6px; border-radius: 999px; text-transform: uppercase;
  letter-spacing: .04em; font: 700 9.5px system-ui;
}
.readiness-blocker .readiness-badge { background: var(--status-error-bg); color: var(--status-error); }
.readiness-recommendation .readiness-badge { background: #f4e8c8; color: #765d2f; }
.readiness-copy p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }
.readiness-action {
  flex: none; padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); color: var(--ink-soft); font: 600 12px system-ui; text-decoration: none;
}
.readiness-admin-note { color: var(--muted); font-size: 12px; }
.banner-error { color: var(--danger); font-size: 13px; margin-top: 8px !important; }

@media (max-width: 600px) {
  .product-picker .modal-actions { flex-wrap: wrap; }
  .product-picker .product-create-instagram,
  .product-picker .product-create-facebook,
  .product-picker .product-create-single { flex: 1 1 100%; }
}

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tab {
  border: 1.5px solid var(--line); background: var(--card); color: var(--label);
  border-radius: var(--r-md); padding: 8px 14px; font: 650 13px system-ui; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.tab:hover { border-color: var(--muted-2); background: #faf8f3; }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tab .count { opacity: 0.6; margin-left: 2px; font-size: 12px; font-variant-numeric: tabular-nums; }
.tab.active .count { opacity: 0.85; }
/* brand filter chips carry the brand's identity colour */
.brand-tab { color: var(--bc); border-color: var(--line); }
.brand-tab:hover { border-color: var(--bc); background: #faf8f3; }
.brand-tab.active { background: var(--bc); border-color: var(--bc); color: #fff; }
.brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bc); flex: none; }
.brand-tab.active .brand-dot { background: #fff; }
/* Drop feedback when dragging a Library image onto another store's chip. */
.brand-tab.chip-drop { border-color: var(--bc); background: var(--bc); color: #fff; outline: 2px dashed var(--bc); outline-offset: 2px; }
.brand-tab.chip-drop .brand-dot { background: #fff; }

.actions { margin-left: auto; display: flex; gap: 8px; }
button {
  font: 600 13px system-ui; border-radius: var(--r); padding: 9px 18px;
  cursor: pointer; border: 1px solid transparent;
}
button.primary { background: var(--accent); color: #fff; }
button.primary:hover { background: var(--accent-hover); }
button.secondary { background: var(--card); border-color: var(--line); color: var(--ink-soft); }
button.secondary:hover { border-color: var(--muted-2); background: #faf8f3; }
button.danger { background: var(--danger); color: #fff; }
button.danger:hover { background: #b91c1c; }
button:disabled { opacity: 0.4; cursor: default; }

.toast-region {
  position: fixed; z-index: 200; right: 14px; bottom: 14px; width: min(400px, calc(100vw - 28px));
  display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: flex-start; gap: 10px; padding: 11px 10px 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  box-shadow: 0 8px 28px rgba(31,29,25,.18); font-size: 13px; pointer-events: none;
}
.toast-message { flex: 1; min-width: 0; line-height: 1.4; }
.toast-dismiss { flex: none; margin: -5px -3px -5px 0; padding: 4px 7px; border: 0; background: transparent; color: var(--muted); font: 600 18px/1 system-ui; pointer-events: auto; }
.toast-dismiss:hover { background: var(--input-bg); color: var(--ink); }
.toast-error { border-left: 3px solid var(--danger); }
.toast-success { border-left: 3px solid var(--ok); }
.toast-warning { border-left: 3px solid #b7791f; }
.toast-info { border-left: 3px solid var(--accent); }
.platform-mark { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: -4px; }
.platform-mark-fallback { width: 18px; flex: none; display: inline-flex; justify-content: center; }
.platform-label { display: inline-flex; align-items: center; gap: 6px; }
.confirm-modal { width: min(92vw, 440px); }
.form-modal { width: min(92vw, 560px); border-radius: var(--r); }
.confirm-message { white-space: pre-line; color: var(--ink-soft); line-height: 1.5; }
.form-field { display: flex; flex-direction: column; gap: 5px; margin-top: 12px; color: var(--label); font-size: 12.5px; font-weight: 600; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; margin: 0; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--input-bg); color: var(--ink); font: inherit;
}
.form-field textarea { min-height: 112px; resize: vertical; }

.form-error { margin: 10px 0; color: var(--danger); font-size: 13px; }
.settings-add-store { margin-top: 12px; }
.settings-add-store .settings-row:first-of-type { margin-top: 12px; }
.settings-add-store textarea { margin-top: 0; }
.store-manage-list { display: flex; flex-direction: column; margin-top: 8px; }
.store-manage-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.store-manage-row.archived { opacity: .72; }
.store-manage-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; font-size: 13.5px; }
.store-manage-info span { color: var(--muted); font-size: 11.5px; }
.store-manage-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.store-manage-actions button { padding: 6px 10px; }
.store-edit-panel { padding: 14px 0 16px; border-bottom: 1px solid var(--line); }
.store-edit-panel h4 { margin: 0 0 12px; font-size: 14px; }
.store-edit-panel .settings-row { align-items: flex-start; }
.store-edit-panel .settings-row textarea { flex: 1; width: auto; max-width: 520px; min-height: 112px; margin: 0; }
.store-edit-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.onboarding-panel {
  margin: 14px 0; padding: 14px 16px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r);
}
.onboarding-head { display: flex; align-items: flex-start; gap: 12px; }
.onboarding-head > div { display: flex; flex-direction: column; gap: 3px; flex: 1; font-size: 14px; }
.onboarding-head span { color: var(--muted); font-size: 12.5px; }
.onboarding-dismiss { padding: 3px 6px; background: transparent; color: var(--muted); font-size: 11.5px; }
.onboarding-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.onboarding-step {
  display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 9px;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--ink); text-align: left;
}
.onboarding-step.done { color: var(--muted); background: transparent; }
.onboarding-check {
  width: 17px; height: 17px; border: 1px solid var(--muted-2); border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 11px;
}
.onboarding-step.done .onboarding-check { border-color: var(--ok); background: var(--status-ok-bg); color: var(--ok); }
.initial-onboarding .rail,
.initial-onboarding .mobile-more-menu,
.initial-onboarding #readiness-notice { display: none !important; }
.initial-onboarding .app-shell { display: block; }
.initial-onboarding .app-main { max-width: 920px; padding: 36px 24px 64px; }
.installation-card {
  overflow: hidden; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: 0 18px 50px rgba(31, 29, 25, .08);
}
.installation-head { padding: 30px 34px 22px; background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.installation-head h1 { margin: 5px 0 8px; font-size: clamp(25px, 4vw, 36px); line-height: 1.12; }
.installation-head p { max-width: 620px; margin: 0; color: var(--muted); }
.installation-kicker { color: var(--accent-ink); font: 700 12px system-ui; letter-spacing: .08em; text-transform: uppercase; }
.installation-progress {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; padding: 18px 34px;
  border-bottom: 1px solid var(--line); list-style: none;
}
.installation-progress li { display: flex; align-items: center; gap: 8px; color: var(--muted); font: 600 13px system-ui; }
.installation-progress li span {
  display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 50%; background: var(--input-bg);
}
.installation-progress li.active { color: var(--ink); }
.installation-progress li.active span { border-color: var(--accent); background: var(--accent); color: white; }
.installation-progress li.done span { border-color: var(--ok); color: var(--ok); background: var(--status-ok-bg); }
.installation-body { padding: 28px 34px 34px; }
.installation-body form { display: grid; gap: 17px; }
.installation-body h2 { margin: 0; }
.installation-intro { margin: -8px 0 2px; color: var(--muted); }
.installation-field { display: grid; gap: 6px; color: var(--ink); font: 650 13px system-ui; }
.installation-field small { color: var(--muted); font-weight: 400; line-height: 1.4; }
.installation-field input,
.installation-field select,
.installation-field textarea {
  width: 100%; min-height: 42px; padding: 9px 11px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--input-bg); color: var(--ink); font: 400 14px system-ui;
}
.installation-field textarea { min-height: 92px; resize: vertical; }
.installation-error { margin: 0; padding: 10px 12px; border-radius: var(--r); background: var(--status-error-bg); color: var(--danger); }
.installation-logo-status { margin: 0; color: var(--muted); font-size: 13px; }
.installation-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }
.today-overview { margin-top: 16px; padding: 0; border: none; }
.today-store-label { margin-top: 14px; }
.today-brand-chips { margin-bottom: 16px; }
.today-overview > summary { padding: 10px 0; border-top: 1px solid var(--line); color: var(--ink); font-size: 13.5px; }
.today-stores-label { margin-top: 14px; }

.drop-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33, 32, 28, 0.55); backdrop-filter: blur(2px);
  pointer-events: none;
}
.drop-inner {
  border: 3px dashed var(--accent-ink); border-radius: 18px;
  padding: 48px 72px; text-align: center; color: var(--accent-ink);
}
.drop-title { font-size: 24px; font-weight: 650; }
.drop-brand { margin-top: 8px; font-size: 15px; opacity: 0.85; }

.publish-panel { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.pub-title { font-size: 12px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px; }
.pub-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pub-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; font-size: 13px;
}
.pub-plat { font-weight: 600; }
.pub-info { color: var(--muted); }
.pub-ok { color: var(--ok); font-weight: 600; text-decoration: none; }
.pub-scheduled { color: var(--gold); font-weight: 600; }
.pub-fail { color: var(--danger); font-weight: 600; cursor: help; }
.pub-btn { padding: 3px 10px !important; font-size: 12px !important; }
/* Results block: reach/engagement under a Published chip. Own line via 100% basis. */
.pub-chip { flex-wrap: wrap; }
.pub-error, .pub-results { flex-basis: 100%; }
.pub-results { margin-top: 3px; font-size: 12px; }
.pub-results-nums { color: var(--ink-soft); font-weight: 600; }
.pub-results-age { color: var(--muted); }
.pub-results-none { color: var(--muted); font-style: italic; }
/* Reach mini-badge on published calendar entries. */
.cal-reach { font: 600 9.5px system-ui; padding: 1px 6px; border-radius: 999px; background: var(--status-ok-bg); color: var(--status-ok); }

.product-search { position: relative; }
.product-results {
  position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(33,32,28,0.14); margin-top: 4px;
  max-height: 320px; overflow-y: auto;
}
.pr-item {
  display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  cursor: pointer; border-bottom: 1px solid var(--line); font-size: 13px;
}
.pr-item:last-child { border-bottom: none; }
.pr-item:hover { background: #f3efe6; }
.pr-img { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; background: var(--line); flex: none; }
.pr-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-price { color: var(--muted); font-weight: 600; }
.pr-empty { padding: 8px 10px; font-size: 13px; color: var(--muted); }

/* ---------- image library ---------- */
.library-modal { width: min(1120px, 95vw); max-height: 92vh; display: flex; flex-direction: column; }
.lib-head { display: flex; align-items: center; gap: 12px; }
.lib-head h2 { margin: 0; }
.lib-brand-select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--card); color: var(--ink); }
.lib-filters { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; }
.lib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: none; border-radius: 999px; background: transparent; color: var(--muted-2); font: 600 12px system-ui; cursor: pointer; }
.lib-chip:hover { background: #f0ece3; color: var(--ink); }
.lib-chip.active { background: #eae5da; color: var(--ink); }
.lib-chip .lib-count { font-variant-numeric: tabular-nums; opacity: 0.6; }
.lib-selbar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 9px 14px; margin-bottom: 12px; background: var(--accent); border: none; border-radius: 10px; color: #fff; }
.lib-selcount { font: 650 13px system-ui; color: #fff; }
.lib-warn { color: #f0a08e; font-size: 12.5px; }
.link-btn { background: none; border: none; color: rgba(255, 255, 255, 0.7); cursor: pointer; font-size: 12px; padding: 0; }
.link-btn:hover { color: #fff; text-decoration: underline; }
/* Bulk-action buttons render as light outlines on the dark bar. */
.lib-selbar button.primary, .lib-selbar button.secondary { background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; padding: 6px 12px; font: 600 12px system-ui; }
.lib-selbar button.primary:hover, .lib-selbar button.secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.55); }
.lib-selbar button.danger { background: transparent; border: 1px solid rgba(240, 160, 142, 0.5); color: #f0a08e; padding: 6px 12px; font: 600 12px system-ui; }
.lib-selbar button.danger:hover { background: rgba(240, 160, 142, 0.12); border-color: #f0a08e; }
button.danger { background: #dc2626; border: 1px solid #dc2626; color: #fff; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-size: 14px; }
button.danger:hover { background: #b91c1c; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; overflow-y: auto; padding: 2px; flex: 1; }
.lib-empty { grid-column: 1 / -1; padding: 40px; text-align: center; color: var(--muted); }
.animation-empty { display: flex; flex-direction: column; gap: 5px; }
.animation-empty strong { color: var(--ink); font-size: 15px; }
.animation-tile .animation-play {
  position: absolute; inset: 50% auto auto 50%; z-index: 1; transform: translate(-50%, -50%);
  width: 36px; height: 36px; display: grid; place-items: center; padding-left: 3px;
  border-radius: 50%; color: #fff; background: rgba(20,20,16,.68); box-shadow: 0 2px 8px rgba(0,0,0,.25);
  pointer-events: none;
}
.animation-tile .animation-placeholder {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 18px;
  color: var(--muted); font: 600 12px/1.35 system-ui; text-align: center; background: var(--input-bg);
}
.lib-kind-animation { background: rgba(5,120,103,.88); }
.animation-detail { width: min(92vw, 760px); }
.animation-detail-head, .animation-builder-head, .animation-members-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
}
.animation-detail-head h2, .animation-builder-head h2 { margin: 0 0 4px; }
.animation-detail-stage {
  display: grid; place-items: center; min-height: 300px; max-height: 58vh; margin: 14px 0;
  overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #171717;
}
.animation-detail-media { display: block; max-width: 100%; max-height: 58vh; }
.animation-detail-wait { color: #fff; font: 650 14px system-ui; }
.animation-detail-actions a.animation-download {
  display: inline-flex; align-items: center; text-decoration: none; color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px;
  background: var(--card); font: 600 12px system-ui;
}
.animation-detail-actions a.animation-download:hover { background: var(--input-bg); }
.animation-detail-actions { flex-wrap: wrap; }
.animation-social-hint { margin: 10px 0 0; }
.animation-error, .animation-builder-error {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid #efb4a7;
  border-radius: 8px; color: #8f2617; background: #fff3f0; font: 12.5px/1.4 system-ui;
}
.animation-builder { width: min(94vw, 900px); max-width: 900px; max-height: 92vh; overflow-y: auto; }
.animation-builder-body { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(280px, 1fr); gap: 20px; margin-top: 14px; }
.animation-builder-preview { min-width: 0; }
.animation-builder-preview > small { display: block; margin-top: 6px; color: var(--muted); font: 11.5px/1.35 system-ui; }
.animation-preview-stage {
  position: relative; width: 100%; max-height: 470px; aspect-ratio: 1; overflow: hidden;
  display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
.animation-preview-stage[data-aspect="portrait"] { aspect-ratio: 4 / 5; width: min(100%, 376px); margin-inline: auto; }
.animation-preview-stage[data-aspect="story"] { aspect-ratio: 9 / 16; width: min(100%, 264px); margin-inline: auto; }
.animation-preview-stage img { width: 100%; height: 100%; display: block; transition: opacity .2s ease, transform .25s ease; }
.animation-preview-stage[data-fit="cover"] img { object-fit: cover; }
.animation-preview-stage[data-fit="contain"] img { object-fit: contain; }
.animation-preview-stage img.transition-crossfade { animation: animation-fade .3s ease; }
.animation-preview-stage img.transition-slide { animation: animation-slide .3s ease; }
@keyframes animation-fade { from { opacity: .15; } to { opacity: 1; } }
@keyframes animation-slide { from { opacity: .5; transform: translateX(16%); } to { opacity: 1; transform: translateX(0); } }
.animation-builder-controls { display: flex; flex-direction: column; gap: 9px; }
.animation-field { display: grid; grid-template-columns: 130px minmax(0, 1fr); align-items: center; gap: 10px; }
.animation-field > span, .animation-output-field legend { color: var(--label); font: 650 12.5px system-ui; }
.animation-field input[type="text"], .animation-field select {
  min-width: 0; width: 100%; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--card); color: var(--ink);
}
.animation-field input[type="color"] { width: 52px; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); }
.animation-output-field {
  display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 7px 10px; margin: 0; padding: 0; border: 0;
}
.animation-output-field legend { float: left; grid-row: 1 / span 2; }
.animation-output-field label { grid-column: 2; color: var(--ink); font: 12px/1.35 system-ui; }
.animation-members-head { align-items: center; margin-top: 18px; }
.animation-members-head small { color: var(--muted); font: 500 11.5px system-ui; }
.animation-member-strip { display: flex; gap: 8px; margin-top: 8px; padding-bottom: 5px; overflow-x: auto; }
.animation-member {
  position: relative; flex: 0 0 100px; height: 128px; overflow: hidden; border: 1px solid var(--line);
  border-radius: 8px; background: var(--input-bg);
}
.animation-member > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.animation-member > span {
  position: absolute; top: 5px; left: 5px; min-width: 21px; height: 21px; padding: 0 5px;
  border-radius: 999px; color: #fff; background: var(--accent); font: 700 11px/21px system-ui; text-align: center;
}
.animation-member > div { position: absolute; display: flex; right: 4px; bottom: 4px; }
.animation-member > div button {
  width: 25px; height: 25px; padding: 0; border: 1px solid rgba(255,255,255,.55);
  border-radius: 5px; color: #fff; background: rgba(20,20,16,.78); cursor: pointer;
}
.animation-member > div .animation-remove { color: #ffb4a7; }
.create-outputs-modal { width: min(92vw, 720px); max-width: 720px; }
.create-outputs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.create-outputs-head h2 { margin: 0 0 4px; }
.create-output-choices { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; border: 0; }
.create-output-choices legend { margin-bottom: 8px; color: var(--label); font: 700 12.5px system-ui; }
.create-output-choices label {
  display: flex; align-items: flex-start; gap: 9px; padding: 10px 11px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); cursor: pointer;
}
.create-output-choices label:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.create-output-choices input { margin-top: 2px; }
.create-output-choices span { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.create-output-choices strong { color: var(--ink); font: 650 13px system-ui; }
.create-output-choices small { color: var(--muted); font: 11.5px/1.35 system-ui; }
.create-output-results { display: grid; gap: 7px; margin-top: 14px; }
.create-output-result {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--input-bg);
}
.create-output-result > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.create-output-result strong { color: var(--ink); font: 650 12.5px system-ui; }
.create-output-result small { color: var(--muted); font: 11.5px/1.35 system-ui; }
.create-output-result.is-success { border-color: color-mix(in srgb, var(--status-ok) 38%, var(--line)); }
.create-output-result.is-error { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.create-output-result.is-error small { color: var(--danger); }
.create-output-error { margin-top: 12px; color: var(--danger); font: 12px system-ui; }
.create-output-actions { flex-wrap: wrap; }
.animation-member.has-reorder-controls { height: 160px; }
.animation-member.has-reorder-controls > img { height: calc(100% - 32px); }
.animation-member.has-reorder-controls > div:not(.reorder-controls) { top: 4px; bottom: auto; }
.animation-member > .reorder-controls {
  left: 0; right: 0; bottom: 0; height: 32px; padding: 2px 4px;
  align-items: center; justify-content: space-between; background: var(--input-bg);
}
.lib-product-search { display: flex; gap: 8px; margin: 2px 0 14px; max-width: 620px; }
.lib-product-search input { flex: 1; min-width: 0; }
.lib-product-more { display: flex; justify-content: center; padding: 16px 0 4px; }
.product-tile {
  position: relative; min-width: 0; padding: 0; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink);
}
.product-tile:hover, .product-tile:focus-visible { border-color: var(--accent); box-shadow: 0 3px 12px rgba(30,24,14,.1); }
.product-tile.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.product-tile > img, .product-no-image { width: 100%; height: 150px; object-fit: cover; display: flex; align-items: center; justify-content: center; background: var(--input-bg); color: var(--muted); }
.product-check {
  position: absolute; top: 7px; left: 7px; z-index: 2; width: 24px; height: 24px;
  padding: 0; border: 2px solid #fff; border-radius: 6px; cursor: pointer;
  background: rgba(0,0,0,.42); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
  font: 700 12px/20px system-ui; text-align: center;
}
.product-check:hover, .product-check:focus-visible { background: rgba(0,0,0,.72); outline: 2px solid #fff; outline-offset: 1px; }
.product-tile.selected .product-check { background: var(--accent); }
.product-info { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 10px; }
.product-info strong { font: 650 12.5px/1.3 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-info span { font: 11px/1.3 system-ui; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.product-info .product-stock { font-weight: 650; }
.product-stock-available { color: #28734d !important; }
.product-stock-warning { color: #9a6700 !important; }
.product-stock-danger { color: #b42318 !important; }
.product-stock-unknown { color: var(--muted) !important; }
.product-tile.inventory-danger { border-color: color-mix(in srgb, #b42318 42%, var(--line)); }
.product-picker-modal { width: min(92vw, 780px); max-width: 780px; }
.product-picker-head { display: flex; align-items: flex-start; gap: 16px; }
.product-picker-head > div { flex: 1; min-width: 0; }
.product-picker-head h2 { margin: 0 0 4px; }
.product-view-link { color: var(--ink); text-decoration: none; white-space: nowrap; border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; font: 600 12px system-ui; }
.product-inventory { margin: 12px 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--input-bg); }
.product-inventory > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.product-inventory > div:first-child > strong { font: 700 13px system-ui; }
.product-inventory > div:first-child > small { color: var(--muted); font: 12px/1.35 system-ui; }
.product-inventory-danger { border-color: color-mix(in srgb, #b42318 42%, var(--line)); background: color-mix(in srgb, #b42318 5%, var(--card)); }
.product-variant-inventory { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 8px; }
.product-variant-inventory summary { cursor: pointer; color: var(--ink); font: 650 12px system-ui; }
.product-variant-list { margin-top: 7px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--card); }
.product-variant-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.product-variant-row:last-child { border-bottom: 0; }
.product-variant-row > span:first-child { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.product-variant-row strong { font: 650 12px system-ui; }
.product-variant-row small { color: var(--muted); font: 11px system-ui; white-space: nowrap; }
.product-variant-row > .product-stock { flex: none; text-align: right; font: 650 11px system-ui; }
.product-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 9px; max-height: 55vh; overflow-y: auto; margin: 12px 0; padding: 2px; }
.product-image-tile { position: relative; padding: 0; aspect-ratio: 1; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--line); }
.product-image-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-image-tile.selected { border-color: var(--accent); }
.product-image-order { position: absolute; top: 5px; right: 5px; min-width: 21px; height: 21px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 12px/21px system-ui; text-align: center; }
.product-image-order:empty { display: none; }
/* Fixed height (not aspect-ratio): an aspect-ratio grid item contributes ~0
   min-content height to grid-auto-rows:auto, collapsing the row track so tiles
   overlap. A fixed height sizes the row reliably. */
.lib-tile { position: relative; height: 190px; border-radius: 10px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background: var(--line); }
.lib-tile.selected { border-color: var(--accent); }
.lib-tile[draggable="true"] { cursor: grab; }
.lib-tile.dragging { opacity: 0.45; cursor: grabbing; }

/* Wave 3 — kind chips (carousel / story) shown on tiles, thumbs, calendar. */
/* Type chip lives at the BOTTOM (just above the status badge), out of the top
   corners entirely so it can never sit over the top-left select button or the
   top-right download button. The bottom edge has the full tile width free, so
   the label never truncates. Click-through as belt-and-braces. */
.lib-kind {
  position: absolute; left: 7px; bottom: 48px; z-index: 2; pointer-events: none;
  max-width: calc(100% - 14px);
  font: 700 10px system-ui; padding: 2px 7px; border-radius: 999px;
  color: #fff; background: rgba(20,20,16,0.72); backdrop-filter: blur(2px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lib-kind-carousel { background: rgba(37,99,235,0.85); }
.lib-kind-story { background: rgba(124,58,237,0.85); }
.lib-kind-reel { background: rgba(219,39,119,0.85); }
.cal-kind {
  position: absolute; top: 4px; left: 4px; z-index: 2;
  font: 700 9px system-ui; padding: 1px 5px; border-radius: 999px; color: #fff;
}
.cal-kind.k-story { background: rgba(124,58,237,0.9); }
.cal-kind.k-carousel { background: rgba(37,99,235,0.9); }
.cal-kind.k-reel { background: rgba(219,39,119,0.92); }
.ed-kind-chip {
  font: 700 11px system-ui; padding: 3px 9px; border-radius: 999px;
  background: var(--input-bg); color: var(--ink); border: 1px solid var(--line);
}

/* Carousel filmstrip in the editor. */
.ed-filmstrip { margin: 4px 0 12px; }
.ed-filmstrip-rail { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.ed-film-cell { position: relative; flex: 0 0 auto; width: 62px; height: 78px; border-radius: 7px; overflow: hidden; background: #eceae3; }
.ed-film-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ed-film-cell.has-reorder-controls { width: 72px; height: 110px; border: 1px solid var(--line); }
.ed-film-cell.has-reorder-controls img { height: 78px; }
.ed-film-remove {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; padding: 0;
  border: 1px solid rgba(255,255,255,.85); border-radius: 999px;
  background: rgba(32,31,28,.82); color: #fff; font: 700 16px/19px system-ui;
  display: grid; place-items: center; cursor: pointer;
}
.ed-film-remove:hover, .ed-film-remove:focus-visible { background: var(--danger); outline: 2px solid #fff; outline-offset: 1px; }
.ed-film-remove:disabled { opacity: .45; cursor: not-allowed; background: rgba(32,31,28,.65); }
/* Drag-to-reorder (carousel images + story frames) */
.reorderable { cursor: grab; }
.reorderable:active { cursor: grabbing; }
.reordering { opacity: 0.4; }
.reorder-controls {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
  height: 32px; padding: 2px 5px; display: flex; align-items: center; justify-content: space-between;
  gap: 2px; background: var(--input-bg); cursor: default;
}
.reorder-control {
  width: 28px; height: 28px; min-height: 0; padding: 0; display: inline-grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink);
  font: 700 18px/1 system-ui;
}
.reorder-control:hover:not(:disabled) { border-color: var(--accent); background: #faf8f3; }
.reorder-control:disabled { opacity: .35; cursor: not-allowed; }
.reorder-feedback {
  min-height: 30px; display: flex; align-items: center; gap: 8px; margin-top: 5px;
  color: var(--muted); font: 600 11.5px/1.35 system-ui;
}
.reorder-feedback-text { min-width: 0; }
.reorder-undo {
  min-height: 28px; padding: 3px 8px; border: 0; background: transparent;
  color: var(--accent); text-decoration: underline; font-size: 11.5px;
}
.story-reorder-hint { text-align: center; color: var(--muted); margin: 6px 0 0; }
/* Add members (carousel/story): the "+" tile, file-drop highlight, library picker */
.mp-add-tile { flex: 0 0 auto; width: 62px; height: 78px; border-radius: 7px; border: 2px dashed var(--line); background: var(--input-bg); color: var(--muted); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.mp-add-tile:hover { border-color: var(--accent); color: var(--accent); }
.story-add-frames { margin-top: 6px; }
.drop-hot { outline: 2px dashed var(--accent); outline-offset: 3px; border-radius: 8px; }
.member-picker-modal { max-width: 620px; width: 90vw; }
.mp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; max-height: 52vh; overflow-y: auto; margin: 8px 0; padding: 2px; }
.mp-tile { position: relative; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: var(--line); aspect-ratio: 1; cursor: pointer; }
.mp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-tile.selected { border-color: var(--accent); }
.mp-tile.selected::after { content: "✓"; position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ed-film-n {
  position: absolute; bottom: 35px; right: 3px; min-width: 16px; text-align: center;
  font: 700 10px system-ui; color: #fff; background: rgba(20,20,16,0.7);
  border-radius: 999px; padding: 0 4px;
}

@media (pointer: coarse), (max-width: 720px) {
  .reorder-controls,
  .animation-member > .reorder-controls { height: 48px; padding: 2px 4px; }
  .reorder-control { width: 44px; height: 44px; min-height: 44px; }
  .ed-film-cell.has-reorder-controls { width: 96px; height: 126px; }
  .ed-film-cell.has-reorder-controls img { height: 78px; }
  .ed-film-n { bottom: 51px; }
  .animation-member.has-reorder-controls { flex-basis: 100px; height: 176px; }
  .animation-member.has-reorder-controls > img { height: calc(100% - 48px); }
}

/* Photo adjustments (brightness/contrast/saturation/presets). */
.ed-adjust { margin: 8px 0 2px; width: 100%; }
.pe-modal { width: min(94vw, 720px); }
.pe-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.pe-preview {
  flex: 1 1 300px; min-width: 260px; max-height: 420px; border-radius: 10px;
  overflow: hidden; background: #eceae3; border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.pe-preview img { max-width: 100%; max-height: 420px; display: block; }
.pe-controls { flex: 1 1 240px; min-width: 240px; display: flex; flex-direction: column; gap: 14px; }
.pe-presets { display: flex; gap: 6px; flex-wrap: wrap; }
.pe-preset {
  font: 600 12.5px system-ui; padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--input-bg); color: var(--ink);
}
.pe-preset.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.pe-slider { display: grid; grid-template-columns: 84px 1fr 48px; align-items: center; gap: 10px; }
.pe-name { font: 600 12.5px system-ui; color: var(--label); }
.pe-val { font: 600 12px system-ui; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.pe-slider input[type="range"] { width: 100%; accent-color: var(--accent); height: 28px; }

/* Story editor (no caption). */
.story-editor { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.story-media-col { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.story-media {
  width: 240px; aspect-ratio: 9 / 16; border-radius: 12px;
  overflow: hidden; background: #eceae3; border: 1px solid var(--line);
}
.story-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-reframe { width: 240px; }
/* Story-set filmstrip: tap a frame to preview/reframe it. */
.story-frames { display: flex; gap: 6px; width: 240px; overflow-x: auto; padding-bottom: 2px; }
.story-frame {
  position: relative; flex: 0 0 auto; width: 44px; aspect-ratio: 9 / 16;
  border-radius: 7px; overflow: hidden; background: #eceae3; cursor: pointer;
  border: 2px solid var(--line); padding: 0;
}
.story-frame.active { border-color: var(--accent); }
.story-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.story-frame-n {
  position: absolute; bottom: 2px; right: 2px; min-width: 14px; text-align: center;
  font: 700 9px system-ui; color: #fff; background: rgba(20,20,16,0.7);
  border-radius: 999px; padding: 0 3px;
}
.story-info { flex: 1; min-width: 240px; max-width: 440px; }
.story-info h2 { margin: 0 0 8px; font-size: 18px; }
/* Story cadence status: when this story will actually go out. */
.story-cadence {
  margin: 12px 0; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--card);
  display: flex; flex-direction: column; gap: 6px;
}
.story-cad-line { font: 600 13px system-ui; }
.story-cad-line.on { color: var(--status-ok); }
.story-cad-line.off { color: var(--muted-2); }
.story-warn { font: 600 13px system-ui; color: var(--status-error, #c0392b); }
.story-cadence .modal-hint { margin: 0; }
/* Kind badges in the schedule list. */
.sched-story { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(124,58,237,0.12); color: #7c3aed; white-space: nowrap; font-weight: 700; }
.sched-carousel { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(37,99,235,0.12); color: #2563eb; white-space: nowrap; font-weight: 700; }
.sched-reel { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: rgba(219,39,119,0.12); color: #be185d; white-space: nowrap; font-weight: 700; }
.sched-substhead { margin: 14px 0 8px; font-weight: 600; color: var(--ink); }
.lib-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.lib-video-fallback {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 6px; background: #29252f; color: #fff;
  font: 700 28px system-ui; text-align: center;
}
.lib-video-fallback small { font: 650 11px system-ui; }
.lib-video-preview-error .lib-thumb { display: none; }
.lib-video-preview-error .lib-video-fallback { display: flex; }
.lib-check { position: absolute; top: 7px; left: 7px; width: 20px; height: 20px; padding: 0; border-radius: 5px; border: 2px solid #fff; background: rgba(0,0,0,0.35); box-shadow: 0 0 0 1px rgba(0,0,0,0.2); cursor: pointer; z-index: 2; }
.lib-check:hover { background: rgba(0,0,0,0.55); }
/* The tile's ⋯ menu button — the ONE home for per-photo actions (download,
 * copy to store, …). Hover-revealed on desktop, always visible on touch. */
.lib-more { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; padding: 0; border-radius: 6px; border: none; background: rgba(0,0,0,0.45); color: #fff; font: 700 14px/1 system-ui; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.12s; z-index: 3; }
.lib-more:hover { background: rgba(0,0,0,0.7); }
.lib-tile:hover .lib-more, .lib-tile:focus-within .lib-more { opacity: 1; }
@media (hover: none) { .lib-more { opacity: 1; } }
.lib-tile-menu {
  position: fixed; z-index: 40; min-width: 165px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 26px rgba(30, 24, 14, 0.16); padding: 5px; display: flex; flex-direction: column;
}
.lib-tile-menu-item {
  text-align: left; font: 600 12.5px system-ui; color: var(--ink); background: none; border: none;
  border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; white-space: nowrap;
}
.lib-tile-menu-item:hover { background: #f2efe9; }
.lib-tile.selected .lib-check { background: var(--accent); border-color: #fff; }
.lib-tile.selected .lib-check::after { content: "✓"; position: absolute; inset: 0; color: #fff; font-size: 13px; line-height: 16px; text-align: center; font-weight: 700; }
.lib-badge { position: absolute; bottom: 26px; left: 7px; right: 7px; padding: 3px 7px; border-radius: 6px; font-size: 11px; font-weight: 600; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lib-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 7px; font-size: 10px; color: #fff; background: rgba(0,0,0,0.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.b-unused { background: var(--status-waiting); }
.b-review { background: var(--status-review); }
.b-ready { background: var(--status-ok); }
.b-scheduled { background: var(--status-scheduled); }
.b-published { background: var(--status-ok); }
.b-skipped { background: var(--status-skipped); }
.b-generating { background: var(--status-review); }
.b-error { background: var(--danger); }
#library-modal.lib-dragging .modal { outline: 3px dashed var(--accent); outline-offset: -6px; }

/* ---------- multiple posting times ---------- */
.times-wrap { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.time-chip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 2px 4px 2px 6px; background: var(--card); }
.time-chip input[type="time"] { border: none; background: none; color: var(--ink); font-size: 13px; padding: 2px; }
.time-rm { border: none; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.time-rm:hover { color: #dc2626; }
.time-add { border: 1px dashed var(--line); background: none; color: var(--accent); border-radius: 8px; padding: 4px 9px; cursor: pointer; font-size: 13px; }
.time-add:hover { border-color: var(--accent); }
.times-hint { font-size: 12px; color: var(--muted); margin-left: 4px; }

/* ---------- publishing schedule view ---------- */
.schedule-modal { width: min(820px, 95vw); max-height: 92vh; display: flex; flex-direction: column; }
.sched-summary { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.sched-pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--line); color: var(--ink); }
.sched-note { font-size: 13px; color: var(--muted); }
.sched-list { overflow-y: auto; flex: 1; }
.sched-dayhead { font-weight: 700; font-size: 13px; margin: 14px 0 6px; color: var(--ink); position: sticky; top: 0; background: var(--card); padding: 4px 0; }
.sched-row { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--line); }
.sched-thumb { width: 40px; height: 40px; border-radius: 6px; flex: none; }
.sched-time { font-variant-numeric: tabular-nums; font-weight: 600; width: 46px; }
.sched-plat { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap; }
.sched-file { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
.sched-pinned { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #7c3aed; color: #fff; }
.sched-row .link-btn { color: var(--accent); }
.sched-row .link-btn:hover { color: var(--accent-hover); }
.danger-link { color: #dc2626 !important; }

@media (max-width: 600px) {
  .sched-row { flex-wrap: wrap; }
  .sched-file {
    order: 1; flex: 1 0 calc(100% - 50px); max-width: none; margin-left: 50px;
  }
  .sched-row .spacer { display: none; }
  .sched-row .link-btn { order: 2; }
  .sched-row .link-btn:first-of-type { margin-left: 50px; }
}

.toggle-row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.toggle-row input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--accent); cursor: pointer; }
#settings-body select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; background: var(--card); color: var(--ink); }
#settings-body textarea { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 14px; font-family: inherit; }

main {
  margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px;
}
.empty { color: var(--muted); font-size: 15px; grid-column: 1 / -1; padding: 40px 0; text-align: center; }

/* ---------- Today dashboard ---------- */
.today-top { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.today-stats { display: flex; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.today-next-action {
  display: flex; align-items: center; gap: 18px; margin: 0 0 14px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-lg);
  background: var(--card);
}
.today-next-action.is-danger { border-left-color: var(--status-error); }
.today-next-action.is-warning { border-left-color: var(--status-review); }
.today-next-copy { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 3px; }
.today-next-eyebrow { color: var(--muted-2); font: 700 10px system-ui; letter-spacing: .06em; text-transform: uppercase; }
.today-next-copy strong { color: var(--ink); font: 700 15px/1.25 system-ui; }
.today-next-copy > span:last-child { color: var(--muted); font: 12.5px/1.4 system-ui; }
.today-next-action > button { flex: none; }
.today-inline-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stat-card { flex: 1; min-width: 150px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; }
.stat-n { font: 700 26px system-ui; }
.stat-label { font: 400 12.5px system-ui; color: var(--muted); margin-top: 2px; }
.today-week { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 16px; margin-bottom: 20px; }
.week-label { font: 700 10.5px system-ui; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 10px; }
.week-bars { display: flex; gap: 8px; }
.week-day { flex: 1; text-align: center; }
.wd-label { font: 600 11px system-ui; color: var(--muted-2); margin-bottom: 6px; }
.wd-bar { width: 70%; margin: 0 auto; border-radius: 5px; }
.wd-n { font: 650 12px system-ui; color: var(--ink); margin-top: 6px; }

/* ---------- Today: expandable per-store sections ---------- */
.brand-section { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); margin-bottom: 10px; overflow: hidden; }
.brand-sec-head { display: flex; align-items: center; gap: 9px; width: 100%; padding: 13px 16px; background: none; border: none; cursor: pointer; text-align: left; font: inherit; }
.brand-sec-head:hover { background: var(--input-bg); }
.brand-sec-head .brand-dot { width: 9px; height: 9px; background: var(--bc); }
.bs-name { font: 650 13.5px system-ui; color: var(--ink); }
.bs-count { font: 400 12.5px system-ui; color: var(--muted); }
.bs-chevron { margin-left: auto; color: var(--muted-2); font-size: 12px; }
.brand-sec-list { border-top: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; }
.bs-empty { color: var(--muted); font-size: 13px; padding: 12px 10px; }
.bs-row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 10px; background: none; border: none; border-radius: var(--r); cursor: pointer; text-align: left; font: inherit; }
.bs-row:hover { background: var(--bg); }
.bs-thumb { width: 44px; height: 44px; border-radius: 8px; flex: none; }
.bs-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.bs-title { font: 600 13px system-ui; color: var(--ink); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- compact post tiles (queue) ---------- */
.post-tile {
  display: flex; gap: 0; align-items: stretch; text-align: left; padding: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; cursor: pointer; font: inherit; min-height: 92px;
}
.post-tile:hover { border-color: var(--muted-2); box-shadow: 0 2px 12px rgba(31, 29, 25, 0.07); }
.pt-media { width: 92px; flex: none; background: #eceae3; }
.pt-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pt-info { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; min-width: 0; justify-content: center; }
.pt-brand { display: flex; align-items: center; gap: 6px; font: 600 11.5px system-ui; color: var(--label); }
.pt-brand .brand-dot { background: var(--bc); }
.pt-title { font: 650 14px system-ui; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-status { align-self: flex-start; }

/* ---------- Pipeline kanban ---------- */
.pipe-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: start; }
.pipe-board .lib-empty { grid-column: 1 / -1; }
.pipe-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px; min-height: 220px; }
.pipe-colhead { display: flex; align-items: center; gap: 7px; font: 650 12.5px system-ui; color: var(--ink); margin-bottom: 10px; }
.pipe-accent { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.pipe-count { margin-left: auto; font: 650 11px system-ui; color: var(--muted-2); background: var(--bg); padding: 1px 8px; border-radius: 999px; }
.pipe-card { position: relative; display: flex; flex-direction: column; width: 100%; text-align: left; padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: visible; margin-bottom: 8px; font: inherit; }
.pipe-card:hover { border-color: var(--muted-2); box-shadow: 0 2px 10px rgba(31, 29, 25, 0.06); }
.pipe-card-preview { overflow: hidden; border-radius: var(--r) var(--r) 0 0; }
.pipe-media { height: 110px; }
.pipe-cardbody { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.pipe-brand { display: flex; align-items: center; gap: 5px; font: 600 10.5px system-ui; color: var(--label); }
.pipe-brand .brand-dot { background: var(--bc); }
.pipe-title { font: 600 12px system-ui; color: var(--ink); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipe-card-actions { display: flex; align-items: center; gap: 6px; padding: 0 8px 8px; }
.pipe-card-actions button { flex: 1; padding: 6px 8px; font-size: 11.5px; }
.pipe-empty { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--muted-2); text-align: center; padding: 20px 4px; font-size: 13px; }
.pipe-empty button { font-size: 12px; }
.pipe-load-error { gap: 12px; }

/* ---------- Calendar week grid ---------- */
/* ---------- calendar: shared toolbar + three view modes ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 8px; margin: 2px 0 12px; flex-wrap: wrap; }
.cal-nav-btn {
  font: 700 16px system-ui; line-height: 1; padding: 5px 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.cal-nav-btn:hover { border-color: var(--muted-2); }
.cal-range {
  font: 650 13.5px system-ui; color: var(--ink); background: none; border: none;
  padding: 5px 8px; cursor: pointer; border-radius: 8px; min-width: 180px; text-align: center;
}
.cal-range:hover { background: var(--input-bg); }
.cal-print-btn {
  font: 650 12.5px system-ui; padding: 5px 12px; cursor: pointer; margin-left: auto;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
.cal-print-btn:hover { border-color: var(--muted-2); }
.cal-note { font-size: 13px; color: var(--muted); padding: 6px 2px 10px; }

/* Calendar and Week planner are two views of the same planning job. */
.plan-switcher {
  display: inline-flex; gap: 3px; margin: -4px 0 12px; padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--input-bg);
}
.plan-switcher a {
  min-height: 34px; display: inline-flex; align-items: center; padding: 6px 11px;
  border-radius: var(--r-sm); color: var(--muted); font: 650 12.5px system-ui;
  text-decoration: none;
}
.plan-switcher a:hover { color: var(--ink); background: var(--card); }
.plan-switcher a[aria-current="page"] {
  color: var(--ink); background: var(--card); box-shadow: 0 1px 3px rgba(31, 29, 25, 0.08);
}
.plan-continuity {
  margin: 4px 0 12px; padding: 10px 12px; border: 1px solid #bbf7d0;
  border-radius: var(--r-md); background: #f0fdf4; color: #166534;
  font: 600 12.5px/1.4 system-ui;
}
.plan-state {
  min-height: 150px; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px; border: 1px dashed var(--line);
  border-radius: var(--r-md); color: var(--muted); text-align: center;
}
.plan-state strong { color: var(--ink); font: 700 14px system-ui; }
.plan-state-error { border-color: #f3c8c8; background: #fffafa; }
.plan-empty { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-state-actions { display: flex; gap: 7px; flex: none; }

/* Printable plan (quick win: Calendar week print/export). Hidden on screen;
 * only shown on paper via the @media print block at the end of this file. */
.cal-print { display: none; }

.cal-grid { display: block; }
/* Week mode: 4 stacked weeks, each a labeled band over a 7-col day row. */
.cal-weekband {
  font: 650 12px system-ui; letter-spacing: 0.02em; color: var(--muted);
  margin: 14px 0 6px; padding-left: 2px;
}
.cal-weekband:first-child, .cal-note + .cal-weekband { margin-top: 2px; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-col { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 7px; min-height: 96px; display: flex; flex-direction: column; gap: 6px; }
.cal-col.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-colhead { text-align: center; margin-bottom: 2px; }
.cal-dow { font: 650 11px system-ui; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted-2); }
.cal-date { font: 700 15px system-ui; color: var(--ink); }
.cal-mon { font: 650 10px system-ui; color: var(--muted-2); }

/* Today mode: a single-day detail list. */
.cal-day-list { display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.cal-dayrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); position: relative;
}
.cal-dayrow:hover { border-color: var(--muted-2); }
.cal-dayrow-time { font: 700 14px system-ui; font-variant-numeric: tabular-nums; width: 48px; flex: none; }
.cal-dayrow-thumb { width: 56px; height: 56px; border-radius: 8px; flex: none; position: relative; }
.cal-dayrow-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-dayrow-text {
  font: 500 13px system-ui; color: var(--ink); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cal-posted { font: 600 9.5px system-ui; padding: 1px 6px; border-radius: 999px; background: var(--line); color: var(--muted); }

/* Month mode: 3 labeled month grids. */
.cal-month { margin-bottom: 22px; }
.cal-mhead { font: 700 15px system-ui; color: var(--ink); margin: 4px 0 8px; }
.cal-mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-mdow { font: 650 10px system-ui; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-2); text-align: center; padding: 2px 0; }
.cal-mday {
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  min-height: 74px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px;
  position: relative; cursor: pointer; overflow: hidden;
}
.cal-mday:hover { border-color: var(--muted-2); }
.cal-mday.blank { background: none; border-color: transparent; cursor: default; }
.cal-mday.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-mnum { font: 650 11px system-ui; color: var(--muted); }
.cal-mday.today .cal-mnum { color: var(--accent); }
.cal-mchip {
  display: flex; align-items: center; gap: 4px; font: 600 9.5px system-ui; color: var(--ink);
  background: var(--input-bg); border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer;
}
.cal-mchip:hover { border-color: var(--muted-2); }
.cal-mchip.published { opacity: 0.55; }
.cal-more { font: 600 9.5px system-ui; color: var(--muted); background: none; border: none; text-align: left; padding: 0 2px; cursor: pointer; }
.cal-more:hover { color: var(--ink); }

/* Published history: visible but clearly "done". */
.cal-entry.published, .cal-dayrow.published { opacity: 0.62; }
.cal-entry.published { cursor: pointer; }
.cal-entry { border: 1px solid var(--line); border-radius: 7px; padding: 6px 7px; background: var(--input-bg); }
.cal-thumb { width: 100%; height: 88px; border-radius: 5px; margin-bottom: 5px; }
.cal-meta { display: flex; align-items: center; gap: 5px; font: 650 10px system-ui; color: var(--muted); margin-bottom: 3px; }
.cal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.cal-title { font: 500 11.5px system-ui; color: var(--ink); line-height: 1.35; word-break: break-word; white-space: pre-line; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cal-pin { display: inline-block; margin-top: 4px; font: 600 9.5px system-ui; padding: 1px 6px; border-radius: 999px; background: var(--status-scheduled-bg); color: var(--status-scheduled); }
.cal-grid .lib-empty { grid-column: 1 / -1; }

/* Calendar entry: clickable + draggable to another day. */
.cal-entry { position: relative; cursor: pointer; }
.cal-entry[draggable="true"] { cursor: grab; }
.cal-entry.dragging { opacity: 0.45; cursor: grabbing; }
.cal-col.cal-drop { outline: 2px dashed var(--status-scheduled); outline-offset: -4px; background: var(--status-scheduled-bg); }

/* Small per-entry action menu (popover). */
.cal-menu {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 6px 22px rgba(31, 29, 25, 0.16); overflow: hidden;
}
.cal-menu-item {
  text-align: left; padding: 8px 10px; background: none; border: none; cursor: pointer;
  font: 600 12px system-ui; color: var(--ink);
}
.cal-menu-item:hover { background: var(--input-bg); }
.cal-menu-item.danger-link { color: var(--danger); }

/* Pipeline card: draggable between columns. */
.pipe-card[draggable="true"] { cursor: grab; }
.pipe-card.dragging { opacity: 0.45; cursor: grabbing; }
.pipe-col.pipe-drop { outline: 2px dashed var(--status-ok); outline-offset: -4px; background: var(--status-scheduled-bg); }

/* Week strip days open the calendar. */
.week-day { cursor: pointer; }

/* ---------- full-page post editor ---------- */
#view-post .editor-bar {
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.ed-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ed-brand { font: 650 13.5px system-ui; color: var(--ink); }
.ed-bar-spacer { flex: 1; }
.ed-bar-btn { font-size: 12.5px; padding: 7px 14px; }
.editor-wrap { max-width: 1040px; }

/* Two-column editor card. This ".card.editor-card" beats the base ".card". */
/* overflow:visible so the product-search dropdown isn't clipped by the base .card */
.card.editor-card { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; overflow: visible; }

/* B1 — LEFT column */
.ed-left {
  border-right: 1px solid var(--line); padding: 18px;
  display: flex; flex-direction: column; gap: 0; background: var(--card);
}
.card-media.ed-media { height: 200px; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 10px; flex: none; }
.ed-title { margin: 0 0 2px; font: 600 13px system-ui; color: var(--ink); }
.ed-subtitle { margin: 0 0 18px; font-size: 12.5px; color: var(--muted); }
.ed-micro {
  margin: 0 0 8px; font: 650 11px system-ui; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted-2);
}
.ed-product-label { margin-top: 18px; }

.ed-framing { margin-bottom: 18px; }
.ed-rendition-list { display: flex; flex-direction: column; gap: 6px; }
.ed-rendition {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); cursor: pointer;
}
.ed-rendition:hover { border-color: var(--muted-2); background: #faf8f3; }
.ed-rendition.unused { opacity: 0.4; }
.ed-swatch {
  width: 28px; height: 28px; border-radius: var(--r-sm); flex: none;
  object-fit: cover; background: #eceae3; border: 1px solid var(--line);
}
.ed-rendition-text { display: flex; flex-direction: column; min-width: 0; }
.ed-rendition-name { font: 600 12px system-ui; color: var(--ink); }
.ed-rendition-ratio { font-size: 11px; color: var(--muted-2); }
.ed-adjusted { color: var(--ok); font-weight: 600; }

/* B2 — RIGHT column */
.card.editor-card .card-body.ed-right {
  padding: 18px 22px; display: flex; flex-direction: column; gap: 0;
}
.ed-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.ed-tab {
  padding: 8px 16px; border: none; border-radius: 9px; cursor: pointer;
  font: 600 13px system-ui; color: var(--label); background: transparent;
}
.ed-tab:hover { background: #faf8f3; }
.ed-tab.active { background: var(--accent); color: #fff; }
.ed-tab.disabled { color: var(--muted-2); }
.ed-tab.disabled.active { background: transparent; color: var(--muted-2); }

.ed-disabled-note {
  border: 1px dashed var(--line); border-radius: var(--r-lg); padding: 24px;
  text-align: center; font-size: 13px; color: var(--muted); background: var(--card);
}
.ed-panel { display: flex; gap: 20px; align-items: flex-start; }
.ed-caption-col { flex: 1; min-width: 0; }
.ed-field-label { margin: 0 0 6px; font: 600 12px system-ui; color: var(--label); }
.ed-field-label + textarea, .ed-field-label + input,
.ed-caption-col textarea, .ed-caption-col input {
  margin-top: 0; margin-bottom: 12px;
}
.ed-caption-col textarea { min-height: 100px; line-height: 1.5; overflow: hidden; resize: none; }
.ed-char-meta { margin: 0; font-size: 11.5px; color: var(--muted-2); }
.ed-char-meta.over { color: var(--danger); }

.ed-preview-col { width: 220px; flex: none; }
/* Holds the real per-platform preview (a .pv built by PREVIEW_BUILDERS), which
   brings its own card frame — so this is just a transparent container. */
.ed-preview { display: flex; }
.ed-preview .pv { width: 100%; }
.ed-preview:empty,
.ed-preview:not(:has(.pv)) {
  background: var(--card); border: 1px solid #e2e2e2; border-radius: var(--r-lg);
  padding: 10px; font-size: 12px; color: var(--muted);
}
.ed-pv-head { display: flex; align-items: center; gap: 8px; padding: 9px 10px; }
.ed-pv-avatar {
  width: 22px; height: 22px; border-radius: 50%; flex: none; color: #fff;
  display: flex; align-items: center; justify-content: center; font: 650 11px system-ui;
}
.ed-pv-handle { font: 600 12px system-ui; color: #111; }
.ed-pv-img { display: block; width: 100%; height: 150px; object-fit: cover; background: #eceae3; }
.ed-pv-caption { margin: 0; padding: 8px 10px; font-size: 11.5px; line-height: 1.4; color: #111; }

.card.editor-card .card-actions { margin-top: 18px; }

@media (max-width: 760px) {
  .card.editor-card { grid-template-columns: 1fr; }
  .ed-left { border-right: none; border-bottom: 1px solid var(--line); }
  .ed-panel { flex-direction: column; }
  .ed-preview-col { width: 100%; }
}

/* ---------- shared accessibility and input safety ---------- */
:is(
  a[href],
  button,
  input,
  select,
  textarea,
  summary,
  [role="button"],
  [role="tab"],
  [tabindex]:not([tabindex="-1"])
):focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

#main-content:focus-visible {
  outline-offset: -4px;
}

@media (pointer: coarse), (max-width: 720px) {
  button,
  select,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  [role="button"],
  [role="tab"] {
    min-height: 44px;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .toast-dismiss {
    min-width: 44px;
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- brand assets, logo placement, and post location ---------- */
.brand-logo-upload {
  display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, .8fr) minmax(170px, .8fr) auto;
  gap: 8px; align-items: center; margin: 10px 0 12px;
}
.brand-logo-list { display: flex; flex-direction: column; gap: 7px; }
.brand-logo-card {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center;
  gap: 12px; padding: 9px; border: 1px solid var(--line); border-radius: var(--r-md);
}
.brand-logo-card.archived { opacity: .72; background: #f7f5f1; }
.brand-logo-thumb, .logo-choice-preview {
  display: grid; place-items: center; background: linear-gradient(135deg, #ece9e3 25%, #fff 25%, #fff 50%, #ece9e3 50%, #ece9e3 75%, #fff 75%);
  background-size: 16px 16px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden;
}
.brand-logo-thumb { width: 70px; height: 52px; }
.brand-logo-thumb img { max-width: 88%; max-height: 88%; }
.brand-logo-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand-logo-info small { color: var(--muted); }
.settings-brand > h4 { margin: 20px 0 5px; }

.logo-editor-modal { width: min(960px, calc(100vw - 28px)); }
.logo-editor-body { display: grid; grid-template-columns: minmax(300px, 1.35fr) minmax(250px, .75fr); gap: 18px; margin-top: 14px; }
.logo-stage { position: relative; overflow: hidden; background: #e7e3dc; border-radius: var(--r-md); }
.logo-stage-photo { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; object-position: top; }
.logo-stage-mark { position: absolute; height: auto; cursor: grab; touch-action: none; user-select: none; }
.logo-stage-mark:active { cursor: grabbing; }
.logo-editor-controls { display: flex; flex-direction: column; gap: 13px; }
.logo-editor-controls > label { display: flex; flex-direction: column; gap: 6px; font: 600 12px system-ui; }
.logo-picker { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.logo-choice {
  display: grid; grid-template-columns: 58px 1fr; gap: 9px; align-items: center; padding: 7px;
  text-align: left; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink);
}
.logo-choice.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.logo-choice-preview { width: 58px; height: 42px; }
.logo-choice-preview img { max-width: 88%; max-height: 88%; }
.logo-choice > span:last-child { display: flex; flex-direction: column; gap: 3px; font-weight: 650; }
.logo-choice small { color: var(--muted); font-weight: 500; }
.ed-location { margin-top: 14px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md); }
.ed-location > label { display: flex; align-items: stretch; flex-direction: column; gap: 7px; }
.ed-location select { width: 100%; min-width: 0; }
.ed-location-fields { display: grid; gap: 7px; margin-top: 9px; }
.ed-location-fields > label { display: grid; gap: 5px; color: var(--label); font: 650 12.5px system-ui; }
.ed-location .ed-micro { margin: 8px 0 0; }

@media (max-width: 760px) {
  .brand-logo-upload { grid-template-columns: 1fr; }
  .brand-logo-card { grid-template-columns: 58px minmax(0, 1fr); }
  .brand-logo-card .store-manage-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .brand-logo-thumb { width: 58px; height: 46px; }
  .logo-editor-body { grid-template-columns: 1fr; }
}

/* ---------- EDM Studio: distinct email canvas, existing controls ---------- */
.edm-toolbar { display: flex; justify-content: flex-end; margin: 8px 0 12px; font: 500 12px system-ui; color: var(--muted); }
.edm-toolbar label, .edm-check { display: flex; align-items: center; gap: 7px; }
.edm-list { display: flex; flex-direction: column; gap: 8px; }
.edm-row { width: 100%; display: grid; grid-template-columns: 92px minmax(0,1fr) auto; gap: 14px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); color: var(--ink); text-align: left; cursor: pointer; }
.edm-row:hover { border-color: var(--muted-2); box-shadow: var(--shadow-sm); }
.edm-row > img, .edm-row-placeholder { width: 92px; height: 60px; object-fit: cover; border-radius: var(--r-sm); background: #eee9df; }
.edm-row-placeholder { display: grid; place-items: center; font: 700 11px system-ui; color: var(--muted); }
.edm-row-copy { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.edm-row-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 14px system-ui; }
.edm-row-copy small { color: var(--muted); font: 500 11px system-ui; }
.edm-loading { min-height: 180px; display: grid; place-items: center; color: var(--muted); font: 600 13px system-ui; }
.edm-work-head { display: flex; align-items: center; gap: 12px; padding: 10px 0 18px; border-bottom: 1px solid var(--line); }
.edm-work-head > div { display: flex; flex-direction: column; gap: 3px; }
.edm-work-head strong { font: 700 15px system-ui; }
.edm-work-head small { font: 500 11px system-ui; color: var(--muted); text-transform: capitalize; }
.edm-steps { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; }
.edm-panel { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); padding: 18px; }
.edm-panel.edm-disabled { opacity: .66; }
.edm-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.edm-panel-head > div { display: flex; align-items: center; gap: 9px; }
.edm-panel-head h3 { margin: 0; font: 700 15px system-ui; }
.edm-panel-head > button { margin-left: auto; }
.edm-step-number { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 999px; background: var(--ink); color: white; font: 700 11px system-ui; }
.edm-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.edm-field { display: flex; flex-direction: column; gap: 6px; font: 600 11px system-ui; color: var(--ink-soft); }
.edm-field-wide { grid-column: 1 / -1; }
.edm-field input, .edm-field textarea, .edm-field select, .edm-catalog-search input {
  width: 100%; box-sizing: border-box; margin: 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--input-bg);
  color: var(--ink); font: 500 13.5px system-ui;
}
.edm-field input:focus, .edm-field textarea:focus, .edm-field select:focus, .edm-catalog-search input:focus { outline: 2px solid rgba(38,43,51,.15); border-color: var(--accent); }
.edm-field textarea { min-height: 92px; resize: vertical; }
.edm-check { grid-column: 1 / -1; font: 600 12px system-ui; color: var(--ink-soft); padding: 3px 0; }
.edm-section-composer { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.edm-subhead { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.edm-subhead > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.edm-subhead strong { font: 700 13px system-ui; }
.edm-subhead span { color: var(--muted); font: 500 11.5px/1.4 system-ui; }
.edm-subhead-actions { display: flex; gap: 7px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.edm-section-list { display: flex; flex-direction: column; gap: 10px; }
.edm-section-empty { min-height: 104px; display: grid; place-content: center; gap: 5px; padding: 18px; text-align: center; border: 1px dashed var(--line); border-radius: var(--r); background: var(--input-bg); }
.edm-section-empty strong { font: 700 13px system-ui; }
.edm-section-empty span { color: var(--muted); font: 500 12px/1.5 system-ui; }
.edm-content-section { padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--input-bg); }
.edm-section-head { display: flex; align-items: center; gap: 9px; margin-bottom: 13px; }
.edm-section-head > img, .edm-section-placeholder { width: 58px; height: 58px; flex: none; object-fit: cover; border-radius: var(--r); background: #ece7dd; }
.edm-section-placeholder { display: grid; place-items: center; color: var(--muted); font: 700 18px system-ui; }
.edm-section-head > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.edm-section-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 13px system-ui; }
.edm-section-head small { color: var(--muted); font: 500 11px system-ui; }
.edm-section-head button { padding: 7px 10px; }
.edm-section-head .badge { align-self: flex-start; text-transform: capitalize; }
.edm-assets { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--line); }
.edm-assets-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; font: 700 12px system-ui; }
.edm-assets-head > div:first-child { display: flex; flex-direction: column; gap: 4px; }
.edm-assets-head > div:first-child > span { color: var(--muted); font: 500 11.5px/1.4 system-ui; }
.edm-assets-actions { display: flex; align-items: center; justify-content: flex-end; gap: 7px; flex-wrap: wrap; }
.edm-assets-actions .button-link { display: inline-flex; align-items: center; justify-content: center; }
.edm-asset-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 8px; }
.edm-asset-grid > .edm-section-empty { grid-column: 1 / -1; }
.edm-asset-grid img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-sm); border: 1px solid var(--line); }
.edm-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.edm-brief-result { margin-top: 16px; padding: 15px; background: #f8f6f1; border-radius: var(--r-sm); border-left: 3px solid var(--accent); }
.edm-brief-result strong { font: 700 14px system-ui; }
.edm-brief-result p, .edm-brief-result dl { font: 400 12.5px/1.5 system-ui; color: var(--ink-soft); }
.edm-brief-result dl { display: grid; grid-template-columns: 100px 1fr; gap: 5px 12px; margin-bottom: 0; }
.edm-brief-result dt { font-weight: 700; }
.edm-brief-result dd { margin: 0; }
.edm-hero { display: block; width: min(100%, 760px); margin: 16px auto 0; border-radius: var(--r-sm); }
.edm-hero-requirement { margin: 12px 0 0; color: var(--danger); }
.edm-hero-requirement.ready { color: var(--ok); }
.edm-preview-frame { width: min(100%, 650px); margin: 18px auto 0; padding: 12px; background: #e9e9e9; border-radius: var(--r-md); }
.edm-preview-frame iframe { display: block; width: 100%; height: 720px; border: 0; background: white; }
.toast { overflow-wrap: anywhere; word-break: break-word; }
.edm-library-picker-body { min-height: 180px; }
.edm-library-picker-body .mp-grid { max-height: 50vh; }
.edm-library-picker-body .request-empty { min-height: 180px; }
.edm-shopify-picker { width: min(94vw, 900px); }
.edm-catalog-search { display: flex; gap: 8px; margin: 12px 0; }
.edm-catalog-search input { margin: 0; }
.edm-catalog-body { min-height: 260px; max-height: 58vh; overflow: auto; }
.edm-catalog-partial { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; }
.edm-catalog-partial span { flex: 1; }
.edm-catalog-partial button { flex: 0 0 auto; }
.edm-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap: 9px; }
.edm-catalog-tile { position: relative; display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-align: left; }
.edm-catalog-tile.selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.edm-catalog-tile > img, .edm-catalog-placeholder { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r); background: var(--input-bg); }
.edm-catalog-placeholder { display: grid; place-items: center; color: var(--muted); font: 600 11px system-ui; }
.edm-catalog-tile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 12px system-ui; }
.edm-catalog-tile small { color: var(--muted); font: 500 11px system-ui; }
.edm-catalog-tile .badge { position: absolute; z-index: 1; top: 14px; left: 14px; text-transform: capitalize; }

@media (max-width: 760px) {
  .edm-row { grid-template-columns: 72px minmax(0,1fr); }
  .edm-row > img, .edm-row-placeholder { width: 72px; height: 54px; }
  .edm-row > .badge { grid-column: 2; justify-self: start; }
  .edm-work-head { align-items: flex-start; flex-wrap: wrap; }
  .edm-work-head .spacer { display: none; }
  .edm-work-head .danger { margin-left: auto; }
  .edm-assets-head { align-items: flex-start; flex-direction: column; }
  .edm-assets-actions { width: 100%; justify-content: stretch; }
  .edm-assets-actions > button, .edm-assets-actions > label { flex: 1; }
  .edm-subhead { flex-direction: column; }
  .edm-subhead-actions { width: 100%; margin-left: 0; justify-content: stretch; }
  .edm-subhead-actions > button { flex: 1; }
  .edm-section-head { display: grid; grid-template-columns: 58px minmax(0,1fr) auto auto; align-items: start; }
  .edm-section-head > img, .edm-section-head > .edm-section-placeholder { grid-column: 1; grid-row: 1; }
  .edm-section-head > div { grid-column: 2 / -1; grid-row: 1; }
  .edm-section-head .spacer { display: none; }
  .edm-section-head .edm-section-up { grid-column: 2; grid-row: 2; justify-self: start; }
  .edm-section-head .edm-section-down { grid-column: 3; grid-row: 2; }
  .edm-section-head .edm-section-remove { grid-column: 4; grid-row: 2; }
  .edm-catalog-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .edm-catalog-partial { align-items: stretch; flex-direction: column; }
  .edm-panel { padding: 14px 12px; }
  .edm-panel-head { align-items: flex-start; flex-wrap: wrap; }
  .edm-panel-head > button { margin-left: 34px; }
  .edm-form-grid { grid-template-columns: 1fr; }
  .edm-field-wide, .edm-check { grid-column: auto; }
  .edm-preview-frame { padding: 5px; overflow: hidden; }
  .edm-preview-frame iframe { height: 620px; }
}

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.card-media { position: relative; background: #eceae3; height: 300px; overflow: hidden; }
/* The whole photo is always visible (portrait shows tall, landscape wide);
   a blurred copy of itself fills the space around it. */
.thumb-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(22px) brightness(0.85) saturate(1.1);
  transform: scale(1.15);
}
.thumb { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }

/* Shared thumbnail frame (dom.js thumbFrame): the whole image is contained and
   a blurred copy of itself fills the space around it — no cropping. Used on the
   calendar, pipeline, schedule list and Today rows. Give it a size where used. */
.thumb-frame { position: relative; display: block; overflow: hidden; background: #eceae3; }
.thumb-frame .tf-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(14px) brightness(0.9) saturate(1.1);
  transform: scale(1.15);
}
.thumb-frame .tf-img { position: relative; width: 100%; height: 100%; object-fit: contain; display: block; }
.thumb-frame .tf-fallback {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  padding: 8px; background: #29252f; color: #fff; text-align: center;
  font: 650 11px/1.25 system-ui;
}
.thumb-frame.thumb-frame-error .tf-bg,
.thumb-frame.thumb-frame-error .tf-img { display: none; }
.thumb-frame.thumb-frame-error .tf-fallback { display: flex; }
.ed-video-fallback {
  display: none; position: absolute; inset: 0; align-items: center; justify-content: center;
  flex-direction: column; gap: 8px; background: #29252f; color: #fff;
}
.ed-video-fallback strong { font: 700 34px system-ui; }
.ed-video-fallback span { font: 650 12px system-ui; }
.ed-video-preview-error .thumb,
.ed-video-preview-error .thumb-bg { display: none; }
.ed-video-preview-error .ed-video-fallback { display: flex; }
.video-manual-note {
  margin: 0; padding: 9px 11px; border: 1px solid var(--status-flagged);
  border-radius: var(--r); background: var(--status-flagged-bg); color: var(--status-flagged);
}
.badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; }
.badge {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--ink);
}
.badge.status[data-status="review"] { background: var(--status-review-bg); color: var(--status-review); }
.badge.status[data-status="flagged"] { background: var(--status-flagged-bg); color: var(--status-flagged); }
.badge.status[data-status="approved"] { background: var(--status-ok-bg); color: var(--status-ok); }
.badge.status[data-status="new"] { background: var(--status-waiting-bg); color: var(--status-waiting); }
.badge.status[data-status="error"] { background: var(--danger); color: #fff; }
.badge.status[data-status="generating"] { background: var(--status-review-bg); color: var(--status-review); }
.badge.status[data-status="skipped"] { background: var(--status-skipped-bg); color: var(--status-skipped); }

.card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 10px; }
.analysis-line { margin: 0; font-size: 13px; color: var(--muted); }
.quality-issues { margin: 0; font-size: 13px; color: var(--danger); }
.error-line { margin: 0; font-size: 13px; color: var(--danger); }
.hidden { display: none !important; }

details { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
details + details { margin-top: 8px; }
summary { cursor: pointer; font-weight: 600; font-size: 13.5px; }
textarea, input[type="text"], .f-pin-title {
  width: 100%; margin-top: 8px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--line); border-radius: var(--r); padding: 8px 10px;
  resize: vertical; background: var(--input-bg);
}
textarea:focus, input:focus { outline: 2px solid rgba(38, 43, 51, 0.15); border-color: var(--accent); }

.link-row .f-link {
  width: 100%; font: inherit; font-size: 13px; padding: 8px 10px; margin: 0;
  border: 1px dashed var(--line); border-radius: 8px; background: #fdfcf9;
}
.link-row .f-link:not(:placeholder-shown) { border-style: solid; }
.link-note { margin: 6px 2px 0; font-size: 12px; color: var(--muted); }
.link-note.used { color: var(--ok); }

.card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.save-note { font-size: 12px; color: var(--ok); }
.approval-consequence { flex-basis: 100%; color: var(--muted); font-size: 12px; line-height: 1.4; }
.pub-state { color: var(--muted); font-size: 13px; line-height: 1.45; }
.pub-state-error { color: var(--danger); margin-bottom: 10px; }

/* --- platform crop previews --- */
.crop-section { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.crop-hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted); }
.crop-hint strong { color: var(--ink); font-weight: 600; }
.crop-strip { display: flex; gap: 10px; align-items: flex-end; overflow-x: auto; padding-bottom: 4px; }
.crop-item { flex: 0 0 auto; text-align: center; cursor: pointer; border: none; background: none; padding: 0; }
.crop-item img {
  display: block; height: 96px; width: auto; border-radius: 6px;
  border: 1px solid var(--line); background: #eceae3;
}
.crop-item:hover img { outline: 2px solid var(--gold); }
.crop-item .crop-label { display: block; font-size: 11px; margin-top: 4px; color: var(--ink); }
.crop-item .crop-dims { display: block; font-size: 10px; color: var(--muted); }
.crop-item .crop-custom { display: block; font-size: 10px; color: var(--gold); font-weight: 600; }
.crop-item .crop-used { display: block; font-size: 10px; color: var(--accent); font-weight: 600; }

/* --- reframe dialog --- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(20, 20, 16, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50;
}
.modal {
  background: var(--card); border-radius: 16px; padding: 20px 22px;
  max-width: min(92vw, 720px); max-height: 92vh; overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.modal h2 { margin: 0 0 4px; font-size: 17px; }
.modal-hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
#crop-viewport {
  position: relative; overflow: hidden; border-radius: 10px; margin: 0 auto;
  background: #eceae3; cursor: grab; touch-action: none;
  outline: 1px solid var(--line);
}
#crop-viewport.dragging { cursor: grabbing; }
#crop-image { position: absolute; top: 0; left: 0; max-width: none; user-select: none; pointer-events: none; }
.modal-actions { display: flex; gap: 8px; margin-top: 14px; align-items: center; }
.modal-actions .spacer { flex: 1; }

/* --- login --- */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 32px 34px; width: min(92vw, 400px);
}
.login-card h1 { color: var(--ink); font-size: 22px; margin: 0 0 18px; }
.login-card h2 { font-size: 16px; margin: 0 0 12px; }
.login-field { display: block; margin-bottom: 10px; color: var(--ink); font-size: 13px; font-weight: 600; }
.login-field span { display: block; margin-bottom: 5px; }
.login-field small { color: var(--muted); font-size: inherit; font-weight: 400; }
.login-card input {
  width: 100%; font: inherit; font-size: 14px; padding: 10px 12px; margin: 0;
  border: 1px solid var(--line); border-radius: 9px; background: #fdfcf9;
}
.login-card button { width: 100%; padding: 10px; font-size: 14px; }
.login-card form > button + button, .login-retry { margin-top: 8px; }
.login-hint { font-size: 13px; color: var(--muted); margin: 0 0 12px; }

/* --- post previews --- */
.preview-modal { width: min(92vw, 620px); }
#preview-tabs { margin-bottom: 14px; }
#preview-body { display: flex; justify-content: center; }
.pv {
  background: #fff; border: 1px solid #e2e2e2; border-radius: 12px;
  overflow: hidden; font-family: -apple-system, "Helvetica Neue", Segoe UI, sans-serif;
}
.pv img { display: block; width: 100%; }
.pv-video { display: block; width: 100%; background: #000; max-height: 70vh; }
.pv-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--accent);
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; flex: 0 0 auto;
}
.pv-icons { display: flex; gap: 16px; color: #222; }
.pv-icons svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Instagram */
.pv-instagram { width: 380px; max-width: 100%; }
.pv-instagram .pv-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.pv-instagram .pv-name { font-weight: 600; font-size: 13.5px; color: #111; }
.pv-instagram .pv-actions { display: flex; justify-content: space-between; padding: 10px 12px 4px; }
.pv-instagram .pv-caption { padding: 2px 12px 14px; font-size: 13.5px; color: #111; line-height: 1.45; }
.pv-instagram .pv-caption b { font-weight: 600; }
.ig-more { color: #8e8e8e; cursor: pointer; }
.ig-tags { color: #00376b; }

/* Facebook */
.pv-facebook { width: 500px; max-width: 100%; }
.pv-facebook .pv-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.pv-facebook .pv-name { font-weight: 600; font-size: 14.5px; color: #050505; }
.pv-facebook .pv-meta { font-size: 12px; color: #65676b; }
.pv-facebook .pv-text { padding: 2px 14px 12px; font-size: 14.5px; color: #050505; line-height: 1.45; white-space: pre-wrap; }
.pv-facebook .pv-bar {
  display: flex; justify-content: space-around; border-top: 1px solid #e4e6eb;
  padding: 8px 0; color: #65676b; font-size: 13.5px; font-weight: 600;
}
.pv-facebook .pv-bar span { display: flex; align-items: center; gap: 6px; }
.pv-facebook .pv-bar svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* Pinterest */
.pv-pinterest { width: 300px; max-width: 100%; border: none; background: none; }
.pv-pinterest img { border-radius: 16px; border: 1px solid #e2e2e2; }
.pv-pinterest .pv-title { font-weight: 600; font-size: 14.5px; color: #111; margin: 10px 2px 4px; }
.pv-pinterest .pv-desc { font-size: 12.5px; color: #5f5f5f; margin: 0 2px 8px; line-height: 1.4; }
.pv-pinterest .pv-head { display: flex; align-items: center; gap: 8px; margin: 0 2px; }
.pv-pinterest .pv-name { font-size: 13px; color: #111; }

/* X */
.pv-x { width: 500px; max-width: 100%; padding: 12px 14px; }
.pv-x .pv-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.pv-x .pv-name { font-weight: 700; font-size: 14.5px; color: #0f1419; }
.pv-x .pv-handle { font-size: 13.5px; color: #536471; }
.pv-x .pv-text { font-size: 14.5px; color: #0f1419; line-height: 1.45; margin: 0 0 10px; white-space: pre-wrap; }
.pv-x img { border-radius: 16px; border: 1px solid #e2e2e2; }
.pv-x .pv-icons { justify-content: space-between; margin-top: 10px; color: #536471; max-width: 360px; }
.pv-x .pv-icons svg { width: 18px; height: 18px; }
.pv-count { text-align: center; font-size: 12px; color: var(--muted); margin-top: 10px; }
.pv-count.over { color: var(--danger); font-weight: 600; }

/* --- settings --- */
.settings-modal { width: min(92vw, 720px); }
#settings-tabs { margin-bottom: 12px; }
.settings-brand { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 12px; }
.seg { display: inline-flex; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 2px; }
.seg-btn { border: none; background: none; color: var(--label); border-radius: 6px; padding: 6px 16px; font: 600 12.5px system-ui; cursor: pointer; }
.seg-btn:hover { background: var(--input-bg); }
.seg-btn.active { background: var(--accent); color: #fff; }
.settings-brand textarea { font: inherit; font-size: 13.5px; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; background: var(--input-bg); resize: vertical; }
.settings-brand h3 { margin: 0 0 10px; font-size: 14.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Brand guidelines: collapsible per-store, stacked full-width fields. */
.guide-brand > summary { font: 650 14.5px system-ui; cursor: pointer; padding: 2px 0; list-style: revert; }
.guide-brand[open] > summary { margin-bottom: 12px; }
.guide-field { margin-bottom: 14px; }
.guide-field > label { display: block; font: 600 13px system-ui; margin-bottom: 4px; color: var(--ink); }
.guide-field .guide-hint { margin: 0 0 5px; font-size: 12px; }
.guide-field input[type="text"], .guide-field input[type="number"] {
  font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--input-bg); width: 100%; max-width: 520px;
}
.guide-field textarea { width: 100%; max-width: 520px; }
.guide-actions { margin-top: 4px; gap: 8px; }

.settings-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.settings-row label { width: 170px; font-size: 13.5px; flex: 0 0 auto; }
.settings-row select, .settings-row input[type="text"], .settings-row input[type="email"],
.settings-row input[type="password"], .settings-row input[type="number"] {
  font: inherit; font-size: 13.5px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fdfcf9; flex: 1; max-width: 320px; margin: 0;
}

.ai-provider-status { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 8px 0 12px; font-size: 12.5px; color: var(--muted); }
.ai-provider-card .store-manage-actions { margin: 8px 0 0; }
.ai-inline-feedback { min-height: 18px; margin: 7px 0 0; }
.ai-model-note { margin: -2px 0 12px 180px; }
.ai-cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 10px 0 14px; }
.ai-cost-tile { border: 1px solid var(--line); border-radius: 9px; padding: 10px; display: flex; flex-direction: column; gap: 3px; }
.ai-cost-tile > span { color: var(--muted); font-size: 12px; }
.ai-cost-tile > strong { color: var(--ink); font-size: 20px; }
.ai-cost-tile > small { color: var(--muted-2); }
.ai-cost-tile.warning { border-color: #d5a33a; }
.ai-cost-tile.exceeded { border-color: var(--danger); }
.ai-budget-meter { height: 4px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 5px; }
.ai-budget-meter i { display: block; height: 100%; background: var(--accent); }
.ai-cost-tile.warning .ai-budget-meter i { background: #c68a15; }
.ai-cost-tile.exceeded .ai-budget-meter i { background: var(--danger); }
.ai-usage-table { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.ai-usage-table > div { display: grid; grid-template-columns: 100px minmax(150px, 1fr) 80px 110px; gap: 8px; padding: 8px 10px; font-size: 12.5px; border-top: 1px solid var(--line); }
.ai-usage-table > div:first-child { border-top: 0; }
.ai-usage-head { color: var(--muted); background: var(--input-bg); font-weight: 650; }
.settings-row input[type="time"] {
  font: inherit; font-size: 13.5px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 8px; background: #fdfcf9;
}

/* posting schedule day toggles */
.sched-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.day-toggles { display: inline-flex; gap: 4px; }
.day-toggle {
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--card); font-size: 12px; font-weight: 600;
  color: var(--muted);
}
.day-toggle.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* connections */
.conn-status {
  font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
  background: #eee; color: var(--muted);
}
.conn-status.partial { background: #fdf3d7; color: #7a6420; }
.conn-status.ok { background: #dcead9; color: var(--ok); }
.conn-status.danger { background: var(--status-flagged-bg); color: var(--status-flagged); }
.conn-guide { margin-top: 10px; border: none; padding: 0; }
.conn-guide summary { color: var(--accent); font-size: 13px; }
.conn-guide ol { margin: 8px 0 4px; padding-left: 20px; font-size: 13px; color: var(--ink); }
.conn-guide li { margin-bottom: 6px; line-height: 1.45; }

/* users — label stretches, action buttons sit in one right-aligned group so
   rows with different numbers of buttons still line up. */
.user-row { justify-content: flex-start; gap: 10px; }
.account-toggle-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
.user-label { font-size: 13.5px; flex: 1; min-width: 0; }
.user-actions { display: flex; gap: 6px; flex: none; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.user-email { color: var(--muted); margin-left: 6px; }
.user-role {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px;
  background: #e4e9ef; border-radius: 999px; padding: 2px 8px; margin-left: 8px;
}
.user-keys { font-size: 11.5px; color: var(--muted); margin-left: 8px; white-space: nowrap; }
.login-passkey { width: 100%; margin-top: 8px; }
#enroll-passkey button { width: 100%; margin-top: 10px; }

/* ---------- mobile (one system, two densities) ---------- */
@media (max-width: 720px) {
  .toast-region { right: 10px; bottom: 88px; width: calc(100vw - 20px); }
  .app-shell { display: block; }
  /* nav rail becomes a bottom tab bar */
  .rail, .rail.collapsed {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto; z-index: 40;
    width: auto; height: auto; flex-direction: row; padding: 6px 4px 4px;
    border-right: none; border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(31, 29, 25, 0.05);
  }
  .rail-head, .rail-fill, .rail-user { display: none; }
  .rail-nav { flex-direction: row; flex: 1; gap: 0; }
  .rail-item.mobile-secondary { display: none; }
  .mobile-more-trigger { display: flex; }
  .rail-item { flex: 1; flex-direction: column; gap: 3px; justify-content: center; padding: 7px 0; font: 600 10.5px system-ui; }
  .rail-item .rail-label { display: block !important; }
  .rail-item.active { background: none; color: var(--accent); }
  .rail-item:hover { background: none; }
  .rail-icon, .rail-icon svg { width: 22px; height: 22px; }

  .mobile-more-menu {
    display: grid; position: fixed; z-index: 45; right: 10px; bottom: 72px;
    width: min(280px, calc(100vw - 20px)); padding: 8px;
    background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
    box-shadow: 0 12px 32px rgba(31, 29, 25, 0.18);
  }
  .mobile-more-menu.hidden { display: none; }
  .mobile-more-menu button {
    width: 100%; padding: 11px 12px; border: none; border-radius: var(--r-sm);
    background: transparent; color: var(--ink); text-align: left;
  }
  .mobile-more-menu button:hover, .mobile-more-menu button:focus-visible { background: #f5f2ea; }
  .mobile-more-user { padding: 8px 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
  .mobile-more-name { font: 650 13px system-ui; color: var(--ink); }
  .mobile-more-role { margin-top: 2px; font: 11px system-ui; color: var(--muted); text-transform: capitalize; }
  .mobile-more-menu .mobile-more-signout {
    margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; color: var(--danger);
  }

  .app-main { padding: 16px 14px 78px; max-width: none; }
  .plan-switcher { display: flex; width: 100%; }
  .plan-switcher a { flex: 1; justify-content: center; min-height: 44px; }
  .plan-empty { align-items: flex-start; flex-direction: column; }
  .plan-state-actions { width: 100%; flex-wrap: wrap; }
  .plan-state-actions > * { min-height: 44px; flex: 1; justify-content: center; }
  .planner-hero > .button-link { margin: 8px 0 0; min-height: 44px; }

  #view-library .screen-head { flex-wrap: wrap; align-items: center; }
  .today-top { flex-wrap: wrap; }
  .today-top .actions { flex-wrap: wrap; }
  .today-stats { gap: 8px; }
  .onboarding-steps { grid-template-columns: 1fr 1fr; }
  .initial-onboarding .app-main { padding: 0 0 32px; }
  .installation-card { border: none; border-radius: 0; box-shadow: none; }
  .installation-head { padding: 24px 18px 19px; }
  .installation-progress { padding: 14px 18px; }
  .installation-progress li { flex-direction: column; align-items: flex-start; gap: 5px; font-size: 11px; }
  .installation-body { padding: 23px 18px 28px; }
  .installation-field input,
  .installation-field select,
  .installation-field textarea { min-height: 44px; }
  .installation-actions { flex-direction: column-reverse; }
  .installation-actions button { width: 100%; min-height: 44px; }
  .settings-layout { display: block; }
  .settings-tabs { display: none; }
  .settings-select-label { display: block; margin-top: 0; }
  .settings-select {
    display: block; min-height: 44px; padding: 9px 36px 9px 11px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--input-bg);
    color: var(--ink); font: 600 14px system-ui;
  }
  .readiness-notice { margin: 8px 0 0; }
  .readiness-notice summary { min-height: 44px; }
  .readiness-item { align-items: flex-start; flex-wrap: wrap; }
  .readiness-action, .readiness-admin-note { margin-left: 0; }
  .store-manage-row { align-items: flex-start; }
  .store-edit-panel .settings-row { display: block; }
  .store-edit-panel .settings-row label { display: block; width: auto; margin-bottom: 5px; }
  .store-edit-panel .settings-row input,
  .store-edit-panel .settings-row select,
  .store-edit-panel .settings-row textarea { width: 100%; max-width: none; }
  .ai-provider-card .settings-row,
  .ai-budget-form .settings-row { display: block; }
  .ai-provider-card .settings-row label,
  .ai-budget-form .settings-row label { display: block; width: auto; margin-bottom: 5px; }
  .ai-provider-card .settings-row input,
  .ai-budget-form .settings-row input { width: 100%; max-width: none; }
  .ai-model-note { margin-left: 0; }
  .ai-cost-summary { grid-template-columns: 1fr; }
  .ai-usage-table { overflow-x: auto; }
  .ai-usage-table > div { min-width: 520px; }
  .store-edit-actions { justify-content: stretch; }
  .store-edit-actions button { flex: 1; scroll-margin-bottom: 92px; }
  .stat-card { min-width: 0; padding: 10px 12px; }
  .stat-n { font-size: 20px; }

  .topbar { display: block; }
  .topbar-filters { flex-direction: column; align-items: stretch; gap: 8px; }
  #brand-tabs, #status-tabs, .lib-brand-chips, .lib-source-chips, .lib-filters, #cal-brand-chips {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scroll-snap-type: x proximity;
  }
  .lib-source-chips > *, .lib-brand-chips > *, .lib-filters > * { flex: none; scroll-snap-align: start; }

  main { grid-template-columns: 1fr; }
  .lib-grid { grid-template-columns: repeat(2, 1fr); }
  .lib-product-search { max-width: none; }
  .product-picker-head { flex-direction: column; gap: 8px; }
  .product-image-grid { grid-template-columns: repeat(2, 1fr); }
  .animation-builder-body { grid-template-columns: 1fr; }
  .animation-builder-head, .animation-detail-head { align-items: flex-start; }
  .animation-field { grid-template-columns: 112px minmax(0, 1fr); }
  .animation-output-field { grid-template-columns: 112px minmax(0, 1fr); }
  .animation-member { flex-basis: 88px; height: 112px; }
  .create-outputs-head { align-items: flex-start; }
  .create-output-result { align-items: flex-start; flex-wrap: wrap; }
  .create-output-result button { width: 100%; }
  .create-output-actions .spacer { display: none; }
  .create-output-actions button { flex: 1 1 100%; }
  .animation-detail-stage { min-height: 220px; }
  /* Calendar on a phone: week rows + month grids scroll sideways as a unit. */
  .cal-grid { overflow-x: auto; }
  .cal-week { min-width: 680px; }
  .cal-mgrid { min-width: 560px; }
  .cal-col { min-height: auto; }
  .pipe-board { grid-template-columns: 1fr; }
  .pipe-col { min-height: auto; }

  .card.editor-card { grid-template-columns: 1fr; }
  .ed-left { border-right: none; border-bottom: 1px solid var(--line); }
  .card-media.ed-media { height: 200px; }
  .ed-panel { flex-direction: column; }
  .ed-preview-col { width: 100%; }
  .editor-wrap { max-width: none; }
  /* Top bar: drop the redundant Open folder / Regenerate (they're in the
     actions row below) so ← Queue + brand + status fit on a phone. */
  #view-post .editor-bar { flex-wrap: wrap; }
  .ed-bar-btn { display: none; }
  .ed-bar-spacer { display: none; }
  /* Bulk-action bar wraps instead of overflowing on a narrow screen. */
  .lib-selbar { flex-wrap: wrap; gap: 8px 12px; }
  .lib-selbar .spacer { flex-basis: 100%; height: 0; }
  .ed-tabs { flex-wrap: nowrap; overflow-x: auto; }
}

/* --- audit-fix additions --- */
.picker-modal { width: min(92vw, 360px); }
/* "Upload to which store?" chooser (window-wide drop with >1 store). */
.brand-choose { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 2px; }
.brand-choose-item {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  font: 600 14px system-ui; color: var(--ink); padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fdfcf9; cursor: pointer;
}
.brand-choose-item:hover { border-color: var(--muted-2); background: #fff; }
.brand-choose-item .brand-dot { width: 10px; height: 10px; }
.picker-modal .dt-input {
  width: 100%; font: inherit; font-size: 14px; padding: 9px 10px; margin: 4px 0 2px;
  border: 1px solid var(--line); border-radius: 9px; background: #fdfcf9;
}
/* Every stat card is a door to the view its number represents. */
.stat-card-link { cursor: pointer; }
.stat-card-link:hover { border-color: var(--muted-2); box-shadow: 0 2px 10px rgba(31, 29, 25, 0.06); }
.stat-card-alert { cursor: pointer; outline: 1px solid var(--status-error, #c0392b); }
.stat-card-alert:hover { background: #fdecea; }

/* Today's "didn't post" list — the failure, its reason, and the fix in one row. */
.fail-label { color: var(--status-error, #c0392b); margin: 14px 0 6px; }
.fail-row {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--status-error, #c0392b); border-radius: var(--r-md);
}
.fail-thumb { width: 52px; height: 52px; border-radius: 8px; flex: none; }
.fail-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fail-title {
  font: 600 13px system-ui; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fail-why { font: 500 12px system-ui; color: var(--status-error, #c0392b); line-height: 1.35; }
.fail-actions { display: flex; gap: 6px; flex: none; }

/* Zero-reach alarm — a warning (amber), distinct from the red "didn't post". */
.stat-card-warn { cursor: pointer; outline: 1px solid var(--status-review); }
.stat-card-warn:hover { background: var(--status-review-bg); }
.zero-label { color: var(--status-review); margin: 14px 0 6px; }
.zero-row { border-color: var(--status-review); }
.zero-why { color: var(--status-review); }

/* Coverage warnings — upcoming schedule slots the approved queue can't fill. */
.coverage-label { color: var(--status-review); margin: 14px 0 6px; }
.coverage-row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 6px; cursor: pointer;
  background: var(--status-review-bg); border: 1px solid var(--status-review);
  border-radius: var(--r-md); color: var(--ink); font: 600 13px system-ui;
}
.coverage-row:hover { filter: brightness(0.98); }
.coverage-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coverage-cta { flex: none; color: var(--status-review); font-weight: 700; }

/* Shoot list — admin-authored "please shoot X" prompts on Today. */
.shoot-head { margin: 14px 0 6px; }
.shoot-add {
  border: 1px dashed var(--line); background: none; color: var(--accent);
  border-radius: 8px; padding: 5px 11px; cursor: pointer; font: 600 13px system-ui;
  margin-bottom: 8px;
}
.shoot-add:hover { border-color: var(--accent); }
.shoot-empty { color: var(--muted, #6b7280); font: 400 13px system-ui; margin-bottom: 6px; }
.shoot-row {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--bg, #fff); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.shoot-body { flex: 1; min-width: 0; }
.shoot-title { font: 600 13px system-ui; color: var(--ink); }
.shoot-notes { font: 400 12px system-ui; color: var(--muted, #6b7280); margin-top: 2px; white-space: pre-wrap; }
.shoot-actions { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.btn-mini {
  border: 1px solid var(--line); background: none; color: var(--ink);
  border-radius: 8px; padding: 4px 9px; cursor: pointer; font: 600 12px system-ui;
}
.btn-mini:hover { border-color: var(--accent); }
.btn-mini-danger { color: var(--status-error, #c0392b); }
.btn-mini-danger:hover { border-color: var(--status-error, #c0392b); }

/* Evergreen markers — a proven creative the scheduler may recycle. */
.lib-evergreen {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font: 700 12px system-ui; color: #f7c948;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ed-bar-btn-on { border-color: #f7c948; color: #b8860b; }
/* Compact calendar banner variant. */
#cal-coverage {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 8px;
  min-height: 42px; overflow-x: auto; contain: layout paint;
  padding: 8px 2px 10px;
}
#cal-coverage.cal-coverage-empty { visibility: hidden; }
#cal-coverage > * { flex: none; }
.coverage-banner-head { font: 700 12px system-ui; color: var(--status-review); }
.coverage-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px;
  background: var(--status-review-bg); border: 1px solid var(--status-review);
  border-radius: 999px; font: 600 12px system-ui; color: var(--ink);
}

/* ---- Weekly digest card (feature 12) — Monday recap of last week per store ---- */
.digest-label { color: var(--accent); margin: 14px 0 6px; }
.digest-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.digest-card {
  flex: 1; min-width: 220px; background: var(--card);
  border: 1px solid var(--line); border-left: 3px solid var(--bc, var(--accent));
  border-radius: var(--r-lg); padding: 12px 14px;
}
.digest-head { display: flex; align-items: center; gap: 7px; font: 700 13px system-ui; color: var(--ink); }
.digest-stats { display: flex; gap: 16px; margin: 10px 0; }
.digest-n { font: 800 18px system-ui; color: var(--ink); line-height: 1.1; }
.digest-sl { font: 600 10.5px system-ui; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-2); }
.digest-best {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px; background: var(--bg); border: 1px solid var(--line);
  border-radius: var(--r-md); cursor: pointer;
}
.digest-best:hover { border-color: var(--muted-2); }
.digest-thumb { width: 44px; height: 44px; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.digest-best-info { min-width: 0; flex: 1; }
.digest-best-label { font: 700 10px system-ui; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); }
.digest-best-cap { font: 600 12.5px system-ui; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.digest-best-reach { font: 600 11.5px system-ui; color: var(--accent); }
.digest-nodata { font: 500 12px system-ui; color: var(--muted-2); padding: 6px 0; }
.lb-legend-note { font: 500 12px system-ui; color: var(--muted-2); margin: 4px 0 0; }

/* ---- NZ occasion overlay (feature 9) ---- */
.cal-occ-row { display: flex; flex-wrap: wrap; gap: 4px; }
.cal-occ-chip { margin: 2px 0 4px; }
.cal-occ-mini { margin: 1px 0 3px; }
.cal-occasion {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px;
  background: #f2efe6; color: var(--ink-soft); font: 650 10.5px system-ui; line-height: 1.5;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cal-occasion:hover { border-color: var(--accent); background: #e9e4d8; color: var(--ink); }
.cal-occ-mini .cal-occasion { padding: 0 5px; font-size: 12px; border-radius: var(--r-sm); }
.cal-occ-menu { padding-bottom: 2px; }
.cal-occ-head { padding: 8px 10px 2px; font: 700 12px system-ui; color: var(--ink); }
.cal-occ-note { padding: 0 10px 6px; font: 400 11px/1.4 system-ui; color: var(--muted); max-width: 240px; }

/* ---- Library "Plan a post" hint banner (feature 9) ---- */
#lib-plan-hint {
  display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 12px;
  padding: 12px 14px; background: var(--status-review-bg);
  border: 1px solid var(--status-review); border-radius: var(--r-md);
}
.plan-hint-text { flex: 1; min-width: 0; }
.plan-hint-head { font: 700 13px system-ui; color: var(--ink); }
.plan-hint-body { margin-top: 3px; font: 400 12px/1.45 system-ui; color: var(--ink-soft); }
.plan-hint-dismiss {
  flex: none; width: 24px; height: 24px; border: none; background: none;
  font-size: 18px; line-height: 1; color: var(--muted); cursor: pointer; border-radius: var(--r-sm);
}
.plan-hint-dismiss:hover { background: rgba(0,0,0,0.06); color: var(--ink); }

/* "Publish again" on an already-published network row. */
.pub-again { font-size: 12px; color: var(--muted); }
.pub-again:hover { color: var(--ink); }
.pub-error {
  flex-basis: 100%; font-size: 12px; color: var(--status-error, #c0392b);
  margin-top: 4px; line-height: 1.35;
}
/* Visible keyboard focus for interactive tiles/cards (accessibility). */
.lib-tile:focus-visible, .stat-card-alert:focus-visible,
.cal-entry:focus-visible, .bs-row:focus-visible {
  outline: 2px solid var(--accent, #28323c); outline-offset: 2px;
}

/* Pipeline touch move-menu */
.pipe-move {
  min-width: 62px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink); font-size: 11.5px; line-height: 1; cursor: pointer;
}
.pipe-move:hover { background: var(--input-bg); }
.pipe-menu {
  position: absolute; top: calc(100% - 3px); right: 7px; z-index: 20;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.16); overflow: hidden; min-width: 150px;
}
.pipe-menu-item {
  display: block; width: 100%; text-align: left; padding: 9px 12px;
  border: none; background: none; font: inherit; font-size: 13px; cursor: pointer;
}
.pipe-menu-item:hover { background: #f2efe9; }
.pipe-open:focus-visible, .pipe-move:focus-visible, .pipe-menu-item:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

/* ---------- Studio leaderboard ---------- */
.lb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.lb-weeknav { display: flex; align-items: center; gap: 6px; }
.lb-weeknav button {
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lb-weeknav button:hover:not(:disabled) { background: var(--input-bg); }
.lb-weeknav button:disabled { opacity: 0.35; cursor: default; }
.lb-weeklabel { font: 600 13px system-ui; color: var(--label); min-width: 92px; text-align: center; }

.lb-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.lb-chip {
  font-size: 12.5px; color: var(--label); background: var(--input-bg);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px;
}
.lb-chip b { color: var(--ink); }
.lb-chip em { color: var(--muted-2); font-style: normal; }

.lb-list { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--card); }
.lb-row {
  display: grid; grid-template-columns: 34px 40px 1fr auto; align-items: center; gap: 12px;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.lb-row:first-child { border-top: none; }
.lb-row-rabbit { background: linear-gradient(90deg, #fbf3df 0%, var(--card) 60%); }
.lb-row-turtle { background: linear-gradient(90deg, #eef1f4 0%, var(--card) 60%); }
.lb-row-me { box-shadow: inset 3px 0 0 var(--accent); }
.lb-rank { font: 700 16px system-ui; color: var(--muted); text-align: center; }
.lb-avatar {
  width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 600 14px system-ui;
}
.lb-row-rabbit .lb-avatar { background: #c9932f; }
.lb-who { min-width: 0; }
.lb-name { font: 600 15px system-ui; color: var(--ink); display: flex; align-items: center; gap: 7px; }
.lb-mark { font-size: 16px; }
.lb-you { font: 600 10.5px system-ui; text-transform: uppercase; letter-spacing: 0.04em; color: var(--accent); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.lb-breakdown { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.lb-capped { color: var(--muted-2); }
.lb-total { font: 700 22px system-ui; color: var(--ink); text-align: right; white-space: nowrap; }
.lb-total .lb-pts { font: 500 11px system-ui; color: var(--muted-2); margin-left: 3px; }
.lb-emptyhint { padding: 16px; text-align: center; color: var(--muted); font-size: 13px; border-top: 1px solid var(--line); }

@media (max-width: 720px) {
  .lb-row { grid-template-columns: 26px 34px 1fr auto; gap: 9px; padding: 11px 12px; }
  .lb-avatar { width: 34px; height: 34px; }
  .lb-total { font-size: 19px; }
}

/* Roles v2 (feature 16): per-store scoping + activity/audit panel. */
.user-stores { align-items: flex-start; }
.user-stores-box { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.store-check { display: inline-flex; align-items: center; gap: 4px; font: 500 13px system-ui; color: var(--ink-soft); cursor: pointer; }
.store-check input { margin: 0; }
.activity-panel { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.activity-head { font: 700 10.5px system-ui; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-2); margin: 0 0 8px; }
.activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.activity-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font: 400 12.5px system-ui; color: var(--muted); }
.activity-list .act-what { color: var(--ink-soft); font-weight: 600; }
.activity-list .act-who { color: var(--muted); }
.activity-list .act-when { margin-left: auto; color: var(--muted-2); font-size: 11.5px; white-space: nowrap; }

/* Posts → sales report (feature 15) */
.report-scroll { overflow-x: auto; margin-top: 12px; }
.report-table { width: 100%; border-collapse: collapse; font: 400 13px system-ui; min-width: 640px; }
.report-table th, .report-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.report-table th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.report-sort-button {
  display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 2px 0;
  border: 0; background: none; color: inherit; font: inherit; text-transform: inherit;
  letter-spacing: inherit; cursor: pointer;
}
.report-table th.num .report-sort-button { justify-content: flex-end; width: 100%; }
.report-sort-button:hover { color: var(--ink); }
.report-sort-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
.report-sort-indicator { color: var(--muted-2); font-size: 11px; line-height: 1; }
.report-table th[aria-sort="ascending"] .report-sort-button,
.report-table th[aria-sort="descending"] .report-sort-button,
.report-table th[aria-sort="ascending"] .report-sort-indicator,
.report-table th[aria-sort="descending"] .report-sort-indicator { color: var(--ink); }
.report-table tfoot td { border-top: 2px solid var(--line); border-bottom: none; color: var(--ink); }
.report-table .muted { color: var(--muted-2); }

/* Social performance (channel analytics) */
.perf-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.perf-tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; }
.perf-tile-head { font: 700 13px system-ui; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.perf-tile-posts { margin-left: auto; font: 600 11px system-ui; color: var(--muted); }
.perf-tile-primary { font: 700 26px system-ui; color: var(--ink); margin: 8px 0 6px; line-height: 1; }
.perf-tile-primary span { font: 600 12px system-ui; color: var(--muted); margin-left: 4px; }
.perf-tile-row { display: flex; justify-content: space-between; font: 400 12px system-ui; color: var(--ink-soft); padding: 2px 0; }
.perf-tile-row b { font-weight: 700; font-variant-numeric: tabular-nums; }
.perf-tile-row.muted { color: var(--muted-2); }
/* Clickable rows + thumbnail in the breakdown table. */
.report-table tbody tr[role="button"] { cursor: pointer; }
.report-table tbody tr[role="button"]:hover { background: #faf8f3; }
.report-table tbody tr[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.perf-post { min-width: 220px; }
td.perf-post { display: flex; align-items: center; gap: 8px; }
.perf-thumb { width: 34px; height: 34px; border-radius: var(--r-sm); overflow: hidden; flex: none; }
.perf-post-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }

/* --- video story: trim + cover picker (feature 17) --- */
.story-media video.story-video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.vstory-card { width: min(92vw, 460px); }
.vstory-video-wrap {
  width: 100%; aspect-ratio: 9 / 16; max-height: 52vh; margin: 0 auto 14px;
  background: #000; border-radius: 10px; overflow: hidden; outline: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
}
.vstory-video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.vstory-controls { display: flex; flex-direction: column; gap: 10px; }
.vstory-row { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.vstory-row span { display: flex; justify-content: space-between; }
.vstory-row b { color: var(--ink); font-variant-numeric: tabular-nums; }
.vstory-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.vstory-actions { display: flex; gap: 8px; margin-top: 16px; align-items: center; }
.vstory-actions .vstory-cancel { margin-right: auto; }

/* --- AI week-planner (feature 19) --- */
.planner-head { margin-bottom: 14px; }
.planner-week { font: 650 15px system-ui; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.planner-store { color: var(--muted); font-weight: 500; }
.planner-status { font: 700 10.5px system-ui; letter-spacing: 0.04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.planner-status-applied { color: #166534; border-color: #bbf7d0; background: #f0fdf4; }
.planner-status-discarded { color: var(--muted-2); }
.planner-rationale { margin: 6px 0 0; }
.planner-day { margin: 14px 0; }
.planner-day-label { font: 700 11px system-ui; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 8px; }
.planner-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.planner-card { display: flex; gap: 10px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); align-items: flex-start; }
.planner-card.rejected { opacity: 0.5; }
.planner-card.gap { border-style: dashed; }
.planner-thumb { width: 54px; height: 54px; border-radius: var(--r-sm); overflow: hidden; flex: none; position: relative; }
.planner-gap { display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--muted-2); background: #f2efe6; }
.planner-kind { position: absolute; left: 3px; top: 3px; font-size: 11px; background: rgba(0,0,0,0.6); color: #fff; border-radius: 3px; padding: 0 3px; line-height: 1.4; }
.planner-info { flex: 1 1 auto; min-width: 0; }
.planner-meta { display: flex; align-items: center; gap: 6px; font: 600 12px system-ui; color: var(--muted); }
.planner-title { font: 600 13px system-ui; color: var(--ink); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.planner-angle { font: 400 12px system-ui; color: var(--muted); margin-top: 3px; }
.planner-occasion { display: inline-block; margin-top: 4px; font: 700 10px system-ui; color: #92400e; }
.planner-card-acts { display: flex; flex-direction: column; gap: 5px; flex: none; }
.planner-mini { font: 600 11px system-ui; padding: 4px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); cursor: pointer; }
.planner-mini:hover { border-color: var(--muted-2); background: #faf8f3; }
.planner-mini.drop { color: var(--danger); }
.planner-mini.restore { color: var(--accent); }
.planner-actions { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.planner-summary { font: 600 13px system-ui; color: var(--muted); }

/* Live Shopify inventory candidates above the weekly slate. */
.stock-opportunities { margin: 16px 0 22px; padding: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg); }
.stock-opportunities-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.stock-opportunities-head h3 { margin: 0 0 3px; font: 700 16px system-ui; color: var(--ink); }
.stock-opportunities-head p { margin: 0; font: 400 12.5px/1.45 system-ui; color: var(--muted); }
.stock-opportunities-list { display: flex; flex-direction: column; }
.stock-opportunity-row { display: grid; grid-template-columns: 24px 48px minmax(150px, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.stock-opportunity-rank { font: 700 11px system-ui; color: var(--muted-2); text-align: center; }
.stock-opportunity-image { width: 48px; height: 48px; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: #f4f1e9; }
.stock-opportunity-image img { width: 100%; height: 100%; display: block; object-fit: cover; }
.stock-opportunity-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 4px; text-align: center; font: 600 8px system-ui; color: var(--muted-2); }
.stock-opportunity-info { min-width: 0; }
.stock-opportunity-info h4 { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 13px system-ui; color: var(--ink); }
.stock-opportunity-info p { margin: 3px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 11px system-ui; color: var(--muted); }
.stock-opportunity-units { min-width: 74px; font: 750 15px system-ui; color: var(--ink); text-align: right; }
.stock-opportunity-units span { font-size: 10px; color: var(--muted); }
.stock-opportunity-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.stock-opportunity-actions .button-link { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-soft); background: var(--card); font: 600 11px system-ui; text-decoration: none; white-space: nowrap; }
.stock-opportunity-actions button { white-space: nowrap; }
.stock-opportunities-toggle { margin-top: 10px; }
.stock-opportunities-state { min-height: 92px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; padding: 18px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); text-align: center; font-size: 12px; }
.stock-opportunities-state strong { color: var(--ink); font-size: 13px; }
.stock-opportunities-state.is-error { border-color: #f3c8c8; background: #fffafa; }

/* Whole card is clickable → opens the post editor (or the gap-fill picker). */
.planner-card { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
.planner-card:hover { border-color: var(--muted-2); box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.planner-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.planner-card.gap:hover .planner-gap { background: #ece7d8; color: var(--muted); }

/* Readiness marker: is this filled slot approved (ready) or still needs a look? */
.planner-ready { display: inline-block; margin-top: 5px; font: 700 10px system-ui; letter-spacing: 0.02em; padding: 1px 6px; border-radius: 999px; }
.planner-ready.is-ready { color: #14532d; background: #dcfce7; }
.planner-ready.needs-review { color: #92400e; background: #fef3c7; }

/* Gap-fill picker: upload row under the library grid. */
.gap-upload { margin: 6px 0 2px; }
.gap-upload-btn { font: 600 12px system-ui; }

/* ---------- editor: planner recommendation panel ---------- */
/* Shown only when the editor is opened from the week-planner. It makes the
 * planner's suggested angle explicit and distinct from the caption already on
 * the post (which was written for the photo's original moment). */
.ed-planner-rec { margin: 12px 0; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--r-md); background: #faf8f3; }
.ed-rec-head { font: 700 13px system-ui; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.ed-rec-slot { font: 600 11px system-ui; color: var(--muted); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; }
.ed-rec-angle { font: 400 13px system-ui; color: var(--ink-soft); margin-top: 6px; }
.ed-rec-note { font: 400 12px system-ui; color: var(--muted); margin-top: 6px; line-height: 1.5; }
.ed-rec-btn { margin-top: 10px; }

/* ---------- print: clean Calendar plan for offline planning ---------- */
/* Quick win: the Calendar "Print / export" button builds #cal-print (a per-day
 * list of the current window's posts) then calls window.print(). On paper we
 * hide the whole app chrome and the interactive grid, and show only #cal-print. */
@media print {
  body { background: #fff; color: #000; }
  /* Hide everything by default, then reveal the print sheet. */
  .app-nav, .rail, .sidebar, .topbar, #toast-region, .screen-head, .modal-hint,
  .cal-toolbar, #cal-coverage, #cal-grid, #cal-brand-chips, .micro-label,
  .view.hidden { display: none !important; }
  .view { display: block !important; }
  #cal-print { display: block !important; }
  .cal-print-head h1 { font: 700 20px system-ui; margin: 0 0 2px; }
  .cal-print-sub { font: 400 11px system-ui; color: #444; margin-bottom: 14px; }
  .cal-print-day { break-inside: avoid; margin: 0 0 12px; }
  .cal-print-day h2 { font: 700 13px system-ui; margin: 0 0 4px; border-bottom: 1px solid #999; padding-bottom: 2px; }
  .cal-print-occ { font: 400 11px system-ui; color: #333; margin: 2px 0 4px; }
  .cal-print-table { width: 100%; border-collapse: collapse; }
  .cal-print-table td { font: 400 11px system-ui; vertical-align: top; padding: 2px 8px 2px 0; border-bottom: 1px solid #eee; }
  .cal-print-time { white-space: nowrap; font-weight: 700; width: 52px; }
  .cal-print-meta { white-space: nowrap; color: #333; width: 180px; }
  .cal-print-text { color: #000; }
  .cal-print-empty { font: 400 12px system-ui; color: #444; }
}

/* ---------- UI polish wave 1 (design review) ---------- */

/* Today: two-line queue rows — subject first, caption as a muted preview. */
.bs-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.bs-text .bs-title { flex: none; }
.bs-sub { font: 400 12px system-ui; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Today: name the scope when the numbers follow a store picked elsewhere. */
.today-scope { flex-basis: 100%; font: 600 12px system-ui; color: var(--muted); padding: 2px 4px 0; }
.today-scope a { color: var(--accent); }

/* Today: the week mini-chart reads like a chart — count above the bar, bars
 * rising from a shared baseline, weekday below. */
.week-day { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 92px; }
.wd-n { margin: 0 0 4px; min-height: 15px; }
.wd-label { margin: 6px 0 0; }

/* Pipeline: subject-first cards with a muted caption/error preview. */
.pipe-title { -webkit-line-clamp: 1; line-clamp: 1; }
.pipe-sub { font: 400 11.5px system-ui; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipe-sub-error { color: var(--status-error); }

/* Editor: review stepper — flow through the queue without leaving the editor. */
.ed-stepper { display: inline-flex; align-items: center; gap: 7px; }
.ed-step-btn { font: 700 14px system-ui; padding: 5px 11px; line-height: 1; }
.ed-step-btn:disabled { opacity: 0.35; cursor: default; }
.ed-step-count { font: 600 12px system-ui; color: var(--muted); white-space: nowrap; }

/* Editor: the quiet "More" menu holding secondary actions. */
.ed-more { position: relative; display: inline-flex; }
.ed-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 8px 26px rgba(30, 24, 14, 0.14); padding: 5px; display: flex; flex-direction: column;
}
.ed-menu-item {
  text-align: left; font: 600 12.5px system-ui; color: var(--ink); background: none; border: none;
  border-radius: var(--r-sm); padding: 8px 10px; cursor: pointer; white-space: nowrap;
}
.ed-menu-item:hover { background: #f2efe9; }
.ed-menu-item:disabled { opacity: 0.5; cursor: default; }

/* Calendar: brand-colored edge so an all-stores week scans by store. */
.cal-entry { border-left: 3px solid var(--bc, var(--line)); }
.cal-reach, .cal-posted, .cal-pin { white-space: nowrap; }

/* Library: filter chips shouldn't read as disabled. */
.lib-chip { color: var(--muted); }

/* Planner: first-run hero for the headline feature. */
.planner-hero {
  max-width: 560px; margin: 26px auto; padding: 22px 26px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.planner-hero h3 { font: 700 17px system-ui; color: var(--ink); margin: 0 0 12px; }
.planner-hero-steps { margin: 0 0 14px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.planner-hero-steps li { font: 400 13px system-ui; color: var(--ink-soft); line-height: 1.5; }
.planner-hero-ready { font: 600 13px system-ui; color: var(--status-ok); margin: 0 0 16px; }
.planner-hero-warn { color: var(--status-review); }
.planner-hero > .button-link { margin-left: 7px; }

/* Calendar: "+ Plan" nudge on empty upcoming days — an invitation, not a blank. */
.cal-plan-nudge {
  margin: 6px 6px 8px; padding: 8px 0; font: 600 12px system-ui; color: var(--muted-2);
  background: none; border: 1.5px dashed var(--line); border-radius: 7px; cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cal-plan-nudge:hover { color: var(--accent); border-color: var(--muted-2); background: #faf8f3; }
.cal-plan-nudge:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* ---------- operational consistency: Today, delivery, and Requests ---------- */
.coverage-summary,
.queue-summary-row {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r-md); padding: 12px 14px; cursor: pointer;
}
.coverage-summary { justify-content: space-between; }
.coverage-summary > span:first-child { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.coverage-breakdown { display: flex; flex-wrap: wrap; gap: 6px; }
.coverage-chip { font: 600 11px system-ui; color: var(--muted); border-left: 3px solid var(--bc); padding-left: 6px; }
.queue-summary-row { border-left: 3px solid var(--bc); margin-bottom: 7px; }
.queue-summary-name { font-weight: 700; min-width: 130px; }
.queue-summary-counts { flex: 1; color: var(--muted); font-size: 12px; }
.delivery-badge, .request-status, .request-priority {
  align-self: flex-start; font: 700 10px system-ui; border-radius: 999px; padding: 3px 7px;
  background: #eef0f2; color: var(--ink-soft);
}
.delivery-badge[data-delivery="published"] { background: #dcfce7; color: #166534; }
.delivery-badge[data-delivery="partial"], .delivery-badge[data-delivery="scheduled"] { background: #fef3c7; color: #92400e; }
.delivery-badge[data-delivery="failed"] { background: #fee2e2; color: #991b1b; }

.requests-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.request-empty { min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line); border-radius: var(--r-md); color: var(--muted); text-align: center; padding: 24px; }
.request-empty strong { color: var(--ink); font: 700 14px system-ui; }
.request-empty span { font: 400 12.5px system-ui; margin-bottom: 6px; }
.request-row {
  display: grid; grid-template-columns: minmax(240px, 1fr) minmax(160px, .7fr) auto;
  gap: 18px; align-items: center; border: 1px solid var(--line); border-left: 3px solid var(--bc);
  background: var(--card); border-radius: var(--r-md); padding: 15px 16px;
}
.request-main { min-width: 0; }
.request-main h3 { font: 700 14px system-ui; margin: 7px 0 4px; }
.request-main p { font: 400 12.5px/1.45 system-ui; color: var(--ink-soft); margin: 0 0 7px; white-space: pre-wrap; }
.request-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; font: 600 11px system-ui; color: var(--muted); }
.request-assignment { font: 600 11px system-ui; color: var(--muted); }
.request-priority { background: #fee2e2; color: #991b1b; }
.request-status[data-status="submitted"] { background: #fef3c7; color: #92400e; }
.request-status[data-status="completed"] { background: #dcfce7; color: #166534; }
.request-media { display: flex; gap: 14px; min-width: 0; }
.request-thumbs { display: flex; gap: 5px; margin-top: 4px; }
.request-thumb { width: 46px; height: 46px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-sm); background: none; cursor: pointer; }
.request-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.request-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; max-width: 260px; }
.form-modal textarea { min-height: 150px; resize: vertical; }
.today-recent { margin-top: 18px; }
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.recent-ranges { display: flex; gap: 5px; }
.recent-list { margin-top: 7px; border-top: 1px solid var(--line); }
.recent-row { width: 100%; display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); text-align: left; cursor: pointer; }
.recent-row > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.recent-row strong { font: 600 12.5px system-ui; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-row small, .recent-row time { font: 500 11px system-ui; color: var(--muted); }

@media (max-width: 760px) {
  .today-next-action { align-items: stretch; flex-direction: column; gap: 11px; }
  .today-next-action > button { width: 100%; }
  .today-inline-empty { align-items: stretch; flex-direction: column; text-align: left; }
  .today-inline-empty button { width: 100%; }
  .stock-opportunities { padding: 13px 11px; }
  .stock-opportunity-row { grid-template-columns: 20px 46px minmax(0, 1fr) auto; align-items: start; }
  .stock-opportunity-units { min-width: 58px; font-size: 13px; padding-top: 4px; }
  .stock-opportunity-actions { grid-column: 3 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .stock-opportunity-actions button, .stock-opportunity-actions .button-link { flex: 1 1 auto; }
  .request-row { grid-template-columns: 1fr; gap: 12px; }
  .request-actions { justify-content: flex-start; max-width: none; }
  .queue-summary-row { flex-wrap: wrap; }
  .queue-summary-counts { flex-basis: 100%; order: 4; padding-left: 22px; }
  .coverage-summary { align-items: flex-start; }
}