/* Tierney Studio Client Portal: shared styles.
   Brand taken from tierneystudio.com: charcoal, warm gold, Vesterbro
   headlines (Adobe Fonts), Cormorant italic accents, DM Sans text. */

@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-600-italic.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 300; font-display: swap; src: url("../fonts/dm-sans-300.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 400; font-display: swap; src: url("../fonts/dm-sans-400.woff2") format("woff2"); }
@font-face { font-family: "DM Sans"; font-weight: 700; font-display: swap; src: url("../fonts/dm-sans-700.woff2") format("woff2"); }

/* Dark is the default. The photo viewer always uses it. */
:root, .lightbox {
  color-scheme: dark;
  --charcoal: #242424;          /* page background */
  --charcoal-raised: #2e2e2e;   /* cards and fields */
  --sunken: #1c1c1c;            /* thumbnail wells */
  --line: #4a4a4a;
  --gold: #cfab79;
  --gold-hover: #dcbd92;
  --heading: #ffffff;           /* headings and strong text */
  --text: rgba(255, 255, 255, 0.9);
  --text-soft: #d4d4d4;         /* quotes, notes, secondary copy */
  --text-muted: #b8b8b8;
  --text-faint: #8a8a8a;
  --error: #f2a38f;
  --error-hover: #f7bbac;
  --on-error: #1a1a1a;
  --success: #b9d7a8;
  --warning: #f2a65a;           /* warnings: amber, never the brand gold */
  --poor: #ff8f80;                  /* "hard to read" warnings */
  --hairline: rgba(255, 255, 255, 0.25);      /* edge so dark swatches don't vanish */
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --bar: rgba(36, 36, 36, 0.98);           /* sticky header */
  --toast-bg: #2f2f2f;
  --shadow: rgba(0, 0, 0, 0.8);
  --backdrop: rgba(0, 0, 0, 0.65);
  --skeleton-a: #2c2c2c;
  --skeleton-b: #343434;
  --logo-filter: none;          /* the studio logo is light gray */

  --font-display: "vesterbro-vf", Georgia, serif;
  --font-display-weight: 800;   /* Vesterbro everywhere: headlines, names, samples */
  --chapter-title-size: clamp(40px, 6vw, 64px); /* every brand-guide chapter title, the Overview cover included */
  --font-accent: "Cormorant", Georgia, serif;
  --font-body: "DM Sans", system-ui, -apple-system, sans-serif;
}

/* Light mode. Every text color keeps at least 4.5:1 contrast (WCAG AA); the
   gold is deepened for text and buttons, which then take cream lettering.
   Things that show the client's brand (logo stages, swatches, the photo
   viewer) look the same in both modes. */
:root[data-theme="light"] {
  color-scheme: light;
  --charcoal: #f6f3ee;
  --charcoal-raised: #ffffff;
  --sunken: #ece7df;
  --line: #d8d1c6;
  --gold: #86663a;
  --gold-hover: #6f532e;
  --heading: #1f1c19;
  --text: rgba(31, 28, 25, 0.88);
  --text-soft: #3d3833;
  --text-muted: #6b645b;
  --text-faint: #756e65;
  --error: #b3412a;
  --error-hover: #9a3522;
  --on-error: #ffffff;
  --success: #3f7a2e;
  --warning: #a4520f;
  --poor: #b93a26;
  --hairline: rgba(0, 0, 0, 0.16);
  --hairline-soft: rgba(0, 0, 0, 0.1);
  --bar: rgba(246, 243, 238, 0.98);
  --toast-bg: #ffffff;
  --shadow: rgba(70, 50, 30, 0.22);
  --backdrop: rgba(40, 32, 24, 0.4);
  --skeleton-a: #ebe6de;
  --skeleton-b: #f4f0ea;
  --logo-filter: brightness(0.14);
}

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

/* "hidden" must always win, even over components that set their own display. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
  background: var(--charcoal);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
}

.card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.logo {
  display: block;
  width: 150px;
  height: auto;
  margin: 0 auto 40px;
  filter: var(--logo-filter);
}

.tagline {
  margin: 0 0 6px;
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--text-soft);
}

h1 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(34px, 8vw, 44px);
  line-height: 1.1;
  color: var(--heading);
}

.lede {
  margin: 0 0 32px;
  color: var(--text-muted);
}

form { text-align: left; }

.field { margin-bottom: 20px; }

label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Fields: one look for every text box, dropdown and text area ----
   Same height and corners; the border brightens on hover; focus is a gold
   border with a soft gold halo (never the browser's blue ring). */
input, select, textarea {
  width: 100%;
  min-height: 46px;
  padding: 12px 14px;
  font: inherit;
  font-weight: 400;
  color: var(--heading);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; }
/* Checkboxes, radios, color pickers and file inputs keep their own shape. */
input[type="checkbox"], input[type="radio"], input[type="color"], input[type="file"], input[type="range"] { width: auto; min-height: 0; padding: 0; border: 0; box-shadow: none; background: none; }
/* Dropdowns: the system arrow replaced by a gold chevron. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23CFAB79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
:root[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2386663A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
textarea { min-height: 96px; line-height: 1.5; }

/* Anything focusable without its own style: a gold ring, not the browser's blue. */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---- Expandable sections ("Color each part separately") ----
   A quiet row with the label on the left and a chevron that turns open. */
details.disclosure { border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--charcoal-raised) 60%, transparent); }
details.disclosure > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 16px;
  list-style: none;
  font-size: 14px; font-weight: 700; color: var(--heading);
  border-radius: 8px;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), margin 250ms cubic-bezier(0.16, 1, 0.3, 1);
}
details.disclosure[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
details.disclosure > summary:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
details.disclosure > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
details.disclosure[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.hint {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.button {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 15px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  /* Charcoal on gold: ~8:1 contrast (white on gold would be ~2:1). */
  color: var(--charcoal);
  background: var(--gold);
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}

.button:hover { background: var(--gold-hover); }
.button:focus-visible { outline: 2px solid var(--heading); outline-offset: 3px; }
.button:disabled { opacity: 0.6; cursor: progress; }

.button-secondary {
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
}
.button-secondary:hover { color: var(--charcoal); }

.message {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 15px;
  text-align: left;
}
.message[hidden] { display: none; }
.message.error { color: var(--error); background: color-mix(in srgb, var(--error) 10%, transparent); border: 1px solid color-mix(in srgb, var(--error) 40%, transparent); }
.message.success { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); border: 1px solid color-mix(in srgb, var(--success) 40%, transparent); }
/* Something to fix that isn't broken (e.g. two logos with one label). */
.message.warning, .callout-warning { color: var(--heading); background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); }
.callout-warning { margin: 0 0 16px; padding: 10px 14px; border-radius: 4px; font-size: 14px; }
.callout-warning::before { content: "⚠\00a0"; color: var(--warning); }
/* Guidance that isn't an error (e.g. "these parts can't be separated automatically") */
.message.info { color: var(--heading); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }

.links {
  margin-top: 28px;
  font-size: 15px;
  text-align: center;
}

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-hover); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer {
  margin-top: 56px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

/* Shown until a page's script decides what to display. */
[data-loading] { visibility: hidden; }


/* ==========================================================================
   Signed-in pages (admin screen, brand view): full-width layout with header
   ========================================================================== */

body.app {
  display: block;
  padding: 0;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid var(--line);
}

.topbar-logo { display: block; width: 84px; height: auto; filter: var(--logo-filter); }

.topbar-user {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  color: var(--text-muted);
  min-width: 0;
}

.topbar-user span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 32px 80px;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
}

.page-head h1 { margin: 0; text-align: left; overflow-wrap: anywhere; }
.page-head > div { min-width: 0; }
.page-head .tagline { text-align: left; }

.button-inline {
  display: inline-block;
  width: auto;
  margin-top: 0;
  padding: 11px 18px;
  font-size: 13px;
}

.button-small {
  padding: 7px 12px;
  font-size: 12px;
}

.back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14px;
}

/* Client cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.client-card {
  display: block;
  height: 100%;
  padding: 22px 22px 20px;
  color: inherit;
  text-decoration: none;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: border-color 0.15s;
}

.client-card:hover, .client-card:focus-visible { color: inherit; border-color: var(--gold); }

.client-card-name {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 18px;
  color: var(--heading);
  overflow-wrap: anywhere;
}

.client-card-meta { font-size: 14px; color: var(--text-muted); }

.badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  vertical-align: middle;
}

.empty {
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

.empty .tagline { margin-bottom: 4px; }
.empty p { margin: 0 0 20px; color: var(--text-muted); }

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted);
  cursor: pointer;
}

.toggle input { width: auto; accent-color: var(--gold); }

/* Tabs */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab[aria-current="page"] { color: var(--heading); border-bottom-color: var(--gold); }

/* Dialogs */
dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 32px;
  color: var(--text);
  background: var(--charcoal);
  border: 1px solid var(--line);
  border-radius: 8px;
}

dialog::backdrop { background: var(--backdrop); }

dialog h2 {
  margin: 0 0 20px;
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 28px;
  color: var(--heading);
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
}

@media (max-width: 640px) {
  .topbar { padding: 12px 16px; }
  .page { padding: 28px 16px 64px; }
}


/* ==========================================================================
   Admin: client page (tabs, Files)
   ========================================================================== */

button.tab {
  font-family: var(--font-body);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
button.tab:hover { color: var(--heading); }
button.tab:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.link-button {
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--gold);
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.link-button:hover { color: var(--gold-hover); }
.link-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.link-button.danger { color: var(--error); }

.button-danger { color: var(--on-error); background: var(--error); }
.button-danger:hover { background: var(--error-hover); }

.muted { color: var(--text-muted); }

.panel-label {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Files: folders are tabs across the top (with counts), files below at full width. */
.files { display: block; }
.folder-tabs {
  display: flex; align-items: center; gap: 4px 16px;
  margin-bottom: 28px; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.folder-tabs::-webkit-scrollbar { display: none; }
.folder-list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.folder-button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 12px 12px; margin-bottom: -1px;
  font: inherit; font-size: 15px; white-space: nowrap;
  color: var(--text-muted); background: none;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.folder-button:hover { color: var(--heading); border-bottom-color: var(--line); }
.folder-button[aria-current="true"] { color: var(--heading); border-bottom-color: var(--gold); }
.folder-button.is-empty { color: var(--text-faint); }
.folder-button.is-empty[aria-current="true"] { color: var(--heading); }
.folder-button:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: 4px; }
.folder-name { white-space: nowrap; }
.folder-count {
  min-width: 20px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
  color: var(--heading); background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 999px;
}
.folder-add { flex: none; margin-left: auto; padding-bottom: 2px; white-space: nowrap; font-size: 14px; }

.files-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.files-head h2 {
  margin: 0;
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 28px;
  color: var(--heading);
  overflow-wrap: anywhere;
}
.files-head-actions { display: flex; align-items: center; gap: 20px; }

.dropzone {
  padding: 22px;
  margin-bottom: 16px;
  font-size: 15px;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--line);
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.is-over { color: var(--heading); border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }

.upload-status { margin: 0 0 16px; color: var(--gold); font-size: 15px; }

.file-list { margin: 0; padding: 0; list-style: none; }

.file-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.file-row.is-archived { opacity: 0.6; }

/* Checkerboard so white and transparent logos stay visible. */
.thumb {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: 4px;
  background-color: #3a3a3a;
  background-image:
    linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.thumb.is-light-check {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%), linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%), linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
}
.thumb-ext {
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
}

.file-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.file-name { font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.file-meta { font-size: 13px; color: var(--text-muted); }
.file-note { font-size: 14px; color: var(--text-soft); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip {
  padding: 2px 8px;
  font-size: 12px;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.chip-strong { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.color-todo { padding: 0; border: 0; background: none; font: inherit; font-size: 13px; color: var(--text-muted); cursor: pointer; text-align: left; }
.color-todo::before { content: "○ "; color: var(--gold); }
.color-todo:hover { color: var(--heading); text-decoration: underline; }
.chip-missing { color: var(--error); border-color: color-mix(in srgb, var(--error) 50%, transparent); }

.file-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: flex-end; padding-top: 2px; }

/* Forms inside dialogs */
.dialog-wide { width: min(620px, calc(100vw - 32px)); }

textarea { resize: vertical; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

fieldset.checkbox-group { margin: 0 0 20px; padding: 0; border: 0; }
fieldset.checkbox-group legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#d-use-for { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }

label.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text);
  cursor: pointer;
}
label.check input { width: auto; accent-color: var(--gold); }

@media (max-width: 760px) {
  .file-row { grid-template-columns: 48px minmax(0, 1fr); }
  .file-row .thumb { width: 48px; height: 48px; }
  .file-actions { grid-column: 2; justify-content: flex-start; }
  .field-row, #d-use-for { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Admin: People and Settings tabs
   ========================================================================== */

.settings-block {
  max-width: 760px;
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}
.settings-block:last-child { border-bottom: 0; }
.settings-block .hint { margin: 0 0 16px; }

.section-title {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: var(--font-display-weight);
  font-size: 24px;
  color: var(--heading);
}

.people-list, .pages-list { margin: 0; padding: 0; list-style: none; }

.person-row, .page-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.person-who { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.person-email { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }

.invite-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 16px; }

.inline-form { display: flex; gap: 12px; }
.inline-form input { flex: 1; }

.page-move { display: flex; gap: 6px; }
.icon-button {
  width: 34px;
  height: 34px;
  font: inherit;
  color: var(--text);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 4px;
  cursor: pointer;
}
.icon-button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.icon-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .invite-row { grid-template-columns: 1fr; gap: 0; }
  .person-row { grid-template-columns: minmax(0, 1fr) auto; }
  .person-row .file-actions { grid-column: 1 / -1; justify-content: flex-start; }
  .inline-form { flex-direction: column; }
}


/* ==========================================================================
   Colors (admin tab + shared swatches)
   ========================================================================== */

.swatch {
  display: inline-block;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.swatch-large { width: 64px; height: 64px; border-radius: 6px; }
/* A pasted color with print values only: no screen color to show yet */
.swatch-missing { display: inline-grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--text-muted); background: repeating-linear-gradient(45deg, transparent 0 4px, var(--line) 4px 5px); }
.swatch-item.is-skipped .swatch-text { opacity: 0.7; }

.color-list { margin: 0; padding: 0; list-style: none; }
.color-row .file-actions { align-items: center; }

.swatch-preview {
  display: grid;
  gap: 8px;
  max-height: 280px;
  margin: 0 0 12px;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}
.swatch-item { display: flex; align-items: center; gap: 12px; }
.swatch-text { display: flex; flex-direction: column; font-size: 14px; }
.swatch-text strong { color: var(--heading); }
.swatch-text span { color: var(--text-muted); }

.color-edit-top { display: flex; gap: 16px; align-items: flex-end; }
.color-edit-top .field { flex: 1; }
.color-edit-top .swatch-large { margin-bottom: 20px; }

.hex-row { display: flex; gap: 8px; }
.hex-row input[type="text"] { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.hex-row input[type="color"] {
  flex: none;
  width: 52px;
  height: 46px;
  padding: 4px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.hex-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.hex-row input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 4px; }

fieldset.cmyk-group { margin: 0 0 20px; padding: 0; border: 0; }
fieldset.cmyk-group legend {
  margin-bottom: 6px;
  padding: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cmyk-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.cmyk-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  letter-spacing: normal;
}


/* ==========================================================================
   Client view: frame and Color page
   ========================================================================== */

.preview-banner {
  margin: 0;
  padding: 10px 16px;
  font-size: 14px;
  text-align: center;
  color: var(--charcoal);
  background: var(--gold);
}

.brand-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.brand-name {
  padding-left: 16px;
  font-weight: 700;
  color: var(--heading);
  border-left: 1px solid var(--line);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.client-switcher { width: auto; padding: 6px 10px; font-size: 14px; }

.brand-nav {
  display: flex;
  gap: 4px;
  padding: 0 32px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
}
.brand-nav-link {
  padding: 14px 14px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.brand-nav-link:hover { color: var(--heading); }
.brand-nav-link[aria-current="page"] { color: var(--heading); border-bottom-color: var(--gold); }

.brand-waiting { margin: 40px auto; }

.how-to {
  max-width: 760px;
  padding: 20px 24px;
  margin-bottom: 40px;
  background: var(--charcoal-raised);
  border-left: 3px solid var(--gold);
  border-radius: 0 6px 6px 0;
}
.how-to p { margin: 0 0 10px; }
.how-to p:last-child { margin-bottom: 0; }
.how-to-brand { font-family: var(--font-accent); font-style: italic; font-size: 20px; color: var(--heading); }

.downloads { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }

.swatch-group { margin-bottom: 48px; }
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.swatch-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0 0 14px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.swatch-card:hover { border-color: var(--gold); }
.pointer-active .swatch-card:hover { transform: translateY(-2px); }
.swatch-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.swatch-tile { display: block; height: 120px; margin-bottom: 12px; box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.swatch-card-name { padding: 0 14px; font-weight: 700; color: var(--heading); }
.swatch-card-hex { padding: 0 14px; font-size: 14px; color: var(--text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Color detail dialog */
.cd-head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.cd-head h2 { margin: 0; }
.cd-head .tagline { margin: 0; text-align: left; }
.swatch-hero { width: 88px; height: 88px; border-radius: 8px; }
.cd-label {
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#cd-body p { margin: 0; }

.value-list { margin: 0; padding: 0; list-style: none; }
.value-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.value-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.value-main { display: flex; flex-direction: column; min-width: 0; }
.value-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--heading); overflow-wrap: anywhere; }
.value-hint { font-size: 13px; color: var(--text-muted); }

.plain-list { margin: 6px 0 0; padding-left: 18px; }

/* Readable combinations: one card per background */
.pair-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 24px; padding: 0; list-style: none; font-size: 14px; color: var(--text-muted); }
.pair-legend .pair-label { font-weight: 700; }
.pair-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pair-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.pair-title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 16px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--heading); }
.pair-hex { margin-left: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.pair-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); }
.pair-list { margin: 0; padding: 0; list-style: none; }
/* Left: the pair for real, on the background (rows join into one color
   column). Right: the verdict, on the card. */
.pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.pair-sample { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px 16px; font-size: 19px; font-weight: 700; line-height: 1.2; }
.pair-aa { font-family: var(--font-display); font-size: 28px; font-weight: var(--font-display-weight); line-height: 1; }
.pair-name { min-width: 0; overflow-wrap: anywhere; }
.pair-verdict { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 14px; font-size: 14px; border-top: 1px solid var(--line); }
.pair:first-child .pair-verdict { border-top-color: transparent; }
.pair-ratio { font-size: 12px; color: var(--text-muted); }
.pair-all .pair-label { color: var(--success); }
.pair-all .pair-label::before { content: "✓ "; }
.pair-large .pair-label { color: var(--gold); }
.pair-none { margin: 0; padding: 16px; font-size: 14px; color: var(--text-muted); }
.pair-avoid { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: auto 0 0; padding: 12px 16px; font-size: 13px; color: var(--text-muted); border-top: 1px solid var(--line); }
.pair-avoid-label { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--text-soft); }
.pair-avoid-chip { display: inline-flex; align-items: center; gap: 8px; }
/* A tiny real sample: the card's background with "Aa" in the failing text color */
.pair-avoid-sample {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 22px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--hairline);
}

@media (max-width: 640px) {
  .brand-nav { padding: 0 8px; }
  .brand-name { display: none; }
  .downloads { align-items: flex-start; }
  .swatch-grid { grid-template-columns: repeat(2, 1fr); }
  .value-row { grid-template-columns: 70px minmax(0, 1fr); }
  .value-row .button { grid-column: 2; justify-self: start; }
}

@media (max-width: 640px) {
  .topbar-user #who { display: none; }
  .topbar-user .button { white-space: nowrap; }
}


/* ==========================================================================
   Logos (admin tab + shared logo frames)
   ========================================================================== */

.logos-intro { max-width: 760px; margin: -4px 0 24px; }

.logo-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  padding: 16px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.logo-frame img { display: block; max-width: 100%; max-height: 100%; }
.logo-frame.is-transparent {
  background-color: #3a3a3a;
  background-image:
    linear-gradient(45deg, #444 25%, transparent 25%), linear-gradient(-45deg, #444 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #444 75%), linear-gradient(-45deg, transparent 75%, #444 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.logo-frame-large { padding: 28px; }
.version-missing { background: var(--sunken); color: var(--text-faint); font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; }

.logo-card {
  padding: 24px;
  margin-bottom: 32px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.logo-card-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.logo-card-action { margin-left: auto; }
.logo-card-title { margin: 0; font-size: 20px; color: var(--heading); overflow-wrap: anywhere; }
.logo-card-file { margin: 2px 0 0; font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.logo-warnings { margin: 0 0 16px; padding: 10px 14px 10px 32px; border-radius: 4px; color: var(--heading); font-size: 14px; background: color-mix(in srgb, var(--warning) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warning) 55%, transparent); }
.logo-warnings li::marker { color: var(--warning); }
.logo-ok { margin: 0 0 16px; color: var(--success); font-size: 14px; }

.logo-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.part-list { margin: 0 0 12px; padding: 0; list-style: none; }
.part-row {
  display: grid;
  grid-template-columns: 28px 76px minmax(0, 1fr);
  gap: 4px 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.part-row input { min-height: 38px; padding: 8px 10px; font-size: 15px; }
/* The save button sits under the name fields, lined up with them. */
.logo-parts > .button { display: block; margin: 4px 0 0 124px; }
.part-hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; color: var(--text-muted); }
.part-match { grid-column: 3; font-size: 13px; color: var(--text-muted); }

.version-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.version-tile { display: flex; flex-direction: column; gap: 8px; }
.version-tile > .link-button { align-self: flex-start; }

/* Print PDFs on a studio logo card. */
.print-box { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.print-box .panel-label { margin-bottom: 4px; }
.print-intro { margin: 0 0 12px; }
.print-status { margin: 0 0 6px; font-size: 14px; color: var(--text-muted); }
.print-status.is-ready { color: var(--success); font-weight: 700; }
.print-fix { white-space: nowrap; }
.print-previews { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.print-approve { margin-top: 12px; }
.version-name { font-weight: 700; color: var(--heading); }
.version-warning { font-size: 13px; color: var(--warning); }

@media (max-width: 760px) {
  .logo-card-body { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Client view: Logo page
   ========================================================================== */

.logo-studio { margin-bottom: 48px; scroll-margin-top: 96px; }

.chip-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.pick-chip {
  padding: 9px 16px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}
.pick-chip:hover { border-color: var(--gold); }
.pick-chip:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--line); }
.pick-chip[aria-pressed="true"] { color: var(--charcoal); background: var(--gold); border-color: var(--gold); }
.pick-chip:focus-visible, .swatch-choice:focus-visible, .color-option:focus-visible, .suite-card:focus-visible {
  outline: 2px solid var(--heading);
  outline-offset: 2px;
}

/* The logo suite: one card per variation. */
.suite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.suite-card {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}
.suite-card:hover { border-color: var(--gold); box-shadow: 0 20px 36px -24px var(--shadow); }
.pointer-active .suite-card:hover { transform: translateY(-2px); }
.suite-card[aria-pressed="true"] { border-color: var(--gold); }
/* The selected ring's inner line sits on top of the card's content, so it's
   equally thick around the logo's backdrop and around the text. */
.suite-card[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--gold);
  border-radius: 7px; /* the card's 8px, inside its 1px border */
  pointer-events: none;
}
.suite-stage { display: flex; height: 150px; padding: 28px 32px; }
.suite-stage.is-light { background: #f4f1ec; }
.suite-stage.is-dark { background: #161616; }
/* Fills the stage's inner box and scales to fit, so tall and square marks stay inside. */
.suite-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.suite-name { display: block; padding: 14px 16px 0; font-weight: 700; color: var(--heading); }
.suite-text { display: block; padding: 6px 16px 16px; font-size: 14px; line-height: 1.45; color: var(--text-muted); }
/* No-break spaces keep " · Selected" together with the last word of the name, so the dot never dangles at a line end. */
.suite-kind { display: block; padding: 2px 16px 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
/* "Selected" sits on the logo's backdrop, so it never crowds the name. */
.suite-stage { position: relative; }
.suite-card[aria-pressed="true"] .suite-stage::after {
  content: "Selected";
  position: absolute; top: 10px; right: 10px;
  padding: 3px 8px; border-radius: 999px;
  background: var(--gold); color: var(--charcoal);
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}

/* The color studio: preview on the left, choices on the right. */
.logo-studio-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  margin-bottom: 40px;
}
.studio-preview { position: sticky; top: 96px; }
.logo-frame-hero { aspect-ratio: 16 / 10; padding: 48px; transition: background-color 250ms ease; }
.logo-frame.is-transparent.is-light-check {
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e8e8e8 25%, transparent 25%), linear-gradient(-45deg, #e8e8e8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e8e8e8 75%), linear-gradient(-45deg, transparent 75%, #e8e8e8 75%);
}
.logo-note { margin: 10px 0 0; font-size: 15px; color: var(--text-soft); }
.logo-note:empty { display: none; }
.readability-line { margin: 12px 0 0; font-size: 14px; color: var(--text-muted); }
.readability-line.rate-excellent, .readability-line.rate-good { color: var(--success); }
.readability-line.rate-fair { color: var(--gold); }
.readability-line.rate-poor { color: var(--poor); }

.studio-controls .panel-label { margin-top: 0; }
.studio-controls .swatch-choices { margin-bottom: 24px; }

.swatch-row-title { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.swatch-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch-choice {
  position: relative;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px var(--hairline);
  cursor: pointer;
}
.swatch-choice[aria-checked="true"] { border-color: var(--gold); box-shadow: 0 0 0 2px var(--charcoal), 0 0 0 4px var(--gold); }
.swatch-choice.is-transparent {
  background-color: #3a3a3a;
  background-image:
    linear-gradient(45deg, #555 25%, transparent 25%), linear-gradient(-45deg, #555 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #555 75%), linear-gradient(-45deg, transparent 75%, #555 75%);
  background-size: 10px 10px;
  background-position: 0 0, 0 5px, 5px -5px, -5px 0;
}
/* A small mark on swatches that would make the logo hard to read. */
.swatch-choice.rate-poor::after, .swatch-choice.rate-fair::after {
  content: "";
  position: absolute;
  right: -3px;
  bottom: -3px;
  width: 11px;
  height: 11px;
  border: 2px solid var(--charcoal);
  border-radius: 50%;
}
.swatch-choice.rate-poor::after { background: var(--poor); }
.swatch-choice.rate-fair::after { background: var(--gold); }

/* Logo color options, best readability first. */
.color-options { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.color-option {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  font: inherit;
  font-size: 15px;
  text-align: left;
  color: var(--text);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
}
.color-option:hover { border-color: var(--gold); }
.color-option[aria-checked="true"] { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.color-option.rate-poor { opacity: 0.55; }
.color-option.rate-poor:hover, .color-option.rate-poor[aria-checked="true"] { opacity: 1; }
.color-option-dot { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--hairline); }
.color-option-dot.is-gray { background: linear-gradient(135deg, #111111, #bbbbbb); }
.color-option-name { overflow-wrap: anywhere; }
.rating-badge { font-size: 12px; font-weight: 700; white-space: nowrap; }
.rate-excellent .rating-badge, .rate-good .rating-badge { color: var(--success); }
.rate-excellent .rating-badge::before, .rate-good .rating-badge::before { content: "✓ "; }
.rate-fair .rating-badge { color: var(--gold); }
.rate-fair .rating-badge::before { content: "~ "; }
.rate-poor .rating-badge { color: var(--poor); }
.rate-poor .rating-badge::before { content: "✕ "; }
.rate-tone .rating-badge { font-weight: 400; color: var(--text-muted); }
.approved-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--gold);
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--gold) 50%, transparent);
  border-radius: 999px;
}

.parts-box { margin-bottom: 20px; }
/* Room for the selected swatches' rings, which the opening animation clips. */
.parts-body { display: flex; flex-direction: column; gap: 16px; padding: 6px 16px 18px; }

.approved-line { padding-top: 16px; border-top: 1px solid var(--line); }
.approved-yes { margin: 0 0 14px; font-weight: 700; color: var(--success); }
.approved-no { margin: 0 0 14px; font-size: 14px; color: var(--gold); }
.approved-picks .panel-label { display: block; margin-bottom: 8px; }
.approved-picks .chip-picker { margin-bottom: 0; }
.approved-picks .pick-chip { padding: 7px 13px; font-size: 13px; }

.download-panel {
  max-width: 820px;
  padding: 28px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.download-title { margin-top: 0; }
.download-panel .hint { margin: -8px 0 20px; }
.download-panel .pick-chip { background: var(--charcoal); }
.download-panel .pick-chip[aria-pressed="true"] { background: var(--gold); }

.square-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 20px; }
.square-row .chip-picker { margin-bottom: 0; }

.size-block { margin-bottom: 24px; }
.size-uses { margin-bottom: 12px; }
.size-uses .pick-chip { padding: 7px 13px; font-size: 13px; }
input[type="range"].size-slider { width: 100%; margin: 4px 0 8px; padding: 0; accent-color: var(--gold); background: none; border: 0; }
.size-readout { margin: 0 0 4px; font-size: 20px; font-weight: 700; color: var(--heading); }
.download-panel .size-detail { margin: 0 0 16px; }

/* A little laptop screen showing roughly how big the logo would appear. */
.size-screen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 360px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #1a1a1a;
  border: 6px solid #3a3a3a;
  border-radius: 8px;
}
/* The laptop mock is dark in both themes, so its labels use fixed light
   colors on a solid backing, above the logo. */
.size-screen-label { position: absolute; z-index: 1; top: 6px; left: 8px; padding: 2px 7px; font-size: 12px; color: #e6e6e6; background: #111111; border-radius: 3px; }
.size-screen-logo { display: block; height: auto; max-width: none; }
.size-screen.is-overflowing::after {
  content: "Wider than the screen: for print, banners or big displays";
  position: absolute;
  bottom: 6px;
  left: 8px;
  right: 8px;
  z-index: 1;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 1.35;
  color: #f0d9b5;
  background: #111111;
  border-radius: 3px;
}

.not-approved { margin: 12px 0 0; }
.not-approved p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; }
.ask-print { display: block; margin-top: 10px; font-size: 14px; }

.other-file {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .logo-studio-grid { grid-template-columns: 1fr; gap: 20px; }
  .studio-preview { position: static; }
  .logo-frame-hero { padding: 24px; }
  .suite-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
  .suite-stage { height: 110px; padding: 20px; }
  .suite-text { display: none; }
  .suite-name { padding-bottom: 14px; font-size: 14px; }
  .download-panel { padding: 20px; }
}

/* Page text editor + notes */
.page-row-text { grid-template-columns: minmax(0, 1fr) auto auto auto; }
.standard-text { margin: 0 0 20px; padding: 12px 14px; background: var(--charcoal-raised); border-left: 3px solid var(--line); border-radius: 0 4px 4px 0; }
.how-to-note { white-space: pre-line; }


/* ==========================================================================
   Typography (admin tab + client page)
   ========================================================================== */

.type-head { margin-top: 40px; }
.logo-card.is-archived { opacity: 0.6; }

.font-specimen { margin: 8px 0 12px; font-size: 26px; line-height: 1.3; color: var(--heading); overflow-wrap: anywhere; }

.font-file-list { margin: 0 0 12px; padding: 0; list-style: none; }
.font-file-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 150px 110px auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.font-file-row select { padding: 7px 8px; font-size: 14px; }
.family-actions { justify-content: flex-start; margin-top: 4px; }

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

.style-list { margin: 0; padding: 0; list-style: none; }
.style-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.style-role { padding-top: 6px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); }
.style-sample { margin: 0 0 6px; color: var(--heading); overflow-wrap: anywhere; }
.style-body { min-width: 0; }

.style-preview {
  min-height: 90px;
  padding: 18px;
  margin-bottom: 20px;
  color: var(--heading);
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.field-row-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 760px) {
  .font-file-row { grid-template-columns: minmax(0, 1fr) auto; }
  .style-row { grid-template-columns: 1fr; gap: 6px; }
  .field-row-4 { grid-template-columns: 1fr 1fr; }
}

.font-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.font-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 24px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.font-aa { margin: 0; font-size: 72px; line-height: 1; color: var(--heading); }
.font-card-name { margin: 8px 0 0; font-size: 20px; color: var(--heading); }
.font-alphabet { margin: 6px 0; font-size: 18px; line-height: 1.5; color: var(--text-soft); white-space: pre-line; overflow-wrap: anywhere; }
.font-license { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0; }
.font-card .button { margin-top: 8px; }
/* One family: the card spans the chapter, letters on the left, details on the right. */
.font-grid.is-single { grid-template-columns: 1fr; }
.font-grid.is-single .font-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
.font-grid.is-single .font-card > * { grid-column: 2; }
.font-grid.is-single .font-aa, .font-grid.is-single .font-alphabet { grid-column: 1; }
.font-grid.is-single .font-aa { grid-row: 1 / span 3; font-size: 120px; }
.font-grid.is-single .font-alphabet { grid-row: 4 / span 8; align-self: start; }
.font-grid.is-single .font-card .button { justify-self: start; }
@media (max-width: 640px) {
  .font-grid.is-single .font-card { display: flex; }
  .font-grid.is-single .font-aa { font-size: 72px; }
}
.type-specimen { padding: 32px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 8px; }
.type-specimen-label { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.type-specimen-head { margin: 0 0 12px; font-size: clamp(32px, 5vw, 52px); line-height: 1.05; color: var(--heading); overflow-wrap: anywhere; }
.type-specimen-body { margin: 0; max-width: 60ch; font-size: 18px; line-height: 1.6; color: var(--text-soft); }


/* ==========================================================================
   Client brand book: frame, chapters and pages
   ========================================================================== */

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 10;
  padding: 10px 14px;
  color: var(--charcoal);
  background: var(--gold);
  border-radius: 4px;
}
.skip-link:focus { top: 12px; }

.brand-app .topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bar);
}

.brand-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  max-width: 1320px;
  margin: 0 auto;
}

/* Chapter navigation: sidebar on desktop */
.chapter-nav {
  position: sticky;
  top: 72px;
  align-self: start;
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 40px 16px 40px 32px;
}
.chapter-nav-label {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.chapter-link {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 12px;
  margin: 0 0 2px -12px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.chapter-link:hover { color: var(--heading); background: var(--charcoal-raised); }
.chapter-link[aria-current="page"] { color: var(--heading); background: var(--charcoal-raised); box-shadow: inset 2px 0 0 var(--gold); }
/* Chapter numbers ("03") everywhere they appear (sidebar, chapter header,
   overview cards, previous/next): one style, only the size changes. */
.chapter-number, .chapter-link-number {
  font-family: var(--font-body);
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.08em;
  color: var(--gold);
}
.chapter-link-number { min-width: 20px; font-size: 12px; }
.pager-title .chapter-link-number { margin: 0 0.15em; font-size: 14px; vertical-align: 0.2em; }
.chapter-link-title { font-size: 15px; font-weight: 400; }

.brand-page { max-width: 1040px; padding-top: 48px; margin: 0; }
#page-content:focus, #page-content:focus-visible { outline: none; }

/* Chapter header */
.chapter-head { margin-bottom: 32px; }
.chapter-number { display: block; margin-bottom: 6px; font-size: 13px; }
.chapter-head h1 { text-align: left; margin: 0; }
.chapter-head .tagline { text-align: left; margin-bottom: 4px; }
.page-head .chapter-head { margin-bottom: 0; }

/* Gentle page entrance (skipped for people who prefer less motion) */
.is-entering { animation: page-in 0.35s ease-out both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .is-entering { animation: none; }
  .client-card, .swatch-card, .chapter-card, .image-tile img, .asset-card { transition: none !important; }
  .swatch-card:hover, .chapter-card:hover, .asset-card:hover { transform: none !important; }
}

/* Next chapter */
.chapter-next { margin: 64px 0 24px; padding-top: 32px; border-top: 1px solid var(--line); }
.chapter-next-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
  margin-left: auto;
  padding: 20px 24px;
  text-align: right;
  text-decoration: none;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s;
}
.chapter-next-link:hover { border-color: var(--gold); }
.chapter-next-label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.chapter-next-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 26px; color: var(--heading); }

/* Overview */
.overview-hero { padding: 24px 0 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.overview-intro { max-width: 720px; margin: 20px 0 0; font-family: var(--font-accent); font-style: italic; font-size: clamp(22px, 3vw, 30px); line-height: 1.35; color: var(--heading); }
.overview-story { max-width: 680px; margin-bottom: 56px; font-size: 19px; line-height: 1.7; }
.overview-story p { margin: 0 0 18px; }

.chapter-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.chapter-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 22px 22px 44px;
  color: inherit;
  text-decoration: none;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.chapter-card:hover { color: inherit; border-color: var(--gold); }
.pointer-active .chapter-card:hover { transform: translateY(-2px); }
.chapter-card .chapter-number { margin: 0; font-size: 13px; }
.chapter-card-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 24px; color: var(--heading); }
.chapter-card-text { font-size: 14px; color: var(--text-muted); }
.chapter-card-arrow { position: absolute; right: 20px; bottom: 16px; color: var(--gold); font-size: 20px; transition: transform 0.15s; }
.chapter-card:hover .chapter-card-arrow { transform: translateX(4px); }

/* Imagery */
.image-grid { columns: 3 260px; column-gap: 14px; margin: 12px 0 0; padding: 0; list-style: none; }
.image-grid li { break-inside: avoid; margin-bottom: 14px; }
.image-tile { display: block; width: 100%; padding: 0; overflow: hidden; background: var(--charcoal-raised); border: 0; border-radius: 6px; cursor: zoom-in; }
.image-tile img { display: block; width: 100%; height: auto; transition: transform 0.4s ease; }
.image-tile:hover img { transform: scale(1.03); }
.image-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.lightbox {
  width: min(1100px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden;
  background: #111111;
}
.lightbox img { display: block; width: 100%; max-height: calc(100vh - 140px); object-fit: contain; background: #111111; }
.lightbox-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.lightbox-title { margin: 0; font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.lightbox-actions { display: flex; gap: 8px; }

/* Templates */
.asset-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.asset-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  height: 100%;
  padding: 16px 16px 20px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 0.15s, transform 0.15s;
}
.asset-card:hover { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.pointer-active .asset-card:hover { transform: translateY(-2px); }
.asset-card-thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 6px; border-radius: 4px; object-fit: cover; background: var(--sunken); }
.template-sheet { padding: 16px; }
.template-sheet-page {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 100%; aspect-ratio: 8.5 / 11; padding: 14px 12px;
  background: #f4f1ec; color: #1f1c19; border-radius: 2px;
  box-shadow: 0 8px 20px var(--shadow);
}
.template-sheet-name { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 15px; line-height: 1.15; overflow-wrap: anywhere; }
.template-sheet-format { font-size: 10px; font-weight: 700; letter-spacing: 0.14em; color: #6b645b; }
.asset-card-thumb.is-format { font-size: 22px; font-weight: 700; letter-spacing: 0.08em; color: var(--text-muted); border: 1px solid var(--line); }
.asset-card-title { margin: 0; font-size: 17px; color: var(--heading); overflow-wrap: anywhere; }
.asset-card .button { margin-top: auto; }

/* Brand guide */
.guide-feature { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; padding: 32px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.guide-cover {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  aspect-ratio: 3 / 4;
  padding: 22px;
  color: var(--charcoal);
  background: linear-gradient(160deg, var(--gold), color-mix(in srgb, var(--gold) 85%, #000));
  border-radius: 4px;
  box-shadow: 0 18px 40px var(--shadow);
}
.guide-cover span:first-child { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 22px; line-height: 1.1; overflow-wrap: anywhere; }
.guide-cover span:last-child { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.guide-info .button { margin-top: 12px; }

/* Downloads */
.helper { padding: 28px; margin-bottom: 40px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.helper .chip-picker { margin: 16px 0 0; }
/* Colors tab: offer to replace earlier automatic color names */
.rename-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 20px; padding: 14px 16px; font-size: 14px; color: var(--heading); background: color-mix(in srgb, var(--gold) 10%, transparent); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; }
.rename-notice p { flex: 1 1 320px; margin: 0; }
.helper-advice { margin: 16px 0 0; padding: 14px 16px; color: var(--heading); background: color-mix(in srgb, var(--gold) 10%, transparent); border-left: 3px solid var(--gold); border-radius: 0 6px 6px 0; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 12px; }
.filter-bar select { width: auto; min-height: 44px; padding: 0 42px 0 14px; font-size: 14px; }
.filter-bar .hint { margin: 0 0 0 auto; }

/* Downloads: "Which file do I need?" (brand-downloads.js) */
.dl-traits { margin-top: 22px; }
.dl-trait-list { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.dl-traits-label { margin-right: 4px; font-family: var(--font-accent); font-style: italic; font-size: 20px; color: var(--heading); }
.dl-trait {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 150ms, color 150ms;
}
.dl-trait:hover, .dl-trait[aria-expanded="true"] { color: var(--heading); border-color: var(--gold); }
.dl-trait:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dl-trait-q { display: grid; place-items: center; width: 20px; height: 20px; font-size: 12px; font-weight: 700; color: var(--text-muted); border: 1px solid var(--line); border-radius: 50%; }
.dl-trait[aria-expanded="true"] .dl-trait-q { color: var(--charcoal); background: var(--gold); border-color: var(--gold); }
.dl-trait-help { max-width: 70ch; margin: 12px 0 0; font-size: 14px; color: var(--text-soft); }
.dl-generated { margin-top: 26px; }
.dl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; }
.dl-color-label { font-size: 13px; font-weight: 600; color: var(--text-soft); }
.dl-toolbar select { width: auto; min-width: 180px; padding: 9px 12px; font-size: 14px; }
.dl-count { font-size: 13px; color: var(--text-muted); }
.dl-toolbar .button { margin-left: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.dl-card { display: flex; flex-direction: column; overflow: hidden; background: var(--charcoal); border: 1px solid var(--line); border-radius: 10px; }
.dl-card-title { margin: 0; padding: 14px 16px; font-size: 15px; line-height: 1.3; color: var(--heading); border-bottom: 1px solid var(--line); }
/* Brand content: the stage color is the logo's own backdrop, fixed across themes */
.dl-stage { display: flex; height: 160px; padding: 26px 30px; }
.dl-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.dl-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.dl-file {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 8px 12px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 150ms;
}
.dl-file:hover { border-color: var(--gold); }
.dl-file:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.dl-file:disabled { opacity: 0.5; cursor: progress; }
.dl-file-format { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; color: var(--heading); }
.dl-file-format::after { content: " ↓"; color: var(--gold); }
.dl-file-size { font-size: 12px; color: var(--text-muted); }
.dl-file-error { flex-basis: 100%; font-size: 12px; color: var(--error); }
.dl-subtitle { margin: 32px 0 6px; font-size: 16px; color: var(--heading); }
@media (max-width: 600px) {
  .helper { padding: 20px; }
  .dl-toolbar .button { margin-left: 0; }
}
.download-list { margin: 0; padding: 0; list-style: none; }
.download-row { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.file-thumb { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 4px; object-fit: contain; background: var(--sunken); }
.file-thumb.is-format { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--text-muted); border: 1px solid var(--line); }
.download-empty { padding: 24px 0; color: var(--text-muted); border-top: 1px solid var(--line); }

/* Chapters become a scrollable bar on smaller screens */
@media (max-width: 900px) {
  .brand-layout { grid-template-columns: minmax(0, 1fr); } /* minmax(0, …): wide tables scroll inside their box instead of widening the page */
  .chapter-nav {
    position: sticky;
    top: 60px;
    z-index: 4;
    display: flex;
    gap: 4px;
    max-height: none;
    padding: 8px 12px;
    overflow-x: auto;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .chapter-nav::-webkit-scrollbar { display: none; }
  .chapter-nav-label { display: none; }
  .chapter-link { flex: none; margin: 0; padding: 8px 12px; white-space: nowrap; }
  .chapter-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
  .brand-page { padding-top: 28px; }
  .guide-feature { grid-template-columns: 1fr; padding: 22px; }
  .guide-cover { max-width: 200px; }
}
@media (max-width: 640px) {
  .download-row { grid-template-columns: 48px minmax(0, 1fr); }
  .download-row .button { grid-column: 2; justify-self: start; }
  .filter-bar .hint { margin-left: 0; }
  .helper { padding: 20px; }
  .chapter-next-link { max-width: none; }
}

/* Leave room for the sticky top bar (and chapter bar on small screens) when
   the page scrolls to something. */
html { scroll-padding-top: 88px; }
@media (max-width: 900px) { html { scroll-padding-top: 128px; } }


/* ==========================================================================
   Brand book, second pass: motion, cover, editorial type
   ========================================================================== */

/* --- Page turns: the browser cross-fades old and new chapters. The header
   and chapter list are captured separately so they stay perfectly still. */
.brand-app .topbar { view-transition-name: topbar; }
.brand-app .chapter-nav { view-transition-name: chapters; }
::view-transition-group(topbar), ::view-transition-group(chapters) { animation: none; }
::view-transition-old(topbar), ::view-transition-old(chapters) { animation: none; opacity: 0; }
::view-transition-new(topbar), ::view-transition-new(chapters) { animation: none; }
::view-transition-old(root) { animation: turn-out 180ms cubic-bezier(0.4, 0, 1, 1) both; }
::view-transition-new(root) { animation: turn-in 380ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both; }
@keyframes turn-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes turn-in { from { opacity: 0; transform: translateY(14px); } }

/* Fallback for browsers without View Transitions */
.chapter-view.is-entering { animation: turn-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both; }
.chapter-view:focus, .chapter-view:focus-visible { outline: none; }

/* Images fade in as they arrive instead of popping */
.img-fade { opacity: 0; transition: opacity 500ms ease; }
.img-fade.is-loaded { opacity: 1; }

/* Thin gold progress line, shown only if a chapter takes a moment */
.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
}
.progress-line.is-active { opacity: 1; animation: progress 2.2s cubic-bezier(0.1, 0.7, 0.2, 1) forwards; }
@keyframes progress { from { transform: scaleX(0.05); } to { transform: scaleX(0.85); } }

/* Placeholder while the first chapter loads */
.skeleton { display: flex; flex-direction: column; gap: 14px; max-width: 720px; padding-top: 8px; }
.skeleton-line, .skeleton-block {
  display: block;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 40%, var(--skeleton-a) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
.skeleton-eyebrow { width: 160px; height: 12px; }
.skeleton-title { width: 60%; height: 56px; margin-bottom: 18px; }
.skeleton-short { width: 45%; }
.skeleton-block { height: 220px; margin-top: 24px; border-radius: 8px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

@media (prefers-reduced-motion: reduce) {
  .chapter-view.is-entering, .skeleton-line, .skeleton-block, .progress-line.is-active { animation: none; }
  .img-fade { transition: none; opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* --- Chapter header: editorial eyebrow over a large title */
.chapter-head { margin-bottom: 44px; }
/* Chapters with links beside the heading (Logo, Color, Typography) keep the
   same gap below it as the rest. */
.chapter-view > .page-head { margin-bottom: 44px; }
.chapter-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.chapter-eyebrow .chapter-number { display: inline; margin: 0; font-size: 14px; line-height: 1; }
.chapter-rule { display: inline-block; width: 56px; height: 1px; background: linear-gradient(90deg, var(--gold), color-mix(in srgb, var(--gold) 20%, transparent)); }
.chapter-tagline { font-family: var(--font-accent); font-style: italic; font-size: 22px; line-height: 1.2; color: var(--text-soft); }
.chapter-title { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--chapter-title-size); line-height: 1.02; letter-spacing: -0.01em; color: var(--heading); text-align: left; }
.page-head { align-items: flex-end; }

/* --- "How to use this", set like a magazine intro */
.intro {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 24px;
  padding: 28px 0 32px;
  margin: 0 0 48px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.intro-label {
  margin: 4px 0 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.intro-body { max-width: 66ch; }
.intro-lede { margin: 0; font-size: 19px; line-height: 1.65; color: var(--text-soft); }
.intro-quote {
  margin: 24px 0 4px;
  padding: 2px 0 2px 22px;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.3;
  color: var(--heading);
  border-left: 2px solid var(--gold);
}
.intro-note { margin: 16px 0 0; font-size: 17px; line-height: 1.7; color: var(--text-muted); white-space: pre-line; }

/* --- Cover */
.cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  align-items: start; /* the heading starts where every chapter's does */
  padding: 0 0 40px;
}
.cover.has-mark { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.overview-title { margin: 0; font-size: var(--chapter-title-size); line-height: 1.02; letter-spacing: -0.01em; text-align: left; }
/* The client's name is the same size as every chapter title; brand-pages.js
   shrinks it only if its longest word wouldn't fit ("Outfitter / s"). */
.cover-text { min-width: 0; container-type: inline-size; }
.cover-text .overview-title { overflow-wrap: break-word; }
.overview-intro { margin: 26px 0 0; max-width: 30ch; font-family: var(--font-accent); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.25; color: var(--heading); }
.cover-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 12%;
  border-radius: 10px;
  box-shadow: 0 30px 60px -30px var(--shadow), inset 0 0 0 1px var(--hairline-soft);
}
.cover-mark.is-light { background: #f4f1ec; }
.cover-mark.is-dark { background: #161616; }
.cover-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.palette-band {
  display: flex;
  height: 96px;
  margin: 0 0 56px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--hairline-soft);
}
.palette-bar {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  min-width: 0;
  padding: 12px 14px;
  transition: flex 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
.palette-bar.is-primary { flex: 1.6; }
.pointer-active .palette-band:hover .palette-bar:hover { flex: 2.2; }
.palette-name { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette-hex { font-size: 11px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; opacity: 0.8; }

.overview-story .intro-lede { font-size: 21px; }

/* --- Previous / next chapter */
.chapter-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 80px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px;
  text-decoration: none;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  transition: border-color 200ms ease, transform 200ms ease;
}
.pager-link:hover { border-color: var(--gold); }
.pointer-active .pager-link:hover { transform: translateY(-2px); }
.pager-next { text-align: right; }
.pager-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); }
.pager-title { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 24px; color: var(--heading); }

/* --- Chapter list heading */
.chapter-nav-head { margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.chapter-nav-head .chapter-nav-label { margin-bottom: 4px; }
.chapter-nav-brand { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 20px; line-height: 1.15; color: var(--heading); overflow-wrap: anywhere; }

/* --- Tactile controls */
.button, .pick-chip, .version-option, .icon-button, .pager-link, .chapter-card { -webkit-tap-highlight-color: transparent; }
.button:active:not(:disabled), .pick-chip:active, .version-option:active { transform: translateY(1px); }
.brand-app a:focus-visible, .brand-app button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.brand-app .section-title { font-size: clamp(26px, 3vw, 32px); margin-bottom: 8px; }
.brand-app .swatch-group { margin-bottom: 64px; }

@media (max-width: 900px) {
  .chapter-nav-head { display: none; }
  .cover.has-mark { grid-template-columns: 1fr; }
  .cover-mark { aspect-ratio: 16 / 10; }
  .intro { grid-template-columns: 1fr; gap: 10px; }
  .palette-band { height: 84px; }
  .palette-band .palette-hex { display: none; }
}
@media (max-width: 640px) {
  .chapter-pager { grid-template-columns: 1fr; }
  .pager-next { text-align: left; }
  .chapter-eyebrow { gap: 10px; }
  .chapter-rule { width: 32px; }
  .palette-name { font-size: 11px; }
}
.intro.overview-story { max-width: none; font-size: inherit; line-height: inherit; }

/* Palette as one grid of paint chips; primary colors get double width. */
.palette-grid {
  display: grid;
  grid-template-columns: repeat(var(--palette-columns, 4), minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.palette-grid li.is-primary { grid-column: span 2; }
.palette-grid .swatch-card { height: 100%; }
.palette-grid .swatch-tile { height: 150px; }
.swatch-card-role { padding: 0 14px; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 640px) {
  .palette-grid { grid-template-columns: 1fr 1fr; }
  .palette-grid.has-odd li:not(.is-primary):last-child { grid-column: span 2; }
}


/* ==========================================================================
   Studio (admin) polish: toasts, dialogs, workspace layout, dashboard
   ========================================================================== */

/* Toasts */
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: 50; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; pointer-events: none; }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 14px 18px;
  font-size: 15px;
  color: var(--heading);
  background: var(--toast-bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  box-shadow: 0 18px 40px -12px var(--shadow);
  animation: toast-in 320ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.toast.is-leaving { animation: toast-out 300ms ease-in both; }
.toast-mark { display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; color: var(--charcoal); background: var(--gold); border-radius: 50%; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* Dialogs ease in */
dialog[open] { animation: dialog-in 260ms cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 40px 80px -20px var(--shadow); }
dialog[open]::backdrop { animation: backdrop-in 260ms ease; backdrop-filter: blur(3px); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes backdrop-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-leaving, dialog[open], dialog[open]::backdrop { animation: none; }
}
@media (max-width: 640px) {
  .toasts { left: 16px; right: 16px; bottom: 16px; align-items: stretch; }
  .toast { max-width: none; }
}

/* Dashboard */
/* Clients toolbar: search, sort and the view switch share one 44px height;
   the view switch sits at the right edge, under "+ New client". */
.dashboard-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 20px; }
.dashboard-tools input[type="search"] {
  flex: 1 1 240px; max-width: 380px; min-height: 44px; height: 44px; padding: 0 14px 0 40px; font-size: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.75' fill='none' stroke='%238a8a8a' stroke-width='1.6'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%238a8a8a' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 16px;
}
.dashboard-tools select { width: auto; min-height: 44px; height: 44px; padding-top: 0; padding-bottom: 0; font-size: 15px; }
.dashboard-tools .view-switch { margin-left: auto; height: 44px; align-items: stretch; }
.dashboard-tools .view-option { padding: 0 16px; }
@media (max-width: 640px) {
  /* Search on its own row; sort and the view switch share the next one. */
  .dashboard-tools input[type="search"] { flex-basis: 100%; max-width: none; }
  .dashboard-tools select { flex: 1 1 0; min-width: 0; }
  .dashboard-tools .view-switch { margin-left: 0; }
}
.dashboard-tools .hint { margin: 0; }

/* Grid / List switch */
.view-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 999px; }
.view-option {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms, background 150ms;
}
.view-option svg { width: 14px; height: 14px; }
.view-option:hover { color: var(--heading); }
.view-option[aria-pressed="true"] { color: var(--charcoal); background: var(--gold); }
.view-option:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Client list: one row per client, same information as the cards */
.client-list { margin: 0; padding: 0; list-style: none; overflow: hidden; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.client-list > li + li { border-top: 1px solid var(--line); }
.client-list-empty { padding: 16px 20px; }
.client-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) minmax(80px, 140px) 170px 16px;
  grid-template-areas: "mark main band status arrow";
  align-items: center;
  gap: 8px 24px;
  padding: 10px 20px 10px 10px;
  color: inherit;
  text-decoration: none;
  transition: background 150ms;
}
.client-row:hover, .client-row:focus-visible { color: inherit; background: color-mix(in srgb, var(--gold) 7%, transparent); }
.client-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* Brand content: the logo's own backdrop, fixed across themes */
.client-row-mark { grid-area: mark; display: flex; align-items: center; justify-content: center; height: 56px; padding: 9px 14px; background: #f4f1ec; border-radius: 6px; }
.client-row-mark.is-dark { background: #1b1b1b; }
.client-row-mark.is-monogram { background: var(--sunken); }
.client-row-mark img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.client-row-mark .monogram { font-size: 22px; }
.client-row-main { grid-area: main; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.client-row-name { font-size: 16px; font-weight: 700; color: var(--heading); overflow-wrap: anywhere; }
.client-row-meta { font-size: 13px; color: var(--text-muted); }
.client-row-band { grid-area: band; display: flex; height: 10px; overflow: hidden; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--hairline); }
.client-row-band span { flex: 1; }
.client-row .readiness { grid-area: status; margin: 0; }
.client-row-arrow { grid-area: arrow; color: var(--text-muted); transition: color 150ms, transform 150ms; }
.client-row:hover .client-row-arrow { color: var(--gold); transform: translateX(2px); }
@media (max-width: 700px) {
  .client-row {
    grid-template-columns: 72px minmax(0, 1fr) 16px;
    grid-template-areas: "mark main arrow" "mark status arrow";
    gap: 4px 14px;
    padding: 10px 14px 10px 10px;
  }
  .client-row-mark { height: 52px; padding: 8px 10px; }
  .client-row-band { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .client-row, .client-row-arrow, .view-option { transition: none; }
}

.studio-grid { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 20px; }
.studio-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease; }
.studio-card:hover { box-shadow: 0 24px 40px -24px var(--shadow); }
.pointer-active .studio-card:hover { transform: translateY(-3px); }
.studio-stage { display: flex; align-items: center; justify-content: center; height: 150px; padding: 26px 36px; background: #f4f1ec; }
.studio-stage.is-dark { background: #1b1b1b; }
.studio-stage.is-monogram { background: var(--sunken); }
.studio-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.monogram { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 48px; line-height: 1; color: var(--gold); letter-spacing: 0.02em; }
.studio-band { display: flex; height: 8px; }
.studio-band span { flex: 1; }
.studio-card-body { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px 20px; }
.readiness { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; color: var(--text-muted); }
.readiness.is-complete { color: var(--success); }
.readiness-meter { position: relative; flex: 1; max-width: 120px; height: 4px; overflow: hidden; background: var(--line); border-radius: 999px; }
.readiness-meter span { position: absolute; inset: 0 auto 0 0; background: var(--gold); border-radius: 999px; transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1); }
.readiness.is-complete .readiness-meter span { background: var(--success); }

.card-skeleton {
  height: 262px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--skeleton-a) 0%, var(--skeleton-b) 40%, var(--skeleton-a) 80%);
  background-size: 200% 100%;
  animation: shimmer 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .card-skeleton { animation: none; }
  .studio-card, .studio-card:hover { transition: none; transform: none; }
}

/* Client workspace */
.admin-app .topbar { position: sticky; top: 0; z-index: 5; background: var(--bar); view-transition-name: topbar; }
.admin-app .section-nav { view-transition-name: sections; }
.admin-app .client-head { view-transition-name: client-head; }
::view-transition-group(sections), ::view-transition-group(client-head) { animation: none; }
::view-transition-old(sections), ::view-transition-old(client-head) { animation: none; opacity: 0; }
::view-transition-new(sections), ::view-transition-new(client-head) { animation: none; }

.client-head { align-items: flex-start; gap: 32px; margin-bottom: 40px; }
.client-head-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.client-head-text h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1; margin-bottom: 14px; }

/* Header progress: a link that opens the Set up guide */
.readiness-card {
  display: block;
  width: min(300px, 100%);
  padding: 16px 20px;
  color: inherit;
  text-decoration: none;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 150ms;
}
.readiness-card:hover { border-color: color-mix(in srgb, var(--gold) 55%, transparent); }
.readiness-card:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.readiness-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.readiness-head .panel-label { margin: 0; }
.readiness-count { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold); }
.readiness-card .readiness { margin: 10px 0 0; }
.readiness-card .readiness-meter { max-width: none; }

/* Set up guide: one card per step, in order */
.setup-lede { max-width: 62ch; margin: -8px 0 14px; }
.setup-progress { margin: 0 0 28px; }
.setup-progress .readiness-meter { max-width: 220px; }
.setup-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.setup-step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 18px;
  padding: 22px 24px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color 200ms, background 200ms;
}
.setup-step.is-next { border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.setup-step.is-done { padding-block: 14px; background: transparent; }
.setup-step.is-waiting .setup-body > :not(.setup-wait) { opacity: 0.6; }
.setup-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.setup-step.is-next .setup-mark { color: var(--gold); border-color: var(--gold); }
.setup-step.is-done .setup-mark { color: var(--success); border-color: color-mix(in srgb, var(--success) 55%, transparent); }
.setup-step-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; min-height: 34px; }
.setup-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.setup-step-title { margin: 6px 0 0; font-size: 19px; line-height: 1.25; color: var(--heading); }
.setup-step.is-next .setup-step-title { margin-top: 0; }
.setup-step.is-done .setup-step-title { font-size: 16px; color: var(--text-muted); }
.setup-section-link { font-size: 13px; color: var(--text-muted); text-decoration: none; white-space: nowrap; }
.setup-section-link:hover { color: var(--gold); }
.setup-text { max-width: 62ch; margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--text-muted); }
.setup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.setup-actions:empty { display: none; }
.setup-step.is-done .setup-actions { margin-top: 4px; }
.setup-wait { margin: 10px 0 0; font-size: 13px; color: var(--text-muted); }
@media (max-width: 600px) {
  .setup-step { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .setup-step.is-done { grid-template-columns: 28px minmax(0, 1fr); }
  .setup-mark { width: 28px; height: 28px; font-size: 13px; }
}

.workspace { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; align-items: start; }
.section-nav { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 2px; }
.section-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 15px;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: 6px;
  transition: color 150ms, background 150ms;
}
.section-link:hover { color: var(--heading); background: var(--charcoal-raised); }
.section-link:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.section-link[aria-current="page"] { color: var(--heading); background: var(--charcoal-raised); box-shadow: inset 2px 0 0 var(--gold); }
.section-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.workspace-panels { min-width: 0; }
.workspace-panels:not(.is-ready) > [data-panel] { display: none !important; }
.admin-app html, html:has(.admin-app) { scroll-padding-top: 96px; }

@media (max-width: 900px) {
  .client-head { flex-direction: column; }
  .readiness-card { width: 100%; }
  .workspace { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .section-nav {
    position: sticky;
    top: 60px;
    z-index: 4;
    flex-direction: row;
    margin: 0 -16px;
    padding: 8px 16px;
    overflow-x: auto;
    background: var(--bar);
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .section-nav::-webkit-scrollbar { display: none; }
  .section-link { flex: none; white-space: nowrap; }
  .section-link[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }
}
.studio-band { box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(0, 0, 0, 0.2); }
.studio-band span { box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.12); }



/* ==========================================================================
   Appearance switch (light / dark / match device), in every top bar
   ========================================================================== */

.theme-switch {
  display: inline-flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--charcoal-raised);
  border: 1px solid var(--line);
  border-radius: 999px;
}
.theme-switch button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.theme-switch button:hover { color: var(--heading); }
.theme-switch button[aria-pressed="true"] { color: var(--charcoal); background: var(--gold); }
.theme-switch button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.theme-switch svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Switching modes: the whole page cross-fades as one picture, so every
   color changes in step. The appearance switch is its own live layer on
   top, so its thumb glides instead of freezing. theme.js adds
   .theme-switching for the length of the change. */
:root.theme-switching *:not(.theme-switch) { view-transition-name: none !important; }
:root.theme-switching .theme-switch { view-transition-name: theme-switch; }
:root.theme-switching::view-transition-group(root) { animation: none; }
:root.theme-switching::view-transition-old(root) { animation: theme-fade-out 240ms ease both; }
:root.theme-switching::view-transition-new(root) { animation: theme-fade-in 240ms ease both; }
:root.theme-switching::view-transition-group(theme-switch), :root.theme-switching::view-transition-new(theme-switch) { animation: none; }
:root.theme-switching::view-transition-old(theme-switch) { display: none; }
@keyframes theme-fade-out { to { opacity: 0; } }
@keyframes theme-fade-in { from { opacity: 0; } }

/* Segmented switches (appearance, grid/list): a gold thumb slides to the
   chosen option (motion.js / theme.js place it). */
.has-thumb { position: relative; }
.has-thumb > button, .has-thumb > .view-option { position: relative; z-index: 1; }
.has-thumb > [aria-pressed="true"] { background: transparent !important; }
.switch-thumb {
  position: absolute; top: 0; left: 0; z-index: 0;
  border-radius: 999px; background: var(--gold);
  transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), width 420ms cubic-bezier(0.16, 1, 0.3, 1), opacity 150ms;
  pointer-events: none;
}
.switch-thumb.is-placing { transition: none; }

/* The grid/list switch is its own layer during the morph, so its thumb
   stays live and glides in step with the cards. */
.view-switch { view-transition-name: view-switch; }
::view-transition-group(view-switch), ::view-transition-old(view-switch), ::view-transition-new(view-switch) { animation: none; }
::view-transition-old(view-switch) { display: none; }

/* Grid <-> list on the Clients page: each client morphs from card to row.
   Old and new pictures keep their proportions instead of stretching. */
.clients-morphing::view-transition-group(root) { animation: none; }
.clients-morphing::view-transition-old(root), .clients-morphing::view-transition-new(root) { animation: none; }
::view-transition-group(*.client) { animation-duration: 420ms; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(*.client), ::view-transition-new(*.client) { height: 100%; object-fit: cover; object-position: left top; animation-duration: 300ms; }

/* Expandable sections open and close smoothly where the browser can. */
:root { interpolate-size: allow-keywords; }
details::details-content { block-size: 0; overflow: clip; transition: block-size 320ms cubic-bezier(0.16, 1, 0.3, 1), content-visibility 320ms allow-discrete; }
details[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  :root.theme-switching::view-transition-old(root), :root.theme-switching::view-transition-new(root) { animation: none; }
  .switch-thumb { transition: none; }
  details::details-content { transition: none; }
}

/* Logos tab: "Make pieces" (admin-pieces.js). The stage is brand content:
   the logo's own backdrop, fixed across themes. */
.pieces-stage { display: flex; justify-content: center; margin: 16px 0 12px; padding: 34px 24px 20px; border-radius: 8px; background: #f4f1ec; }
.pieces-figure { position: relative; width: min(100%, calc(240px * var(--aspect, 2))); }
.pieces-figure img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.pieces-overlay { position: absolute; inset: 0; cursor: crosshair; touch-action: none; }
.piece-box { position: absolute; background: color-mix(in srgb, #86663a 8%, transparent); border: 1.5px dashed #86663a; border-radius: 3px; cursor: pointer; }
.piece-box.is-on { background: color-mix(in srgb, #86663a 16%, transparent); border-style: solid; }
.piece-box-tag { position: absolute; top: -9px; left: -9px; display: grid; place-items: center; width: 18px; height: 18px; font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #86663a; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); }
.piece-drag { position: absolute; background: color-mix(in srgb, #86663a 14%, transparent); border: 1.5px solid #86663a; pointer-events: none; }
.pieces-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 0 0 8px; padding: 0; list-style: none; }
#pieces-dialog .hint { margin-bottom: 20px; }
.piece-type { display: flex; flex-direction: column; gap: 8px; }
.pieces-combine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.pieces-combine[hidden] { display: none; }
#pieces-dialog .pieces-combine .hint { margin: 0; }
.piece-card.is-muted { opacity: 0.7; }
.piece-note { margin: 0; font-size: 13px; }
.piece-card { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 8px; transition: border-color 150ms; }
.piece-card.is-on { border-color: var(--gold); }
.piece-card .check { font-weight: 600; color: var(--heading); }
.piece-preview { display: flex; height: 88px; padding: 14px; border-radius: 6px; }
.piece-preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.piece-card select { width: 100%; padding: 8px 10px; font-size: 14px; }
.piece-card .link-button { align-self: flex-start; font-size: 13px; }


/* ==========================================================================
   Requests (requests.js): the bell in every top bar, its panel, and the
   "Ask Tierney Studio" window.
   ========================================================================== */

.bell {
  position: relative;
  display: grid; place-items: center;
  width: 34px; height: 34px; padding: 0; flex: none;
  color: var(--text-muted); background: transparent;
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.bell:hover { color: var(--heading); border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }
.bell.has-news { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.bell svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bell-count {
  position: absolute; top: -5px; right: -6px;
  min-width: 18px; height: 18px; padding: 0 5px;
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  color: var(--charcoal); background: var(--gold); border-radius: 999px;
  box-shadow: 0 0 0 2px var(--charcoal);
}

/* Centered sheet (the Ask window) and the right-hand drawer (request lists). */
.sheet { max-height: min(720px, calc(100vh - 48px)); overflow-y: auto; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sheet-heading h2 { margin: 0; }
.sheet-subtitle { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }
.sheet .sheet-head { margin-bottom: 20px; }
.sheet-tools:empty { display: none; }
.sheet-close {
  display: grid; place-items: center; flex: none;
  width: 34px; height: 34px; margin: -2px -6px 0 0; padding: 0;
  font-size: 22px; line-height: 1; color: var(--text-muted);
  background: none; border: 0; border-radius: 999px; cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease;
}
.sheet-close:hover { color: var(--heading); background: var(--charcoal-raised); }

dialog.drawer {
  position: fixed; inset: 0 0 0 auto;
  width: min(440px, 100vw); height: 100dvh; max-height: none; max-width: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border: 0; border-left: 1px solid var(--line); border-radius: 0;
  box-shadow: -24px 0 60px -20px var(--shadow);
}
dialog.drawer[open] { animation: drawer-in 340ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes drawer-in { from { transform: translateX(32px); opacity: 0; } }
.drawer .sheet-top { flex: none; padding: 24px 24px 16px; border-bottom: 1px solid var(--line); }
.drawer .sheet-heading h2 { font-size: 26px; }
.drawer .sheet-tools { margin-top: 16px; }
.drawer .sheet-body { flex: 1; overflow-y: auto; padding: 0 24px 24px; }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }

.request-tabs .view-option { gap: 7px; }
.tab-count {
  min-width: 20px; padding: 0 6px; font-size: 12px; font-weight: 700; line-height: 18px; text-align: center;
  border-radius: 999px; background: color-mix(in srgb, currentColor 14%, transparent);
}

.request-what { display: flex; flex-direction: column; gap: 4px; margin: 0 0 20px; padding: 14px 16px; background: var(--charcoal-raised); border-radius: 8px; color: var(--heading); }
.request-what .panel-label { margin: 0; }
.request-sent { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--success); }

/* A request is a row, not a card: divided, with the state as a dot. */
.request-list { margin: 0; padding: 0; list-style: none; }
.request-row { position: relative; padding: 18px 0; border-bottom: 1px solid var(--line); }
.request-row:last-child { border-bottom: 0; }
.request-row.is-new::before {
  content: ""; position: absolute; left: -14px; top: 24px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
}
.request-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.request-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.request-state { display: inline-flex; align-items: center; gap: 6px; flex: none; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.request-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.request-state.is-open { color: var(--gold); }
.request-state.is-approved { color: var(--success); }
.request-state.is-declined { color: var(--warning); }
.request-label { margin: 0 0 4px; font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--heading); }
.request-note { margin: 0 0 6px; font-size: 14px; color: var(--text-soft); }
.request-reply {
  margin: 10px 0 8px; padding: 2px 0 2px 12px;
  font-size: 14px; line-height: 1.5; color: var(--heading);
  border-left: 2px solid var(--line);
}
.request-reply.is-declined { border-left-color: var(--warning); }
.request-reply.is-approved { border-left-color: var(--success); }
.request-reply-label { display: block; margin-bottom: 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.request-meta { margin: 6px 0 0; font-size: 13px; color: var(--text-faint); }
.request-cancel { margin-top: 8px; font-size: 14px; }
.request-empty { padding: 32px 0; color: var(--text-muted); font-size: 15px; text-align: center; }
.request-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.request-decline { margin-top: 12px; }
.request-decline textarea { min-height: 70px; }


/* ==========================================================================
   Top bar: the bell and the account button (initials) are matching 36px
   circles; the account menu holds the email, appearance and Log out.
   ========================================================================== */

.bell, .account-button { width: 36px; height: 36px; }
.account-button {
  display: grid; place-items: center; flex: none; padding: 0;
  font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--charcoal); background: var(--gold);
  border: 0; border-radius: 999px; cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.account-button:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 30%, transparent); }
.account-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.account-menu {
  position: fixed; inset: auto; margin: 0;
  width: 260px; padding: 16px;
  color: var(--text); background: var(--charcoal);
  border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 24px 48px -16px var(--shadow);
}
.account-menu:popover-open { animation: menu-in 220ms cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(0.98); } }
.account-email { margin: 0 0 14px; padding-bottom: 14px; font-size: 14px; color: var(--heading); overflow-wrap: anywhere; border-bottom: 1px solid var(--line); }
.account-label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.account-menu .theme-switch { display: flex; width: 100%; }
.account-menu .theme-switch button { flex: 1; height: 32px; }
.account-logout {
  display: block; width: 100%; margin-top: 14px; padding: 10px 0 0;
  font: inherit; font-size: 14px; text-align: left; color: var(--text-muted);
  background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer;
}
.account-logout:hover { color: var(--heading); }
@media (prefers-reduced-motion: reduce) { .account-menu:popover-open { animation: none; } }
/* The request tabs reuse the switch style but aren't the page's view switch. */
.request-tabs { view-transition-name: none; }

/* ==========================================================================
   Studio Logos: one compact row per logo; the editor opens in a wide panel.
   ========================================================================== */

.logo-rows { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.logo-rows > li + li { border-top: 1px solid var(--line); }
.logo-row {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) auto 20px; align-items: center; gap: 18px;
  width: 100%; padding: 12px 18px 12px 12px;
  font: inherit; text-align: left; color: inherit;
  background: var(--charcoal-raised); border: 0; cursor: pointer;
  transition: background-color 150ms ease;
}
.logo-row:hover { background: color-mix(in srgb, var(--gold) 6%, var(--charcoal-raised)); }
.logo-row:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.logo-row-thumb { width: 96px; height: 64px; aspect-ratio: auto; padding: 8px; }
.logo-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.logo-row-title { font-size: 16px; font-weight: 700; color: var(--heading); }
.logo-row-file { font-size: 13px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-row-status { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.logo-row-chip { padding: 3px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--text-muted); border: 1px solid var(--line); border-radius: 999px; }
.logo-row-chip.is-ok { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.logo-row-chip.is-warning { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 55%, transparent); }
.logo-row-arrow { color: var(--text-muted); transition: transform 150ms ease, color 150ms ease; }
.logo-row:hover .logo-row-arrow { color: var(--gold); transform: translateX(3px); }
@media (max-width: 640px) {
  .logo-row { grid-template-columns: 72px minmax(0, 1fr); }
  .logo-row-thumb { width: 72px; height: 52px; }
  .logo-row-status { grid-column: 1 / -1; justify-content: flex-start; }
  .logo-row-arrow { display: none; }
}

dialog.drawer.drawer-wide { width: min(880px, 100vw); }
/* Inside the panel the logo card loses its own frame and title (the panel has them). */
.drawer .logo-card { padding: 0; border: 0; background: none; }
.drawer .logo-card-head .logo-card-title, .drawer .logo-card-head .logo-card-file { display: none; }
.drawer .logo-card-head { justify-content: flex-end; margin: 16px 0 0; }
.drawer .logo-card-head:not(:has(.logo-card-action)) { display: none; }

/* Unapproved proposals fold away once something is approved. */
.version-grid.hides-ideas > .is-idea { display: none; }
.show-ideas { margin-top: 14px; font-size: 14px; }
.drawer .sheet-body > .logo-card { padding-top: 20px; }

/* Client Logo chapter: approved versions with one-click downloads first,
   the full tools under "Customize". */
.quick-downloads { margin-bottom: 24px; }
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.quick-card { display: flex; flex-direction: column; overflow: hidden; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.quick-stage { display: flex; height: 150px; padding: 26px 30px; }
.quick-stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.quick-name { margin: 0; padding: 14px 16px 10px; font-weight: 700; color: var(--heading); }
.quick-files { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 16px; }
.customize-box { margin-top: 8px; }
.customize-body { padding: 8px 20px 24px; }
.customize-body .download-panel { margin-top: 32px; }

/* Inside "Customize": the preview starts level with the controls, and the
   seven background swatches fit on one row. */
.customize-box .studio-preview { top: 88px; }
.customize-box .studio-controls .swatch-choices { gap: 8px; }
.customize-body { padding-top: 20px; }


/* ==========================================================================
   Share links: the Share window and the public brand kit page.
   ========================================================================== */
.client-head-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.share-subhead { margin: 24px 0 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.share-new { padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.share-form .checkbox-group label.check { margin-bottom: 6px; }
.share-made { margin-top: 18px; padding: 16px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 8px; }
.share-url-row { display: flex; gap: 8px; margin: 8px 0; }
.share-url { flex: 1; min-height: 40px; height: 40px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.share-page { max-width: 1100px; }
.share-head { margin-bottom: 40px; }
.share-head h1 { margin: 4px 0 8px; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--chapter-title-size); line-height: 1; color: var(--heading); }
.share-section { margin-bottom: 48px; }
.share-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.share-color { overflow: hidden; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; padding-bottom: 14px; }
.share-chip { display: block; height: 110px; box-shadow: inset 0 -1px 0 var(--hairline-soft); }
.share-color dl { margin: 0; padding: 0 16px; }
.share-value { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; border-top: 1px solid var(--line); }
.share-value dt { color: var(--text-muted); }
.share-value dd { margin: 0; color: var(--heading); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.share-color .hint { padding: 8px 16px 0; margin: 0; }
.share-list { margin: 0; padding: 0; list-style: none; }
.share-list > li { padding: 14px 0; border-bottom: 1px solid var(--line); }
.share-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0 0; }
.share-file { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.share-ended { max-width: 520px; margin: 40px auto; text-align: center; }

/* Email signature maker */
.signature-tool { display: grid; grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.25fr); gap: 28px; padding-top: 20px; }
.signature-side { position: sticky; top: 0; align-self: start; }
.signature-preview { margin: 8px 0 12px; padding: 28px 24px; overflow-x: auto; background: #ffffff; border: 1px solid var(--line); border-radius: 8px; }
.signature-help { margin-top: 16px; }
.signature-steps { padding: 4px 16px 12px; font-size: 14px; }
.signature-steps p { margin: 8px 0; }
.signature-side .button { margin-top: 4px; }
@media (max-width: 760px) { .signature-tool { grid-template-columns: 1fr; } .signature-side { position: static; } }
.signature-offer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 20px; padding: 14px 16px; background: color-mix(in srgb, var(--gold) 8%, var(--charcoal-raised)); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 8px; }
.signature-offer p { margin: 0; color: var(--heading); }
.sig-more { margin-top: 12px; }
.sig-more-body { padding: 4px 16px 16px; }
.sig-color-row { margin-bottom: 14px; }
.sig-color-label { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--heading); }
.sig-color-note { font-weight: 400; color: var(--text-muted); }
.sig-swatches { gap: 8px; }
.sig-swatches .swatch-choice { width: 28px; height: 28px; }
.sig-social-field { margin-bottom: 12px; }
.sig-social-field input { min-height: 40px; height: 40px; font-size: 14px; }
.signature-form .size-readout { font-size: 16px; }
.sig-copy-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.sig-copy-more { display: inline-flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }

/* Social media kit */
.kit-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; padding-top: 20px; }
.kit-rule { grid-column: 1 / -1; margin: -6px 0 0; }
.kit-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 20px 0 16px; }
.kit-toolbar .hint { margin: 0; }
.kit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.kit-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.kit-card.is-cover { grid-column: span 2; }
.kit-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kit-platform { font-weight: 700; color: var(--heading); }
.kit-kind { font-size: 12px; color: var(--text-muted); }
.kit-frame { position: relative; display: block; width: 100%; overflow: hidden; border-radius: 4px; box-shadow: inset 0 0 0 1px var(--hairline-soft); background: #e9e9e9; }
.kit-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kit-frame.is-circle { width: 70%; margin: 0 auto; border-radius: 50%; }
.kit-safe { position: absolute; border: 1.5px dashed rgba(255, 255, 255, 0.85); outline: 1px dashed rgba(0, 0, 0, 0.35); border-radius: 2px; pointer-events: none; }
.kit-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; }
.kit-card-foot .hint { margin: 0; font-size: 12px; }
@media (max-width: 760px) { .kit-choices { grid-template-columns: 1fr; } .kit-card.is-cover { grid-column: auto; } }

/* "Start a new project" */
.project-invite {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px;
  margin-top: 56px; padding: 32px 36px;
  background: var(--charcoal-raised); border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--line)); border-radius: 12px;
}
.project-invite > div { max-width: 560px; }
.project-invite .tagline { margin: 0 0 2px; }
.project-invite .section-title { margin: 0 0 8px; }
.project-invite p:last-child { margin: 0; color: var(--text-soft); }
.project-intro { margin: 0 0 16px; }
.request-facts { margin: 2px 0 6px; font-size: 13px; color: var(--text-muted); }

/* Studio: download activity */
.activity-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; }
.activity-head .section-title { margin: 0 0 4px; }
.activity-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.activity-filters select { width: auto; min-height: 40px; height: 40px; padding-top: 0; padding-bottom: 0; font-size: 14px; }
.activity-summary { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-bottom: 28px; }
.activity-summary > div { min-width: 0; padding: 18px 20px; background: var(--charcoal-raised); border: 1px solid var(--line); border-radius: 10px; }
.activity-stat { display: flex; flex-direction: column; justify-content: center; min-width: 140px; }
.activity-number { font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: 44px; line-height: 1; color: var(--heading); }
.activity-top ol { margin: 6px 0 0; padding: 0; list-style: none; }
.activity-top li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; color: var(--heading); border-top: 1px solid var(--line); }
.activity-top li:first-child { border-top: 0; }
.activity-top li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-count { flex: none; color: var(--text-muted); font-size: 13px; }
.activity-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.activity-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 0.7fr) 120px; gap: 12px; align-items: center; padding: 10px 16px; font-size: 14px; border-top: 1px solid var(--line); background: var(--charcoal-raised); }
.activity-row:first-child { border-top: 0; }
.activity-when, .activity-where { color: var(--text-muted); font-size: 13px; }
.activity-what { display: flex; align-items: center; gap: 8px; min-width: 0; }
.activity-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); }
.activity-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-list-label { margin-bottom: 8px; }
@media (max-width: 760px) {
  .activity-summary { grid-template-columns: 1fr; }
  .activity-row { grid-template-columns: 1fr; gap: 2px; }
}

/* Chapter menu: tools as menu rows, then a quiet project invitation. */
.chapter-tools { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.chapter-tool { width: calc(100% + 12px); font: inherit; text-align: left; background: none; border: 0; cursor: pointer; }
.chapter-tool-icon { display: inline-block; text-align: center; letter-spacing: 0; }
.chapter-invite { margin-top: 22px; padding: 16px; border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--line)); border-radius: 8px; }
.chapter-invite p { margin: 0 0 4px; font-size: 14px; color: var(--heading); }
.chapter-invite-link { font-size: 14px; font-weight: 700; }
@media (max-width: 900px) {
  /* In the phone's chapter bar the tools sit inline after the chapters. */
  .chapter-tools { display: contents; }
  .chapter-tools .chapter-nav-label { display: none; }
  .chapter-tool { width: auto; }
  .chapter-invite { display: none; }
}

/* Logo version history (studio) */
.versions-box { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.versions-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.versions-head .panel-label { margin: 0; }
.version-list { margin: 12px 0 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.version-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 4px 16px; padding: 10px 14px; font-size: 14px; border-top: 1px solid var(--line); }
.version-row:first-child { border-top: 0; }
.version-row.is-current { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.version-file { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); }
.version-meta { font-size: 13px; color: var(--text-muted); }
.version-actions { display: flex; gap: 14px; font-size: 14px; }
@media (max-width: 640px) { .version-row { grid-template-columns: 1fr; } }