/* =====================================================================
   Dhyey Textile — admin design system
   Hand-written, no build step. Shopify-like surfaces, spacing and controls.
   ===================================================================== */

:root {
  /* surfaces */
  --bg:            #f1f2f4;
  --surface:       #ffffff;
  --surface-sub:   #fafbfb;
  --surface-hover: #f6f6f7;
  --surface-press: #f1f2f4;

  /* text */
  --text:          #202223;
  --text-sub:      #6d7175;
  --text-disabled: #8c9196;
  --text-on-dark:  #ffffff;

  /* lines */
  --border:        #e1e3e5;
  --border-strong: #c9cccf;

  /* accents */
  --brand:         #1a7f64;
  --brand-dark:    #14634e;
  --brand-light:   #e3f1ed;
  --interactive:   #2c6ecb;
  --success:       #008060;
  --success-bg:    #e3f1df;
  --warning:       #b98900;
  --warning-bg:    #fff5ea;
  --critical:      #d72c0d;
  --critical-bg:   #fef2f2;
  --info-bg:       #eaf4ff;

  /* geometry */
  --radius:     8px;
  --radius-sm:  6px;
  --radius-lg:  12px;
  --shadow:     0 1px 0 rgba(22,29,37,.05);
  --shadow-card:0 0 0 1px rgba(63,63,68,.05), 0 1px 3px rgba(63,63,68,.15);
  --shadow-pop: 0 4px 16px rgba(31,33,36,.16);

  --sidebar-w:  240px;
  --topbar-h:   56px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--interactive); text-decoration: none; }
a:hover { text-decoration: underline; }

h1,h2,h3,h4 { margin: 0; font-weight: 600; line-height: 1.3; }
h1 { font-size: 20px; }
h2 { font-size: 16px; }
h3 { font-size: 14px; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }

/* ------------------------------------------------------------ layout */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface-sub);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  overflow-y: auto;
}

.sidebar__brand {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  flex: 0 0 auto;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__logo {
  width: 28px; height: 28px; border-radius: var(--radius-sm);
  background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
  flex: 0 0 auto;
}

.sidebar__nav { padding: 10px 8px 24px; }
.sidebar__group { margin-bottom: 4px; }
.sidebar__heading {
  padding: 12px 10px 4px;
  font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-disabled);
}

.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--text); font-weight: 500;
  transition: background .1s ease;
}
.nav-item:hover { background: var(--surface-hover); text-decoration: none; }
.nav-item.is-active { background: #e3e5e7; font-weight: 600; }
.nav-item__icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: .75; }
.nav-item.is-active .nav-item__icon { opacity: 1; }
.nav-item__badge {
  margin-left: auto;
  background: var(--critical); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 6px; border-radius: 10px;
}
.nav-sub { margin: 2px 0 6px 28px; display: none; }
.nav-sub.is-open { display: block; }
.nav-sub .nav-item { padding: 5px 10px; font-weight: 400; font-size: 13px; color: var(--text-sub); }
.nav-sub .nav-item.is-active { color: var(--text); background: transparent; font-weight: 600; }
/* The group a run of settings screens belongs to. Twenty-one links in one flat
   list is a list nobody reads to the end. */
.nav-sub__label {
  display: block; margin: 10px 10px 3px; font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--text-sub);
  opacity: .75;
}
.nav-sub__label:first-child { margin-top: 2px; }

/* ------------------------------------------------------------ main */
.main {
  flex: 1 1 auto;
  margin-left: var(--sidebar-w);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 30;
}

.topbar__search {
  flex: 1 1 auto; max-width: 460px; position: relative;
}
.topbar__search input {
  width: 100%; height: 34px;
  padding: 0 12px 0 34px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-sub);
  font: inherit; font-size: 13px;
}
.topbar__search input:focus {
  outline: 2px solid var(--interactive); outline-offset: -1px; background: #fff;
}
.topbar__search svg {
  position: absolute; left: 10px; top: 9px; width: 16px; height: 16px;
  opacity: .5; pointer-events: none;
}
.topbar__spacer { flex: 1 1 auto; }

.icon-btn {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text-sub); position: relative;
}
.icon-btn:hover { background: var(--surface-hover); color: var(--text); }
.icon-btn__dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--critical); border: 2px solid var(--surface);
}

.avatar-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px 4px 4px; border: 0; background: transparent;
  border-radius: var(--radius-sm); cursor: pointer; font: inherit;
}
.avatar-btn:hover { background: var(--surface-hover); }
.avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; flex: 0 0 auto;
}

/* ------------------------------------------------------------ page */
.page { padding: 20px; max-width: 1280px; width: 100%; margin: 0 auto; flex: 1 1 auto; }
.page--narrow { max-width: 800px; }

.page-header {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.page-header__text { flex: 1 1 300px; min-width: 0; }
.page-header__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page-header h1 { font-size: 20px; }
.page-header p { color: var(--text-sub); margin: 4px 0 0; font-size: 13px; }

.breadcrumbs { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-sub); margin-bottom: 8px; }
.breadcrumbs a { color: var(--text-sub); }
.breadcrumbs a:hover { color: var(--interactive); }

/* ------------------------------------------------------------ cards */
.card {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}
.card__header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.card__header h2 { flex: 1 1 auto; font-size: 14px; }
.card__body { padding: 16px; }
.card__body--flush { padding: 0; }
.card__footer {
  padding: 12px 16px; border-top: 1px solid var(--border);
  background: var(--surface-sub);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; gap: 8px; align-items: center;
}

/* two-column editor layout, like the Shopify product page */
.layout-2col { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
@media (max-width: 1024px) { .layout-2col { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow);
  transition: background .1s ease, border-color .1s ease;
}
.btn:hover { background: var(--surface-hover); text-decoration: none; }
.btn:active { background: var(--surface-press); }
.btn:disabled, .btn.is-disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--brand); border-color: var(--brand-dark); color: #fff;
}
.btn--primary:hover { background: var(--brand-dark); }

.btn--critical,
.btn--danger { background: var(--critical); border-color: #b02100; color: #fff; }
.btn--critical:hover,
.btn--danger:hover { background: #b02100; }

.btn--plain { border-color: transparent; box-shadow: none; background: transparent; color: var(--interactive); }
.btn--plain:hover { background: var(--surface-hover); }

.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--lg { height: 40px; padding: 0 20px; font-size: 14px; }
.btn--block { width: 100%; }

.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* ------------------------------------------------------------ forms */
.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field__label {
  display: block; margin-bottom: 4px;
  font-size: 13px; font-weight: 500; color: var(--text);
}
.field__label .req { color: var(--critical); }
.field__hint { margin-top: 4px; font-size: 12px; color: var(--text-sub); }
.field__error { margin-top: 4px; font-size: 12px; color: var(--critical); display: flex; gap: 4px; align-items: center; }

.input, .select, .textarea {
  width: 100%; min-height: 34px; padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font: inherit; font-size: 14px; color: var(--text);
}
.input:focus, .select:focus, .textarea:focus {
  outline: 2px solid var(--interactive); outline-offset: -1px; border-color: var(--interactive);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-press); color: var(--text-disabled); }
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--critical); }
.textarea { min-height: 90px; resize: vertical; line-height: 1.5; }
.select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236d7175'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 18px;
  padding-right: 30px;
}

.input-group { display: flex; }
.input-group .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group__addon {
  display: grid; place-items: center; padding: 0 10px;
  border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-sub); color: var(--text-sub); font-size: 13px;
}
.input-group--prefix .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.input-group--prefix .input-group__addon { border: 1px solid var(--border-strong); border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }

/* A currency whose symbol follows the number — "1 250 CFA". The addon stays
   first in the markup and moves with CSS, so a money field is one line of PHP
   either way rather than two branches in every form. */
.input-group--suffix .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group--suffix .input-group__addon {
  order: 2;
  border: 1px solid var(--border-strong); border-left: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }

.checkbox, .radio { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 8px; cursor: pointer; }
.checkbox input, .radio input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--brand); flex: 0 0 auto; }
.checkbox__text { font-size: 14px; }
.checkbox__hint { display: block; font-size: 12px; color: var(--text-sub); }

.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
/* A switch with a margin below it was meant to be its own row. Left inline it
   sits shoulder to shoulder with the next control and the two hint lines run
   together, which is how a settings form becomes unreadable. */
.switch.u-mb-8, .switch.u-mb-12, .switch.u-mb-16, .switch.u-mb-24 { display: flex; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border-strong); position: relative; transition: background .15s ease; flex: 0 0 auto;
}
.switch__track::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  transition: transform .15s ease; box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--interactive); outline-offset: 2px; }

/* ------------------------------------------------------------ tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th {
  text-align: left; font-weight: 600; color: var(--text-sub);
  padding: 10px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-sub); white-space: nowrap; font-size: 12px;
}
.table th:first-child, .table td:first-child { padding-left: 16px; }
.table th:last-child,  .table td:last-child  { padding-right: 16px; }
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.table__num { text-align: right; font-variant-numeric: tabular-nums; }
.table__thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-press); }
.table--selectable td:first-child, .table--selectable th:first-child { width: 36px; }

.empty {
  padding: 48px 24px; text-align: center; color: var(--text-sub);
}
.empty h3 { font-size: 15px; color: var(--text); margin-bottom: 6px; }
.empty p { max-width: 420px; margin: 0 auto 16px; }

/* ------------------------------------------------------------ badges & pills */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 12px; font-weight: 500; line-height: 18px;
  background: var(--surface-press); color: var(--text);
  white-space: nowrap;
}
.badge--success  { background: var(--success-bg);  color: #0c5132; }
.badge--warning  { background: var(--warning-bg);  color: #8a6116; }
.badge--critical { background: var(--critical-bg); color: #8e1f0b; }
.badge--info     { background: var(--info-bg);     color: #1f4b8f; }
.badge--dot::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }

/* ------------------------------------------------------------ tiles */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }
.tile {
  background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); padding: 16px;
}
.tile__title { font-size: 12px; font-weight: 600; color: var(--text-sub); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 12px; }
.tile__row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.tile__row + .tile__row { border-top: 1px solid var(--border); }
.tile__label { color: var(--text-sub); font-size: 13px; }
.tile__value { font-weight: 600; font-variant-numeric: tabular-nums; }
.tile__value--warning  { color: var(--warning); }
.tile__value--critical { color: var(--critical); }

.metric { font-size: 26px; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.metric-delta { font-size: 12px; font-weight: 500; }
.metric-delta--up   { color: var(--success); }
.metric-delta--down { color: var(--critical); }

/* ------------------------------------------------------------ banners */
.banner {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 16px; border-radius: var(--radius);
  margin-bottom: 16px; font-size: 13px;
  border-left: 4px solid var(--interactive); background: var(--info-bg);
}
.banner--success  { background: var(--success-bg);  border-color: var(--success); }
.banner--warning  { background: var(--warning-bg);  border-color: var(--warning); }
.banner--critical { background: var(--critical-bg); border-color: var(--critical); }
.banner--info     { background: var(--info-bg);     border-color: #1f4b8f; }
.banner__title { font-weight: 600; margin-bottom: 2px; }
.banner ul { margin: 6px 0 0; padding-left: 18px; }

/* ------------------------------------------------------------ toast */
.toast-stack { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: #1a1a1a; color: #fff;
  padding: 12px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-pop); font-size: 13px; font-weight: 500;
  display: flex; gap: 10px; align-items: center; min-width: 260px;
  animation: toast-in .18s ease-out;
}
.toast--success  { background: #0c5132; }
.toast--error    { background: #8e1f0b; }
.toast--warning  { background: #8a6116; }
.toast__close { margin-left: auto; background: none; border: 0; color: inherit; opacity: .7; cursor: pointer; font-size: 16px; line-height: 1; }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ sticky save bar */
.save-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: #1a1a1a; color: #fff;
  border-radius: var(--radius);
  padding: 10px 12px 10px 16px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-pop); margin-top: 16px;
}
.save-bar__text { flex: 1 1 auto; font-size: 13px; font-weight: 500; }
.save-bar .btn { height: 32px; }
.save-bar .btn--plain { color: #fff; }
.save-bar .btn--plain:hover { background: rgba(255,255,255,.12); }

/* ------------------------------------------------------------ pagination */
.pagination { display: flex; gap: 4px; align-items: center; justify-content: center; padding: 14px; flex-wrap: wrap; }
.pagination__item {
  min-width: 32px; height: 32px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500;
}
.pagination__item:hover { background: var(--surface-hover); text-decoration: none; }
.pagination__item.is-active { background: var(--text); color: #fff; border-color: var(--text); }
.pagination__item.is-disabled { opacity: .45; pointer-events: none; }
.pagination__gap { padding: 0 4px; color: var(--text-sub); }

/* ------------------------------------------------------------ filter bar */
.filter-bar {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.filter-bar .input, .filter-bar .select { height: 32px; width: auto; min-width: 140px; font-size: 13px; }
.filter-bar__search { flex: 1 1 220px; min-width: 180px; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 8px; overflow-x: auto; }
.tab {
  padding: 10px 12px; font-size: 13px; font-weight: 500; color: var(--text-sub);
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--text); text-decoration: none; }
.tab.is-active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }

/* The settings strip is two rows: which group, then which screen inside it.
   The group row is the quieter of the two — it is where you are, not what you
   are choosing. */
.tabs--groups {
  border-bottom: 0; padding-top: 6px; gap: 4px;
}
.tab--group {
  border-bottom: 0; border-radius: 999px; padding: 5px 12px;
  font-size: 12.5px; color: var(--text-sub);
}
.tab--group:hover { background: var(--surface-hover); }
.tab--group.is-active {
  background: var(--brand); color: #fff; font-weight: 600;
}
.tab--group.is-active:hover { color: #fff; }

/* ------------------------------------------------------------ auth screens */
.auth {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--bg); padding: 24px;
}
.auth__box { width: 100%; max-width: 400px; }
.auth__brand { text-align: center; margin-bottom: 20px; }
.auth__brand .sidebar__logo { width: 40px; height: 40px; font-size: 16px; margin: 0 auto 10px; }
.auth__brand h1 { font-size: 18px; }
.auth__brand p { color: var(--text-sub); font-size: 13px; margin-top: 2px; }
.auth .card__body { padding: 24px; }
.auth__footer { text-align: center; margin-top: 16px; font-size: 12px; color: var(--text-sub); }

/* ------------------------------------------------------------ utilities */
/* A definition list for the "at a glance" panel: label left, value right,
   so a column of facts reads down rather than wrapping. */
.kv { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
.kv dt { color: var(--text-sub); white-space: nowrap; }
.kv dd { margin: 0; text-align: right; word-break: break-word; }

/* The customer trail. Deliberately plain — it is read, not admired. */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__item { padding: 9px 0 9px 14px; border-left: 2px solid var(--border); position: relative; }
.timeline__item::before {
  content: ''; position: absolute; left: -5px; top: 15px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--border);
}
.timeline__item:first-child::before { background: var(--brand); }
.timeline__body { font-size: 13px; line-height: 1.45; }
.timeline__meta { font-size: 11.5px; color: var(--text-sub); margin-top: 2px; }

/* Compact controls, for a form that has to sit inside a table cell. */
.select--sm, .input--sm { padding: 5px 9px; font-size: 12.5px; height: auto; }

.u-flex { display: flex; }
.u-between { display: flex; justify-content: space-between; align-items: center; }
.u-gap-4 { gap: 4px; } .u-gap-8 { gap: 8px; } .u-gap-12 { gap: 12px; } .u-gap-16 { gap: 16px; }
.u-center { align-items: center; }
.u-wrap { flex-wrap: wrap; }

.u-grow { flex: 1 1 auto; min-width: 0; }
.u-right { text-align: right; }

/* Flex row utilities. Added with the quotation screens, which lay out
   label/value pairs; the storefront stylesheet has had these all along. */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; flex-wrap: nowrap; }
.row--between > span:last-child { text-align: right; white-space: nowrap; }
.spacer { flex: 1 1 auto; }
.u-mt-4 { margin-top: 4px; } .u-mt-8 { margin-top: 8px; } .u-mt-16 { margin-top: 16px; } .u-mt-24 { margin-top: 24px; }
.u-mb-0 { margin-bottom: 0; } .u-mb-8 { margin-bottom: 8px; } .u-mb-16 { margin-bottom: 16px; }
.u-sub { color: var(--text-sub); }
.u-small { font-size: 12px; }
.u-strong { font-weight: 600; }
.u-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-nowrap { white-space: nowrap; }
.u-hide { display: none !important; }

/* ------------------------------------------------------------ responsive */
.sidebar-toggle { display: none; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-pop); }
  .sidebar.is-open { transform: none; }
  .main { margin-left: 0; }
  .sidebar-toggle { display: grid; }
  .page { padding: 16px 12px; }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }
}

@media print {
  .sidebar, .topbar, .page-header__actions, .save-bar, .toast-stack { display: none !important; }
  .main { margin: 0; }
  .card { box-shadow: none; border: 1px solid var(--border); }
}

/* modules that arrive in a later build block — visible but not clickable */
.nav-item.is-soon { color: var(--text-disabled); cursor: default; }
.nav-item.is-soon:hover { background: transparent; }
.nav-item__soon {
  margin-left: auto;
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--text-disabled);
  background: var(--surface-press);
  padding: 1px 6px; border-radius: 9px;
}

/* ------------------------------------------------------------ product media */
.media-tile {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-sub);
  cursor: grab;
}
.media-tile img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; background: #fff; }
.media-tile.is-dragging { opacity: .4; }
.media-tile__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: 15px; line-height: 1; cursor: pointer;
}
.media-tile__remove:hover { background: var(--critical); }
.media-tile:first-child::after {
  content: 'Main'; position: absolute; bottom: 4px; left: 4px;
  background: rgba(0,0,0,.65); color: #fff;
  font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 8px;
}

/* variant option rows */
.option-row {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface-sub);
}

/* ------------------------------------------------------------ modal */
.modal {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(23,26,30,.45);
  display: grid; place-items: center;
  padding: 20px;
}
.modal__box {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  width: 100%; max-width: 460px;
  max-height: 90vh; display: flex; flex-direction: column;
}
.modal__head {
  padding: 16px 18px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.modal__head h2 { font-size: 15px; flex: 1 1 auto; }
.modal__body { padding: 18px; overflow-y: auto; }
.modal__foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-sub);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  display: flex; gap: 8px; justify-content: flex-end;
}

/* ------------------------------------------------------------ import progress */
.progress-bar-outer {
  height: 8px; background: var(--surface-press);
  border-radius: 4px; overflow: hidden; margin: 10px 0;
}
.progress-bar-inner {
  height: 100%; width: 0; background: var(--brand);
  transition: width .3s ease;
}
.map-row { display: grid; grid-template-columns: 1fr 220px; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--border); }
.map-row:last-child { border-bottom: 0; }
.map-sample { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--text-sub); }

/* =====================================================================
   Blocks 5–6 components

   These classes were written into the views of the order, content and
   marketing screens ahead of the stylesheet. Everything below is the
   stylesheet catching up; nothing here changes a screen that already
   looked right.

   Where a name here is a second spelling of one that already exists
   (card__head for card__header, btn--danger for btn--critical) the rule
   sets are shared rather than copied, so the two can never drift apart.
   ===================================================================== */

/* Three tokens the views reached for by their storefront names. */
:root {
  --rule:        var(--border);
  --border-sub:  var(--border);
  --paper:       var(--surface);
}

/* ------------------------------------------------------------ card head */
.card__head {
  padding: 12px 16px; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.card__title { flex: 1 1 auto; font-size: 14px; font-weight: 600; margin: 0; min-width: 0; }
.card__sub   { flex-basis: 100%; font-size: 12px; color: var(--text-sub); margin: 2px 0 0; }

/* ------------------------------------------------------------ page actions */
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.page-actions > .u-grow { flex: 1 1 auto; }

/* ------------------------------------------------------------ grids
   One grid, four shapes. They collapse to a single column on a phone,
   which is where the desk staff will read an order on a Sunday. */
.grid          { display: grid; gap: 16px; align-items: start; }
.grid--2       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4       { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1fr) 320px; }
.field-row--3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
  .grid--4       { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .grid--2, .grid--3, .grid--4, .field-row--3 { grid-template-columns: minmax(0, 1fr); }
}

/* A plain vertical stack. Margins on children collapse unpredictably
   once a card is conditional; a gap does not. */
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ------------------------------------------------------------ stat cards */
.stat-cards {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.stat-card {
  background: var(--surface); border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 14px 16px;
}
.stat-card__label {
  font-size: 12px; color: var(--text-sub); font-weight: 500;
  line-height: 1.35; margin-bottom: 6px;
}
.stat-card__value {
  font-size: 21px; font-weight: 650; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.stat-card--success  .stat-card__value { color: var(--success); }
.stat-card--warning  .stat-card__value { color: var(--warning); }
.stat-card--critical .stat-card__value { color: var(--critical); }

/* A definition list of money: label left, figure right, totals ruled off.
   Used for order and credit note summaries, so the figures must line up
   under one another however long the labels are. */
.stat-list { margin: 0; font-size: 13px; }
.stat-list > div,
.stat-list__row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.stat-list dt { color: var(--text-sub); }
.stat-list dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; }
.stat-list__total {
  border-top: 1px solid var(--border); margin-top: 6px; padding-top: 9px;
  font-weight: 650; font-size: 14px;
}

/* ------------------------------------------------------------ progress */
.progress {
  height: 6px; background: var(--surface-press);
  border-radius: 3px; overflow: hidden; margin-top: 5px;
}
.progress__bar { height: 100%; background: var(--brand); transition: width .3s ease; }

/* ------------------------------------------------------------ form bits */
.label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 4px; color: var(--text);
}
.input--lg { height: 40px; font-size: 15px; font-weight: 500; }
.input-group__prefix {
  display: inline-flex; align-items: center; padding: 0 10px;
  background: var(--surface-sub); border: 1px solid var(--border-strong); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
  font-size: 12.5px; color: var(--text-sub); white-space: nowrap;
}
.input-group__prefix + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* The markdown editor: a strip of buttons above a monospaced box. */
.editor-toolbar {
  display: flex; gap: 4px; flex-wrap: wrap; padding: 6px;
  background: var(--surface-sub);
  border: 1px solid var(--border-strong); border-bottom: 0;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.editor-toolbar button {
  height: 26px; min-width: 28px; padding: 0 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  font-size: 12px; font-weight: 600; color: var(--text-sub);
}
.editor-toolbar button:hover { background: var(--surface-hover); color: var(--text); }
.textarea--editor {
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.65;
}

/* ------------------------------------------------------------ review row */
.review-row { font-size: 13px; }
.review-row:last-child { border-bottom: 0 !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ------------------------------------------------------------ utilities */
.u-h5 { font-size: 14px; font-weight: 650; margin: 0 0 8px; }
.u-h6 { font-size: 12px; font-weight: 650; margin: 0 0 6px;
        text-transform: uppercase; letter-spacing: .04em; color: var(--text-sub); }
.u-tiny { font-size: 11.5px; }
.u-inline { display: inline-block; vertical-align: middle; }
.u-inline + .u-inline { margin-left: 6px; }
.u-mt-12 { margin-top: 12px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mr-8  { margin-right: 8px; }

/* ------------------------------------------------------------ analytics
   A pill row, for switching a date range without leaving the page's own
   heading. Distinct from .tabs on purpose: .tabs divides a screen into
   sections, these change what the whole screen is showing. */
.pills { display: flex; gap: 4px; flex-wrap: wrap; }
.pill {
  padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  color: var(--text-sub); background: var(--surface); border: 1px solid var(--border);
  white-space: nowrap;
}
.pill:hover { color: var(--text); background: var(--surface-hover); text-decoration: none; }
.pill.is-active {
  color: #fff; background: var(--brand); border-color: var(--brand); font-weight: 600;
}

/* A headline number with its change against the period before. */
.kpi { background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 18px; }
.kpi__label { font-size: 12px; color: var(--text-sub); font-weight: 500; }
.kpi__value {
  font-size: 26px; font-weight: 650; line-height: 1.15; margin-top: 4px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.kpi__foot { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.kpi__hint { font-size: 11.5px; color: var(--text-sub); }
/* Up is not automatically good — refunds rising is not a success — so the
   direction word is always present beside the arrow rather than colour alone. */
.kpi__delta { font-size: 12px; font-weight: 600; white-space: nowrap; }
.kpi__delta--up   { color: var(--success); }
.kpi__delta--down { color: var(--critical); }
.kpi__delta--flat { color: var(--text-sub); font-weight: 500; }

.chart { width: 100%; height: auto; display: block; }
.chart-hit { cursor: crosshair; }
.chart-hit:hover { fill: rgba(44,110,203,.06); }

.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; padding-left: 4px; }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sub); }
.chart-legend__swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.chart-legend__swatch--dashed {
  background-image: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px) !important;
  opacity: .8;
}

.sparkline { display: block; }

/* A bar list. The label column is fixed so the bars share a left edge and can
   actually be compared; without that they are decoration. */
.chart-bars { display: grid; gap: 9px; }
.chart-bars__row { display: grid; grid-template-columns: minmax(0,1fr) 2fr auto; gap: 12px; align-items: center; }
.chart-bars__label { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart-bars__track { height: 8px; background: var(--surface-press); border-radius: 4px; overflow: hidden; }
.chart-bars__fill { display: block; height: 100%; border-radius: 4px; }
.chart-bars__value { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.chart-bars__note { display: block; font-size: 11px; color: var(--text-sub); font-weight: 400; }

.funnel { display: grid; gap: 14px; }
.funnel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.funnel__label { font-size: 13px; font-weight: 500; }
.funnel__value { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.funnel__track { height: 10px; background: var(--surface-press); border-radius: 5px; overflow: hidden; margin: 5px 0 4px; }
.funnel__fill { display: block; height: 100%; border-radius: 5px; }
.funnel__foot { display: flex; justify-content: space-between; gap: 12px; font-size: 11.5px; color: var(--text-sub); }

/* The chart tooltip, one per page, moved to the pointer. */
.chart-tip {
  position: fixed; z-index: 60; pointer-events: none;
  background: #202223; color: #fff; font-size: 12px; line-height: 1.45;
  padding: 6px 9px; border-radius: var(--radius-sm); max-width: 260px;
  box-shadow: 0 4px 14px rgba(0,0,0,.22);
}

/* ------------------------------------------------------------ review photos
   Thumbnails on a review in the moderation queue, each with a remove control,
   so a blurred or wrong one can be taken off before the review is published. */
.review-photos { display: flex; gap: 8px; flex-wrap: wrap; }
.review-photos__item { position: relative; width: 88px; height: 88px; }
.review-photos__item img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--border); display: block;
}
.review-photos__item form { position: absolute; top: -6px; right: -6px; }
.review-photos__remove {
  width: 20px; height: 20px; border-radius: 50%; cursor: pointer;
  background: var(--critical); color: #fff; border: 2px solid var(--surface);
  font-size: 13px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}

/* Two utilities the views were already using. */
.u-danger { color: var(--critical); }
.u-ml-8   { margin-left: 8px; }

/* ----------------------------------------------- the home-page layout switch
   Which of the two layouts buyers are seeing, and the one button that changes
   it. Stacks on a narrow screen so the state line never gets squeezed to two
   words beside a button. */
.layout-switch {
  display: flex; gap: 20px; align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.layout-switch__state { flex: 1 1 340px; min-width: 0; }
.layout-switch__title { font-size: 15px; margin-bottom: 4px; }
.layout-switch__title strong { font-weight: 600; }
.layout-switch__actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.layout-switch__actions form { margin: 0; }
@media (max-width: 640px) {
  .layout-switch__actions { width: 100%; }
  .layout-switch__actions .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------- home page presets
   Six arrangements of the same sections. The card has to carry who each one is
   for, because that is the only thing that tells the client which to pick —
   the names alone ("Campaign", "Story led") do not. */
.preset-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.preset-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px; background: var(--surface-sub);
  display: flex; flex-direction: column; gap: 6px;
}
.preset-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 14px;
}
.preset-card__for { margin: 0; font-size: 13px; color: var(--text); }
.preset-card .u-small { margin: 0; }
.preset-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; }

/* The running order on the confirm screen. Numbered, because the order is the
   substance of a layout — not decoration on a list. */
.preset-list { margin: 0; padding-left: 22px; }
.preset-list__row { padding: 8px 0; border-bottom: 1px solid var(--border-sub); }
.preset-list__row:last-child { border-bottom: 0; }
.preset-list__row > div {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 2px;
}

/* ------------------------------------------------------------- collections
   Row actions, the rule builder, and the picker. */
.table__actions { white-space: nowrap; text-align: right; }
.table__actions .btn + .btn { margin-left: 6px; }

.rule-row {
  display: grid; gap: 8px; align-items: start;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) auto;
  padding: 8px 0; border-bottom: 1px solid var(--border-sub);
}
.rule-row:last-child { border-bottom: 0; }
.rule-row__drop { display: flex; align-items: center; padding-top: 7px; }
@media (max-width: 720px) {
  .rule-row { grid-template-columns: 1fr; }
  .rule-row__drop { padding-top: 0; }
}

.rule-summary {
  background: var(--surface-sub); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 12px; font-size: 13px;
}

.member-list { list-style: none; margin: 0; padding: 0; }
.member-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border-sub);
}
.member-list li:last-child { border-bottom: 0; }
.member-list__main { flex: 1 1 auto; min-width: 0; }
.member-list__main b { display: block; font-weight: 500; }
.member-list form { margin: 0; }

.picker-results { margin-top: 8px; }
.picker-results button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-bottom: 1px solid var(--border-sub);
  padding: 8px 4px; font: inherit; color: var(--text);
}
.picker-results button:hover { background: var(--surface-hover); }
.picker-results button span { color: var(--text-sub); font-size: 12px; }
.collection-thumb {
  display: block; width: 100%; max-width: 240px; height: auto;
  border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 8px;
}

/* ------------------------------------------------------------- appearance
   The five presets, and the colour list. Each preset card leads with its own
   colours, because a name and a paragraph do not tell anybody what a theme
   looks like. */
.theme-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.theme-card {
  border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.theme-card.is-live { border-color: var(--interactive); box-shadow: 0 0 0 1px var(--interactive); }
.theme-card__swatches { display: flex; height: 56px; }
.theme-card__swatches span { flex: 1 1 0; }
.theme-card__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; }
.theme-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.theme-card__for { margin: 0; font-size: 13px; }
.theme-card__body .u-small { margin: 0; }
.theme-card__actions { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; align-items: center; }
.theme-card__actions form { margin: 0; }

.colour-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-sub);
}
.colour-row:last-of-type { border-bottom: 0; }
.colour-row__dot {
  width: 42px; height: 34px; padding: 0; flex: 0 0 auto; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: none;
}
.colour-row__text { flex: 1 1 auto; min-width: 0; }
.colour-row__text b { display: block; font-weight: 500; font-size: 13px; }
.colour-row__text span { display: block; }
.colour-row__hex {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px; color: var(--text-sub); flex: 0 0 auto;
}

/* =====================================================================
   The live editor
   Full height, panel left, storefront right. It deliberately breaks out
   of the normal admin page padding — a preview with a margin around it
   is not a preview of anything.
   ===================================================================== */
.editor {
  display: grid; grid-template-columns: 380px 1fr;
  height: calc(100vh - var(--topbar-h)); margin: -20px; background: var(--bg);
}
.editor__panel {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--paper); border-right: 1px solid var(--border);
}
.editor__head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid var(--border);
}
.editor__head b { display: block; font-size: 14px; }
.editor__back { font-size: 12px; color: var(--text-sub); }
.editor__state { font-size: 12px; color: var(--text-sub); white-space: nowrap; }
.editor__state.is-dirty { color: var(--warning); font-weight: 600; }
.editor__note {
  padding: 10px 16px; font-size: 12px; line-height: 1.5;
  background: var(--info-bg); border-bottom: 1px solid var(--border);
}
.editor__scroll { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px; }
.editor__foot {
  display: flex; gap: 8px; padding: 12px 16px;
  border-top: 1px solid var(--border); background: var(--surface-sub);
}
.editor__foot form { margin: 0; flex: 1 1 0; }
.editor__foot .btn { width: 100%; }

/* the running order */
.ed-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.ed-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; color: var(--text);
}
.ed-item:hover { background: var(--surface-hover); }
.ed-item.is-active { background: var(--surface-press); border-color: var(--border-strong); }
.ed-item__label { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--text-sub); text-transform: uppercase; letter-spacing: .04em; }
.ed-item__title { display: block; font-size: 13px; font-weight: 500; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ed-add { margin-bottom: 16px; }
.ed-add summary { cursor: pointer; font-size: 13px; font-weight: 500; padding: 6px 0; }
.ed-add__list { display: flex; flex-direction: column; gap: 2px; padding-top: 6px; }
.ed-add__btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-radius: var(--radius-sm);
  padding: 7px 9px; font: inherit; color: var(--text);
}
.ed-add__btn:hover { background: var(--surface-hover); }
.ed-add__btn b { display: block; font-size: 13px; font-weight: 500; }
.ed-add__btn span { display: block; font-size: 12px; color: var(--text-sub); }

/* `display` must not be set unconditionally here: an explicit value beats the
   browser's own `[hidden] { display: none }`, and the panel hides every form
   but the selected one with exactly that attribute. Getting this wrong shows
   all twelve forms stacked. */
.ed-form { }                      /* see the note below before adding a display */
.ed-form[hidden] { display: none; }
.ed-form__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--border);
}
.ed-form__tools { display: flex; gap: 4px; }
.ed-items { display: flex; flex-direction: column; gap: 6px; }
.ed-items__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 6px; }
.ed-empty { padding: 24px 4px; font-size: 13px; color: var(--text-sub); text-align: center; }

/* the stage */
.editor__stage { display: flex; flex-direction: column; min-width: 0; }
.editor__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--paper);
}
.editor__sizes { display: flex; gap: 4px; }
.editor__sizes .btn.is-active { background: var(--surface-press); border-color: var(--border-strong); }
.switch--sm span { font-size: 12px; }
.editor__frame-wrap {
  flex: 1 1 auto; overflow: auto; display: flex; justify-content: center;
  padding: 14px; background: var(--bg);
}
.editor__frame {
  width: 100%; height: 100%; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-card);
  transition: width .18s;
}

@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; height: auto; margin: 0; }
  .editor__panel { border-right: 0; border-bottom: 1px solid var(--border); }
  .editor__frame-wrap { height: 70vh; }
}

/* A tick-list inside the editor — categories for a grid, and anything else
   later that is "choose several, in an order". */
.ed-picks {
  max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px;
}
.ed-pick { display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: pointer; border-radius: var(--radius-sm); }
.ed-pick:hover { background: var(--surface-hover); }
.ed-pick span { flex: 1 1 auto; font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.ed-pick em { font-style: normal; color: var(--text-sub); font-size: 12px; }

/* Collapsible groups inside a section's form. The content fields are open
   and unlabelled because they are the point; look, layout and visibility
   are folded away because most edits never touch them. */
.ed-group { border-top: 1px solid var(--border-sub); margin-top: 10px; }
.ed-group summary {
  cursor: pointer; padding: 9px 0; font-size: 12px; font-weight: 600;
  color: var(--text-sub); text-transform: uppercase; letter-spacing: .04em;
}
.ed-group__body { padding-bottom: 6px; }
.ed-items__row { grid-template-columns: repeat(var(--ed-cols, 2), minmax(0, 1fr)); }

/* The page regions sit above the section stack in the panel, with a rule
   between: they are the parts of the page that are not the page. */
.ed-list--regions { margin-bottom: 4px; }
.ed-divider {
  display: flex; align-items: center; gap: 10px;
  margin: 6px 0 10px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-sub);
}
.ed-divider::before, .ed-divider::after {
  content: ''; flex: 1 1 auto; height: 1px; background: var(--border);
}
.ed-media { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ed-media img {
  max-width: 150px; max-height: 60px; width: auto; object-fit: contain;
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px; background: var(--paper);
}

/* A gallery's chosen images, inside the editor. */
.ed-gallery {
  display: grid; gap: 6px; margin-bottom: 8px;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
}
.ed-gallery__cell { position: relative; aspect-ratio: 1 / 1; }
.ed-gallery__cell img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.ed-gallery__drop {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(0,0,0,.62); color: #fff; font-size: 14px; padding: 0;
}
.ed-gallery__drop:hover { background: rgba(0,0,0,.85); }