/* public/assets/ct-looks.css — the shared paper looks, on the page
   ---------------------------------------------------------------------------
   One look catalogue (config/og/looks.json) paints the chat card (og-chrome-core.js)
   and the page. The region below is GENERATED by scripts/build-looks.mjs — per
   look, the `--look-*` variables and its decoration rules, on
   `.ct-paper[data-look]` (any tool's paper) and `.nl-paper[data-look]` (the
   NoteLink / ListLink papers, whose typography lives in ct-note.css and
   ct-list.css and reads the same variables). Edit looks.json, then
   `npm run build:looks`; do not edit the region by hand.

   Variables:  --look-paper --look-text --look-head --look-muted --look-faint
               --look-mark --look-rule --look-ring --look-track --look-quote-bg
               --look-box --look-box-check --look-border --look-code-bg
               --look-link --look-scheme
   The server sets --look-mark-exact inline (from OG.lookMarks) where a mark
   is derived from the theme, so the page uses the exact hex the card drew.

   Below the region: the generic `.ct-paper` (hero / body cards on any
   participant page), the look picker's miniatures and the dropdown shell
   the creators share (mounted by ct-core's CT.looks / CT.dropdown).

   Loaded by every /a/:tool/:id page, every creator and every admin page. */

/* ct:looks:start (generated by scripts/build-looks.mjs from config/og/looks.json; do not edit) */
/* 6 looks · default "plain" · spec 2026-09-23 */
/* Defaults (no data-look, or the default look) */
.ct-paper, .nl-paper {
  --look-paper: var(--card);
  --look-text: color-mix(in srgb, var(--text) 82%, var(--card));
  --look-head: var(--text);
  --look-muted: var(--muted);
  --look-faint: var(--muted);
  --look-mark: var(--accent);
  --look-accent-text: var(--accent);
  --look-bar: var(--accent);
  --look-rule: var(--ring);
  --look-ring: var(--ring);
  --look-track: color-mix(in srgb, var(--accent) 14%, var(--card));
  --look-quote-bg: color-mix(in srgb, var(--accent) 10%, var(--card));
  --look-box: var(--accent);
  --look-box-check: #ffffff;
  --look-border: var(--ring);
  --look-code-bg: var(--card-soft);
  --look-link: var(--accent);
  --look-surface: var(--card);
  --look-surface-soft: var(--card-soft);
  --look-surface-solid: var(--card-soft);
  --look-surface-line: var(--ring);
  --look-scheme: light;
}

/* ---- plain: Clean (White paper, one accent rule) ---- */
.ct-paper[data-look="plain"], .nl-paper[data-look="plain"] {
  --look-paper: var(--card);
  --look-text: color-mix(in srgb, var(--text) 82%, var(--card));
  --look-head: var(--text);
  --look-muted: var(--muted);
  --look-faint: var(--muted);
  --look-mark: var(--accent);
  --look-accent-text: var(--accent);
  --look-bar: var(--accent);
  --look-rule: var(--ring);
  --look-ring: var(--ring);
  --look-track: color-mix(in srgb, var(--accent) 14%, var(--card));
  --look-quote-bg: color-mix(in srgb, var(--accent) 10%, var(--card));
  --look-box: var(--accent);
  --look-box-check: #ffffff;
  --look-border: var(--ring);
  --look-code-bg: var(--card-soft);
  --look-link: var(--accent);
  --look-surface: var(--card);
  --look-surface-soft: var(--card-soft);
  --look-surface-solid: var(--card-soft);
  --look-surface-line: var(--ring);
  --look-scheme: light;
}

/* ---- memo: Memo (Tinted band, ruled lines) ---- */
.ct-paper[data-look="memo"], .nl-paper[data-look="memo"] {
  --look-paper: var(--card);
  --look-text: color-mix(in srgb, var(--text) 82%, var(--card));
  --look-head: var(--text);
  --look-muted: var(--muted);
  --look-faint: var(--muted);
  --look-mark: var(--accent);
  --look-accent-text: var(--accent);
  --look-bar: var(--accent);
  --look-rule: var(--ring);
  --look-ring: var(--ring);
  --look-track: color-mix(in srgb, var(--accent) 14%, var(--card));
  --look-quote-bg: color-mix(in srgb, var(--accent) 10%, var(--card));
  --look-box: var(--accent);
  --look-box-check: #ffffff;
  --look-border: var(--ring);
  --look-code-bg: var(--card-soft);
  --look-link: var(--accent);
  --look-surface: var(--card);
  --look-surface-soft: var(--card-soft);
  --look-surface-solid: var(--card-soft);
  --look-surface-line: var(--ring);
  --look-scheme: light;
}
/* memo: tinted band + ruled lines */
.nl-paper[data-look="memo"]::before { display: none; }
.nl-paper[data-look="memo"] .nl-rendered {
  padding: 44px 22px 18px;
  background-image: linear-gradient(to bottom, transparent calc(var(--nl-lh) - 1px), var(--nl-rule) calc(var(--nl-lh) - 1px));
  background-size: 100% var(--nl-lh);
  background-position: 0 44px;
  background-attachment: local;
}
.nl-paper[data-look="memo"] .nl-rendered::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: color-mix(in srgb, var(--accent) 13%, var(--look-paper));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.nl-paper[data-look="memo"] .nl-rendered .nl-h1,
.nl-paper[data-look="memo"] .nl-rendered .nl-h2 { line-height: var(--nl-lh); padding-bottom: 0; margin-bottom: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-h1 { font-size: 1.45rem; }
.nl-paper[data-look="memo"] .nl-rendered .nl-h1::after { display: none; }
.nl-paper[data-look="memo"] .nl-rendered .nl-h2 { margin-top: var(--nl-lh); margin-bottom: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-h3 { line-height: var(--nl-lh); margin: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-p { margin-bottom: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-list { margin-bottom: 0 !important; }
.nl-paper[data-look="memo"] .nl-rendered .nl-list > li { margin-bottom: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-quote { margin: 0; padding: 0 14px; line-height: var(--nl-lh); border-radius: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-quote-body p { margin: 0; }
.nl-paper[data-look="memo"] .nl-rendered .nl-hr { margin: calc(var(--nl-lh) / 2 - 1px) 0; height: 2px; background: var(--nl-mark); opacity: .5; }
.nl-paper[data-look="memo"] .nl-rendered .nl-h1 + .nl-p { font-size: 1.02rem; }
.lsPaper[data-look="memo"] {
  padding: 42px 16px 16px 20px;
  background-image: linear-gradient(to bottom, transparent calc(48px - 1px), var(--nl-rule) calc(48px - 1px));
  background-size: 100% 48px; background-position: 0 42px;
}
.lsPaper[data-look="memo"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28px;
  background: color-mix(in srgb, var(--accent) 13%, var(--look-paper)); border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.lsPaperHero[data-look="memo"] { padding-top: 30px; }
.lsPaperHero[data-look="memo"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 13%, var(--look-paper)); border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.ct-paper[data-look="memo"]::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 18px; border-radius: 0; opacity: 1; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 13%, var(--look-paper)); border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.ct-paper[data-look="memo"] { padding-top: calc(var(--ct-paper-pad-top, 20px) + 18px); }
/* On a paper layout (Page / Columns) the band sits at the paper's top, above the title, as on the card. */
.nl-paper[data-layout="page"][data-look="memo"] .nl-rendered::before, .nl-paper[data-layout="columns"][data-look="memo"] .nl-rendered::before { display: none; }
.nl-paper[data-layout="page"][data-look="memo"] .nl-rendered, .nl-paper[data-layout="columns"][data-look="memo"] .nl-rendered { padding-top: 12px; background-position: 0 12px; }
.nl-paper[data-layout="page"][data-look="memo"]::after, .nl-paper[data-layout="columns"][data-look="memo"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18px; pointer-events: none;
  background: color-mix(in srgb, var(--accent) 13%, var(--look-paper)); border-bottom: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}
.nl-paper[data-layout="page"][data-look="memo"] .nlHead, .nl-paper[data-layout="columns"][data-look="memo"] .nlHead { padding-top: 30px; }
.nl-look-thumb .nl-paper[data-look="memo"] .nl-rendered { padding: 3.2em 1.4em 1em 1.4em !important; background-position: 0 3.2em !important; }
.nl-look-thumb .nl-paper[data-look="memo"] .nl-rendered::before { height: 2em !important; border-bottom-width: 1.5px !important; }
.nl-look-thumb .nl-paper[data-look="memo"] .nl-h1 { margin-bottom: 0 !important; line-height: var(--nl-lh) !important; }
.nl-look-thumb .nl-paper[data-look="memo"] .nl-h1::after { display: none !important; }

/* ---- poster: Poster (Dark paper, light type) ---- */
.ct-paper[data-look="poster"], .nl-paper[data-look="poster"] {
  --look-paper: #0e1f1a;
  --look-text: rgba(255,255,255,.9);
  --look-head: color-mix(in srgb, var(--accent) 45%, #ffffff);
  --look-muted: #94a39d;
  --look-faint: #66807a;
  --look-mark: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --look-accent-text: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --look-bar: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --look-rule: rgba(255,255,255,0.14);
  --look-ring: rgba(255,255,255,0.16);
  --look-track: rgba(255,255,255,0.14);
  --look-quote-bg: rgba(255,255,255,0.08);
  --look-box: color-mix(in srgb, var(--accent) 55%, #ffffff);
  --look-box-check: #0e1f1a;
  --look-border: rgba(255,255,255,.12);
  --look-code-bg: rgba(255,255,255,.1);
  --look-link: #ffffff;
  --look-surface: rgba(255,255,255,.08);
  --look-surface-soft: rgba(255,255,255,.12);
  --look-surface-solid: color-mix(in srgb, #0e1f1a 88%, #ffffff);
  --look-surface-line: rgba(255,255,255,.16);
  --look-scheme: dark;
}
[data-theme="dark"] .ct-paper[data-look="poster"], [data-theme="dark"] .nl-paper[data-look="poster"] { --look-border: rgba(255,255,255,.18); }

/* ---- notebook: Notebook (Dotted grid, soft paper) ---- */
.ct-paper[data-look="notebook"], .nl-paper[data-look="notebook"] {
  --look-paper: var(--card-soft);
  --look-text: color-mix(in srgb, var(--text) 82%, var(--card));
  --look-head: var(--text);
  --look-muted: var(--muted);
  --look-faint: var(--muted);
  --look-mark: var(--accent);
  --look-accent-text: var(--accent);
  --look-bar: var(--accent);
  --look-rule: var(--ring);
  --look-ring: var(--ring);
  --look-track: color-mix(in srgb, var(--accent) 14%, var(--card));
  --look-quote-bg: color-mix(in srgb, var(--accent) 10%, var(--card));
  --look-box: var(--accent);
  --look-box-check: #ffffff;
  --look-border: var(--ring);
  --look-code-bg: var(--card);
  --look-link: var(--accent);
  --look-surface: var(--card);
  --look-surface-soft: var(--card-soft);
  --look-surface-solid: var(--card-soft);
  --look-surface-line: var(--ring);
  --look-scheme: light;
}
/* notebook: dotted grid */
.ct-paper[data-look="notebook"], .nl-paper[data-look="notebook"] {
  background-image: radial-gradient(color-mix(in srgb, var(--ring-strong) 75%, transparent) 1.3px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: 11px 11px;
}
.nl-look-thumb .nl-paper[data-look="notebook"] { background-size: 1.7em 1.7em !important; background-position: .85em .85em !important; }

/* ---- sticky: Sticky note (Warm yellow, theme-colour marks) ---- */
.ct-paper[data-look="sticky"], .nl-paper[data-look="sticky"] {
  --look-paper: #fff1a8;
  --look-text: #4a3d0f;
  --look-head: #2a2208;
  --look-muted: #8a7a3a;
  --look-faint: #8a7a3a;
  --look-mark: var(--look-mark-exact, color-mix(in srgb, var(--accent) 88%, #2a2208));
  --look-accent-text: var(--look-mark-exact, color-mix(in srgb, var(--accent) 88%, #2a2208));
  --look-bar: var(--look-mark-exact, color-mix(in srgb, var(--accent) 88%, #2a2208));
  --look-rule: rgba(74,61,15,0.16);
  --look-ring: rgba(74,61,15,0.14);
  --look-track: rgba(74,61,15,0.14);
  --look-quote-bg: rgba(255,255,255,0.5);
  --look-box: var(--look-mark-exact, color-mix(in srgb, var(--accent) 88%, #2a2208));
  --look-box-check: #ffffff;
  --look-border: #efd97a;
  --look-code-bg: rgba(255,255,255,.55);
  --look-link: var(--look-mark-exact, color-mix(in srgb, var(--accent) 88%, #2a2208));
  --look-surface: rgba(255,255,255,.62);
  --look-surface-soft: rgba(255,255,255,.4);
  --look-surface-solid: color-mix(in srgb, #fff1a8 55%, #ffffff);
  --look-surface-line: rgba(74,61,15,0.14);
  --look-scheme: light;
}
/* sticky: glue strip along the top, in the theme colour */
.ct-paper[data-look="sticky"]::before, .nl-paper[data-look="sticky"]::before {
  left: 0; right: 0; top: 0; bottom: auto;
  width: auto; height: 18px; border-radius: 0;
  background: color-mix(in srgb, var(--nl-mark, var(--look-mark)) 20%, transparent);
  opacity: 1;
}
.nl-paper[data-look="sticky"] .nl-rendered { padding-top: 30px; padding-left: 22px; }
.lsPaper[data-look="sticky"], .lsPaperHero[data-look="sticky"] { padding-top: 30px; }
.lsPaperHero[data-look="sticky"]::before { display: block; }
.ct-paper[data-look="sticky"] { padding-top: calc(var(--ct-paper-pad-top, 20px) + 12px); }
.nl-look-thumb .nl-paper[data-look="sticky"]::before { height: 1.6em !important; }
.nl-look-thumb .nl-paper[data-look="sticky"] .nl-rendered { padding: 2.6em 1.4em 1em 1.6em !important; }

/* ---- blueprint: Blueprint (Deep blue grid, white type) ---- */
.ct-paper[data-look="blueprint"], .nl-paper[data-look="blueprint"] {
  --look-paper: #143f80;
  --look-text: #e6efff;
  --look-head: #ffffff;
  --look-muted: #a9c2ea;
  --look-faint: #a9c2ea;
  --look-mark: var(--look-mark-exact, color-mix(in oklab, var(--accent) 45%, #ffffff));
  --look-accent-text: var(--look-mark-exact, color-mix(in oklab, var(--accent) 45%, #ffffff));
  --look-bar: var(--look-mark-exact, color-mix(in oklab, var(--accent) 45%, #ffffff));
  --look-rule: rgba(255,255,255,0.22);
  --look-ring: rgba(255,255,255,0.18);
  --look-track: rgba(255,255,255,0.16);
  --look-quote-bg: rgba(255,255,255,0.1);
  --look-box: var(--look-mark-exact, color-mix(in oklab, var(--accent) 45%, #ffffff));
  --look-box-check: #143f80;
  --look-border: rgba(255,255,255,.18);
  --look-code-bg: rgba(255,255,255,.12);
  --look-link: #ffffff;
  --look-surface: rgba(255,255,255,.08);
  --look-surface-soft: rgba(255,255,255,.12);
  --look-surface-solid: color-mix(in srgb, #143f80 88%, #ffffff);
  --look-surface-line: rgba(255,255,255,.16);
  --look-scheme: dark;
}
[data-theme="dark"] .ct-paper[data-look="blueprint"], [data-theme="dark"] .nl-paper[data-look="blueprint"] { --look-border: rgba(255,255,255,.18); }
/* blueprint: blueprint squares */
.ct-paper[data-look="blueprint"], .nl-paper[data-look="blueprint"] {
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 26px 26px;
}
.nl-look-thumb .nl-paper[data-look="blueprint"] { background-size: 2em 2em !important; }
/* ct:looks:end */

/* ================= Generic paper ================= */

.ct-paper {
  position: relative;
  background: var(--look-paper);
  color: var(--look-text);
  border: 1px solid var(--look-border);
  color-scheme: var(--look-scheme);
  overflow: hidden;
}
.ct-paper::before {
  content: "";
  position: absolute;
  left: 12px; top: 18px; bottom: 18px;
  width: 4px; border-radius: 2px;
  background: var(--look-mark);
  opacity: .9;
  pointer-events: none;
}
.ct-paper h1, .ct-paper h2, .ct-paper h3, .ct-paper strong { color: var(--look-head); }
.ct-paper .participant-hero-subtitle, .ct-paper .muted, .ct-paper small { color: var(--look-muted); }
.ct-paper a { color: var(--look-link); }
.ct-paper .participant-hero-badge {
  color: var(--look-head);
  background: color-mix(in srgb, var(--look-mark) 14%, transparent);
  border-color: var(--look-ring);
}
.ct-paper .participant-hero-badge-ic { color: var(--look-mark); }
.ct-paper .participant-hero-action { background: var(--look-mark); color: var(--look-box-check); }
.ct-paper .participant-hero-action:hover { filter: brightness(1.06); }
/* The default look is the site's own card: keep the accent spine only when
   a look is chosen, so unchanged pages stay unchanged. */
.ct-paper:not([data-look]), .ct-paper[data-look="plain"] { border-color: var(--ring); }
.ct-paper:not([data-look])::before { display: none; }

/* ================= Look picker (miniatures) ================= */
/* Each option is a real miniature paper: the same [data-look] CSS, scaled in
   em, so a new look previews itself. Markup is rendered by CT.looks. */

.ct-looks {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.ct-looks::-webkit-scrollbar { display: none; }
.ct-look {
  flex: 0 0 auto;
  width: 132px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  margin: 0;
}
.ct-look input {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}
.ct-look-thumb {
  position: relative;
  display: block;
  height: 96px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--ring);
  background: var(--card-soft);
  transition: transform var(--t), box-shadow var(--t);
}
.ct-look:hover .ct-look-thumb { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-hover); }
.ct-look input:checked + .ct-look-thumb {
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent);
}
.ct-look input:focus-visible + .ct-look-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.ct-look-thumb::after {
  content: "";
  position: absolute;
  right: 8px; top: 8px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent) center / 10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.4 2.4L9.6 3.6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  opacity: 0;
  transform: scale(.6);
  transition: opacity var(--t), transform var(--t);
}
.ct-look input:checked + .ct-look-thumb::after { opacity: 1; transform: scale(1); }
.ct-look-name {
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.2;
}
.ct-look-hint {
  font-size: .74rem;
  color: var(--muted);
  line-height: 1.25;
}
.ct-look input:checked ~ .ct-look-name { color: var(--accent); }

/* The miniature: a scaled paper with a title and a few rows. */
.ct-look-thumb .ct-paper {
  position: absolute;
  inset: 10px 10px auto 10px;
  font-size: 5.6px;
  border-radius: 8px;
  padding: 1.2em 1.4em 1.2em 2.2em;
  min-height: 130%;
  pointer-events: none;
}
.ct-look-thumb .ct-paper::before { left: .9em; top: 1.3em; bottom: 1.3em; width: 3px; display: block; }
.ct-look-thumb .ct-paper[data-look="plain"], .ct-look-thumb .ct-paper:not([data-look]) { border-color: var(--look-border); }
.ct-look-thumb .ct-mini-h { display: block; font-size: 1.6em; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; color: var(--look-head); margin: 0 0 .5em; }
.ct-look-thumb .ct-mini-rule { display: block; width: 2.4em; height: 2px; border-radius: 1px; background: var(--look-mark); margin: 0 0 .7em; }
.ct-look-thumb .ct-mini-row { display: flex; align-items: center; gap: .55em; margin: 0 0 .45em; font-size: 1.05em; line-height: 1.2; color: var(--look-text); white-space: nowrap; }
.ct-look-thumb .ct-mini-box { flex: 0 0 auto; width: 1.3em; height: 1.3em; border-radius: 3px; border: 1.5px solid var(--look-box); box-sizing: border-box; }
.ct-look-thumb .ct-mini-row.is-done .ct-mini-box { background: var(--look-box); position: relative; }
.ct-look-thumb .ct-mini-row.is-done .ct-mini-box::after { content: ""; position: absolute; left: .32em; top: .05em; width: .3em; height: .6em; border: solid var(--look-box-check); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.ct-look-thumb .ct-mini-row.is-done { color: var(--look-muted); text-decoration: line-through; }
.ct-look-thumb .ct-mini-bar { display: block; height: .7em; border-radius: .35em; background: var(--look-track); margin: .3em 0 .55em; overflow: hidden; }
.ct-look-thumb .ct-mini-bar i { display: block; width: 62%; height: 100%; background: var(--look-mark); }
.ct-look-thumb .ct-paper[data-look="memo"] { padding-top: 3.2em; }
.ct-look-thumb .ct-paper[data-look="memo"]::before { height: 2em; border-bottom-width: 1.5px; }
.ct-look-thumb .ct-paper[data-look="notebook"] { background-size: 1.7em 1.7em; background-position: .85em .85em; }
.ct-look-thumb .ct-paper[data-look="sticky"] { padding-top: 2.6em; }
.ct-look-thumb .ct-paper[data-look="sticky"]::before { height: 1.6em; }
.ct-look-thumb .ct-paper[data-look="blueprint"] { background-size: 2em 2em; }

/* ================= Layout picker (creator + admin) ================= */
/* Each option is a drawn icon of the layout (see .ll-icon below). */

.ll-layouts { display: flex; gap: 10px; margin-top: 8px; padding: 4px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ll-layouts::-webkit-scrollbar { display: none; }
.ll-layout { position: relative; flex: 0 0 auto; width: 132px; margin: 0; cursor: pointer; scroll-snap-align: start; -webkit-tap-highlight-color: transparent; }
.ll-layout input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ll-layout-thumb {
  display: block; position: relative; height: 98px; border-radius: 14px; overflow: hidden; background: var(--bg);
  box-shadow: 0 0 0 1px var(--ring), var(--shadow-xs); transition: transform var(--t), box-shadow var(--t); pointer-events: none;
}
.ll-layout:hover .ll-layout-thumb { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--ring-strong), var(--shadow-hover); }
.ll-layout input:checked + .ll-layout-thumb { box-shadow: 0 0 0 2px var(--accent), 0 0 0 5px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-soft); }
.ll-layout input:focus-visible + .ll-layout-thumb { outline: 2px solid var(--accent); outline-offset: 3px; }
.ll-layout-thumb::after {
  content: ""; position: absolute; bottom: 7px; right: 7px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 12.5l4 4 8-9'/></svg>") center / 12px no-repeat;
  box-shadow: 0 1px 3px rgba(14,31,26,.25); opacity: 0; transform: scale(.6); transition: opacity var(--t-fast), transform var(--t-fast);
}
.ll-layout input:checked + .ll-layout-thumb::after { opacity: 1; transform: scale(1); }
.ll-layout-name { display: block; margin-top: 7px; font-size: .8rem; font-weight: 650; color: var(--text); line-height: 1.2; }
.ll-layout-hint { display: block; margin-top: 2px; font-size: .7rem; color: var(--muted); line-height: 1.3; }
.ll-layout input:checked ~ .ll-layout-name { color: var(--accent); }

/* The icons: drawn schematics of each layout (inline SVG in the markup),
   painted from the tokens so they follow the accent and dark mode. They
   scale cleanly into the dropdown's trigger swatch. */
.ll-icon { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ll-icon .llx-card { fill: var(--card); stroke: var(--ring-strong); stroke-width: 1; }
.ll-icon .llx-paper { fill: var(--card-soft); stroke: var(--ring-strong); stroke-width: 1; }
.ll-icon .llx-tile { fill: var(--card); stroke: var(--ring); stroke-width: 1; }
.ll-icon .llx-acc { fill: var(--accent); }
.ll-icon .llx-accsoft { fill: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.ll-icon .llx-ink { fill: color-mix(in srgb, var(--text) 82%, transparent); }
.ll-icon .llx-line { fill: color-mix(in srgb, var(--text) 24%, transparent); }
.ll-icon .llx-done { fill: color-mix(in srgb, var(--text) 13%, transparent); }
.ll-icon .llx-muted { fill: color-mix(in srgb, var(--text) 18%, transparent); }
.ll-icon .llx-rule { fill: color-mix(in srgb, var(--accent) 35%, transparent); }
.ll-icon .llx-box { fill: var(--card); stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-width: 1; }
.ll-icon .llx-tick { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ll-icon .llx-track { fill: none; stroke: color-mix(in srgb, var(--accent) 18%, var(--card)); stroke-width: 3.5; }
.ll-icon .llx-arc { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.ll-icon .llx-bandtext { fill: rgba(255,255,255,.9); }
.ll-icon .llx-chip { fill: var(--card); stroke: color-mix(in srgb, var(--text) 20%, transparent); stroke-width: 1; }
.ll-icon .llx-chip-on { fill: color-mix(in srgb, var(--accent) 14%, var(--card)); stroke: color-mix(in srgb, var(--accent) 45%, transparent); stroke-width: 1; }
.ll-icon .llx-dot { fill: none; stroke: color-mix(in srgb, var(--text) 38%, transparent); stroke-width: 1; }

@media (max-width: 480px) {
  .ll-layout { width: 120px; }
  .ll-layout-thumb { height: 90px; }
}

/* ================= Dropdown shell (Layout / Look pickers) ================= */
/* A fieldset with [data-ct-dropdown] becomes a pill trigger showing the
   chosen option's miniature + name; the options expand in-flow as a
   wrapping grid (every option visible, no inner scrolling). The radios stay
   the source of truth; without the script the options stay visible. Mounted
   by ct-core's CT.dropdown. */

.ct-dd-ready > legend { margin-bottom: 12px !important; }
.ct-dd-trigger {
  display: inline-flex; align-items: center; gap: 10px; width: auto; min-width: 0; margin: 0;
  padding: 7px 14px 7px 8px; border: 1px solid var(--ring); border-radius: 999px; background: var(--card);
  color: var(--text); font: inherit; font-weight: 600; cursor: pointer; box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.ct-dd-trigger:hover { background: var(--card); border-color: var(--ring-strong); box-shadow: var(--shadow); transform: none; }
.ct-dd-trigger:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ct-dd-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-dd-caret { margin-left: 2px; color: var(--muted); font-size: .85em; transition: transform var(--t-fast); }
.ct-dd-open .ct-dd-caret { transform: rotate(180deg); }
/* The swatch is the chosen option's own miniature, scaled into a 34×26 tile. */
.ct-dd-swatch { position: relative; flex: none; width: 34px; height: 26px; border-radius: 7px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--ring); background: var(--bg); }
.ct-dd-swatch-inner { position: absolute !important; left: 0; top: 0; width: 132px !important; height: 96px !important; transform: scale(.258); transform-origin: 0 0; border-radius: 0 !important; box-shadow: none !important; pointer-events: none; }
.ct-dd-swatch-inner::after { display: none !important; }
/* A layout icon is vector, so it is drawn at the swatch size, not scaled. */
.ct-dd-swatch-inner.ll-layout-thumb { width: 100% !important; height: 100% !important; transform: none; background: transparent; }
.ct-dd-panel { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height 240ms ease, opacity 160ms ease, margin-top 220ms ease; }
.ct-dd-open .ct-dd-panel { max-height: 600px; opacity: 1; margin-top: 10px; overflow: visible; }
.ct-dd-panel > [role="radiogroup"] {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px;
  margin-top: 0; padding: 12px; border: 1px solid var(--ring); border-radius: 16px; background: var(--card); box-shadow: var(--shadow-soft);
  overflow: visible; scroll-snap-type: none;
}
.ct-dd-panel > [role="radiogroup"] > label { width: auto; min-width: 0; flex: none; }
.ct-dd-panel .ct-look-thumb, .ct-dd-panel .ll-layout-thumb { height: 92px; }
@media (min-width: 640px) { .ct-dd-panel > .ct-looks { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .ct-dd-panel, .ct-dd-caret { transition: none; } }