/* FEATURE-019 (ADR 0016 §7): the studio shell — top bar, canvas and (FEATURE-107) one tabbed panel on the right
   (Sections · Settings · To do · History · AI assistant), the developer drawer; a tablet keeps the panel as a narrower
   column; phone (< 768 px): one view at a time, four bottom tabs and a non-modal bottom sheet. Scoped to .studio-body (every stylesheet is loaded on every page). The
   colours follow the approved mockups (light). */
.studio-body {
  --sx-bg: #f3f4f2; --sx-panel: #ffffff; --sx-line: #dfe2dd; --sx-fg: #1d211f; --sx-muted: #5a625d; --sx-accent: #2f6f5e;
  --sx-accent-weak: #e2efe9; --sx-warn: #8a4a00; --sx-warn-weak: #fbefdc; --sx-sample: #7a3fb0; --sx-sample-weak: #efe4f8;
  --sx-stock: #1f5f99; --sx-stock-weak: #e1edf8; --sx-danger: #a3271d; --sx-focus: #1f5fbf;
  margin: 0; background: var(--sx-bg); color: var(--sx-fg); font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.studio-body *, .studio-body *::before, .studio-body *::after { box-sizing: border-box; }
.studio-body button, .studio-body input, .studio-body select, .studio-body textarea { font: inherit; color: inherit; }
.studio-body :focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.studio-body--shell { height: 100vh; height: 100dvh; overflow: hidden; }
.studio-body [hidden] { display: none !important; }

/* Buttons, pills, menus */
.sx-btn { border: 1px solid var(--sx-line); background: var(--sx-panel); color: var(--sx-fg); border-radius: 8px; padding: 6px 11px; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center; text-decoration: none; min-height: 34px; line-height: 1.2; }
.sx-btn:hover { border-color: var(--sx-muted); }
.sx-btn--primary { background: var(--sx-accent); border-color: var(--sx-accent); color: #fff; }
.sx-btn--primary:hover { border-color: #1f4f42; background: #285f50; }
.sx-btn--ghost { border-color: transparent; background: transparent; }
.sx-btn--small { padding: 4px 9px; min-height: 30px; font-size: 13px; }
.sx-btn--danger { color: var(--sx-danger); border-color: #e7b8b3; }
.sx-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.sx-iconbtn { min-width: 36px; justify-content: center; font-size: 18px; padding: 4px 8px; }
.sx-inline { display: inline; margin: 0; }
.sx-pill { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; background: var(--sx-bg); color: var(--sx-muted); white-space: nowrap; }
.sx-pill--sample { background: var(--sx-sample-weak); color: var(--sx-sample); }
.sx-pill--stock { background: var(--sx-stock-weak); color: var(--sx-stock); }
.sx-pill--ok { background: var(--sx-accent-weak); color: var(--sx-accent); }
.sx-sev--high { background: #fbe1de; color: var(--sx-danger); }
.sx-sev--medium { background: var(--sx-warn-weak); color: var(--sx-warn); }
.sx-sev--low { background: #eceeec; color: var(--sx-muted); }
.sx-hint { color: var(--sx-muted); font-size: 12px; }
.sx-pad { padding: 0 16px; }
.sx-h { font-size: 16px; margin: 0; }
.sx-menuwrap { position: relative; }
.sx-menu { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; max-width: min(340px, 90vw); background: var(--sx-panel); border: 1px solid var(--sx-line);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: 6px; z-index: 30; display: flex; flex-direction: column; }
.sx-menu--right { left: auto; right: 0; }
.sx-menu ul { list-style: none; margin: 0; padding: 0; max-height: 50vh; overflow: auto; }
.sx-menu hr { border: 0; border-top: 1px solid var(--sx-line); margin: 4px 0; width: 100%; }
.sx-menu__head { font-size: 12px; color: var(--sx-muted); padding: 6px 8px; margin: 0; }
.sx-menu__item { border: 0; background: transparent; text-align: left; padding: 9px 8px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between;
  gap: 8px; color: var(--sx-fg); text-decoration: none; width: 100%; min-height: 40px; align-items: center; }
.sx-menu__item:hover { background: var(--sx-bg); }
.sx-menu__item small { color: var(--sx-muted); }
.sx-menu__item[aria-current="page"] { font-weight: 600; }

/* Shell grid */
/* FEATURE-019 follow-up: one column no wider than the screen (an implicit auto column grew to the top bar's content). */
/* Rows: top bar, main, developer drawer, phone tabs. The flash toasts are position: fixed and take no row (2026-10-22). */
.sx { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto auto; height: 100vh; height: 100dvh; }
.sx-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 8px 16px; background: var(--sx-panel); border-bottom: 1px solid var(--sx-line); }
.sx-brand { font-weight: 700; border-color: transparent; max-width: min(320px, 100%); }
/* FEATURE-019 follow-up (phone top bar): the wrapper and the name may shrink below their content; the name ends in an ellipsis. */
.sx-brandwrap { min-width: 0; max-width: 100%; }
.sx-brand__name, .sx-back__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-back { min-width: 0; max-width: 100%; }
.sx-sep { flex: 1; }
.sx-status { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--sx-bg); color: var(--sx-muted); }
.sx-status--ready { background: var(--sx-accent-weak); color: var(--sx-accent); }
.sx-status--generating { background: var(--sx-warn-weak); color: var(--sx-warn); }
.sx-status--failed { background: #fbe1de; color: var(--sx-danger); }
.sx-running { margin: 0; font-size: 13px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sx-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--sx-line); border-top-color: var(--sx-accent); animation: sx-spin 1s linear infinite; }
@keyframes sx-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sx-spinner { animation: none; } }
.sx-seg { display: inline-flex; border: 1px solid var(--sx-line); border-radius: 8px; overflow: hidden; }
.sx-seg button { border: 0; background: transparent; padding: 6px 10px; cursor: pointer; display: grid; place-items: center; min-height: 34px; }
.sx-seg button[aria-pressed="true"] { background: var(--sx-accent-weak); color: var(--sx-accent); }
.sx-pubwrap { position: relative; }
.sx-pubnote { position: absolute; right: 0; top: calc(100% + 6px); width: 270px; background: var(--sx-panel); border: 1px solid var(--sx-line); border-radius: 10px;
  padding: 10px; font-size: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.14); z-index: 30; margin: 0; display: none; }
.sx-pubwrap:hover .sx-pubnote, .sx-pubwrap:focus-within .sx-pubnote { display: block; }
/* Flash messages float over the document as toasts (owner 2026-10-22) and leave on their own (studio_flash_controller). */
.sx-flash { position: fixed; top: 56px; left: 50%; transform: translateX(-50%); z-index: 60; display: grid; gap: 8px;
  width: min(560px, calc(100vw - 32px)); pointer-events: none; }
.sx-flash:not(:has(.sx-toast)) { display: none; }
.sx-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 8px; padding: 10px 8px 10px 16px; border-radius: 10px;
  background: var(--sx-accent-weak); color: #1f4f42; border: 1px solid var(--sx-line); box-shadow: 0 8px 24px rgba(0,0,0,.16);
  transition: opacity .25s ease, translate .25s ease; }
.sx-toast--alert { background: #fbe1de; color: #7d1d15; border-color: #f1b9b2; }
.sx-toast.is-leaving { opacity: 0; translate: 0 -8px; }
.sx-toast .flash { margin: 0; flex: 1; font-size: 13px; line-height: 1.45; padding-top: 2px; }
.sx-toast__close { flex: none; border: 0; background: transparent; color: inherit; font-size: 18px; line-height: 1; width: 28px; height: 28px;
  border-radius: 6px; cursor: pointer; opacity: .7; }
.sx-toast__close:hover, .sx-toast__close:focus-visible { opacity: 1; background: rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) { .sx-toast { transition: none; } }
.sx-main { display: grid; grid-template-columns: minmax(0, 1fr) 380px; min-height: 0; position: relative; }
.sx-right { background: var(--sx-panel); display: flex; flex-direction: column; min-height: 0; min-width: 0; border-left: 1px solid var(--sx-line); }
.sx-tabs { display: flex; border-bottom: 1px solid var(--sx-line); flex: none; }
.sx-tabs [role="tab"] { flex: 1 1 auto; min-width: 0; white-space: nowrap; border: 0; background: transparent; padding: 10px 4px; cursor: pointer; color: var(--sx-muted); border-bottom: 2px solid transparent;
  display: inline-flex; gap: 6px; justify-content: center; align-items: center; min-height: 42px; }
.sx-tabs [role="tab"][aria-selected="true"] { color: var(--sx-fg); border-bottom-color: var(--sx-accent); font-weight: 600; }
.sx-panel { overflow: auto; min-height: 0; flex: 1; padding-bottom: 16px; }
.sx-panel:focus-visible { outline-offset: -2px; }
.sx-empty { padding: 16px; color: var(--sx-muted); }

/* Outline, lists, to do, history */
.sx-list { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.sx-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; }
.sx-row[aria-current="true"] { background: var(--sx-accent-weak); }
.sx-rowbtn { flex: 1; min-width: 0; border: 0; background: transparent; text-align: left; padding: 7px 8px; border-radius: 8px; cursor: pointer; display: flex; gap: 4px 6px;
  align-items: center; flex-wrap: wrap; color: inherit; text-decoration: none; min-height: 40px; }
.sx-rowbtn:hover { background: var(--sx-bg); }
.sx-row[aria-current="true"] .sx-rowbtn:hover { background: transparent; }
.sx-rowbtn__name { font-weight: 600; }
.sx-rowbtn__summary { flex-basis: 100%; color: var(--sx-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* FEATURE-107: «Settings» on the selected row only (every row has it: the canvas selection uses it). */
.sx-row__edit { flex: none; }
.sx-row:not([aria-current="true"]) .sx-row__edit { display: none; }
.sx-mv { border: 0; background: transparent; cursor: pointer; color: var(--sx-muted); padding: 4px 8px; border-radius: 6px; min-width: 32px; min-height: 32px; }
.sx-mv:hover { background: var(--sx-bg); color: var(--sx-fg); }
.sx-add { margin: 4px 8px 12px; }
.sx-add__btn { width: 100%; justify-content: center; border-style: dashed; list-style: none; }
.sx-add__btn::-webkit-details-marker { display: none; }
.sx-add[open] .sx-form { margin-top: 8px; border: 1px solid var(--sx-line); border-radius: 10px; padding: 10px; }
.sx-group { padding-top: 6px; }
.sx-group__h { padding: 10px 16px 4px; margin: 0; font-size: 12px; font-weight: 700; color: var(--sx-muted); text-transform: uppercase; letter-spacing: .06em; }
.sx-todo { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; }
/* FEATURE-039 follow-up: invented legal claims, first and marked. */
.sx-todo--high { border-inline-start: 3px solid var(--sx-danger); background: var(--sx-warn-weak); font-weight: 600; }
.sx-todo:hover { background: var(--sx-bg); }
.sx-todo__link { color: var(--sx-fg); }
.sx-todo__hint { font-size: 12px; color: var(--sx-muted); }
.sx-notice { margin: 12px 12px 4px; padding: 8px 10px; background: var(--sx-warn-weak); color: #5b3400; border-radius: 8px; font-size: 12px; }
.studio-body .studio-findings { padding: 4px 8px; }
.studio-body .studio-finding { margin: 6px 0; padding: 6px 10px; border-left: 4px solid #c8cdd2; font-size: 13px; }
.studio-body .studio-finding p { margin: 4px 0; }
.studio-body .studio-finding--high { border-left-color: #b3261e; }
.studio-body .studio-finding--medium { border-left-color: #c77700; }
.studio-body .studio-finding--low { border-left-color: #8a939b; }
.sx-finding__link { font-weight: 600; }
.sx-hist__row { align-items: flex-start; flex-wrap: nowrap; }
.sx-hist__btn { flex-direction: column; align-items: flex-start; gap: 1px; }
.sx-hist__change { font-size: 13px; }
/* FEATURE-070 stage 6: the computed «Design components improved» line between versions (not a version, no buttons). */
.sx-hist__note { color: var(--sx-muted); font-style: italic; padding: 2px 8px; }
/* FEATURE-070 stage 5: a component whose resolved version differs from the version the revision was written with. */
.sx-dev__line--changed { font-weight: 600; }
.sx-hist small { color: var(--sx-muted); }
.sx-hist__restore { margin: 4px 4px 0 0; flex: none; }
.sx-hist__restore-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; min-width: 32px; padding: 0; }
@media (pointer: coarse), (max-width: 767px) { .sx-hist__restore-btn { width: 44px; height: 44px; min-width: 44px; } }

/* Canvas */
.sx-stage { display: flex; flex-direction: column; min-height: 0; min-width: 0; padding: 12px 16px 16px; gap: 8px; overflow: auto; }
.sx-stage:focus { outline: none; }
.sx-stage__note { margin: 0; }
.sx-viewing { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; background: var(--sx-accent-weak); color: #1f4f42; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.sx-notes { font-size: 12px; color: var(--sx-muted); }
.sx-notes summary { cursor: pointer; width: fit-content; }
.sx-notes p { margin: 4px 0; }
.sx-frame-wrap { flex: 1; min-height: 420px; display: flex; justify-content: center; }
.sx-frame { display: block; width: 100%; max-width: 100%; height: 100%; min-height: 420px; border: 0; border-radius: 10px; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 8px 30px rgba(0,0,0,.08); transition: max-width .2s; }
.sx-frame-wrap[data-width="tablet"] .sx-frame { max-width: 768px; }
.sx-frame-wrap[data-width="phone"] .sx-frame { max-width: 390px; }
@media (prefers-reduced-motion: reduce) { .sx-frame { transition: none; } }
.sx-blank { margin: auto; max-width: 460px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; padding: 40px 16px; }

/* Settings panel */
.sx-insp { display: block; }
.sx-insp__body { padding: 12px 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.sx-insp__head { display: flex; align-items: center; gap: 6px; }
/* FEATURE-127 (owner 2026-10-29): the panel's head (way back, title, ×) stays pinned in the panel's scroller on every
   level; opaque, over the scrolled content, the full panel width. */
.sx-insp__top { position: sticky; top: 0; z-index: 3; margin: -12px -16px 0; padding: 12px 16px 8px; background: var(--sx-panel);
  border-bottom: 1px solid var(--sx-line); display: flex; flex-direction: column; gap: 10px; }
.sx-insp__head .sx-h { flex: 1; }
.sx-insp__head .sx-h:focus { outline: none; }
.sx-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-box { border: 1px solid var(--sx-line); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx-box__h { margin: 0; font-size: 14px; }
.sx-box p { margin: 0; }
.sx-form { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.sx-field { display: flex; flex-direction: column; gap: 4px; }
.sx-field > label, .sx-field__head > label { font-size: 12px; color: var(--sx-muted); font-weight: 600; }
.sx-field input, .sx-field textarea, .sx-field select { border: 1px solid #c9cec9; background: var(--sx-panel); border-radius: 8px; padding: 7px 9px; width: 100%; min-height: 36px; }
.sx-check { display: flex; gap: 8px; align-items: center; margin: 0; }
.sx-check input { width: auto; }
/* FEATURE-128: the photo picker — tabs «Photos | Upload», one grid of button tiles (2 columns in a narrow panel, 3 when
   wider), the current one with a check and a frame, a small «Stock» / «Yours» mark; stock results below, the same grid. */
.sx-ppick { display: flex; flex-direction: column; gap: 8px; min-width: 0; container-type: inline-size; }
.sx-ppick__form { display: none; }
.sx-ppick__name { margin: 0; font-size: 13px; }
.sx-ptabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sx-line); }
.sx-ptab { border: 0; background: transparent; padding: 8px 10px; min-height: 40px; cursor: pointer; color: var(--sx-muted); border-bottom: 2px solid transparent; font: inherit; margin-bottom: -1px; }
.sx-ptab[aria-selected="true"] { color: var(--sx-fg); border-bottom-color: var(--sx-accent); font-weight: 600; }
.sx-ppanel { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx-ppanel[hidden] { display: none; }
.sx-psearch { display: flex; gap: 6px; }
.sx-psearch input { flex: 1 1 auto; min-width: 0; border: 1px solid #c9cec9; background: var(--sx-panel); border-radius: 8px; padding: 7px 9px; min-height: 36px; font: inherit; }
.sx-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@container (min-width: 360px) { .sx-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sx-tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; min-height: 44px; padding: 0; overflow: visible;
  border: 1px solid var(--sx-line); border-radius: 8px; background: #f6f8f9; cursor: pointer; color: var(--sx-muted); font: inherit; font-size: 12px; }
.sx-tile img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.sx-tile:hover { border-color: var(--sx-muted); }
.sx-tile[aria-pressed="true"] { border-color: var(--sx-accent); box-shadow: 0 0 0 2px var(--sx-accent); cursor: default; }
.sx-tile[aria-busy="true"] { opacity: .6; cursor: progress; }
.sx-tile[aria-disabled="true"] { cursor: progress; }
.sx-tile__none { padding: 6px; text-align: center; }
.sx-tile__mark { position: absolute; left: 4px; bottom: 4px; border-radius: 999px; padding: 0 6px; font-size: 11px; font-weight: 600; background: var(--sx-panel); color: var(--sx-muted); }
.sx-tile--stock .sx-tile__mark, .sx-tile--result .sx-tile__mark { background: var(--sx-stock-weak); color: var(--sx-stock); }
.sx-tile__check { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: var(--sx-accent); color: #fff; font-size: 12px; line-height: 20px; text-align: center; display: none; }
.sx-tile[aria-pressed="true"] .sx-tile__check { display: block; }
.sx-tile__tip { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); z-index: 3; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
  background: var(--sx-fg); color: #fff; border-radius: 6px; padding: 2px 8px; font-size: 11px; pointer-events: none; visibility: hidden; }
.sx-tile:hover .sx-tile__tip, .sx-tile:focus-visible .sx-tile__tip { visibility: visible; }
.sx-pstock, .sx-pstock-page { display: block; }
.sx-pstock-page + .sx-pstock-page, .sx-tiles + .sx-pstock-page { margin-top: 8px; }
.sx-pstock__credit { margin: 4px 0; font-size: 12px; }
.sx-perror { color: var(--sx-danger); font-size: 12px; margin: 0; }
.sx-perror:empty { display: none; }
.sx-drop { border: 2px dashed var(--sx-line); border-radius: 10px; padding: 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sx-drop.is-over { border-color: var(--sx-accent); background: var(--sx-accent-weak); }
.sx-drop__text { margin: 0; }
.sx-drop input[type="file"] { max-width: 100%; min-height: 44px; }
.sx-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sx-items > li { border: 1px solid var(--sx-line); border-radius: 8px; padding: 6px 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 13px; }
.sx-items__text { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.sx-items__actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
/* FEATURE-027: the nested settings panel — the path with its back arrow, element rows, the element panels. */
.sx-crumbs { display: flex; align-items: center; gap: 6px; min-width: 0; margin: -4px 0 -6px; }
.sx-crumbs .sx-back { min-width: 44px; min-height: 44px; height: 44px; width: 44px; font-size: 20px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; text-decoration: none; }
.sx-crumbs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 0; font-size: 13px; color: var(--sx-muted); min-width: 0; }
.sx-crumbs__list li { display: inline-flex; align-items: center; min-width: 0; overflow-wrap: anywhere; }
.sx-crumbs__list li + li::before { content: "›"; padding: 0 6px; }
.sx-crumbs__list a { color: var(--sx-muted); }
.sx-crumbs__list [aria-current] { color: var(--sx-fg); font-weight: 600; }
.sx-els__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-el { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 8px; border: 1px solid var(--sx-line); border-radius: 8px; color: var(--sx-fg); text-decoration: none; }
.sx-el:hover { border-color: var(--sx-muted); background: #fafbfa; }
/* Follow-up 2026-10-16: «+ Add button» row (a disclosure styled as a row). */
.sx-el-add > summary.sx-el { list-style: none; color: var(--sx-accent); border-style: dashed; cursor: pointer; }
.sx-el-add > summary.sx-el::-webkit-details-marker { display: none; }
.sx-el-add[open] > summary.sx-el { margin-bottom: 8px; }
.sx-el__thumb { flex: none; width: 40px; height: 40px; border-radius: 6px; background: var(--sx-bg); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; color: var(--sx-muted); }
.sx-el__thumb img { width: 40px; height: 40px; object-fit: cover; }
.sx-el__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sx-el__name { font-weight: 600; font-size: 13px; }
.sx-el__sum { font-size: 12px; color: var(--sx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-el__go { flex: none; color: var(--sx-muted); font-size: 18px; }
.sx-items__open { color: var(--sx-fg); text-decoration: none; display: block; padding: 6px 0; }
.sx-items__open:hover { text-decoration: underline; }
.sx-el-preview img { max-width: 100%; height: auto; border: 1px solid var(--sx-line); border-radius: 6px; background: #f6f8f9; }
.studio-body .studio-state { font-size: 11px; padding: 0 6px; border-radius: 999px; border: 1px solid currentColor; font-weight: 600; }
.studio-body .studio-state--sample { color: var(--sx-sample); background: var(--sx-sample-weak); }
.studio-body .studio-state--user { color: #0b5a2a; }
.studio-body .studio-state--fact { color: #0b3d91; }
.sx-disclosure > summary { cursor: pointer; color: var(--sx-accent); font-size: 13px; }
.sx-disclosure[open] > summary { margin-bottom: 8px; }
.sx-dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 10px; font-size: 13px; }
.sx-dl dt { color: var(--sx-muted); }
.sx-dl dd { margin: 0; overflow-wrap: anywhere; }
.sx-pre { white-space: pre-wrap; }
.sx-swatches { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 6px; }
.sx-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.15); display: inline-block; }
.sx-assets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sx-assets li { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 12px; border-bottom: 1px solid var(--sx-line); padding-bottom: 8px; }
.sx-assets img { border: 1px solid var(--sx-line); border-radius: 4px; object-fit: contain; background: #f6f8f9; }
.sx-assets li > span { flex: 1 1 160px; min-width: 0; overflow-wrap: anywhere; }
.studio-body .studio-stock-label { font-size: 11px; }
.studio-body .studio-provenance { overflow-wrap: anywhere; font-size: 11px; color: var(--sx-muted); }
.studio-body .studio-stock-honesty { border-left: 4px solid #c07a00; padding: 6px 10px; background: #fff8ea; border-radius: 0 6px 6px 0; }
.studio-body .studio-warning { display: block; color: var(--sx-warn); font-size: 12px; margin: 0; }
.studio-body .studio-errors { background: #fdecea; border: 1px solid #e4a59b; border-radius: 8px; padding: 6px 12px; font-size: 13px; }
.studio-body .studio-errors p, .studio-body .studio-errors ul { margin: 4px 0; }
.studio-body .studio-tag { font-size: 11px; background: #eef1f3; border-radius: 4px; padding: 1px 6px; }
.studio-body .studio-key { font-family: ui-monospace, monospace; font-size: 12px; }
.sx-assistant { padding: 16px; }
.sx-assistant p { margin: 8px 0; }
.sx-sheet-only { display: none; }

/* Developer drawer */
.sx-dev { background: var(--sx-panel); border-top: 1px solid var(--sx-line); font: 12px/1.5 ui-monospace, "JetBrains Mono", monospace; min-height: 0; }
.sx-dev summary { cursor: pointer; padding: 8px 16px; font: 13px system-ui, sans-serif; color: var(--sx-muted); display: flex; gap: 6px 16px; flex-wrap: wrap; list-style: none; }
.sx-dev summary::-webkit-details-marker { display: none; }
.sx-dev summary b { color: var(--sx-fg); font-variant-numeric: tabular-nums; }
.sx-dev__title { font-weight: 600; color: var(--sx-fg); }
.sx-dev__title::before { content: "▸ "; }
.sx-dev[open] .sx-dev__title::before { content: "▾ "; }
.sx-dev__notes { margin: 8px 0; font: 12px/1.5 system-ui, sans-serif; }
.sx-dev__notes p { margin: 4px 0; }
.sx-dev__h { margin: 0 0 4px; font: 600 13px system-ui, sans-serif; }
.sx-dev__wrap { max-height: 240px; overflow: auto; padding: 0 16px 12px; }
.sx-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.sx-table th, .sx-table td { text-align: left; padding: 4px 8px; border-bottom: 1px solid var(--sx-line); white-space: nowrap; }
.sx-table th { color: var(--sx-muted); font-weight: 500; }
.sx-dev .sx-hint { font-family: system-ui, sans-serif; }

/* FEATURE-020: undo / redo, save status (top bar) */
.sx-undo { display: inline-flex; align-items: center; gap: 2px; }
.sx-undo .sx-iconbtn[disabled] { opacity: .4; cursor: not-allowed; }
.sx-undo .sx-iconbtn span { font-size: 20px; line-height: 1; }
/* Owner 2026-10-29: no standing «Saved» in the top bar. The status is a pill over the canvas's bottom-start corner: hidden
   when saved, «Saving…» fades in only after 0.5 s (a quick in-place edit shows nothing), «Not saved» stays. The text stays
   in the live region for screen readers. */
.sx-save { position: fixed; inset-inline-start: 16px; bottom: 48px; z-index: 60; padding: 6px 12px; border-radius: 999px;
  font-size: 13px; white-space: nowrap; background: var(--sx-fg); color: var(--sx-panel); box-shadow: 0 4px 14px rgba(0,0,0,.18);
  pointer-events: none; opacity: 0; transition: opacity .2s; }
.sx-save[data-state="saving"] { animation: sx-save-in .2s ease-out .5s forwards; }
.sx-save[data-state="failed"], .sx-save--failed { opacity: 1; animation: none; background: var(--sx-danger); color: #fff; }
@keyframes sx-save-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sx-save { transition: none; } .sx-save[data-state="saving"] { animation-duration: 0s; } }
.sx-undo__note { font-size: 12px; color: var(--sx-warn); background: var(--sx-warn-weak); border-radius: 999px; padding: 2px 8px; margin-left: 6px; }
.sx-undo-stage { display: none; }
/* FEATURE-126 step 3 (owner 2026-10-29): History, a popover under the top bar's button (loaded when opened). */
.sx-histwrap { display: inline-flex; }
.sx-histpop { box-sizing: border-box; position: fixed; inset: 56px 12px auto auto; margin: 0; width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 72px); overflow: auto; padding: 0; border: 1px solid var(--sx-line); border-radius: 10px;
  background: var(--sx-panel); color: var(--sx-fg); box-shadow: 0 8px 28px rgba(0,0,0,.18); }
.sx-histpop__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px 14px; background: var(--sx-panel); }
.sx-histpop__head .sx-h { flex: 1; margin: 0; }
.sx-histpop__head .sx-h:focus { outline: none; }
/* A <button> takes `font: inherit` (line 12, more specific than .sx-iconbtn): match the inspector × (an <a>). */
.sx-histpop__head .sx-iconbtn { font-size: 18px; line-height: 1.2; }
.sx-histpop__body { display: block; padding: 0 14px 12px; }
.sx-hist__more { margin: 8px 0 0; }

/* FEATURE-020: canvas selection overlay (drawn in the parent over the iframe; clipped to it) */
.sx-frame-wrap { position: relative; }
/* FEATURE-021 follow-up: the permanent iframe container takes no box; a loading buffer frame lies hidden over the shown one */
.sx-frames { display: contents; }
.sx-frame--buffer { position: absolute; visibility: hidden; pointer-events: none; }
.sx-overlay { position: absolute; left: 0; top: 0; width: 0; height: 0; overflow: hidden; pointer-events: none; border-radius: 10px; }
.sx-ov { position: absolute; box-sizing: border-box; pointer-events: none; }
.sx-ov--hover { border: 2px dashed rgba(47, 111, 94, .65); background: rgba(47, 111, 94, .05); }
.sx-ov--selected { border: 2px solid var(--sx-accent); box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset; }
/* FEATURE-106: the short cue on a section just added (overlay only; never in the frame or the published page). */
.sx-ov--selected.sx-ov--added { animation: sx-added 1.6s ease-out 1; }
@keyframes sx-added {
  0% { box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 0 var(--sx-accent); background: color-mix(in srgb, var(--sx-accent) 14%, transparent); }
  60% { box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 8px color-mix(in srgb, var(--sx-accent) 25%, transparent); }
  100% { box-shadow: 0 0 0 1px rgba(255,255,255,.7) inset, 0 0 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-ov--selected.sx-ov--added { animation: none; border-width: 3px; background: color-mix(in srgb, var(--sx-accent) 10%, transparent); }
}
.sx-scripts-note a { white-space: nowrap; }
.sx-ov__bar { position: absolute; left: -2px; display: inline-flex; align-items: stretch; pointer-events: auto; background: var(--sx-accent); color: #fff;
  border-radius: 0 0 8px 0; box-shadow: 0 2px 6px rgba(0,0,0,.2); font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; }
.sx-ov__bar button, .sx-ov-more button { border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; padding: 5px 9px; min-height: 28px; }
.sx-ov__bar button:hover, .sx-ov-more button:hover { background: rgba(255,255,255,.14); }
.sx-ov__bar button:focus-visible, .sx-ov-more button:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
.sx-ov__x { border-left: 1px solid rgba(255,255,255,.35) !important; font-size: 15px !important; }
/* Owner 2026-10-22: move up / move down / delete on the label (icon buttons, at least 32 px; the confirm popover). */
.sx-ov__tools { display: inline-flex; align-items: stretch; border-left: 1px solid rgba(255,255,255,.35); }
.sx-ov__tools[hidden] { display: none; }
.sx-ov__form { display: inline-flex; }
.sx-ov__bar .sx-ov__tool, .sx-ov-more .sx-ov__tool { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; padding: 0 6px;
  -webkit-touch-callout: none; user-select: none; }
.sx-ov__bar .sx-ov__tool[hidden] { display: none; }
.sx-ov__tool svg { display: block; }
.sx-ov__bar .sx-ov__tool[aria-expanded="true"] { background: rgba(255,255,255,.22); }
/* Toolbar 2 (owner 2026-10-22): the grip (drag), the drop line in the overlay, the phone's «⋯» popover, the tooltip. */
.sx-ov__bar .sx-ov__grip { cursor: grab; touch-action: none; }
.sx-canvas-dragging .sx-frame { pointer-events: none; }
.sx-canvas-dragging, .sx-canvas-dragging * { cursor: grabbing !important; user-select: none; }
.sx-ov--dragging { border-style: dashed; background: rgba(47, 111, 94, .06); }
.sx-ov-dropline { left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--sx-accent); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.sx-ov-dropline--noop { background: var(--sx-line); }
/* FEATURE-129: a list item's drag handle (outside the item's start edge, never over its text or photo), the drop bar and
   the dimmed dragged item. Larger on a coarse pointer; the handle never scrolls the page under a finger. */
.sx-ov-handle { position: absolute; box-sizing: border-box; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; pointer-events: auto;
  border: 1px solid var(--sx-line); border-radius: 6px; background: #fff; color: var(--sx-accent); box-shadow: 0 1px 4px rgba(0,0,0,.18);
  cursor: grab; touch-action: none; -webkit-touch-callout: none; user-select: none; }
.sx-ov-handle[hidden] { display: none; }
.sx-ov-handle:hover, .sx-ov-handle.is-dragging { background: var(--sx-accent); color: #fff; border-color: var(--sx-accent); }
@media (pointer: coarse) { .sx-ov-handle { width: 36px; height: 36px; border-radius: 9px; } .sx-ov-handle svg { width: 20px; height: 20px; } }
.sx-ov-itemline { border-radius: 2px; background: var(--sx-accent); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.sx-ov-itemline--noop { background: var(--sx-line); }
.sx-ov-itemghost { border: 2px dashed var(--sx-accent); background: rgba(47, 111, 94, .10); border-radius: 4px; }
.sx-ov-more { box-sizing: border-box; margin: 0; padding: 0; border: 0; border-radius: 8px; background: var(--sx-accent); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.22);
  font: 600 12px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
.sx-ov-more:popover-open { display: flex; }
.sx-ov-more .sx-ov__form { display: inline-flex; }
.sx-ov-more .sx-ov__tool { min-width: 44px; min-height: 44px; }
.sx-tip { box-sizing: border-box; position: fixed; inset: auto; margin: 0; max-width: min(260px, calc(100vw - 16px)); padding: 6px 9px; border: 0; border-radius: 6px;
  background: #1f2a26; color: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); font: 500 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left;
  pointer-events: none; overflow: visible; }
.sx-tip:popover-open { display: block; }
.sx-ov-confirm { box-sizing: border-box; width: max-content; max-width: min(340px, calc(100vw - 16px)); padding: 12px 14px; border: 1px solid var(--sx-line); border-radius: 10px;
  background: var(--sx-panel); color: var(--sx-fg); box-shadow: 0 8px 24px rgba(0,0,0,.16); font: 400 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left; }
.sx-ov-confirm:popover-open { display: block; }
.sx-ov-confirm .sx-box__h { margin: 0 0 6px; }
.sx-ov-confirm p { margin: 0 0 8px; }
.sx-ov-confirm__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; }
@media (max-width: 767px) {
  .sx-ov-confirm { inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; margin: 0; width: auto; max-width: none; padding: 14px 16px; font-size: 15px;
    border-radius: 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.22); }
  .sx-ov-confirm__actions .sx-btn { min-height: 44px; }
}
.sx-canvas-hint { margin: 0; text-align: center; }
/* FEATURE-021: inline text editing — the hovered text, the edited text's box and its counter / note / error chip */
.sx-ov--field { border: 1px dashed rgba(47, 111, 94, .85); border-radius: 3px; }
.sx-ov--editing { border: 2px dashed var(--sx-accent); border-radius: 4px; box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.sx-ov--el { border: 2px solid var(--sx-focus); border-radius: 4px; box-shadow: 0 0 0 2px rgba(255,255,255,.8); } /* FEATURE-027: the element whose panel is open */
.sx-ov--editing.is-over, .sx-ov--editing.is-failed { border-color: var(--sx-danger); }
/* FEATURE-127: the chip holds the info and (an optional text) the remove button; only the button takes the pointer. */
.sx-ov__chip { position: absolute; left: -2px; display: flex; align-items: flex-start; gap: 4px; max-width: min(460px, 90vw); }
.sx-ov__remove { pointer-events: auto; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0;
  border: 0; border-radius: 6px; background: #fff; color: var(--sx-danger); box-shadow: 0 2px 6px rgba(0,0,0,.25); cursor: pointer; }
.sx-ov__remove:hover { background: var(--sx-danger); color: #fff; }
.sx-ov__remove:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.sx-ov__remove[hidden] { display: none; }
@media (pointer: coarse) { .sx-ov__remove { width: 40px; height: 40px; } }
.sx-ov__info { margin: 0; max-width: min(420px, 90vw); width: max-content; padding: 3px 8px; border-radius: 6px;
  background: var(--sx-accent); color: #fff; font: 600 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.2); white-space: normal; }
.sx-ov--editing.is-over .sx-ov__info, .sx-ov--editing.is-failed .sx-ov__info { background: var(--sx-danger); }
.sx-ov__info span + span::before { content: " · "; }
.sx-viewing__ro { font-weight: 600; }

/* FEATURE-020: drag and drop in the outline */
.sx-outline { position: relative; }
[data-controller~="studio-drag"] { position: relative; }
.sx-grip { flex: none; width: 22px; align-self: stretch; display: grid; place-items: center; color: var(--sx-muted); cursor: grab; user-select: none;
  touch-action: none; border-radius: 6px; font-size: 14px; }
.sx-grip:hover { background: var(--sx-bg); color: var(--sx-fg); }
.sx-grip--none { cursor: default; }
.sx-grip--none:hover { background: transparent; }
.sx-dragging, .sx-dragging * { cursor: grabbing !important; user-select: none; }
.sx-row--dragging { opacity: .45; }
.sx-dropline { position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 2px; background: var(--sx-accent); pointer-events: none; z-index: 5;
  box-shadow: 0 0 0 2px rgba(47, 111, 94, .18); }
.sx-dropline::before { content: ""; position: absolute; left: -4px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--sx-accent); }
.sx-dropline--noop { background: var(--sx-line); box-shadow: none; }
.sx-dropline--noop::before { background: var(--sx-line); }

/* Phone bottom tabs (hidden on larger screens) */
.sx-bottom { display: none; }
.sx-more { display: none; }

/* Small desktops (1024–1279 px): a narrower panel. */
@media (max-width: 1279px) {
  .sx-main { grid-template-columns: minmax(0, 1fr) 340px; }
  .sx-stage { padding: 12px 10px 16px; }
  .sx-tabs [role="tab"] { font-size: 13px; padding: 10px 2px; gap: 4px; }
}

/* Tablet (FEATURE-107): canvas + the panel as a column (no longer an overlay); the canvas still fits the 390 px
   phone preview. */
@media (max-width: 1023px) {
  .sx-main { grid-template-columns: minmax(0, 1fr) 320px; }
  .sx-pubwrap { display: none; }
}

/* Phone: one view at a time, four bottom tabs, a non-modal bottom sheet, the "more" menu. */
@media (max-width: 767px) {
  .studio-body { font-size: 15px; }
  .sx { grid-template-rows: auto minmax(0, 1fr) auto auto; }
  .sx-top { padding: 6px 8px; gap: 4px 6px; flex-wrap: nowrap; }
  .sx-brandwrap { flex: 1 1 auto; }
  .sx-brandwrap .sx-brand { width: 100%; max-width: 100%; }
  .sx-top:not(.sx-top--page) > :not(.sx-brandwrap):not(.sx-running) { flex-shrink: 0; }
  .sx-top--page .sx-brand { flex-shrink: 0; }
  .sx-running { min-width: 0; }
  .sx-widths, .sx-top__style, .sx-pubwrap, .sx-top__preview, .sx-top__requests, .sx-top__todo { display: none; }
  .sx-running .sx-hint { display: none; }
  .sx-running { font-size: 12px; }
  .sx-more { display: block; }
  .sx-iconbtn, .sx-btn { min-height: 40px; }
  .sx-mv { min-width: 40px; min-height: 40px; }
  .sx-grip { width: 34px; font-size: 18px; }
  .sx-undo__note, .sx-canvas-hint { display: none; }
  .sx-save { bottom: 76px; }
  .sx-undo .sx-iconbtn { min-width: 40px; padding: 4px 6px; }
  .sx-undo-stage { display: block; margin: 8px 8px 0; font-size: 12px; color: var(--sx-warn); background: var(--sx-warn-weak); border-radius: 8px; padding: 6px 10px; }
  .sx-ov__bar button { min-height: 36px; padding: 6px 10px; }
  .sx-ov__bar .sx-ov__tool { min-width: 36px; padding: 0 4px; }
  .sx-ov__name { max-width: 34vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sx-todo__link, .sx-todo__hint, .sx-finding__link, .sx-menu__item, .sx-rowbtn { min-height: 40px; display: inline-flex; align-items: center; }
  .sx-main { display: block; position: relative; overflow: hidden; }
  .sx-stage, .sx-right { display: none; position: absolute; inset: 0; border: 0; box-shadow: none; width: auto; }
  .sx-right > .sx-tabs { display: none; }
  .sx-sheet-only { display: inline-flex; }
  .sx[data-studio-shell-view-value="page"] .sx-stage { display: flex; padding: 0; }
  .sx[data-studio-shell-view-value="page"] .sx-frame-wrap, .sx[data-studio-shell-view-value="page"] .sx-frame { min-height: 0; border-radius: 0; box-shadow: none; max-width: none; }
  .sx[data-studio-shell-view-value="page"] .sx-viewing, .sx[data-studio-shell-view-value="page"] .sx-notes, .sx[data-studio-shell-view-value="page"] .sx-stage__note { margin: 8px 8px 0; }
  .sx[data-studio-shell-view-value="sections"] .sx-right,
  .sx[data-studio-shell-view-value="todo"] .sx-right,
  .sx[data-studio-shell-view-value="history"] .sx-right,
  .sx[data-studio-shell-view-value="assistant"] .sx-right { display: flex; }
  /* FEATURE-107: the view decides the panel shown on a phone, whatever tab the URL named (the page view → Settings);
     studio-shell brings the tab state in step on connect. */
  .studio-body .sx:is([data-studio-shell-view-value="page"], [data-studio-shell-view-value="sections"], [data-studio-shell-view-value="todo"], [data-studio-shell-view-value="history"], [data-studio-shell-view-value="assistant"]) .sx-right > .sx-panel { display: none !important; }
  .studio-body .sx[data-studio-shell-view-value="page"] .sx-right > #panel-settings,
  .studio-body .sx[data-studio-shell-view-value="sections"] .sx-right > #panel-sections,
  .studio-body .sx[data-studio-shell-view-value="todo"] .sx-right > #panel-todo,
  .studio-body .sx[data-studio-shell-view-value="history"] .sx-right > #panel-history,
  .studio-body .sx[data-studio-shell-view-value="assistant"] .sx-right > #panel-assistant { display: block !important; }
  .sx[data-studio-shell-view-value="page"][data-studio-shell-sheet-value="open"] .sx-right {
    display: flex; top: auto; max-height: 52%; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0,0,0,.2); border-top: 1px solid var(--sx-line); z-index: 20; }
  .sx[data-studio-shell-view-value="page"][data-studio-shell-sheet-value="open"][data-studio-shell-full-value="true"] .sx-right { max-height: 88%; }
  .sx[data-studio-shell-view-value="page"][data-studio-shell-sheet-value="open"] .sx-right::before {
    content: ""; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--sx-line); margin: 8px auto 0; flex: none; }
  .sx-insp__head .sx-sheet-only[data-studio-shell-target="fullButton"] { display: inline-flex; }
  .sx-dev { display: none; }
  .sx[data-studio-shell-view-value="dev"] .sx-main { display: none; }
  .sx[data-studio-shell-view-value="dev"] .sx-dev { display: block; overflow: auto; }
  .sx[data-studio-shell-view-value="dev"] .sx-dev__wrap { max-height: none; }
  .sx-bottom { display: block; background: var(--sx-panel); border-top: 1px solid var(--sx-line); padding-bottom: env(safe-area-inset-bottom); }
  .sx-bottom [role="tablist"] { display: grid; grid-template-columns: repeat(4, 1fr); }
  .sx-bottom [role="tab"] { border: 0; background: transparent; padding: 6px 2px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px;
    color: var(--sx-muted); cursor: pointer; position: relative; min-height: 52px; }
  .sx-bottom [role="tab"][aria-selected="true"] { color: var(--sx-accent); font-weight: 700; }
  .sx-bottom svg { width: 22px; height: 22px; }
  .sx-count { position: absolute; top: 2px; left: calc(50% + 6px); background: var(--sx-sample); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 5px; font-weight: 700; }
}

/* Standalone studio pages (projects, facts, section pages, stock search, drafts preview). */
.sx-top--page { position: sticky; top: 0; z-index: 10; }
.studio-body .sx-page { max-width: 1100px; margin: 0 auto; padding: 16px; }
.studio-body .sx-page h1 { font-size: 22px; }
.sx-scroll { overflow-x: auto; }

/* FEATURE-025: the button icon picker (settings panel and the phone sheet) */
.sx-iconpick { border-top: 1px solid var(--sx-line, #e3e6e8); padding-top: 8px; margin-top: 8px; }
.sx-iconpick > summary { display: flex; align-items: center; gap: 6px; }
.sx-iconpick__sum { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; color: var(--sx-fg); }
.sx-iconpick fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.sx-iconpick legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.sx-icongrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 4px; max-height: 320px; overflow-y: auto; padding: 2px; }
.sx-iconpick .sx-iconopt { position: relative; display: flex; margin: 0; font-weight: 500; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px 6px; border: 1px solid transparent;
  border-radius: 8px; cursor: pointer; font-size: 11px; line-height: 1.2; text-align: center; color: var(--sx-fg); min-height: 44px; }
.sx-iconpick .sx-iconopt:hover { background: var(--sx-bg); }
.sx-iconpick .sx-iconopt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.sx-iconpick .sx-iconopt:has(input:checked) { border-color: var(--sx-accent); background: rgba(47, 111, 94, .08); }
.sx-iconpick .sx-iconopt:has(input:focus-visible) { outline: 2px solid var(--sx-accent); outline-offset: 1px; }
.sx-iconpick .sx-iconopt--none { justify-content: center; font-weight: 600; }
.sx-iconpick .sx-iconopt__name { overflow-wrap: anywhere; }
.sx-iconpick__pos { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sx-iconpick__pos legend { width: 100%; }
.sx-iconpick .sx-iconpick__pos .sx-check { display: flex; margin: 0; font-weight: 500; }
/* FEATURE-025: «Icon…» next to the edited button label's chip on the canvas */
  background: #fff; color: var(--sx-accent); font: 600 12px/1.35 system-ui, -apple-system, "Segoe UI", sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
.sx-iconpick .sx-iconopt[hidden] { display: none; }

/* FEATURE-022: the «Layout» group of the section settings — one segmented radio group per design property (the native
   radios stay in the accessibility tree, visually hidden), a small schematic picture drawn in CSS where it helps. */
.sx-variant { margin: 0; }
.sx-variant[aria-busy="true"] { opacity: .7; pointer-events: none; }
.sx-variant__set { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sx-variant__legend { padding: 0; font-size: 12px; font-weight: 600; color: var(--sx-muted); margin-bottom: 4px; }
.sx-variant__opts { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.sx-variant__opt { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 4px 10px; border: 1px solid var(--sx-line);
  border-radius: 8px; background: var(--sx-panel); cursor: pointer; font-size: 13px; line-height: 1.2; max-width: 100%; }
.sx-variant__opt:hover { border-color: var(--sx-muted); }
.sx-variant__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.sx-variant__opt:has(input:checked) { background: var(--sx-accent-weak); border-color: var(--sx-accent); color: var(--sx-accent); font-weight: 600; }
.sx-variant__opt:has(input:focus-visible) { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.sx-variant__opt:has(input:disabled), .sx-variant__set:disabled .sx-variant__opt { opacity: .5; cursor: not-allowed; }
/* FEATURE-033: phone-size targets for the Layout options (Background, Overlay and the rest), like the history buttons. */
@media (pointer: coarse), (max-width: 767px) { .sx-variant__opt { min-height: 44px; } }
.sx-variant__label { overflow-wrap: anywhere; }
.sx-vpic { display: none; flex: none; width: 26px; height: 18px; border: 1.5px solid currentColor; border-radius: 3px; opacity: .75;
  --bar: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; }
.sx-vpic[data-prop="columns"] { display: block; --n: 3; border: 0;
  background: repeating-linear-gradient(90deg, currentColor 0 calc(100% / var(--n) - 2px), transparent calc(100% / var(--n) - 2px) calc(100% / var(--n))); }
.sx-vpic[data-prop="columns"][data-value="1"] { --n: 1; }
.sx-vpic[data-prop="columns"][data-value="2"] { --n: 2; }
.sx-vpic[data-prop="columns"][data-value="4"] { --n: 4; }
.sx-vpic[data-prop="align"] { display: block; background-image: var(--bar), var(--bar), var(--bar); background-size: 70% 2px, 50% 2px, 60% 2px; }
.sx-vpic[data-prop="align"][data-value="start"] { background-position: 3px 3px, 3px 7px, 3px 11px; }
.sx-vpic[data-prop="align"][data-value="center"] { background-position: center 3px, center 7px, center 11px; }
.sx-vpic[data-prop="mediaPosition"] { display: block; background-image: var(--bar); background-size: 45% 100%; }
.sx-vpic[data-prop="mediaPosition"][data-value="start"] { background-position: left top; }
.sx-vpic[data-prop="mediaPosition"][data-value="end"] { background-position: right top; }
.sx-vpic[data-prop="columnRatio"] { display: block; background-image: var(--bar); background-position: right top; }
.sx-vpic[data-prop="columnRatio"][data-value="40-60"] { background-size: 60% 100%; }
.sx-vpic[data-prop="columnRatio"][data-value="50-50"] { background-size: 50% 100%; }
.sx-vpic[data-prop="columnRatio"][data-value="60-40"] { background-size: 40% 100%; }
.sx-vpic:is([data-prop="headLayout"], [data-prop="layout"]):is([data-value="stacked"], [data-value="split"]) { display: block; background-image: var(--bar), var(--bar); }
.sx-vpic:is([data-prop="headLayout"], [data-prop="layout"])[data-value="stacked"] { background-size: 70% 3px, 50% 2px; background-position: 3px 4px, 3px 10px; }
.sx-vpic:is([data-prop="headLayout"], [data-prop="layout"])[data-value="split"] { background-size: 36% 3px, 40% 2px; background-position: 3px 4px, right 3px top 10px; }
.sx-vpic[data-prop="mediaMode"] { display: block; background-image: var(--bar); }
.sx-vpic[data-prop="mediaMode"][data-value="below"] { background-size: 100% 45%; background-position: bottom; }
.sx-vpic[data-prop="mediaMode"][data-value="cover"] { background-size: 100% 100%; opacity: .45; }
/* FEATURE-022 Part B: the hero variants (photo background / photo below / side by side). */
.sx-vpic[data-prop="family"] { display: block; background-image: var(--bar), var(--bar); }
.sx-vpic[data-prop="family"][data-value="cover"] { background-image: var(--bar); background-size: 100% 100%; opacity: .45; }
.sx-vpic[data-prop="family"][data-value="below"] { background-size: 60% 2px, 100% 45%; background-position: 3px 3px, bottom; }
.sx-vpic[data-prop="family"][data-value="split"] { background-size: 35% 2px, 45% 100%; background-position: 3px 5px, right top; }

/* FEATURE-028: the ⓘ popover (studio/shared/_info) — a small round button; the text opens in a popover placed by
   studio-info (a bottom sheet on a phone). The target is 24 px on a computer and 44 px on a phone. */
.sx-info { display: inline-flex; vertical-align: middle; }
.sx-info__btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin: -4px 0; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--sx-muted); cursor: pointer; font: inherit; }
.sx-info__btn > span { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid currentColor; border-radius: 50%;
  font: italic 700 11px/1 Georgia, "Times New Roman", serif; }
.sx-info__btn:hover, .sx-info__btn[aria-expanded="true"] { color: var(--sx-accent); }
.sx-info__pop { box-sizing: border-box; width: max-content; max-width: min(320px, calc(100vw - 16px)); padding: 10px 12px; border: 1px solid var(--sx-line); border-radius: 10px;
  background: var(--sx-panel); color: var(--sx-fg); box-shadow: 0 8px 24px rgba(0,0,0,.16); font: 400 13px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; text-align: left;
  white-space: normal; }
.sx-info__pop:popover-open { display: block; }
@media (max-width: 767px) {
  .sx-info__btn { width: 44px; height: 44px; margin: -12px -10px; }
  .sx-info__pop { inset: auto 8px calc(8px + env(safe-area-inset-bottom)) 8px; margin: 0; width: auto; max-width: none; padding: 14px 16px; font-size: 15px;
    border-radius: 14px; box-shadow: 0 -8px 30px rgba(0,0,0,.22); }
}

/* FEATURE-028: the length counter of a text field (studio-counter) — shown while the field is focused or near its limit. */
/* Out of the flow (top right, on the label's line): showing or hiding it never moves the controls under a pointer. */
.sx-field[data-controller~="studio-counter"] { position: relative; }
.sx-field[data-controller~="studio-counter"] > label, .sx-field[data-controller~="studio-counter"] > .sx-field__head { padding-right: 64px; }
.sx-counter { position: absolute; top: 0; right: 0; font-size: 11px; line-height: 18px; color: var(--sx-muted); font-variant-numeric: tabular-nums; }
.sx-counter[hidden] { display: none; }
.sx-counter--near { color: var(--sx-warn); }
.sx-field__head { display: flex; align-items: center; gap: 4px; }
.sx-top__preview { text-decoration: none; white-space: nowrap; }
/* FEATURE-041 stage 2: «Requests» in the top bar with the new-request count. */
.sx-top__requests { text-decoration: none; white-space: nowrap; }
.sx-pill { display: inline-block; min-width: 1.4em; padding: 0 6px; border-radius: 999px; background: var(--sx-sample); color: #fff; font-size: 12px; font-weight: 700; text-align: center; }
.sx-box__hrow { display: flex; align-items: center; gap: 4px; }
/* FEATURE-028: «Remove» beside an optional text's label and the «+ Add <name>» disclosures. */
.sx-linkbtn { align-self: flex-end; border: 0; background: none; padding: 2px 4px; color: var(--sx-muted); font: inherit; font-size: 12px; text-decoration: underline; cursor: pointer; }
.sx-linkbtn:hover { color: var(--sx-danger); }
.sx-textadd > summary { color: var(--sx-accent); font-weight: 600; cursor: pointer; padding: 4px 0; }
.sx-textadd .sx-field { position: relative; }
.sx-textadd .sx-field > label { padding-right: 64px; }
@media (max-width: 767px) { .sx-linkbtn, .sx-textadd > summary { min-height: 40px; display: inline-flex; align-items: center; } }
/* FEATURE-029: the stars of a quote — a row of radio options (no stars, 1–5), each a ≥ 44 px target. */
.sx-stars { border: 0; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.sx-stars__opt { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 8px; border: 1px solid var(--sx-line, #e3e6e8); border-radius: 6px; cursor: pointer; }
.sx-stars__opt:has(input:checked) { border-color: var(--sx-fg); font-weight: 600; }

/* FEATURE-032b: the style switch in the Style panel (a radio list of the style directions) */
.sx-fieldset { border: 0; margin: 0 0 10px; padding: 0; min-width: 0; }
.sx-fieldset legend { font-weight: 600; font-size: 13px; margin-bottom: 6px; padding: 0; }
.sx-radio { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: start; padding: 6px 4px; border-radius: 8px; }
.sx-radio:has(input:checked) { background: rgba(47, 111, 94, .08); }
.sx-radio input { margin: 3px 0 0; }
.sx-radio label { margin: 0; cursor: pointer; }
.sx-radio > .sx-hint { grid-column: 2; margin: 2px 0 0; }
/* FEATURE-037: the photo focus picker (a dot on the photo, a strip of three crops, number fields, Centre / Automatic). */
.sx-focus { border-left: 4px solid #6a8fd8; padding: 4px 10px; display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.sx-focus h4 { margin: 0; font-size: 13px; }
.sx-focus__frame { position: relative; display: inline-block; max-width: 100%; width: 280px; cursor: crosshair; line-height: 0; }
.sx-focus__frame img { display: block; width: 100%; height: auto; }
.sx-focus__frame:focus-visible { outline: 3px solid #1d4ed8; outline-offset: 2px; }
.sx-focus__dot { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px #1d4ed8; background: rgba(29, 78, 216, .35); pointer-events: none; }
.sx-focus__crops { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sx-focus__crop { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: #555; }
.sx-focus__crop img { display: block; height: 56px; object-fit: cover; border: 1px solid #ccc; }
.sx-focus__crop--16-10 img { aspect-ratio: 16/10; }
.sx-focus__crop--4-3 img { aspect-ratio: 4/3; }
.sx-focus__crop--1-1 img { aspect-ratio: 1/1; border-radius: 50%; }
.sx-focus__crop--9-16 img { aspect-ratio: 9/16; } /* FEATURE-037 stage C: a phone backdrop */
.sx-focus__fields { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sx-focus__fields input { width: 4.5em; min-height: 32px; }
.sx-focus__buttons { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
@media (max-width: 767px) { .sx-focus__fields input, .sx-focus__buttons .sx-btn { min-height: 44px; } }
/* FEATURE-037: the tiny preview of a photo style in the Style panel. */
.sx-photo-chip { display: inline-block; width: 30px; height: 22px; margin: 0 8px 0 2px; vertical-align: middle; background: linear-gradient(135deg, #9fb3c8, #5f7a94); }
/* FEATURE-050: content.text_media — photo beside the text or behind a text panel, and the panel's side in panel mode. */
.sx-vpic[data-prop="mediaLayout"] { display: block; background-image: var(--bar); }
.sx-vpic[data-prop="mediaLayout"][data-value="beside"] { background-size: 45% 100%; background-position: right top; }
.sx-vpic[data-prop="mediaLayout"][data-value="panel"] { background-size: 100% 100%; opacity: .45; }
/* FEATURE-089: the framed photo at the end with a text card over its edge. */
.sx-vpic[data-prop="mediaLayout"][data-value="card"] { background-image: var(--bar), var(--bar); background-repeat: no-repeat; background-size: 58% 100%, 50% 55%; background-position: right top, left 2px center; }
.sx-vpic[data-prop="panelPosition"] { display: block; background-image: var(--bar); background-size: 45% 70%; }
.sx-vpic[data-prop="panelPosition"][data-value="start"] { background-position: right 2px center; }
.sx-vpic[data-prop="panelPosition"][data-value="end"] { background-position: left 2px center; }
/* FEATURE-052: content.text_media — one photo, a pair (a small one over the corner) or a trio (two small stacked). */
.sx-vpic[data-prop="mediaArrangement"] { display: block; background-repeat: no-repeat; }
.sx-vpic[data-prop="mediaArrangement"][data-value="single"] { background-image: var(--bar); background-size: 80% 80%; background-position: center; }
.sx-vpic[data-prop="mediaArrangement"][data-value="pair"] { background-image: var(--bar), var(--bar); background-size: 60% 60%, 36% 45%; background-position: left 2px top 2px, right 2px bottom 2px; }
.sx-vpic[data-prop="mediaArrangement"][data-value="trio"] { background-image: var(--bar), var(--bar), var(--bar); background-size: 58% 86%, 32% 40%, 32% 40%; background-position: left 2px center, right 2px top 2px, right 2px bottom 2px; }

/* FEATURE-127: a text the canvas edits in place is a row of the «Text» box (its name and its text); a click opens the
   inline edit, or (fallback) the row opens to its own field. A panel field that saves by itself shows its state below. */
.sx-textrow { display: flex; flex-direction: column; gap: 2px; }
.sx-textrow__d { border: 1px solid var(--sx-line); border-radius: 8px; background: var(--sx-panel); }
.sx-textrow__s { list-style: none; display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; min-height: 44px; cursor: pointer; border-radius: 8px; }
.sx-textrow__s::-webkit-details-marker { display: none; }
.sx-textrow__s:hover { background: var(--sx-accent-weak); }
.sx-textrow__s:focus-visible { outline: 2px solid var(--sx-focus); outline-offset: 2px; }
.sx-textrow__name { font-size: 12px; color: var(--sx-muted); font-weight: 600; }
.sx-textrow__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.sx-textrow__d[open] .sx-textrow__value { display: none; }
.sx-textrow__field { padding: 0 10px 8px; }
/* Owner 2026-10-29: «Remove» is a trash icon inside the row's top-end corner (and beside the label of a plain field). */
.sx-textrow--rm, .sx-field--rm { position: relative; }
.sx-textrow--rm .sx-textrow__s { padding-inline-end: 44px; }
.sx-textrm { position: absolute; top: 4px; inset-inline-end: 4px; min-width: 36px; min-height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--sx-muted); }
.sx-textrm:hover, .sx-textrm:focus-visible { color: var(--sx-danger, #b42318); }
.sx-field--rm > label { padding-inline-end: 40px; }
.sx-field--rm > .sx-textrm { top: -8px; }
.sx-autoform { gap: 4px; }
.sx-autosave { margin: 0; min-height: 0; font-size: 12px; color: var(--sx-muted); }
.sx-autosave:empty { display: none; }
.sx-autosave--failed { color: var(--sx-danger); font-weight: 600; }

/* FEATURE-131: the «Fonts» row — a disclosure of pairings, each with a sample in its own fonts. */
.sx-fonts > summary, .sx-fonts__more > summary { cursor: pointer; padding: 4px 0; }
.sx-fonts__more { margin-top: 8px; }
.sx-fontopt label { display: block; min-width: 0; }
.sx-fontopt label > .sx-hint { display: block; }
.sx-fontsample { display: block; margin-top: 4px; padding: 6px 8px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 6px; background: #fff; color: #1d1d1b; overflow: hidden; }
.sx-fontsample__h { display: block; font-size: 20px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx-fontsample__b { display: block; font-size: 14px; line-height: 1.4; }

/* FEATURE-155: the sign-in and set-password pages. */
.studio-body .sx-auth { max-width: 26rem; margin-top: 10vh; }
.studio-body .sx-auth input[type="email"], .studio-body .sx-auth input[type="password"] { width: 100%; box-sizing: border-box; padding: 8px; font: inherit; }
.studio-body .sx-auth__errors { border: 2px solid currentColor; border-radius: 6px; padding: 4px 12px; }
.studio-body .sx-signout { margin-left: auto; }