:root {
  color-scheme: light;
  --ink: #241f22;
  --muted: #756a71;
  --line: #dfd6dc;
  --line-strong: #c3b8c0;
  --surface: #fffaf7;
  --surface-2: #f4edf2;
  --surface-3: #ece2e8;
  --glass: rgba(255, 250, 247, 0.78);
  --accent: #2f6f73;
  --accent-strong: #204f52;
  --accent-soft: rgba(47, 111, 115, 0.12);
  --danger: #9f3434;
  --warning: #b56a1c;
  --tone-amber: #b56a1c;
  --tone-amber-soft: #f7eacf;
  --tone-blue: #2f5d8a;
  --tone-blue-soft: #dde9f5;
  --tone-violet: #6b3f8d;
  --tone-violet-soft: #ebe0f4;
  --tone-green: #2f7a4f;
  --tone-green-soft: #d8ecdf;
  --tone-grey: #5d5360;
  --tone-grey-soft: #e6dfe4;
  --shadow-sm: 0 4px 14px rgba(56, 42, 49, 0.06);
  --shadow: 0 16px 42px rgba(56, 42, 49, 0.12);
  /* Notification authoring redesign (Plan 1 foundation) — warm cream+gold tokens.
     Additive + namespaced so they cannot restyle existing admin surfaces. */
  --notification-paper: #f6f0e2;
  --notification-card: #fffdf8;
  --notification-card-soft: #fbf5e9;
  --notification-ink-soft: #6f5a48;
  --notification-gold: #cbb98c;
  --notification-gold-strong: #b39a63;
  --notification-gold-ink: #8a7338;
  --notification-line: #e7dcc6;
  --notification-ok: #5b8c5a;
  --notification-warning: #b07d2a;
  --notification-heading-font: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 18% 0%, rgba(47, 111, 115, 0.08), transparent 34%),
    radial-gradient(circle at 90% 6%, rgba(181, 106, 28, 0.08), transparent 30%),
    #f7f3f0;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

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

.shell {
  width: min(1600px, 100%);
  margin: 0 auto;
  padding: 24px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0 24px;
}

.topbar-title {
  min-width: 0;
}

.topbar-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.topbar-environment-banner {
  padding: 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  line-height: 1;
}

/* Every environment is unmistakable: a coloured topbar plus a fixed stripe that
   stays on screen while the page scrolls. Production is deliberately the
   loudest, because a local portal can be serving the production config. */
html[data-portal-environment] .topbar {
  margin-bottom: 24px;
  padding: 18px 22px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 18px;
  color: #ffffff;
}

html[data-portal-environment="staging"] .topbar {
  background: linear-gradient(135deg, #0f4fc8 0%, #2176e5 100%);
  box-shadow: 0 14px 34px rgba(15, 79, 200, 0.22);
}

html[data-portal-environment="production"] .topbar {
  background: linear-gradient(135deg, #8f1d14 0%, #c2261a 100%);
  box-shadow: 0 14px 34px rgba(143, 29, 20, 0.28);
}

html[data-portal-environment="local_preview"] .topbar {
  background: linear-gradient(135deg, #3b3f4a 0%, #5a5f6e 100%);
  box-shadow: 0 14px 34px rgba(59, 63, 74, 0.22);
}

html[data-portal-environment="unknown"] .topbar {
  background: linear-gradient(135deg, #7a4a00 0%, #a86400 100%);
  box-shadow: 0 14px 34px rgba(122, 74, 0, 0.26);
}

html[data-portal-environment]::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 5px;
  z-index: 10000;
  pointer-events: none;
}

html[data-portal-environment="staging"]::before {
  background: #2176e5;
}

html[data-portal-environment="production"]::before {
  background: #c2261a;
}

html[data-portal-environment="local_preview"]::before {
  background: #5a5f6e;
}

html[data-portal-environment="unknown"]::before {
  background: #a86400;
}

html[data-portal-environment] .topbar .eyebrow,
html[data-portal-environment] .topbar .auth-user {
  color: #fee2e2;
}

html[data-portal-environment="staging"] .topbar .eyebrow,
html[data-portal-environment="staging"] .topbar .auth-user {
  color: #dbeafe;
}

html[data-portal-environment] .topbar .button {
  border-color: rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

html[data-portal-environment] .topbar .button:hover {
  background: rgba(255, 255, 255, 0.22);
}

/* The environment line inside confirmation and publish dialogs. */
.portal-environment-notice {
  margin: 0 0 12px;
  padding: 6px 10px;
  border-left: 4px solid #5a5f6e;
  border-radius: 6px;
  background: #eef0f4;
  color: #1f2430;
  font-size: 0.85rem;
}

.portal-environment-notice[data-environment-kind="production"] {
  border-left-color: #c2261a;
  background: #fde8e6;
  color: #6b1610;
}

.portal-environment-notice[data-environment-kind="staging"] {
  border-left-color: #2176e5;
  background: #e6f0fd;
  color: #0b3a80;
}

.portal-environment-notice[data-environment-kind="unknown"] {
  border-left-color: #a86400;
  background: #fff1d6;
  color: #5c3700;
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  letter-spacing: 0;
}

h2 {
  font-size: 1rem;
  letter-spacing: 0;
}

.auth {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 220px;
}

.auth-user {
  max-width: 280px;
  color: var(--muted);
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--ink);
  cursor: pointer;
  min-height: 38px;
  padding: 8px 12px;
  font-weight: 700;
}

.button:hover {
  border-color: var(--line-strong);
}

.button.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.button.primary:hover {
  background: var(--accent-strong);
}

.button.danger {
  border-color: rgba(159, 52, 52, 0.35);
  color: var(--danger);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.notice {
  margin: 10vh auto 0;
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 18px;
  box-shadow: var(--shadow);
  color: var(--muted);
}

.notice strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
}

.hidden {
  display: none !important;
}

.dashboard {
  display: grid;
  gap: 18px;
}

.dashboard.workspace-sidebar-collapsed {
  grid-template-columns: 58px minmax(0, 1fr);
}

.control-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tab-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 999px;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.tab {
  border: none;
  background: transparent;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.92rem;
}

.tab:hover {
  color: var(--ink);
}

.tab.active {
  background: var(--accent);
  color: #fff;
}

.control-bar-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.search-bar {
  width: clamp(220px, 32vw, 380px);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  min-height: 38px;
  padding: 8px 14px;
  box-shadow: var(--shadow-sm);
}

.search-bar[hidden] {
  display: none;
}

.search-bar:focus {
  outline: 2px solid var(--accent-soft);
  border-color: var(--accent);
}

.tab-content {
  min-height: 60vh;
}

.placeholder {
  display: grid;
  place-items: center;
  min-height: 40vh;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Filter bar */

.filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.filter-group-label {
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 6px 0 8px;
}

.filter-group-label:first-child {
  padding-left: 4px;
}

.filter-chip {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
}

.filter-chip:hover {
  border-color: var(--line-strong);
}

.filter-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.filter-clear {
  margin-left: auto;
  font-size: 0.8rem;
}

/* Pipeline board */

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 14px;
  align-items: stretch;
}

.pipeline-column {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  min-height: 60vh;
  overflow: hidden;
}

.pipeline-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  padding: 12px 14px;
}

.pipeline-column-title {
  font-weight: 800;
  font-size: 0.92rem;
}

.pipeline-column-count {
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 2px 10px;
  min-width: 28px;
  text-align: center;
}

.pipeline-column[data-tone="amber"] .pipeline-column-header {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}
.pipeline-column[data-tone="blue"] .pipeline-column-header {
  background: var(--tone-blue-soft);
  color: var(--tone-blue);
}
.pipeline-column[data-tone="violet"] .pipeline-column-header {
  background: var(--tone-violet-soft);
  color: var(--tone-violet);
}
.pipeline-column[data-tone="green"] .pipeline-column-header {
  background: var(--tone-green-soft);
  color: var(--tone-green);
}
.pipeline-column[data-tone="grey"] .pipeline-column-header {
  background: var(--tone-grey-soft);
  color: var(--tone-grey);
}

.pipeline-column-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  flex: 1;
}

.pipeline-empty {
  color: var(--muted);
  font-size: 0.82rem;
  text-align: center;
  padding: 18px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

/* Deck card */

.deck-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: border-color 0.12s ease, transform 0.06s ease;
}

.deck-card:hover {
  border-color: var(--accent);
}

.deck-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deck-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.deck-card-title {
  font-weight: 800;
  font-size: 0.96rem;
  line-height: 1.2;
}

.deck-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 0.84rem;
}

.deck-card-price {
  color: var(--ink);
  font-weight: 700;
}

.deck-card-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.deck-card-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface-2);
}

.deck-card-release {
  margin-left: auto;
  font-style: italic;
}

.deck-card-badge {
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.deck-card-badge.attention {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.deck-card-badge.cli {
  background: var(--tone-grey-soft);
  color: var(--tone-grey);
}

/* Drawer */

.drawer {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}

.drawer:not(.hidden) {
  pointer-events: auto;
}

.drawer-scrim {
  display: none;
}

.drawer-panel {
  position: relative;
  height: 100vh;
  width: 100%;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.drawer-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
  background:
    radial-gradient(circle at 92% -20%, rgba(47, 111, 115, 0.18), transparent 42%),
    linear-gradient(135deg, #fffaf7, #f1e8ef);
}

.drawer-product-hero {
  z-index: 1;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.drawer-cover {
  display: grid;
  width: 64px;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  overflow: hidden;
  place-items: center;
  border: 1px solid rgba(88, 71, 82, 0.16);
  border-radius: 13px;
  background:
    radial-gradient(circle at 68% 24%, rgba(255, 255, 255, 0.78), transparent 18%),
    linear-gradient(145deg, #cfc2d5 0%, #718e96 100%);
  box-shadow: 0 10px 24px rgba(48, 36, 45, 0.16);
  color: rgba(255, 255, 255, 0.95);
  font-family: var(--notification-heading-font);
  font-size: 1.35rem;
  font-weight: 700;
}

.drawer-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drawer-header-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.drawer-header-actions {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.drawer-eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.drawer-header h2 {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--notification-heading-font);
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1.05;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.drawer-header-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.drawer-header-meta > span:not(.status-pill) {
  padding: 3px 7px;
  border: 1px solid rgba(88, 71, 82, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.drawer-close-action {
  background: rgba(255, 255, 255, 0.56);
}

.drawer-toc {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  padding: 9px 18px;
  background: rgba(255, 253, 251, 0.94);
  scrollbar-width: none;
}

.drawer-toc::-webkit-scrollbar {
  display: none;
}

.drawer-toc a {
  display: inline-block;
  flex: 0 0 auto;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 10px;
  color: var(--muted);
  font-size: 0.8rem;
  text-decoration: none;
}

.drawer-toc a:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.drawer-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* No bottom padding: the sticky .drawer-footer pins to the content-box
     bottom edge, so any bottom padding floats it above the drawer's bottom. */
  padding: 18px 20px 0;
  background: color-mix(in srgb, var(--surface-2) 34%, var(--surface));
  overflow-y: auto;
  flex: 1;
}

.drawer-section {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
}

.drawer-section h3 {
  margin: 0;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawer-section.collapsed > :not(h3) {
  display: none;
}

.drawer-section.flash {
  animation: section-flash 1.2s ease-out;
}

@keyframes section-flash {
  0% { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: var(--shadow-sm); }
}

.section-toggle {
  border: none;
  background: none;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  color: var(--ink);
}

.drawer-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

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

.drawer-form label.checkbox input,
.drawer-form .release-toggle input,
.drawer-form .release-placement input {
  width: auto;
  flex: 0 0 auto;
}

.drawer-form input,
.drawer-form select,
.drawer-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  min-height: 38px;
  padding: 8px 10px;
}

.drawer-form input:focus,
.drawer-form select:focus,
.drawer-form textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
}

.drawer-form textarea {
  resize: vertical;
}

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

.commerce-panel {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

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

.segmented-option {
  position: relative;
  min-height: 38px;
  margin: 0;
}

.segmented-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.segmented-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 800;
  text-align: center;
}

.segmented-option input:checked + span {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.segmented-option input:focus-visible + span {
  outline: 2px solid var(--accent-soft);
  outline-offset: 2px;
}

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

.commerce-operation-progress {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.commerce-operation-progress.tone-working {
  border-color: rgba(47, 93, 138, 0.35);
}

.commerce-operation-progress.tone-success {
  border-color: rgba(47, 122, 79, 0.4);
}

.commerce-operation-progress.tone-danger {
  border-color: rgba(159, 52, 52, 0.4);
}

.commerce-operation-heading,
.commerce-provider-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.commerce-provider-progress-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.commerce-provider-progress-row {
  flex-wrap: wrap;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.commerce-provider-name {
  font-weight: 800;
}

.commerce-provider-status {
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 0.76rem;
  font-weight: 800;
}

.commerce-provider-status.tone-neutral {
  background: var(--tone-grey-soft);
  color: var(--tone-grey);
}

.commerce-provider-status.tone-working {
  background: var(--tone-blue-soft);
  color: var(--tone-blue);
}

.commerce-provider-status.tone-success {
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.commerce-provider-status.tone-danger {
  background: rgba(159, 52, 52, 0.1);
  color: var(--danger);
}

.commerce-provider-detail,
.commerce-operation-retry {
  width: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.commerce-setup-steps {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 22px;
  color: var(--ink);
  font-size: 0.84rem;
  line-height: 1.45;
}

.commerce-review-step {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.commerce-review-step h4 {
  margin: 0;
}

.launch-readiness {
  display: grid;
  gap: 18px;
}

.launch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
}

.launch-header > div:first-child {
  flex: 1 1 260px;
}

.environment-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.environment-pill.staging {
  border-color: var(--warning);
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.environment-pill.production {
  border-color: var(--tone-green);
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.launch-actions {
  display: flex;
  flex: 1 1 260px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.launch-cutoff-input {
  min-height: 38px;
  max-width: 210px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 0 10px;
  font: inherit;
}

.launch-readback-summary {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.launch-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

@media (max-width: 640px) {
  .launch-actions {
    justify-content: flex-start;
  }

  .launch-cutoff-input {
    max-width: none;
    width: 100%;
  }
}

.launch-section {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow-sm);
}

.launch-section h3 {
  margin: 0;
  font-size: 0.95rem;
}

.launch-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.launch-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  min-height: 44px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.launch-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.launch-marker {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--tone-grey);
}

.launch-item.ready .launch-marker { background: var(--tone-green); }
.launch-item.warning .launch-marker { background: var(--warning); }
.launch-item.waiting .launch-marker { background: var(--tone-blue); }
.launch-item.blocked .launch-marker { background: var(--danger); }

.launch-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.launch-label {
  font-size: 0.87rem;
  font-weight: 800;
}

.launch-detail {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.35;
}

.drawer-field {
  display: grid;
  gap: 8px;
}

.field-label {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.status-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.status-pill {
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.status-published { background: var(--tone-green-soft); color: var(--tone-green); }
.status-draft { background: var(--tone-amber-soft); color: var(--tone-amber); }
.status-archived { background: var(--tone-grey-soft); color: var(--tone-grey); }
.status-available { background: var(--tone-green-soft); color: var(--tone-green); }
.status-private { background: var(--tone-blue-soft); color: var(--tone-blue); }
.status-unlisted { background: var(--tone-grey-soft); color: var(--tone-grey); }
.status-attention { background: var(--tone-amber-soft); color: var(--tone-amber); }
.status-unknown { background: var(--surface-3); color: var(--muted); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  background: var(--surface-2);
  font-size: 0.82rem;
}

.chip-id {
  color: var(--muted);
  font-size: 0.72rem;
  font-family: ui-monospace, monospace;
}

.chip-warning {
  color: var(--danger);
  font-size: 0.7rem;
  font-weight: 700;
}

.chip-remove {
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 2px;
}

.chip-remove:hover {
  color: var(--danger);
}

.chip-stale {
  border-color: rgba(159, 52, 52, 0.4);
  background: #fbeeee;
}

.shelf-add {
  position: relative;
}

.shelf-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 1;
  display: grid;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  max-height: 240px;
  overflow-y: auto;
}

.shelf-suggestion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  border: none;
  background: #fff;
  text-align: left;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.shelf-suggestion:last-child {
  border-bottom: none;
}

.shelf-suggestion:hover {
  background: var(--surface-2);
}

.shelf-suggestion-meta {
  color: var(--muted);
  font-size: 0.72rem;
}

.readiness-summary {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.78rem;
  font-weight: 800;
}

.readiness-summary.ok {
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.readiness-summary.not-ok {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.drawer-section.readiness.ok {
  border-color: rgba(47, 122, 79, 0.4);
}

.readiness-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.readiness-issue {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 8px;
  align-items: center;
  font-size: 0.86rem;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--surface-2);
}

.readiness-issue.blocker .readiness-marker { color: var(--danger); }
.readiness-issue.warning .readiness-marker { color: var(--warning); }
.readiness-issue .readiness-jump {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.78rem;
}

.readiness-issue.cli-required {
  background: var(--tone-grey-soft);
}

/* Developer-details disclosure (native <details>) — hides raw ids/keys/checksums. */
.developer-details {
  border: 1px solid var(--line);
  border-radius: 10px;
}

.developer-details > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.developer-details > summary::-webkit-details-marker {
  display: none;
}

.developer-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.developer-details > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.devdetail-list {
  margin: 0;
  padding: 8px 14px 14px;
  display: grid;
  gap: 8px;
}

.devdetail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
}

.devdetail-row dt {
  color: var(--muted);
  font-size: 13px;
}

.devdetail-row dd {
  margin: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

.devdetail-row code {
  font-size: 12px;
  word-break: break-all;
}

.devdetail-copy {
  font-size: 12px;
  padding: 2px 8px;
}

/* Shared field chrome: label + control + help + inline error. */
.admin-field {
  display: grid;
  gap: 4px;
  margin-bottom: 12px;
}

.admin-field-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}

.admin-field-req {
  color: var(--danger);
}

.admin-field-help {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.admin-field-error {
  margin: 0;
  font-size: 12px;
  color: var(--danger);
}

.admin-field [aria-invalid="true"] {
  border-color: var(--danger);
  outline-color: var(--danger);
}

/* Promise-based styled confirm modal (reuses .dialog chrome). */
.confirm-dialog-host {
  position: fixed;
  inset: 0;
  z-index: 80;
  pointer-events: none;
}

.confirm-dialog-host:not(:empty) {
  pointer-events: auto;
}

.confirm-dialog-host:empty {
  display: none;
}

.confirm-dialog {
  max-width: 420px;
}

.toast-action,
.toast-dismiss {
  margin-left: 12px;
  background: transparent;
  border: 0;
  color: #f4ede7;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}

.drawer-loading {
  padding: 24px;
  color: var(--muted);
}

.field-hint {
  display: block;
  font-size: 12px;
  color: var(--danger);
  min-height: 14px;
}

/* P2 read-only store-price mirror */
.pricing-access-summary {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.store-price-block {
  display: grid;
  gap: 8px;
}
.store-price-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: baseline;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}
.store-price-name {
  font-weight: 600;
  color: var(--ink);
}
.store-price-value {
  font-variant-numeric: tabular-nums;
}
.price-unconfirmed {
  color: var(--muted);
  font-style: italic;
}
.store-price-console {
  font-size: 12px;
}
.store-price-banner {
  margin: 2px 0 0;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}
.store-price-banner.tone-warn {
  background: rgba(159, 52, 52, 0.1);
  color: var(--danger);
}
.store-price-banner.tone-ok {
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.store-price-banner.tone-info {
  background: var(--line);
  color: var(--ink);
}
.pricing-advanced {
  margin-top: 12px;
}

/* P4 release scheduler */
.release-status-chooser { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0; }
.release-status-btn {
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; background: var(--surface, #fff);
  cursor: pointer; font-size: 13px;
}
.release-status-btn:hover { border-color: var(--accent); }
.release-status-btn.selected { border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.release-extra-promotion {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
  padding: 11px 13px;
}
.release-extra-promotion > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-weight: 750;
}
.release-extra-promotion > summary small { color: var(--muted); font-weight: 500; }
.release-extra-promotion > p { margin: 10px 0 0; }
.release-composer { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.release-composer h4 { margin: 0 0 8px; }
.release-toggle { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; }
.release-placements { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.release-placements legend { font-size: 12px; color: var(--muted); padding: 0 4px; }
.release-placement { display: inline-flex; align-items: center; gap: 6px; margin: 4px 12px 4px 0; font-size: 13px; }
.release-composer-actions { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.release-status-msg { font-size: 12px; color: var(--muted); }
.release-composer-done { margin-top: 12px; }

.cm-local-preview-note {
  border: 1px solid var(--tone-blue-soft);
  border-radius: 9px;
  background: color-mix(in srgb, var(--tone-blue-soft) 55%, white);
  padding: 9px 11px;
  color: var(--tone-blue);
  font-size: 0.78rem;
}

/* P3 card-meanings editor */
.cm-live { color: var(--accent-strong); font-weight: 600; }
.cm-workspace {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--surface, #fff);
}
.cm-workspace.is-stale { border-color: var(--warning, #b7791f); background: #fffaf0; }
.cm-package-version {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
}
.cm-package-version span,
.cm-version-node span {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cm-package-version strong {
  font-size: 12px;
}
.cm-version-path {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.cm-version-node {
  display: grid;
  align-content: center;
  gap: 4px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
}
.cm-version-node.is-live {
  border-color: color-mix(in srgb, var(--accent) 38%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 42%, #fff);
}
.cm-version-node.is-draft {
  border-color: rgba(169, 121, 40, 0.34);
  background: rgba(199, 153, 72, 0.1);
}
.cm-version-node strong { font-size: 15px; overflow-wrap: anywhere; }
.cm-version-arrow {
  align-self: center;
  color: var(--accent-strong);
  font-size: 24px;
  font-weight: 800;
}
.cm-version-explanation {
  margin: 9px 0 0;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
}
.cm-draft-summary { margin: 10px 0 0; font-size: 13px; }
.cm-change-set { margin-top: 8px; font-size: 13px; }
.cm-change-set > summary { cursor: pointer; color: var(--muted); }
.cm-change-set ul { margin: 6px 0 0; padding-left: 18px; }
.cm-change-card-link {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
  text-align: left;
}
.cm-change-card-link:hover { text-decoration: underline; }
.cm-workspace-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cm-history { margin: 0 0 14px; }
.cm-history > summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.cm-history ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cm-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding: 7px 0;
}
.cm-history-row.is-live { color: var(--accent-strong); }
.cm-history-incompatible {
  color: var(--muted);
  font-size: 12px;
}
.cm-live-badge {
  display: inline-block;
  margin-left: 5px;
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--accent-soft);
  font-size: 10px;
  letter-spacing: .04em;
}
.cm-local-unsaved {
  margin: 0 0 12px;
  border-left: 3px solid var(--warning, #b7791f);
  padding: 7px 10px;
  background: #fffaf0;
  font-size: 13px;
}
.cm-layout { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; }
.cm-search { width: 100%; margin-bottom: 8px; }
.cm-list { display: grid; gap: 4px; max-height: 480px; overflow: auto; }
.cm-card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: var(--surface, #fff);
  cursor: pointer;
}
.cm-card:hover { border-color: var(--accent); }
.cm-card.selected { border-color: var(--accent); background: var(--accent-soft); }
.cm-card-thumb { width: 44px; height: 62px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.cm-card-thumb-blank { background: var(--line); display: inline-block; }
.cm-card-name { font-size: 13px; flex: 1; }
.cm-card-badge { font-size: 11px; color: var(--accent-strong); background: var(--accent-soft); border-radius: 999px; padding: 1px 7px; }
.cm-card-badge.is-draft { color: var(--ink); background: #fef3c7; }
.cm-editor-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 12px; }
.cm-editor-head h4 { margin: 0; }
.cm-editor-state { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.cm-preview-art {
  width: min(148px, 38%);
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* Narrow drawers (small screens): stack the card list above the editor so the
   preview art + textareas never overflow the panel horizontally. */
@media (max-width: 640px) {
  .cm-version-path {
    grid-template-columns: 1fr;
  }
  .cm-version-arrow {
    justify-self: center;
    line-height: 1;
    transform: rotate(90deg);
  }
  .cm-layout {
    grid-template-columns: 1fr;
  }
  .cm-list {
    max-height: 240px;
  }
}

/* Card meanings focus mode keeps the existing editor DOM mounted, but removes
   every unrelated product control from view. */
.drawer-meaning-focus-bar {
  display: none;
}

.drawer.drawer-meaning-focus .drawer-meaning-focus-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 10px clamp(20px, 4vw, 64px);
  background: rgba(255, 253, 249, 0.96);
}

.drawer-meaning-focus-bar > div {
  display: grid;
  gap: 2px;
}

.drawer-meaning-focus-bar > div > strong {
  font-family: var(--notification-heading-font);
  font-size: 1.05rem;
}

.drawer-meaning-focus-bar > div > span:last-child {
  color: var(--muted);
  font-size: 12px;
}

.drawer.drawer-meaning-focus .drawer-toc,
.drawer.drawer-meaning-focus [data-drawer-preview],
.drawer.drawer-meaning-focus .drawer-header-meta,
.drawer.drawer-meaning-focus .drawer-eyebrow {
  display: none;
}

.drawer.drawer-meaning-focus .drawer-form > :not(#drawer-section-card-meanings) {
  display: none;
}

.drawer.drawer-meaning-focus .drawer-header {
  min-height: 0;
  padding-block: 10px;
}

.drawer.drawer-meaning-focus .drawer-cover {
  width: 42px;
  border-radius: 9px;
}

.drawer.drawer-meaning-focus .drawer-form {
  display: block;
  padding-top: 24px;
  padding-inline: clamp(20px, 4vw, 64px);
}

.drawer.drawer-meaning-focus #drawer-section-card-meanings {
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 0 0 48px;
  box-shadow: none;
}

.drawer.drawer-meaning-focus #drawer-section-card-meanings::before {
  display: none;
}

.drawer.drawer-meaning-focus .cm-workspace {
  border-radius: 16px;
  padding: 18px;
}

.drawer.drawer-meaning-focus .cm-layout {
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 42px);
}

.drawer.drawer-meaning-focus .cm-list {
  max-height: calc(100vh - 330px);
}

.drawer.drawer-meaning-focus .cm-editor-col {
  max-width: 960px;
}

@media (max-width: 720px) {
  .drawer.drawer-meaning-focus .drawer-meaning-focus-bar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .drawer.drawer-meaning-focus .cm-layout {
    grid-template-columns: 1fr;
  }

  .drawer.drawer-meaning-focus .cm-list {
    max-height: 240px;
  }
}
.cm-editor h4 { margin: 0 0 12px; }
.cm-bundled { margin: 4px 0 12px; }
.cm-bundled > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.cm-bundled-row { margin: 4px 0; font-size: 13px; color: var(--muted); }
.cm-yearly-fields {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 18px 0;
  padding: 14px;
}
.cm-yearly-fields legend { font-weight: 700; padding: 0 6px; }
.cm-yearly-help {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 12px;
}
.cm-editor-actions { display: flex; align-items: center; gap: 12px; }
.cm-status { font-size: 12px; color: var(--muted); }
.cm-error { color: var(--danger); }

.cm-rebase-dialog {
  width: min(620px, calc(100vw - 32px));
}

.cm-rebase-conflicts {
  display: grid;
  gap: 12px;
  max-height: min(56vh, 520px);
  overflow: auto;
}

.cm-rebase-conflict {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}

.cm-rebase-conflict legend {
  padding: 0 4px;
  font-weight: 700;
}

.cm-rebase-conflict p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.cm-rebase-conflict label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.copy {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  padding: 2px 8px;
  font-size: 0.72rem;
}

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

.drawer-footer {
  position: sticky;
  bottom: 0;
  /* margin-top auto pins the bar to the panel bottom even when the form is
     shorter than the drawer; the flex gap supplies the spacing above it. */
  margin: auto -20px 0;
  padding: 12px 20px;
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.drawer-footer-actions {
  display: flex;
  gap: 8px;
}

.drawer-status {
  color: var(--muted);
  font-size: 0.82rem;
}

/* Drag + drop affordances */

.deck-card.dragging {
  opacity: 0.4;
  transform: scale(0.97);
  border-style: dashed;
}

.pipeline-column.drag-over {
  background: var(--accent-soft);
}

.pipeline-column.drag-over .pipeline-column-body {
  background: rgba(47, 111, 115, 0.06);
}

/* Publish / archive / draft dialog */

.dialog-root {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}

.dialog-root:not(:empty) {
  pointer-events: auto;
}

.dialog-scrim {
  position: absolute;
  inset: 0;
  background: rgba(36, 31, 34, 0.42);
  backdrop-filter: blur(2px);
}

.dialog {
  position: relative;
  margin: 6vh auto;
  width: min(560px, calc(100% - 32px));
  background: var(--surface);
  border-radius: 16px;
  box-shadow: 0 32px 64px rgba(36, 31, 34, 0.22);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 88vh;
}

.dialog-header {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}

.dialog-header h2 {
  font-size: 1.1rem;
}

.dialog-subtle {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.92rem;
}

.dialog-body {
  display: grid;
  flex: 1 1 auto;
  gap: 14px;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
}

.dialog-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  font-size: 0.92rem;
}

.dialog-label {
  color: var(--muted);
  font-weight: 700;
}

.dialog-explanation {
  line-height: 1.45;
  color: var(--ink);
  background: var(--surface-2);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 12px 14px;
}

.dialog-explanation strong {
  display: block;
  margin-bottom: 6px;
}

.dialog-clear {
  color: var(--tone-green);
  font-weight: 700;
  background: var(--tone-green-soft);
  padding: 8px 12px;
  border-radius: 8px;
}

.dialog-warning {
  color: var(--warning);
  font-weight: 700;
}

.dialog-fieldset {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.dialog-fieldset legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.dialog-fieldset .radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.94rem;
}

.dialog-fieldset input[type="radio"] {
  margin: 0;
}

.dialog-datetime {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.dialog-datetime input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  min-height: 38px;
  background: #fff;
  color: var(--ink);
}

.dialog-datetime input:disabled {
  background: var(--surface-2);
  color: var(--muted);
}

.dialog-validation {
  margin: 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
  min-height: 1em;
}

.dialog-issues h4 {
  margin: 0 0 6px;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.dialog-issues.blockers h4 { color: var(--danger); }
.dialog-issues.warnings h4 { color: var(--warning); }

.dialog-issues .readiness-issue {
  grid-template-columns: 1fr auto;
}

.cli-hint {
  background: var(--tone-grey-soft);
  color: var(--tone-grey);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 2px 8px;
}

.dialog-footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.dialog .button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Shelves tab */

.shelves-tab {
  display: grid;
  gap: 16px;
}

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

.shelves-toolbar h2 {
  margin: 0;
  font-size: 1.1rem;
}

.shelf-lane {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.shelf-lane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

.shelf-lane-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.shelf-lane-title h3 {
  margin: 0;
  font-size: 1rem;
}

.shelf-id {
  color: var(--muted);
  font-family: ui-monospace, monospace;
  font-size: 0.78rem;
}

.shelf-lane-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.shelf-lane-body {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 14px 16px;
  scroll-snap-type: x proximity;
}

.shelf-deck-card {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 180px;
  flex: 0 0 180px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 12px;
  cursor: grab;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
}

.shelf-deck-card.dragging {
  opacity: 0.4;
}

.shelf-deck-card.drop-indicator {
  border: 2px dashed var(--accent);
  background: var(--accent-soft);
}

.shelf-deck-card.stale {
  background: #fbeeee;
  border-color: rgba(159, 52, 52, 0.4);
}

.shelf-deck-title {
  font-weight: 700;
  font-size: 0.92rem;
}

.shelf-deck-id {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--muted);
}

.shelf-deck-meta {
  color: var(--muted);
  font-size: 0.76rem;
}

.shelf-deck-card .chip-remove {
  position: absolute;
  top: 6px;
  right: 6px;
}

.shelf-add-row {
  padding: 0 16px 14px;
}

.shelf-add {
  position: relative;
  max-width: 360px;
}

.shelf-add input[data-shelf-add-input] {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  min-height: 38px;
  padding: 8px 12px;
}

[data-shelf-add-suggestions]:empty {
  display: none;
}

/* Control-plane composers */

.composer {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.composer label,
.composer fieldset {
  min-width: 0;
}

.composer label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 760;
}

.composer label.inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.composer input,
.composer select,
.composer textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  color: var(--ink);
  min-height: 42px;
  padding: 10px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

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

.composer input:focus,
.composer select:focus,
.composer textarea:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
}

.composer fieldset {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.42);
  padding: 14px;
}

.composer legend {
  padding: 0 6px;
  color: var(--ink);
  font-weight: 800;
}

.composer > h2 {
  margin: 0;
}

.composer-section {
  display: grid;
  gap: 12px;
  border: 1px solid rgba(223, 214, 220, 0.75);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.44);
  padding: 14px;
}

.composer-section-title {
  display: grid;
  gap: 3px;
}

.composer-section-title strong {
  color: var(--ink);
  font-size: 0.95rem;
}

.composer-section-title span {
  color: var(--muted);
  font-size: 0.82rem;
}

.composer-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px;
}

/* The New Message composer (Plan 2). One column that never outgrows its
   container, so it holds at a phone width with no horizontal scroll and a
   keyboard user meets the same nine tab stops in the same order at any size. */
.message-composer-host {
  width: 100%;
  max-width: 44rem;
  min-width: 0;
}

.message-composer {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.message-composer > * {
  min-width: 0;
}

.message-composer h2 {
  font-size: 1.4rem;
}

.message-composer input[type="text"],
.message-composer input[type="datetime-local"],
.message-composer input[type="date"],
.message-composer input[type="time"],
.message-composer input[type="number"],
.message-composer select,
.message-composer textarea {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 12px;
}

.message-composer textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.composer-field-label {
  color: var(--ink);
  font-weight: 700;
}

.composer-channel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 14px;
}

.composer-channel legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.composer-channel-option,
.composer-timing-option,
.composer-audience-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 2.75rem;
}

.composer-counter {
  color: var(--muted);
  font-size: 0.84rem;
  text-align: right;
}

.composer-counter[data-composer-counter-state="warning"] {
  color: var(--warning);
}

.composer-counter[data-composer-counter-state="over"] {
  color: var(--danger);
  font-weight: 700;
}

.composer-summary-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px 14px;
}

.composer-summary-row > .composer-estimate,
.composer-summary-row > .composer-editor {
  grid-column: 1 / -1;
}

.composer-summary-text,
.composer-estimate,
.composer-frequency,
.composer-editor-hint,
.composer-review-sentence {
  overflow-wrap: anywhere;
}

.composer-estimate,
.composer-frequency,
.composer-editor-hint,
.composer-save-status {
  color: var(--muted);
  font-size: 0.84rem;
}

.composer-editor {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.composer-editor-error,
.composer-review-hint {
  color: var(--danger);
  font-size: 0.86rem;
}

.composer-save {
  display: grid;
  gap: 4px;
}

.composer-save-detail {
  overflow-wrap: anywhere;
  font-size: 0.86rem;
}

.composer-save-status:empty,
.composer-save-detail:empty,
.composer-save-actions:empty {
  display: none;
}

.composer-save-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.message-composer button:focus-visible,
.message-composer input:focus-visible,
.message-composer select:focus-visible,
.message-composer textarea:focus-visible,
.message-composer-review [tabindex="-1"]:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.composer-review-copy-item,
.composer-review-warnings {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.5);
  padding: 10px 14px;
  overflow-wrap: anywhere;
}

.composer-review-warnings {
  border-color: var(--warning);
}

@media (max-width: 560px) {
  .message-composer .composer-actions {
    justify-content: stretch;
  }

  .message-composer .composer-actions > .button {
    flex: 1 1 100%;
  }

  .composer-summary-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The message composer's More Options disclosure sits between More Options
   and Review in DOM (and tab) order; it takes its own full-width row. */
.message-composer-more-options {
  flex-basis: 100%;
}

.composer-starter-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.composer-starter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.composer-starter-detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
}

.muted {
  color: var(--muted);
  font-size: 0.84rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--tone-grey);
  padding: 4px 9px;
  font-size: 0.74rem;
  font-weight: 800;
}

.badge.warn {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.broadcasts,
.announcements,
.campaigns {
  display: grid;
  gap: 18px;
}

.broadcast-list,
.announcement-list,
.campaign-list {
  display: grid;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.broadcast-row,
.announcement-row,
.campaign-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(160px, 0.7fr) minmax(140px, auto) auto auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

/* App preview composers */

.announcement-grid,
.campaign-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(380px, 430px);
  gap: 18px;
  align-items: start;
}

.announcement-preview-panel,
.campaign-preview-panel {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--glass);
  padding: 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.announcement-preview-panel h2,
.announcement-preview-panel h3,
.campaign-preview-panel h2,
.campaign-preview-panel h3 {
  margin: 0;
}

.app-surface-preview {
  width: 100%;
  height: min(720px, calc(100vh - 116px));
  min-height: 620px;
  border: 1px solid rgba(223, 214, 220, 0.74);
  border-radius: 18px;
  background: #17131d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Campaigns */

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

.campaign-form-grid .wide {
  grid-column: 1 / -1;
}

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

.campaign-window-channel {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) repeat(3, minmax(120px, 1fr));
  gap: 10px;
  grid-column: 1 / -1;
  align-items: end;
}

.native-push-preview {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.push-preview {
  display: grid;
  gap: 14px;
  min-width: 0;
}

/* Lock-screen phone frame: one dark "screen" per OS with the notification
   card the message would produce. Approximation only — never native-perfect. */
.push-preview-phone {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.push-preview-screen {
  border-radius: 22px;
  border: 6px solid #1c1822;
  background:
    radial-gradient(circle at 30% 8%, rgba(216, 198, 146, 0.16), transparent 42%),
    radial-gradient(circle at 80% 90%, rgba(91, 74, 122, 0.35), transparent 55%),
    linear-gradient(180deg, #241f2e, #15121c 70%);
  padding: 18px 12px 22px;
  display: grid;
  gap: 14px;
  box-shadow: 0 10px 26px rgba(28, 24, 34, 0.28);
}

.push-preview-clock {
  font-family: var(--notification-heading-font, serif);
  font-size: 2rem;
  font-weight: 600;
  text-align: center;
  color: rgba(247, 243, 240, 0.92);
  letter-spacing: 0.02em;
}

.push-preview-card {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  grid-template-areas:
    "icon app when"
    "icon title title"
    "icon body body";
  column-gap: 10px;
  row-gap: 2px;
  min-width: 0;
  border-radius: 14px;
  background: rgba(247, 243, 240, 0.92);
  padding: 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.push-preview-appicon {
  grid-area: icon;
  align-self: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--notification-heading-font, serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: #3a2c12;
  background: linear-gradient(180deg, #d8c692, var(--notification-gold));
}

.push-preview-app {
  grid-area: app;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(44, 34, 25, 0.62);
}

.push-preview-when {
  grid-area: when;
  font-size: 0.74rem;
}

.push-preview-title {
  grid-area: title;
}

.push-preview-body {
  grid-area: body;
}

.push-preview-os {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.push-preview-app,
.push-preview-title,
.push-preview-body {
  min-width: 0;
  overflow-wrap: anywhere;
}

.push-preview-app,
.push-preview-title {
  color: var(--ink);
}

.push-preview-body,
.push-preview-disclaimer {
  color: var(--notification-ink-soft);
  font-size: 0.88rem;
}

.push-preview-disclaimer {
  margin: 0;
}

.native-push-card {
  display: grid;
  gap: 4px;
  min-height: 96px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.preflight-list {
  display: grid;
  gap: 8px;
  min-height: 84px;
}

.preflight-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 10px;
  font-size: 0.84rem;
}

.preflight-item.ok {
  border-color: rgba(47, 122, 79, 0.28);
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.preflight-item.blocking {
  border-color: rgba(159, 52, 52, 0.25);
  background: #fbeeee;
  color: var(--danger);
}

.preflight-item.warning {
  border-color: rgba(181, 106, 28, 0.28);
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.preflight-item.info {
  border-color: rgba(47, 93, 138, 0.28);
  background: var(--tone-blue-soft);
  color: var(--tone-blue);
}

.shelf-edit-form {
  display: grid;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: #fffdfb;
}

.shelf-edit-form.inline {
  background: var(--surface-2);
}

.shelf-edit-form h3 {
  margin: 0;
  font-size: 0.96rem;
}

.shelf-edit-form label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.shelf-edit-form input,
.shelf-edit-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  min-height: 38px;
  padding: 8px 10px;
}

.shelf-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* Store Preview */

.preview-tab {
  display: grid;
  justify-content: center;
  gap: 16px;
}

.preview-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.preview-control {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--muted);
  font-weight: 700;
}

.preview-control input {
  min-width: 220px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  min-height: 38px;
  padding: 8px 10px;
}

.preview-stats {
  color: var(--muted);
  font-size: 0.86rem;
}

.phone-frame {
  width: 414px;
  max-width: 100%;
  background: #1d1a1c;
  border-radius: 44px;
  padding: 18px;
  box-shadow: 0 32px 64px rgba(36, 31, 34, 0.25);
}

.phone-screen {
  background: #fffaf7;
  border-radius: 30px;
  padding: 22px 18px 28px;
  min-height: 720px;
  max-height: 80vh;
  overflow-y: auto;
}

.phone-header {
  display: grid;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.phone-eyebrow {
  margin: 0;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.phone-header h3 {
  margin: 0;
  font-size: 1.4rem;
}

.phone-now {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
}

.phone-empty {
  margin: 40px 0;
  text-align: center;
  color: var(--muted);
}

.phone-shelf {
  display: grid;
  gap: 10px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}

.phone-shelf:last-child {
  border-bottom: none;
}

.phone-shelf-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.phone-shelf-header h4 {
  margin: 0;
  font-size: 0.96rem;
}

.phone-tag {
  border-radius: 999px;
  padding: 2px 8px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.phone-shelf-carousel .phone-shelf-body {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.phone-shelf-carousel .phone-deck {
  flex: 0 0 200px;
  scroll-snap-align: start;
}

.phone-shelf-grid .phone-shelf-body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.phone-deck {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.phone-deck:hover {
  border-color: var(--accent);
}

.phone-deck-art {
  aspect-ratio: 2 / 3;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(140deg, #ccd5e0 0%, #8493a5 80%);
  display: grid;
  place-items: center;
}

.phone-deck-art-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.phone-deck-art-initials {
  color: rgba(255, 255, 255, 0.92);
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: 0.04em;
}

.phone-deck-meta {
  display: grid;
  gap: 2px;
}

.phone-deck-title {
  font-weight: 800;
  font-size: 0.9rem;
  line-height: 1.2;
}

.phone-deck-sub {
  color: var(--muted);
  font-size: 0.78rem;
}

.phone-deck-price {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 700;
}

.phone-deck-meta-line {
  font-size: 0.72rem;
}

.preview-note {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
  color: var(--muted);
  font-size: 0.84rem;
}

/* Toast */

/* With the drawer open, its Save/Cancel bar is pinned flush to the
   bottom-right — lift the toast above it so a toast (worst case: one with a
   clickable Undo) never covers the Save changes button. */
.drawer:not(.hidden) ~ .toast {
  bottom: 84px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  max-width: 420px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #201b1f;
  color: #fff;
  box-shadow: var(--shadow);
  padding: 12px 14px;
  font-size: 0.88rem;
}

/* An error is unmistakable and persists until dismissed (see toast.js). */
.toast.toast-error {
  background: #842d2d;
}

/* Offline / back-online notice (see shell-resilience.js). Sticky, so it stays
   in view while the page scrolls, but below the drawer, dialogs and toast. */
.offline-banner {
  position: sticky;
  top: 8px;
  z-index: 25;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--warning);
  border-radius: 8px;
  background: var(--tone-amber-soft);
  color: var(--ink);
  font-size: 0.9rem;
  box-shadow: var(--shadow-sm);
}

.offline-banner[data-status="reconnected"] {
  border-color: var(--tone-green);
  background: var(--tone-green-soft);
}

.offline-banner-message {
  flex: 1 1 auto;
  min-width: 0;
}

.offline-banner .button {
  flex: none;
  min-height: 32px;
  padding: 4px 10px;
}

@media (max-width: 1120px) {
  .pipeline-board {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
  .announcement-grid,
  .campaign-grid {
    grid-template-columns: 1fr;
  }
  .announcement-preview-panel,
  .campaign-preview-panel {
    position: static;
    max-height: none;
  }
  .app-surface-preview {
    height: 680px;
    min-height: 560px;
  }
  .broadcast-row,
  .announcement-row,
  .campaign-row {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 820px) {
  .topbar,
  .control-bar {
    align-items: flex-start;
    flex-direction: column;
  }
  .control-bar-tools {
    margin-left: 0;
    width: 100%;
  }
  .tab-nav {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    border-radius: 12px;
  }
  .search-bar {
    width: 100%;
  }
  .campaign-form-grid,
  .campaign-channel-group,
  .campaign-window-channel {
    grid-template-columns: 1fr;
  }
}

/* ===== Notification authoring redesign (Plan 1 foundation) =====
   Warm cream+gold guided authoring surface. All selectors namespaced under
   .notification-* and the --notification-* tokens; self-hosted Cormorant.
   Plans 2-4 attach this to the broadcast/announcement/campaign renderers. */

@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("./vendor/fonts/cormorant-garamond-600.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("./vendor/fonts/cormorant-garamond-700.woff2") format("woff2");
}

.notification-guided {
  display: grid;
  gap: 22px;
}
.notification-guided h2,
.notification-guided h3,
.notification-step-title,
.notification-lede-title {
  font-family: var(--notification-heading-font);
  font-weight: 600;
  letter-spacing: 0;
}

.notification-lede {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.notification-lede-title {
  font-size: 2rem;
  margin: 0;
}
.notification-lede p {
  color: var(--notification-ink-soft);
  margin: 0;
}

.notification-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 26px;
  align-items: start;
}
@media (min-width: 1280px) {
  .notification-layout {
    grid-template-columns: 1fr 420px;
    gap: 32px;
  }
}

/* Quick path to the saved list that sits below the composer. */
.notification-jump {
  margin-left: auto;
  align-self: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--notification-ink-soft);
  text-decoration: none;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  padding: 6px 14px;
  background: var(--notification-card);
  white-space: nowrap;
}
.notification-jump:hover {
  border-color: var(--notification-gold-strong);
  color: var(--ink);
}

.notification-empty-state {
  border: 1px dashed var(--notification-line);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
  color: var(--notification-ink-soft);
  background: var(--notification-card);
  list-style: none;
}

/* Technical detail lines stay available but visually subordinate. */
.tech-detail {
  font-size: 0.8rem;
  opacity: 0.8;
}
.tech-detail-disclosure {
  margin-top: 4px;
}
.tech-detail-disclosure summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--notification-ink-soft);
  width: fit-content;
}
.tech-detail-disclosure[open] summary {
  margin-bottom: 4px;
}
@media (max-width: 920px) {
  .notification-layout {
    grid-template-columns: 1fr;
  }
  .notification-preview-rail {
    position: static;
  }
}

.notification-steps {
  display: grid;
  gap: 18px;
}
.notification-step {
  background: var(--notification-card);
  border: 1px solid var(--notification-line);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  transition: box-shadow 0.2s, border-color 0.2s;
}
.notification-step:focus-within {
  border-color: var(--notification-gold-strong);
  box-shadow: var(--shadow);
}
.notification-step-head {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 4px;
}
.notification-step-number {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--notification-gold);
  color: #fff;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-family: var(--notification-heading-font);
  font-size: 1.25rem;
}
.notification-step-title {
  font-size: 1.18rem;
}
.notification-step-sub {
  color: var(--notification-ink-soft);
  font-size: 0.95rem;
  margin: 2px 0 16px 47px;
}

.notification-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.notification-choice-group.compact {
  gap: 8px;
}
.notification-choice {
  border: 1.5px solid var(--notification-line);
  background: var(--notification-card-soft);
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
  transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.notification-choice.compact {
  flex: 0 1 auto;
  padding: 9px 12px;
}
.notification-target-decks {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--notification-line);
}
.notification-target-decks .minihead,
.notification-preview-settings .minihead,
.notification-preview-tools .minihead,
.notification-linked-deck .minihead,
.notification-delivery-module .minihead,
.notification-button-section .minihead,
.notification-close-behavior .minihead {
  font-weight: 700;
  margin-bottom: 4px;
}
.notification-preview-settings,
.notification-linked-deck,
.notification-delivery-module,
.notification-button-section,
.notification-close-behavior {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--notification-line);
}
.notification-delivery-module {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--notification-line) 70%, var(--notification-gold) 30%);
  border-radius: 8px;
  background: color-mix(in srgb, var(--notification-card-soft) 78%, #fff 22%);
  padding: 16px;
}
.notification-preview-tools,
.notification-review-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--notification-line);
  display: grid;
  gap: 10px;
}
.notification-preview-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--notification-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--notification-card-soft) 72%, #fff 28%);
}
.notification-preview-switch button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--notification-ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.notification-preview-switch button[aria-pressed="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(44, 34, 25, 0.12);
}
.notification-preview-panel {
  display: grid;
  gap: 10px;
}
.notification-preview-panel[data-campaign-preview-active="false"] {
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}
.notification-review-panel {
  border: 1px solid var(--notification-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--notification-card-soft) 72%, #fff 28%);
  padding: 16px;
}
.notification-button-section {
  display: grid;
  gap: 12px;
}
.notification-action-slots {
  display: grid;
  gap: 12px;
}
.notification-action-slot {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--notification-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--notification-card-soft) 72%, #fff 28%);
}
.notification-action-slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.notification-action-slot-head b {
  font-size: 0.96rem;
  color: var(--ink);
}
.notification-action-slot-head span {
  color: var(--notification-ink-soft);
  font-size: 0.82rem;
  font-weight: 500;
  text-align: right;
}
.notification-action-slot label {
  margin-bottom: 0;
}
.notification-close-behavior .notification-choice {
  margin-top: 10px;
}
.notification-preview-settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  align-items: start;
}
.notification-preview-settings-grid label {
  align-self: start;
}
.notification-preview-settings-grid label:last-child {
  grid-column: 1 / -1;
}
@media (max-width: 680px) {
  .notification-preview-settings-grid {
    grid-template-columns: 1fr;
  }
}
.notification-choice:hover {
  border-color: var(--notification-gold-strong);
}
.notification-choice:active {
  transform: translateY(1px);
}
.notification-choice b {
  font-weight: 600;
  font-size: 0.98rem;
}
.notification-choice small {
  color: var(--notification-ink-soft);
  font-size: 0.8rem;
}
.notification-choice[aria-pressed="true"] {
  border-color: var(--notification-gold-strong);
  background: linear-gradient(180deg, #fbf3df, #f7eccf);
  box-shadow: inset 0 0 0 1px var(--notification-gold);
}

.notification-reveal {
  margin-top: 14px;
}
.notification-reveal[hidden] {
  display: none;
}

/* All text-like guided inputs (bare <input>, datetime-local/date/time/number,
   text) get the warm treatment; checkbox/radio are pills, so excluded. */
.notification-picker,
.notification-guided input:not([type="checkbox"]):not([type="radio"]),
.notification-guided textarea,
.notification-guided select {
  width: 100%;
  border: 1.5px solid var(--notification-line);
  border-radius: 12px;
  background: var(--notification-card-soft);
  color: var(--ink);
  padding: 13px 15px;
  font: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.notification-picker:focus,
.notification-guided input:not([type="checkbox"]):not([type="radio"]):focus,
.notification-guided textarea:focus,
.notification-guided select:focus {
  outline: none;
  border-color: var(--notification-gold-strong);
  background: #fff;
}

.notification-summary-card {
  background: var(--notification-card-soft);
  border: 1px dashed var(--notification-gold-strong);
  border-radius: 14px;
  padding: 16px 18px;
}

.notification-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  flex-wrap: wrap;
}

.notification-preview-rail {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 16px;
}

/* flatpickr calendar skinned to the cream+gold theme */
.flatpickr-calendar {
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--notification-line);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: var(--notification-gold);
  border-color: var(--notification-gold-strong);
  color: #3a2c12;
}
.flatpickr-day:hover {
  background: var(--notification-card-soft);
}

/* Guided form labels stack above their control; primary action uses the warm gold. */
.notification-guided label {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
  color: var(--notification-ink-soft);
  font-size: 0.92rem;
  font-weight: 600;
}
.notification-guided label[hidden] {
  display: none;
}
.notification-realfields label {
  margin-bottom: 0;
}
.notification-actions .button.primary {
  border-color: var(--notification-gold-strong);
  background: linear-gradient(180deg, #d8c692, var(--notification-gold));
  color: #3a2c12;
}
.notification-preview-rail .cap {
  color: var(--notification-ink-soft);
  font-size: 0.82rem;
  text-align: center;
}

/* Multi-select label-pills (announcements placements): native checkbox inside a
   .notification-choice label; the checkbox is visually hidden but stays native
   + .checked-collectable (position/opacity — NOT display:none/hidden/disabled),
   and the pressed look follows :has(input:checked) so native reset() updates it. */
.notification-choice:has(input:checked) {
  border-color: var(--notification-gold-strong);
  background: linear-gradient(180deg, #fbf3df, #f7eccf);
  box-shadow: inset 0 0 0 1px var(--notification-gold);
}
.notification-choice:has(input:focus-visible) {
  outline: 3px solid var(--notification-gold-strong);
  outline-offset: 2px;
}
.notification-choice > input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ===== Messaging Studio ===== */
.messaging-studio {
  display: grid;
  gap: 20px;
}
.messaging-studio-header {
  display: grid;
  gap: 5px;
  max-width: 760px;
}
.messaging-studio-header h1,
.messaging-studio-header p {
  margin: 0;
}
.messaging-studio-header h1 {
  font-family: var(--notification-heading-font);
  font-size: clamp(2.15rem, 4vw, 3.1rem);
  font-weight: 600;
  line-height: 1;
}
.messaging-studio-header > p:last-child {
  color: var(--notification-ink-soft);
  font-size: 1rem;
}
.messaging-studio-header .eyebrow {
  color: var(--notification-gold-ink);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.messaging-studio-taskbar,
.messaging-studio-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.messaging-studio-taskbar {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--notification-line);
}
.messaging-studio-task,
.messaging-studio-filter {
  min-height: 40px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
  cursor: pointer;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 8px 13px;
}
.messaging-studio-task.is-active,
.messaging-studio-filter.is-active {
  border-color: var(--notification-gold-strong);
  background: var(--notification-card);
  color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--notification-gold-strong);
}
.messaging-studio-count {
  display: inline-grid;
  min-width: 22px;
  min-height: 22px;
  margin-left: 5px;
  padding: 0 5px;
  place-items: center;
  border-radius: 999px;
  background: var(--notification-paper);
  color: var(--notification-ink-soft);
  font-size: 0.75rem;
}
.messaging-studio-filter-label {
  margin-right: 3px;
  color: var(--notification-ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.messaging-studio button:focus-visible,
.messaging-studio a:focus-visible,
.messaging-studio input:focus-visible,
.messaging-studio textarea:focus-visible,
.messaging-studio select:focus-visible {
  outline: 3px solid var(--notification-gold-strong);
  outline-offset: 3px;
}
.messaging-studio [hidden] {
  display: none !important;
}
.messaging-studio-body,
.messaging-studio-create,
.messaging-studio-inventory {
  min-width: 0;
}
.messaging-studio-create,
.messaging-studio-inventory {
  display: grid;
  gap: 20px;
}
.messaging-studio-workspace {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 420px;
  gap: 24px;
  align-items: start;
}
.messaging-studio-timeline {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 9px;
}
.messaging-studio-timeline button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 1px 10px;
  align-items: center;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--notification-line);
  border-left: 4px solid transparent;
  border-radius: 12px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
  cursor: pointer;
  font: inherit;
  text-align: left;
}
.messaging-studio-timeline button > span {
  grid-row: 1 / span 2;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--notification-line);
  border-radius: 50%;
  font-weight: 800;
}
.messaging-studio-timeline button strong {
  color: var(--ink);
  font-size: 0.9rem;
}
.messaging-studio-timeline button small {
  overflow: hidden;
  font-size: 0.74rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.messaging-studio-timeline button[aria-selected="true"] {
  border-color: var(--notification-gold-strong);
  border-left-color: var(--notification-gold-strong);
  background: var(--notification-card);
  box-shadow: var(--shadow-sm);
}
.messaging-studio-timeline button[aria-selected="true"] > span {
  border-color: var(--notification-gold-strong);
  background: var(--notification-gold);
  color: var(--ink);
}
.messaging-studio-editor {
  min-width: 0;
}
.messaging-studio-editor .notification-step {
  min-height: 360px;
}
.messaging-studio-live-region {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.messaging-studio-warnings {
  overflow: hidden;
  border: 1px solid var(--notification-gold-strong);
  border-radius: 14px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
}
.messaging-studio-warnings > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}
.messaging-studio-warnings > summary::-webkit-details-marker {
  display: none;
}
.messaging-studio-warnings > summary > span {
  display: grid;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  place-items: center;
  border-radius: 999px;
  background: rgba(179, 154, 99, 0.16);
  font-size: 0.72rem;
  font-weight: 850;
}
.messaging-studio-warnings strong {
  color: var(--ink);
}
.messaging-studio-warnings ul {
  margin: 0;
  padding: 10px 34px 12px;
  border-top: 1px solid var(--notification-line);
}
.messaging-studio-empty {
  display: grid;
  justify-items: start;
  gap: 8px;
  padding: 28px;
  border: 1px dashed var(--notification-line);
  border-radius: 16px;
  background: var(--notification-card);
}
.messaging-studio-empty h3,
.messaging-studio-empty p {
  margin: 0;
}
.messaging-studio-empty p {
  color: var(--notification-ink-soft);
}
.messaging-source-dashboard-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-end;
  gap: 16px 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--notification-line);
}
.messaging-source-dashboard-header h2,
.messaging-source-dashboard-header p {
  margin: 0;
}
.messaging-source-dashboard-header h2 {
  margin-top: 4px;
  font-family: var(--notification-heading-font);
  font-size: clamp(1.7rem, 2vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.025em;
}
.messaging-source-dashboard-copy > p:last-child {
  margin-top: 6px;
  color: var(--notification-ink-soft);
}
.messaging-inventory-controls {
  display: grid;
  grid-template-columns: auto minmax(190px, 230px);
  gap: 10px 12px;
  align-items: end;
  min-width: min(100%, 470px);
}
.messaging-layout-control,
.messaging-version-filter-control {
  display: grid;
  gap: 5px;
}
.messaging-layout-control > span,
.messaging-version-filter-control > span {
  color: var(--notification-ink-soft);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.messaging-layout-control > div {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--notification-line);
  border-radius: 13px;
  background: var(--notification-card-soft);
}
.messaging-layout-control button {
  min-height: 36px;
  padding: 7px 11px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--notification-ink-soft);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
}
.messaging-layout-control button[aria-pressed="true"] {
  background: var(--accent-strong);
  color: #fff;
  box-shadow: 0 3px 9px rgba(38, 91, 86, 0.18);
}
.messaging-version-filter-control select {
  min-height: 44px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 12px;
  background: var(--notification-card);
  color: var(--ink);
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}
.messaging-inventory-controls .messaging-source-group-control,
.messaging-layout-hint {
  grid-column: 1 / -1;
  margin: 0;
}
.messaging-inventory-controls .messaging-source-group-control {
  justify-self: end;
}
.messaging-layout-hint {
  color: var(--notification-ink-soft);
  font-size: 0.74rem;
  text-align: right;
}
.messaging-source-dashboard-stats {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.messaging-source-dashboard-stats > span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--notification-card) 88%, var(--notification-wash));
  color: var(--notification-ink-soft);
  font-size: 0.74rem;
  font-weight: 750;
}
.messaging-source-dashboard-stats strong {
  color: var(--accent-strong);
  font-family: var(--notification-heading-font);
  font-size: 0.96rem;
}
.messaging-source-group-control {
  display: grid;
  grid-template-columns: auto minmax(170px, 220px);
  gap: 4px 10px;
  align-items: center;
  flex: 0 0 auto;
  color: var(--notification-ink-soft);
}
.messaging-source-group-control > span {
  font-size: 0.76rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.messaging-source-group-control select {
  min-height: 42px;
  padding: 8px 36px 8px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 12px;
  background: var(--notification-card);
  color: var(--ink);
  font-weight: 750;
  box-shadow: var(--shadow-sm);
}
.messaging-source-group-control small {
  grid-column: 1 / -1;
  text-align: right;
}
.messaging-source-groups {
  display: grid;
  gap: 22px;
}
.messaging-source-group {
  display: grid;
  gap: 13px;
  padding: 18px;
  border: 1px solid var(--notification-line);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.55);
}
.messaging-source-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 3px;
}
.messaging-source-group-header h3,
.messaging-source-group-header p {
  margin: 0;
}
.messaging-source-group-header h3 {
  font-family: var(--notification-heading-font);
  font-size: 1.4rem;
  font-weight: 600;
}
.messaging-source-group-header p {
  margin-top: 3px;
  color: var(--notification-ink-soft);
  font-size: 0.82rem;
}
.messaging-source-group-header > span {
  min-width: 32px;
  padding: 5px 10px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
}
.messaging-status-board {
  display: grid;
  grid-template-columns: repeat(5, minmax(218px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  scroll-snap-type: x proximity;
}
.messaging-status-lane {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 190px;
  padding: 10px;
  border: 1px solid var(--notification-line);
  border-radius: 15px;
  background: color-mix(in srgb, var(--notification-card-soft) 78%, transparent);
  scroll-snap-align: start;
}
.messaging-status-lane > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-height: 55px;
  padding: 2px 2px 8px;
  border-bottom: 1px solid var(--notification-line);
}
.messaging-status-lane > header h3,
.messaging-status-lane > header p,
.messaging-status-lane-empty {
  margin: 0;
}
.messaging-status-lane > header h3 {
  font-family: var(--notification-heading-font);
  font-size: 1.03rem;
  font-weight: 650;
}
.messaging-status-lane > header p,
.messaging-status-lane-empty {
  margin-top: 3px;
  color: var(--notification-ink-soft);
  font-size: 0.75rem;
  line-height: 1.35;
}
.messaging-status-lane > header > span {
  display: grid;
  flex: 0 0 auto;
  min-width: 29px;
  height: 29px;
  padding: 0 7px;
  place-items: center;
  border-radius: 999px;
  background: var(--notification-card);
  color: var(--notification-ink-soft);
  font-size: 0.75rem;
  font-weight: 850;
  box-shadow: inset 0 0 0 1px var(--notification-line);
}
.messaging-status-lane[data-status-lane="scheduled"] {
  border-top: 4px solid var(--notification-gold-strong);
}
.messaging-status-lane[data-status-lane="live"] {
  border-top: 4px solid var(--accent-strong);
}
.messaging-status-lane[data-status-lane="attention"] {
  border-top: 4px solid var(--warning, #a56a00);
}
.messaging-status-lane[data-status-lane="ended"] {
  border-top: 4px solid #8b8280;
}
.messaging-status-lane .messaging-source-card {
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 13px 12px 12px 15px;
  border-radius: 13px;
}
.messaging-status-lane .messaging-source-card h3 {
  font-size: 1rem;
}
.messaging-status-lane .messaging-source-card-meta {
  padding-top: 12px;
  padding-left: 0;
  border-top: 1px solid var(--notification-line);
  border-left: 0;
}
.messaging-status-lane .messaging-announcement-editor-grid {
  grid-template-columns: 1fr;
}
.messaging-status-lane-empty {
  display: grid;
  min-height: 72px;
  place-items: center;
  border: 1px dashed var(--notification-line);
  border-radius: 13px;
}
.messaging-board-card[draggable="true"] {
  cursor: grab;
}
.messaging-board-card.is-dragging {
  opacity: 0.48;
  cursor: grabbing;
}
.messaging-status-lane.is-drop-target {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--notification-card-soft));
  box-shadow: inset 0 0 0 2px var(--accent);
}
.messaging-status-lane.is-drop-blocked {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 6%, var(--notification-card-soft));
}
.messaging-board-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--notification-ink-soft);
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}
.messaging-board-drag-hint {
  padding: 3px 6px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card-soft);
  letter-spacing: 0.02em;
  text-transform: none;
}
.messaging-board-card .messaging-source-chips {
  gap: 5px;
}
.messaging-board-card .messaging-source-chip {
  min-height: 22px;
  padding: 2px 7px;
  font-size: 0.68rem;
}
.messaging-board-card-schedule,
.messaging-board-card-pin {
  margin: 0;
  color: var(--notification-ink-soft);
  font-size: 0.72rem;
  line-height: 1.35;
}
.messaging-board-card-pin {
  display: grid;
  gap: 1px;
}
.messaging-board-card-pin strong {
  color: var(--ink);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.messaging-board-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 3px;
}
.messaging-board-move-menu {
  position: relative;
  margin-left: auto;
}
.messaging-board-move-menu > summary {
  padding: 6px 9px;
  border: 1px solid var(--notification-line);
  border-radius: 9px;
  background: var(--notification-card-soft);
  color: var(--ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 800;
  list-style: none;
}
.messaging-board-move-menu > summary::-webkit-details-marker {
  display: none;
}
.messaging-board-move-menu[open] > summary {
  border-color: var(--accent);
}
.messaging-board-move-menu > div {
  display: grid;
  min-width: 190px;
  margin-top: 5px;
  overflow: hidden;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: var(--notification-card);
  box-shadow: var(--shadow);
}
.messaging-board-move-menu button {
  padding: 9px 10px;
  border: 0;
  border-bottom: 1px solid var(--notification-line);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 720;
  text-align: left;
}
.messaging-board-move-menu button:last-child {
  border-bottom: 0;
}
.messaging-board-move-menu button:hover,
.messaging-board-move-menu button:focus-visible {
  background: var(--accent-soft);
}
.messaging-source-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.messaging-source-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.42fr);
  gap: 22px;
  overflow: hidden;
  padding: 21px 22px 20px 25px;
  border: 1px solid var(--notification-line);
  border-radius: 19px;
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 185, 140, 0.09), transparent 28%),
    var(--notification-card);
  box-shadow: 0 8px 22px rgba(65, 49, 43, 0.055);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.messaging-source-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--notification-gold-strong);
  content: "";
}
.messaging-source-card[data-primary-channel="in_app"]::before {
  background: #457c77;
}
.messaging-source-card[data-primary-channel="device_reminder"]::before {
  background: #766781;
}
.messaging-source-card[data-primary-channel="mixed"]::before {
  background: linear-gradient(#457c77 0 50%, var(--notification-gold-strong) 50%);
}
.messaging-source-card:has(.messaging-announcement-editor[open]) {
  border-color: rgba(69, 124, 119, 0.48);
  box-shadow: 0 15px 38px rgba(65, 49, 43, 0.1);
}
.messaging-source-card-main,
.messaging-source-card-meta {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}
.messaging-source-card h3,
.messaging-source-card p {
  margin: 0;
}
.messaging-source-card h3 {
  font-family: var(--notification-heading-font);
  font-size: 1.38rem;
  font-weight: 600;
  line-height: 1.15;
}
.messaging-source-card p,
.messaging-source-card-meta,
.messaging-source-eyebrow {
  color: var(--notification-ink-soft);
  font-size: 0.84rem;
}
.messaging-source-eyebrow,
.messaging-source-chips {
  display: flex;
  gap: 7px;
  align-items: center;
  flex-wrap: wrap;
}
.messaging-source-eyebrow {
  font-weight: 800;
  letter-spacing: 0.03em;
}
.messaging-source-parent {
  padding-left: 7px;
  border-left: 1px solid var(--notification-line);
}
.messaging-source-chip {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 9px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}
.messaging-source-card-meta {
  padding-left: 20px;
  border-left: 1px solid var(--notification-line);
}
.messaging-source-facts {
  display: grid;
  gap: 10px;
  margin: 0;
}
.messaging-source-facts > div {
  display: grid;
  gap: 2px;
}
.messaging-source-facts dt {
  color: var(--notification-ink-soft);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.2;
  text-transform: uppercase;
}
.messaging-source-facts dd {
  margin: 0;
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.35;
}
.messaging-source-facts .messaging-source-metrics {
  margin-top: 2px;
  padding: 9px 10px;
  border: 1px solid rgba(69, 124, 119, 0.18);
  border-radius: 10px;
  background: rgba(69, 124, 119, 0.065);
}
.messaging-source-control {
  font-weight: 700;
}
.messaging-recipe-preview {
  display: grid;
  gap: 4px;
  padding: 11px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 12px;
  background: var(--notification-card-soft);
}
.messaging-recipe-preview > span {
  color: var(--notification-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.messaging-recipe-preview > strong {
  color: var(--ink);
  font-size: 0.88rem;
}
.messaging-source-card .messaging-source-limitation {
  padding-top: 8px;
  border-top: 1px solid var(--notification-line);
  font-size: 0.76rem;
  line-height: 1.45;
}
.messaging-source-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.messaging-recipe-editor {
  grid-column: 1 / -1;
  padding: 12px 14px;
  border: 1px solid var(--notification-line);
  border-radius: 13px;
  background: var(--notification-card-soft);
}
.messaging-announcement-editor {
  grid-column: 1 / -1;
  overflow: hidden;
  border: 1px solid rgba(69, 124, 119, 0.25);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.94);
  box-shadow: 0 10px 26px rgba(65, 49, 43, 0.06);
}
.messaging-announcement-editor > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 16px;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.messaging-announcement-editor > summary::-webkit-details-marker {
  display: none;
}
.messaging-announcement-editor-state {
  flex: 0 0 auto;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(69, 124, 119, 0.1);
  color: #355f5b;
  font-size: 0.72rem;
  font-weight: 800;
}
.messaging-announcement-editor-state [data-editor-open-label] {
  display: none;
}
.messaging-announcement-editor[open] > summary {
  border-bottom: 1px solid var(--notification-line);
  background: rgba(69, 124, 119, 0.055);
}
.messaging-announcement-editor[open] .messaging-announcement-editor-state [data-editor-closed-label] {
  display: none;
}
.messaging-announcement-editor[open] .messaging-announcement-editor-state [data-editor-open-label] {
  display: inline;
}
.messaging-announcement-editor-summary {
  display: grid;
  gap: 2px;
}
.messaging-announcement-editor-summary strong {
  font-size: 0.9rem;
  font-weight: 850;
}
.messaging-announcement-editor-summary small {
  color: var(--notification-ink-soft);
  font-size: 0.75rem;
  font-weight: 550;
}
.messaging-announcement-editor[open] {
  display: grid;
}
.messaging-announcement-editor form {
  display: grid;
  gap: 15px;
  padding: 17px;
}
.messaging-announcement-editor-section {
  display: grid;
  gap: 15px;
  padding: 16px;
  border: 1px solid var(--notification-line);
  border-radius: 14px;
  background: var(--notification-card);
}
.messaging-announcement-editor-section > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}
.messaging-announcement-editor-section > header > span {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: #457c77;
  color: #fff;
  font-size: 0.76rem;
  font-weight: 850;
}
.messaging-announcement-editor-section h4,
.messaging-announcement-editor-section p {
  margin: 0;
}
.messaging-announcement-editor-section h4 {
  color: var(--ink);
  font-size: 0.92rem;
}
.messaging-announcement-editor-section header p {
  margin-top: 2px;
  color: var(--notification-ink-soft);
  font-size: 0.76rem;
  line-height: 1.4;
}
.messaging-announcement-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.messaging-announcement-editor-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 780;
}
.messaging-announcement-editor-grid label > small {
  color: var(--notification-ink-soft);
  font-size: 0.7rem;
  font-weight: 550;
  line-height: 1.35;
}
.messaging-announcement-editor-grid .wide {
  grid-column: 1 / -1;
}
.messaging-announcement-content-grid {
  grid-template-columns: 1fr;
}
.messaging-announcement-editor-grid input,
.messaging-announcement-editor-grid textarea,
.messaging-announcement-editor-grid select {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: #fffdfb;
  color: var(--ink);
  font: inherit;
  font-weight: 550;
}
.messaging-announcement-editor-grid textarea {
  min-height: 88px;
  resize: vertical;
}
.messaging-announcement-editor-grid .messaging-announcement-check {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: var(--notification-card-soft);
}
.messaging-announcement-editor-grid .messaging-announcement-check input {
  width: auto;
  min-height: 0;
  margin: 2px 0 0;
  accent-color: #457c77;
}
.messaging-announcement-check span {
  display: grid;
  gap: 2px;
}
.messaging-announcement-check strong {
  font-size: 0.78rem;
}
.messaging-announcement-editor-note {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-left: 3px solid #457c77;
  border-radius: 3px 10px 10px 3px;
  background: rgba(69, 124, 119, 0.07);
  color: var(--notification-ink-soft);
  font-size: 0.75rem;
  line-height: 1.42;
}
.messaging-announcement-editor-note strong {
  color: #355f5b;
}
.messaging-announcement-editor-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.messaging-announcement-editor-actions .hint {
  flex: 1 1 180px;
  min-width: 0;
}
.messaging-announcement-archive {
  margin-left: auto;
}
.messaging-recipe-editor > summary {
  color: var(--ink);
  font-weight: 800;
  cursor: pointer;
}
.messaging-recipe-editor[open] {
  display: grid;
  gap: 12px;
}
.messaging-recipe-editor label,
.messaging-recipe-rollout {
  display: grid;
  gap: 6px;
}
.messaging-recipe-editor input,
.messaging-recipe-editor textarea {
  width: 100%;
  box-sizing: border-box;
}
.messaging-recipe-guardrail,
.messaging-recipe-evidence,
.messaging-recipe-rollout {
  padding: 11px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 11px;
  background: var(--notification-card);
  color: var(--notification-ink-soft);
  font-size: 0.82rem;
  line-height: 1.45;
}
.messaging-recipe-rollout h4,
.messaging-recipe-rollout p {
  margin: 0;
}

/* Message workspace loading and campaign series editor */
.message-selection-load-state,
.campaign-series-load-state {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid var(--notification-line);
  border-radius: 16px;
  background: var(--notification-card);
}
.campaign-series-load-state.is-error {
  border-color: var(--danger);
}
.campaign-series-workspace {
  display: grid;
  gap: 18px;
  min-width: 0;
}
.campaign-series-header,
.campaign-series-editor-header,
.campaign-series-region-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.campaign-series-header {
  padding: 16px 18px;
  border: 1px solid var(--notification-line);
  border-radius: 16px;
  background: var(--notification-card);
}

.campaign-series-warning {
  display: grid;
  gap: 4px;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--warning, #a56a00);
  border-radius: 12px;
  background: color-mix(in srgb, var(--warning, #a56a00) 9%, transparent);
}

.campaign-series-warning p {
  margin: 0;
}
.campaign-series-header h2,
.campaign-series-region-heading h3,
.campaign-series-editor-header h3 {
  margin: 0;
}
.campaign-series-state,
.campaign-series-region-heading > span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card-soft);
  color: var(--notification-ink-soft);
  font-size: 0.78rem;
  font-weight: 800;
}
.campaign-series-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 380px;
  gap: 20px;
  align-items: start;
  min-width: 0;
}
.campaign-series-timeline,
.campaign-series-editor,
.campaign-series-preview-rail {
  min-width: 0;
  border: 1px solid var(--notification-line);
  border-radius: 16px;
  background: var(--notification-card);
  box-shadow: var(--shadow-sm);
}
.campaign-series-timeline,
.campaign-series-preview-rail {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 12px;
  padding: 14px;
}
.campaign-series-preview-rail {
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.campaign-series-step-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.campaign-series-step {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--notification-line);
  border-radius: 13px;
  background: var(--notification-card-soft);
}
.campaign-series-step.is-selected {
  border-color: var(--notification-gold-strong);
  background: var(--notification-card);
  box-shadow: 0 0 0 2px rgba(179, 154, 99, 0.18);
}
.campaign-series-step-select {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  padding: 4px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.campaign-series-step-number {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  background: var(--notification-gold);
  font-weight: 800;
}
.campaign-series-step-main,
.campaign-series-step-badges {
  display: flex;
  gap: 5px;
  min-width: 0;
}
.campaign-series-step-main {
  flex-direction: column;
}
.campaign-series-step-main strong,
.campaign-series-step-main small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.campaign-series-step-main small {
  color: var(--notification-ink-soft);
  font-size: 0.73rem;
}
.campaign-series-step-badges {
  grid-column: 1 / -1;
  flex-wrap: wrap;
}
.campaign-series-step-badges span {
  padding: 2px 6px;
  border: 1px solid var(--notification-line);
  border-radius: 999px;
  background: var(--notification-card);
  color: var(--notification-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
}
.campaign-series-step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.campaign-series-step-actions button {
  min-height: 30px;
  padding: 4px 7px;
  border: 1px solid var(--notification-line);
  border-radius: 7px;
  background: var(--notification-card);
  color: var(--notification-ink-soft);
  cursor: pointer;
  font-size: 0.68rem;
  font-weight: 700;
}
.campaign-series-step-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.campaign-series-add,
.campaign-series-add-chooser,
.campaign-series-empty,
.campaign-series-editor-empty {
  display: grid;
  gap: 8px;
}
.campaign-series-add-chooser {
  grid-template-columns: 1fr 1fr;
}
.campaign-series-empty,
.campaign-series-editor-empty {
  padding: 18px;
  border: 1px dashed var(--notification-line);
  border-radius: 12px;
  color: var(--notification-ink-soft);
}
.campaign-series-editor {
  overflow: hidden;
}
.campaign-series-editor-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--notification-line);
}
.campaign-series-save-status {
  color: var(--notification-ink-soft);
  font-size: 0.8rem;
  font-weight: 800;
}
.campaign-series-recovery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--notification-line);
  background: color-mix(in srgb, var(--warning, #a56a00) 8%, transparent);
}
.campaign-series-comparison {
  display: grid;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--notification-line);
  outline: none;
}
.campaign-series-comparison h4,
.campaign-series-comparison h5,
.campaign-series-comparison p {
  margin: 0;
}
.campaign-series-comparison > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.campaign-series-comparison article {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: var(--notification-card-soft);
  overflow-wrap: anywhere;
}
.campaign-series-editor-form {
  display: grid;
}
.campaign-series-editor-section {
  display: grid;
  gap: 12px;
  padding: 20px;
  border-bottom: 1px solid var(--notification-line);
}
.campaign-series-editor-section:last-child {
  border-bottom: 0;
}
.campaign-series-editor-section h4 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: 1.2rem;
}
.campaign-series-editor-section label,
.campaign-series-editor-section fieldset {
  display: grid;
  gap: 6px;
  margin: 0;
  color: var(--notification-ink-soft);
  font-size: 0.82rem;
  font-weight: 700;
}
.campaign-series-editor-section input,
.campaign-series-editor-section select,
.campaign-series-editor-section textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid var(--notification-line);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}
.campaign-series-editor-section textarea {
  min-height: 110px;
  resize: vertical;
}
.campaign-series-editor-section label:has(input[type="radio"]),
.campaign-series-editor-section label:has(input[type="checkbox"]) {
  display: flex;
  align-items: center;
}
.campaign-series-editor-section input[type="radio"],
.campaign-series-editor-section input[type="checkbox"] {
  width: auto;
  min-height: auto;
}
.campaign-series-action-fields,
.campaign-series-schedule,
.campaign-series-audience-override {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.campaign-series-recurrence-toggle {
  width: fit-content;
  padding: 10px 12px;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: var(--notification-card-soft);
  color: var(--ink) !important;
}
.campaign-series-recurrence-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--notification-gold-strong);
  border-radius: 12px;
  background: color-mix(in srgb, var(--notification-gold-strong) 7%, white);
}
.campaign-series-recurrence-controls .hint {
  grid-column: 1 / -1;
  margin: 0;
}
.campaign-series-recurrence-controls[hidden] {
  display: none;
}
.campaign-series-preview-surface {
  display: grid;
  gap: 12px;
  min-height: 420px;
  align-items: start;
  justify-items: stretch;
  padding: 18px;
  border: 1px solid var(--notification-line);
  border-radius: 18px;
  background: linear-gradient(160deg, #efe5d2, #e6d8e2);
  text-align: left;
}
.campaign-series-preview-surface > p,
.campaign-series-preview-surface > label {
  margin: 0;
}
.campaign-series-preview-surface > label {
  display: grid;
  gap: 6px;
  color: var(--notification-ink-soft);
  font-size: 0.86rem;
  font-weight: 700;
}
.campaign-series-preview-surface select {
  width: 100%;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--notification-line);
  border-radius: 10px;
  background: var(--notification-card);
  color: var(--ink);
  font: inherit;
}
.campaign-series-preview-frame {
  display: block;
  width: 100%;
  min-height: 660px;
  aspect-ratio: 390 / 844;
  border: 1px solid var(--notification-line);
  border-radius: 22px;
  background: #19151f;
  box-shadow: 0 12px 30px rgba(28, 24, 34, 0.22);
}
.campaign-series-review,
.campaign-legacy-conversion {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--notification-line);
  border-radius: 14px;
  background: var(--notification-card-soft);
}
.campaign-series-review > header,
.campaign-legacy-conversion > header {
  display: flex;
  gap: 12px;
  align-items: start;
  justify-content: space-between;
}
.campaign-series-review h3,
.campaign-legacy-conversion h3,
.campaign-series-review p,
.campaign-legacy-conversion p {
  margin: 0;
}
.campaign-series-review-sequence,
.campaign-series-review-issues,
.campaign-series-workflow-result ul,
.campaign-legacy-conversion ol {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.campaign-series-review-sequence > li,
.campaign-legacy-conversion li {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--notification-line);
  border-radius: 11px;
  background: var(--notification-card);
}
.campaign-series-review-sequence > li > div,
.campaign-legacy-conversion li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}
.campaign-series-review-sequence > li > div > span:first-child,
.campaign-legacy-conversion li > span:first-child {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--notification-gold);
  font-size: 0.75rem;
  font-weight: 800;
}
.campaign-series-review-sequence dl,
.campaign-series-review-confirmation {
  display: grid;
  gap: 6px;
  margin: 0;
}
.campaign-series-review-sequence dl > div,
.campaign-series-review-confirmation > div {
  display: grid;
  grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1.5fr);
  gap: 8px;
}
.campaign-series-review-sequence dt,
.campaign-series-review-confirmation dt {
  color: var(--notification-ink-soft);
  font-size: 0.72rem;
  font-weight: 800;
}
.campaign-series-review-sequence dd,
.campaign-series-review-confirmation dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}
.campaign-series-review-confirmation,
.campaign-series-stop-semantics,
.campaign-series-workflow-result {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--notification-line);
  border-radius: 11px;
  background: var(--notification-card);
}
.campaign-series-review-issues li {
  padding: 9px 11px;
  border-left: 4px solid var(--warning, #a56a00);
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning, #a56a00) 9%, transparent);
}
.campaign-series-review-issues li.is-blocking,
.campaign-series-workflow-state.is-error {
  border-color: var(--danger);
  color: var(--danger);
}
.campaign-series-workflow-actions,
.campaign-legacy-conversion > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.campaign-series-workflow-state {
  min-height: 1.25rem;
  color: var(--notification-ink-soft);
  font-size: 0.8rem;
}
.campaign-legacy-conversion {
  margin: 18px 0;
  box-shadow: var(--shadow-sm);
}
.campaign-series-workspace button:focus-visible,
.campaign-series-workspace input:focus-visible,
.campaign-series-workspace select:focus-visible,
.campaign-series-workspace textarea:focus-visible,
.campaign-series-workspace summary:focus-visible {
  outline: 3px solid var(--notification-gold-strong);
  outline-offset: 2px;
}

@media (max-width: 1279px) {
  .messaging-studio-workspace {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .messaging-studio-timeline {
    position: static;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .campaign-series-layout {
    grid-template-columns: 240px minmax(0, 1fr);
  }
  .campaign-series-preview-rail {
    position: static;
    grid-column: 2;
  }
}

@media (max-width: 920px) {
  .messaging-studio-workspace {
    grid-template-columns: 1fr;
  }
  .messaging-studio-timeline {
    grid-column: auto;
    grid-template-columns: repeat(4, minmax(190px, 1fr));
    overflow-x: auto;
    padding: 3px 3px 9px;
    scroll-snap-type: x proximity;
  }
  .messaging-studio-timeline button {
    scroll-snap-align: start;
  }
  .notification-preview-rail {
    position: static;
  }
  .campaign-series-layout {
    grid-template-columns: 1fr;
  }
  .campaign-series-timeline {
    position: static;
    overflow-x: auto;
  }
  .campaign-series-step-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(240px, 82vw);
    overflow-x: auto;
    padding-bottom: 7px;
    scroll-snap-type: x proximity;
  }
  .campaign-series-step {
    scroll-snap-align: start;
  }
  .campaign-series-preview-rail {
    position: static;
    grid-column: auto;
  }
  .messaging-source-card {
    grid-template-columns: 1fr;
  }
  .messaging-source-card-meta {
    padding-top: 12px;
    padding-left: 0;
    border-top: 1px solid var(--notification-line);
    border-left: 0;
  }
  .messaging-source-dashboard-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .messaging-inventory-controls {
    min-width: 0;
  }
}

@media (max-width: 560px) {
  .messaging-source-dashboard-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .messaging-inventory-controls {
    grid-template-columns: 1fr;
  }
  .messaging-inventory-controls .messaging-source-group-control,
  .messaging-layout-hint {
    grid-column: auto;
    justify-self: stretch;
    text-align: left;
  }
  .messaging-layout-control > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .messaging-source-dashboard-stats {
    grid-column: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .messaging-source-dashboard-stats > span {
    min-width: 0;
    padding: 10px;
    flex-direction: column;
    gap: 2px;
  }
  .messaging-source-group-control {
    grid-template-columns: 1fr;
  }
  .messaging-source-group-control small {
    grid-column: auto;
    text-align: left;
  }
  .messaging-source-group {
    padding: 13px;
  }
  .messaging-announcement-editor-grid {
    grid-template-columns: 1fr;
  }
  .messaging-announcement-editor form {
    padding: 12px;
  }
  .messaging-announcement-editor-section {
    padding: 13px;
  }
  .messaging-announcement-editor > summary {
    padding: 13px;
  }
  .messaging-announcement-editor-summary small {
    display: none;
  }
  .messaging-announcement-editor-actions .button {
    flex: 1 1 100%;
  }
  .messaging-announcement-archive {
    margin-left: 0;
  }
  .messaging-studio-taskbar,
  .messaging-studio-filterbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
  }
  .messaging-studio-task,
  .messaging-studio-filter {
    flex: 0 0 auto;
  }
  .messaging-studio-filter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .notification-step {
    padding: 18px;
  }
}

/* ===== Store Studio product-management redesign ===== */

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

.shell {
  width: min(1760px, 100%);
  padding: 18px;
}

.topbar {
  padding: 10px 4px 18px;
}

.topbar h1 {
  font-size: clamp(1.5rem, 2.2vw, 2.15rem);
}

.dashboard {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 0;
  min-height: calc(100vh - 116px);
  /* Any non-visible overflow value turns the dashboard into the sticky
     containing block, even though the dashboard itself never scrolls. Keep
     overflow visible and round the two child surfaces instead. */
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--line) 84%, white);
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 82%, white);
  box-shadow: 0 26px 80px rgba(49, 35, 43, 0.12);
}

.workspace-sidebar {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 24px 16px;
  border-radius: 21px 0 0 21px;
  background:
    radial-gradient(circle at 14% 4%, rgba(181, 155, 98, 0.2), transparent 32%),
    linear-gradient(165deg, #2b252a 0%, #1f1b1f 72%);
  color: #f8f1ec;
}

.workspace-sidebar-toggle {
  position: absolute;
  top: 18px;
  right: 12px;
  z-index: 22;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 18%);
  border-radius: 999px;
  background: rgb(255 255 255 / 8%);
  color: rgb(255 255 255 / 82%);
  box-shadow: none;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.workspace-sidebar-toggle:hover,
.workspace-sidebar-toggle:focus-visible {
  background: rgb(255 255 255 / 16%);
  color: #fff;
  outline: 2px solid color-mix(in srgb, var(--gold-light) 72%, white);
  outline-offset: 2px;
}

.workspace-sidebar-toggle span {
  transform: translateY(-1px);
}

.workspace-sidebar-collapsed .workspace-sidebar {
  gap: 16px;
  padding: 62px 8px 18px;
}

.workspace-sidebar-collapsed .workspace-sidebar-toggle {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}

.workspace-sidebar-collapsed .workspace-sidebar-heading,
.workspace-sidebar-collapsed .tab-group h2 {
  display: none;
}

.workspace-sidebar-collapsed .workspace-sidebar .tab-nav,
.workspace-sidebar-collapsed .tab-group,
.workspace-sidebar-collapsed .tab-group-items {
  gap: 8px;
}

.workspace-sidebar-collapsed .workspace-sidebar .tab {
  width: 42px;
  min-height: 42px;
  padding: 0;
  overflow: hidden;
  color: transparent;
  font-size: 0;
  text-align: center;
}

.workspace-sidebar-collapsed .workspace-sidebar .tab::before {
  content: attr(data-short-label);
  display: grid;
  color: rgba(248, 241, 236, 0.9);
  font-size: 0.72rem;
  font-weight: 800;
  place-items: center;
}

.workspace-sidebar-collapsed .workspace-sidebar .tab.active::before {
  color: #fff;
}

.workspace-sidebar-heading {
  display: grid;
  gap: 3px;
  padding: 0 10px;
}

.workspace-sidebar-heading strong {
  font-family: var(--notification-heading-font);
  font-size: 1.35rem;
  font-weight: 600;
}

.workspace-sidebar-kicker {
  color: rgba(248, 241, 236, 0.56);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.workspace-build {
  margin-top: 7px;
  color: rgba(248, 241, 236, 0.62);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.workspace-stage {
  min-width: 0;
  border-radius: 0 21px 21px 0;
  background:
    linear-gradient(rgba(255, 252, 249, 0.92), rgba(250, 246, 242, 0.96)),
    var(--surface);
}

.workspace-stage > .control-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 68px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 252, 249, 0.88);
  backdrop-filter: blur(18px);
}

.workspace-breadcrumb {
  color: var(--ink);
  font-family: var(--notification-heading-font);
  font-size: 1.22rem;
  font-weight: 600;
}

.workspace-sidebar .tab-nav {
  display: grid;
  align-items: stretch;
  gap: 22px;
  width: 100%;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

.tab-group {
  display: grid;
  gap: 6px;
}

.tab-group h2 {
  margin: 0 10px 2px;
  color: rgba(248, 241, 236, 0.46);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.tab-group-items {
  display: grid;
  gap: 3px;
}

.workspace-sidebar .tab {
  width: 100%;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 11px;
  color: rgba(248, 241, 236, 0.7);
  font-size: 0.86rem;
  text-align: left;
}

.workspace-sidebar .tab:hover {
  border-color: rgba(248, 241, 236, 0.1);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.workspace-sidebar .tab.active {
  border-color: rgba(219, 198, 149, 0.28);
  background: linear-gradient(135deg, rgba(203, 185, 140, 0.24), rgba(255, 255, 255, 0.08));
  color: #fffaf2;
  box-shadow: inset 3px 0 0 #cbb98c;
}

.workspace-stage .tab-content {
  min-height: calc(100vh - 184px);
  padding: 30px;
}

.studio-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.studio-page-header > div:first-child {
  display: grid;
  gap: 7px;
  max-width: 720px;
}

.studio-page-header h2 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: clamp(2rem, 3vw, 2.85rem);
  font-weight: 600;
  line-height: 0.96;
}

.studio-eyebrow,
.proof-label {
  color: #8a7338;
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio-lede {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.studio-empty-state {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  border: 1px dashed var(--line-strong);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.54);
  padding: 30px;
  color: var(--muted);
  text-align: center;
}

.studio-empty-state h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--notification-heading-font);
  font-size: 1.45rem;
}

/* Products */

.product-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

.product-view-toggle {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 4px;
  box-shadow: var(--shadow-sm);
}

.product-view-toggle .button {
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--muted);
}

.product-view-toggle .button.active {
  background: var(--ink);
  color: #fff;
}

.product-health-grid,
.publisher-health-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.product-health-card,
.publisher-metric {
  position: relative;
  display: grid;
  gap: 5px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.84);
  padding: 16px;
  box-shadow: var(--shadow-sm);
}

.product-health-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--tone-grey);
  content: "";
}

.product-health-card[data-tone="attention"]::before { background: var(--warning); }
.product-health-card[data-tone="draft"]::before { background: var(--tone-blue); }
.product-health-card[data-tone="scheduled"]::before { background: var(--tone-violet); }
.product-health-card[data-tone="live"]::before { background: var(--tone-green); }

.product-health-card strong,
.publisher-metric strong {
  font-family: var(--notification-heading-font);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.product-health-card > span:last-child,
.publisher-metric small {
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.product-health-label,
.publisher-metric > span {
  font-size: 0.75rem;
  font-weight: 800;
}

.product-toolbar {
  position: relative;
  z-index: 3;
  min-width: 0;
}

.product-toolbar .filter-bar {
  display: grid;
  min-width: 0;
  gap: 10px;
  overflow: visible;
  padding: 11px 12px;
  margin: 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
}

.product-filter-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-search-input {
  width: min(100%, 520px);
  min-width: 220px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  padding: 8px 11px;
  font: inherit;
  font-size: 0.82rem;
}

.product-search-input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 1px;
}

.product-filter-groups {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.product-filter-quick {
  position: relative;
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.product-advanced-filters {
  position: static;
  flex: 0 0 auto;
  min-width: 0;
}

.product-advanced-filters summary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 750;
  list-style: none;
}

.product-advanced-filters summary::-webkit-details-marker {
  display: none;
}

.product-advanced-filters summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 2px solid var(--accent-strong);
  border-bottom: 2px solid var(--accent-strong);
  transform: rotate(45deg) translateY(-1px);
}

.product-advanced-filters[open] summary::before {
  transform: rotate(225deg) translate(-1px, -1px);
}

.product-advanced-filters summary:hover,
.product-advanced-filters summary:focus-visible {
  border-color: var(--accent);
  color: var(--ink);
}

.product-advanced-filters summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.product-advanced-filters summary strong {
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 2px 7px;
  font-size: 0.66rem;
}

.product-advanced-filter-panel {
  position: absolute;
  z-index: 10;
  inset: calc(100% + 6px) 0 auto;
  width: 100%;
  flex-wrap: wrap;
  gap: 8px 12px;
  overflow: visible;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.98);
  padding: 10px;
  box-shadow: var(--shadow-md);
}

.product-filter-groups::-webkit-scrollbar {
  display: none;
}

.product-filter-group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 4px;
}

.product-filter-group .filter-group-label {
  padding: 0 3px 0 0;
  font-size: 0.64rem;
  letter-spacing: 0.07em;
}

.filter-chip-set {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(88, 71, 82, 0.12);
  border-radius: 10px;
  background: var(--surface-2);
}

.product-toolbar .filter-chip {
  min-height: 28px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 5px 8px;
  font-size: 0.76rem;
  line-height: 1;
  white-space: nowrap;
}

.product-toolbar .filter-chip:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.88);
}

.product-toolbar .filter-chip.active,
.product-toolbar .filter-chip.active:hover {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 3px rgba(32, 24, 30, 0.18);
}

.product-toolbar .filter-chip:focus-visible,
.product-toolbar .filter-clear:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.product-filter-meta {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding-left: 0;
  border-left: 0;
}

.product-sort-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  white-space: nowrap;
}

.product-sort-label select {
  min-height: 30px;
  max-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  padding: 4px 24px 4px 7px;
  font: inherit;
}

.product-sort-label select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.product-toolbar .filter-clear {
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 5px 4px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
}

.product-toolbar .filter-clear:hover {
  color: var(--ink);
}

.product-result-count {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 650;
  white-space: nowrap;
}

.product-result-count strong {
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 850;
}

.product-table {
  --product-table-columns: minmax(240px, 1.45fr) minmax(120px, 0.72fr) minmax(150px, 0.85fr) minmax(150px, 0.85fr) minmax(190px, 1fr) 112px;

  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}

.product-table-header,
.product-row {
  display: grid;
  grid-template-columns: var(--product-table-columns);
  gap: 14px;
  align-items: center;
}

.product-table-header {
  min-height: 44px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.product-table-header > span {
  min-width: 0;
}

.product-column-sort {
  display: inline-flex;
  max-width: 100%;
  align-items: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 6px 0;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
}

.product-column-sort > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-column-sort > span:last-child {
  color: color-mix(in srgb, var(--muted) 62%, transparent);
  font-size: 0.78rem;
}

.product-column-sort:hover,
.product-column-sort.active {
  color: var(--accent-strong);
}

.product-column-sort:focus-visible {
  border-radius: 4px;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.deck-card.product-row {
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 14px 16px;
  box-shadow: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.deck-card.product-row:last-child {
  border-bottom: 0;
}

.deck-card.product-row:hover {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.product-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.product-cell strong,
.product-cell small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-row > .product-cell:not(.product-identity):not(.product-row-action) strong,
.product-row > .product-cell:not(.product-identity):not(.product-row-action) small {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.product-cell small {
  color: var(--muted);
  font-size: 0.72rem;
}

.product-identity {
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
}

.product-identity > span:last-child {
  min-width: 0;
}

.product-art {
  display: grid;
  place-items: center;
}

.product-art .deck-cover {
  box-shadow: 0 6px 14px rgba(49, 35, 43, 0.14);
}

.product-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 18px;
}

.deck-card.product-grid-card {
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
  min-width: 0;
  padding: 16px;
}

.product-grid-card-art {
  display: grid;
  min-height: 236px;
  place-items: center;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.92), transparent 48%),
    var(--surface-2);
}

.product-grid-card-art .deck-cover {
  box-shadow: 0 16px 30px rgba(49, 35, 43, 0.2);
}

.product-grid-card-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.product-grid-card-heading {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.product-grid-state-context {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.product-season-context {
  overflow: hidden;
  max-width: 132px;
  color: var(--accent-strong);
  font-size: 0.68rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-grid-card-type {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 750;
}

.product-grid-card-copy h3,
.product-grid-card-copy p,
.product-grid-card-copy small {
  margin: 0;
}

.product-grid-card-copy h3 {
  overflow: hidden;
  font-size: 1.02rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-grid-card-copy p,
.product-grid-card-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.76rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.product-grid-card-facts div {
  min-width: 0;
  padding: 10px;
  border-radius: 10px;
  background: var(--surface-2);
}

.product-grid-card-facts dt {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-grid-card-facts dd {
  margin: 4px 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-season-fact dd {
  display: grid;
  gap: 3px;
  white-space: normal;
}

.product-season-fact dd span,
.product-season-fact dd small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-season-fact dd small {
  color: var(--muted);
  font-size: 0.66rem;
  font-weight: 650;
}

.product-marketplace-status {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.product-marketplace-provider {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 9px 10px;
}

.product-marketplace-provider + .product-marketplace-provider {
  border-left: 1px solid var(--line);
}

.product-marketplace-provider small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-marketplace-provider strong {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-marketplace-provider[data-tone="ready"] strong,
.product-marketplace-line[data-tone="ready"] strong {
  color: var(--tone-green);
}

.product-marketplace-provider[data-tone="warning"] strong,
.product-marketplace-line[data-tone="warning"] strong {
  color: var(--warning);
}

.product-marketplace-provider[data-tone="neutral"] strong,
.product-marketplace-line[data-tone="neutral"] strong {
  color: var(--ink);
}

.product-marketplace-line {
  display: grid;
  grid-template-columns: minmax(68px, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 6px;
}

.product-marketplace-line small,
.product-marketplace-line strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.product-grid-readiness {
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, currentColor 18%, var(--line));
  border-radius: 10px;
  font-size: 0.75rem;
}

.product-grid-readiness.is-ready { color: var(--tone-green); }
.product-grid-readiness.needs-work { color: var(--warning); }
.product-grid-readiness span { color: var(--muted); }

.product-grid-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.product-grid-state-control {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
}

.product-grid-state-control select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  padding: 7px 9px;
  font: inherit;
}

.product-art.is-loading::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 25%, rgba(255, 255, 255, 0.48) 45%, transparent 65%);
  content: "";
  animation: product-art-loading 1.1s ease-in-out infinite;
}

@keyframes product-art-loading {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}

.product-cell .status-pill {
  justify-self: start;
}

.readiness-copy.is-ready { color: var(--tone-green); }
.readiness-copy.needs-work { color: var(--warning); }

.product-row-action {
  justify-items: end;
}

.product-row-action .button {
  min-width: 102px;
}

.product-board {
  overflow-x: auto;
  padding-bottom: 8px;
}

.product-board .pipeline-column {
  min-height: 440px;
}

.product-board-card-art {
  grid-area: art;
  display: grid;
  width: 64px;
  min-height: 88px;
  place-items: center;
  border-radius: 7px;
  background: var(--surface-2);
}

.product-board-card-art .deck-cover {
  width: 56px;
  box-shadow: 0 10px 22px rgba(49, 35, 43, 0.18);
}

.product-board-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas:
    "art heading"
    "art meta"
    "art footer"
    "move move"
    "action action";
  gap: 4px 8px;
  align-items: start;
  padding: 7px;
}

.product-board-card .deck-card-top {
  grid-area: heading;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  min-width: 0;
  gap: 4px;
}

.product-board-card .deck-card-title {
  font-size: 0.84rem;
  line-height: 1.12;
}

.product-board-card .deck-card-badge {
  justify-self: start;
  padding: 1px 6px;
  font-size: 0.62rem;
}

.product-board-card .deck-card-top .status-pill {
  align-self: start;
  justify-self: end;
  padding: 1px 6px;
  font-size: 0.58rem;
  white-space: nowrap;
}

.product-board-card .deck-card-meta {
  grid-area: meta;
  display: grid;
  justify-content: stretch;
  gap: 2px;
  font-size: 0.67rem;
  line-height: 1.2;
}

.product-board-card .deck-card-footer {
  grid-area: footer;
  gap: 3px;
  font-size: 0.65rem;
}

.product-board-card .deck-card-chip {
  justify-self: start;
  padding: 1px 6px;
}

.product-board-card .deck-card-release {
  width: 100%;
  margin-left: 0;
  font-size: 0.6rem;
  line-height: 1.2;
}

.product-board-card-action {
  grid-area: action;
  width: 100%;
  min-height: 32px;
  margin-top: 0;
  padding: 5px 8px;
}

.product-board-move {
  grid-area: move;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.45rem;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.product-board-move select {
  width: 100%;
  min-height: 2rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: var(--surface);
  color: var(--ink);
  padding: 0.3rem 0.55rem;
  font: inherit;
  letter-spacing: normal;
  text-transform: none;
}

/* Store Layout */

.store-layout-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.store-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: 22px;
  align-items: start;
}

.store-layout-editor,
.store-layout-preview {
  display: grid;
  gap: 14px;
}

.store-layout-preview {
  position: sticky;
  top: 92px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 185, 140, 0.2), transparent 34%),
    rgba(255, 255, 255, 0.84);
  padding: 18px;
  box-shadow: 0 18px 46px rgba(49, 35, 43, 0.1);
}

.store-layout-preview > p {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.store-layout-section-header,
.publisher-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.store-layout-section-header h3,
.publisher-section-header h3 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: 1.45rem;
  font-weight: 600;
}

.store-layout-section-header p,
.publisher-section-header p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.78rem;
}

.store-layout-section-header > span,
.publisher-section-header > span {
  border-radius: 999px;
  background: var(--surface-2);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.shelf-lane {
  /* No overflow: hidden — the add-deck suggestions dropdown must escape the lane. */
  border-radius: 16px;
}

.shelf-lane-header {
  justify-content: flex-start;
  padding: 14px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

.shelf-order {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 0.73rem;
  font-weight: 800;
}

.shelf-lane-meta {
  margin-left: auto;
}

.shelf-id {
  font-family: inherit;
}

.shelf-deck-card {
  min-width: 244px;
  flex-basis: 244px;
  min-height: 122px;
  padding: 12px;
}

.shelf-product-open {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0 24px 0 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
}

.shelf-card-art {
  display: grid;
  width: 82px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 68%, white);
  border-radius: 10px;
  background:
    radial-gradient(circle at 68% 22%, rgba(235, 208, 241, 0.65), transparent 32%),
    linear-gradient(145deg, #9facc1, #5a6678);
  color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 18px rgba(43, 34, 39, 0.14);
  font-family: var(--notification-heading-font);
  font-size: 1.3rem;
}

.shelf-card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shelf-card-copy {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.shelf-card-copy .shelf-deck-title,
.shelf-card-copy .shelf-deck-id {
  overflow: hidden;
  text-overflow: ellipsis;
}

.shelf-card-copy .shelf-deck-title {
  display: -webkit-box;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.shelf-product-open:hover .shelf-deck-title {
  color: var(--accent);
}

.store-layout-preview-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-2) 78%, white);
}

.store-layout-preview-switch button {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.store-layout-preview-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: white;
  box-shadow: 0 3px 10px rgba(36, 29, 34, 0.16);
}

.store-layout-preview-switch button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

[data-layout-preview-panel] {
  min-width: 0;
}

[data-layout-preview-panel][hidden] {
  display: none;
}

.store-layout-time-control {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

.store-layout-time-control label {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.store-layout-time-control input {
  width: 100%;
  min-width: 0;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.88);
  padding: 7px 9px;
  color: var(--ink);
}

.store-layout-time-control .button {
  min-height: 38px;
}

.store-layout-app-frame {
  width: min(100%, 360px);
}

.store-layout-preview-note {
  margin-top: 10px;
  color: var(--muted);
  font-size: 0.75rem;
  line-height: 1.45;
}

/* Shared catalog projection + Preview */

.store-preview-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

.preview-controls {
  justify-content: flex-end;
}

.preview-workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.82fr);
  gap: 22px;
  align-items: start;
}

.preview-proof-card {
  display: grid;
  gap: 14px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.82);
  padding: 18px;
  box-shadow: var(--shadow-sm);
}

.preview-proof-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.preview-proof-header h3 {
  margin: 3px 0 0;
  font-family: var(--notification-heading-font);
  font-size: 1.55rem;
  font-weight: 600;
}

.proof-status {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-align: right;
}

.preview-proof-copy,
.preview-boundary-note {
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.5;
}

.storefront-preview {
  overflow: hidden;
  border: 10px solid #262126;
  border-radius: 28px;
  background: #fffaf7;
  box-shadow: 0 22px 46px rgba(36, 31, 34, 0.18);
}

.storefront-preview-header {
  display: grid;
  gap: 5px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--line);
}

.storefront-preview-header > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.storefront-preview-header h4 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: 1.5rem;
  font-weight: 600;
}

.storefront-preview-header span:last-child {
  color: var(--muted);
  font-size: 0.72rem;
}

.storefront-preview-body {
  max-height: 640px;
  overflow: auto;
  padding: 0 18px 18px;
}

.storefront-preview .phone-shelf-header h5 {
  margin: 0;
  font-size: 0.94rem;
}

.storefront-preview.is-compact {
  border-width: 8px;
  border-radius: 24px;
}

.storefront-preview.is-compact .storefront-preview-body {
  max-height: 510px;
  padding-inline: 12px;
}

.storefront-preview.is-compact .phone-shelf-carousel .phone-deck {
  flex-basis: 164px;
}

.storefront-empty {
  display: grid;
  gap: 5px;
  min-height: 260px;
  place-content: center;
  color: var(--muted);
  text-align: center;
}

.storefront-empty strong {
  color: var(--ink);
}

.flutter-store-frame {
  overflow: hidden;
  width: min(100%, 430px);
  aspect-ratio: 9 / 16;
  justify-self: center;
  border: 10px solid #262126;
  border-radius: 32px;
  background: #262126;
  box-shadow: 0 22px 46px rgba(36, 31, 34, 0.2);
}

.flutter-store-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 21px;
  background: #f6f0e2;
}

/* Publisher */

.publisher-studio {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
}

/* ===== Deck Drops: rolling lunar release calendar ===== */

.deck-drops-studio {
  display: grid;
  gap: 18px;
}

.deck-drops-header {
  position: relative;
  isolation: isolate;
  align-items: end;
  min-height: 192px;
  padding: 30px 32px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background:
    radial-gradient(circle at 78% 18%, rgba(231, 193, 255, 0.32), transparent 24%),
    radial-gradient(circle at 12% 118%, rgba(226, 163, 117, 0.34), transparent 42%),
    linear-gradient(135deg, #261d31 0%, #44304e 52%, #6c4a62 100%);
  box-shadow: 0 22px 55px rgba(42, 29, 47, 0.2);
  color: #fffaf5;
}

.deck-drops-header > div {
  position: relative;
  z-index: 1;
}

.deck-drops-header h2 {
  color: #fffaf5;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  letter-spacing: -0.035em;
}

.deck-drops-header .studio-eyebrow,
.deck-drops-header .studio-lede {
  color: rgba(255, 250, 245, 0.78);
}

.deck-drops-header .studio-lede {
  max-width: 650px;
  font-size: 1rem;
  line-height: 1.55;
}

.deck-drops-orbit {
  position: absolute;
  z-index: 0;
  top: -115px;
  right: 8%;
  width: 310px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(255, 255, 255, 0.035),
    0 0 0 92px rgba(255, 255, 255, 0.025);
}

.deck-drops-orbit::after {
  position: absolute;
  right: 43px;
  bottom: 16px;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f4d9b2;
  box-shadow: 0 0 30px rgba(244, 217, 178, 0.52);
  content: "";
}

.deck-drop-summary {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.deck-drop-summary span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 250, 245, 0.74);
  backdrop-filter: blur(12px);
  font-size: 0.82rem;
}

.deck-drop-summary span[data-tone="attention"] {
  border-color: rgba(255, 220, 164, 0.32);
  background: rgba(255, 220, 164, 0.13);
  color: #fff7e9;
}

.deck-drop-summary strong {
  color: #fffaf5;
  font-size: 1rem;
}

.deck-drop-feature-note {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 17px;
  border: 1px solid color-mix(in srgb, var(--tone-green) 35%, var(--line));
  border-radius: 16px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-green) 9%, var(--surface)), var(--surface));
  box-shadow: var(--shadow-sm);
}

.deck-drop-feature-note strong {
  white-space: nowrap;
}

.deck-drop-feature-note span {
  color: var(--muted);
}

.deck-drop-warning {
  margin: 0;
}

.deck-drop-publisher-note {
  margin: -4px 4px 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.deck-drops-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: 20px;
  align-items: start;
}

.deck-drop-calendar,
.deck-drop-template-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.deck-drop-calendar {
  overflow: hidden;
  padding-bottom: 12px;
  background: color-mix(in srgb, var(--surface-2) 52%, var(--surface));
}

.deck-drop-calendar > .store-layout-section-header {
  padding: 20px 22px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.deck-drop-calendar > .store-layout-section-header h3,
.deck-drop-calendar > .store-layout-section-header p {
  margin: 0;
}

.deck-drop-calendar > .store-layout-section-header h3 {
  margin-top: 3px;
}

.deck-drop-calendar > .store-layout-section-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.82rem;
}

.deck-drop-planning-controls {
  display: grid;
  min-width: 244px;
  gap: 7px;
  justify-items: end;
}

.deck-drop-planning-controls label {
  display: grid;
  width: 100%;
  grid-template-columns: auto minmax(138px, 1fr);
  align-items: center;
  gap: 9px;
}

.deck-drop-planning-controls label > span {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deck-drop-planning-controls select {
  min-height: 38px;
  border-radius: 10px;
  background-color: var(--surface);
  font-weight: 700;
}

.deck-drop-range-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.deck-drop-range-actions .button {
  min-width: 0;
  min-height: 32px;
  padding: 5px 8px;
  border-color: var(--line);
  background: var(--surface-2);
  font-size: 0.7rem;
}

.deck-drop-planning-controls > small {
  color: var(--muted);
  font-size: 0.67rem;
}

.deck-drop-calendar-key {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.deck-drop-calendar-key i {
  width: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tone-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tone-green) 12%, transparent);
}

.deck-drop-slot {
  display: grid;
  grid-template-columns: 120px 56px minmax(170px, 1fr) minmax(250px, 0.95fr);
  align-items: center;
  gap: 14px;
  min-height: 126px;
  margin: 11px 12px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
  box-shadow: 0 7px 20px rgba(42, 34, 38, 0.04);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.deck-drop-slot:hover {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  box-shadow: 0 11px 28px rgba(42, 34, 38, 0.08);
  transform: translateY(-1px);
}

.deck-drop-slot.is-scheduled {
  border-color: color-mix(in srgb, var(--tone-green) 28%, var(--line));
}

.deck-drop-slot.is-open {
  border-style: dashed;
  background: color-mix(in srgb, var(--warning) 2.5%, var(--surface));
}

.deck-drop-art {
  position: relative;
  width: 120px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.44);
  border-radius: 13px;
  background: #33273a;
  box-shadow: 0 8px 22px rgba(42, 29, 47, 0.2);
}

.deck-drop-first-card {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.deck-drop-art::after {
  position: absolute;
  inset: auto 0 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(24, 17, 28, 0.66));
  content: "";
}

.deck-drop-art-label {
  position: absolute;
  z-index: 1;
  right: 8px;
  bottom: 7px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.deck-drop-art.is-placeholder {
  display: grid;
  place-items: center;
  border-color: var(--line);
  background:
    radial-gradient(circle at 70% 25%, rgba(215, 184, 226, 0.34), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--surface-2) 75%, #e8dceb), var(--surface-2));
  box-shadow: none;
}

.deck-drop-art.is-placeholder::after {
  display: none;
}

.deck-drop-card-placeholder {
  display: grid;
  place-items: center;
  gap: 7px;
  color: var(--muted);
  text-align: center;
}

.deck-drop-card-placeholder small {
  max-width: 92px;
  font-size: 0.63rem;
  line-height: 1.2;
}

.deck-drop-moon-disc {
  position: relative;
  width: 27px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #56435f;
  box-shadow: 0 0 0 7px rgba(86, 67, 95, 0.07);
}

.deck-drop-moon-disc::after {
  position: absolute;
  inset: 3px 1px 3px 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface-2) 84%, #e8dceb);
  content: "";
}

.deck-drop-art.has-error .deck-drop-moon-disc {
  background: var(--warning);
}

.deck-drop-date {
  display: grid;
  place-items: center;
  min-height: 70px;
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface-2) 86%, var(--surface));
  border: 1px solid var(--line);
  text-transform: uppercase;
}

.deck-drop-date span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.deck-drop-date strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  line-height: 1;
}

.deck-drop-slot-copy {
  min-width: 0;
}

.deck-drop-slot-copy h4,
.deck-drop-slot-copy p {
  margin: 0;
}

.deck-drop-slot-copy h4 {
  margin-top: 7px;
  overflow: hidden;
  display: -webkit-box;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.03rem;
  line-height: 1.2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.deck-drop-slot-copy p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.8rem;
}

.deck-drop-slot-copy .deck-drop-release-date {
  color: var(--text);
  font-weight: 650;
}

.deck-drop-assignment {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(140px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.deck-drop-assignment select {
  min-height: 42px;
  border-radius: 11px;
  background-color: var(--surface);
}

.deck-drop-assignment label,
.deck-drop-assignment select {
  min-width: 0;
  width: 100%;
}

.deck-drop-assignment .button {
  max-width: 100%;
}

.deck-drop-assignment .quiet {
  grid-column: 1 / -1;
  justify-self: end;
  padding-block: 3px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.75rem;
}

.deck-drop-template-card {
  position: sticky;
  top: 16px;
  overflow: hidden;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 16px 38px rgba(42, 34, 38, 0.1);
}

.deck-drop-template-card > header {
  padding: 22px 22px 18px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 90% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 40%),
    linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--surface-2) 60%, var(--surface)));
}

.deck-drop-template-card h3,
.deck-drop-template-card p {
  margin: 0;
}

.deck-drop-template-card h3 {
  margin-top: 4px;
}

.deck-drop-template-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.deck-drop-template-card form {
  display: grid;
  gap: 14px;
  padding: 20px 22px 22px;
}

.deck-drop-template-card label,
.deck-drop-template-card fieldset {
  display: grid;
  gap: 6px;
}

.deck-drop-template-card fieldset {
  grid-template-columns: 1fr 1fr;
  padding: 0;
  border: 0;
}

.deck-drop-template-card fieldset legend {
  grid-column: 1 / -1;
  margin-bottom: 6px;
}

.deck-drop-template-card .checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.deck-drop-template-card .checkbox input {
  width: auto;
}

.deck-drop-template-schedule {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 10px;
}

.deck-drop-template-preview {
  display: grid;
  gap: 3px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2));
}

.deck-drop-template-preview span,
.deck-drop-template-preview small {
  color: var(--muted);
}

.deck-drop-template-preview strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.95rem;
}

@media (max-width: 1120px) {
  .deck-drops-layout {
    grid-template-columns: 1fr;
  }

  .deck-drop-template-card {
    position: static;
  }
}

@media (max-width: 760px) {
  .deck-drops-header {
    align-items: start;
    min-height: 0;
    padding: 24px;
  }

  .deck-drops-orbit {
    right: -110px;
  }

  .deck-drop-slot {
    grid-template-columns: 104px minmax(0, 1fr);
    align-items: start;
  }

  .deck-drop-art {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 104px;
  }

  .deck-drop-date {
    grid-column: 2;
    display: flex;
    justify-content: flex-start;
    gap: 6px;
    min-height: auto;
    border: 0;
    background: transparent;
  }

  .deck-drop-date strong {
    font-family: inherit;
    font-size: 0.72rem;
  }

  .deck-drop-slot-copy {
    grid-column: 2;
  }

  .deck-drop-assignment {
    grid-column: 1 / -1;
  }

  .deck-drop-summary {
    justify-content: flex-start;
  }

  .deck-drop-feature-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .deck-drop-calendar-key {
    display: none;
  }

  .deck-drop-calendar > .store-layout-section-header {
    flex-direction: column;
  }

  .deck-drop-planning-controls {
    width: 100%;
    min-width: 0;
    justify-items: stretch;
  }

  .deck-drop-planning-controls > small {
    text-align: right;
  }
}

@media (max-width: 480px) {
  .deck-drops-header {
    padding: 21px;
    border-radius: 19px;
  }

  .deck-drop-summary span {
    padding: 7px 10px;
  }

  .deck-drop-slot {
    margin-inline: 8px;
    padding: 12px;
  }

  .deck-drop-assignment {
    grid-template-columns: 1fr;
  }

  .deck-drop-assignment .quiet {
    grid-column: 1;
  }
}

.publisher-context {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.store-publisher-partner-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.store-publisher-partner-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.store-publisher-partner-form input {
  width: 180px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px 10px;
}

.publisher-error {
  margin: 0;
  max-width: none;
  box-shadow: none;
}

.publisher-guide {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background:
    radial-gradient(circle at 0% 0%, rgba(203, 185, 140, 0.2), transparent 26%),
    rgba(255, 255, 255, 0.84);
  box-shadow: var(--shadow-sm);
}

.publisher-guide article {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 18px;
}

.publisher-guide article + article {
  border-left: 1px solid var(--line);
}

.publisher-guide article > span {
  display: grid;
  width: 30px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: white;
  font-size: 0.72rem;
  font-weight: 850;
}

.publisher-guide article > div {
  display: grid;
  gap: 4px;
}

.publisher-guide small {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.42;
}

.publisher-admin-details {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow: var(--shadow-sm);
}

.publisher-admin-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.publisher-admin-details > summary::-webkit-details-marker {
  display: none;
}

.publisher-admin-details > summary > span:first-child {
  display: grid;
  gap: 3px;
}

.publisher-admin-details > summary small {
  color: var(--muted);
  font-size: 0.72rem;
}

.publisher-admin-details > summary > span:last-child {
  border-radius: 999px;
  background: var(--surface-2);
  padding: 5px 9px;
  color: var(--muted);
  font-size: 0.69rem;
  font-weight: 800;
}

.publisher-admin-details[open] > summary {
  border-bottom: 1px solid var(--line);
}

.publisher-admin-details-body {
  display: grid;
  gap: 18px;
  padding: 18px;
}

.publisher-review-queue,
.publisher-projects,
.publisher-tool-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: var(--shadow-sm);
}

.publisher-review-queue,
.publisher-projects {
  display: grid;
  gap: 14px;
  padding: 18px;
}

.publisher-review-item {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(340px, auto);
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.publisher-review-item > div:first-child {
  display: grid;
  gap: 3px;
}

.publisher-review-item > div:first-child span {
  color: var(--muted);
  font-size: 0.73rem;
}

.publisher-review-actions,
.publisher-project-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px;
}

.publisher-review-actions .button,
.publisher-project-actions .button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 0.72rem;
}

.button.danger-subtle {
  border-color: rgba(159, 52, 52, 0.28);
  background: rgba(159, 52, 52, 0.05);
  color: var(--danger);
}

.publisher-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 22px;
  align-items: start;
}

.publisher-projects {
  min-width: 0;
}

.publisher-project {
  display: grid;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: #fff;
  padding: 16px;
}

.publisher-project-header,
.publisher-project-status,
.publisher-project-identity {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.publisher-project-identity {
  justify-content: flex-start;
}

.publisher-project-identity > div {
  display: grid;
  gap: 2px;
}

.publisher-project-identity h4 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: 1.3rem;
  font-weight: 600;
}

.publisher-project-identity span:last-child,
.publisher-project-owner {
  color: var(--muted);
  font-size: 0.7rem;
}

.publisher-project-owner {
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.publisher-stage-pill {
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 999px;
  background: var(--accent-soft);
  padding: 5px 10px;
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 800;
}

.publisher-stage-rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publisher-stage-rail li {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.7rem;
}

.publisher-stage-rail li::before {
  position: absolute;
  top: 13px;
  right: 50%;
  left: -50%;
  height: 2px;
  background: var(--line);
  content: "";
}

.publisher-stage-rail li:first-child::before {
  display: none;
}

.publisher-stage-rail li > span {
  z-index: 1;
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 0.68rem;
  font-weight: 850;
}

.publisher-stage-rail li.is-complete,
.publisher-stage-rail li.is-current {
  color: var(--accent-strong);
}

.publisher-stage-rail li.is-complete::before,
.publisher-stage-rail li.is-current::before {
  background: var(--accent);
}

.publisher-stage-rail li.is-complete > span,
.publisher-stage-rail li.is-current > span {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.publisher-stage-rail li.is-current > span {
  box-shadow: 0 0 0 5px var(--accent-soft);
}

.publisher-project-status > div:first-child {
  display: grid;
  gap: 3px;
}

.publisher-project-status > div:first-child span {
  color: var(--muted);
  font-size: 0.74rem;
}

.publisher-project-issues {
  display: grid;
  gap: 3px;
  border: 1px solid rgba(159, 52, 52, 0.25);
  border-radius: 10px;
  background: rgba(159, 52, 52, 0.05);
  padding: 10px 12px;
  color: var(--danger);
  font-size: 0.75rem;
}

.publisher-side-rail {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 12px;
}

.publisher-tool-card {
  overflow: hidden;
  padding: 14px;
}

.publisher-tool-card > header,
.publisher-tool-card > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.publisher-tool-card > summary {
  cursor: pointer;
}

.publisher-tool-card > summary > span {
  display: grid;
  gap: 3px;
}

.publisher-tool-card small,
.publisher-tool-card > p,
.publisher-quiet-state {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.publisher-tool-card > p {
  margin: 12px 0;
}

.publisher-tool-card > header > span {
  border-radius: 999px;
  background: var(--surface-2);
  padding: 3px 7px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 800;
}

.publisher-upload-guide {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.publisher-upload-guide li {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.publisher-upload-guide code {
  font-size: 0.74rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.publisher-upload-guide span {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.publisher-session-history,
.publisher-diagnostic-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.publisher-session-row,
.publisher-diagnostic-list article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.publisher-session-row > div,
.publisher-diagnostic-list article {
  min-width: 0;
}

.publisher-session-row > div:first-child,
.publisher-diagnostic-list article {
  display: grid;
  gap: 3px;
}

.publisher-session-row span,
.publisher-diagnostic-list span {
  color: var(--muted);
  font-size: 0.68rem;
  overflow-wrap: anywhere;
}

.publisher-quiet-state {
  margin-top: 10px;
}

/* Product editor: a full-page workspace by default. */

.drawer-panel {
  width: 100%;
}

@media (max-width: 1440px) {
  .product-table {
    --product-table-columns: minmax(210px, 1.4fr) 110px minmax(150px, 0.9fr) minmax(170px, 1fr) 112px;
  }

  .product-table-header,
  .product-row {
    grid-template-columns: var(--product-table-columns);
  }

  .product-table-header > :nth-child(4),
  .product-row > :nth-child(4) {
    display: none;
  }

  .deck-drops-layout {
    grid-template-columns: 1fr;
  }

  .deck-drop-template-card {
    position: static;
  }
}

@media (max-width: 1280px) {
  .dashboard {
    grid-template-columns: 198px minmax(0, 1fr);
  }
  .workspace-stage .tab-content {
    padding: 24px;
  }
  .product-table {
    --product-table-columns: minmax(190px, 1.5fr) minmax(90px, 0.7fr) minmax(150px, 1fr) minmax(150px, 1fr) 112px;
  }
  .product-table-header,
  .product-row {
    grid-template-columns: var(--product-table-columns);
  }
  .product-table-header > :nth-child(4),
  .product-row > :nth-child(4) {
    display: none;
  }
  .store-layout-grid,
  .preview-workbench-grid,
  .publisher-workspace-grid {
    grid-template-columns: 1fr;
  }
  .store-layout-preview,
  .publisher-side-rail {
    position: static;
  }
  .store-layout-preview {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  }
  .store-layout-preview > .store-layout-section-header,
  .store-layout-preview > p,
  .store-layout-preview > .store-layout-preview-switch {
    grid-column: 1;
  }
  .store-layout-preview > [data-layout-preview-panel] {
    grid-column: 2;
    grid-row: 1 / span 4;
  }
}

@media (max-width: 900px) {
  .shell {
    padding: 0;
  }
  .topbar {
    padding: 14px 16px;
  }
  .dashboard {
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - 78px);
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }
  .workspace-sidebar {
    gap: 12px;
    min-width: 0;
    overflow: hidden;
    padding: 12px;
    border-radius: 0;
  }
  .workspace-stage { border-radius: 0; }
  .workspace-sidebar-toggle {
    display: none;
  }
  .dashboard.workspace-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .workspace-sidebar-heading {
    display: none;
  }
  .workspace-sidebar .tab-nav {
    display: flex;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }
  .tab-group {
    display: flex;
    gap: 5px;
    flex: 0 0 auto;
  }
  .tab-group h2 {
    display: none;
  }
  .tab-group-items {
    display: flex;
  }
  .workspace-sidebar .tab {
    width: auto;
    white-space: nowrap;
  }
  .workspace-stage > .control-bar {
    position: static;
    flex-direction: row;
    align-items: center;
  }
  .workspace-stage .tab-content {
    min-height: 0;
    padding: 20px 16px;
  }
  .studio-page-header,
  .publisher-project-status,
  .publisher-header {
    align-items: stretch;
    flex-direction: column;
  }
  .studio-page-header,
  .studio-page-header > div:first-child {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
  .product-health-grid,
  .publisher-health-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .product-table-header {
    display: none;
  }
  .deck-card.product-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 18px;
  }
  .product-row > :not(.product-identity):not(.product-row-action) {
    display: none;
  }
  .product-row-action {
    align-self: center;
  }
  .store-layout-preview {
    display: grid;
    grid-template-columns: 1fr;
  }
  .store-layout-preview > [data-layout-preview-panel] {
    grid-column: auto;
    grid-row: auto;
  }
  .publisher-context,
  .store-publisher-partner-form {
    align-items: stretch;
    flex-direction: column;
  }
  .publisher-guide {
    grid-template-columns: 1fr;
  }
  .publisher-guide article + article {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .store-publisher-partner-form input {
    width: 100%;
  }
  .publisher-review-item {
    grid-template-columns: 1fr auto;
  }
  .publisher-review-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 720px) {
  .drawer-panel {
    width: 100%;
  }
  .drawer-header {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
  }
  .drawer-product-hero {
    width: 100%;
  }
  .drawer-header-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .drawer-header-actions [data-drawer-expand] {
    display: none;
  }
  .drawer-header-actions .button {
    min-width: 0;
  }
}

@media (max-width: 600px) {
  .workspace-stage > .control-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .control-bar-tools {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    min-width: 0;
  }
  .control-bar-tools .search-bar {
    min-width: 0;
  }
  .workspace-breadcrumb {
    display: none;
  }
  .studio-page-header h2 {
    font-size: 2rem;
  }
  .product-health-grid,
  .publisher-health-grid {
    grid-template-columns: 1fr 1fr;
  }
  .product-toolbar {
    display: block;
  }
  .product-toolbar .filter-bar {
    gap: 8px;
    padding-left: 9px;
  }
  .product-filter-primary {
    align-items: stretch;
    flex-direction: column;
  }
  .product-search-input {
    width: 100%;
  }
  .product-filter-groups {
    gap: 10px;
  }
  .product-filter-group .filter-group-label {
    display: none;
  }
  .product-filter-meta {
    gap: 6px;
    padding-left: 8px;
  }
  .shelf-lane-header {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .shelf-lane-meta {
    width: 100%;
    margin-left: 42px;
  }
  .preview-controls {
    justify-content: flex-start;
  }
  .preview-control input {
    min-width: 0;
    width: 100%;
  }
  .publisher-stage-rail strong {
    font-size: 0.62rem;
  }
  .publisher-project-header,
  .publisher-project-identity {
    align-items: flex-start;
  }
  .publisher-project-header {
    flex-direction: column;
  }
}

/* ===== Cohesive Admin Studio polish ===== */

.studio-hero {
  --studio-hero-ink: #fffaf5;
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: 194px;
  align-items: end;
  justify-content: space-between;
  gap: 28px;
  overflow: hidden;
  margin: 0;
  padding: 30px 32px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 24px;
  background: linear-gradient(135deg, #281f29, #523b4e);
  box-shadow: 0 22px 55px rgba(42, 29, 47, 0.18);
  color: var(--studio-hero-ink);
}

.product-studio-hero {
  background:
    radial-gradient(circle at 83% 14%, rgba(241, 210, 147, 0.28), transparent 25%),
    radial-gradient(circle at 10% 118%, rgba(86, 160, 147, 0.34), transparent 43%),
    linear-gradient(135deg, #183237 0%, #28535a 52%, #6f6854 100%);
}

.messaging-studio-hero {
  background:
    radial-gradient(circle at 82% 14%, rgba(240, 196, 236, 0.3), transparent 25%),
    radial-gradient(circle at 8% 116%, rgba(225, 155, 113, 0.32), transparent 43%),
    linear-gradient(135deg, #2b2032 0%, #563b59 54%, #74516a 100%);
}

.push-studio-hero {
  background:
    radial-gradient(circle at 82% 10%, rgba(143, 222, 213, 0.25), transparent 25%),
    radial-gradient(circle at 8% 120%, rgba(115, 155, 211, 0.3), transparent 42%),
    linear-gradient(135deg, #18283a 0%, #24485b 52%, #387474 100%);
}

.launch-studio-hero {
  background:
    radial-gradient(circle at 82% 10%, rgba(242, 210, 150, 0.28), transparent 25%),
    radial-gradient(circle at 8% 120%, rgba(173, 90, 89, 0.3), transparent 42%),
    linear-gradient(135deg, #352125 0%, #643a3e 52%, #75604d 100%);
}

.app-config-studio-hero {
  background:
    radial-gradient(circle at 84% 12%, rgba(191, 181, 244, 0.28), transparent 25%),
    radial-gradient(circle at 8% 120%, rgba(77, 160, 157, 0.3), transparent 42%),
    linear-gradient(135deg, #1d2638 0%, #343f5c 52%, #565271 100%);
}

.studio-hero-copy,
.studio-hero-tools,
.studio-hero-summary {
  position: relative;
  z-index: 1;
}

.studio-hero-copy {
  display: grid;
  gap: 7px;
  max-width: 730px;
}

.studio-hero h1,
.studio-hero h2 {
  margin: 0;
  color: var(--studio-hero-ink);
  font-family: var(--notification-heading-font);
  font-size: clamp(2.2rem, 3.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.95;
}

.studio-hero .studio-eyebrow,
.studio-hero .eyebrow,
.studio-hero .studio-lede {
  color: rgba(255, 250, 245, 0.76);
}

.studio-hero .studio-eyebrow,
.studio-hero .eyebrow {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.studio-hero .studio-lede {
  max-width: 690px;
  font-size: 0.98rem;
  line-height: 1.55;
}

.studio-hero-orbit {
  position: absolute;
  z-index: 0;
  top: -122px;
  right: 7%;
  width: 320px;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    0 0 0 44px rgba(255, 255, 255, 0.035),
    0 0 0 96px rgba(255, 255, 255, 0.022);
  pointer-events: none;
}

.studio-hero-orbit::after {
  position: absolute;
  right: 42px;
  bottom: 17px;
  width: 23px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f2d9b0;
  box-shadow: 0 0 30px rgba(242, 217, 176, 0.48);
  content: "";
}

.studio-hero-summary {
  display: flex;
  max-width: 390px;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.studio-hero-summary > span {
  display: grid;
  min-width: 94px;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 250, 245, 0.7);
  backdrop-filter: blur(12px);
  font-size: 0.68rem;
  font-weight: 750;
  line-height: 1.2;
}

.studio-hero-summary strong {
  overflow: hidden;
  color: #fffaf5;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 850;
  line-height: 1;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.studio-hero-summary > span[data-tone="blocked"] {
  border-color: rgba(255, 190, 170, 0.32);
  background: rgba(177, 64, 58, 0.18);
}

.studio-hero-summary > span[data-tone="warning"] {
  border-color: rgba(255, 220, 164, 0.32);
  background: rgba(211, 156, 70, 0.16);
}

.studio-hero-summary > span[data-tone="ready"] {
  border-color: rgba(179, 235, 204, 0.3);
  background: rgba(63, 139, 102, 0.16);
}

.studio-hero-tools {
  display: grid;
  min-width: 225px;
  justify-items: end;
  gap: 8px;
}

.studio-hero-tool-label {
  color: rgba(255, 250, 245, 0.62);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.studio-hero-tools > p {
  max-width: 250px;
  color: rgba(255, 250, 245, 0.66);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: right;
}

.studio-hero .product-view-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.studio-hero .product-view-toggle .button {
  color: rgba(255, 250, 245, 0.74);
}

.studio-hero .product-view-toggle .button.active {
  background: #fffaf5;
  color: #213a3d;
}

/* Products */

.product-health-grid {
  gap: 14px;
}

.product-health-card {
  min-height: 116px;
  align-content: end;
  gap: 7px;
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(248, 242, 240, 0.78));
  padding: 18px 19px;
  box-shadow: 0 12px 30px rgba(56, 42, 49, 0.07);
}

.product-health-card::before {
  inset: 14px auto 14px 0;
  width: 4px;
  border-radius: 0 5px 5px 0;
}

.product-health-card strong {
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 2.2rem;
  font-weight: 720;
}

.product-table {
  border-radius: 19px;
  box-shadow: 0 14px 34px rgba(56, 42, 49, 0.07);
}

.deck-card.product-row:hover {
  background: linear-gradient(90deg, rgba(47, 111, 115, 0.055), rgba(255, 255, 255, 0.88));
}

/* Product drawer */

.drawer-header {
  min-height: 118px;
  background:
    radial-gradient(circle at 90% -22%, rgba(47, 111, 115, 0.24), transparent 44%),
    radial-gradient(circle at 8% 120%, rgba(181, 155, 98, 0.16), transparent 38%),
    linear-gradient(135deg, #fffaf7, #f0e8ee);
}

.drawer-toc {
  gap: 7px;
  padding: 10px 18px;
  background: rgba(255, 251, 247, 0.92);
  box-shadow: 0 7px 20px rgba(56, 42, 49, 0.04);
}

.drawer-toc a {
  border-color: rgba(88, 71, 82, 0.1);
  background: rgba(255, 255, 255, 0.66);
  padding: 6px 11px;
  font-size: 0.74rem;
  font-weight: 720;
}

.drawer-form {
  gap: 17px;
  background:
    radial-gradient(circle at 86% 4%, rgba(47, 111, 115, 0.055), transparent 22%),
    color-mix(in srgb, var(--surface-2) 42%, var(--surface));
  padding-top: 20px;
  padding-inline: 22px;
}

.drawer-editor-overview {
  display: grid;
  flex: 0 0 auto;
  gap: 16px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 17px;
  background:
    radial-gradient(circle at 98% 0%, rgba(47, 111, 115, 0.13), transparent 32%),
    linear-gradient(135deg, #fffdf9, #f7f0ee);
  padding: 18px;
  box-shadow: 0 12px 30px rgba(56, 42, 49, 0.06);
}

.drawer-editor-overview > div:first-child {
  display: grid;
  gap: 5px;
}

.drawer-editor-overview h3 {
  margin: 0;
  font-family: var(--notification-heading-font);
  font-size: 1.45rem;
  font-weight: 650;
  line-height: 1;
}

.drawer-editor-overview p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.drawer-editor-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.64);
}

.drawer-editor-progress span {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding: 10px 12px;
  color: var(--muted);
  font-size: 0.65rem;
  line-height: 1.25;
}

.drawer-editor-progress span + span {
  border-left: 1px solid var(--line);
}

.drawer-editor-progress strong {
  overflow: hidden;
  color: var(--ink);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drawer-section {
  position: relative;
  gap: 14px;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 16px;
  padding: 17px 18px;
  box-shadow: 0 9px 24px rgba(56, 42, 49, 0.055);
}

.drawer-section::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), rgba(181, 155, 98, 0.7), transparent 72%);
  content: "";
}

.drawer-section h3,
.drawer-section .section-toggle {
  font-family: var(--notification-heading-font);
  font-size: 1.16rem;
  font-weight: 650;
}

.drawer-form input,
.drawer-form select,
.drawer-form textarea {
  border-radius: 10px;
  background: #fffdfb;
  padding: 9px 11px;
}

/* Shopify-style Product editor: persistent section rail plus one focused
   workspace. Sections stay mounted while hidden so switching never discards
   unsaved fields. */
.drawer-body {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: 264px minmax(0, 1fr);
}

.drawer-rail {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: rgba(255, 253, 251, 0.94);
  padding: 16px 14px;
}

.drawer-rail .drawer-editor-overview {
  padding: 15px;
}

.drawer-rail .drawer-editor-overview h3 {
  font-size: 1.22rem;
}

.drawer-rail .drawer-editor-progress {
  grid-template-columns: 1fr;
}

.drawer-rail .drawer-editor-progress span + span {
  border-top: 1px solid var(--line);
  border-left: 0;
}

.drawer-rail-nav {
  display: grid;
  gap: 4px;
}

.drawer-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 9px;
  padding: 9px 10px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 650;
  text-align: left;
}

.drawer-rail-item:hover {
  border-color: var(--line);
  background: var(--surface-2);
  color: var(--ink);
}

.drawer-rail-item[aria-current="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.drawer-rail-badge {
  border-radius: 999px;
  padding: 1px 7px;
  background: var(--tone-green-soft);
  color: var(--tone-green);
  font-size: 0.68rem;
  font-weight: 750;
}

.drawer-rail-badge.has-issues {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.drawer-section[hidden],
.drawer-footer[hidden] {
  display: none;
}

.commerce-stepper {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.commerce-step {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.commerce-step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: rgba(255, 253, 251, 0.94);
}

.commerce-step-header > div {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.commerce-step-header p {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.commerce-step-index {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 750;
}

.commerce-step-chip {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--tone-grey-soft);
  color: var(--tone-grey);
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.commerce-step-chip[data-tone="ready"] {
  background: var(--tone-blue-soft);
  color: var(--tone-blue);
}

.commerce-step-chip[data-tone="ok"] {
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.commerce-step-chip[data-tone="blocked"] {
  background: var(--tone-amber-soft);
  color: var(--tone-amber);
}

.commerce-step-body {
  display: grid;
  gap: 12px;
  padding: 12px 14px;
}

.commerce-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, 0.6fr);
  gap: 12px;
  align-items: end;
}

.commerce-purchase-model,
.pending-commerce-update {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 10px 12px;
}

.commerce-purchase-model strong {
  font-size: 1rem;
}

.commerce-timing-choice {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  border: 0;
  margin: 0;
  padding: 0;
}

.commerce-timing-choice legend {
  grid-column: 1 / -1;
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
}

.commerce-timing-option {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  cursor: pointer;
}

.commerce-timing-option:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.commerce-timing-option.is-danger:has(input:checked) {
  border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, var(--surface));
}

.commerce-timing-option span {
  display: grid;
  gap: 2px;
}

.commerce-timing-option small,
.commerce-timing-help {
  color: var(--muted);
  font-size: 0.74rem;
}

.commerce-timing-help {
  margin: -3px 0 0;
}

.commerce-timing-help.is-danger {
  color: var(--danger);
  font-weight: 700;
}

.pending-commerce-update {
  grid-template-columns: auto 1fr;
  align-items: baseline;
}

.pending-commerce-update span {
  color: var(--muted);
}

.product-season-history {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
}

.product-season-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.product-season-history > header > div {
  display: grid;
  gap: 2px;
}

.product-season-history-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.product-season-history-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px 10px;
}

.product-season-history-grid > div + div {
  border-left: 1px solid var(--line);
}

.product-season-history-grid span {
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.product-season-history-grid strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .commerce-price-grid,
  .commerce-timing-choice,
  .product-season-history-grid {
    grid-template-columns: 1fr;
  }

  .product-season-history-grid > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

/* Messaging */

.messaging-studio,
.broadcasts {
  display: grid;
  gap: 18px;
}

.messaging-studio-header {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
}

.messaging-studio-taskbar,
.messaging-studio-filterbar {
  border: 1px solid var(--notification-line);
  border-radius: 16px;
  background: rgba(255, 253, 248, 0.86);
  padding: 8px;
  box-shadow: 0 10px 28px rgba(56, 42, 49, 0.055);
}

.messaging-studio-taskbar {
  width: fit-content;
  max-width: 100%;
  gap: 4px;
  border-radius: 999px;
  padding: 5px;
}

.messaging-studio-taskbar .messaging-studio-task {
  min-height: 38px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.messaging-studio-taskbar .messaging-studio-task.is-active {
  border-color: #315d59;
  background: #315d59;
  color: #fff;
  box-shadow: 0 5px 14px rgba(49, 93, 89, 0.2);
}

.messaging-studio-taskbar .messaging-studio-task.is-active .messaging-studio-count {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.messaging-studio-filterbar {
  margin-top: -8px;
  border-color: transparent;
  background: transparent;
  padding: 1px 0;
  box-shadow: none;
}

.messaging-studio-filterbar .messaging-studio-filter {
  min-height: 36px;
  padding: 7px 12px;
  background: rgba(255, 253, 248, 0.58);
}

.messaging-studio-filterbar .messaging-studio-filter.is-active {
  border-color: rgba(69, 124, 119, 0.38);
  background: rgba(69, 124, 119, 0.1);
  color: #315d59;
  box-shadow: none;
}

.notification-guided {
  overflow: hidden;
  border: 1px solid var(--notification-line);
  border-radius: 21px;
  background:
    radial-gradient(circle at 100% 0%, rgba(203, 185, 140, 0.1), transparent 24%),
    var(--notification-paper);
  box-shadow: 0 16px 40px rgba(65, 49, 43, 0.08);
}

.notification-lede {
  padding: 21px 22px 18px;
  border-bottom: 1px solid var(--notification-line);
  background: rgba(255, 253, 248, 0.82);
}

.notification-lede-title {
  font-size: 1.8rem;
}

.notification-layout {
  padding: 20px;
}

.notification-step {
  border-radius: 17px;
  box-shadow: 0 9px 25px rgba(65, 49, 43, 0.055);
}

.notification-preview-rail {
  overflow: hidden;
  border: 1px solid var(--notification-line);
  border-radius: 18px;
  background: linear-gradient(160deg, rgba(255, 253, 248, 0.9), rgba(237, 229, 238, 0.7));
  padding: 17px;
  box-shadow: 0 11px 30px rgba(65, 49, 43, 0.06);
}

.messaging-studio-timeline button {
  border-radius: 13px;
}

.messaging-studio-timeline button[aria-selected="true"] {
  box-shadow: 0 8px 22px rgba(138, 115, 56, 0.11);
}

.broadcasts > #broadcast-saved-list {
  margin-top: 4px;
  font-family: var(--notification-heading-font);
  font-size: 1.55rem;
  font-weight: 650;
}

/* Launch Readiness */

.studio-purpose-card,
.launch-action-panel,
.app-config-card,
.app-config-draft-note,
.app-config-live-details {
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 12px 32px rgba(56, 42, 49, 0.065);
}

.studio-purpose-card {
  display: grid;
  grid-template-columns: minmax(230px, 0.72fr) minmax(0, 1.6fr);
  gap: 24px;
  padding: 21px 22px;
}

.studio-purpose-intro {
  display: grid;
  align-content: start;
  gap: 6px;
}

.studio-purpose-intro h3,
.launch-action-copy h3,
.app-config-card h3,
.app-config-card legend {
  margin: 0;
  color: var(--ink);
  font-family: var(--notification-heading-font);
  font-size: 1.35rem;
  font-weight: 650;
  line-height: 1.05;
}

.studio-purpose-intro p,
.launch-action-copy p {
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.studio-purpose-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.studio-purpose-grid li {
  display: grid;
  align-content: start;
  gap: 5px;
  padding: 4px 16px;
}

.studio-purpose-grid li + li {
  border-left: 1px solid var(--line);
}

.studio-purpose-grid li > span,
.app-config-module-number {
  display: grid;
  width: 25px;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 850;
}

.studio-purpose-grid strong {
  font-size: 0.82rem;
}

.studio-purpose-grid small {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.35;
}

.launch-action-panel {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
  gap: 20px;
  padding: 20px 22px;
}

.launch-action-copy {
  display: grid;
  gap: 5px;
}

.launch-actions {
  justify-content: flex-end;
}

.launch-evidence-strip {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-2);
}

.launch-evidence-strip .launch-readback-summary {
  margin: 0;
  padding: 10px 12px;
  font-size: 0.72rem;
  line-height: 1.4;
}

.launch-evidence-strip .launch-readback-summary + .launch-readback-summary {
  border-left: 1px solid var(--line);
}

.launch-status-grid {
  gap: 15px;
}

.launch-section {
  border-radius: 16px;
  padding: 17px;
  box-shadow: 0 10px 28px rgba(56, 42, 49, 0.055);
}

.launch-section h3 {
  font-family: var(--notification-heading-font);
  font-size: 1.18rem;
  font-weight: 650;
}

/* App Configuration */

.app-config {
  display: grid;
  gap: 18px;
}

.app-config-draft-note {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border-color: color-mix(in srgb, var(--tone-blue) 24%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone-blue-soft) 48%, white), white);
}

.app-config-draft-mark {
  display: grid;
  width: 40px;
  aspect-ratio: 1;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 12px;
  background: var(--tone-blue);
  color: #fff;
  font-family: var(--notification-heading-font);
  font-size: 1.25rem;
  font-weight: 700;
}

.app-config-draft-note > div {
  display: grid;
  gap: 3px;
}

.app-config-draft-note p,
.app-config-card-lede {
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

.app-config-validation {
  border: 1px solid rgba(159, 52, 52, 0.28);
  border-radius: 16px;
  background: #fff3f1;
  padding: 15px 18px;
  color: var(--danger);
}

.app-config-form {
  display: grid;
  gap: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.app-config-card,
.app-config-form > fieldset.app-config-card {
  display: grid;
  gap: 15px;
  min-width: 0;
  margin: 0;
  padding: 21px 22px;
}

.app-config-form > fieldset.app-config-card > legend {
  padding: 0 8px;
  font-size: 1.5rem;
}

.app-config-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.app-config-feature-card,
.app-config-form .app-config-feature-card {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #faf7f5);
  padding: 14px 15px;
  cursor: pointer;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.app-config-feature-card:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  box-shadow: 0 9px 22px rgba(56, 42, 49, 0.06);
  transform: translateY(-1px);
}

.app-config-feature-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.app-config-feature-copy strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.app-config-feature-copy small {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.35;
}

.app-config-feature-copy code {
  overflow: hidden;
  color: color-mix(in srgb, var(--muted) 78%, white);
  font-size: 0.59rem;
  font-weight: 500;
  text-overflow: ellipsis;
}

.app-config-feature-group {
  color: var(--accent);
  font-size: 0.59rem;
  font-weight: 850;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.app-config-switch {
  position: relative;
  display: block;
  width: 44px;
  height: 26px;
  flex: 0 0 auto;
}

.app-config-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.app-config-switch > span {
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface-3);
  transition: background 140ms ease, border-color 140ms ease;
}

.app-config-switch > span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(36, 31, 34, 0.2);
  transition: transform 140ms ease;
  content: "";
}

.app-config-switch input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
}

.app-config-switch input:checked + span::after {
  transform: translateX(18px);
}

.app-config-switch input:focus-visible + span {
  outline: 3px solid var(--accent-soft);
  outline-offset: 2px;
}

.app-config-version-grid,
.app-config-overlay-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.app-config-platform-card,
.overlay-config-card,
.app-config-policy-module {
  display: grid;
  gap: 12px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  padding: 16px;
}

.app-config-platform-card header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.app-config-platform-card header span {
  color: var(--accent);
  font-size: 0.67rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-config-platform-card header strong {
  font-family: var(--notification-heading-font);
  font-size: 1.15rem;
  font-weight: 650;
}

.app-config-form label small,
.app-config-card label small {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 500;
  line-height: 1.35;
}

.app-config-form input,
.app-config-form select,
.app-config-form textarea,
.app-config-card input {
  border-radius: 10px;
  background: #fffdfb;
}

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

.app-config-policy-module {
  align-content: start;
  margin: 0;
}

.app-config-policy-module legend {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 6px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 800;
}

.app-config-policy-module h4 {
  margin: 0;
  font-size: 0.92rem;
}

.app-config-policy-module > p {
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.app-config-date-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.app-config-toggle-row,
.app-config-form label.app-config-toggle-row,
.app-config-card label.app-config-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  padding: 8px 10px;
}

.app-config-category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.app-config-category-grid label.inline {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  padding: 7px 8px;
  font-size: 0.72rem;
  text-transform: capitalize;
}

.app-config-form > .composer-actions {
  position: sticky;
  z-index: 4;
  bottom: 14px;
  justify-content: flex-end;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 250, 247, 0.9);
  padding: 10px;
  box-shadow: 0 12px 30px rgba(56, 42, 49, 0.11);
  backdrop-filter: blur(16px);
}

.app-config-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.app-config-card-head > div {
  display: grid;
  gap: 4px;
}

.app-config-scope-pill,
.app-config-state-pill {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  padding: 6px 10px;
  color: var(--muted);
  font-size: 0.67rem;
  font-weight: 800;
}

.app-config-state-pill.is-running {
  border-color: color-mix(in srgb, var(--tone-green) 32%, var(--line));
  background: var(--tone-green-soft);
  color: var(--tone-green);
}

.app-config-state-pill.is-stopped {
  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
  background: #f9dfdb;
  color: var(--danger);
}

.app-config-emergency-card {
  border-color: color-mix(in srgb, var(--warning) 26%, var(--line));
  background: linear-gradient(145deg, #fffdf9, #fff8ed);
}

.app-config-emergency-card.danger {
  border-color: color-mix(in srgb, var(--danger) 36%, var(--line));
  background: linear-gradient(145deg, #fffdfb, #fff0ed);
}

.app-config-emergency-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 12px;
}

.app-config-emergency-card > small,
.app-config-current-reason {
  color: var(--muted);
  font-size: 0.7rem;
}

.app-config-current-reason {
  display: flex;
  gap: 8px;
  border-left: 3px solid var(--warning);
  padding-left: 10px;
}

.app-config-overlay-form {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.overlay-config-card legend {
  padding: 0 6px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 800;
}

.app-config-live-details {
  overflow: hidden;
}

.app-config-live-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  cursor: pointer;
  list-style: none;
}

.app-config-live-details > summary::-webkit-details-marker {
  display: none;
}

.app-config-live-details > summary > span:first-child {
  display: grid;
  gap: 2px;
}

.app-config-live-details summary small,
.app-config-live-details summary > span:last-child {
  color: var(--muted);
  font-size: 0.7rem;
}

.app-config-live-details .diff {
  max-height: 460px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

@media (max-width: 1040px) {
  .studio-hero {
    align-items: flex-start;
    flex-direction: column;
  }
  .studio-hero-tools {
    width: 100%;
    justify-items: start;
  }
  .studio-hero-tools > p {
    text-align: left;
  }
  .studio-hero-summary {
    max-width: none;
    justify-content: flex-start;
  }
  .studio-purpose-card,
  .launch-action-panel {
    grid-template-columns: 1fr;
  }
  .launch-actions {
    justify-content: flex-start;
  }
  .app-config-feature-grid,
  .app-config-policy-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .studio-hero {
    min-height: 0;
    gap: 20px;
    padding: 24px 21px;
    border-radius: 19px;
  }
  .studio-hero h1,
  .studio-hero h2 {
    font-size: 2.35rem;
  }
  .studio-hero-orbit {
    right: -100px;
  }
  .studio-hero-summary {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .studio-hero-summary > span {
    min-width: 0;
    padding: 9px;
  }
  .product-health-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .studio-purpose-grid,
  .launch-evidence-strip,
  .app-config-version-grid,
  .app-config-overlay-grid,
  .app-config-date-grid {
    grid-template-columns: 1fr;
  }
  .studio-purpose-grid li {
    padding: 10px 4px;
  }
  .studio-purpose-grid li + li,
  .launch-evidence-strip .launch-readback-summary + .launch-readback-summary {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .drawer-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .drawer-rail {
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 10px 14px;
  }
  .drawer-rail .drawer-editor-overview {
    display: none;
  }
  .drawer-rail-nav {
    display: flex;
    gap: 6px;
  }
  .drawer-rail-item {
    flex: 0 0 auto;
  }
  .drawer-editor-progress {
    grid-template-columns: 1fr;
  }
  .drawer-editor-progress span + span {
    border-top: 1px solid var(--line);
    border-left: 0;
  }
  .notification-layout {
    padding: 14px;
  }
  .app-config-card,
  .app-config-form > fieldset.app-config-card {
    padding: 18px 16px;
  }
  .app-config-feature-grid,
  .app-config-category-grid {
    grid-template-columns: 1fr;
  }
  .app-config-emergency-actions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-config-feature-card,
  .app-config-switch > span,
  .app-config-switch > span::after {
    transition: none;
  }
}

/* ===== Store Seasons: canonical lunar merchandising workspace ===== */

.store-seasons-studio {
  --border: var(--line);
  --font-serif: var(--notification-heading-font);
  --gold: var(--notification-gold-strong);
  --gold-light: var(--notification-gold);
  --surface-raised: var(--surface);
  --text: var(--ink);

  display: grid;
  gap: 24px;
  min-width: 0;
}

/* Grid items default to min-width: auto, so any wide intrinsic content (the
   inline-width timeline canvas) would force the whole workspace wider than
   the viewport instead of scrolling inside its own container. */
.store-seasons-studio > * {
  min-width: 0;
}

.store-seasons-header {
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
  background:
    radial-gradient(circle at 84% 13%, rgb(222 196 133 / 24%), transparent 25%),
    radial-gradient(circle at 9% 118%, rgb(74 138 137 / 26%), transparent 42%),
    linear-gradient(135deg, rgb(29 41 63 / 98%), rgb(18 29 49 / 98%));
}

.store-seasons-header h2 {
  color: #fffaf5;
}

.store-seasons-header .studio-eyebrow,
.store-seasons-header .studio-lede {
  color: rgba(255, 250, 245, 0.78);
}

.season-readiness {
  z-index: 1;
  display: grid;
  min-width: 128px;
  padding: 14px 18px;
  border: 1px solid rgb(255 255 255 / 14%);
  border-radius: 18px;
  background: rgb(8 18 34 / 48%);
  text-align: center;
}

.season-readiness strong {
  color: var(--gold-light);
  font: 700 1.8rem/1 var(--font-serif);
}

.season-readiness span {
  margin-top: 5px;
  color: rgb(255 255 255 / 72%);
  font-size: 0.76rem;
}

.season-readiness[data-tone="ready"] strong {
  color: #b9dfc2;
}

.storefront-materialization-status {
  --materialization-tone: var(--tone-grey);

  display: grid;
  grid-template-columns: minmax(190px, 0.35fr) minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--materialization-tone);
  border-radius: 16px;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm);
}

.storefront-materialization-status[data-tone="attention"] {
  --materialization-tone: var(--warning);
}

.storefront-materialization-status[data-tone="ready"] {
  --materialization-tone: var(--tone-green);
}

.storefront-materialization-status[data-tone="live"] {
  --materialization-tone: var(--tone-violet);
}

.storefront-materialization-status > div {
  display: grid;
  gap: 3px;
}

.storefront-materialization-status span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.storefront-materialization-status strong {
  color: var(--text);
  font-family: var(--notification-heading-font);
  font-size: 1rem;
}

.storefront-materialization-status p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.store-seasons-header-side {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: end;
  gap: 10px;
}

@media (max-width: 1180px) {
  .store-seasons-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .store-seasons-header-side {
    width: min(100%, 160px);
    align-items: start;
  }
}

@media (max-width: 560px) {
  .store-seasons-header-side {
    grid-template-columns: 1fr;
  }
}

.season-page-tools {
  display: flex;
  justify-content: flex-end;
  margin-top: -8px;
}

.season-timing-settings {
  width: min(360px, 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
  color: var(--text);
  box-shadow: var(--shadow-sm);
}

.season-timing-settings summary {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 10px 13px;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 700;
}

.season-timing-settings summary span {
  color: var(--muted);
  font-weight: 600;
}

.season-timing-settings > p {
  margin: 0;
  padding: 0 12px 10px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.season-timing-settings form {
  display: grid;
  gap: 8px;
  padding: 0 12px 12px;
}

.season-timing-settings label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.season-timing-settings input {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.season-calendar-coverage {
  display: grid;
  gap: 6px;
  padding: 10px 12px 12px;
  border-top: 1px solid var(--border);
}

.season-calendar-coverage h4 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
}

.season-calendar-coverage dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.season-calendar-coverage dl > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  font-size: 0.72rem;
}

.season-calendar-coverage dt {
  color: var(--muted);
  font-weight: 700;
}

.season-calendar-coverage dd {
  margin: 0;
  overflow-wrap: anywhere;
  text-align: right;
}

.season-calendar-coverage p {
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.4;
}

.season-calendar-coverage[data-lunar-calendar-source="bundled"] p,
.season-calendar-coverage[data-lunar-calendar-source="unavailable"] p {
  color: var(--text);
}

.season-planner,
.season-plan-form {
  min-width: 0;
}

.season-workspace {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.season-source-rail {
  position: sticky;
  z-index: 4;
  top: var(--season-sticky-top, 16px);
  align-self: start;
  min-width: 0;
  max-height: none;
}

.season-workspace-main {
  display: grid;
  min-width: 0;
  gap: 24px;
}

/* Every direct child is a grid item. Its default min-width:auto would let the
   timeline canvas become the grid's minimum width and push the entire Admin
   page sideways instead of scrolling inside .lp-scroll. */
.season-workspace-main > * {
  min-width: 0;
  max-width: 100%;
}

.season-workspace-main > .season-strip > .lp-year-picker {
  margin-top: 0;
}

/* Slice 3 (2026-09-17 plan, "Compact sticky timeline strip"): one opaque
   sticky wrapper around the year picker + timeline, below the portal
   control bar (z-index 4) and above ordinary content. min-width:0 keeps
   this new wrapper from becoming the grid's minimum width (same rule as
   .season-workspace-main > * above). */
.season-strip {
  position: sticky;
  top: var(--season-sticky-top, 16px);
  z-index: 5;
  min-width: 0;
  background: var(--surface);
}

/* Fix (review pass, slice 3): when the strip is pinned, the 16px margin
   baked into --season-sticky-top's "+ 16" (lunar-planner-bindings.js
   publishSeasonLayoutVars) sits between the portal control bar's bottom
   edge (or the plain shell's viewport top) and the strip's own stuck top
   edge. That 16px band paints nothing on its own, so scrolled page content
   (e.g. the season heading in .season-page-tools) peeks through it. Cover
   exactly that band with the strip's own opaque background via a ::before
   anchored to the strip's box, NOT the full --season-sticky-top value
   (which in portal mode also spans the control bar's own height — already
   opaque and z-stacked above this wrapper). Height is a fixed 16px to
   match that literal margin; while the strip sits in normal flow
   (unstuck), this 16px fits entirely inside the .season-workspace-main
   grid's own 24px row gap above it, so nothing is covered pre-scroll. The
   strip's own z-index: 5 (lower than the portal control bar's z-index: 20)
   already keeps this pseudo from ever painting over the control bar. */
.season-strip::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 16px;
  background: var(--surface);
}

/* The selected season is one direct top-to-bottom workflow: Moon Decks,
   shelves, then the secondary change summary. */
.season-plan-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.season-canvas {
  min-width: 0;
  container-name: season-canvas;
  container-type: inline-size;
}

/* Slice 7 review fix (item 1): the guide's own width drives its layout, so
   the form that wraps it (its width is the guide's width — no side padding
   between them) is the container it queries against. */
.season-plan-form {
  container-name: season-plan-form;
  container-type: inline-size;
}

.season-canvas-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
  gap: 18px;
  align-items: start;
  min-width: 0;
}

.season-canvas-editor {
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 14px;
}

.season-customer-preview {
  /* Slice 3 (2026-09-17 plan): the old 84px sticky top is now stale against
     the sticky timeline strip and could cover targets — keep the preview in
     normal flow. */
  position: static;
  display: grid;
  width: 100%;
  min-width: 0;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface-raised) 88%, #eef2f8);
}

@container season-canvas (max-width: 900px) {
  .season-canvas-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-customer-preview {
    position: static;
  }
}

.season-customer-preview > header {
  display: flex;
  gap: 10px;
  align-items: start;
  justify-content: space-between;
}

.season-customer-preview h3 {
  margin: 3px 0 0;
  font-size: 1.25rem;
}

.season-customer-preview > header > span {
  color: var(--muted);
  font-size: 0.72rem;
  white-space: nowrap;
}

.season-store-phone {
  overflow: hidden;
  border: 7px solid #28242a;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 16px 38px rgb(32 26 30 / 14%);
}

.season-store-phone-title {
  display: grid;
  gap: 3px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--border);
}

.season-store-phone-title span {
  color: var(--accent-strong);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.season-store-phone-title strong {
  font: 700 1.55rem/1.1 var(--font-serif);
}

.season-store-phone-body {
  display: grid;
  max-height: 520px;
  gap: 18px;
  overflow-y: auto;
  padding: 16px;
}

.season-store-preview-shelf {
  display: grid;
  gap: 10px;
}

.season-store-preview-shelf h4 {
  margin: 0;
  font-size: 0.9rem;
}

.season-store-preview-shelf > div {
  display: flex;
  gap: 10px;
  overflow-x: auto;
}

.season-store-preview-shelf[data-layout="grid"] > div {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: visible;
}

.season-store-preview-product {
  display: grid;
  flex: 0 0 82px;
  min-width: 0;
  gap: 6px;
  align-content: start;
  cursor: pointer;
}

.season-store-preview-product .deck-cover-md {
  width: 72px;
  height: 108px;
}

.season-store-preview-product strong {
  overflow: hidden;
  font-size: 0.68rem;
  line-height: 1.25;
  text-overflow: ellipsis;
}

.season-store-phone-empty {
  margin: 14px 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

.season-app-interaction-preview summary {
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 750;
}

.season-app-interaction-preview iframe {
  width: 100%;
  min-height: 520px;
  margin-top: 10px;
  border: 0;
  border-radius: 14px;
  background: #fff;
}

.season-app-interaction-preview p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

.season-change-review {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-raised);
}

.season-change-review > summary {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  cursor: pointer;
  list-style: none;
}

.season-change-review > summary::-webkit-details-marker { display: none; }

.season-change-chevron {
  color: var(--muted);
  font-size: 1.2rem;
  transform: rotate(90deg);
  transition: transform 120ms ease;
}

.season-change-review:not([open]) .season-change-chevron { transform: rotate(0deg); }

.season-change-heading {
  display: grid;
  gap: 3px;
}

.season-change-heading strong {
  color: var(--text);
  font: 700 1.05rem/1.25 var(--font-serif);
}

.season-change-count {
  margin-left: auto;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 0.72rem;
  font-weight: 750;
  white-space: nowrap;
}

.season-change-intro {
  margin: 0;
  padding: 0 18px 12px;
  color: var(--muted);
  font-size: 0.76rem;
}

@media (max-width: 940px) {
  .season-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-source-rail {
    position: static;
    max-height: none;
  }

  .season-canvas-workbench {
    grid-template-columns: minmax(0, 1fr);
  }

  .season-customer-preview {
    position: static;
  }
}

.season-plan-header,
.season-shelves > header {
  display: flex;
  gap: 20px;
  justify-content: space-between;
  align-items: start;
}

.season-plan-header {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
}

.season-plan-header h3,
.season-shelves h3,
.special-season-editor h3 {
  margin: 4px 0 6px;
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
}

.season-plan-header p,
.season-shelves > header p,
.special-season-editor p {
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
}

.season-plan-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.season-publish-reason {
  flex-basis: 100%;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.78rem;
  text-align: right;
}

.season-publish-reason:empty {
  display: none;
}

/* Slice 6 (2026-09-17 plan): the four-step "explain + navigate" guide.
   Compact by design, no boxes-within-boxes. Slice 7 review fix (item 1):
   title/detail copy must stay readable for every user (not just a
   `title=` tooltip only a mouse-hover can reveal), so it wraps normally
   instead of truncating with an ellipsis. The container query below
   (against `.season-plan-form`, the guide's own width — same pattern as
   `@container season-canvas` above) keeps the section compact anyway:
   at the plain harness's full width (guide width >=880px) one line per
   step still fits (measured <=144px tall); at every narrower width down
   to the real admin portal shell's own width (measured 668-868px at the
   two named laptop sizes) the copy wraps to a second line and the section
   stays <=200px tall; only a genuinely narrow container (<=520px — well
   below anything the portal shell produces at normal laptop widths)
   reflows the four steps into a 2x2 grid so no column is squeezed
   unreadably thin. */
.season-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

@container season-plan-form (max-width: 520px) {
  .season-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.season-guide-step {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 3px 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface-raised);
}

.season-guide-step[data-state="done"],
.season-guide-step[data-state="locked"] {
  border-color: #bcd8c0;
  background: #f2f8f3;
}

.season-guide-step[data-state="blocked"] {
  border-color: #e6b8b2;
  background: #fbf0ee;
}

.season-guide-tick {
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--muted);
}

.season-guide-step[data-state="done"] .season-guide-tick,
.season-guide-step[data-state="locked"] .season-guide-tick {
  color: #2f7a3a;
}

.season-guide-step[data-state="blocked"] .season-guide-tick {
  color: #8a2a20;
}

.season-guide-copy {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.season-guide-copy strong,
.season-guide-copy span {
  /* Slice 7 review fix (item 1): let the copy wrap/reflow normally so
     nothing is hidden behind a hover-only `title=` tooltip. The grid
     column switch above keeps this from ever needing more than two lines
     at the sizes this admin ships at. */
  display: block;
  min-width: 0;
  overflow-wrap: break-word;
}

.season-guide-copy strong {
  font-size: 0.82rem;
  line-height: 1.2;
}

.season-guide-copy span {
  font-size: 0.72rem;
  line-height: 1.25;
  color: var(--muted);
}

.season-guide-step > button[data-guide-action] {
  grid-column: 1 / -1;
  justify-self: start;
  margin-top: 1px;
  padding: 2px 8px;
  font-size: 0.72rem;
  line-height: 1.4;
  min-height: 0;
}

.season-go-live-details {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.season-go-live-details > summary {
  cursor: pointer;
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.season-go-live-details > summary h4 {
  margin: 0;
  font-size: 0.9rem;
}

.season-decisions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-content: start;
}

.season-choice-intro {
  display: flex;
  grid-column: 1 / -1;
  gap: 18px;
  align-items: end;
  justify-content: space-between;
  padding: 2px 4px 4px;
}

.season-choice-intro h3 {
  margin: 3px 0 0;
  color: var(--text);
  font: 700 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--font-serif);
}

.season-choice-intro > p {
  max-width: 48ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: right;
}

.season-decision-card {
  display: grid;
  min-width: 0;
  min-height: 188px;
  padding: 10px 14px 14px;
  gap: 6px;
  align-content: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface-raised);
}

/* Slice 3 (2026-09-17 plan): guide-navigation targets scroll clear of the
   sticky control bar AND the sticky season timeline strip below it. */
.season-plan-form fieldset[data-season-slot],
[data-season-shelf],
[data-season-guide],
[data-season-go-live-details],
.season-customer-preview,
[data-lp-slot-action],
[data-season-add-deck-select],
[data-guide-guest-detail],
[data-go-live-target] {
  scroll-margin-top: calc(
    var(--season-sticky-top, 16px) + var(--season-strip-height, 248px) + 12px
  );
}

.season-decision-card legend {
  padding: 0 6px;
  color: var(--text);
  font: 700 1.05rem/1.2 var(--font-serif);
}

.season-decision-card label,
.special-season-fields label,
.season-copy-dialog label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.season-decision-card select,
.special-season-fields input,
.special-season-fields select,
.season-copy-dialog select,
.season-shelf-add select {
  min-width: 0;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.season-decision-card select:disabled,
.season-shelf-add select:disabled {
  color: var(--muted);
  opacity: 0.7;
}

/* The decision leads with the chosen deck as a physical object. */
.season-decision-object {
  display: grid;
  gap: 7px;
  justify-items: center;
  padding: 0;
}

/* Slice 4b (× placement fix): cover-sized positioning context for the hover
   × — see `.lp-slot-remove` and `.lp-slot-cover-anchor` above. */
.season-decision-cover {
  position: relative;
  display: inline-block;
  line-height: 0;
}

.season-decision-card .deck-cover-lg {
  width: 62px;
  height: 93px;
}

.season-moon-deck-name {
  max-width: 22ch;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.season-store-clock {
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
}

.season-store-clock header p {
  max-width: 640px;
  color: var(--muted);
  font-size: 0.86rem;
}

.season-store-clock form {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.season-store-clock label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.season-store-clock input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.season-decision-card small {
  color: var(--muted);
  line-height: 1.45;
}

.guest-decision-card {
  border-color: color-mix(in srgb, var(--gold) 42%, var(--border));
  background:
    linear-gradient(
      145deg,
      color-mix(in srgb, var(--gold) 9%, var(--surface-raised)),
      var(--surface-raised)
    );
}

.season-change-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
}

.season-change-group {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.season-change-group > header {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.season-change-group h4,
.season-change-group p {
  margin: 0;
}

.season-change-group h4 { font-size: 0.82rem; }

.season-change-group > header > span {
  display: grid;
  min-width: 24px;
  min-height: 24px;
  place-items: center;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 800;
}

.season-change-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}

.season-change-product {
  display: flex;
  min-width: 0;
  gap: 9px;
  align-items: center;
  padding: 7px;
  border-radius: 10px;
  background: var(--surface-raised);
}

.season-change-product > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.season-change-product strong {
  overflow: hidden;
  font-size: 0.75rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.season-change-product small,
.season-change-empty {
  color: var(--muted);
  font-size: 0.68rem;
}

.season-shelves {
  display: grid;
  padding: 22px;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
}

.season-shelf {
  display: grid;
  min-width: 0;
  padding: 16px;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
}

.season-shelf-decks {
  min-width: 0;
  min-height: 0;
}

.season-shelf h4,
.season-shelf small {
  margin: 0;
}

.season-shelf small {
  color: var(--muted);
}

.season-shelf-decks {
  display: flex;
  min-height: 62px;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}

.season-deck-card {
  display: grid;
  flex: 0 0 min(230px, 72vw);
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 7px 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  scroll-snap-align: start;
}

.season-deck-card[draggable="true"] {
  cursor: grab;
}

.season-deck-actions {
  display: flex;
  grid-column: 2;
  gap: 6px;
  flex-wrap: wrap;
  justify-self: start;
}

.season-deck-card .button {
  min-height: 30px;
}

.season-deck-handle {
  grid-row: 1 / span 2;
  width: 6px;
  height: 28px;
  border-left: 2px dotted var(--muted);
  border-right: 2px dotted var(--muted);
  opacity: 0.58;
}

.season-shelf-empty {
  margin: auto 0;
  color: var(--muted);
}

.season-shelf > header {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  justify-content: space-between;
  align-items: center;
}

.season-shelf-title-block {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

/* Dots-drawn drag handle (no text glyph — clean-text rule). */
.season-shelf-grab {
  flex: 0 0 auto;
  width: 14px;
  height: 22px;
  border-radius: 4px;
  background-image: radial-gradient(circle, var(--muted) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
  background-position: 1px 2px;
  opacity: 0.65;
  cursor: grab;
}

.season-shelf-grab:hover { opacity: 1; }

.season-shelf-title-button {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}

.season-shelf-title-button:hover h4 {
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.season-shelf-rename-input {
  min-width: 0;
  width: min(260px, 60vw);
  padding: 4px 8px;
  border: 1px solid var(--accent-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: 600 1rem/1.3 inherit;
}

.season-shelf-layout-chip {
  padding: 2px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font: 600 0.68rem/1.6 inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

button.season-shelf-layout-chip { cursor: pointer; }
button.season-shelf-layout-chip:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.season-shelf-order { display: inline-flex; gap: 2px; }

.season-shelf-order-button {
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
}

.season-shelf-order-button:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

.season-shelf-delete { margin-left: 4px; }

/* Insertion indicators: a shelf about to receive a row above it, and the
   tile a dragged deck will land before. */
.lp-shelf-insert-before { box-shadow: 0 -3px 0 0 var(--accent-strong); }
.lp-insert-before { box-shadow: -3px 0 0 0 var(--accent-strong); border-radius: 2px; }

.season-shelf.lp-dragging { opacity: 0.5; }

.season-new-shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 14px;
  color: var(--muted);
}

.season-new-shelf.lp-drop-ok { border-color: var(--accent-strong); background: var(--accent-soft); }

.season-new-shelf-open {
  padding: 6px 12px;
  border: 0;
  background: none;
  color: var(--ink);
  font: 600 0.9rem/1.3 inherit;
  cursor: pointer;
}

.season-new-shelf-open:hover:not(:disabled) { color: var(--accent-strong); }
.season-new-shelf-open:disabled { opacity: 0.5; cursor: default; }

.season-new-shelf-hint,
.season-new-shelf-cap { font-size: 0.72rem; }

.season-new-shelf-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  width: 100%;
}

/* The author display above must not defeat the hidden attribute. */
.season-new-shelf-editor[hidden] {
  display: none;
}

.season-new-shelf-editor input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
}

.season-shelf-add {
  display: flex;
  flex: 0 1 280px;
  gap: 8px;
  align-items: center;
}

.season-shelf-add label {
  min-width: 0;
  flex: 1;
}

.season-shelf-add select {
  width: 100%;
}

/* ---- Composed-Store canvas (Seasons tab) ---- */
.season-canvas-controls {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.season-canvas-toggle {
  display: inline-flex;
  padding: 3px;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.season-canvas-toggle button {
  padding: 6px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
}

.season-canvas-toggle button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  color: var(--text);
  font-weight: 600;
}

.season-canvas-caption {
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Grid shelves wrap like the customer app's grid layout; carousel keeps the
   horizontal strip that .season-shelf-decks already provides. */
.season-shelf[data-layout="grid"] .season-shelf-decks {
  flex-wrap: wrap;
  overflow-x: visible;
}

.season-canvas > header {
  flex-wrap: wrap;
}

/* Store-like deck tiles: the canvas reads as the customer Store (cover +
   name per deck, carousel strip or wrapped grid per shelf layout) with the
   editing affordances layered onto each tile. */
.canvas-tile {
  display: grid;
  flex: 0 0 138px;
  gap: 7px;
  justify-items: center;
  align-content: start;
  padding: 12px 8px 10px;
  border: 1px solid transparent;
  border-radius: 14px;
  text-align: center;
  scroll-snap-align: start;
}

.canvas-tile:hover {
  border-color: var(--border);
  background: var(--surface);
}

.canvas-tile[draggable="true"] {
  cursor: grab;
}

.canvas-tile-name {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.canvas-tile-chips {
  display: grid;
  gap: 3px;
  justify-items: center;
}

.canvas-tile-actions {
  display: flex;
  gap: 10px;
}

.canvas-tile-action {
  padding: 2px 2px 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.canvas-tile-action:hover:not(:disabled) {
  color: var(--accent-strong);
  border-bottom-color: currentcolor;
}

.canvas-tile-action-danger:hover:not(:disabled) {
  color: #a33c34;
}

.canvas-tile-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.canvas-tile-hidden {
  opacity: 0.55;
}

.canvas-tile-hidden .canvas-tile-cover {
  outline: 2px dashed #a33c34;
  outline-offset: 2px;
}

.canvas-tile-overlay .canvas-tile-cover {
  outline: 2px solid #4e6fa8;
  outline-offset: 2px;
}

.season-deck-chip {
  padding: 1px 8px;
  border-radius: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.season-deck-chip-special {
  border: 1px solid #4e6fa8;
  background: rgba(78, 111, 168, 0.12);
  color: #3c5684;
}

.season-deck-chip-window {
  border: 1px solid var(--border);
  color: var(--muted);
}

.season-deck-chip-automatic {
  border: 1px solid color-mix(in srgb, var(--accent-strong) 55%, var(--border));
  background: color-mix(in srgb, var(--accent-strong) 10%, var(--surface));
  color: var(--accent-strong);
}

.season-deck-chip-hidden {
  border: 1px dashed #a33c34;
  color: #a33c34;
}

.season-deck-card-hidden {
  border-style: dashed;
  opacity: 0.62;
}

.season-deck-card-overlay {
  border-color: color-mix(in srgb, #4e6fa8 55%, var(--border));
}

.special-season-editor {
  display: grid;
  gap: 20px;
  min-width: 0;
}

.special-season-editor-header,
.special-season-lifecycle {
  display: grid;
  padding: 20px 22px;
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
}

.special-season-editor-header h3,
.special-season-lifecycle h4 {
  margin: 4px 0 0;
}

.special-season-editor-header p {
  margin: 5px 0 0;
  color: var(--muted);
}

.special-season-lifecycle > div:first-child {
  display: grid;
}

.special-season-shell[hidden] {
  display: none;
}

.special-season-list {
  display: grid;
  padding: 22px;
  gap: 16px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
}

.special-season-list > header,
.special-season-list > div {
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.special-season-list > header p {
  margin: 0;
  color: var(--muted);
}

.special-season-list > div {
  overflow-x: auto;
}

.special-season-list article {
  display: grid;
  flex: 0 0 min(390px, 88vw);
  padding: 14px;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}

.special-season-list article > div:first-child {
  display: grid;
  gap: 5px;
}

.special-season-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.special-season-publish-review {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.special-season-publish-review[hidden] {
  display: none;
}

.special-season-publish-review h4,
.special-season-publish-review p,
.special-season-publish-review ul {
  margin: 0;
}

.special-season-publish-review ul {
  padding-left: 20px;
}

.season-status-chip {
  justify-self: start;
  padding: 3px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.special-season-list article span,
.special-season-list article small {
  color: var(--muted);
}

.special-season-editor[hidden] {
  display: none;
}

.special-season-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.special-season-products {
  min-height: 0;
  border-style: dashed;
}

.special-season-shelf-settings {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(120px, 0.35fr);
  flex: 1 1 360px;
  gap: 10px;
}

.special-season-shelf-settings label {
  display: grid;
  min-width: 0;
  gap: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.special-season-shelf-settings input,
.special-season-shelf-settings select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

.special-season-products.lp-drop-ok {
  outline: 2px dashed var(--accent-strong);
  outline-offset: 2px;
  background: var(--accent-soft);
}

.special-season-products.lp-drop-no {
  outline: 2px dashed #a33c34;
  outline-offset: 2px;
}

.special-season-deck-list {
  min-height: 96px;
}

.special-season-product-option {
  cursor: grab;
}

.special-season-product-option[hidden] {
  display: none;
}

.special-season-product-option input {
  display: none;
}

.special-season-shelf-guidance {
  color: var(--muted);
  font-size: 0.72rem;
}

.special-season-actions,
.season-copy-dialog-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.season-copy-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface-raised);
  color: var(--text);
}

.season-copy-dialog::backdrop {
  background: rgb(3 9 18 / 72%);
}

.season-copy-dialog form {
  display: grid;
  padding: 22px;
  gap: 16px;
}

.season-copy-dialog h3,
.season-copy-dialog p {
  margin: 0;
}

.season-copy-dialog p {
  color: var(--muted);
}

@media (max-width: 1180px) {
  .special-season-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 820px) {
  .storefront-materialization-status {
    grid-template-columns: 1fr;
  }

  .season-decisions,
  .season-change-summary,
  .special-season-fields {
    grid-template-columns: 1fr;
  }

  .guest-decision-card {
    grid-column: auto;
  }

  .season-plan-header,
  .season-shelves > header {
    display: grid;
  }
}

@media (max-width: 620px) {
  .special-season-shelf-settings {
    grid-template-columns: 1fr;
  }
}

/* Message library ---------------------------------------------------------
   The persistence layer contains campaigns, delivery children, migration
   copies, and rollups. The operator sees one calm, message-first library. */
.message-library {
  display: grid;
  gap: 16px;
  margin-top: 30px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

[data-message-dashboard] .message-library {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.message-workspace-editor {
  display: grid;
  gap: 18px;
}

[data-message-browse-controls] {
  display: grid;
  gap: 18px;
}

.message-workspace-heading {
  display: grid;
  gap: 4px;
}

.message-workspace-heading .studio-eyebrow {
  margin: 0;
}

.notification-lede .message-workspace-back {
  margin-left: auto;
  align-self: center;
}

.message-library-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.message-library-status-filters,
.message-library-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.message-library-status-filters {
  margin: 1rem 0;
}

.message-library-detail {
  margin-top: 0.75rem;
  border-top: 1px solid var(--border, rgba(37, 31, 49, 0.14));
  padding-top: 0.75rem;
}

.message-library-detail > summary {
  cursor: pointer;
  font-weight: 700;
}

.message-library-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
  margin-top: 0.75rem;
}

.message-library-detail-grid h4,
.message-library-detail-grid p {
  margin: 0 0 0.35rem;
}

.message-library-capability-reasons {
  margin-top: 0.75rem;
  color: var(--muted, #635f69);
}

.message-library-capability-reasons p {
  margin: 0.25rem 0;
}

.message-library-child {
  display: grid;
  gap: 0.5rem;
}

.message-library-header h2,
.message-library-header p,
.message-library-card h3,
.message-library-card p {
  margin: 0;
}

.message-library-header h2 {
  margin-top: 4px;
  font-size: clamp(1.7rem, 2vw, 2.25rem);
  letter-spacing: -0.025em;
}

.message-library-header > div > p:last-child {
  margin-top: 6px;
  color: var(--muted);
}

.message-library-new {
  flex: 0 0 auto;
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(82, 59, 73, 0.16);
}

.message-library-new > span {
  margin-right: 5px;
  font-size: 1.2rem;
  line-height: 0;
}

.message-library-list {
  gap: 14px;
}

.message-library-warning {
  display: grid;
  gap: 4px;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid rgba(169, 121, 40, 0.3);
  background: rgba(199, 153, 72, 0.08);
  font-size: 0.88rem;
  color: var(--ink);
}

.message-library-operation-recovery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 12px 18px;
  border: 1px solid rgba(169, 121, 40, 0.3);
  border-radius: 12px;
  background: rgba(199, 153, 72, 0.08);
  color: var(--ink);
}

.message-library-operation-recovery[hidden] {
  display: none;
}

.message-library-operation-recovery p,
.message-library-operation-recovery small {
  grid-column: 1;
  margin: 0;
}

.message-library-operation-recovery p {
  font-size: 0.88rem;
}

.message-library-operation-recovery small {
  color: var(--muted);
}

.message-library-operation-recovery .button {
  grid-column: 2;
  grid-row: 1 / span 3;
}

.message-library-card-diagnostics {
  padding: 8px 22px;
  border-top: 1px solid var(--line);
  background: rgba(199, 153, 72, 0.05);
}

.message-library-diagnostic {
  margin: 0;
  font-size: 0.8rem;
  color: #835f22;
}

.message-library-children {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 22px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.015);
}

.message-library-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.message-library-child-channel {
  color: var(--muted);
  font-weight: 600;
}

.message-library-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, rgba(253, 250, 247, 0.94) 100%);
  box-shadow: 0 8px 26px rgba(45, 34, 41, 0.06);
}

.message-library-card-main {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(190px, auto) auto;
  align-items: center;
  gap: 24px;
  padding: 21px 22px;
}

.message-library-identity {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.message-library-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
}

.message-library-title-row h3 {
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}

.message-library-identity p,
.message-library-identity small,
.message-library-draft small,
.message-library-history > p,
.message-library-history time,
.message-library-history li div > span {
  color: var(--muted);
}

.message-library-identity p {
  font-size: 0.88rem;
}

.message-library-identity small,
.message-library-draft small,
.message-library-history time {
  font-size: 0.75rem;
}

.message-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
}

.message-status.is-live {
  border-color: rgba(69, 133, 96, 0.26);
  background: rgba(69, 133, 96, 0.11);
  color: #356d4d;
}

.message-status.is-draft,
.message-status.is-ready {
  border-color: rgba(169, 121, 40, 0.25);
  background: rgba(199, 153, 72, 0.12);
  color: #835f22;
}

.message-library-metrics {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--muted);
  font-size: 0.8rem;
}

.message-library-metrics strong {
  color: var(--ink);
  font-weight: 750;
}

.message-library-metrics.is-empty {
  text-align: right;
}

.message-library-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.message-library-draft {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 22px;
  border-top: 1px solid var(--line);
  background: rgba(121, 96, 111, 0.045);
}

.message-library-draft > div {
  display: flex;
  align-items: center;
  gap: 10px;
}

.message-library-draft > div > div {
  display: grid;
  gap: 2px;
}

.message-library-draft-icon {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--tone-amber);
  box-shadow: 0 0 0 5px var(--tone-amber-soft);
}

.message-library-history {
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.62);
}

.message-library-history summary {
  display: list-item;
  align-items: center;
  gap: 8px;
  padding: 14px 17px;
  cursor: pointer;
  font-weight: 750;
}

.message-library-history summary span {
  min-width: 22px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--muted);
  font-size: 0.72rem;
  text-align: center;
}

.message-library-history > p {
  margin: -4px 17px 12px 43px;
  font-size: 0.78rem;
}

.message-library-history ul {
  display: grid;
  margin: 0;
  padding: 0 16px 14px;
  list-style: none;
}

.message-library-history li {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 11px 4px;
  border-top: 1px solid var(--line);
}

.message-library-history li div {
  display: grid;
  gap: 3px;
}

.message-library-history li div > span {
  font-size: 0.78rem;
}

.message-library-empty {
  display: grid;
  gap: 5px;
}

@media (max-width: 960px) {
  .message-library-card-main {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .message-library-metrics {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 680px) {
  .message-library-operation-recovery {
    grid-template-columns: 1fr;
  }
  .message-library-operation-recovery .button {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
  .message-library-header,
  .message-library-card-main,
  .message-library-draft {
    align-items: stretch;
    flex-direction: column;
  }
  .message-library-header,
  .message-library-draft {
    display: flex;
  }
  .message-library-new {
    width: 100%;
  }
  .message-library-card-main {
    grid-template-columns: 1fr;
  }
  .message-library-metrics,
  .message-library-actions {
    grid-column: auto;
    grid-row: auto;
    justify-content: flex-start;
  }
  .message-library-actions .button {
    flex: 1;
  }
  .message-library-history li {
    grid-template-columns: 1fr auto;
  }
  .message-library-history time {
    grid-column: 1 / -1;
  }
}

/* ---- Year picker (Seasons tab) ---- */
.lp-year-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  /* Slice 3: compact 30px year row + 8px gap before the timeline strip. */
  margin: 0 0 8px;
}

.lp-year-picker button {
  display: grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}

.lp-year-picker button:disabled {
  opacity: 0.4;
  cursor: default;
}

.lp-year-label {
  min-width: 84px;
  font-size: 0.92rem;
  font-weight: 700;
  text-align: center;
}

.lp-year-today {
  font-weight: 600;
}

/* ---- Lunar Planner timeline (Seasons tab) ---- */
.lp-timeline {
  /* Slice 3: compact strip budget — 2px border top+bottom + 4px padding
     top+bottom = 6px total on top of canvasHeight()'s 202px. */
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 2px 0 2px;
}
.lp-frame { display: flex; }
.lp-legend {
  flex: 0 0 64px;
  display: flex; flex-direction: column;
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted); padding-left: 12px;
}
.lp-legend span { display: flex; align-items: center; }
.lp-add-special {
  width: 58px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  cursor: pointer;
  font: inherit;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.15;
  text-align: left;
  text-transform: none;
}
.lp-add-special:hover,
.lp-add-special:focus-visible { text-decoration: underline; }
/* min-width: 0 is load-bearing: without it this flex item's min-content is
   the full inline-width timeline canvas, which forces the whole Seasons grid
   wider than the viewport instead of scrolling. The companion rule lives on
   .store-seasons-studio > * (grid items keep min-width: auto otherwise and
   re-introduce the same blow-out one level up). */
.lp-scroll { flex: 1; min-width: 0; overflow-x: auto; }
.lp-canvas { position: relative; }
.lp-moonmark { position: absolute; transform: translateX(-50%); text-align: center; width: 72px; }
.lp-glyph { display: block; width: 12px; height: 12px; border-radius: 50%; margin: 0 auto 2px; }
.lp-moon-new .lp-glyph { border: 1.5px solid var(--muted); }
.lp-moon-full .lp-glyph { background: var(--line-strong); box-shadow: 0 0 6px 1px var(--line-strong); }
.lp-moon-label { font-size: 10px; color: var(--muted); white-space: nowrap; }
.lp-season {
  position: absolute; border: 1px solid var(--line); border-radius: 10px;
  /* Slice 3 compact budget: 2px border (1 top + 1 bottom) + 4px card
     padding (2 top + 2 bottom) is all ROW.seasonsHeight (118) allots before
     the header/slots content. */
  background: var(--surface); padding: 2px 8px; overflow: hidden; cursor: pointer;
}
.lp-season:hover { border-color: var(--line-strong); }
.lp-season.lp-drop-ok {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent-strong);
}
.lp-season.lp-drop-no {
  border-color: #a33c34;
  box-shadow: inset 0 0 0 2px #a33c34;
}
.lp-season:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.lp-ended { border-style: dashed; opacity: 0.65; }
.lp-open-ended { border-right-style: dashed; border-right-width: 2px; }
.lp-season-head { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; min-width: 0; height: 16px; }
.lp-season-name { font-weight: 600; font-size: 13px; line-height: 16px; color: var(--ink); white-space: nowrap; }

/* ---- Deck cover object (one visual for "a deck" everywhere) ---- */
.deck-cover {
  position: relative;
  display: grid;
  overflow: hidden;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background:
    linear-gradient(160deg, hsl(var(--lp-hue, 200) 46% 52%), hsl(var(--lp-hue, 200) 50% 34%));
  color: #fff;
  box-shadow: 0 4px 10px rgb(15 23 42 / 16%);
}
.deck-cover-letter { font-family: Georgia, serif; }
.deck-cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.deck-cover-sm { width: 30px; height: 45px; border-radius: 5px; font-size: 13px; }
.deck-cover-product { width: 52px; height: 78px; border-radius: 8px; font-size: 22px; }
.deck-cover-grid { width: min(58%, 132px); aspect-ratio: 2 / 3; height: auto; border-radius: 12px; font-size: 34px; }
.deck-cover-dock { width: min(100%, 104px); aspect-ratio: 2 / 3; height: auto; border-radius: 10px; font-size: 30px; }
.deck-cover-md { width: 64px; height: 96px; border-radius: 9px; font-size: 26px; }
.deck-cover-lg { width: 76px; height: 114px; border-radius: 10px; font-size: 30px; }
/* max-width keeps every season card's covers the same size whether or not
   the lineup bar below is present (locked seasons omit it). */
.deck-cover-slot { width: 100%; max-width: 68px; aspect-ratio: 2 / 3; height: auto; border-radius: 8px; font-size: 23px; }
/* Slice 4b (owner directive 2026-09-18): with the 50px slot-actions area
   gone, the compact timeline cover grows to the largest 2:3 that fits the
   118px card (~44x66), stacked above the name/window caption. */
.deck-cover-slot-sm { width: 44px; height: 66px; aspect-ratio: auto; border-radius: 7px; font-size: 20px; }
.deck-cover-empty {
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}

/* ---- Timeline Moon Deck slots: cover stacked over its caption ---- */
/* Slice 4b polish pass (owner directive 2026-09-18): a filled slot is a
   vertical stack — cover, then the deck name on one line underneath, then
   the merchandising-window tag if the 118px card still has room for it —
   centered in its slot column. Exact compact budget (see ROW.seasonsHeight
   in lunar-planner-render.js): 2px card border + 4px card padding + 16px
   header + 2px header gap + 4px slot padding + 90px slot content
   (66px cover + 2px gap + 22px caption: 12px name line + 10px tag line,
   zero internal gap) == 118px, exactly the card height. There is no slack
   for an internal name/tag gap, so .lp-slot-caption carries gap: 0.
   The old side-by-side cover-row + caption layout (Slice 3) is retired;
   the always-visible Remove / No-deck-this-season buttons and their
   reserved 50px area were removed even earlier — a hover × (below) is the
   only mutation affordance, and an empty slot needs no control at all. */
.lp-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
}
.lp-slot {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  gap: 2px;
  padding: 2px 6px;
  border-radius: 10px;
}
.lp-slot-filled {
  align-items: center;
}
.lp-slot-filled:hover { background: var(--surface-2); }
.lp-slot-cover-row {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 0;
}
/* The hover × anchors to the COVER's own corner, not the full-width row or
   the slot/fieldset around it — a cover-sized (shrink-wrapped) positioning
   context. Timeline uses this dedicated anchor; the form fieldset's existing
   `.season-decision-cover` wrapper (already cover-sized) plays the same
   role (see below). */
.lp-slot-cover-anchor {
  position: relative;
  display: inline-block;
  line-height: 0;
}
.lp-slot-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.lp-slot-name {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 12px;
  color: var(--ink);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-slot-window {
  display: block;
  width: 100%;
  font-size: 8px;
  line-height: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.lp-slot-open {
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1.5px dashed var(--line-strong);
  aspect-ratio: auto;
  color: var(--muted);
  text-align: center;
}
.lp-slot-kind { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.lp-slot-hint { font-size: 9.5px; }
/* A rejected drop target shows an honest "not allowed" cursor for the
   duration of the held drag. */
.lp-drop-no { cursor: no-drop; }
/* Hover remove (×): the ONE mutation affordance on an unlocked filled slot.
   Slice 4b (× placement fix): the × anchors to the COVER's own top-right
   corner via a cover-sized positioning context — `.lp-slot-cover-anchor` in
   the timeline, `.season-decision-cover` in the form — not the whole
   slot/fieldset. `top: 0; right: 0` seats the button flush with that
   corner (its center lands 12px in from each edge, well inside the
   ancestor season card's `overflow: hidden` bounds) rather than drifting to
   the slot/fieldset's own corner. Inconspicuous at rest — visible on
   hover, keyboard focus, or on a touch device (reduced opacity, always
   visible). */
.lp-slot-remove {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: rgba(20, 16, 12, 0.6);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity 120ms ease;
}
/* A CSS-drawn x (two rotated bars) — no glyph/content string, so this stays
   clean-text compliant everywhere in the stylesheet. */
.lp-slot-remove-glyph {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
}
.lp-slot-remove-glyph::before,
.lp-slot-remove-glyph::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.lp-slot-remove-glyph::before { transform: translateY(-50%) rotate(45deg); }
.lp-slot-remove-glyph::after { transform: translateY(-50%) rotate(-45deg); }
.lp-slot:hover .lp-slot-remove,
.lp-slot:focus-within .lp-slot-remove,
fieldset[data-season-slot]:hover .lp-slot-remove,
fieldset[data-season-slot]:focus-within .lp-slot-remove,
.lp-slot-remove:focus-visible {
  opacity: 1;
}
@media (hover: none) {
  .lp-slot-remove { opacity: 0.55; }
}

/* Broad add-to-shelves drop bar under the slots */
.lp-lineup-drop {
  display: grid;
  place-items: center;
  padding: 5px 6px;
  border: 1.5px dashed var(--line-strong);
  border-radius: 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
}
.lp-lineup-drop.lp-drop-ok { border-color: var(--accent-strong); background: var(--accent-soft); color: var(--accent-strong); }
.lp-lineup-drop.lp-drop-no { border-color: #a33c34; color: #a33c34; }
.lp-slot.lp-drop-ok { outline: 2px dashed var(--accent-strong); outline-offset: -2px; background: var(--accent-soft); }
.lp-slot.lp-drop-no { outline: 2px dashed #a33c34; outline-offset: -2px; }

/* Replacement is explicit: hovering a valid drag over a FILLED target shows
   its badge (real markup, not CSS content — the clean-text rule). */
.lp-slot-filled,
.season-decision-card[data-season-slot] {
  position: relative;
}
.lp-replace-badge {
  display: none;
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 1;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--accent-strong);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  pointer-events: none;
}
.lp-drop-ok .lp-replace-badge {
  display: block;
}

/* Container-sourced drags: draggable covers advertise it; while one is in
   flight the dock swaps its hint to the remove/cancel instruction. */
[data-lp-drag-slot][draggable="true"] { cursor: grab; }
[data-lp-drag-slot].lp-dragging { opacity: 0.45; }
.lp-dock-hint-remove { display: none; color: #a33c34; font-weight: 700; }
.lp-container-drag .lp-dock-hint-remove { display: block; }
.lp-container-drag .lp-dock-hint:not(.lp-dock-hint-remove) { display: none; }
.lp-container-drag .lp-dock { border-color: #a33c34; }
.lp-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 5px; padding: 1px 6px; white-space: nowrap;
}
.lp-chip-live { background: var(--accent-soft); color: var(--accent-strong); }
.lp-chip-ready { background: var(--accent-soft); color: var(--accent-strong); }
.lp-chip-attention { background: rgba(176, 122, 31, 0.14); color: #8a5f14; }
.lp-chip-ended { border: 1px solid var(--line); color: var(--muted); }
.lp-guest {
  position: absolute; height: 20px; border-radius: 6px; font-size: 10px;
  display: flex; align-items: center; padding: 0 7px; white-space: nowrap; overflow: hidden;
}
.lp-guest-deck { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent-strong); font-weight: 600; }
.lp-guest-covered { border: 1px dashed var(--accent); opacity: 0.5; }
.lp-guest-none { border: 1px solid var(--line); color: var(--muted); }
.lp-guest-open { border: 1px dashed var(--line-strong); color: var(--muted); }
.lp-guest-gap { border: 1.5px dashed #a33c34; color: #a33c34; font-weight: 700; }
.lp-special {
  position: absolute; height: 24px; border-radius: 7px; font-size: 10.5px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; padding: 0 8px;
  background: rgba(78, 111, 168, 0.12); border: 1px solid #4e6fa8; color: #3c5684;
  white-space: nowrap; overflow: hidden;
}
.lp-special-dates { font-weight: 400; color: var(--muted); }
.lp-special:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 2px;
}

/* Empty custom-lane space is the draw surface for new windows. */
.lp-custom-lane {
  position: absolute;
  border-radius: 8px;
  background: repeating-linear-gradient(90deg, transparent 0 26px, rgb(78 111 168 / 4%) 26px 27px);
  cursor: crosshair;
}

.lp-draw-ghost {
  position: absolute;
  border: 1.5px dashed #4e6fa8;
  border-radius: 7px;
  background: rgba(78, 111, 168, 0.16);
  pointer-events: none;
}

.lp-special { z-index: 1; }

.lp-special-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 8px;
  border-radius: 7px 0 0 7px;
  cursor: ew-resize;
}

.lp-special-handle-end {
  left: auto;
  right: 0;
  border-radius: 0 7px 7px 0;
}

.lp-special-editable .lp-special-handle:hover {
  background: rgba(78, 111, 168, 0.35);
}

.lp-zodiac {
  position: absolute;
  height: 24px;
  overflow: hidden;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--gold) 55%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  color: var(--ink);
  font: 600 10.5px/22px inherit;
  letter-spacing: 0.03em;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}

.lp-zodiac-lane {
  position: absolute;
  z-index: 0;
  border-block: 1px solid color-mix(in srgb, var(--gold) 22%, var(--line));
  background: color-mix(in srgb, var(--gold) 3%, transparent);
}

.lp-zodiac-empty {
  display: inline-flex;
  height: 100%;
  align-items: center;
  padding-left: 10px;
  color: var(--muted);
  font-size: 9.5px;
}

.lp-zodiac:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.special-season-new-shelf {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  grid-column: 1 / -1;
}

.special-season-new-shelf[hidden] { display: none; }

.special-season-zodiac-note {
  grid-column: 1 / -1;
  margin: 0;
  color: #8a7338;
  font-size: 0.8rem;
  font-weight: 650;
}

.special-season-zodiac-note[hidden] { display: none; }

.season-shelf-materialized {
  border-style: dashed;
  border-color: color-mix(in srgb, #4e6fa8 55%, var(--border));
}

.season-shelf-automatic {
  border-color: color-mix(in srgb, var(--accent-strong) 42%, var(--border));
  background: color-mix(in srgb, var(--accent-strong) 3%, var(--surface));
}
.lp-today { position: absolute; top: 26px; bottom: 0; border-left: 1.5px solid var(--accent-strong); opacity: 0.85; pointer-events: none; }
.lp-today-tag {
  position: absolute; top: 2px; transform: translateX(-50%);
  background: var(--accent-strong); color: #fff; font-size: 9px; font-weight: 700;
  letter-spacing: 0.05em; border-radius: 4px; padding: 1px 6px; white-space: nowrap;
}

/* ---- Product Source dock (Seasons tab) ---- */
.lp-dock {
  display: flex;
  flex-direction: column;
  height: var(--season-tray-height, calc(100dvh - 32px));
  max-height: none;
  overflow: hidden;
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 14px;
}
@supports not (height: 100dvh) {
  .lp-dock {
    height: var(--season-tray-height, calc(100vh - 32px));
  }
}
/* Renamed from .lp-dock-head (slice 2, 2026-09-17 plan) — same styling,
   now scoped with a data attribute so bindings can select it directly. */
[data-lp-dock-controls] {
  display: flex;
  align-items: stretch;
  gap: 10px;
  flex-wrap: wrap;
  flex: 0 0 auto;
  margin-bottom: 12px;
}
.lp-dock-title { font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
[data-lp-dock-controls] input[type="search"] {
  flex: 1 1 100%; min-width: 0; max-width: none;
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px;
}
.lp-dock-count {
  flex-basis: 100%;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.lp-dock-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lp-dock-chip {
  border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 3px 10px; font-size: 11.5px; cursor: pointer;
}
.lp-dock-chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-strong); font-weight: 600; }
.lp-dock-density {
  display: inline-flex;
  flex-basis: 100%;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10.5px;
}
.lp-dock-density > span { margin-right: 3px; font-weight: 700; }
.lp-dock-density button {
  min-height: 25px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 3px 8px;
}
.lp-dock-density button[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
}
.lp-dock-hint { flex-basis: 100%; font-size: 11px; color: var(--muted); }
.lp-dock-eligibility {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 11px;
}
.lp-dock-eligibility summary {
  width: fit-content;
  color: var(--accent-strong);
  cursor: pointer;
  font-weight: 700;
}
.lp-dock-eligibility p {
  max-width: 76ch;
  margin: 6px 0 0;
  line-height: 1.5;
}
/* The bounded, internally-scrolling tray body (slice 2, 2026-09-17 plan):
   holds the cards grid, the no-match empty state, and the help footer, so
   opening the help details cannot enlarge the fixed-height .lp-dock. */
.lp-dock-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}
.lp-dock-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.lp-dock-empty {
  margin: 8px 0;
  font-size: 12px;
  color: var(--muted);
}
.lp-dock-clear {
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  cursor: pointer;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 9px;
}
.lp-dock-help {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.lp-dock-card {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  justify-items: stretch;
  min-width: 0;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 8px;
}
.lp-dock-draggable { cursor: grab; }
.lp-dock-draggable:active { cursor: grabbing; }
.lp-dock-card.lp-dragging { opacity: 0.45; }
.lp-dock-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 8px 20px rgb(15 23 42 / 8%);
}
.lp-dock-card-art {
  position: relative;
  display: grid;
  min-height: 112px;
  place-items: center;
}

.lp-dock[data-density="small"] .lp-dock-cards {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.lp-dock[data-density="small"] .lp-dock-card {
  gap: 5px;
  border-radius: 9px;
  padding: 5px;
}
.lp-dock[data-density="small"] .lp-dock-card-art { min-height: 90px; }
.lp-dock[data-density="small"] .deck-cover-dock { width: min(100%, 60px); }
.lp-dock[data-density="small"] .lp-dock-card-name {
  min-height: 2.4em;
  font-size: 10.5px;
}
.lp-dock[data-density="small"] .lp-dock-card-meta,
.lp-dock[data-density="small"] .lp-dock-lineage { display: none; }
.lp-dock[data-density="small"] .lp-dock-readiness {
  max-width: 100%;
  overflow: hidden;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 940px) {
  .lp-dock {
    height: auto;
    max-height: none;
  }

  .lp-dock-list {
    max-height: 420px;
  }

  .lp-dock-cards {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  }
}
.lp-dock-drag-cue {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgb(20 31 37 / 78%);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.lp-dock-card:hover .lp-dock-drag-cue,
.lp-dock-card:focus-within .lp-dock-drag-cue {
  opacity: 1;
  transform: translateY(0);
}
.lp-dock-card-body { display: grid; min-width: 0; gap: 2px; }
.lp-dock-card-name {
  display: -webkit-box;
  min-height: 2.5em;
  overflow: hidden;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.lp-dock-card-meta { display: block; font-size: 10.5px; color: var(--muted); }
.lp-dock-readiness {
  width: fit-content;
  margin-top: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 750;
}
.lp-dock-readiness.is-ready { background: var(--accent-soft); color: var(--accent-strong); }
.lp-dock-readiness.needs-setup { background: rgb(176 122 31 / 12%); color: #8a5f14; }
.lp-dock-lineage { color: var(--muted); font-size: 9.5px; line-height: 1.3; }
fieldset.lp-drop-ok { outline: 2px dashed var(--accent-strong); outline-offset: 2px; }
fieldset.lp-drop-no { outline: 2px dashed #a33c34; outline-offset: 2px; }
.season-shelf.lp-drop-ok { outline: 2px dashed var(--accent-strong); outline-offset: 2px; }
.season-shelf.lp-drop-no { outline: 2px dashed #a33c34; outline-offset: 2px; }

/* Season go-live checklist (Seasons workspace) */
.season-go-live { margin-top: 1.25rem; padding: 1rem 1.25rem; border: 1px solid var(--line, #e3ddd3); border-radius: 14px; background: var(--panel, #fffdf9); }
.season-go-live-group { margin-top: 0.75rem; }
.season-go-live-group h4 { margin: 0 0 0.35rem; font-size: 0.95rem; }
.season-go-live-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.season-go-live-item { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: 0.75rem; align-items: center; padding: 0.55rem 0.75rem; border-radius: 10px; background: rgba(0, 0, 0, 0.03); }
.season-go-live-item strong { display: block; font-size: 0.92rem; }
.season-go-live-item span { font-size: 0.82rem; color: var(--muted, #6b6259); }
.season-go-live-tone { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.5rem; border-radius: 999px; text-align: center; color: #3c352e; background: #ebe6de; }
.season-go-live-item[data-tone="blocked"] .season-go-live-tone { background: #f3d4d1; color: #7a1f16; }
.season-go-live-item[data-tone="action"] .season-go-live-tone { background: #f6e5bd; color: #6a4a00; }
.season-go-live-item[data-tone="waiting"] .season-go-live-tone { background: #dde7f5; color: #1f3d6b; }
.season-go-live-item[data-tone="auto"] .season-go-live-tone { background: #e3eee0; color: #2f5a2a; }
.season-go-live-item[data-tone="ready"] .season-go-live-tone { background: #d9efdc; color: #1f5a2b; }

/* Season card: explicit status + late-plan note (Save draft, then Publish) */
.season-status-pill { display: inline-block; margin: 0.25rem 0 0.5rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; background: #ebe6de; color: #3c352e; }
.season-status-pill[data-season-status="live"] { background: #d9efdc; color: #1f5a2b; }
.season-status-pill[data-season-status="scheduled"] { background: #dde7f5; color: #1f3d6b; }
.season-status-pill[data-season-status="draft"] { background: #f6e5bd; color: #6a4a00; }
.season-status-pill[data-season-status="unplanned"] { background: #f3d4d1; color: #7a1f16; }
.season-late-plan-note { margin: 0.25rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: #fff4de; color: #4a3a12; font-size: 0.9rem; }
.season-calendar-note { margin: 0.25rem 0 0; padding: 0.6rem 0.8rem; border-radius: 10px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text); font-size: 0.9rem; }