/* CS Studio (ported from the AMN Brand Studio). The chrome takes the
   statement's own navy and teal, and stays quiet so the page on the canvas is
   the loud part. The --amn-* token names are kept from the original so the
   rules below needed no rewrite; their values are the CS palette. */

/* DM Sans with its optical size pinned at 14. The variable font would
   otherwise draw small text with wider letters than Fabric measures (it
   measures at 400px), and words would run past the edge of their box. */
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-14-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-14-latin-ext.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/dm-sans-14-italic-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: italic;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Manrope (OFL), the CSA block library's face, latin subset. */
@font-face {
  font-family: 'Manrope';
  src: url('fonts/manrope-latin.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: block;
}
/* Rethink Sans (OFL), the website's heading face, latin subset. */
@font-face {
  font-family: 'Rethink Sans';
  src: url('fonts/rethink-sans-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* capabilitystatement.com.au: dark #212724, orange #FB5E00 (hover
     #E05400), cream #F2F1E1, border #E2E2D6. "green" names kept from the
     AMN original; they hold the accent. green-dark is the accent dark enough
     for text on a tint (4.6:1 on white). */
  --amn-black: #212724;
  --amn-black-deep: #161B18;
  --amn-green: #FB5E00;
  --amn-green-dark: #B84400;
  --amn-cream: #F2F1E1;
  --amn-cream-deep: #EAE9DB;
  --amn-desert: #FAF9F2;
  --amn-wheat: #E2E2D6;
  --amn-white: #FFFFFF;
  --accent-hover: #E05400;
  --ink-62: rgba(33, 39, 36, 0.66);
  --ink-45: rgba(33, 39, 36, 0.45);
  --ink-14: rgba(33, 39, 36, 0.14);
  --ink-08: rgba(33, 39, 36, 0.08);
  --green-12: rgba(251, 94, 0, 0.12);
  --danger: #A23B2A;

  --bar-h: 64px;
  --rail-w: 84px;
  --lib-w: 312px;
  --props-w: 288px;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(22, 27, 24, 0.06), 0 8px 24px rgba(22, 27, 24, 0.08);
  /* Motion (2026-10-19, docs/animation-options.html): one curve that starts
     fast and settles, and three lengths. Things appear with motion and close
     at once; the canvas itself never animates. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --t-press: 120ms;
  --t-fast: 150ms;
  --t-base: 200ms;
  /* Scrollbars: thin and quiet (2026-10-19, docs/scrollbar-options.html, A). */
  --scroll-thumb: rgba(33, 39, 36, 0.22);
  --scroll-thumb-hover: rgba(33, 39, 36, 0.45);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--amn-black);
  background: var(--amn-cream);
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; font-family: 'Rethink Sans', 'DM Sans', system-ui, sans-serif; font-weight: 600; letter-spacing: -0.01em; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }

/* -- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 14px;
  border: 1px solid var(--ink-14); border-radius: 999px;
  background: var(--amn-white); font-weight: 500; cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--ink-45); }
.btn:disabled { opacity: .4; cursor: default; }
.btn--primary { background: var(--amn-green); border-color: var(--amn-green); color: #fff; }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--ink-08); border-color: transparent; }
.btn--icon { width: 38px; padding: 0; }
.btn--icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--danger { color: var(--danger); }
.btn--danger:hover { border-color: var(--danger); }

/* -- Layout ------------------------------------------------------------------ */
.studio {
  display: grid;
  grid-template: var(--bar-h) 1fr / var(--rail-w) var(--lib-w) 1fr var(--props-w);
  grid-template-areas: 'bar bar bar bar' 'rail lib stage props';
  height: 100vh;
  overflow: hidden;
}

.bar {
  grid-area: bar;
  display: flex; align-items: center; gap: 16px;
  padding: 0 16px 0 20px;
  background: var(--amn-white);
  border-bottom: 1px solid var(--ink-08);
}
.bar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.bar__brand img { height: 34px; width: auto; }
.bar__brand span {
  /* The "CS logo | Studio" lockup, as in the launch film. */
  padding-left: 12px; border-left: 1px solid rgba(33, 39, 36, .2);
  font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -0.01em; color: var(--amn-black);
}
.bar__name input {
  width: 260px; height: 38px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 8px; background: transparent; font-weight: 500;
}
.bar__name input:hover { border-color: var(--ink-14); }
.bar__name input:focus { border-color: var(--amn-green); background: var(--amn-white); outline: none; }
.bar__status { font-size: 13px; color: var(--ink-62); white-space: nowrap; }
.bar__actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.menu { position: relative; }
.menu__list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  min-width: 240px; padding: 6px;
  background: var(--amn-white); border: 1px solid var(--ink-08); border-radius: var(--radius); box-shadow: var(--shadow);
}
.menu__list--right { left: auto; right: 0; min-width: 180px; }
.menu__list button, .menu__list a {
  display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 6px;
  background: none; text-align: left; text-decoration: none; font-weight: 500; cursor: pointer;
}
.menu__list button:hover, .menu__list a:hover { background: var(--amn-cream); }
.menu__list small { display: block; font-weight: 400; color: var(--ink-62); font-size: 12px; }

/* -- Rail and library ----------------------------------------------------- */
.rail {
  grid-area: rail;
  display: flex; flex-direction: column; gap: 4px; padding: 12px 8px;
  background: var(--amn-white); border-right: 1px solid var(--ink-08);
}
.rail__tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 0; border: 0; border-radius: 8px; background: none;
  font-size: 11.5px; font-weight: 500; color: var(--ink-62); cursor: pointer;
}
.rail__tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.rail__tab:hover { background: var(--amn-cream); color: var(--amn-black); }
.rail__tab.is-active { background: var(--green-12); color: var(--amn-black); }

.library {
  grid-area: lib;
  overflow-y: auto; padding: 20px 18px 32px;
  background: var(--amn-white); border-right: 1px solid var(--ink-08);
}
.library h2 { font-size: 18px; margin-bottom: 6px; }
.library h3 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); margin: 22px 0 10px; }
.library__lead { margin: 0 0 16px; color: var(--ink-62); }
.library__small { margin: 8px 0 0; font-size: 12.5px; color: var(--ink-62); }

.cards { display: grid; gap: 14px; }
.card {
  display: grid; gap: 2px; padding: 0 0 10px; border: 1px solid var(--ink-08); border-radius: var(--radius);
  background: var(--amn-white); text-align: left; cursor: pointer; overflow: hidden;
}
.card:hover { border-color: var(--ink-45); }
.card.is-active { border-color: var(--amn-green); box-shadow: 0 0 0 2px var(--green-12); }
.card__img { display: block; aspect-ratio: 1; margin-bottom: 8px; }
.card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__name { padding: 0 12px; font-weight: 600; }
.card__meta { padding: 0 12px; font-size: 12.5px; color: var(--ink-62); }

.textadd { display: grid; gap: 8px; }
.textadd__item {
  padding: 14px 16px; border: 1px solid var(--ink-08); border-radius: var(--radius);
  background: var(--amn-cream); text-align: left; cursor: pointer; line-height: 1.1;
}
.textadd__item:hover { border-color: var(--ink-45); }
.textadd__item--display { font-size: 32px; font-weight: 600; letter-spacing: -0.035em; }
.textadd__item--heading { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; }
.textadd__item--subheading { font-size: 18px; font-weight: 500; letter-spacing: -0.016em; }
.textadd__item--body { font-size: 14px; }
.textadd__item--caption { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.textadd__item--eyebrow span {
  display: inline-block; padding: 7px 12px; border: 1px solid rgba(251, 94, 0, .55); border-radius: 999px;
  color: var(--amn-green); font-size: 11px; font-weight: 600; letter-spacing: .14em;
}

.upload { cursor: pointer; }
/* Photos: the upload area (several at once) and each photo's progress (editor.js uploadPhotos) */
.upzone { display: grid; gap: 6px; padding: 10px; border: 1.5px dashed var(--ink-14); border-radius: 12px; text-align: center; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.upzone .upload { pointer-events: none; }
.upzone__hint { font-size: 12.5px; color: var(--ink-62); }
.upzone.is-over, .upzone:hover { border-color: var(--amn-green); background: var(--green-12); }
.upq__head { margin: 12px 0 6px; font-size: 13px; font-weight: 600; }
.upq__item { position: relative; overflow: hidden; cursor: default; }
.upq__item img { opacity: .55; transition: opacity var(--t-base); }
.upq__item--done img { opacity: 1; }
.upq__bar { position: absolute; left: 6px; right: 6px; bottom: 22px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .75); overflow: hidden; }
.upq__bar i { display: block; height: 100%; background: var(--amn-green); border-radius: inherit; transition: width .2s linear; }
.upq__label { position: absolute; left: 0; right: 0; bottom: 4px; font-size: 11px; font-weight: 600; color: var(--amn-black); text-shadow: 0 0 4px #fff, 0 0 4px #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 4px; }
.upq__item--done .upq__bar, .upq__item--done .upq__label { opacity: 0; transition: opacity .6s .8s; }
.upq__item--error .upq__bar i { background: var(--danger); }
.upq__item--error .upq__label { color: var(--danger); }
.upq__item--shrinking .upq__bar i, .upq__item--retry .upq__bar i { width: 100% !important; opacity: .35; animation: upqPulse 1s ease-in-out infinite alternate; }
@keyframes upqPulse { to { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .upq__item--shrinking .upq__bar i, .upq__item--retry .upq__bar i { animation: none; } }
.thumbs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.thumb {
  position: relative; padding: 0; border: 1px solid var(--ink-08); border-radius: 8px;
  background: var(--amn-cream); aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
}
.thumb:hover { border-color: var(--ink-45); }
.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumbs--graphics .thumb { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 12px; }
.thumb--graphic img { width: 70%; height: 50%; object-fit: contain; }
.thumb--graphic span { font-size: 11.5px; font-weight: 500; color: var(--ink-62); text-align: center; line-height: 1.2; }
.gp { display: block; width: 70%; height: 50%; }
.gp--mask { background: var(--sw); -webkit-mask: var(--src) center / contain no-repeat; mask: var(--src) center / contain no-repeat; }
.gp--rule { height: 3px; background: var(--sw); }
.gp--panel { background: var(--sw); border-radius: 2px; }

.drafts { display: grid; gap: 10px; }
.draft { position: relative; }
.draft__open {
  display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  width: 100%; padding: 8px; border: 1px solid var(--ink-08); border-radius: var(--radius); background: var(--amn-white);
  text-align: left; cursor: pointer;
}
.draft__open:hover { border-color: var(--ink-45); }
.draft.is-active .draft__open { border-color: var(--amn-green); }
.draft__img { grid-row: span 2; width: 64px; height: 64px; border-radius: 6px; background: var(--amn-cream); overflow: hidden; }
.draft__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.draft__name { font-weight: 600; padding-right: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft__meta { font-size: 12px; color: var(--ink-62); }
.draft__delete {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--ink-45); font-size: 18px; line-height: 1; cursor: pointer;
}
.draft__delete:hover { background: var(--amn-cream); color: var(--danger); }

/* -- Stage ------------------------------------------------------------------ */
.stage {
  grid-area: stage;
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, rgba(33, 39, 36, .08) 1px, transparent 0) 0 0 / 22px 22px,
    var(--amn-cream-deep);
}
/* Scrolls when zoomed past the window. Auto margins centre the post while it
   fits and let it scroll from its true edge once it doesn't (plain flex
   centring would push the top and left out of reach). */
.stage__scroll { position: absolute; inset: 0 0 44px; overflow: auto; display: flex; padding: 32px; }
.stage__frame { position: relative; margin: auto; flex: none; box-shadow: 0 2px 6px rgba(22, 27, 24, .08), 0 24px 60px rgba(22, 27, 24, .14); line-height: 0; }
/* Until the statement has loaded, the canvas waits outside the page column at
   a leftover size; hide it (it showed as a stray shadowed box) and say why the
   stage is empty. renderDoc moves it into page 1's sheet. */
.stage__scroll > .stage__frame { visibility: hidden; position: absolute; }
/* The statement opening (editor.php #bootLoad): a page being drawn, the
   step, a moving bar; gone once page 1 is there. */
.bootload { display: grid; justify-items: center; gap: 14px; width: min(320px, 80%); margin: 14vh auto 0; text-align: center; }
.stage__scroll:has(.docpage) .bootload, .bootload.is-done { display: none; }
.bootload__sheet {
  position: relative; display: grid; align-content: start; gap: 9px; width: 132px; aspect-ratio: 210 / 297; padding: 16px 14px;
  background: #fff; border-radius: 3px; box-shadow: 0 2px 6px rgba(22, 27, 24, .08), 0 18px 40px rgba(22, 27, 24, .12); overflow: hidden;
}
.bootload__sheet b, .bootload__sheet i, .bootload__sheet u { display: block; height: 7px; border-radius: 4px; background: #ECEAE2; transform-origin: left; animation: bootLine 2.4s var(--ease-out) infinite; }
.bootload__sheet b { height: 34px; width: 100%; background: rgba(251, 94, 0, .16); border-radius: 3px; }
.bootload__sheet u { height: 26px; width: 62%; background: #F2F1E1; }
.bootload__sheet i:nth-of-type(1) { width: 80%; animation-delay: .15s; }
.bootload__sheet i:nth-of-type(2) { width: 92%; animation-delay: .3s; }
.bootload__sheet i:nth-of-type(3) { width: 58%; animation-delay: .45s; }
.bootload__sheet u { animation-delay: .6s; }
.bootload__sheet i:nth-of-type(4) { width: 86%; animation-delay: .75s; }
.bootload__sheet i:nth-of-type(5) { width: 70%; animation-delay: .9s; }
@keyframes bootLine { 0% { transform: scaleX(0); opacity: 0; } 25%, 75% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.bootload__step { margin: 4px 0 0; font-size: 15px; font-weight: 600; color: var(--amn-black); }
.bootload__bar { width: 100%; height: 6px; border-radius: 999px; background: rgba(22, 27, 24, .08); overflow: hidden; }
.bootload__bar i { display: block; height: 100%; width: 6%; border-radius: inherit; background: var(--amn-green); transition: width .25s linear; }
.bootload__fail { display: grid; gap: 10px; justify-items: center; font-size: 14px; color: var(--ink-62); }
.bootload__fail[hidden] { display: none; }
.bootload__fail > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.bootload.is-failed .bootload__sheet b, .bootload.is-failed .bootload__sheet i, .bootload.is-failed .bootload__sheet u { animation: none; }
.bootload.is-failed .bootload__bar i { background: var(--ink-45); }
@media (prefers-reduced-motion: reduce) { .bootload__sheet b, .bootload__sheet i, .bootload__sheet u { animation: none; } .bootload__bar i { transition: none; } }
/* Every page in one scrolling column, as in Canva and Figma. The page being
   edited holds the live canvas; the others are pictures until you reach them. */
.stage__scroll:has(.doc) { display: block; padding: 24px 32px 48px; }
/* Room under the last page so Add page scrolls clear of the floating draw bar (2026-10-17). */
.doc { display: flex; flex-direction: column; align-items: center; gap: 28px; width: max-content; min-width: 100%; margin: 0 auto; padding-bottom: 140px; }
.doc:empty { display: none; }
/* As wide as its sheet: a long title (the page's section names) is cut with
   an ellipsis rather than widening the page, which pushed the sheet off the
   centre line the other pages sit on. */
.docpage { display: flex; flex-direction: column; gap: 8px; }
.docpage__bar { display: flex; align-items: center; gap: 2px; height: 30px; contain: inline-size; color: var(--ink-62); font-size: 13px; }
.docpage__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; color: var(--amn-black); }
.docpage__title small { font-weight: 400; color: var(--ink-62); font-size: 13px; }
.docpage__bar button { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-62); cursor: pointer; }
.docpage__bar button:hover:not(:disabled) { background: rgba(33, 39, 36, .08); color: var(--amn-black); }
.docpage__bar button:disabled { opacity: .3; cursor: default; }
.docpage__bar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.docpage__bar button[data-doc-act="menu"] svg { fill: currentColor; stroke: none; }
.docpage__bar { opacity: .55; transition: opacity .15s; }
.docpage:hover .docpage__bar, .docpage.is-active .docpage__bar { opacity: 1; }
.docpage__sheet { position: relative; flex: none; line-height: 0; background: #fff; box-shadow: 0 2px 6px rgba(22, 27, 24, .08), 0 24px 60px rgba(22, 27, 24, .14); outline: 2px solid transparent; outline-offset: 4px; transition: outline-color .15s; }
.docpage:not(.is-active) .docpage__sheet { cursor: pointer; }
.docpage:not(.is-active) .docpage__sheet:hover { outline-color: rgba(251, 94, 0, .45); }
.docpage.is-active .docpage__sheet { outline-color: rgba(251, 94, 0, .9); }
.docpage__sheet > img { width: 100%; height: 100%; display: block; }
/* Dragging a section or photo from the left panel: the page it would land on. */
.docpage__sheet.is-drop { outline-color: #FB5E00; outline-style: dashed; }
/* Download › Choose pages… */
.range { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; }
.range label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.range input { width: 64px; height: 34px; padding: 0 8px; border: 1.5px solid var(--ink-14); border-radius: 8px; font: inherit; }
.range input:focus { outline: none; border-color: #FB5E00; }
.range__fmt { margin-bottom: 4px; }
.range__note { margin-top: 8px; }
/* "Replace page" on a style in Add a section: shown on hover and focus. */
.secstyle__wrap { position: relative; display: grid; }
.secstyle__replace {
  position: absolute; top: 10px; right: 10px; padding: 4px 8px; border: 0; border-radius: 6px;
  background: rgba(22, 27, 24, .86); color: #fff; font: inherit; font-size: 11px; font-weight: 600; cursor: pointer;
  opacity: 0; transform: translateY(-2px); transition: opacity .15s, transform .15s;
}
.secstyle__wrap:hover .secstyle__replace, .secstyle__replace:focus-visible { opacity: 1; transform: none; }
.secstyle__replace:hover { background: #FB5E00; }
@media (hover: none) { .secstyle__replace { opacity: 1; transform: none; } }
.secstyle[draggable="true"] { cursor: grab; }
.secstyle[draggable="true"]:active { cursor: grabbing; }
.docpage__sheet > img[hidden] { display: none; }
.docpage__sheet .stage__frame { margin: 0; box-shadow: none; }
.docadd { display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; height: 44px; border: 1.5px dashed var(--ink-45); border-radius: 10px; background: rgba(255, 255, 255, .5); font: inherit; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.docadd:hover { border-color: var(--amn-green); color: var(--amn-black); background: #fff; }
.stage__hint {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  margin: 0; font-size: 13px; color: var(--ink-62); text-align: center;
}

.zoom { display: inline-flex; align-items: center; height: 38px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); }
.zoom__btn {
  display: grid; place-items: center; width: 36px; height: 100%; border: 0; background: none; cursor: pointer; color: var(--amn-black);
}
.zoom__btn:first-child { border-radius: 999px 0 0 999px; }
.zoom__btn:last-child { border-radius: 0 999px 999px 0; }
.zoom__btn:hover:not(:disabled), .zoom__level:hover { background: var(--amn-cream); }
.zoom__btn:disabled { opacity: .35; cursor: default; }
.zoom__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zoom__level {
  min-width: 54px; height: 100%; padding: 0 6px; border: 0; border-left: 1px solid var(--ink-08); border-right: 1px solid var(--ink-08);
  background: none; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
}

/* -- Selected item panel -------------------------------------------------------- */
.props {
  grid-area: props;
  overflow-y: auto; padding: 20px 18px 32px;
  background: var(--amn-white); border-left: 1px solid var(--ink-08);
}
.props h2 { font-size: 18px; margin-bottom: 14px; }
.props h3 { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); margin-bottom: 10px; }
.props__group { padding: 16px 0; border-top: 1px solid var(--ink-08); display: grid; gap: 8px; }
.props h2 + .props__group, .props__group:first-child { border-top: 0; padding-top: 0; }
.props__row { display: flex; gap: 8px; flex-wrap: wrap; }
.props__meta { margin: 0; font-weight: 500; }
.props__meta span { font-weight: 400; color: var(--ink-62); font-size: 13px; }
.props__note { margin: 0; font-size: 12.5px; color: var(--ink-62); }
.props__warn { margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #F6E7E3; color: var(--danger); font-size: 13px; }
.props__rules ul { margin: 0; padding-left: 18px; color: var(--ink-62); }
.props__rules li { margin: 2px 0; }
.props__done { margin-top: 8px; width: 100%; }

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ink-14); padding: 0;
  background: var(--sw); cursor: pointer; position: relative;
}
.swatch.is-active { box-shadow: 0 0 0 2px var(--amn-white), 0 0 0 4px var(--amn-black); }
.swatch--auto { background: linear-gradient(135deg, var(--amn-black) 50%, var(--amn-cream) 50%); }

.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button {
  padding: 7px 12px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white);
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.seg button:hover { border-color: var(--ink-45); }
.seg button.is-active { background: var(--amn-black); border-color: var(--amn-black); color: var(--amn-cream); }

.stylelist { display: grid; gap: 4px; }
.stylelist__item {
  padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: none; text-align: left; cursor: pointer; line-height: 1.2;
}
.stylelist__item:hover { background: var(--amn-cream); }
.stylelist__item.is-active { border-color: var(--amn-black); background: var(--amn-cream); }
.stylelist__item--display { font-size: 24px; font-weight: 600; letter-spacing: -0.035em; }
.stylelist__item--heading { font-size: 20px; font-weight: 600; letter-spacing: -0.028em; }
.stylelist__item--subheading { font-size: 16px; font-weight: 500; }
.stylelist__item--body { font-size: 14px; }
.stylelist__item--caption { font-size: 12px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }

.slider { display: grid; gap: 4px; font-size: 13px; font-weight: 500; }
.slider input { width: 100%; accent-color: var(--amn-black); }

/* -- Toast ---------------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50;
  padding: 11px 18px; border-radius: 999px; background: var(--amn-black); color: var(--amn-cream);
  font-weight: 500; box-shadow: var(--shadow);
}
.toast--error { background: var(--danger); color: var(--amn-white); }

/* -- Small screens: the editor needs room; say so plainly. -------------------- */
.small-screen { display: none; }
@media (max-width: 1099px) {
  .studio { display: block; }
  .studio > :not(.small-screen) { display: none !important; }
  .small-screen {
    display: grid; place-content: center; gap: 20px; min-height: 100vh; padding: 32px 16px;
    text-align: center; max-width: 420px; margin: 0 auto;
  }
  .small-screen img { margin: 0 auto; }
}
@media (max-width: 1360px) {
  :root { --lib-w: 272px; --props-w: 260px; }
  .bar__name input { width: 180px; }
}

/* -- Sign-in, welcome and account pages ----------------------------------------
   As the launch film: warm paper with a faint grid, the "CS logo | Studio"
   lockup, a white card, orange only for the button and the full stop. */
.auth {
  display: grid; place-items: center; align-content: center; gap: 28px; min-height: 100vh; padding: 40px 16px;
  background-color: #F4F3EA;
  background-image: linear-gradient(rgba(33, 39, 36, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(33, 39, 36, .045) 1px, transparent 1px);
  background-size: 80px 80px; background-position: center top;
}
.lockup { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; color: var(--amn-black); }
.lockup img { height: 44px; width: auto; display: block; }
.lockup i { width: 1px; height: 36px; background: rgba(33, 39, 36, .2); }
.lockup span { font: 400 33px/1 'DM Sans', system-ui, sans-serif; letter-spacing: -0.01em; }
.auth__card {
  width: 100%; max-width: 440px; padding: 34px 32px 30px;
  background: var(--amn-white); border: 1px solid rgba(33, 39, 36, .08); border-radius: 18px;
  box-shadow: 0 1px 2px rgba(22, 27, 24, .04), 0 18px 40px rgba(22, 27, 24, .07);
  display: grid; gap: 4px;
}
.auth h1 { font: 500 28px/1.2 'DM Sans', system-ui, sans-serif; letter-spacing: -0.02em; margin-bottom: 8px; text-wrap: balance; }
.auth h1 .dot { color: var(--amn-green); }
.auth h2 { font-size: 17px; margin: 28px 0 10px; }
.auth p { color: var(--ink-62); font-size: 15px; }
.auth p b { color: var(--amn-black); font-weight: 600; }
.auth__form { display: grid; gap: 14px; margin-top: 18px; }
.auth__form label { display: grid; gap: 6px; font-weight: 500; }
.auth__form label small { font-weight: 400; color: var(--ink-62); }
.auth__form input {
  height: 48px; padding: 0 14px; font-size: 16px; border: 1.5px solid rgba(33, 39, 36, .18); border-radius: 10px; background: var(--amn-white);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
.auth__form input:focus { border-color: var(--amn-green); outline: none; box-shadow: 0 0 0 3px var(--green-12); }
.auth__form .auth__code { font-size: 24px; font-weight: 600; letter-spacing: .3em; text-align: center; height: 56px; }
.auth__form .btn { height: 50px; margin-top: 4px; font-size: 16px; font-weight: 600; border-radius: 10px; }
.auth__small { font-size: 13px !important; margin-top: 14px; }
.auth__links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; }
.auth__links form { display: contents; }
.auth__link { font: inherit; font-size: 14px; color: var(--ink-62); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(33, 39, 36, .25); }
.auth__link:hover { color: var(--amn-black); text-decoration-color: currentColor; }
.auth__error { padding: 10px 12px; border-radius: 10px; background: #F6E7E3; color: var(--danger) !important; margin-bottom: 12px; }
.auth__notice { padding: 10px 12px; border-radius: 10px; background: var(--green-12); color: var(--amn-black) !important; margin-bottom: 12px; }
.auth .credit { background: none; }
.auth__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.auth__list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; background: var(--amn-cream); }
.auth__list span { color: var(--ink-62); }

/* ===========================================================================
   Posts page, dialogs, sizes, status
   =========================================================================== */
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.btn--lg { height: 46px; padding: 0 22px; font-size: 15px; }
.btn--dangerfill { background: var(--danger); border-color: var(--danger); color: var(--amn-white); }
.btn--dangerfill:hover { background: #8a2f20; }

.bar__back {
  display: inline-flex; align-items: center; gap: 4px; height: 38px; padding: 0 12px 0 6px;
  border-radius: 999px; text-decoration: none; font-weight: 500; color: var(--ink-62); white-space: nowrap;
}
.bar__back:hover { background: var(--amn-cream); color: var(--amn-black); }
.bar__back svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar__status::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%;
  background: var(--ink-45); vertical-align: 1px;
}
/* Saved is green (a real green, not the brand's orange "green"), so it reads as good at a glance. */
.bar__status[data-kind="ok"] { color: #2F7D4F; }
.bar__status[data-kind="ok"]::before { background: #2FA35B; }
.bar__status[data-kind="pending"]::before { background: var(--amn-wheat); }
.bar__status[data-kind="error"] { color: var(--danger); }
.bar__status[data-kind="error"]::before { background: var(--danger); }
.bar__status:empty::before { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-45); }
.fmt { display: inline-block; border: 1.6px solid currentColor; border-radius: 2px; flex: none; }
.fmt--lg { border-width: 2px; border-radius: 3px; }

.statuspick select {
  height: 38px; padding: 0 30px 0 14px; border: 1px solid var(--ink-14); border-radius: 999px;
  background-color: var(--amn-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232223' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position: right 10px center; background-size: 14px; background-repeat: no-repeat;
  appearance: none; font: inherit; font-weight: 500; cursor: pointer;
}
.statuspick select[data-status="ready"] { background-color: #E9F9F5; border-color: var(--amn-green); }
.statuspick select[data-status="posted"] { background-color: var(--amn-cream); }

.menu__list--up { top: auto; bottom: calc(100% + 6px); }
.menu__danger { color: var(--danger); }

.card__name em, .sizeopt__name em {
  margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--green-12);
  font-style: normal; font-size: 11px; font-weight: 600; color: var(--amn-green-dark); vertical-align: 1px;
}
.library__lead--on { padding: 10px 12px; border-radius: 8px; background: var(--green-12); color: var(--amn-black); }

.sizes { display: grid; gap: 8px; }
.sizeopt {
  display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-items: center;
  padding: 12px; border: 1px solid var(--ink-08); border-radius: var(--radius); background: var(--amn-white);
  text-align: left; cursor: pointer;
}
.sizeopt:hover { border-color: var(--ink-45); }
.sizeopt.is-active { border-color: var(--amn-black); box-shadow: 0 0 0 1px var(--amn-black); }
.sizeopt__shape { grid-row: span 2; display: flex; align-items: center; justify-content: center; height: 48px; color: var(--amn-black); }
.sizeopt__name { font-weight: 600; }
.sizeopt__meta { font-size: 12.5px; color: var(--ink-62); line-height: 1.4; }

.toast { display: flex; align-items: center; gap: 14px; }
.toast[hidden] { display: none; }
.rail__tab[hidden] { display: none; }
.toast button {
  border: 0; background: none; color: var(--amn-wheat); font-weight: 600; cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}

/* -- Dialogs ------------------------------------------------------------------ */
.dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 16px;
  background: var(--amn-white); color: var(--amn-black); box-shadow: 0 24px 80px rgba(22, 27, 24, .28);
}
.dialog::backdrop { background: rgba(22, 27, 24, .45); backdrop-filter: blur(2px); }
.dialog--wide { width: min(1080px, calc(100vw - 32px)); }
/* Contact support (2026-10-22): a medium window, the form in one column. */
.dialog.support { width: min(560px, calc(100vw - 32px)); }
.support .dialog__form { display: grid; gap: 14px; }
.support__field { display: grid; gap: 6px; font-size: 13px; color: var(--ink-62); }
.support__field small { color: var(--ink-45); }
.support textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1.5px solid var(--ink-14); border-radius: 10px; font: inherit; font-size: 14px; color: var(--amn-black); resize: vertical; }
.support textarea:focus { outline: none; border-color: #FB5E00; }
.support__pics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.support__add { cursor: pointer; }
.support__list { display: flex; flex-wrap: wrap; gap: 6px; }
.support__chip { padding: 3px 10px; border-radius: 999px; background: var(--amn-cream); color: var(--amn-black); font-size: 12px; }
.support__note { margin: 0; font-size: 12px; color: var(--ink-45); }
.support__err { margin: 0; padding: 8px 12px; border-radius: 9px; background: #FDECEA; color: #A3261B; font-size: 13px; }
.dialog__form { display: grid; gap: 14px; padding: 26px 26px 22px; }
.dialog__title { font-size: 20px; letter-spacing: -0.015em; }
.dialog__body { margin: 0; color: var(--ink-62); }
.dialog__input { height: 44px; padding: 0 12px; border: 1px solid var(--ink-14); border-radius: 8px; font: inherit; }
.dialog__input:focus { border-color: var(--amn-green); outline: none; box-shadow: 0 0 0 3px var(--green-12); }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
/* Bring in a PDF (pdf-import.js); its card on the home shelf is styled after
   .pick__img (further down), so it can override it. */
.pdfimp { width: min(520px, calc(100vw - 32px)); }
.pdfimp__drop {
  display: grid; place-items: center; gap: 4px; padding: 34px 16px; border: 1.5px dashed var(--ink-14); border-radius: 12px;
  background: var(--amn-desert); cursor: pointer; text-align: center; transition: border-color var(--t-fast), background var(--t-fast);
}
.pdfimp__drop b { display: inline-block; padding: 10px 18px; border-radius: 999px; background: var(--amn-green); color: #fff; font-weight: 600; }
.pdfimp__drop span { color: var(--ink-62); font-size: 13px; }
.pdfimp__drop:hover, .pdfimp__drop.is-over { border-color: var(--amn-green); background: var(--green-12); }
.pdfimp__drop[hidden], .pdfimp__busy[hidden] { display: none; }
.pdfimp__busy p { margin: 0 0 8px; font-weight: 600; }
.pdfimp__bar { height: 8px; border-radius: 999px; background: var(--ink-08); overflow: hidden; }
.pdfimp__bar i { display: block; height: 100%; width: 0; background: var(--amn-green); border-radius: inherit; transition: width var(--t-base) var(--ease-out); }
.dialog__note { margin: 0; color: var(--ink-45); font-size: 12.5px; }
/* Print preview (editor.js printPreview) */
.menu__btn--two { display: grid; text-align: left; gap: 2px; }
.menu__btn--two small { font-size: 12px; color: var(--ink-45); font-weight: 400; }
.pprev { width: min(1180px, calc(100vw - 32px)); height: min(860px, calc(100vh - 32px)); }
.pprev[open] { display: grid; grid-template-rows: auto auto 1fr auto; }
.pprev__head { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 22px 26px 8px; }
.pprev__head .dialog__body { margin-top: 4px; max-width: 70ch; }
.pprev__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 8px 26px 12px; border-bottom: 1px solid var(--ink-08); }
.pprev__seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 10px; background: var(--ink-08); font-size: 13px; }
.pprev__seg > span { padding: 0 8px 0 6px; color: var(--ink-62); font-weight: 600; }
.pprev__seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font: inherit; cursor: pointer; color: var(--ink-62); }
.pprev__seg button.is-on { background: var(--amn-white); color: var(--amn-black); font-weight: 600; box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
.pprev__legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--ink-62); }
.pprev__legend i { display: inline-block; width: 18px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.pprev__legend .lg-trim { border-top: 1.5px solid #212724; height: 0; vertical-align: 3px; }
.pprev__legend .lg-bleed { background: rgba(251, 94, 0, .28); border: 1px solid rgba(251, 94, 0, .6); }
.pprev__legend .lg-safe { border-top: 1.5px dashed #2F7D4F; height: 0; vertical-align: 3px; }
.pprev__legend .lg-marks { background: linear-gradient(#212724, #212724) 0 50% / 7px 1px no-repeat, linear-gradient(#212724, #212724) 11px 0 / 1px 10px no-repeat; }
.pprev__grid { overflow: auto; padding: 22px 26px; background: #E9E8DD; display: flex; flex-wrap: wrap; gap: 26px 22px; align-content: start; justify-content: center; }
.pprev__sheet { display: grid; gap: 6px; justify-items: center; margin: 0; }
.pprev__sheet canvas { display: block; background: #fff; box-shadow: 0 1px 3px rgba(22, 27, 24, .12), 0 10px 26px rgba(22, 27, 24, .10); }
.pprev__sheet figcaption { font-size: 12.5px; color: var(--ink-62); }
.pprev__wait { align-self: center; color: var(--ink-62); }
.pprev .dialog__actions { padding: 12px 26px 18px; margin: 0; border-top: 1px solid var(--ink-08); align-items: center; }
.pprev .dialog__actions .dialog__note { margin-right: auto; }
/* Upload a font (editor.js uploadFontForm) */
.fontup { width: min(500px, calc(100vw - 32px)); }
.fontup__field { display: grid; gap: 6px; margin: 0; min-width: 0; font-weight: 600; font-size: 14px; }
.fontup__field .dialog__input { font-weight: 400; width: 100%; }
.fontup__two { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: end; }
.fontup__check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.fontup__check input { accent-color: var(--amn-green); margin: 3px 0 0; flex: none; }
.fontup__two .fontup__check { padding-bottom: 10px; }
.fontup__licence { padding: 10px 12px; border-radius: 10px; background: var(--amn-cream); }
.fontup__msg { margin: 0; padding: 8px 12px; border-radius: 8px; background: #FDECEA; color: #8A1C12; font-size: 13.5px; }
/* Get it printed (editor.js printForm) */
.printreq { width: min(560px, calc(100vw - 32px)); }
.printreq .dialog__form { max-height: calc(100vh - 48px); overflow: auto; }
.printreq__field { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; font-weight: 600; font-size: 14px; }
.printreq__field legend { padding: 0; margin-bottom: 6px; }
.printreq__field small { font-weight: 400; color: var(--ink-45); }
.printreq__field .dialog__input { font-weight: 400; width: 100%; }
.printreq__notes { height: auto; padding: 10px 12px; resize: vertical; }
.printreq__two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .printreq__two { grid-template-columns: 1fr; } }
.printreq__quick, .printreq__opts { display: flex; flex-wrap: wrap; gap: 6px; }
.printreq .chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.printreq .chip:hover { border-color: var(--amn-green); }
.printreq label.chip:has(input:checked) { border-color: var(--amn-green); background: var(--green-12); color: var(--amn-green-dark); }
.printreq label.chip input { accent-color: var(--amn-green); margin: 0; }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; margin: 0; }
.keys dd { margin: 0; color: var(--ink-62); }
kbd {
  display: inline-block; padding: 2px 8px; border: 1px solid var(--ink-14); border-bottom-width: 2px; border-radius: 6px;
  background: var(--amn-cream); font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}

/* -- Posts page ----------------------------------------------------------------- */
.home { min-height: 100vh; display: flex; flex-direction: column; }
.home .posts { width: 100%; }
.home .credit { margin-top: auto; }
.bar--home { position: sticky; top: 0; z-index: 10; height: var(--bar-h); flex: none; }
.posts { max-width: 1320px; margin: 0 auto; padding: 40px 32px 80px; }
.posts__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.posts__head h1 { font-size: 40px; letter-spacing: -0.03em; line-height: 1.05; }
.posts__head p { margin: 8px 0 0; color: var(--ink-62); font-size: 15px; }
.shelf { margin: -6px 0 30px; }
.shelf__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-62); margin: 0 0 12px; }
.shelf__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; align-items: start; }
.shelf .pick__meta { font-size: 12px; }
.shelf__tag { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--amn-green-dark); }
.posts__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.posts__empty { color: var(--ink-62); padding: 48px 0; text-align: center; grid-column: 1 / -1; }
/* Put away (more statements than the plan allows): safe, one way in. */
.posts__away { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--amn-cream); color: var(--ink-80, #2b302d); font-size: 14.5px; line-height: 1.45; }
.posts__away svg, .post__lock svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.posts__away a { color: inherit; font-weight: 600; }
.post--away .post__img { border: 0; width: 100%; font: inherit; cursor: pointer; }
.post--away .post__img img { opacity: .55; filter: grayscale(.4); }
.post__lock { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); box-shadow: 0 2px 8px rgba(22, 27, 24, .14); font-size: 13px; font-weight: 600; color: var(--amn-black); white-space: nowrap; }
.post__name--btn { border: 0; padding: 0; background: none; font: inherit; font-weight: 600; color: inherit; text-align: left; cursor: pointer; max-width: 100%; }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--amn-cream-deep); flex-wrap: wrap; }
.tabs__tab {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; font-weight: 500; color: var(--ink-62); cursor: pointer;
}
.tabs__tab span { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(33, 39, 36, .07); font-size: 12px; text-align: center; }
.tabs__tab:hover { color: var(--amn-black); }
.tabs__tab.is-active { background: var(--amn-white); color: var(--amn-black); box-shadow: 0 1px 3px rgba(22, 27, 24, .1); }

.search { position: relative; display: block; }
.search svg {
  position: absolute; left: 13px; top: 50%; width: 17px; height: 17px; transform: translateY(-50%);
  fill: none; stroke: var(--ink-45); stroke-width: 2; stroke-linecap: round;
}
.search input {
  width: 280px; height: 42px; padding: 0 14px 0 38px; border: 1px solid var(--ink-14); border-radius: 999px;
  background: var(--amn-white); font: inherit;
}
.search input:focus { border-color: var(--amn-green); outline: none; box-shadow: 0 0 0 3px var(--green-12); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; }
.post {
  display: flex; flex-direction: column; border-radius: 14px; background: var(--amn-white);
  box-shadow: 0 1px 2px rgba(22, 27, 24, .06); transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .post:hover { box-shadow: var(--shadow); transform: translateY(-2px); } }
.post__img {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; padding: 18px;
  border-radius: 14px 14px 0 0; background: var(--amn-cream-deep); overflow: hidden;
}
.post__img img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; box-shadow: 0 2px 10px rgba(22, 27, 24, .14); }
.post__noimg { font-size: 13px; color: var(--ink-45); }
.post__body { padding: 14px 16px 4px; min-width: 0; }
.post__name { display: block; font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.post__meta { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-62); }
.post__foot { display: flex; align-items: center; justify-content: flex-end; padding: 8px 10px 12px 16px; margin-top: auto; }

.status {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--amn-cream); color: var(--ink-62);
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--amn-wheat); }
.status--ready { background: #E9F9F5; color: var(--amn-green-dark); }
.status--ready::before { background: var(--amn-green); }
.status--posted { background: var(--amn-cream-deep); color: var(--amn-black); }
.status--posted::before { background: var(--amn-black); }

.welcome { grid-column: 1 / -1; padding: 40px; border-radius: 18px; background: var(--amn-white); text-align: center; }
.welcome h2 { font-size: 26px; letter-spacing: -0.02em; }
.welcome p { max-width: 520px; margin: 8px auto 28px; color: var(--ink-62); }
.welcome__picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; text-align: left; }

.pick { display: grid; gap: 4px; padding: 0; border: 0; background: none; text-align: left; text-decoration: none; cursor: pointer; }
.pick__img {
  display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--ink-08);
  transition: box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .pick:hover .pick__img { box-shadow: var(--shadow); transform: translateY(-2px); } }
/* Bring in a PDF card (home shelf, 2026-10-20): a PDF page with its tag and
   an arrow coming in, and the action under it, on white like Build my statement. */
.pick__img.pick__img--pdf { display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--amn-white); border: 1px solid var(--ink-14); }
.pdfsheet { position: relative; display: grid; align-content: start; gap: 6px; width: 92px; aspect-ratio: 210 / 297; padding: 22px 12px 12px; background: var(--amn-desert); border: 1px solid var(--ink-14); border-radius: 4px 14px 4px 4px; box-shadow: 0 6px 16px rgba(22, 27, 24, .08); }
.pdfsheet::after { content: ''; position: absolute; top: -1px; right: -1px; width: 16px; height: 16px; background: linear-gradient(225deg, var(--amn-white) 50%, var(--amn-cream-deep) 50%); border-radius: 0 12px 0 4px; }
.pdfsheet i { display: block; height: 5px; border-radius: 3px; background: var(--ink-14); }
.pdfsheet .pdfsheet__photo { height: 30px; background: var(--amn-cream-deep); border-radius: 3px; margin-bottom: 2px; }
.pdfsheet .pdfsheet__short { width: 60%; }
.pdfsheet__tag { position: absolute; left: -10px; top: 8px; padding: 3px 7px; border-radius: 5px; background: var(--amn-green); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; }
.pdfsheet__in { position: absolute; left: 50%; bottom: -14px; width: 28px; height: 28px; padding: 4px; margin-left: -14px; border-radius: 50%; background: var(--amn-white); border: 1px solid var(--ink-14); fill: none; stroke: var(--amn-green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-base) var(--ease-out); }
.pdfpick__cta { margin-top: 8px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--amn-green); color: var(--amn-green-dark); font-size: 13px; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
@media (hover: hover) and (pointer: fine) {
  .pick--pdf:hover .pdfpick__cta { background: var(--amn-green); color: #fff; }
  .pick--pdf:hover .pdfsheet__in { transform: translateY(3px); }
}
.pick__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pick__name { margin-top: 6px; font-weight: 600; }
.pick__meta { font-size: 12.5px; color: var(--ink-62); }

.newpost { padding: 26px 28px 30px; max-height: calc(100vh - 48px); overflow-y: auto; }
.newpost__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.newpost__step { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; font-size: 15px; }
.newpost__step > span:first-child {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--amn-black); color: var(--amn-cream); font-size: 12px;
}
.newpost__sizes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sizeopt--card { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 4px; padding: 16px 10px; }
.sizeopt--card .sizeopt__shape { grid-row: auto; height: 52px; }
.newpost__templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 18px; align-items: start; }

@media (max-width: 760px) {
  .posts { padding: 24px 16px 60px; }
  .posts__head { flex-direction: column; align-items: stretch; }
  .posts__head h1 { font-size: 32px; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .welcome { padding: 24px 16px; }
  .welcome__picks { grid-template-columns: repeat(2, 1fr); }
  .newpost__sizes { grid-template-columns: repeat(2, 1fr); }
}


/* -- Credit --------------------------------------------------------------------- */
.credit { padding: 8px 16px 32px; text-align: center; }
.auth .credit { padding: 20px 0 0; }
/* Lockup just above the card, the card in the middle, the credit at the foot. */
.auth { grid-template-rows: 1fr auto 1fr; }
.auth > .lockup, .auth > .credit { align-self: end; }
.credit__link, .menu__credit, .rail__credit { color: var(--ink-45); text-decoration: none; }
.credit__link { font-size: 13px; }
.credit__link:hover, .menu__credit:hover, .rail__credit:hover { color: var(--amn-black); }
.credit__link span, .menu__credit span, .rail__credit span { color: var(--amn-green-dark); }
.menu__list .menu__credit { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--ink-08); border-radius: 0; font-size: 12px; font-weight: 400; }
.rail__credit { margin-top: auto; padding: 8px 0 4px; font-size: 10.5px; line-height: 1.35; text-align: center; }

/* -- Icon tools in the item panel ------------------------------------------------ */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 62px; padding: 8px 4px; border: 1px solid var(--ink-08); border-radius: 10px;
  background: var(--amn-white); font-size: 11.5px; font-weight: 500; line-height: 1.2; text-align: center;
  color: var(--amn-black); cursor: pointer;
}
.tool:hover { border-color: var(--ink-45); background: var(--amn-cream); }
.tool.is-active { border-color: var(--amn-black); background: var(--amn-cream); box-shadow: inset 0 0 0 1px var(--amn-black); }
.tool svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tool svg .fillish { fill: currentColor; fill-opacity: .16; }
.tool svg .solid { fill: currentColor; stroke: none; }
.tool--danger { color: var(--danger); }
.tool--danger:hover { border-color: var(--danger); background: #FBF1EE; }

.props__done { margin-top: 12px; gap: 8px; }
.props__done svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#textEdit {
  width: 100%; padding: 10px 12px; border: 1px solid var(--ink-14); border-radius: 8px; background: var(--amn-white);
  font: inherit; font-size: 14px; line-height: 1.45; resize: vertical;
}
#textEdit:focus { border-color: var(--amn-green); outline: none; box-shadow: 0 0 0 3px var(--green-12); }

.sizer { display: grid; grid-template-columns: 32px 1fr 32px auto; align-items: center; gap: 8px; }
.sizer__btn {
  display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--ink-14); border-radius: 50%;
  background: var(--amn-white); cursor: pointer;
}
.sizer__btn:hover:not(:disabled) { border-color: var(--ink-45); }
.sizer__btn:disabled { opacity: .35; cursor: default; }
.sizer__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sizer input { width: 100%; accent-color: var(--amn-black); }
.sizer__val { min-width: 44px; font-size: 12.5px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.linkbtn { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--amn-green-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* A colour that wouldn't show on what's behind the item. */
.swatch:disabled { cursor: not-allowed; opacity: .35; }
.swatch:disabled::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 120%; height: 1.5px; background: var(--danger);
  transform: translate(-50%, -50%) rotate(-45deg);
}
.seg button:disabled { opacity: .4; cursor: not-allowed; text-decoration: line-through; }

/* -- Grid and guides menu ---------------------------------------------------- */
.btn--icon.is-on { background: var(--green-12); border-color: var(--amn-green); }
.menu__list--view { min-width: 280px; padding: 10px; }
.check { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 8px; cursor: pointer; font-weight: 500; }
.check:hover { background: var(--amn-cream); }
.check input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--amn-black); flex: none; }
.check small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-62); }
.menu__note { margin: 6px 10px 4px; font-size: 12px; color: var(--ink-62); line-height: 1.45; }

/* -- Page strip: the pages of a post, under the canvas ----------------------- */
.stage__scroll { inset: 0 0 180px; }
.stage__hint { bottom: 150px; }
.pagestrip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  display: flex; flex-direction: column; gap: 4px; padding: 10px 16px 8px;
  background: var(--amn-white); border-top: 1px solid var(--ink-08);
}
.pagestrip__list { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; overflow-y: hidden; flex: 1; min-height: 0; padding: 4px 2px 0; }
.pagestrip__item { position: relative; display: flex; flex-direction: column; align-items: center; flex: none; }
.pagestrip__thumb {
  height: 72px; padding: 0; border: 1px solid var(--ink-14); border-radius: 4px; background: var(--amn-cream);
  overflow: hidden; cursor: pointer; display: block;
}
.pagestrip__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pagestrip__thumb:hover { border-color: var(--ink-45); }
.pagestrip__item.is-active .pagestrip__thumb { border-color: var(--amn-black); box-shadow: 0 0 0 2px var(--amn-black); }
.pagestrip__num { margin-top: 3px; font-size: 11px; font-weight: 600; color: var(--ink-62); font-variant-numeric: tabular-nums; }
.pagestrip__tools {
  position: absolute; top: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px;
  padding: 2px; border-radius: 999px; background: var(--amn-black); box-shadow: var(--shadow);
}
.pagestrip__tools button {
  display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: none; color: var(--amn-cream); cursor: pointer;
}
.pagestrip__tools button:hover:not(:disabled) { background: rgba(244, 239, 234, .18); }
.pagestrip__tools button:disabled { opacity: .3; cursor: default; }
.pagestrip__tools svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pagestrip__add {
  height: 72px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1.5px dashed var(--ink-28, rgba(35,34,35,.28)); border-radius: 4px; background: none; cursor: pointer;
  font-size: 11px; font-weight: 600; color: var(--ink-62); padding: 0 6px;
}
.pagestrip__add:hover { border-color: var(--amn-black); color: var(--amn-black); background: var(--amn-cream); }
.pagestrip__add svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pagestrip__note { margin: 0; font-size: 11.5px; color: var(--ink-62); }

/* -- New post: what are you making? ------------------------------------------- */
.kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kind {
  display: grid; grid-template-columns: 64px 1fr; gap: 4px 14px; align-items: center; padding: 16px;
  border: 1px solid var(--ink-08); border-radius: 12px; background: var(--amn-white); text-align: left; cursor: pointer;
}
.kind:hover { border-color: var(--ink-45); }
.kind.is-active { border-color: var(--amn-black); box-shadow: inset 0 0 0 1px var(--amn-black); }
.kind__icon { grid-row: span 2; display: flex; align-items: center; justify-content: center; gap: 3px; height: 52px; }
.kind__icon i { display: block; width: 26px; height: 32px; border: 2px solid currentColor; border-radius: 3px; background: var(--amn-cream); }
.kind__icon i + i { margin-left: -16px; }
.kind__name { font-weight: 600; font-size: 15px; }
.kind__meta { font-size: 12.5px; color: var(--ink-62); }
.post__pages {
  position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px;
  background: rgba(33, 39, 36, .78); color: var(--amn-cream); font-size: 11.5px; font-weight: 600;
}
.post__img { position: relative; }

/* A carousel's card: its cover, with the next pages peeking out behind. */
.pick__img--stack { overflow: visible; position: relative; box-shadow: 6px -6px 0 -1px var(--amn-cream-deep), 6px -6px 0 0 var(--ink-14), 12px -12px 0 -1px var(--amn-cream-deep), 12px -12px 0 0 var(--ink-14); margin: 12px 12px 0 0; }
.pick__img--stack img { border-radius: 10px; }


/* -- Page strip as booklet spreads ---------------------------------------- */
.pagestrip__item.is-left { margin-left: 14px; }
.pagestrip__item.is-left + .pagestrip__item.is-right { margin-left: -6px; }
.pagestrip__item.is-single + .pagestrip__item { margin-left: 14px; }

/* -- Graphic previews ----------------------------------------------------- */
.gp--circle { display: block; width: 46px; height: 46px; border-radius: 50%; background: var(--sw); }
.gp--round { border-radius: 8px; }

/* -- Flip book ----------------------------------------------------------- */
.flip {
  width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: radial-gradient(ellipse at 50% 40%, #3A4440 0%, #161B18 70%);
  color: #fff; display: flex; flex-direction: column;
}
.flip:not([open]) { display: none; }
.flip::backdrop { background: #161B18; }
/* The same height and side padding as the editor's bar, so Design · Write ·
   Preview and Download sit in the very same place on every screen. */
.flip__bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); /* the buttons on the right never spill over the page controls */ align-items: center; gap: 16px;
  height: var(--bar-h); padding: 0 16px 0 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.flip__title { display: flex; flex-direction: column; min-width: 0; }
.flip__title strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flip__title span { font-size: 12px; color: rgba(255, 255, 255, 0.6); }
.flip__nav { display: flex; align-items: center; gap: 12px; }
.flip__where { min-width: 150px; text-align: center; font-weight: 500; font-variant-numeric: tabular-nums; }
.flip__actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.flip__actions > *, .flip__actions svg { flex: none; } /* never squeezed: the switch keeps the editor's size and place */
.flip .btn { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); color: #fff; }
.flip .btn:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); }
.flip .btn.flip__download { background: var(--amn-green); border-color: var(--amn-green); color: #fff; }
.flip .btn.flip__download:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.flip .btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.flip__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 16px 32px 28px; overflow: hidden; } /* room under the book for its floor shadow (the hint line used to give it) */
/* The book's size is set from script to fit the stage (editor.js#openBrochure). */
.flip__book { position: relative; animation: flipIn .7s cubic-bezier(.2, .8, .2, 1) both; translate: var(--shift, 0px) 0; }
/* A closed book (front or back cover alone) sits in the middle; it glides
   there as a cover turns. Not on the first frame, so it opens in place. */
.flip__book.is-placed { transition: translate .9s cubic-bezier(.35, .1, .25, 1); }
.flip__book.is-risen { animation: none; } /* the rise-in runs once (editor.js flatBook) */
.flip__book::after { transition: left .9s cubic-bezier(.35, .1, .25, 1), right .9s cubic-bezier(.35, .1, .25, 1); }
.flip__book[data-closed="front"]::after { left: 53%; right: 3%; }
.flip__book[data-closed="back"]::after { left: 3%; right: 53%; }
@media (prefers-reduced-motion: reduce) { .flip__book.is-placed, .flip__book::after { transition: none; } }
/* A soft floor shadow under the book, so the pages read as paper on a desk. */
.flip__book::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -26px; height: 40px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 70%); filter: blur(4px);
}
@keyframes flipIn { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
.flip__where.is-new { animation: flipWhere .35s ease-out; }
@keyframes flipWhere { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.flip [data-flip]:disabled { opacity: .35; cursor: default; }
.flip .btn { transition: background .15s, border-color .15s, opacity .15s; }
@media (prefers-reduced-motion: reduce) { .flip__book, .flip__where.is-new { animation: none; } }
.flip__page { background: #fff; overflow: hidden; }
.flip__page img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.flip__page--blank { background: #fff; }

.flip__mode { display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); }
.flip__mode button { border: 0; background: none; color: rgba(255, 255, 255, 0.7); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.flip__mode button.is-active { background: #FB5E00; color: #161B18; }
.flip__mode button:disabled { opacity: 0.35; cursor: default; }
.flip__mode button { display: inline-flex; align-items: center; gap: 6px; }
.flip__mode svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* A page whose picture is still being drawn: a soft shimmer, not a blank. */
.flip__page.is-loading { background: linear-gradient(100deg, #f1efe9 30%, #faf9f6 50%, #f1efe9 70%) 0 0 / 200% 100%; animation: flipLoad 1.2s linear infinite; }
.flip__page img:not([src]) { visibility: hidden; }
@keyframes flipLoad { to { background-position: -200% 0; } }
/* Light background: the same preview on a pale desk, to judge the
   statement against white or cream surroundings. */
.flip { transition: background .35s ease, color .35s ease; }
.flip--light { background: radial-gradient(ellipse at 50% 40%, #FFFFFF 0%, #E9E5DC 75%); color: #161B18; }
.flip--light::backdrop { background: #E9E5DC; }
.flip--light .flip__title span { color: rgba(22, 27, 24, .6); }
.flip--light .btn { background: rgba(22, 27, 24, .05); border-color: rgba(22, 27, 24, .16); color: #161B18; }
.flip--light .btn:hover { background: rgba(22, 27, 24, .1); border-color: rgba(22, 27, 24, .3); }
.flip--light .flip__mode { background: rgba(22, 27, 24, .05); border-color: rgba(22, 27, 24, .16); }
.flip--light .flip__mode button { color: rgba(22, 27, 24, .65); }
.flip--light .flip__mode button.is-active { color: #161B18; }
.flip--light .flip__page { box-shadow: 0 0 0 1px rgba(22, 27, 24, .06); }
.flip--light .flip__book::after { background: radial-gradient(ellipse at center, rgba(22, 27, 24, .28), rgba(22, 27, 24, 0) 70%); }
@media (prefers-reduced-motion: reduce) { .flip__page.is-loading { animation: none; } }




/* -- Edit | Preview switch ------------------------------------------------- */
.modeswitch { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--amn-cream); border: 1px solid var(--ink-14); }
.modeswitch button {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px;
  background: none; color: var(--ink-62); font-weight: 600; cursor: pointer;
}
.modeswitch button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.modeswitch button.is-active { background: var(--amn-black); color: #fff; }
.modeswitch button:not(.is-active):hover { color: var(--amn-black); }
.modeswitch--dark { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.16); }
.modeswitch--dark button { color: rgba(255, 255, 255, 0.7); }
.modeswitch--dark button.is-active { background: #fff; color: var(--amn-black); }
.modeswitch--dark button:not(.is-active):hover { color: #fff; }

.newpost__step--plain { margin-top: 28px; }

/* =============================================================================
   Canva-style editor (stage 1): a toolbar for the selected item across the
   top, library on the left, the page in the middle, pages down the right.
   Mocked up and tested in mockups/editor-v2.html first.
   ========================================================================== */
:root { --ctx-h: 64px; --pages-w: 264px; }
.studio.no-layers { --pages-w: 0px; }
.studio.no-layers .layers { display: none; }
.studio {
  grid-template: var(--bar-h) var(--ctx-h) minmax(0, 1fr) / var(--rail-w) var(--lib-w) minmax(0, 1fr) var(--pages-w);
  grid-template-areas: 'bar bar bar bar' 'ctx ctx ctx ctx' 'rail lib stage pages';
}
.stage__scroll { inset: 0 0 34px; }
.stage__hint { bottom: 9px; font-size: 12.5px; }

/* -- The toolbar ------------------------------------------------------------ */
.ctxbar {
  grid-area: ctx; display: flex; align-items: center; gap: 2px; min-width: 0;
  padding: 0 14px; background: var(--amn-white); border-bottom: 1px solid var(--ink-08);
  overflow-x: auto; scrollbar-width: none;
}
.ctxbar::-webkit-scrollbar { display: none; }
.ctx__chip {
  flex: none; margin-right: 8px; padding: 6px 9px; border-radius: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  background: var(--green-12); color: var(--amn-green-dark); white-space: nowrap;
}
.ctx__sep { flex: none; width: 1px; height: 24px; margin: 0 6px; background: var(--ink-14); }
.ctx__grow { flex: 1 1 auto; min-width: 8px; }
.ctx__label { flex: none; margin: 0 6px 0 2px; font-size: 12.5px; color: var(--ink-62); white-space: nowrap; }
.ctx__note { flex: none; font-size: 12.5px; color: var(--ink-62); white-space: nowrap; padding-left: 10px; }
.ctx__warn { flex: none; font-size: 12.5px; font-weight: 600; color: var(--danger); background: #F6E7E3; padding: 6px 10px; border-radius: 7px; white-space: nowrap; margin-left: 6px; }
.ctx__warn[hidden] { display: none; }
.ib {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; min-width: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: none;
  color: var(--amn-black); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.ib:hover:not(:disabled) { background: var(--amn-cream); }
.ib.is-on { background: var(--green-12); color: var(--amn-green-dark); }
.ib:disabled { opacity: .32; cursor: default; }
.ib--danger:hover:not(:disabled) { color: var(--danger); background: #FBF1EE; }
.ib--box { border: 1px solid var(--ink-14); min-width: 150px; max-width: 240px; justify-content: space-between; }
.ib--box span { overflow: hidden; text-overflow: ellipsis; }
.ib svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ib svg.chev { width: 13px; height: 13px; opacity: .7; }
.ib svg .fillish { fill: currentColor; fill-opacity: .16; }
.ib__dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); background: var(--sw); flex: none; }
.ib__dot--auto { background: linear-gradient(135deg, var(--amn-black) 50%, var(--amn-cream) 50%); }
.ib__A { display: inline-flex; flex-direction: column; align-items: center; font: 700 15px/1 Georgia, serif; }
.ib__A i { display: block; width: 17px; height: 4px; margin-top: 2px; border-radius: 1px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ib__A i.ib__dot--auto { background: linear-gradient(135deg, var(--amn-black) 50%, var(--amn-cream) 50%); }
.ctx__size { flex: none; display: inline-flex; align-items: center; }
.ctx__size output { min-width: 46px; text-align: center; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ctx__sw { flex: none; width: 26px; height: 26px; margin: 0 3px; border-radius: 50%; border: 0; cursor: pointer; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ctx__sw.is-on { box-shadow: 0 0 0 2px var(--amn-white), 0 0 0 4px var(--amn-black); }
.ctxbar .seg { flex: none; flex-wrap: nowrap; gap: 2px; padding: 2px; border: 1px solid var(--ink-14); border-radius: 8px; }
.ctxbar .seg button { height: 28px; padding: 0 10px; border: 0; border-radius: 6px; font-size: 12.5px; }
.ctx__zoom { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; font-size: 12.5px; color: var(--ink-62); }
.ctx__zoom input { width: 120px; accent-color: var(--amn-green-dark); }

/* -- Popovers opened from the toolbar ------------------------------------------ */
.pop {
  position: fixed; z-index: 60; min-width: 200px; max-width: 340px; max-height: 70vh; overflow: auto;
  padding: 8px; background: var(--amn-white); border: 1px solid var(--ink-14); border-radius: 12px;
  box-shadow: 0 14px 36px rgba(22, 27, 24, .18);
}
.pop h4 { margin: 6px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); }
.pop__item {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px;
  background: none; text-align: left; font: inherit; color: var(--amn-black); cursor: pointer;
}
.pop__item:hover:not(:disabled) { background: var(--amn-cream); }
.pop__item.is-on { background: var(--green-12); }
.pop__item:disabled { opacity: .35; cursor: default; }
.pop__item small { display: block; font-size: 12px; color: var(--ink-62); }
.pop__item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pop__item svg .fillish { fill: currentColor; fill-opacity: .16; }
.pop__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.pop__grid .pop__item { flex-direction: column; gap: 4px; padding: 8px 4px; font-size: 12px; text-align: center; }
.pop__swatches { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 8px 8px; }
.pop__swatches .swatch { width: 30px; height: 30px; }
.pop__note { margin: 4px 8px 6px; font-size: 12px; color: var(--ink-62); }
.pop__item--style { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }

/* -- Right-click menu on the page (as in Canva): the popover look, with the
   keyboard shortcut on the right of each row. */
.ctxmenu { z-index: 70; min-width: 230px; max-width: 300px; max-height: calc(100vh - 16px); padding: 6px; }
.ctxmenu h4 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ctxmenu .pop__item { padding: 6px 10px; font-size: 13.5px; }
.ctxmenu .pop__item:focus-visible { outline: none; background: var(--amn-cream); box-shadow: inset 0 0 0 2px var(--amn-green); }
.ctxmenu__label { flex: 1; min-width: 0; }
.ctxmenu:focus { outline: none; }
.ctxmenu kbd { flex: none; padding: 0; border: 0; background: none; box-shadow: none; font: inherit; font-size: 11.5px; color: var(--ink-62); letter-spacing: .02em; }
.ctxmenu__sep { margin: 5px 6px; border: 0; border-top: 1px solid var(--ink-08); }
.ctxmenu .pop__swatches { padding: 2px 8px 6px; }
.ctxmenu .pop__swatches .swatch { width: 26px; height: 26px; }
.ctxmenu .swatch:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.textadd__detail { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-62); }

/* -- Layers down the right (as in Figma): the page's sections and their pieces,
   and anything added by hand; drag to reorder, eye to hide, padlock to lock. */
.layers { grid-area: pages; display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--amn-white); border-left: 1px solid var(--ink-08); }
.layers__head { display: flex; align-items: center; gap: 6px; padding: 12px 10px 8px 16px; }
.layers__head h2 { flex: 1; margin: 0; font-size: 13px; font-weight: 700; }
.layers__head small { color: var(--ink-62); font-weight: 400; }
.layers__head button { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--ink-62); cursor: pointer; }
.layers__head button:hover { background: var(--ink-08); color: var(--amn-black); }
.layers__head svg, .lrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.layers__list { flex: 1; min-height: 0; overflow-y: auto; padding: 0 6px 16px; }
.layers__label { margin: 12px 10px 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-62); }
.layers__empty { margin: 4px 10px; font-size: 12.5px; color: var(--ink-62); }
.layers__hint { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--ink-08); font-size: 11.5px; color: var(--ink-62); }
.lrow { position: relative; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 calc(6px + var(--d, 0) * 16px); border-radius: 7px; font-size: 12.5px; color: var(--amn-black); cursor: pointer; user-select: none; }
.lrow:hover { background: var(--amn-cream); }
.lrow.is-on { background: var(--green-12); }
.lrow.is-off .lrow__name { opacity: .45; }
.lrow--group { font-weight: 700; }
.lrow__twist { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 0; padding: 0; background: none; color: var(--ink-62); cursor: pointer; flex: none; }
.lrow__twist svg { width: 12px; height: 12px; transition: transform .15s; }
.lrow.is-closed .lrow__twist svg { transform: rotate(-90deg); }
.lrow__kind { display: inline-grid; place-items: center; width: 18px; flex: none; color: var(--ink-62); }
.lrow__name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.lrow__name small { color: var(--ink-62); font-weight: 400; }
.lrow__btn { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 6px; background: none; color: var(--ink-62); cursor: pointer; opacity: 0; flex: none; }
.lrow:hover .lrow__btn, .lrow__btn.is-set { opacity: 1; }
.lrow__btn:hover { background: rgba(33, 39, 36, .08); color: var(--amn-black); }
.lrow__btn.is-set { color: var(--amn-green-dark); }
.lrow[draggable="true"] { cursor: grab; }
.lrow.is-dragging { opacity: .4; }
.lrow.drop-before::before, .lrow.drop-after::after { content: ''; position: absolute; left: 8px; right: 8px; height: 2px; border-radius: 2px; background: var(--amn-green); }
.lrow.drop-before::before { top: -1px; }
.lrow.drop-after::after { bottom: -1px; }
#layersBtn[aria-pressed="true"] { background: var(--green-12); color: var(--amn-green-dark); }

/* -- Pages down the right (old page strip, no longer in the editor) ------------- */
.pagepanel {
  grid-area: pages; display: flex; flex-direction: column; min-height: 0;
  background: var(--amn-white); border-left: 1px solid var(--ink-08);
}
.pagepanel__title { margin: 0; padding: 14px 16px 8px; font-size: 13px; font-weight: 700; }
.pagepanel .pagestrip {
  flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 0; border: 0; background: none; height: auto; position: static; grid-area: auto;
}
.pagepanel .pagestrip__list {
  flex-direction: column; align-items: stretch; gap: 14px;
  overflow-x: hidden; overflow-y: auto; padding: 4px 14px 12px 12px;
}
.pagepanel .pagestrip__item {
  display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 6px; align-items: start;
  margin: 0 !important; position: relative;
}
.pagepanel .pagestrip__num { grid-column: 1; grid-row: 1; margin: 3px 0 0; text-align: right; }
.pagepanel .pagestrip__thumb { grid-column: 2; grid-row: 1; width: 100%; height: auto; }
.pagepanel .pagestrip__item.is-active .pagestrip__num { color: var(--amn-green-dark); }
.pagepanel .pagestrip__item.is-active .pagestrip__thumb { border-color: var(--amn-green); box-shadow: 0 0 0 2px var(--amn-green); }
.pagepanel .pagestrip__tools {
  position: absolute; right: 4px; top: 4px; left: auto; bottom: auto; transform: none;
  display: none; flex-direction: column; gap: 2px; padding: 3px; border-radius: 8px;
}
.pagepanel .pagestrip__item:hover .pagestrip__tools,
.pagepanel .pagestrip__item:focus-within .pagestrip__tools { display: flex; }
.pagepanel .pagestrip__add { width: auto; margin-left: 22px; aspect-ratio: auto !important; height: 44px; flex: none; flex-direction: row; gap: 6px; }
.pagepanel .pagestrip__note { padding: 0 14px 12px; }

@media (max-width: 1360px) {
  :root { --pages-w: 156px; }
}

/* -- Stage 2: Content and Brand tabs, custom colours -------------------------- */
.pop__add { position: relative; margin-top: 2px; }
.pop__add input, .brandpal__add input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pop__plus { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: 19px; font-weight: 700; line-height: 1; flex: none;
  background: conic-gradient(#E5484D, #F5B53D, #46A758, #3E9BE0, #8E4EC6, #E5484D); color: #fff; text-shadow: 0 0 3px rgba(0, 0, 0, .55); }
/* A colour someone added (off-brand): a dashed ring, so it reads as outside the kit. */
.swatch--custom { outline: 1.5px dashed var(--ink-62); outline-offset: 2px; }
.pop h4 small { font-weight: 600; letter-spacing: .04em; text-transform: none; }
.brandpal { display: grid; gap: 8px; }
.brandpal__row { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 13.5px; }
.brandpal__row i { width: 32px; height: 32px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); flex: none; }
.brandpal__row small { display: block; font-weight: 400; color: var(--ink-62); font-size: 12px; }
.brandpal__add { position: relative; margin-top: 10px; }
.brandtype { display: grid; gap: 6px; }
.brandtype__row { padding: 8px 10px; border: 1px solid var(--ink-14); border-radius: 8px; }
.brandtype__row b { display: block; font-size: 13.5px; }
.brandtype__row small { color: var(--ink-62); font-size: 12px; }
.library__rules { margin: 0; padding-left: 18px; color: var(--ink-62); font-size: 13px; }
.library__rules li { margin: 3px 0; }

/* -- Portal brand: capabilitystatement.com.au ---------------------------------- */
.bar__mark { display: grid; place-items: center; flex: none; margin-right: -6px; }
.bar__mark img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.bar__brand img { height: 38px; }
.dialog__title, .pagepanel__title, .ctx__chip { font-family: 'Rethink Sans', 'DM Sans', system-ui, sans-serif; }

/* -- Add page: blank page card -------------------------------------------------- */
.pick__img--blank { display: grid; place-items: center; background: var(--amn-white); border: 1.5px dashed var(--ink-45); border-radius: 10px; color: var(--ink-62); font-size: 34px; font-weight: 300; }
.pick:hover .pick__img--blank { border-color: var(--amn-green); color: var(--amn-green-dark); }

/* -- Brand tab: change a brand colour everywhere -------------------------------- */
.brandpal__row--edit { position: relative; width: calc(100% + 16px); padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; }
.brandpal__row--edit:hover { background: var(--amn-cream); }
.brandpal__row--edit input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.brandpal__reset { margin-top: 10px; }

/* -- Icons tab -------------------------------------------------------------- */
.icosearch { width: 100%; height: 38px; padding: 0 12px; border: 1px solid var(--ink-14); border-radius: 9px; font: inherit; background: var(--amn-white); }
.icosearch:focus { outline: none; border-color: var(--amn-green); }
.icochips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.icochips button { height: 28px; padding: 0 10px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); font: inherit; font-size: 12px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.icochips button:hover { border-color: var(--ink-45); }
.icochips button.is-on { background: var(--amn-black); border-color: var(--amn-black); color: #fff; }
.icocat { width: 100%; height: 34px; margin-bottom: 10px; border: 1px solid var(--ink-14); border-radius: 8px; font: inherit; background: var(--amn-white); }
.icogrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.icocell { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 9px; background: none; color: var(--ic); cursor: pointer; }
.icocell:hover { background: var(--amn-cream); }
.icocell svg { width: 28px; height: 28px; }
.icostyles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.icostyle, .icoweights button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 2px 7px; border: 1px solid var(--ink-14); border-radius: 9px; background: var(--amn-white); font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.icostyle.is-on, .icoweights button.is-on { border-color: var(--amn-green); background: var(--green-12); color: var(--amn-green-dark); }
.icostyle__ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: var(--ic); }
.icostyle__ico svg { width: 20px; height: 20px; }
.icostyle--plain .icostyle__ico svg { width: 30px; height: 30px; }
.icostyle--circle .icostyle__ico { background: var(--ic); color: #fff; }
.icostyle--square .icostyle__ico { background: var(--ic); color: #fff; border-radius: 8px; }
.icostyle--soft .icostyle__ico { background: color-mix(in srgb, var(--ic) 18%, transparent); }
.icoweights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.icoweights svg { width: 22px; height: 22px; color: var(--amn-black); }
.linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--amn-green-dark); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* -- Section statements: Sections tab and Brand Kit ------------------------------ */
.secstyles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.secstyle { display: grid; gap: 4px; padding: 6px; border: 1.5px solid var(--ink-14); border-radius: 10px; background: var(--amn-white); text-align: left; font: inherit; font-size: 11.5px; color: var(--ink-62); cursor: pointer; }
.secstyle:hover { border-color: var(--ink-45); }
.secstyle.is-on { border-color: var(--amn-green); box-shadow: 0 0 0 2px var(--green-12); color: var(--amn-black); }
.secstyle__img { display: block; border-radius: 5px; overflow: hidden; background: var(--amn-cream); min-height: 60px; box-shadow: inset 0 0 0 1px var(--ink-08); }
.secstyle__img img { display: block; width: 100%; height: auto; }
.secstyle__code { font: 600 10.5px ui-monospace, Menlo, monospace; color: var(--amn-black); }
.secstyle__for { font-size: 11.5px; line-height: 1.35; color: var(--ink-62); }
.seclist { display: grid; gap: 6px; }
.secrow { display: grid; grid-template-columns: 1fr; gap: 4px; align-items: center; }
.secrow__name { text-align: left; padding: 8px 10px; border: 1px solid var(--ink-14); border-radius: 9px; background: var(--amn-white); color: var(--amn-black); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; }
.secrow__name small { display: block; font-weight: 400; color: var(--ink-62); font-size: 11.5px; }
.secrow.is-on .secrow__name { border-color: var(--amn-green); }
/* The page's list comes first; the selected section opens to its styles. */
.secrow__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.secrow__name .secrow__caret { width: 14px; height: 14px; flex: none; fill: currentColor; color: var(--ink-45); transition: transform .15s; }
.secrow.is-open .secrow__caret { transform: rotate(90deg); color: var(--amn-green); }
.secrow.is-open { padding: 0 0 8px; border-bottom: 1px solid var(--ink-14); margin-bottom: 4px; }
.secrow__note { margin: 4px 2px 2px; }
@media (prefers-reduced-motion: reduce) { .secrow__name .secrow__caret { transition: none; } }
.secadd { display: grid; gap: 6px; }
.secadd__item { display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 10px 12px; border: 1px solid var(--ink-14); border-radius: 9px; background: var(--amn-white); color: var(--amn-black); font: inherit; cursor: pointer; }
.secadd__item .secrow__caret { width: 14px; height: 14px; flex: none; fill: currentColor; color: var(--ink-45); }
.secadd__item:hover { border-color: var(--amn-green); }
.secadd__item b { display: block; font-size: 13.5px; }
.secadd__item small { color: var(--ink-62); font-size: 12px; }
.kitlogo { display: grid; place-items: center; min-height: 72px; padding: 10px; border: 1px dashed var(--ink-14); border-radius: 10px; background: var(--amn-white); color: var(--ink-62); font-size: 13px; }
.kitlogo img { max-height: 60px; max-width: 100%; }
.kitrow { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.kitrow .btn { position: relative; }
.kitpresets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.kitpreset { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; }
.kitpreset i { width: 10px; height: 10px; border-radius: 50%; }
.kitslots { display: grid; gap: 4px; }
.kitslot { position: relative; display: flex; align-items: center; gap: 10px; width: calc(100% + 16px); padding: 6px 8px; margin: 0 -8px; border: 0; border-radius: 9px; background: none; font: inherit; text-align: left; color: inherit; cursor: pointer; font-weight: 600; font-size: 13px; }
.kitslot[aria-expanded="true"], .brandpal__row--edit[aria-expanded="true"] { background: var(--amn-cream); box-shadow: inset 0 0 0 1.5px #FB5E00; }
.kitslot:hover { background: var(--amn-cream); }
.kitslot i { width: 32px; height: 32px; border-radius: 8px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0,0,0,.14); flex: none; }
.kitslot small { display: block; font-weight: 400; color: var(--ink-62); font-size: 11.5px; }
.kitslot input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.kitchecks { display: grid; gap: 4px; margin-top: 8px; font-size: 12.5px; }
.kitchecks p { margin: 0; }
.kitchecks .ok { color: #2F7D4F; }
.kitchecks .no { color: var(--danger); font-weight: 600; }
.kitchecks p { display: flex; gap: 6px; align-items: flex-start; }
.kitchecks svg { flex: none; width: 15px; height: 15px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.auth__back svg { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kitfonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.kitfont { display: grid; gap: 2px; justify-items: center; padding: 10px 4px; border: 1px solid var(--ink-14); border-radius: 9px; background: var(--amn-white); cursor: pointer; font-size: 12px; }
.kitfont b { font-size: 22px; }
.kitfont.is-on { border-color: var(--amn-green); background: var(--green-12); }

/* -- Section builder card ------------------------------------------------------- */
.pick__img--sections { position: relative; display: grid; grid-template-rows: 1fr 2fr 1fr; gap: 6%; padding: 14% 12%; background: var(--amn-white); border: 1px solid var(--ink-14); }
.pick__img--sections .sx { display: block; border-radius: 4px; background: var(--amn-cream-deep); }
.pick__img--sections .sx--1 { background: var(--amn-black); }
.pick__img--sections .sx--2 { background: linear-gradient(90deg, var(--amn-cream) 55%, var(--amn-wheat) 55%); }
.pick__img--sections .sx--3 { background: color-mix(in srgb, var(--amn-green) 35%, var(--amn-white)); }
.sx__new { position: absolute; top: 8px; right: 8px; padding: 3px 7px; border-radius: 999px; background: var(--amn-green); color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

.kitslot__reset { display: block; margin: -2px 0 6px 42px; font-size: 12px; }
.secadd__open .secstyle { align-content: start; }
.secadd__img { display: block; height: 84px; margin-bottom: 7px; border-radius: 6px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--ink-08); }
.secadd__img img { display: block; width: 100%; height: auto; }
.secadd__item:hover .secadd__img { box-shadow: inset 0 0 0 1px var(--amn-green); }
.secadd__open { grid-column: 1 / -1; padding: 8px; border: 1.5px solid var(--amn-green); border-radius: 12px; background: var(--amn-white); }
.secadd__head { position: relative; display: block; width: 100%; padding: 2px 26px 8px 4px; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; }
.secadd__head b { display: block; font-size: 13.5px; }
.secadd__head small { color: var(--ink-62); font-size: 11.5px; }
.secadd__head span { position: absolute; top: 0; right: 4px; font-size: 18px; line-height: 1; color: var(--ink-62); }
.secstyle__fit { justify-self: start; align-self: end; padding: 2px 7px; border-radius: 999px; background: var(--ink-08); color: var(--ink-62); font-size: 10.5px; font-weight: 600; }
.secstyle__fit.is-fit { background: var(--green-12); color: var(--amn-green-dark); }
.ctx__group { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--ink-14); border-radius: 10px; background: var(--amn-cream); }
.ctx__glabel { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-62); margin-right: 4px; white-space: nowrap; }
.pop__item--danger { color: var(--danger); }
.secadd { grid-template-columns: 1fr; }
.secadd__item { padding: 8px 10px; }
.secadd__item b { font-size: 12.5px; }
.secadd__item small { font-size: 11px; display: block; }
.newpost__trades { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.newpost__trades button { height: 32px; padding: 0 12px; border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.newpost__trades button.is-on { background: var(--amn-black); border-color: var(--amn-black); color: #fff; }
.recipes { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.recipe { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--ink-14); border-radius: 12px; background: var(--amn-white); text-decoration: none; color: inherit; }
.recipe:hover { border-color: var(--amn-green); box-shadow: var(--shadow); }
.recipe b { font-size: 15px; }
.recipe small { color: var(--ink-62); font-size: 12.5px; }
.recipe__pages { display: flex; gap: 3px; margin-bottom: 6px; }
.recipe__pages i { width: 14px; height: 20px; border-radius: 2px; background: var(--amn-cream-deep); box-shadow: inset 0 0 0 1px var(--ink-08); }
.recipe__pages i.full { background: var(--amn-black); }
.recipe__pages i.blank { background: var(--amn-white); box-shadow: none; outline: 1.5px dashed var(--ink-45); outline-offset: -1.5px; }

/* -- Toolbar, reorganised (2026-10-13): a path on the left, one labelled group
   of controls for what's selected, then Arrange in a fixed place and ⋯. */
.crumbs { flex: none; display: inline-flex; align-items: center; margin-right: 10px; max-width: 46%; overflow: hidden; }
.crumbs i { font-style: normal; color: var(--ink-45); font-size: 12px; padding: 0 1px; flex: none; }
.crumbs__b { flex: 0 1 auto; min-width: 0; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; height: 30px; padding: 0 8px; border: 0; border-radius: 6px; background: none; color: var(--ink-62); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.crumbs__b:hover { background: var(--amn-cream); color: var(--amn-black); }
.crumbs__b.is-cur { flex: none; color: var(--amn-green-dark); font-weight: 700; background: var(--green-12); cursor: default; }
.ctx__slot { position: relative; flex: none; display: inline-flex; align-items: center; gap: 1px; margin-top: 12px; padding: 2px 4px; border-radius: 9px; background: var(--amn-cream); }
.ctx__slot > em { position: absolute; top: -15px; left: 6px; font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-62); white-space: nowrap; line-height: 1; }
.ctx__slot .ib { height: 30px; min-width: 30px; }
.ctx__slot .ib:hover:not(:disabled) { background: var(--amn-white); }
.ctx__slot .ctx__sep { height: 20px; margin: 0 3px; }
.ctx__slot .ctx__note { padding: 0 6px; }
.ctx__slot .ctx__sw { width: 22px; height: 22px; }
.ctx__style { flex: none; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; font-size: 13px; font-weight: 600; }
.ctx__style small { font-weight: 500; color: var(--ink-62); font-variant-numeric: tabular-nums; }
/* The style's name on the section bar opens its styles (2026-10-19). */
button.ctx__style { display: inline-flex; align-items: center; gap: 4px; height: 34px; padding: 0 8px; border: 0; border-radius: 7px; background: none; color: var(--amn-black); font-family: inherit; cursor: pointer; }
button.ctx__style:hover { background: var(--amn-cream); }
button.ctx__style svg.chev { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; opacity: .7; }
/* Small / Medium / Large for a section's logo. */
.ctx__seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 9px; background: var(--amn-cream); }
.ctx__seg .ib { height: 30px; }
.ctx__seg .ib.is-on { background: var(--amn-white, #fff); box-shadow: 0 1px 2px rgba(0,0,0,.12); color: var(--amn-black); }
.ctx__note--warn { color: var(--amn-green-dark); font-weight: 600; }
.ctx__moved { flex: none; margin: 0 2px 0 4px; padding: 2px 7px; border-radius: 5px; background: var(--green-12); color: var(--amn-green-dark); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ctx__tail { flex: none; display: inline-flex; align-items: center; margin-left: 6px; margin-top: 12px; }

/* + / − on a list item in a section, over the canvas. The box follows the
   item; only its two buttons take clicks. */
.itemctl { position: absolute; z-index: 5; pointer-events: none; line-height: normal; outline: 1px dashed rgba(251, 94, 0, .7); outline-offset: 3px; }
.itemctl[hidden] { display: none; }
.itemctl__btn { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--amn-green); color: #fff; cursor: pointer; pointer-events: auto; box-shadow: 0 1px 4px rgba(0, 0, 0, .28); }
.itemctl__btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.itemctl__btn--rm { top: -11px; right: -11px; background: var(--amn-black); }
.itemctl__btn--add { top: 50%; right: -11px; transform: translateY(-50%); }
.itemctl__btn:hover:not(:disabled) { filter: brightness(1.1); }
.itemctl__btn:disabled { opacity: .35; cursor: not-allowed; }
.itemctl__btn:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }

/* The width or angle by the pointer while resizing or turning (Canva-style). */
.xformtip { position: fixed; z-index: 80; pointer-events: none; padding: 3px 7px; border-radius: 6px; background: rgba(33, 39, 36, .9); color: #fff; font-size: 12px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xformtip[hidden] { display: none; }

/* ⋯ at the end of the selected section's label on the page */
.secmore { position: absolute; z-index: 6; display: grid; place-items: center; min-width: 26px; padding: 0 6px; border: 0; border-radius: 4px; background: #FB5E00; color: #fff; cursor: pointer; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.secmore[hidden] { display: none; }
.secmore svg { width: 15px; height: 15px; fill: currentColor; }
.secmore:hover { background: #E04F00; }
.secmore:focus-visible { outline: 2px solid var(--amn-black); outline-offset: 2px; }

/* Colour picker (as in Figma): square, hue strip, hex, eyedropper */
.cpick { display: grid; gap: 10px; padding: 6px 8px 8px; }
.cpick[hidden] { display: none; }
.cpick__sv { position: relative; height: 150px; border-radius: 8px; cursor: crosshair; touch-action: none;
  background: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, var(--hue, red)); }
.cpick__knob, .cpick__hknob { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); pointer-events: none; }
.cpick__row { display: flex; align-items: center; gap: 8px; }
.cpick__hue { position: relative; flex: 1; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none;
  background: linear-gradient(to right, #f00, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00); }
.cpick__hknob { top: 50%; background: transparent; }
.cpick__sv:focus-visible, .cpick__hue:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.cpick__eye { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--ink-14); border-radius: 7px; background: var(--amn-white); color: var(--amn-black); cursor: pointer; flex: none; }
.cpick__eye svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cpick__eye:hover { background: var(--amn-cream); }
.cpick__chip { width: 28px; height: 28px; border-radius: 7px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); flex: none; }
.cpick__hex { display: flex; align-items: center; gap: 2px; flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--ink-14); border-radius: 7px; font: 500 13px/1 var(--mono, ui-monospace, monospace); color: var(--ink-62); }
.cpick__hex:focus-within { border-color: var(--amn-green); box-shadow: 0 0 0 2px var(--green-12); }
.cpick__hex input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; color: var(--amn-black); text-transform: uppercase; }
.cpick__ok { height: 30px; padding: 0 12px; }
.cpick__warn { margin: 0; color: var(--danger); }
.pop__add[hidden] { display: none; }

/* --- Design tools (tools.js), 2026-10-15 ------------------------------------------------- */
/* The drawing bar: floats at the bottom of the page area, as FigJam's does. */
.drawbar { position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%); z-index: 6; display: flex; gap: 2px; padding: 5px; border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(22, 27, 24, .1), 0 10px 30px rgba(22, 27, 24, .16); border: 1px solid var(--ink-14); }
.drawbar button { width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 10px; background: none; color: var(--ink-62); cursor: pointer; }
.drawbar button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drawbar button:hover { background: var(--amn-cream); color: var(--amn-black); }
.drawbar button.is-on { background: var(--amn-black); color: #fff; }
/* Shapes, lines, graphics and frames in the library. */
.shapegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.shapebtn { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px; border: 1.5px solid var(--ink-14); border-radius: 10px; background: var(--amn-white); font: inherit; font-size: 11px; color: var(--ink-62); cursor: pointer; text-align: center; line-height: 1.2; }
.shapebtn svg { width: 46px; height: 46px; }
.shapebtn:hover { border-color: var(--ink-45); color: var(--amn-black); }
.shapebtn > svg:not([viewBox="0 0 60 60"]) { width: 30px; height: 30px; margin: 8px 0; fill: none; stroke: currentColor; stroke-width: 1.6; }
.library kbd { font: 600 11px ui-monospace, Menlo, monospace; padding: 1px 5px; border-radius: 4px; background: var(--amn-cream); border: 1px solid var(--ink-14); }
.myels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.myel { position: relative; }
.myel__add { width: 100%; display: grid; gap: 4px; padding: 6px; border: 1.5px solid var(--ink-14); border-radius: 10px; background: #fff; font: inherit; font-size: 11.5px; color: var(--ink-62); cursor: pointer; }
.myel__add img { width: 100%; height: 80px; object-fit: contain; background: var(--amn-cream); border-radius: 6px; }
.myel__del { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(22, 27, 24, .7); color: #fff; cursor: pointer; opacity: 0; }
.myel:hover .myel__del, .myel__del:focus-visible { opacity: 1; }
.fxsw { width: 22px; height: 22px; border-radius: 6px; background: var(--amn-cream); border: 1px solid var(--ink-14); flex: none; }
/* Sliders, rows and fields in popovers. */
/* A slider with a box to type the number (3A). */
.prange { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 4px 10px; font-size: 12.5px; color: var(--ink-62); }
.prange input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(#FB5E00, #FB5E00) 0 / var(--p, 100%) 100% no-repeat, var(--amn-wheat); cursor: pointer; }
.prange input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid #FB5E00; box-shadow: 0 1px 3px rgba(22, 27, 24, .25); }
.prange input[type=range]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid #FB5E00; }
.prange input[type=range]:focus-visible { outline: 2px solid #FB5E00; outline-offset: 4px; }
.prange__num { display: inline-flex; align-items: center; gap: 3px; }
.prange__num input { width: 52px; height: 28px; padding: 0 6px; border: 1.5px solid var(--ink-14); border-radius: 7px; font: inherit; font-size: 12.5px; color: var(--amn-black); text-align: right; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.prange__num input::-webkit-inner-spin-button, .prange__num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.prange__num input:focus { outline: none; border-color: #FB5E00; }
.prange__num i { font-style: normal; color: var(--ink-45); min-width: 12px; }
/* A labelled dropdown row (Blend). */
.prow { display: grid; grid-template-columns: 76px 1fr; align-items: center; gap: 10px; padding: 6px 10px; font-size: 12.5px; color: var(--ink-62); }
.pselect { height: 32px; width: 100%; padding: 0 30px 0 10px; border: 1.5px solid var(--ink-14); border-radius: 8px; font: inherit; font-size: 13px; color: var(--amn-black); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212724' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 8px center / 16px no-repeat; -webkit-appearance: none; appearance: none; cursor: pointer; }
.pselect:focus { outline: none; border-color: #FB5E00; }
/* Arrange as labelled tiles (4B), Delete on its own row. */
.atiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px; }
.atile { display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 58px; padding: 8px 2px; border: 0; border-radius: 9px; background: none; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--amn-black); cursor: pointer; }
.atile svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.atile svg .fillish { fill: currentColor; fill-opacity: .16; }
.atile:hover:not(:disabled) { background: var(--amn-cream); }
.atile.is-on { background: var(--green-12); color: var(--amn-green-dark); }
.atile:disabled { opacity: .35; cursor: not-allowed; }
.atiles__del { border-top: 1px solid var(--ink-08); margin-top: 6px; padding-top: 6px; }
.atiles__del .atile { display: flex; justify-content: center; width: 100%; min-height: 38px; gap: 8px; }
.atile--danger { color: var(--danger); }
.atile--danger:hover:not(:disabled) { background: rgba(162, 59, 42, .08); }
/* A whole section in the Design panel (1D). */
.sdesign { background: var(--amn-cream); border-radius: 10px; padding: 6px; display: grid; gap: 6px; }
.sdesign__nav { display: flex; align-items: center; gap: 2px; }
.sdesign__nav b { flex: 1; min-width: 0; text-align: center; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdesign__nav b small { color: var(--ink-45); font-weight: 500; font-size: 12px; }
.sdesign__all { height: 34px; border: 1px solid var(--ink-14); border-radius: 8px; background: #fff; font: inherit; font-size: 13px; font-weight: 600; color: var(--amn-black); cursor: pointer; }
.sdesign__all:hover { border-color: var(--ink-45); }
.sdesign__note { margin: 0 6px 8px; font-size: 13px; color: var(--ink-62); line-height: 1.45; }
.sdesign__note .linkbtn { font-size: 13px; }
/* Section settings, "Looks first" (2026-10-18): layout tiles, look previews, one line per setting. */
.slook { display: grid; gap: 6px; padding: 2px 0 4px; }
.slook h4 { margin: 8px 6px 0; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); }
.slook h4 small { font-size: 11.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-45); }
.slook__tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.slook__tile { display: grid; justify-items: center; gap: 3px; padding: 6px 2px 5px; border: 1.5px solid var(--ink-14); border-radius: 8px; background: #fff; font: inherit; font-size: 10.5px; font-weight: 600; line-height: 1.2; color: var(--amn-black); cursor: pointer; text-align: center; }
.slook__tile svg { width: 100%; max-width: 46px; height: 28px; }
.slook__tile:hover { border-color: var(--ink-45); }
.slook__tile.is-on { border-color: #FB5E00; background: #FFEDE2; color: #C44A00; }
.slook__looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 6px; }
.slook__look { display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.25; color: var(--amn-black); text-align: left; cursor: pointer; min-width: 0; }
.slook__look img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border: 1.5px solid var(--ink-14); border-radius: 7px; background: #fff; display: block; }
.slook__look:hover img { border-color: var(--ink-45); }
.slook__look.is-on img { border-color: #FB5E00; box-shadow: 0 0 0 2px #FFEDE2; }
.slook__look.is-on { color: #C44A00; }
.slook__again { justify-self: start; margin: 2px 0 0; }
.slook__again small { color: var(--ink-45); font-weight: 500; }
.slook__lines { display: grid; gap: 4px; }
.slook__line { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px; border: 0; border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; color: var(--amn-black); text-align: left; cursor: pointer; }
.slook__line:hover { box-shadow: inset 0 0 0 1px var(--ink-14); }
.slook__line b { font-weight: 600; }
.slook__ic { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--amn-cream); color: #C44A00; }
.slook__ic svg { width: 16px; height: 16px; }
.slook__val { margin-left: auto; min-width: 0; color: var(--ink-62); font-size: 12.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slook__val::after { content: "›"; display: inline-block; margin-left: 6px; font-size: 15px; transition: transform .15s; }
.slook__line[aria-expanded="true"] { border-radius: 8px 8px 0 0; }
.slook__line[aria-expanded="true"] .slook__val::after { transform: rotate(90deg); }
.slook__open { margin-top: -4px; padding: 4px 9px 10px; border-radius: 0 0 8px 8px; background: #fff; }
.slook__switches { display: grid; gap: 2px; }
.slook__switch { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border: 0; background: none; font: inherit; font-size: 13.5px; color: var(--amn-black); cursor: pointer; }
.slook__switch i { width: 32px; height: 18px; border-radius: 999px; background: var(--ink-14); position: relative; transition: background .15s; }
.slook__switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .15s; }
.slook__switch[aria-checked="true"] i { background: #FB5E00; }
.slook__switch[aria-checked="true"] i::after { transform: translateX(14px); }
.slook__swatches { display: flex; gap: 8px; padding: 4px 0; }
.slook__sw { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; display: grid; place-items: center; box-shadow: 0 0 0 1px var(--ink-14); }
.slook__sw i { width: 24px; height: 24px; border-radius: 50%; display: block; }
.slook__sw .slook__kit { background: conic-gradient(var(--ink-14) 0 25%, #fff 0 50%, var(--ink-14) 0 75%, #fff 0); }
.slook__sw.is-on { box-shadow: 0 0 0 2px #FB5E00; }
.slook__more, .slook__reset { justify-self: start; display: inline-flex; align-items: center; gap: 5px; padding: 4px 6px; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.slook__more:hover, .slook__reset:hover { color: var(--amn-black); }
.slook__reset .phi { width: 14px; height: 14px; }
.pop__ranges, .pop__corners { padding: 2px 0 6px; }
.pop__row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px 8px; }
.pop .seg { margin: 2px 8px 8px; flex-wrap: wrap; }
.duo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1.5px solid var(--ink-14); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; cursor: pointer; }
.duo i { width: 18px; height: 18px; border-radius: 4px; background: linear-gradient(135deg, var(--d) 50%, var(--l) 50%); }
.duo.is-on { border-color: #FB5E00; box-shadow: 0 0 0 2px rgba(251, 94, 0, .18); }
.xywh { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 10px 8px; }
.xywh label { display: grid; gap: 2px; font-size: 11px; font-weight: 600; color: var(--ink-62); }
.xywh input { width: 100%; height: 30px; padding: 0 6px; border: 1.5px solid var(--ink-14); border-radius: 7px; font: inherit; font-size: 12.5px; }
.xywh input:focus { outline: none; border-color: #FB5E00; }
.pop .check { padding: 2px 10px 8px; }
.dialog__area { min-height: 140px; font: 13px/1.5 ui-monospace, Menlo, monospace; resize: vertical; }
.dialog__field { width: 100%; padding: 8px 10px; border: 1.5px solid var(--ink-14); border-radius: 8px; margin: 4px 0 12px; }

/* --- Layout D (2026-10-15): floating bar, Design panel, folding sides ------------------- */
:root { --pages-w: 288px; }
.studio.no-layers { --pages-w: 0px; }
.studio.no-library { --lib-w: 0px; }
.studio.no-library .library { display: none; }
.rail__fold { margin-top: auto; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--ink-45); cursor: pointer; display: grid; place-items: center; }
.rail__fold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.rail__fold:hover { background: var(--amn-cream); color: var(--amn-black); }
.no-library .rail__fold svg { transform: rotate(180deg); }
.rail__fold + .rail__credit { margin-top: 0; }
/* The bar above the selection. */
.floatbar { position: absolute; z-index: 7; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 12px; background: var(--amn-white); border: 1px solid var(--ink-14); box-shadow: 0 2px 4px rgba(22, 27, 24, .08), 0 12px 28px rgba(22, 27, 24, .16); white-space: nowrap; line-height: normal; }
.floatbar .ctx__slot { padding: 0; background: none; }
.floatbar .ctx__slot > em { display: none; }
.floatbar__sep { width: 1px; height: 22px; background: var(--ink-14); margin: 0 4px; }
/* Too wide for the page: these show their icon only (name on hover). */
.floatbar--tight :is([data-action="secDetach"], [data-action="secUnlinkPiece"], [data-action="openDesign"], [data-pop="secPage"]) > span { display: none; }
/* The right panel: Design / Layers. */
.rtabs { display: flex; align-items: center; gap: 8px; }
.rtabs__tabs { flex: 1; display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: var(--amn-cream); }
.rtabs__tabs button { flex: 1; height: 30px; border: 0; border-radius: 7px; background: none; font: inherit; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.rtabs__tabs button.is-on { background: var(--amn-white); color: var(--amn-black); box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
.side__fold { width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--ink-62); cursor: pointer; display: grid; place-items: center; }
.side__fold svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.side__fold:hover { background: var(--amn-cream); color: var(--amn-black); }
.design { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 10px 24px; }
.design__empty { margin: 14px 6px; color: var(--ink-62); font-size: 13px; }
.dsec { border-top: 1px solid var(--ink-08); }
.dsec:first-child { border-top: 0; }
.dsec > summary { list-style: none; cursor: pointer; padding: 12px 6px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-62); display: flex; align-items: center; justify-content: space-between; }
.dsec > summary::-webkit-details-marker { display: none; }
.dsec > summary::after { content: ""; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform .15s; }
.dsec:not([open]) > summary::after { transform: rotate(-45deg); }
.dsec__body { padding: 0 0 10px; }
.dsec__body h4 { margin: 8px 6px 4px; font-size: 12px; font-weight: 600; color: var(--ink-62); text-transform: none; letter-spacing: 0; }
.dsec__row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 0 2px; }
.dsec__row .ctx__slot { flex-wrap: wrap; }
.dsec__row .ctx__slot > em { display: none; }
.dsec .prange, .dsec .prow { padding: 4px 4px; }
.dsec .pop__item { width: 100%; }
.dsec .seg { margin: 2px 4px 8px; }
.dsec .pop__swatches { padding: 4px 4px 8px; }
.dsec .xywh { padding: 4px 4px 8px; }
.floatbar .ctx__slot, .dsec__row .ctx__slot { margin-top: 0; }
.dsec__row .ctx__slot { background: var(--amn-cream); }

/* --- Top bar, rearranged (2026-10-15): name ⋯ | undo redo · status ··· View | zoom | Edit Preview | Download */
.bar { gap: 8px; }
.bar__name input { width: 240px; }
.bar__sep { width: 1px; height: 24px; background: var(--ink-14); margin: 0 4px; }
.bar__status { margin-left: 6px; }
.bar__actions { gap: 10px; }
.bar__view { gap: 6px; font-weight: 600; }
/* Pages / Spreads (2026-10-18): facing pages as the booklet opens. */
.pagespread { display: inline-flex; background: rgba(33, 39, 36, .06); border-radius: 9px; padding: 2px; gap: 2px; }
.pagespread button { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.pagespread button[aria-pressed="true"] { background: #fff; color: var(--amn-black); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.pagespread svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.pagespread[hidden] { display: none; }
.doc.doc--spreads { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; align-items: end; column-gap: 0; row-gap: 28px; }
.doc--spreads .docpage:first-child { grid-column: 2; }
.doc--spreads .docadd { grid-column: 1 / -1; justify-self: center; }
.doc--spreads .docpage:nth-child(even) .docpage__bar { padding-right: 12px; }
.doc--spreads .docpage:nth-child(odd):not(:first-child) .docpage__bar { padding-left: 12px; }
/* The fold, on screen only: a soft shadow on the inner edge of each page. */
/* Above the page being edited too (2026-10-19): it stayed on one page only, and swapped sides as you moved between them. */
.doc--spreads .docpage__sheet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 22px; pointer-events: none; z-index: 6; }
.doc--spreads .docpage:nth-child(even) .docpage__sheet::after { right: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .09)); }
.doc--spreads .docpage:nth-child(odd):not(:first-child) .docpage__sheet::after { left: 0; background: linear-gradient(270deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .09)); }
.doc--spreads .docpage:first-child .docpage__sheet::after { display: none; }
.bar__view svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
#viewBtn.is-on { background: var(--green-12); }
.menu__list--view { min-width: 300px; }
.menu__head { margin: 8px 12px 2px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); }
.menu__list .menu__btn { margin-top: 4px; }
/* The copyright line (replaces the old "Made with ♥ by Spark" credit, 2026-10-15). */
.menu__list .menu__credit { margin: 6px 12px 4px; padding-top: 8px; border-top: 1px solid var(--ink-08); font-size: 11.5px; line-height: 1.4; color: var(--ink-45); }
.menu__credit:hover, .credit__link:hover { color: var(--ink-45); }
/* Layers as one tree (2026-10-15): group folders, dropping into them, renaming. */
.lrow--folder { font-weight: 600; }
.lrow.drop-inside { background: rgba(251, 94, 0, .12); box-shadow: inset 0 0 0 1.5px #FB5E00; }
.lrow__input { width: 100%; height: 24px; padding: 0 6px; border: 1.5px solid #FB5E00; border-radius: 6px; font: inherit; font-weight: 500; }
.lrow .lrow__name small { font-weight: 400; color: var(--ink-62); }

/* --- Editor picks 1B · 2B · 3B · 4C · 5B (2026-10-15) ------------------------------------------ */
/* 1B: one bar only; the item's controls live in the floating bar and the Design panel. */
.studio {
  grid-template: var(--bar-h) minmax(0, 1fr) / var(--rail-w) var(--lib-w) minmax(0, 1fr) var(--pages-w);
  grid-template-areas: 'bar bar bar bar' 'rail lib stage pages';
}
.ctxbar { display: none; }
.design__path { padding: 10px 6px 2px; }
.design__path .ctx__crumbs { flex-wrap: wrap; }
/* The top bar in three parts: the key controls sit in the middle. */
.bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.bar__left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar__left .bar__name { min-width: 0; }
.bar__left .bar__name input { width: clamp(120px, 18vw, 240px); }
.bar__center { display: flex; align-items: center; gap: 6px; }
.bar__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: 0; }
.bar__status { overflow: hidden; text-overflow: ellipsis; }
.brandchip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 999px; border: 1px solid rgba(47, 125, 85, .3); background: rgba(47, 125, 85, .08); color: #2F7D55; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.brandchip i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.brandchip.is-off { border-color: rgba(201, 138, 20, .4); background: rgba(226, 165, 23, .12); color: #9A6A08; }
.bar__help svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
#helpMenu { min-width: 280px; }
/* 3B: icons on menu rows. */
.mico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.mico--none { display: inline-block; }
.pop__item { gap: 10px; }
.pop__item--danger .mico { opacity: 1; }
.menu__list > button, .menu__list > a { display: flex; align-items: flex-start; gap: 10px; }
.menu__list > button > svg, .menu__list > a > svg { width: 16px; height: 16px; flex: none; margin-top: 2px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
#exportMenu button { display: flex; align-items: flex-start; gap: 10px; }
#exportMenu button .mico { margin-top: 2px; }
/* 2B: the guided tour; tips only when switched on. */
.stage__hint { display: none; }
.tips-on .stage__hint { display: block; }
.tourspot { position: fixed; z-index: 90; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(18, 22, 20, .5), 0 0 0 2px #FB5E00; pointer-events: none; transition: left .25s var(--ease-out), top .25s var(--ease-out), width .25s var(--ease-out), height .25s var(--ease-out); }
.tourcard { position: fixed; z-index: 91; width: 300px; padding: 16px; border-radius: 14px; background: var(--amn-white); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); display: grid; gap: 6px; transition: left .25s var(--ease-out), top .25s var(--ease-out); }
.tourcard small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #FB5E00; }
.tourcard h3 { margin: 0; font-size: 17px; }
.tourcard p { margin: 0; color: var(--ink-62); font-size: 13.5px; line-height: 1.5; }
.tourcard__row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.tourcard__row .grow { flex: 1; }
@media (prefers-reduced-motion: reduce) { .tourspot, .tourcard { transition: none; } }
/* 4C: rulers along the edges of the work area. */
.stage.has-rulers .stage__scroll { top: 18px; left: 18px; }
.edgeruler { position: absolute; z-index: 5; cursor: crosshair; }
.edgeruler--h { top: 0; left: 18px; cursor: ns-resize; }
.edgeruler--v { top: 18px; left: 0; cursor: ew-resize; }
.edgeruler__corner { position: absolute; z-index: 5; top: 0; left: 0; width: 18px; height: 18px; background: #FAF8F3; border-right: 1px solid rgba(33, 39, 36, .14); border-bottom: 1px solid rgba(33, 39, 36, .14); }
.stage:not(.has-rulers) .edgeruler__corner { display: none; }
/* 5B: no orange frame; the page you're on has a deeper shadow and a dark label. */
.docpage.is-active .docpage__sheet { outline-color: transparent; box-shadow: 0 4px 10px rgba(22, 27, 24, .1), 0 30px 70px rgba(22, 27, 24, .24); }
/* Spreads (2026-10-21): the opening lifts as one. The deeper shadow on the live page alone made it look longer at the bottom than its facing page (the user: "the left page when I select has a longer bottom"); the sheets were the same size. */
.doc--spreads .docpage.is-facing .docpage__sheet { box-shadow: 0 4px 10px rgba(22, 27, 24, .1), 0 30px 70px rgba(22, 27, 24, .24); }
.docpage__sheet { transition: box-shadow .2s ease, outline-color .15s; }
.docpage:not(.is-active) .docpage__sheet:hover { outline-color: rgba(33, 39, 36, .18); }
.docpage:not(.is-active) .docpage__title { color: var(--ink-62); font-weight: 500; }
.docpage:not(.is-active) .docpage__bar button { opacity: .55; }
/* The path and quick controls inside the Design panel: wrap, never clip. */
.design__path .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; max-width: none; }
.design__path .crumbs__b { max-width: none; white-space: normal; text-align: left; }
.dsec__row .ctx__slot { max-width: 100%; min-width: 0; }
.dsec__row .ctx__style { flex: 1 1 auto; min-width: 0; max-width: none; white-space: normal; }
/* Renaming a page above it. */
.docpage__title { cursor: text; }
.docpage__rename { margin-left: 8px; width: min(320px, 60%); height: 26px; padding: 0 8px; border: 1.5px solid #FB5E00; border-radius: 6px; font: inherit; font-weight: 500; background: var(--amn-white); }
/* Top-left tidied (2026-10-15): one home button (back arrow + mark), the name gets the room, short save status. */
.bar__home { display: inline-flex; align-items: center; gap: 2px; height: 40px; padding: 0 6px 0 4px; border-radius: 10px; color: var(--ink-62); text-decoration: none; flex: none; }
.bar__home:hover { background: var(--amn-cream); color: var(--amn-black); }
.bar__home svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bar__home img { width: 30px; height: 30px; border-radius: 7px; display: block; }
.bar__left { gap: 4px; }
.bar__left .bar__name { flex: 0 1 auto; padding-left: 6px; border-left: 1px solid var(--ink-08); }
.bar__left .bar__name input { width: clamp(140px, 22vw, 320px); text-overflow: ellipsis; }
.bar__status { flex: none; font-size: 12.5px; margin-left: 2px; }
/* The brand state now sits at the top of the Brand tab; the tab gets a dot when off brand. */
.brandstate { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 12px; padding: 10px 12px; border-radius: 10px; background: rgba(47, 125, 85, .08); border: 1px solid rgba(47, 125, 85, .25); }
.brandstate i { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #2F7D55; }
.brandstate b { display: block; font-size: 13px; color: #2F7D55; }
.brandstate small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--ink-62); }
.brandstate.is-off { background: rgba(251, 94, 0, .08); border-color: rgba(251, 94, 0, .3); }
.brandstate.is-off i { background: #FB5E00; }
.brandstate.is-off b { color: #C24A00; }
.rail__tab[data-tab="brand"] { position: relative; }
.rail__tab.is-offbrand::after { content: ''; position: absolute; top: 8px; right: 14px; width: 8px; height: 8px; border-radius: 50%; background: #FB5E00; box-shadow: 0 0 0 2px var(--amn-white); }
.check kbd { font: 600 10.5px/1 'DM Sans', sans-serif; padding: 2px 5px; border-radius: 4px; background: var(--ink-08); color: var(--ink-62); }
/* The floating bar's display: flex beat its hidden attribute, leaving an empty
   white pill (a "dot") at the page's bottom-left corner on first open. */
.floatbar[hidden] { display: none !important; }
/* Messages sit at the bottom right (2026-10-15), clear of the drawing bar in the middle. */
.toast { left: auto; right: 20px; bottom: 20px; transform: none; max-width: min(420px, calc(100vw - 40px)); border-radius: 14px; font-size: 14px; line-height: 1.4; }
/* The scroll area runs to the bottom (2026-10-15): the strip kept for the hint
   line was left empty once the hint went behind the tips toggle. */
body:not(.tips-on) .stage__scroll { bottom: 0; }
/* Preview zoom (2026-10-15): − 100% + beside the page arrows; zoomed in, the stage scrolls. */
.flip__zoom { display: inline-flex; align-items: center; gap: 2px; margin-left: 10px; padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .14); }
.flip--light .flip__zoom { border-left-color: rgba(22, 27, 24, .14); }
.flip__pct { min-width: 54px; height: 34px; border: 0; border-radius: 8px; background: none; color: inherit; font: inherit; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer; }
.flip__pct:hover { background: rgba(255, 255, 255, .08); }
.flip--light .flip__pct:hover { background: rgba(22, 27, 24, .06); }
.flip__stage.is-zoomed { display: block; overflow: auto; padding: 16px 32px 32px; }
.flip__stage.is-zoomed .flip__book { margin: 0 auto; animation: none; }
.dsec__body > .btn--block { width: calc(100% - 8px); margin: 0 4px 6px; }

/* One colour picker, floating beside its panel (7A). */
.cpop { position: fixed; z-index: 60; width: 272px; padding: 12px; border-radius: 14px; background: var(--amn-white); border: 1px solid var(--ink-14); box-shadow: 0 2px 6px rgba(22, 27, 24, .08), 0 18px 40px rgba(22, 27, 24, .2); display: grid; gap: 10px; }
.cpop__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cpop__head b { font-size: 14px; }
.cpop__done { height: 30px; padding: 0 14px; font-size: 13px; }
.cpop__note { margin: -4px 0 0; font-size: 12px; color: var(--ink-62); }
.cpop__sws { display: flex; flex-wrap: wrap; gap: 6px; }
.cpop__sws .swatch { width: 26px; height: 26px; }
.cpop .cpick { padding: 0; }
.cpop__hint { margin: 0; font-size: 11.5px; color: var(--ink-45); }
/* Text styles in their own look (2A). */
.tstyles { display: grid; gap: 1px; padding: 2px 4px 6px; min-width: 240px; }
.tstyle { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--amn-black); text-align: left; cursor: pointer; line-height: 1.15; }
.tstyle span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tstyle small { flex: none; font: 500 11.5px var(--font, 'DM Sans'), sans-serif; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.tstyle:hover { background: var(--amn-cream); }
.tstyle.is-on { background: var(--green-12); }
.tstyle.is-on small { color: var(--amn-green-dark); }
.tdesign { display: grid; gap: 8px; padding: 0 4px 4px; }
.tdesign__row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tdesign__style { flex: 1; min-width: 120px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; height: 36px; padding: 0 28px 0 10px; border: 1.5px solid var(--ink-14); border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--amn-black); cursor: pointer; text-align: left; line-height: 33px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23212724' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 8px center / 16px no-repeat; }
.tdesign__style span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdesign__style:hover, .tdesign__style[aria-expanded="true"] { border-color: #FB5E00; }
.tdesign .seg { margin: 0; flex-wrap: nowrap; gap: 3px; padding: 3px; border-radius: 9px; background: var(--amn-cream); }
.tdesign .seg button { flex: 1; height: 30px; padding: 0 4px; border: 0; border-radius: 7px; background: none; font-size: 12.5px; color: var(--ink-62); }
.tdesign .seg button.is-active { background: #fff; color: var(--amn-black); box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
.tdesign .ctx__slot { background: var(--amn-cream); }
.tdesign__reset { justify-self: start; font-size: 12.5px; }
/* The selected icon, large, above its look tiles (9A). */
.icobig { display: flex; align-items: center; gap: 12px; margin: 2px 4px 4px; padding: 10px; border-radius: 10px; background: var(--amn-cream); font-size: 13px; font-weight: 600; }
.icobig small { display: block; font-weight: 400; font-size: 12px; color: var(--ink-62); }
.icobig .icostyle__ico { width: 64px; height: 64px; background: #fff; flex: none; }
.icobig.icostyle--circle .icostyle__ico, .icobig.icostyle--square .icostyle__ico { background: var(--ic); }
.icobig.icostyle--soft .icostyle__ico { background: color-mix(in srgb, var(--ic) 18%, #fff); }
.icobig .icostyle__ico svg { width: 36px; height: 36px; }
.icobig.icostyle--plain .icostyle__ico svg { width: 48px; height: 48px; }
.dsec .icostyles, .dsec .icoweights { padding: 0 4px; }
.dsec .icoall { width: calc(100% - 8px); margin: 10px 4px 4px; }
.icolook { margin-top: 14px; }
/* The Text tab: each style as it looks (10A). */
.textlook { display: grid; gap: 2px; margin: 0 -8px; }
.textlook__item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; color: var(--amn-black); text-align: left; cursor: pointer; line-height: 1.1; }
.textlook__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.textlook__item small { flex: none; font-size: 11.5px; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.textlook__item:hover { background: var(--amn-cream); }
.textlook__item:hover small { color: var(--ink-62); }
.textlook__item--label span { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.textlook__item--label span::before { content: ""; width: 3px; height: 13px; border-radius: 2px; background: var(--bar); }
/* Fonts in the Brand tab (6A). */
.fontslots { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fontslot { display: grid; gap: 2px; padding: 9px 10px; border: 1.5px solid var(--ink-14); border-radius: 10px; background: var(--amn-white); text-align: left; cursor: pointer; color: var(--amn-black); min-width: 0; }
.fontslot small { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); }
.fontslot b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontslot.is-on { border-color: #FB5E00; box-shadow: 0 0 0 3px var(--green-12); }
.fontfeels { flex-wrap: nowrap; gap: 3px; padding: 3px; margin: 10px 0 6px; border-radius: 9px; background: var(--amn-cream); }
.fontfeels button { flex: 1; height: 30px; padding: 0 4px; border: 0; border-radius: 7px; background: none; font-size: 12.5px; color: var(--ink-62); }
.fontfeels button.is-active { background: #fff; color: var(--amn-black); border: 0; box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
.fontlist { display: grid; gap: 2px; margin: 0 -8px; }
.fontcard { display: grid; gap: 1px; padding: 8px 10px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; color: var(--amn-black); min-width: 0; }
.fontcard b { font-size: 19px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fontcard small { font-size: 11.5px; color: var(--ink-45); }
.fontcard:hover { background: var(--amn-cream); }
.fontcard.is-on { background: var(--green-12); }
.fontcard.is-on small { color: var(--amn-green-dark); }
.fontown__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.fontown__row .ib { opacity: 0; }
.fontown__row:hover .ib, .fontown__row .ib:focus-visible { opacity: 1; }
.fontown__add { margin-top: 6px; }
.fontsearch { margin: 4px 0 6px; }
.fontpicks { margin-top: 8px; }
/* Chart and table data as a small spreadsheet with a live preview (8A). */
.dialog--wide .dataedit { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 760px) { .dialog--wide .dataedit { grid-template-columns: 1fr; } }
.dgrid { border: 1px solid var(--ink-14); border-radius: 10px; overflow: hidden; background: #fff; }
.dgrid__scroll { overflow: auto; max-height: 46vh; }
.dgrid table { border-collapse: collapse; width: 100%; font-size: 13px; }
.dgrid th { position: sticky; top: 0; z-index: 1; background: var(--amn-cream); text-align: left; font-size: 12px; font-weight: 700; color: var(--ink-62); padding: 7px 8px; border-bottom: 1px solid var(--ink-14); }
.dgrid td { border-bottom: 1px solid var(--ink-08); border-right: 1px solid var(--ink-08); padding: 0; }
.dgrid td:last-child { border-right: 0; width: 34px; text-align: center; }
.dgrid__n { width: 42px; min-width: 42px; text-align: center; font-size: 11px; color: var(--ink-45); background: var(--amn-desert); font-variant-numeric: tabular-nums; }
.dgrid input { width: 100%; min-width: 90px; height: 34px; padding: 0 9px; border: 0; background: none; font: inherit; color: var(--amn-black); font-variant-numeric: tabular-nums; }
.dgrid input:focus { outline: none; box-shadow: inset 0 0 0 2px #FB5E00; background: var(--green-12); }
.dgrid tr.is-head input { font-weight: 700; background: var(--amn-cream); }
.dgrid tr.is-head .dgrid__n { font-weight: 700; color: var(--ink-62); }
.dgrid__del { width: 26px; height: 26px; border: 0; border-radius: 6px; background: none; color: var(--ink-45); font-size: 16px; cursor: pointer; }
.dgrid__del:hover:not(:disabled) { background: rgba(162, 59, 42, .1); color: var(--danger); }
.dgrid__del:disabled { opacity: .25; cursor: default; }
.dgrid__foot { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px; background: var(--amn-desert); border-top: 1px solid var(--ink-08); }
.dgrid__foot .btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; font-size: 13px; }
.dataedit__prev { margin: 0; padding: 12px; border-radius: 10px; background: var(--amn-cream); display: grid; gap: 8px; }
.dataedit__prev figcaption { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-62); }
.dataedit__prev img { width: 100%; height: auto; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(22, 27, 24, .1); }
.dataedit__prev img:not([src]) { min-height: 80px; }
/* The right panel folded: a slim strip stays on the edge. */
.studio.no-layers { --pages-w: 56px; }
.studio.no-layers .layers { display: block; padding: 10px 0; overflow: hidden; }
.rstrip { display: grid; justify-items: center; gap: 6px; }
.rstrip button { width: 46px; display: grid; justify-items: center; gap: 3px; padding: 8px 0 6px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 10.5px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.rstrip button:hover { background: var(--amn-cream); color: var(--amn-black); }
.rstrip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* The Content tab and its focus mode (12A). */
.rail__sep { width: 32px; height: 1px; margin: 2px auto; background: var(--ink-08); }
.studio:not(:has(#contentTab:not([hidden]))) .rail__sep { display: none; }
.cfocus__open { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cfocus__open svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.csearch { margin: 10px 0 4px; }
.cres { display: grid; gap: 2px; margin: 4px -8px 8px; }
.cres button { display: grid; gap: 1px; padding: 7px 10px; border: 0; border-radius: 8px; background: none; text-align: left; font: inherit; font-size: 13px; color: var(--amn-black); cursor: pointer; }
.cres button:hover { background: var(--amn-cream); }
.cres small { font-size: 11px; font-weight: 600; color: var(--ink-45); }
.cres span { color: var(--ink-62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cres mark { background: var(--green-12); color: var(--amn-green-dark); border-radius: 3px; padding: 0 1px; }
.cpage { position: sticky; top: -16px; z-index: 2; display: flex; align-items: center; gap: 6px; margin: 12px -4px 8px; padding: 8px 4px; background: var(--amn-white); border-bottom: 1px solid var(--ink-08); }
.cpage__go { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border: 1px solid var(--ink-14); border-radius: 8px; background: #fff; color: var(--amn-black); cursor: pointer; }
.cpage__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cpage__go:disabled { opacity: .35; cursor: default; }
.cpage__go:hover:not(:disabled) { border-color: var(--ink-45); }
.cpage__name { flex: 1; min-width: 0; text-align: center; display: grid; line-height: 1.25; }
.cpage__name b { font-size: 14px; }
.cpage__name b small { font-weight: 500; color: var(--ink-45); }
.cpage__name span { font-size: 12px; color: var(--ink-62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cgroup { border-radius: 10px; background: var(--amn-desert); border: 1px solid var(--ink-08); margin-bottom: 10px; }
.cgroup > summary { list-style: none; cursor: pointer; padding: 10px 12px; font-weight: 600; font-size: 13.5px; display: flex; align-items: center; gap: 8px; }
.cgroup > summary::-webkit-details-marker, .chidden > summary::-webkit-details-marker { display: none; }
.cgroup > summary::before, .chidden > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--ink-45); border-bottom: 1.6px solid var(--ink-45); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.cgroup[open] > summary::before, .chidden[open] > summary::before { transform: rotate(45deg); }
.cgroup > summary small { margin-left: auto; font-weight: 500; font-size: 11.5px; color: var(--ink-45); }
.cgroup__body { display: grid; gap: 10px; padding: 0 12px 12px; }
.csec { display: grid; gap: 10px; padding: 12px 0 16px; border-top: 1px solid var(--ink-08); }
.csec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--amn-black); font: inherit; }
.csec__head b { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.csec__head small { font-size: 11.5px; color: var(--ink-45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csec__head:hover b { color: var(--amn-green-dark); }
.cfield { display: grid; gap: 4px; font-size: 12px; color: var(--ink-62); }
.cfield > span { display: flex; justify-content: space-between; gap: 8px; font-weight: 600; }
.cfield em { font-style: normal; font-weight: 400; color: var(--ink-45); font-variant-numeric: tabular-nums; }
.cfield input, .cfield textarea { width: 100%; padding: 7px 9px; border: 1.5px solid var(--ink-14); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; line-height: 1.45; color: var(--amn-black); resize: vertical; }
.cfield input:focus, .cfield textarea:focus { outline: none; border-color: #FB5E00; box-shadow: 0 0 0 3px var(--green-12); }
.cfield.is-on input, .cfield.is-on textarea { border-color: #FB5E00; }
.citem { display: grid; gap: 8px; padding: 10px; border-radius: 10px; background: var(--amn-desert); }
.citem > b { font-size: 12.5px; }
.chidden { border-radius: 10px; border: 1px dashed var(--ink-14); }
.chidden > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink-62); display: flex; align-items: center; gap: 8px; }
.chidden > summary small { margin-left: auto; font-weight: 500; color: var(--ink-45); }
.chidden[open] { display: grid; gap: 10px; padding-bottom: 12px; }
.chidden[open] > :not(summary) { margin: 0 12px; }
.cnote { margin: 0; font-size: 12px; color: var(--ink-45); line-height: 1.45; }
.cwarn { margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(162, 59, 42, .08); color: var(--danger); font-size: 12.5px; font-weight: 600; }
/* Write (2026-10-16): the words view under the editor's own bar, a third mode
   beside Design and Preview. Zoom and View don't apply while writing. */
.cfocus { position: fixed; inset: var(--bar-h) 0 0 0; z-index: 80; display: grid; grid-template-rows: minmax(0, 1fr); background: var(--amn-desert); }
body.is-writing .bar { position: relative; z-index: 85; }
body.is-writing .bar .zoom, body.is-writing #viewBtn, body.is-writing .bar__view, body.is-writing .pagespread { visibility: hidden; }
.bar__wvprev[hidden] { display: none; }
.bar__wvprev.is-on { background: var(--green-12); color: var(--amn-green-dark); }
.cfocus__bar { display: flex; align-items: center; gap: 16px; padding: 12px 20px; background: var(--amn-white); border-bottom: 1px solid var(--ink-08); }
.cfocus__bar b { font-size: 16px; }
.cfocus__bar span { color: var(--ink-62); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cfocus__bar .wv__toggle { margin-left: auto; }
.cfocus__body { overflow-y: auto; padding: 8px 20px 60px; }

/* List items as cards (2026-10-16): closed to one line, open with a click;
   Earlier / Later / Duplicate / Remove on each, Add after the list. Items the
   style doesn't show stay in their place, greyed. */
.ccard { border-radius: 10px; background: var(--amn-white); border: 1px solid var(--ink-08); }
.ccard > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 7px 8px 7px 12px; min-height: 40px; }
.ccard > summary::-webkit-details-marker { display: none; }
.ccard > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid var(--ink-45); border-bottom: 1.6px solid var(--ink-45); transform: rotate(-45deg); transition: transform .15s; flex: none; }
.ccard[open] > summary::before { transform: rotate(45deg); }
.ccard[open] > summary { border-bottom: 1px solid var(--ink-08); }
.ccard__name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.ccard__name b { font-size: 13.5px; font-weight: 600; color: var(--amn-black); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccard__name em, .cfield--entry em { font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--ink-45); white-space: nowrap; }
.ccard.is-off > summary .ccard__name b, .cfield--entry.is-off input { color: var(--ink-45); }
.ccard__body { display: grid; gap: 10px; padding: 10px 12px 12px; }
/* Tick to show (a style on the section contract shows a set number). */
.cshows { margin-top: 2px; }
/* The contract's word guide: quiet, and a warning colour when well past it. */
.cfield--long em { color: #9A5B00; font-weight: 600; }
.cfield--long input, .cfield--long textarea { border-color: #E0A043; }
/* The example shows in an empty box; under a filled one only while typing. */
.cfit { display: block; height: 4px; border-radius: 2px; background: var(--ink-08); overflow: hidden; }
.cfit i { display: block; height: 100%; border-radius: 2px; background: #2F7A4F; transition: width .15s; }
.cfit.is-over i { background: #E0A043; }
.cfield__hint { display: none; font-size: 11.5px; color: var(--ink-45); }
.cfield:focus-within .cfield__hint { display: block; }
/* The narrow Content tab: a card's buttons show on hover or when it's open,
   so its name has room; greyed means not on the page. */
.library .ccard__name em { display: none; }
.library .ccard > summary { padding-left: 8px; gap: 6px; }
.library .ccard .cacts { display: none; }
.library .ccard:hover > summary .cacts, .library .ccard[open] > summary .cacts, .library .ccard > summary:focus-within .cacts { display: inline-flex; }
.cacts { display: inline-flex; gap: 2px; flex: none; }
.cact { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-62); cursor: pointer; }
.cact svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cact:hover:not(:disabled) { background: var(--ink-08); color: var(--amn-black); }
.cact[data-cop="remove"]:hover:not(:disabled) { color: var(--danger); }
.cact:disabled { opacity: .3; cursor: default; }
.cact:focus-visible, .cadd:focus-visible, .cicon:focus-visible { outline: 2px solid #FB5E00; outline-offset: 1px; }
.centry { display: flex; align-items: center; gap: 4px; }
.centry input { flex: 1; min-width: 0; }
.cadd { justify-self: start; padding: 7px 12px; border: 1.5px dashed var(--ink-14); border-radius: 9px; background: none; color: var(--amn-green-dark); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.cadd:hover { border-color: #FB5E00; background: var(--green-12); }
.cicon { display: inline-flex; align-items: center; gap: 8px; justify-self: start; padding: 5px 10px 5px 6px; border: 1.5px solid var(--ink-14); border-radius: 8px; background: #fff; font: inherit; font-size: 13.5px; color: var(--amn-black); cursor: pointer; }
.cicon i { width: 26px; height: 26px; border-radius: 50%; background: var(--amn-desert); display: grid; place-items: center; }
.cicon i svg { width: 16px; height: 16px; fill: currentColor; }
.cicon b { font-weight: 500; }
.cicon small { color: var(--amn-green-dark); font-weight: 600; font-size: 12px; }
.cicopop { position: fixed; z-index: 95; width: 320px; padding: 10px; display: grid; gap: 8px; background: var(--amn-white); border: 1px solid var(--ink-14); border-radius: 12px; box-shadow: var(--shadow); }
.cicopop input { padding: 7px 10px; border: 1.5px solid var(--ink-14); border-radius: 8px; font: inherit; font-size: 13.5px; }
.cicopop__grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; max-height: 260px; overflow-y: auto; }
.cicopop__grid button { aspect-ratio: 1; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; cursor: pointer; color: var(--amn-black); }
.cicopop__grid button:hover { background: var(--green-12); color: var(--amn-green-dark); }
.cicopop__grid svg { width: 20px; height: 20px; fill: currentColor; }

/* The words view: outline | the whole statement's words | the live page. */
.wv { display: grid; grid-template-columns: 220px minmax(0, 1fr) var(--wvprev, 460px); min-height: 0; }
.wv--noprev { grid-template-columns: 220px minmax(0, 1fr); }
.wv--noprev .wv__prev { display: none; }
.wv__nav { overflow-y: auto; padding: 14px 10px 40px; border-right: 1px solid var(--ink-08); background: var(--amn-white); display: flex; flex-direction: column; gap: 1px; font-size: 13px; }
.wv__nav a { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 10px; border-radius: 7px; color: var(--amn-black); text-decoration: none; }
.wv__nav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv__nav a small { color: var(--ink-45); font-variant-numeric: tabular-nums; }
.wv__nav a:hover { background: var(--amn-desert); }
.wv__nav a.is-on { background: var(--green-12); color: var(--amn-green-dark); font-weight: 600; }
.wv__pg { margin: 12px 10px 3px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); }
.wv__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex: none; }
.wv .cform--big { max-width: 720px; margin: 0 auto; }
.wv__page { display: grid; gap: 0; padding-top: 14px; }
.wv__ph { margin: 6px 0 2px; font-size: 18px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.wv__ph small { font-size: 12px; font-weight: 500; color: var(--ink-45); }
.wv__prev { position: relative; overflow-y: auto; padding: 16px; border-left: 1px solid var(--ink-08); display: grid; gap: 10px; align-content: start; }
.wv__prevhead { font-size: 13px; display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.wv__prevhead span { color: var(--ink-62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wv__sheet { position: relative; line-height: 0; box-shadow: 0 2px 6px rgba(22, 27, 24, .08), 0 14px 34px rgba(22, 27, 24, .12); background: #fff; }
.wv__sheet img { width: 100%; display: block; }
.wv__drag { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; padding: 0; border: 0; background: none; cursor: col-resize; z-index: 2; }
.wv__drag::after { content: ""; position: absolute; left: 3px; top: 50%; width: 4px; height: 44px; margin-top: -22px; border-radius: 2px; background: var(--ink-14); }
.wv__drag:hover::after, .wv__drag:focus-visible::after { background: #FB5E00; }
.wv__hl { position: absolute; outline: 2px solid #FB5E00; outline-offset: 2px; border-radius: 2px; pointer-events: none; transition: left var(--t-fast) var(--ease-out), top var(--t-fast) var(--ease-out), width var(--t-fast) var(--ease-out), height var(--t-fast) var(--ease-out); }
@media (max-width: 1100px) { .wv { grid-template-columns: minmax(0, 1fr) 300px; } .wv--noprev { grid-template-columns: minmax(0, 1fr); } .wv__nav { display: none; } }
@media (max-width: 760px) { .wv, .wv--noprev { grid-template-columns: minmax(0, 1fr); } .wv__prev { display: none; } }
.cform--big { max-width: 720px; margin: 0 auto; }
.cform--big .cpage { top: -8px; background: var(--amn-desert); }
.cform--big .cfield { font-size: 13px; }
.cform--big .cfield input, .cform--big .cfield textarea { font-size: 16px; line-height: 1.6; padding: 10px 12px; }
.cform--big .citem, .cform--big .cgroup { background: var(--amn-white); }
/* Brand first: three steps for a new statement (5A). */
.bsetup { position: fixed; z-index: 70; left: calc(var(--rail-w) + 12px); top: calc(var(--bar-h) + 12px); width: min(400px, calc(100vw - var(--rail-w) - 24px)); max-height: calc(100vh - var(--bar-h) - 24px); overflow-y: auto; padding: 18px 20px 16px; border-radius: 16px; background: var(--amn-white); border: 1px solid var(--ink-08); box-shadow: 0 4px 10px rgba(22, 27, 24, .08), 0 24px 60px rgba(22, 27, 24, .22); display: grid; gap: 10px; }
.bsetup__head { display: flex; align-items: center; gap: 10px; }
.bsetup__steps { display: flex; gap: 5px; }
.bsetup__steps i { width: 26px; height: 4px; border-radius: 4px; background: var(--amn-wheat); }
.bsetup__steps i.is-on { background: #FB5E00; }
.bsetup__head small { font-size: 12px; font-weight: 600; color: var(--ink-62); }
.bsetup__x { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; font-size: 20px; line-height: 1; color: var(--ink-62); cursor: pointer; }
.bsetup__x:hover { background: var(--amn-cream); }
.bsetup h2 { margin: 2px 0 0; font-size: 21px; }
.bsetup__lead { margin: 0; color: var(--ink-62); font-size: 14px; line-height: 1.5; }
.bsetup__body { display: grid; gap: 10px; }
.bsetup__name { margin-bottom: 4px; }
.bsetup__name input { font-size: 15px; padding: 9px 11px; }
.bsetup__logo { height: 110px; display: grid; place-items: center; border-radius: 12px; background: var(--amn-desert); border: 1px dashed var(--ink-14); color: var(--ink-45); }
.bsetup__logo img { max-width: 70%; max-height: 80px; object-fit: contain; }
.bsetup__upload { cursor: pointer; }
.bsetup__suggest { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1.5px solid #FB5E00; border-radius: 10px; background: var(--green-12); font: inherit; font-size: 13.5px; color: var(--amn-black); cursor: pointer; text-align: left; }
.bsetup__suggest span { display: flex; }
.bsetup__suggest i { width: 18px; height: 18px; border-radius: 50%; margin-right: -5px; border: 2px solid #fff; }
.bsetup .kitpresets { margin: 0; }
.bsetup .kitslot { margin: 0; width: 100%; }
.bsetup .fontlist { margin: 0; }
.bsetup__foot { position: sticky; bottom: -16px; display: flex; align-items: center; gap: 8px; margin: 4px -20px -16px; padding: 12px 20px; background: var(--amn-white); border-top: 1px solid var(--ink-08); }
.bsetup__foot span { flex: 1; }
.bsetup__foot .linkbtn { font-size: 13px; }
/* View menu: a setting that belongs to the one above it. */
.check--sub { margin-left: 26px; }
.menu__btn kbd { font: 600 10.5px/1 'DM Sans', sans-serif; padding: 2px 5px; border-radius: 4px; background: var(--ink-08); color: var(--ink-62); margin-left: 6px; }

/* View menu: Grid and Safe margins with their own settings. */
.vrow { display: flex; align-items: center; gap: 4px; }
.vrow .check { flex: 1; }
.vrow__set { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--ink-62); cursor: pointer; }
.vrow__set:hover, .vrow__set[aria-expanded="true"] { background: var(--amn-cream); color: var(--amn-black); }
.vrow__set svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.vset { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; margin: 0 8px 8px 36px; padding: 10px; border-radius: 9px; background: var(--amn-desert); font-size: 12.5px; color: var(--ink-62); }
.vset[hidden] { display: none; }
.vset__step { display: inline-flex; align-items: center; border: 1.5px solid var(--ink-14); border-radius: 8px; background: #fff; }
.vset__step button { width: 26px; height: 28px; border: 0; background: none; font-size: 15px; color: var(--amn-black); cursor: pointer; }
.vset__step input { width: 36px; height: 28px; border: 0; text-align: center; font: inherit; color: var(--amn-black); -moz-appearance: textfield; }
.vset input::-webkit-inner-spin-button { -webkit-appearance: none; }
.vset__num { display: inline-flex; align-items: center; gap: 4px; }
.vset__num input { width: 56px; height: 28px; padding: 0 6px; border: 1.5px solid var(--ink-14); border-radius: 7px; text-align: right; font: inherit; color: var(--amn-black); -moz-appearance: textfield; }
.vset__num i { font-style: normal; color: var(--ink-45); }
.vset input:focus { outline: none; border-color: #FB5E00; }
.vset__reset { grid-column: 1 / -1; justify-self: start; border: 0; background: none; padding: 4px 6px; margin-left: -6px; border-radius: 6px; font: inherit; color: var(--ink-62); cursor: pointer; }
.vset__reset:hover { background: var(--amn-cream); color: var(--amn-black); }
/* (The menu's own button style would stretch these.) */
.menu__list .vrow__set { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; }
.menu__list .vset__step button { width: 26px; height: 28px; padding: 0; display: grid; place-items: center; border-radius: 6px; }
.menu__list .vset__reset { width: auto; padding: 4px 6px; }
.vrow .check { min-width: 0; }
.vrow .check span { white-space: nowrap; }

/* Phosphor icons on the editor's own controls. */
.phi { width: 16px; height: 16px; fill: currentColor; flex: none; display: inline-block; vertical-align: -3px; }
.btn--icon { display: inline-flex; align-items: center; gap: 6px; }
.btn--icon .phi { width: 14px; height: 14px; }
.pop__plus .phi { width: 14px; height: 14px; }
.secrow__btn .phi, .bsetup__x .phi, .secadd__head .phi, .dgrid__del .phi, .myel__del .phi, .vset__step .phi { width: 14px; height: 14px; }
.pick__img--blank .phi { width: 28px; height: 28px; }

/* Grid settings: shaded columns (Figma) or lines, and the gap. */
.vset__seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: var(--amn-cream); }
.menu__list .vset__seg button { width: auto; padding: 4px 9px; border-radius: 6px; font-size: 12px; color: var(--ink-62); }
.menu__list .vset__seg button.is-on { background: #fff; color: var(--amn-black); box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
#gridGutterRow[hidden] + #gridGutterBox { display: none; }

/* --- Pictures instead of words, quiet actions instead of links (2026-10-16) --- */
.pic { width: 34px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ptiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 2px 4px 6px; }
.ptiles--3 { grid-template-columns: repeat(3, 1fr); }
.ptile { display: grid; justify-items: center; gap: 5px; padding: 8px 2px 6px; border: 1.5px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: 11.5px; font-weight: 500; color: var(--amn-black); cursor: pointer; }
.ptile:hover { background: var(--amn-cream); }
.ptile.is-on { border-color: #FB5E00; background: var(--green-12); color: var(--amn-green-dark); }
.shp { display: block; width: 34px; height: 24px; border-radius: 5px; background: #fff; border: 1px solid var(--ink-14); }
.shp--soft { box-shadow: 0 4px 10px rgba(0, 0, 0, .18); border-color: transparent; }
.shp--lifted { box-shadow: 0 8px 16px -4px rgba(0, 0, 0, .32); border-color: transparent; }
.shp--hard { box-shadow: 4px 4px 0 rgba(12, 10, 9, .85); border-color: transparent; }
.shp--long { box-shadow: 8px 8px 6px rgba(0, 0, 0, .2); border-color: transparent; }
.shp--glow { box-shadow: 0 0 10px 3px rgba(57, 177, 173, .55); border-color: transparent; }
.ftiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 2px 4px 6px; }
.ftile { display: grid; gap: 4px; padding: 4px; border: 1.5px solid transparent; border-radius: 9px; background: none; font: inherit; font-size: 11px; font-weight: 500; color: var(--amn-black); cursor: pointer; text-align: center; }
.ftile:hover { background: var(--amn-cream); }
.ftile.is-on { border-color: #FB5E00; background: var(--green-12); color: var(--amn-green-dark); }
.ftile__img { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; background: var(--amn-cream); }
.ftile__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psub { margin: 2px 4px 8px; border-radius: 9px; background: var(--amn-desert); }
.psub > summary { list-style: none; display: flex; align-items: center; gap: 6px; padding: 7px 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-62); cursor: pointer; }
.psub > summary::-webkit-details-marker { display: none; }
.psub > summary::before { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.psub[open] > summary::before { transform: rotate(45deg); }
.psub > summary .ib--quiet { margin-left: auto; }
.phead { display: flex; align-items: center; justify-content: space-between; margin-right: 2px; }
.ib--quiet { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--ink-45); display: inline-grid; place-items: center; cursor: pointer; flex: none; }
.ib--quiet:hover, .ib--quiet:focus-visible { background: var(--amn-cream); color: var(--amn-black); }
.ib--quiet .phi { width: 15px; height: 15px; }
.qa { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; margin: 2px 2px 4px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-62); cursor: pointer; }
.qa:hover { background: var(--amn-cream); color: var(--amn-black); }
.qa .phi { width: 15px; height: 15px; }
.qrow { display: flex; align-items: center; gap: 6px; width: calc(100% + 16px); margin: 14px -8px 0; padding: 8px; border: 0; border-radius: 8px; background: none; font: inherit; font-size: 13px; color: var(--ink-62); text-align: left; cursor: pointer; }
.qrow b { color: var(--amn-black); font-weight: 600; }
.qrow .phi { margin-left: auto; width: 15px; height: 15px; }
.qrow:hover { background: var(--amn-cream); }
.schip { display: inline-flex; align-items: center; gap: 4px; margin: 0 4px 6px; padding: 4px 8px 4px 11px; border: 1.5px solid var(--ink-14); border-radius: 999px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--amn-black); cursor: pointer; }
.schip:hover { border-color: var(--ink-45); }
.schip .phi { width: 13px; height: 13px; }
.sbadge { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 2px 2px 10px; border-radius: 8px; background: #fff; font-size: 12px; font-weight: 600; color: var(--ink-62); }
.chipbtn { border: 1.5px solid var(--ink-14); background: #fff; border-radius: 999px; padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600; color: var(--amn-black); cursor: pointer; }
.chipbtn:hover { border-color: var(--ink-45); }
.ends { display: grid; padding: 2px 4px 6px; }
.ends__row { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-62); }
.ends__tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
.etile { height: 32px; display: grid; place-items: center; border: 1.5px solid transparent; border-radius: 8px; background: none; color: var(--amn-black); cursor: pointer; }
.etile:hover { background: var(--amn-cream); }
.etile.is-on { border-color: #FB5E00; background: var(--green-12); color: var(--amn-green-dark); }
.etile .pic { width: 30px; height: 15px; }
.ends__swap { justify-self: start; width: 24px; height: 22px; margin: -1px 0 -1px 2px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--ink-45); display: grid; place-items: center; cursor: pointer; }
.ends__swap:hover, .ends__swap:focus-visible { background: var(--amn-cream); color: var(--amn-black); }
.ends__swap .phi { width: 15px; height: 15px; }
.kitslotw { position: relative; }
.kitslotw__rs { position: absolute; right: -4px; top: 50%; transform: translateY(-50%); }
.brandpal__del { margin-left: auto; opacity: 0; }
.brandpal__row:hover .brandpal__del, .brandpal__del:focus-visible { opacity: 1; }
.range__which { margin-bottom: 10px; }
.range[hidden] { display: none; }
/* Any text action left behind: quiet, never an underlined orange link. */
.linkbtn { color: var(--ink-62) !important; text-decoration: none !important; font-weight: 500 !important; }
/* (fits the panel: tiles shrink rather than spill.) */
.ends__tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.etile { min-width: 0; }
.etile .pic { width: min(30px, 100%); }
.ptiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ptiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ptile { min-width: 0; } .ptile .pic { width: min(34px, 100%); }
.ib--quiet { color: var(--ink-62); }

/* Corners: one row and a split button; four boxes laid out like the corners. */
.corners { display: flex; align-items: center; gap: 4px; padding-right: 4px; }
.corners__all { flex: 1; min-width: 0; }
.corners__all.is-off { opacity: .45; }
.corners__split.is-on { background: var(--green-12); color: var(--amn-green-dark); }
.corners__each { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px 10px 6px; }
.corners__each label { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1.5px solid var(--ink-14); border-radius: 7px; background: #fff; }
.corners__each label:focus-within { border-color: #FB5E00; }
.corners__each svg { width: 15px; height: 15px; fill: none; stroke: var(--ink-62); stroke-width: 1.8; stroke-linecap: round; flex: none; }
.corners__each input { width: 100%; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 12.5px; text-align: right; color: var(--amn-black); -moz-appearance: textfield; }
.corners__each input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* A colour as one row (5A); the see-through strip in the picker (2A). */
.cfieldbtn { display: flex; align-items: center; gap: 8px; width: calc(100% - 8px); margin: 0 4px 6px; height: 36px; padding: 0 8px 0 5px; border: 1.5px solid var(--ink-14); border-radius: 9px; background: #fff; font: inherit; font-size: 13px; color: var(--amn-black); cursor: pointer; text-align: left; }
.cfieldbtn:hover, .cfieldbtn[aria-expanded="true"] { border-color: #FB5E00; }
.cfieldbtn > i { width: 24px; height: 24px; border-radius: 6px; flex: none; position: relative; overflow: hidden; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.cfieldbtn > i::after { content: ""; position: absolute; inset: 0; background: var(--c); }
.cfieldbtn > i.is-auto::after { background: linear-gradient(135deg, #212724 50%, #F2F1E1 50%); }
.cfieldbtn > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.cfieldbtn > span small { margin-left: 6px; font-size: 11px; color: var(--ink-45); font-weight: 500; }
.cfieldbtn > em { font-style: normal; font-size: 12px; color: var(--ink-62); font-variant-numeric: tabular-nums; }
.cfieldbtn > .phi { width: 14px; height: 14px; color: var(--ink-45); }
.cpick__alpha { position: relative; flex: 1; height: 12px; border-radius: 6px; cursor: pointer; touch-action: none; background: linear-gradient(to right, transparent, var(--c, #000)), repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.cpick__aknob { position: absolute; top: 50%; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25), 0 1px 3px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); pointer-events: none; }
.cpick__alpha:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.cpick__chip { position: relative; overflow: hidden; background: repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px !important; }
.cpick__chip::after { content: ""; position: absolute; inset: 0; background: var(--c); }
.cpick__pct { display: inline-flex; align-items: center; gap: 2px; height: 30px; padding: 0 6px; border: 1px solid var(--ink-14); border-radius: 7px; }
.cpick__pct input { width: 32px; border: 0; outline: 0; background: none; font: inherit; font-size: 13px; text-align: right; color: var(--amn-black); -moz-appearance: textfield; }
.cpick__pct input::-webkit-inner-spin-button { -webkit-appearance: none; }
.cpick__pct i { font-style: normal; color: var(--ink-45); font-size: 12px; }

/* Header and footer settings in the page panel (8A). */
.ptseg { margin: 0; flex-wrap: nowrap; gap: 3px; padding: 3px; border-radius: 9px; background: var(--amn-cream); }
.ptseg button { flex: 1; height: 28px; padding: 0 8px; border: 0; border-radius: 7px; background: none; font-size: 12.5px; color: var(--ink-62); }
.ptseg button.is-active { background: #fff; color: var(--amn-black); border: 0; box-shadow: 0 1px 2px rgba(22, 27, 24, .12); }
.ptinput { width: 100%; height: 32px; padding: 0 9px; border: 1.5px solid var(--ink-14); border-radius: 8px; font: inherit; font-size: 13px; color: var(--amn-black); }
.ptinput:focus { outline: none; border-color: #FB5E00; }
/* The footer in Write: a tick per page (covers greyed: never a footer). */
.wvfoot .prow { grid-template-columns: 96px 1fr; padding: 6px 0; }
.wvfoot__pages { display: flex; flex-wrap: wrap; gap: 6px; }
.wvfoot__pg { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 10px 0 8px; border: 1.5px solid var(--ink-14); border-radius: 8px; font-size: 13px; color: var(--amn-black); cursor: pointer; }
.wvfoot__pg input { accent-color: #FB5E00; margin: 0; }
.wvfoot__pg.is-off { opacity: .45; cursor: default; }
.ptcheck { padding: 0; font-size: 12.5px; }

/* Fill kinds as pictures (2026-10-16). */
.fpic { display: block; width: 30px; height: 22px; border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
.fpic--solid { background: var(--fc); }
.fpic--linear { background: linear-gradient(90deg, var(--fc), transparent), repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.fpic--radial { background: radial-gradient(circle at 50% 50%, var(--fc), transparent 75%), repeating-conic-gradient(#e6e6e6 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.fpic--none { background: #fff linear-gradient(to top right, transparent calc(50% - 1px), #C0392B calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }

.qa--head { margin: 4px 0 0; padding: 4px 8px; color: var(--amn-black); font-weight: 600; }
.qa--head .phi { color: var(--ink-62); }

/* Icons fill the panel; free photos (2026-10-16). */
.icogrid__head { grid-column: 1 / -1; margin: 14px 4px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-62); }
.libmore { min-height: 24px; }
.stockchips { margin-top: 8px; }
.thumb--stock { position: relative; }
.thumb--stock.is-busy { opacity: .5; cursor: progress; }
/* Each free photo keeps its shape before it loads, so the list loads a page at a time. */
.thumb--stock { aspect-ratio: 4 / 3; overflow: hidden; }
.thumb--stock img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Fill › Photo, and five fill kinds in a row. */
.ptiles--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fpic--photo { background: linear-gradient(180deg, #9cc4d9 0 45%, transparent 45%), linear-gradient(160deg, #6d6257, #c9b79c 60%, #e8dcc6); }

/* Fill › Photo keeps the shape: its photo, Change photo, reset (2026-10-16). */
.pfill { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; }
.pfill__pic { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line, #e3e3e3); background: #eef0f1; }
.pfill .btn { flex: 1; justify-content: center; }

/* The text size: a box to type any size in, between − and + (2026-10-16). */
.ctx__sizein { display: inline-flex; align-items: baseline; gap: 2px; padding: 0 2px; font-size: 13px; font-weight: 600; }
.ctx__sizein input { width: 40px; border: 1px solid transparent; border-radius: 6px; padding: 4px 2px; font: inherit; text-align: right; font-variant-numeric: tabular-nums; background: transparent; color: inherit; -moz-appearance: textfield; }
.ctx__sizein input::-webkit-outer-spin-button, .ctx__sizein input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ctx__sizein input:hover { border-color: var(--line, #ddd); }
.ctx__sizein input:focus { border-color: var(--accent, #e8622c); outline: none; background: #fff; }
.ctx__sizein span { color: var(--ink-62, #666); font-weight: 500; }

/* Fill: From ⇅ To swap, as the arrow ends have; five kinds fit their tiles (2026-10-16). */
.fswap { display: grid; margin: 4px 0 -6px 2px; }
.ptiles--5 { gap: 2px; padding-inline: 0; }
.ptiles--5 .ptile { padding-inline: 0; font-size: 10.5px; letter-spacing: -.01em; white-space: nowrap; }

/* The colour pop-up: its column never grows past the pop-up (2026-10-16:
   Done, the colour area and the % box ran past its right edge). */
.cpop, .cpick { grid-template-columns: minmax(0, 1fr); }
.cpick__row > * { min-width: 0; }

/* Close to the edge: a note with Move inside, never a block (2026-10-16). */
.ctx__risk { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin-left: 6px; padding: 0 10px; border: 1px solid #F3C9A8; border-radius: 9px; background: #FFF4EC; color: #9A3B07; font: inherit; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.ctx__risk .phi { width: 15px; height: 15px; fill: currentColor; }
.ctx__risk b { font-weight: 600; text-decoration: none; padding-left: 6px; border-left: 1px solid #F3C9A8; }
.ctx__risk:hover { background: #FFE9DA; }

/* Panels never grow past their edge (2026-10-16: a long section style name
   pushed its card and See all past the Design panel; the colour pop-up
   did the same). A grid column or flex row sized by its contents may now
   shrink; anything that sets its own min-width keeps it (zero specificity). */
:where(#layers, #library, #props, .pop, .cpop, #bsetup, dialog) :where(*) { min-width: 0; }
.sdesign { grid-template-columns: minmax(0, 1fr); }
/* A long style name shortens with "…"; its "4 of 7" always shows. */
.sdesign__nav b { display: flex; justify-content: center; align-items: baseline; gap: 5px; }
.sdesign__nav b span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdesign__nav b small { flex: none; }

/* Pages fill themselves (rule 4, 2026-10-16): the room left at the bottom of
   a page, with sections that fit it. Only the panel takes clicks. */
.gaphints { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.gaphint { position: absolute; display: grid; place-items: center; border: 1.5px dashed #FB5E00; border-radius: 6px; background: rgba(251, 94, 0, .03); pointer-events: none; }
.gaphint__panel { pointer-events: auto; display: grid; gap: 8px; justify-items: center; max-width: 92%; padding: 12px 16px; border-radius: 12px; background: var(--amn-white); border: 1px solid var(--ink-08); box-shadow: var(--shadow); font-size: 13px; line-height: 1.3; }
.gaphint__panel b { font-weight: 600; text-align: center; }
.gaphint__picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.gaphint__picks button { padding: 6px 11px; border-radius: 999px; border: 1px solid var(--ink-14); background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--amn-black); cursor: pointer; }
.gaphint__picks button:hover { border-color: #FB5E00; color: var(--amn-green-dark); background: var(--green-12); }
.gaphint--inner { border-color: rgba(251, 94, 0, .45); background: rgba(251, 94, 0, .02); }
.gaphint__close { pointer-events: auto; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--ink-14); background: var(--amn-white); box-shadow: var(--shadow); font: inherit; font-size: 12.5px; font-weight: 600; color: var(--amn-black); cursor: pointer; }
.gaphint__close:hover { border-color: #FB5E00; color: var(--amn-green-dark); }
.gaphint__close:focus-visible { outline: 2px solid #FB5E00; outline-offset: 2px; }
.gaphint__ok { padding: 2px 6px; border: 0; background: none; font: inherit; font-size: 12px; color: var(--ink-62); cursor: pointer; }
.gaphint__ok:hover { color: var(--amn-black); text-decoration: underline; }
.gaphint__picks button:focus-visible, .gaphint__ok:focus-visible { outline: 2px solid #FB5E00; outline-offset: 2px; }
/* Option A (2026-10-17): the section's name starts the floating bar. */
.floatbar .crumbs { margin: 0 0 0 4px; max-width: 260px; }
.floatbar .crumbs .crumbs__b.is-cur, .floatbar--sec .crumbs .crumbs__b:only-child { font-weight: 700; color: var(--amn-black); }
/* Close the gap (2026-10-17): Leave it beside the button; a smaller panel in an empty half. */
.gaphint__row { pointer-events: auto; display: inline-flex; align-items: center; gap: 6px; }
.gaphint__ok--chip { padding: 6px 10px; border-radius: 999px; background: var(--amn-white); border: 1px solid var(--ink-14); box-shadow: var(--shadow); }
.gaphint__panel--half { padding: 10px 12px; }
.gaphint__panel--half .gaphint__picks button { font-size: 12px; padding: 5px 9px; }
/* New statement: the trade as picture cards, then how to start (2026-10-17). */
.newpost__step i { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--amn-black); color: #fff; font-style: normal; font-size: 12px; font-weight: 700; vertical-align: 1px; }
.tradecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin: 4px 0 18px; }
.tradecard { display: grid; justify-items: start; gap: 4px; padding: 16px; border: 1.5px solid var(--ink-14); border-radius: 14px; background: var(--amn-white); font: inherit; text-align: left; color: var(--amn-black); cursor: pointer; }
.tradecard svg { width: 44px; height: 44px; margin-bottom: 6px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; color: var(--ink-62); }
.tradecard b { font-size: 15px; }
.tradecard small { color: var(--ink-62); font-size: 12.5px; line-height: 1.35; }
.tradecard:hover { border-color: var(--ink-45); }
.tradecard.is-on { border-color: #FB5E00; background: #FFF4EC; box-shadow: 0 0 0 3px rgba(251, 94, 0, .14); }
.tradecard.is-on svg { color: #FB5E00; }
.tradecard:focus-visible { outline: 2px solid #FB5E00; outline-offset: 2px; }
/* Panning (2026-10-19): Space held, the Hand tool, or the middle button. */
body.is-pan #stageWrap, body.is-pan #stageWrap canvas { cursor: grab !important; }
body.is-panning, body.is-panning * { cursor: grabbing !important; user-select: none; }
/* Editing the whole opening (2026-10-19): the live page reaches over the facing one. */
.stage__frame.is-wide { overflow: visible; z-index: 4; }
.doc--spreads .docpage.is-active { position: relative; z-index: 4; }
.lgroup { display: flex; align-items: center; gap: 6px; width: calc(100% - 12px); margin: 8px 6px 4px; border: 0; background: none; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-62); border-radius: 6px; padding: 5px 6px; cursor: pointer; text-align: left; }
.lgroup:hover { background: rgba(33, 39, 36, .05); color: var(--amn-black); }
.lgroup small { margin-left: auto; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: none; color: #C44A00; }
.lgroup__twist { display: inline-grid; place-items: center; width: 14px; height: 14px; transition: transform .15s; }
.lgroup__twist svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.lpage.is-shut .lgroup__twist { transform: rotate(-90deg); }
.lpage.is-shut .lpage__rows { display: none; }
.lrow--far .lrow__kind svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lgroup.is-drop { background: #FFEDE2; color: #C44A00; box-shadow: inset 0 0 0 1.5px #FB5E00; }
.lrow--far { cursor: pointer; opacity: .85; }
.lrow--far:hover { opacity: 1; }


/* -- Motion (2026-10-19, picked from docs/animation-options.html) ------------
   Motion says what changed and then gets out of the way. Short (120-260 ms),
   one curve (--ease-out), things open with motion and close at once. Only the
   HTML around the page moves, or a thin layer over it: the Fabric canvas
   never animates, so it still draws once per change. Reduce motion (the
   system setting) swaps every slide and grow for a quick fade. */
@keyframes csFade { from { opacity: 0; } }
@keyframes csRise { from { opacity: 0; transform: translateY(4px); } }
@keyframes csBarIn { from { opacity: 0; transform: translateY(4px) scale(.98); } }
@keyframes csPopIn { from { opacity: 0; transform: translateY(-2px) scale(.96); } }
@keyframes csDialogIn { from { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes csBump { 40% { transform: translateY(-3px); } }
@keyframes csPageIn { from { opacity: 0; transform: translateY(12px); } }
@keyframes csFlash { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }
@keyframes csCover { from { opacity: 0; } to { opacity: 1; } }
@keyframes csTickPop { from { opacity: 0; transform: scale(.5); } }
@keyframes csTickDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes csBreathe { 50% { opacity: .3; } }

/* B: the floating bar fades up when it first appears (not when it moves). */
.floatbar { transform-origin: bottom left; }
.floatbar.is-in { animation: csBarIn var(--t-fast) var(--ease-out); }
/* C: pop-ups and menus grow from their button; they close at once. */
.pop { transform-origin: var(--pop-origin, top left); }
.pop.is-in, .menu__list.is-in { animation: csPopIn var(--t-fast) var(--ease-out); }
.menu__list { transform-origin: top left; }
.menu__list--right { transform-origin: top right; }
.menu__list--up { transform-origin: bottom left; }
/* D: messages slide in and out; a new message over an old one nudges. */
.toast { transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); }
.toast.is-out { opacity: 0; transform: translateY(10px); pointer-events: none; }
.toast.is-bump { animation: csBump var(--t-base) var(--ease-out); }
/* O: a finished download gets a green tick. */
.toast__done { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-right: -4px; border-radius: 50%; background: #2FA35B; color: #fff; animation: csTickPop 320ms cubic-bezier(.34, 1.4, .64, 1); }
.toast__done svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* E: the bigger buttons give a small press. Not the toolbar's small icons. */
.btn { transition: background-color .15s, border-color .15s, transform var(--t-press) var(--ease-out); }
.btn:active:not(:disabled), .docadd:active, .recipe:active, .secstyle:active { transform: scale(.97); }
.docadd, .recipe, .secstyle { transition: transform var(--t-press) var(--ease-out), border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; }
.itemctl__btn { transition: transform var(--t-press) var(--ease-out); }
.itemctl__btn:active:not(:disabled) { transform: scale(.9); }
.itemctl__btn--add:active:not(:disabled) { transform: translateY(-50%) scale(.9); }
.itemctl.is-in .itemctl__btn--rm { animation: csTickPop var(--t-press) var(--ease-out); }
/* F: dialogs ease in from the middle; the shade behind fades. */
.dialog[open] { animation: csDialogIn var(--t-base) var(--ease-out); }
.dialog[open]::backdrop { animation: csFade var(--t-base) var(--ease-out); }
/* G and H: a glow round what just changed on the page (a section after a new
   style or size, a new section, a new item), and a cover that fades in over
   an item being removed. Both are HTML over the canvas, gone when done. */
.secflash { position: absolute; z-index: 6; pointer-events: none; border-radius: 4px; box-shadow: 0 0 0 2px #FB5E00, 0 0 0 7px rgba(251, 94, 0, .18); opacity: 0; animation: csFlash 700ms var(--ease-out); }
.secflash--item { animation-duration: 500ms; }
.itemgone { position: absolute; z-index: 5; pointer-events: none; animation: csCover 120ms var(--ease-out) forwards; }
/* I: style cards lift a little under the mouse; the chosen one has a tick,
   which pops when it was just picked. */
.secstyle { position: relative; }
.secstyle__img, .secadd__img { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .secstyle:hover .secstyle__img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(22, 27, 24, .12), inset 0 0 0 1px var(--ink-08); }
  .secadd__item:hover .secadd__img { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(22, 27, 24, .12), inset 0 0 0 1px var(--amn-green); }
}
.secstyle.is-on::after { content: ''; position: absolute; top: 11px; left: 11px; width: 20px; height: 20px; border-radius: 50%; background: var(--amn-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: 0 0 0 2px #fff; }
.secstyle.is-picked::after { animation: csTickPop 260ms cubic-bezier(.34, 1.4, .64, 1); }
/* J: the left tabs' highlight slides to the tab clicked; the panel's first
   lines fade up, 25 ms apart (only on a real change of tab). */
.rail { position: relative; }
.rail__tab { position: relative; z-index: 1; }
.rail__pill { position: absolute; z-index: 0; top: 0; left: 8px; right: 8px; border-radius: 8px; background: var(--green-12); pointer-events: none; }
.rail__pill.is-ready { transition: transform var(--t-base) var(--ease-out), height var(--t-base) var(--ease-out); }
.rail__pill[hidden] { display: none; }
.rail.has-pill .rail__tab.is-active, .rail.has-pill .rail__tab.is-active:hover { background: none; }
#library.tab-in > :nth-child(-n+5) { animation: csRise var(--t-fast) var(--ease-out) both; }
#library.tab-in > :nth-child(2) { animation-delay: 25ms; }
#library.tab-in > :nth-child(3) { animation-delay: 50ms; }
#library.tab-in > :nth-child(4) { animation-delay: 75ms; }
#library.tab-in > :nth-child(5) { animation-delay: 100ms; }
/* K: "Saving" breathes while a save is under way; "Saved" draws a tick. */
.bar__status[data-busy="1"]::before { background: var(--amn-green); animation: csBreathe 1s ease-in-out infinite; }
.bar__status[data-kind="ok"]::before { width: 9px; height: 5px; margin: 0 8px 0 2px; border-radius: 0; background: none; border-left: 2px solid #2FA35B; border-bottom: 2px solid #2FA35B; transform: rotate(-45deg); vertical-align: 3px; animation: csTickDraw 260ms var(--ease-out); }
/* L and N: a new page rises in; a new statement's pages arrive one after
   another, once. The live page only fades: its canvas mustn't move. */
.docpage.is-new, .docpage.is-build { animation: csPageIn 260ms var(--ease-out) both; }
.docpage.is-new.is-active, .docpage.is-build.is-active { animation-name: csFade; }
.gaphints.is-in { animation: csFade var(--t-base) var(--ease-out); }
/* M: in Layers, the highlight slides to the row just selected. */
.layers__list { position: relative; }
.lmark { position: absolute; z-index: 0; border-radius: 7px; background: var(--green-12); pointer-events: none; }
.lrow.is-arriving { background: none; }
.lrow { z-index: 1; }
/* P: moving to another page, its picture stays on top of the live page for a
   moment and fades, so the swap doesn't flicker. */
.docpage__sheet > img.is-cover { position: absolute; inset: 0; z-index: 8; pointer-events: none; transition: opacity var(--t-base) var(--ease-out); }
.docpage__sheet > img.is-cover.is-gone { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .floatbar.is-in, .pop.is-in, .menu__list.is-in, .dialog[open], .docpage.is-new, .docpage.is-build, #library.tab-in > :nth-child(-n+5) { animation-name: csFade; }
  .toast { transition: opacity var(--t-fast) linear; }
  .toast.is-out { transform: none; }
  .toast.is-bump, .toast__done, .itemctl.is-in .itemctl__btn--rm, .secstyle.is-picked::after { animation: none; }
  .btn { transition: background-color .15s, border-color .15s; }
  .docadd, .recipe, .secstyle, .itemctl__btn, .secstyle__img, .secadd__img, .post, .pick__img { transition: none; }
  .btn:active:not(:disabled), .docadd:active, .recipe:active, .secstyle:active, .itemctl__btn:active:not(:disabled) { transform: none; }
  .itemctl__btn--add:active:not(:disabled) { transform: translateY(-50%); }
  .secstyle:hover .secstyle__img, .secadd__item:hover .secadd__img, .post:hover, .pick:hover .pick__img { transform: none; }
  .rail__pill.is-ready { transition: none; }
  .bar__status[data-busy="1"]::before, .bar__status[data-kind="ok"]::before { animation: none; }
  .lrow__twist svg, .lgroup__twist, .slook__switch i::after, .rail__fold svg, .wv__hl { transition: none; }
}

/* -- Scrollbars: thin and quiet (2026-10-19, picked from docs/scrollbar-options.html, A).
   A soft ink thumb on no track, darker under the mouse. The toolbar keeps its
   hidden one (.ctxbar). */
* { scrollbar-width: thin; scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: var(--scroll-thumb); background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); background-clip: padding-box; }
/* A lead with nothing to say (the Icons tab with no icon selected) takes no room. */
.library__lead:empty, .pop__note:empty { display: none; }
/* The Sections tab's search, under its heading. */
.secsearch { margin: 2px 0 6px; }
/* The covers turn as card, not a block: a flatter view than the library's
   2000px, so a turning cover doesn't swell past the top and bottom. */
.flip__book .stf__block { perspective: 6000px; }
/* The card turn's shadows (StPageFlip draws them as straight-faded strips
   from the spine). Faded out smoothly towards their far end (the element's
   right end, mirrored or not) and lighter, so the turning cover casts a soft
   shadow, not a grey slab with a hard edge (2026-10-19). */
.flip__book .stf__hardShadow { opacity: .6; -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .12) 70%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .45) 35%, rgba(0, 0, 0, .12) 70%, transparent 100%); }
.flip__book .stf__hardInnerShadow { opacity: .7; -webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); mask-image: linear-gradient(to right, #000 0%, rgba(0, 0, 0, .5) 40%, transparent 100%); }

/* -- Statements page: header and account (2026-10-20) ---------------------------
   The lockup keeps its own width (it used to stretch and push the account
   into the middle of the bar); the account is a clear button on the right:
   initials, name and business, and a menu with the email at the top. */
/* The editor's bar is a three-column grid (left, middle, right); the
   statements page has only two things in it, so it is a plain row. */
.bar--home { display: flex; justify-content: space-between; }
.bar__brand { flex: none; }
.bar__brand img { height: 38px; width: 121px; } /* the logo's own proportions */
.bar--home { padding: 0 24px; }
.acct {
  display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 5px;
  border: 1px solid var(--ink-14); border-radius: 999px; background: var(--amn-white); color: var(--amn-black);
  font: inherit; cursor: pointer; transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.acct:hover, .acct[aria-expanded="true"] { border-color: var(--ink-45); box-shadow: 0 1px 3px rgba(22, 27, 24, .08); }
.acct:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.acct__avatar {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--amn-green); color: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
}
.acct__text { display: grid; text-align: left; line-height: 1.2; max-width: 220px; }
.acct__text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__text small { font-size: 12px; color: var(--ink-62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct__chev { width: 16px; height: 16px; fill: none; stroke: var(--ink-62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.acct__menu { min-width: 260px; padding: 6px; }
.acct__head { display: grid; gap: 2px; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--ink-08); }
.acct__head b { font-size: 14px; }
.acct__head small { font-size: 12.5px; color: var(--ink-62); word-break: break-all; }
.acct__menu a { display: flex; align-items: center; gap: 10px; }
.acct__menu a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-62); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) { .acct__text, .acct__chev { display: none; } .acct { padding: 0 4px; } .bar--home { padding: 0 12px; } }

/* The first-statement card: everything centred. */
.welcome { display: grid; justify-items: center; padding: 48px 40px; }
.welcome .btn { justify-self: center; }

/* -- "Build my statement" (the wizard) -------------------------------------------
   Two columns: the steps on the left, the statement drawn small on the right
   (it follows the ticks), and other ways to start underneath. */
.wiz { width: min(1180px, calc(100vw - 32px)); padding: 28px 32px 32px; }
.wiz__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 4px; }
.wiz__head .dialog__title { font-size: 26px; letter-spacing: -0.02em; }
.wiz__head .dialog__body { margin-top: 4px; }
.wiz__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.wiz__trades { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 8px; }
.wiz__list { display: grid; border: 1px solid var(--ink-14); border-radius: 14px; overflow: hidden; background: var(--amn-white); }
.wiz__list[hidden] { display: none; }
.wiz__list + .wiz__more { margin-top: 10px; }
.wiz__row {
  display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 13px 16px; border-top: 1px solid var(--ink-08); cursor: pointer; transition: background var(--t-fast) ease;
}
.wiz__row:first-child { border-top: 0; }
.wiz__row:hover { background: #FAF9F2; }
.wiz__row input { width: 20px; height: 20px; margin: 0; accent-color: var(--amn-green); cursor: pointer; }
.wiz__name { font-size: 15px; font-weight: 600; }
.wiz__hint { font-size: 13px; color: var(--ink-62); text-align: right; }
.wiz__row:has(input:checked) { background: #FFF7F1; }
.wiz__more {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px 0; padding: 6px 4px; border: 0; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--amn-black); cursor: pointer;
}
.wiz__more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease-out); }
.wiz__more[aria-expanded="true"] svg { transform: rotate(90deg); }
.wiz__more small { padding: 1px 8px; border-radius: 999px; background: var(--ink-08); font-size: 12px; color: var(--ink-62); }
.wiz__side {
  position: sticky; top: 0; display: grid; gap: 12px; padding: 18px 18px 20px;
  border-radius: 16px; background: #F4F3EA;
}
.wiz__side .newpost__step { margin: 0 0 4px; }
.wiz__pages { display: flex; flex-wrap: wrap; gap: 8px; }
.wiz__page {
  display: flex; flex-direction: column; gap: 2px; width: 56px; aspect-ratio: 210 / 297; padding: 3px;
  border-radius: 4px; background: var(--amn-white); box-shadow: 0 1px 2px rgba(22, 27, 24, .12), 0 3px 8px rgba(22, 27, 24, .06);
  animation: wizIn var(--t-base) var(--ease-out);
}
.wiz__page i {
  display: grid; place-items: center; min-height: 0; border-radius: 2px; background: #FFE3D1; color: #8A3500;
  font-style: normal; font-size: 7.5px; font-weight: 700; line-height: 1; text-align: center; overflow: hidden;
}
.wiz__page.is-end i { background: var(--amn-black); color: #fff; }
@keyframes wizIn { from { opacity: 0; transform: translateY(4px) scale(.96); } }
.wiz__count { font-size: 14px; color: var(--ink-62); margin: 0; }
.wiz__count b { color: var(--amn-black); }
.wiz__go { justify-content: center; width: 100%; height: 52px; font-size: 16px; text-decoration: none; }
.wiz__go.is-off { opacity: .45; pointer-events: none; }
.wiz__next { font-size: 12.5px; color: var(--ink-62); margin: 0; }
.wiz__other { margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--ink-08); }
.wiz__other .newpost__templates { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 900px) {
  .wiz { padding: 22px 18px 24px; }
  .wiz__body { grid-template-columns: 1fr; gap: 20px; }
  .wiz__side { position: static; }
  .wiz__trades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wiz__hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .wiz__page { animation: none; } .wiz__more svg { transition: none; } }

/* -- Editor bar at laptop widths (2026-10-20) ------------------------------------
   The right group (help, Design · Write · Preview, Download) always gets its
   own width; the statement name shrinks instead. Before, on 1180–1440 px
   screens, the right group ran over View ("V@w") and the Spreads switch. */
.bar { grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); }
.bar__left .bar__name { flex: 1 1 auto; min-width: 90px; max-width: 320px; }
.bar__left .bar__name input { width: 100%; }

/* -- First-time questions (welcome.php, 2026-10-20) --------------------------------
   Same paper and card as sign-in, wider; three steps with a progress bar;
   industries as picture tiles, the rest as tap-to-pick chips. */
.auth__card--wide { max-width: 720px; }
.steps { display: flex; align-items: center; gap: 6px; margin-bottom: 18px; }
.steps i { width: 34px; height: 5px; border-radius: 99px; background: rgba(33, 39, 36, .12); }
.steps i.on { background: var(--amn-green); }
.steps span { margin-left: 8px; font-size: 13px; color: var(--ink-62); }
.auth__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.auth__two--wide { grid-template-columns: 2fr 1fr; }
.auth__form select { height: 48px; padding: 0 12px; font: inherit; font-size: 16px; border: 1.5px solid rgba(33, 39, 36, .18); border-radius: 10px; background: var(--amn-white); }
.auth__form select:focus { border-color: var(--amn-green); outline: none; box-shadow: 0 0 0 3px var(--green-12); }
.choice { border: 0; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.choice legend { padding: 0; margin-bottom: 10px; font-weight: 600; font-size: 15px; }
.choice legend small { font-weight: 400; color: var(--ink-62); margin-left: 6px; }
.inds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ind {
  position: relative; display: grid; align-content: start; gap: 3px; padding: 14px; border: 1.5px solid rgba(33, 39, 36, .14);
  border-radius: 12px; cursor: pointer; background: var(--amn-white); transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.ind input { position: absolute; opacity: 0; pointer-events: none; }
.ind svg { width: 30px; height: 30px; margin-bottom: 4px; fill: none; stroke: var(--ink-62); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ind b { font-size: 14px; line-height: 1.25; }
.ind small { font-size: 12px; color: var(--ink-62); line-height: 1.3; }
.ind:hover { border-color: var(--ink-45); }
.ind:has(input:checked) { border-color: var(--amn-green); background: #FFF4EC; box-shadow: 0 0 0 3px rgba(251, 94, 0, .12); }
.ind:has(input:checked) svg { stroke: var(--amn-green); }
.ind:has(input:focus-visible) { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.ind__other { display: none !important; }
.choice:has(input[value="other"]:checked) .ind__other, .choice:has(input[value="Something else"]:checked) .ind__other { display: grid !important; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.optchip { position: relative; cursor: pointer; }
.optchip input { position: absolute; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; opacity: 0; pointer-events: none; }
.optchip span {
  display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1.5px solid rgba(33, 39, 36, .16); border-radius: 999px;
  font-size: 14px; font-weight: 500; background: var(--amn-white); transition: border-color var(--t-fast) ease, background var(--t-fast) ease;
}
.optchip:hover span { border-color: var(--ink-45); }
.optchip input:checked + span { border-color: var(--amn-green); background: #FFF4EC; color: var(--amn-black); }
.optchip input:focus-visible + span { outline: 2px solid var(--amn-green); outline-offset: 2px; }
.auth__row { display: flex; align-items: center; gap: 20px; margin-top: 4px; }
.auth__row .btn { flex: 1; }
@media (max-width: 600px) { .auth__two, .auth__two--wide { grid-template-columns: 1fr; } .inds { grid-template-columns: 1fr 1fr; } }

/* The wizard when the industry is known: the trade folds into one line. */
.wiz__tradeknown { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 2px 0 6px; font-size: 14px; color: var(--ink-62); }
.wiz__tradeknown b { color: var(--amn-black); }
.tradecards[hidden], .wiz__tradeknown[hidden] { display: none; }

/* -- Account (2026-10-20) ----------------------------------------------------------
   The statements page's frame (bar, cream page, credit) with white cards, as
   the post cards and the welcome card: the design system's own tokens, the
   .btn buttons, fields like the editor's (.cfield) at page size. Email and
   password are rows that open in place, so only one form shows at a time. */
.setpage { max-width: 860px; display: grid; gap: 18px; align-content: start; }
.setpage__back {
  display: inline-flex; align-items: center; gap: 4px; justify-self: start; height: 34px; padding: 0 12px 0 6px; margin-bottom: -6px;
  border-radius: 999px; color: var(--ink-62); font-weight: 500; text-decoration: none;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease;
}
.setpage__back:hover { background: var(--amn-cream-deep); color: var(--amn-black); }
.setpage__back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.setpage__head { display: flex; align-items: center; gap: 18px; margin: 4px 0 6px; }
.setpage__head h1 { font-size: 40px; letter-spacing: -0.03em; line-height: 1.05; }
.setpage__head p { margin: 6px 0 0; color: var(--ink-62); font-size: 15px; }
.setpage__avatar {
  display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 50%;
  background: var(--amn-green); color: #fff; font-size: 22px; font-weight: 700; letter-spacing: .02em;
}
.setnote { margin: 0; padding: 12px 16px; border-radius: var(--radius); font-weight: 500; }
.setnote--ok { background: var(--green-12); color: var(--amn-black); }
.setnote--bad { background: #F6E7E3; color: var(--danger); }
.setcard {
  display: grid; gap: 18px; padding: 26px 28px; border: 1px solid var(--ink-08); border-radius: 18px;
  background: var(--amn-white); box-shadow: 0 1px 2px rgba(22, 27, 24, .04);
}
.setcard__head h2 { font-size: 19px; }
.setcard__head p { margin: 4px 0 0; color: var(--ink-62); }
.setcard__head--row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.setform { display: grid; gap: 14px; }
.setform__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.setform__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.setform__note { margin: 0; color: var(--ink-62); }
.setfield { display: grid; gap: 6px; }
.setfield > span { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-62); }
.setfield em { font-style: normal; font-weight: 400; color: var(--ink-45); }
.setfield input {
  width: 100%; height: 44px; padding: 0 12px; border: 1.5px solid var(--ink-14); border-radius: var(--radius);
  background: var(--amn-white); font: inherit; font-size: 15px; color: var(--amn-black);
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.setfield input:hover { border-color: var(--ink-45); }
.setfield input:focus { outline: none; border-color: var(--amn-green); box-shadow: 0 0 0 3px var(--green-12); }
.setfield--code { max-width: 220px; }
.setfield--code input { font-size: 22px; font-weight: 600; letter-spacing: .25em; text-align: center; }
.setfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--ink-08); border-radius: var(--radius); overflow: hidden; }
.setfacts div { padding: 12px 16px; border-right: 1px solid var(--ink-08); border-bottom: 1px solid var(--ink-08); margin: 0 -1px -1px 0; }
.setfacts dt { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-45); }
.setfacts dd { margin: 3px 0 0; font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.setempty { margin: 0; padding: 16px; border: 1.5px dashed var(--ink-14); border-radius: var(--radius); color: var(--ink-62); }
.setrows { display: grid; margin-top: -8px; }
.setrow { border-top: 1px solid var(--ink-08); }
.setrow:first-child { border-top: 0; }
.setpage a.btn { text-decoration: none; }
.setrow > summary, .setrow--plain { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; }
.setrow > summary { list-style: none; cursor: pointer; }
.setrow > summary::-webkit-details-marker { display: none; }
.setrow > summary:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 4px; border-radius: 6px; }
.setrow__label { font-weight: 600; }
.setrow__value { color: var(--ink-62); overflow-wrap: anywhere; }
.setrow__value em { font-style: normal; color: var(--ink-45); }
.setrow[open] .setrow__btn { background: var(--amn-cream); }
.setrow > .setform { padding: 4px 0 20px; animation: setOpen var(--t-base) var(--ease-out); }
@keyframes setOpen { from { opacity: 0; transform: translateY(-4px); } }
@media (max-width: 640px) {
  .setcard { padding: 20px 18px; }
  .setform__two { grid-template-columns: 1fr; }
  .setpage__head h1 { font-size: 30px; }
  .setpage__avatar { width: 52px; height: 52px; font-size: 18px; }
  .setrow > summary, .setrow--plain { grid-template-columns: minmax(0, 1fr) auto; }
  .setrow__value { grid-column: 1; grid-row: 2; }
  .setrow__btn { grid-column: 2; grid-row: 1 / span 2; }
}
@media (prefers-reduced-motion: reduce) { .setrow > .setform { animation: none; } }

/* -- Free and Pro (2026-10-20) --------------------------------------------------------
   The PRO tag on a Pro button (it keeps its place; using it explains Pro),
   the plan badge, and the Pro page (plan.php) in the Account page's cards. */
.protag {
  display: inline-block; margin-left: 6px; padding: 2px 5px; border-radius: 4px; vertical-align: 1px;
  background: var(--amn-green); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; line-height: 1.3;
}
.protag--pick { position: absolute; top: 8px; right: 8px; z-index: 1; margin: 0; font-size: 10.5px; padding: 3px 7px; border-radius: 999px; }
.pick { position: relative; }
#drawbar .is-pro { position: relative; }
#drawbar .is-pro::after {
  content: ''; position: absolute; top: 5px; right: 5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--amn-green); box-shadow: 0 0 0 2px var(--amn-white);
}
.planbadge {
  display: inline-block; padding: 3px 8px; border-radius: 999px; vertical-align: 2px;
  background: var(--amn-green); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .08em;
}
.planbadge--free { background: var(--amn-cream-deep); color: var(--ink-62); }
.setcard__head h2 .planbadge { margin-left: 8px; }
.acct__menu a.acct__plan { font-weight: 600; }
.acct__menu a.acct__plan .planbadge { margin-right: 2px; }
.setnote--test { background: var(--amn-cream-deep); color: var(--ink-62); }
.setpage__head--plain { margin-top: 0; }
.plancard__price { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
.plancard__amount { margin: 10px 0 4px; font-size: 18px; color: var(--ink-62); }
.plancard__amount b { font-family: 'Rethink Sans', 'DM Sans', system-ui, sans-serif; font-size: 40px; font-weight: 600; letter-spacing: -0.03em; color: var(--amn-black); margin-right: 4px; }
.plancard__secure { display: flex; align-items: center; gap: 8px; }
.plancard__secure svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-62); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plancard--pro { border-color: rgba(251, 94, 0, .35); box-shadow: 0 0 0 3px var(--green-12); }
.plancard__top { display: flex; align-items: center; gap: 14px; }
.plancard__top p { margin: 2px 0 0; color: var(--ink-62); }
.planlist { width: 100%; border-collapse: collapse; }
.planlist th { padding: 0 8px 10px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-45); text-align: center; }
.planlist th:last-child { color: var(--amn-green-dark); }
.planlist td { padding: 12px 8px; border-top: 1px solid var(--ink-08); text-align: center; font-weight: 600; }
.planlist td:first-child { text-align: left; font-weight: 400; padding-left: 0; }
.planlist th:nth-child(2), .planlist th:nth-child(3), .planlist td:nth-child(2), .planlist td:nth-child(3) { width: 96px; }
.planlist__y, .planlist__n { width: 20px; height: 20px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.planlist__y { stroke: var(--amn-green); }
.planlist__n { stroke: var(--ink-14); }
.setcard--quiet { background: transparent; box-shadow: none; border-style: dashed; border-color: var(--ink-14); }
@media (max-width: 640px) { .planlist th:nth-child(2), .planlist th:nth-child(3), .planlist td:nth-child(2), .planlist td:nth-child(3) { width: 64px; } .plancard__amount b { font-size: 32px; } }

/* -- Pro, felt (2026-10-20) ------------------------------------------------------------
   The PRO badge on the person (an orange ring and a tag on the initials, in
   the bar, on Account, on the Studio mark in the editor), and the welcome
   moment after paying: confetti in the brand's oranges, the badge popping
   in, what is now open ticked off one by one. Reduced motion: the card only. */
.acct__avatar.is-pro, .setpage__avatar.is-pro { position: relative; box-shadow: 0 0 0 2px var(--amn-white), 0 0 0 4px var(--amn-green); }
.acct__pro, .bar__pro {
  position: absolute; left: 50%; bottom: -7px; transform: translateX(-50%);
  padding: 1px 4px; border-radius: 4px; background: var(--amn-black); color: #fff;
  font-style: normal; font-size: 8px; font-weight: 800; letter-spacing: .08em; line-height: 1.3; box-shadow: 0 0 0 1.5px var(--amn-white);
}
.setpage__avatar .acct__pro { font-size: 10px; bottom: -8px; padding: 1px 6px; }
.acct .acct__avatar.is-pro { margin: 2px 0; }
.bar__home { position: relative; }
.bar__pro { left: auto; right: -6px; bottom: -4px; transform: none; background: var(--amn-green); }

.yay {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 16px;
  background: rgba(22, 27, 24, .45); backdrop-filter: blur(3px);
  animation: yayFade var(--t-base) var(--ease-out);
}
.yay.is-out { opacity: 0; transition: opacity var(--t-base) ease; }
.yay__fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.yay__card {
  position: relative; width: min(520px, 100%); padding: 36px 34px 26px; border-radius: 22px; text-align: center;
  background: var(--amn-white); box-shadow: 0 24px 60px rgba(22, 27, 24, .25);
  animation: yayRise .5s var(--ease-out) .1s both;
}
.yay__badge {
  display: inline-grid; place-items: center; width: 84px; height: 84px; margin: -4px auto 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #FF9A5E, var(--amn-green) 60%, #C44A00);
  box-shadow: 0 10px 24px rgba(251, 94, 0, .35), inset 0 -4px 10px rgba(0, 0, 0, .12);
  animation: yayPop .7s cubic-bezier(.34, 1.56, .64, 1) .35s both;
}
.yay__badge span { color: #fff; font-size: 20px; font-weight: 800; letter-spacing: .1em; }
.yay__card h2 { font-size: 30px; letter-spacing: -0.02em; margin: 0 0 8px; }
.yay__card > p { margin: 0 0 16px; color: var(--ink-62); font-size: 15px; }
.yay__list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 8px; text-align: left; }
.yay__list li {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; background: #FFF4EC; font-weight: 500;
  animation: yayItem .4s var(--ease-out) both; animation-delay: calc(.75s + var(--i) * .14s);
}
.yay__list li::before {
  content: ''; flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--amn-green)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.yay__go { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.yay__go a.btn { text-decoration: none; }
.yay__note { margin: 16px 0 0 !important; font-size: 13px !important; color: var(--ink-45) !important; }
@keyframes yayFade { from { opacity: 0; } }
@keyframes yayRise { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes yayPop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } }
@keyframes yayItem { from { opacity: 0; transform: translateX(-10px); } }
@media (prefers-reduced-motion: reduce) {
  .yay, .yay__card, .yay__badge, .yay__list li { animation: none; }
}
@media (max-width: 520px) { .yay__card { padding: 28px 20px 22px; } .yay__card h2 { font-size: 25px; } }
/* Onboarding chips have their own name (.optchip): the editor's .chip gave
   them a second outline. Buttons on the app's own pages never wrap; a label's
   note stays on its line. */
.setpage .btn, .auth .btn, .wiz .btn, .yay .btn { white-space: nowrap; }
.setcard__head--row > .btn, .setcard__head--row > form { flex: none; }
.auth__form label > span small, .setfield > span small { font-weight: 400; color: var(--ink-62); }
.ind input { width: 1px; height: 1px; margin: 0; padding: 0; border: 0; }

/* Onboarding, easier (2026-10-20): Next, Skip and Back as real buttons (Next
   first in the page so Enter means Next, shown on the right); "Tell us more"
   only once an answer is picked; Account's business facts four across with
   the missing ones as "Add". */
.auth__row { gap: 10px; }
.auth__row .btn { flex: none; height: 50px; padding: 0 22px; }
.auth__row .btn--primary { flex: 1; order: 3; }
.auth__row .btn:not(.btn--primary):not(.auth__back) { order: 2; }
.auth__row .auth__back { order: 1; padding: 0 12px; color: var(--ink-62); text-decoration: none; }
.choice .ind__other--heard { display: none !important; }
.choice:has(input[name=heard]:checked) .ind__other--heard { display: grid !important; }
.setfacts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.setfacts dd.is-empty a { color: var(--ink-45); font-weight: 500; text-decoration: none; }
.setfacts dd.is-empty a::before { content: '+ '; }
.setfacts dd.is-empty a:hover { color: var(--amn-green-dark); }
@media (max-width: 640px) { .setfacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .auth__row .btn { padding: 0 14px; } }
/* Onboarding: more room between questions (2026-10-20, the user). */
.auth__card--wide .auth__form { gap: 26px; }
.auth__card--wide .choice { gap: 12px; }
.auth__card--wide .choice legend { margin-bottom: 12px; }
.auth__card--wide .auth__row { margin-top: 6px; }

/* -- Share (option A, 2026-10-21): step 1 a short list of formats; step 2 the pages (ticked) and a few settings, Back and Download at the bottom. Lucide icons. */
.sharew { position: relative; width: min(600px, calc(100vw - 32px)); max-width: none; max-height: min(760px, calc(100vh - 40px)); padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.sharew[open] { display: flex; }
.sharew > .dialog__title { margin: 0; padding: 22px 24px 2px; font-size: 21px; }
.sharew__lead { margin: 0; padding: 0 24px 12px; color: var(--ink-62); font-size: 14px; }
.sharew__x { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink-62); cursor: pointer; display: grid; place-items: center; z-index: 1; }
.sharew__x:hover, .sharew__back:hover { background: var(--amn-cream); color: var(--amn-black); }
.sharew__bk { display: grid; place-items: center; }
.sharew__bk svg { width: 20px; height: 20px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.share__ic { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--amn-cream); color: var(--amn-black); flex: none; }
.share__ic svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sharew__fmts { display: grid; gap: 8px; padding: 0 24px 22px; overflow: auto; }
.sharew__fmt { display: grid; grid-template-columns: 40px 1fr auto; gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--ink-08); border-radius: 13px; background: var(--amn-white); text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--t-fast) ease, background var(--t-fast) ease; }
.sharew__fmt:hover:not(:disabled) { border-color: rgba(251, 94, 0, .5); background: #FFF8F2; }
.sharew__fmt b { display: block; font-size: 15.5px; font-weight: 700; }
.sharew__fmt small { display: block; color: var(--ink-62); font-size: 13px; line-height: 1.35; }
.sharew__fmt:disabled { cursor: default; background: var(--amn-desert); }
.sharew__fmt:disabled b, .sharew__fmt:disabled small { color: var(--ink-62); }
.sharew__chev { color: var(--ink-45, rgba(33, 39, 36, .45)); }
.sharew__soon { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 3px 7px; border-radius: 6px; background: var(--amn-cream); color: var(--ink-62); white-space: nowrap; }
.sharew__head { display: flex; align-items: center; gap: 6px; padding: 16px 60px 4px 16px; }
.sharew__head .dialog__title { margin: 0; font-size: 20px; }
.sharew__back { width: 36px; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--ink-62); cursor: pointer; display: grid; place-items: center; }
.sharew__body { flex: 1; overflow: auto; padding: 4px 24px 18px; }
.sharew__count { margin: 2px 0 12px; font-size: 13px; color: var(--ink-62); }
.sharew__count button { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--amn-black); text-decoration: underline; text-decoration-color: rgba(33, 39, 36, .3); text-underline-offset: 3px; cursor: pointer; }
.sharew__pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 30px 14px; padding-bottom: 14px; }
.sharew__pages.is-print { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 14px; }
.sharew__pg { position: relative; display: block; padding: 0; border: 2px solid transparent; border-radius: 4px; background: #fff; box-shadow: 0 1px 4px rgba(22, 27, 24, .14); aspect-ratio: 210 / 297; cursor: pointer; transition: border-color var(--t-fast) ease, opacity var(--t-fast) ease; }
.sharew__pg img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.sharew__pg:not(.is-on):not(.is-print) { opacity: .5; }
.sharew__pg.is-on:not(.is-fixed) { border-color: var(--amn-green); }
.sharew__pg.is-fixed { cursor: default; }
.sharew__pg.is-print { aspect-ratio: auto; border: 0; box-shadow: none; background: none; cursor: default; margin: 0; }
.sharew__pg.is-print canvas { display: block; width: 100%; height: auto; }
.sharew__pg figcaption, .sharew__n { position: absolute; left: 0; right: 0; bottom: -22px; text-align: center; font-size: 12px; color: var(--ink-62); }
.sharew__pg.is-print figcaption { position: static; margin-top: 4px; }
.sharew__wait { display: block; aspect-ratio: 230 / 314; border-radius: 4px; background: var(--amn-cream); }
.sharew__tick { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1.5px solid rgba(33, 39, 36, .3); display: grid; place-items: center; }
.sharew__pg.is-on .sharew__tick { background: var(--amn-green); border-color: var(--amn-green); color: #fff; }
.sharew__tk svg { width: 13px; height: 13px; display: block; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sharew__pg.is-on .sharew__tk svg { opacity: 1; }
.sharew__opts { display: grid; gap: 12px; margin-top: 18px; }
.sharew__opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sharew__opt b { display: block; font-size: 14px; }
.sharew__opt small { display: block; color: var(--ink-62); font-size: 12.5px; line-height: 1.4; }
.sharew__chips { display: inline-flex; background: var(--amn-cream); border-radius: 999px; padding: 3px; }
.sharew__chips button { border: 0; background: none; padding: 6px 13px; border-radius: 999px; font: 600 13px/1 var(--f-ui, inherit); color: var(--ink-62); cursor: pointer; white-space: nowrap; }
.sharew__chips button.is-on { background: #fff; color: var(--amn-black); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.sharew__foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--ink-08); background: var(--amn-desert); }
.sharew__note { flex: 1; font-size: 13px; color: var(--ink-62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sharew__foot .btn, .sharew__opt .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sharew__foot .btn--primary .protag { background: #fff; color: var(--amn-green); }
.sharew__bic svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sharew__fmt:focus-visible, .sharew__pg:focus-visible, .sharew__x:focus-visible, .sharew__back:focus-visible, .sharew__chips button:focus-visible { outline: 2px solid var(--amn-green); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sharew__fmt, .sharew__pg { transition: none; } }

/* -- Upgrade window in the editor (2026-10-20): price, what Pro opens, straight to Stripe. */
.proup { display: grid; gap: 12px; margin: 4px 0 6px; }
.proup__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 15px; }
.proup__price b { font-size: 26px; letter-spacing: -0.02em; }
.proup__price small { color: var(--ink-62); font-size: 13px; }
.proup__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.proup__list li { display: flex; gap: 8px; align-items: baseline; }
.proup__list li::before { content: ''; flex: none; width: 16px; height: 16px; transform: translateY(3px); background: var(--amn-green); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.proup__note { margin: 0; color: var(--ink-62); font-size: 13px; }
.seg .seg__ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.fontown { margin-top: 10px; }
.fontown a { color: var(--amn-black); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(33, 39, 36, .3); text-underline-offset: 3px; }
.fontown a:hover { text-decoration-color: currentColor; }
.ctx__style .ctx__stylek { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-62); margin-right: 2px; }
.pprev .dialog__actions .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.pprev .dialog__actions .btn--primary .protag { background: #fff; color: var(--amn-green); }
/* Print preview zoom (2026-10-21): bigger pages start at the left so all of them can be scrolled to; drag to move. */
.pprev__grid.is-zoomed { justify-content: flex-start; cursor: grab; }
.pprev__grid.is-zoomed.is-panning { cursor: grabbing; user-select: none; }

/* -- Share online (2026-10-21): the window, and the rocket the first time --- */
.onlinew__body { display: grid; gap: 16px; padding-top: 8px; }
.onlinew__sw { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.onlinew__sw b, .onlinew__addr > b, .onlinew__in > b { display: block; font-size: 14.5px; }
.onlinew__sw small, .onlinew__addr > small, .onlinew__in > small { display: block; color: var(--ink-62); font-size: 12.5px; line-height: 1.4; }
.onlinew__sw i { flex: none; width: 40px; height: 22px; border-radius: 999px; background: var(--ink-14); position: relative; transition: background var(--t-fast) ease; }
.onlinew__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform var(--t-fast) ease; }
.onlinew__sw[aria-checked="true"] i { background: var(--amn-green); }
.onlinew__sw[aria-checked="true"] i::after { transform: translateX(18px); }
.onlinew__sw:focus-visible, .onlinew__chip:focus-visible, .onlinew__copy:focus-visible, .onlinew__share > :focus-visible { outline: 2px solid var(--amn-green); outline-offset: 3px; border-radius: 8px; }
.onlinew__url { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-top: 8px; padding: 8px 8px 8px 12px; border: 1px solid var(--ink-14); border-radius: 11px; background: var(--amn-desert); font-size: 14px; }
.onlinew__base { color: var(--ink-62); }
.onlinew__url input { min-width: 0; max-width: 100%; padding: 3px 5px; border: 0; border-bottom: 2px solid var(--amn-green); border-radius: 4px 4px 0 0; background: #FFF3EA; font: 600 14px/1.3 var(--f-ui, inherit); color: var(--amn-green-dark); }
.onlinew__url input:focus { outline: 2px solid var(--amn-green); outline-offset: 1px; background: #fff; }
.onlinew__copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--ink-14); border-radius: 8px; background: #fff; font: 600 13px/1 var(--f-ui, inherit); color: var(--amn-black); cursor: pointer; }
.onlinew__copy:hover { background: var(--amn-cream); }
.onlinew__url.is-done { justify-content: space-between; margin: 4px 0 0; width: 100%; }
.onlinew__url.is-done a { font-weight: 600; color: var(--amn-green-dark); overflow-wrap: anywhere; }
.onlinew__problem { margin: 6px 0 0; font-size: 13px; color: var(--danger); }
.onlinew__hint { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-62); }
.onlinew__group { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--ink-08); border-radius: 13px; background: var(--amn-white); }
.onlinew__in { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--ink-08); }
.onlinew__in[hidden] { display: none; }
.onlinew__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -2px; }
.onlinew__chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border: 1px solid var(--ink-14); border-radius: 999px; background: #fff; font: 600 13px/1 var(--f-ui, inherit); color: var(--ink-62); cursor: pointer; }
.onlinew__chip.is-on { border-color: var(--amn-green); background: #FFF3EA; color: var(--amn-black); }
.onlinew__chip:disabled { cursor: default; opacity: .5; border-style: dashed; }
.onlinew__tk svg { width: 13px; height: 13px; display: block; fill: none; stroke: var(--amn-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.onlinew__add { font-size: 12.5px; color: var(--ink-62); }
.onlinew__add a { color: var(--amn-black); font-weight: 600; }
.onlinew__state { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-62); }
.onlinew__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-45, rgba(33, 39, 36, .45)); }
.onlinew__state.is-live .onlinew__dot { background: #2E9B52; box-shadow: 0 0 0 4px rgba(46, 155, 82, .16); }
.onlinew__note { margin: 0; padding: 10px 12px; border-radius: 10px; background: #FFF3EA; font-size: 13.5px; }
.onlinew__enq { border: 1px solid var(--ink-08); border-radius: 13px; }
.onlinew__enq summary { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.onlinew__enq summary span { padding: 2px 8px; border-radius: 999px; background: var(--amn-green); color: #fff; font-size: 12px; }
.onlinew__enq ul { list-style: none; margin: 0; padding: 0 14px 12px; display: grid; gap: 10px; }
.onlinew__enq li { padding-top: 10px; border-top: 1px solid var(--ink-08); font-size: 13px; }
.onlinew__enq li div { display: flex; justify-content: space-between; gap: 8px; }
.onlinew__enq time { color: var(--ink-62); }
.onlinew__enq p { margin: 4px 0; white-space: pre-line; }
.onlinew__enq a { color: var(--amn-green-dark); }
.onlinew .sharew__foot .btn { text-decoration: none; }
.onlinew__busy { color: var(--amn-black); }
.onlineqr { display: grid; justify-items: center; gap: 8px; }
.onlineqr img { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--ink-08); border-radius: 8px; }
.onlineqr p { margin: 0; font-size: 13px; color: var(--ink-62); overflow-wrap: anywhere; text-align: center; }
/* The moment it goes live: the rocket rises, its flame flickers, the speed
   lines run past; then the ways to share it. */
.onlinew--live { position: relative; width: min(540px, calc(100vw - 32px)); max-width: none; padding: 28px 28px 22px; text-align: center; }
.onlinew--live[open] { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.onlinew--live .dialog__title { margin: 0; font-size: 22px; }
.onlinew__lead { margin: 0; color: var(--ink-62); font-size: 14.5px; }
.onlinew__to { margin-top: 8px; font-size: 13px; color: var(--ink-62); }
.onlinew__share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.onlinew__share > a, .onlinew__share > button { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border: 1px solid var(--ink-14); border-radius: 10px; background: #fff; font: 600 13.5px/1 var(--f-ui, inherit); color: var(--amn-black); text-decoration: none; cursor: pointer; }
.onlinew__share > a:hover, .onlinew__share > button:hover { border-color: rgba(251, 94, 0, .5); background: #FFF8F2; }
.onlinew__go { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.onlinew__go .btn { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; }
.rk svg { display: block; overflow: visible; }
.rk__ship { animation: rkLift 1.6s cubic-bezier(.3, .7, .2, 1) both, rkHover 2.4s ease-in-out 1.6s infinite; }
.rk__flame { transform-origin: 80px 128px; animation: rkFlame .18s ease-in-out infinite alternate; }
.rk__lines path { stroke-dasharray: 26; animation: rkLines .9s linear infinite; }
.rk__lines path:nth-child(2) { animation-delay: .3s; }
.rk__lines path:nth-child(3) { animation-delay: .5s; }
.rk__lines path:nth-child(4) { animation-delay: .15s; }
@keyframes rkLift { from { transform: translateY(60px); opacity: 0; } 30% { opacity: 1; } to { transform: none; } }
@keyframes rkHover { 50% { transform: translateY(-5px); } }
@keyframes rkFlame { from { transform: scaleY(.85); } to { transform: scaleY(1.12); } }
@keyframes rkLines { from { stroke-dashoffset: 52; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .rk__ship, .rk__flame, .rk__lines path { animation: none; } }
/* Contact details typed in the window (2026-10-21, the user: no detour to
   Account). A tick says whether it shows on the page. */
.onlinew__details { display: grid; gap: 6px; }
.onlinew__detail { display: grid; grid-template-columns: 20px 76px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.onlinew__detail input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--amn-green); cursor: pointer; }
.onlinew__detail input:not([type="checkbox"]) { width: 100%; padding: 8px 10px; border: 1px solid var(--ink-14); border-radius: 9px; background: #fff; font: 400 14px/1.3 var(--f-ui, inherit); color: var(--amn-black); }
.onlinew__detail input:not([type="checkbox"]):focus { outline: 2px solid var(--amn-green); outline-offset: 0; border-color: transparent; }
.onlinew__detail input::placeholder { color: var(--ink-45, rgba(33, 39, 36, .45)); }
.onlinew__problem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.onlinew__problem[hidden] { display: none; }
.onlinew__alt { padding: 5px 10px; border: 1px solid rgba(251, 94, 0, .45); border-radius: 8px; background: #FFF3EA; font: 600 12.5px/1 var(--f-ui, inherit); color: var(--amn-green-dark); cursor: pointer; }
.onlinew__alt:hover { background: #FFE6D4; }
/* The "you're online" card, tidied (2026-10-21): the address on one line
   beside Copy, the five ways to share as one even row of tiles. */
.onlinew--live { width: min(560px, calc(100vw - 32px)); gap: 12px; }
.onlinew--live .rk svg { width: 120px; height: 128px; }
.onlinew__link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 6px; padding: 6px 6px 6px 14px; border: 1px solid var(--ink-14); border-radius: 12px; background: var(--amn-desert); }
.onlinew__link a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; font: 600 14px/1.4 var(--f-ui, inherit); color: var(--amn-black); text-decoration: none; }
.onlinew__link a:hover { color: var(--amn-green-dark); }
.onlinew__link .onlinew__copy { margin: 0; flex: none; }
.onlinew--live .onlinew__to { margin-top: 10px; }
.onlinew--live .onlinew__share { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; width: 100%; }
.onlinew--live .onlinew__share > a, .onlinew--live .onlinew__share > button { flex-direction: column; justify-content: center; gap: 7px; padding: 12px 4px 10px; font-size: 12.5px; white-space: nowrap; }
.onlinew--live .onlinew__share .sharew__bic svg { width: 20px; height: 20px; }
.onlinew--live .onlinew__go { width: 100%; display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; }
.onlinew--live .onlinew__go .btn { justify-content: center; }
@media (max-width: 480px) { .onlinew--live .onlinew__share { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.onlinew__words { gap: 8px; }
.onlinew__words > b { font-size: 14.5px; }
.onlinew__words > small { margin-top: -6px; color: var(--ink-62); font-size: 12.5px; line-height: 1.4; }
.onlinew__words .onlinew__detail { grid-template-columns: 76px minmax(0, 1fr); }

/* -- The online page editor (2026-10-21, option C): full screen, settings on
   the left, the real public page on the right (laptop or phone). ---------- */
.olx { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--amn-cream); display: flex; flex-direction: column; }
.olx:not([open]) { display: none; }
.olx::backdrop { background: rgba(22, 27, 24, .5); }
.olx[open] { animation: csFade var(--t-base) var(--ease-out); }
.olx__bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px; height: var(--bar-h); padding: 0 16px; background: var(--amn-white); border-bottom: 1px solid var(--ink-08); flex: none; }
.olx__left, .olx__right { display: flex; align-items: center; gap: 10px; min-width: 0; }
.olx__right { justify-content: flex-end; }
.olx__bar .btn { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; text-decoration: none; }
.olx__name { display: flex; flex-direction: column; min-width: 0; }
.olx__name b { font-size: 15px; }
.olx__state { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-62); white-space: nowrap; }
.olx__state .onlinew__dot { width: 8px; height: 8px; }
.olx__state .onlinew__dot.is-on { background: #2E9B52; box-shadow: 0 0 0 3px rgba(46, 155, 82, .16); }
.olx__dev button { display: inline-flex; align-items: center; gap: 6px; }
.olx__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 380px minmax(0, 1fr); }
.olx__side { display: flex; flex-direction: column; min-height: 0; background: var(--amn-white); border-right: 1px solid var(--ink-08); }
.olx__tabs { display: flex; gap: 2px; padding: 8px 14px 0; border-bottom: 1px solid var(--ink-08); flex: none; }
.olx__tabs button { flex: 1; padding: 11px 6px; border: 0; border-bottom: 2px solid transparent; background: none; font: 600 14px/1 var(--f-ui, inherit); color: var(--ink-62); cursor: pointer; }
.olx__tabs button:hover { color: var(--amn-black); }
.olx__tabs button.is-on { color: var(--amn-black); border-bottom-color: var(--amn-green); }
.olx__panel { flex: 1; overflow: auto; padding: 18px; display: grid; align-content: start; gap: 16px; }
.olx__panel [hidden] { display: none !important; }
.olx__foot { margin: 0; padding: 12px 18px; border-top: 1px solid var(--ink-08); background: var(--amn-desert); font-size: 13px; color: var(--ink-62); flex: none; }
.olx__view { min-width: 0; min-height: 0; display: grid; place-items: center; padding: 18px; background: #D9D6CC; }
.olx__frame { width: 100%; height: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(22, 27, 24, .25); background: #161B18; transition: width var(--t-base) var(--ease-out); }
.olx__frame.is-phone { width: 390px; max-height: 844px; border-radius: 28px; border: 8px solid #161B18; }
.olx__frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.olx__btnwords { display: flex; flex-wrap: wrap; gap: 6px; }
.olx__own { grid-template-columns: 76px minmax(0, 1fr); }
.olx__peek { justify-self: start; }
.olx__logo { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: center; }
.olx__logo img { width: 88px; height: 52px; object-fit: contain; padding: 6px; border: 1px solid var(--ink-08); border-radius: 10px; background: #fff; }
.olx__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.olx__sw { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px var(--ink-14); cursor: pointer; padding: 0; }
.olx__sw.is-on { box-shadow: 0 0 0 2px var(--amn-black); }
.olx__sw--own { background: conic-gradient(#E33, #EB3, #3C6, #3BE, #36E, #C3E, #E33); overflow: hidden; }
.olx__sw--own input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.olx__colnote { font-size: 12.5px; color: var(--ink-62); }
.olx__colnote.is-own { color: var(--amn-green-dark); font-weight: 600; }
.olx__g { padding: 12px 14px; border: 1px solid var(--ink-08); border-radius: 10px; background: #fff; font-family: Arial, sans-serif; }
.olx__gu { font-size: 12px; color: #202124; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.olx__gt { margin: 3px 0; font-size: 18px; line-height: 1.3; color: #1A0DAB; }
.olx__gd { font-size: 13px; line-height: 1.45; color: #4D5156; }
.olx__field { display: grid; gap: 6px; font-size: 13.5px; font-weight: 600; }
.olx__field > span { display: flex; justify-content: space-between; align-items: center; }
.olx__field input, .olx__field textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--ink-14); border-radius: 9px; font: 400 14px/1.4 var(--f-ui, inherit); color: var(--amn-black); resize: vertical; }
.olx__field input:focus, .olx__field textarea:focus { outline: 2px solid var(--amn-green); outline-offset: 0; border-color: transparent; }
.olx__count { font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #FFF1DA; color: #9A6100; }
.olx__count.is-ok { background: #E3F3E8; color: #2E7D4A; }
.olx__tip { margin-top: -8px; font-size: 12.5px; color: var(--ink-62); }
.onlinew__go { flex-wrap: wrap; }
.onlinew--live .onlinew__go { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1100px) { .olx__main { grid-template-columns: 340px minmax(0, 1fr); } .olx__right [data-qr] { display: none; } }
.olx__frame { position: relative; }
.olx__right [hidden] { display: none; }

/* Preview on a free account (2026-10-21, docs/free-uses-everything-options.html):
   one quiet line under the book, nowhere else. */
.flip__pro { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 20px 18px; font-size: 14px; opacity: .85; }
.flip__pro .btn { height: 32px; }

/* A button that's working (lib/page.php, 2026-10-21): pressed once, a small
   spinner and its "Sending…" words; further presses do nothing. */
.is-busy { pointer-events: none; cursor: progress; }
.btn.is-busy { opacity: .85; }
.btn__spin { display: inline-block; width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: btnSpin .7s linear infinite; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn__spin { animation-duration: 2s; } }

/* The back button in Preview too (the user, 2026-10-21): the same one as the
   editor's bar, in Preview's colours. */
.flip__left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.flip__home { color: rgba(255, 255, 255, 0.7); }
.flip__home:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.flip--light .flip__home { color: var(--ink-62); }
.flip--light .flip__home:hover { background: rgba(22, 27, 24, 0.06); color: var(--amn-black); }
/* Edit data for the map (2026-10-23): a tick per state; the state names fixed. */
.dgrid td.dgrid__tick { text-align: center; }
.dgrid td.dgrid__tick input { width: 18px; height: 18px; accent-color: #FB5E00; }
.dgrid input[readonly] { background: var(--amn-cream); color: var(--ink-62); }
/* Enquiries (2026-10-23): the page, the count in the account menu, the notice on the statements page. */
.acct__count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: #FB5E00; color: #fff; font-size: 11.5px; font-weight: 700; font-style: normal; display: inline-grid; place-items: center; }
.enq-notice { display: inline-block; margin-top: 8px; padding: 6px 12px; border-radius: 999px; background: #FDE8DC; color: #B84400; font-weight: 600; font-size: 13.5px; text-decoration: none; }
.enq-notice:hover { background: #FBD9C6; }
.enq-list { padding: 0; }
.enq { padding: 18px 22px; border-top: 1px solid var(--ink-08); }
.enq:first-child { border-top: 0; }
.enq header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.enq header time { margin-left: auto; color: var(--ink-45); font-size: 13px; }
.enq__new { padding: 1px 8px; border-radius: 999px; background: #FB5E00; color: #fff; font-size: 11px; font-weight: 700; }
.enq.is-new { background: #FFF8F2; }
.enq__msg { margin: 8px 0 12px; white-space: normal; }
.enq__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.enq__foot .btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.enq__from { margin-left: auto; color: var(--ink-45); font-size: 13px; }
.enq-empty p { color: var(--ink-62); }
/* What's new (2026-10-23): the dot, the list, the one card for a big change. */
.news__dot { position: absolute; top: 4px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: #FB5E00; box-shadow: 0 0 0 2px #fff; pointer-events: none; }
#helpBtn, #userBtn, #helpMenu [data-help="news"], #userMenu [data-news] { position: relative; }
#helpMenu [data-help="news"] .news__dot, #userMenu [data-news] .news__dot { top: 50%; right: 12px; margin-top: -4px; }
.dialog.news { width: min(520px, calc(100vw - 32px)); }
.news__list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-height: min(60vh, 520px); overflow: auto; }
.news__list li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.news__list li.is-new { background: #FFF3EA; }
.news__list time { color: var(--ink-45); font-size: 12.5px; padding-top: 2px; }
.news__list b { display: block; font-size: 14px; }
.news__list p { margin: 2px 0 0; color: var(--ink-62); font-size: 13px; }
.news__kicker { margin: 0; color: #FB5E00; font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
/* Brand set-up: the company name from sign-up, shown, not asked again (2026-10-23). */
.bsetup__known { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--amn-cream); margin-bottom: 12px; }
.bsetup__known span { color: var(--ink-62); font-size: 12.5px; }
.bsetup__known b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }