/* Admin Portal (src/render/admin.js), on top of site.css: its colors, fonts and pill buttons. */

.admin { min-height: 100vh; background: var(--cream-deep); }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px var(--gutter); background: var(--cream); border-bottom: 1px solid var(--line); }
.admin-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; }
.admin-brand svg { width: 30px; height: auto; }
.admin-nav { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.admin-nav a:hover { text-decoration: underline; }
.admin-main { padding: clamp(24px, 5vw, 56px) var(--gutter); }

.admin-card { max-width: 880px; margin: 0 auto; display: grid; gap: 16px; padding: clamp(22px, 4vw, 36px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.admin-narrow { max-width: 440px; }
.admin-title { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4vw, 40px); line-height: 1.1; }
.admin-subtitle { margin: 16px 0 0; font-family: var(--serif); font-weight: 400; font-size: 26px; }
.admin-text { color: var(--ink-soft); }
.admin-muted { color: var(--muted); font-size: 14px; }
/* Email addresses stay on one line instead of breaking at their hyphens. */
.admin-nowrap { white-space: nowrap; }

.admin-alert { padding: 12px 16px; border-radius: var(--r-md); background: #eef5ec; color: #23502a; }
.admin-alert-error { background: var(--blush-soft); color: #8a2a1c; }

.admin-form { display: grid; gap: 10px; }
.admin-form label { font-weight: 600; font-size: 14px; }
.admin-form input, .admin-form select { height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); font: inherit; color: var(--ink); width: 100%; }
.admin-form input:focus, .admin-form select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.admin-form #code { font-size: 22px; letter-spacing: 6px; }
.admin-form .pill { margin-top: 8px; justify-self: start; }
.admin-form-grid { max-width: 440px; }
.admin-form-inline { display: flex; gap: 20px; flex-wrap: wrap; }
.admin-link { color: var(--ink); text-decoration: underline; font-size: 14px; cursor: pointer; }
.admin-danger { color: #8a2a1c; }
.admin-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.admin-popover { width: min(360px, calc(100vw - 32px)); margin: auto; white-space: normal; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-3); text-align: left; }
.admin-popover::backdrop { background: rgba(28, 28, 28, 0.25); }
.admin-popover-title { margin-bottom: 4px; font-family: var(--serif); font-size: 24px; }
.admin-popover .admin-actions { margin-top: 14px; }
.admin-pill-danger { background: #8a2a1c; color: #fff; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.admin-table th, .admin-table td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table td:last-child { text-align: right; }
.admin-badge { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: var(--sand); font-size: 12px; }

.admin-tiles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.admin-tile { display: grid; gap: 4px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); transition: box-shadow 0.2s; }
.admin-tile:hover { box-shadow: var(--shadow-2); }
.admin-tile span { color: var(--muted); font-size: 14px; }

@media (max-width: 600px) {
  .admin-table thead { display: none; }
  .admin-table tr { display: grid; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .admin-table td { padding: 2px 0; border: 0; }
  .admin-table td:last-child { text-align: left; }
}

/* Pages and the page editor (src/render/admin-pages.js) */
.admin-wide { max-width: 1040px; }
.admin-strong-link { font-weight: 600; }
.admin-strong-link:hover { text-decoration: underline; }
.admin-row-actions { white-space: nowrap; }
.admin-row-actions > :not(.admin-popover) + :not(.admin-popover) { margin-left: 14px; }
.admin-alert ul { margin: 6px 0 0; padding-left: 20px; list-style: disc; }

.admin-editor { display: grid; gap: 20px; }
.admin-editor > .admin-card { width: 100%; }
.editor-head { max-width: 1040px; width: 100%; margin: 0 auto; display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; }
.editor-actions, .editor-foot { display: flex; gap: 10px; flex-wrap: wrap; }
.editor-foot { max-width: 1040px; width: 100%; margin: 0 auto; justify-content: flex-end; }
.admin-editor > .admin-alert { max-width: 1040px; width: 100%; margin: 0 auto; }

.field { display: grid; gap: 6px; }
.field-label { font-weight: 600; font-size: 14px; }
.field-optional { font-weight: 400; color: var(--muted); }
.field-hint { font-size: 13px; color: var(--muted); }
.field input[type="text"], .field input[type="number"], .field textarea, .field select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); font: inherit; font-size: 15px; color: var(--ink); }
.field textarea { resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.field-short { max-width: 220px; }
.field-check { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.field-pair { display: flex; gap: 12px; flex-wrap: wrap; }

.field-group { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field-group > legend, .field-image > legend { padding: 0; margin-bottom: 8px; }
.field-group .field-group:not(.section-fields) { padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); }
.field-image { display: grid; gap: 10px; margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); min-width: 0; }
.field-thumb { width: 120px; height: 90px; object-fit: cover; border-radius: 8px; background: var(--cream-deep); }
.field-thumb[hidden] { display: none; }

.field-list { display: grid; gap: 10px; }
.field-list-head { display: grid; gap: 2px; }
.field-items, .sections { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.field-item { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md); background: #fdfcf8; }
.field-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.field-item-name { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.field-list > .admin-link { justify-self: start; }

.item-tools { display: inline-flex; gap: 4px; margin-left: auto; }
.item-tools button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; line-height: 1; }
.item-tools button:hover { background: var(--sand); }
.item-tools [data-remove]:hover { background: var(--blush-soft); color: #8a2a1c; }

.section-item { border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; }
.section-details > summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; list-style: none; }
.section-details > summary::-webkit-details-marker { display: none; }
.section-details > summary::before { content: '▸'; color: var(--muted); }
.section-details[open] > summary::before { content: '▾'; }
.section-details[open] > summary { border-bottom: 1px solid var(--line); }
.section-type { font-weight: 600; white-space: nowrap; }
.section-name { color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.section-fields { padding: 16px; }
.add-section { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* Photos and videos (src/render/admin-media.js) and the editor's picker (public/js/admin.js) */
.field-more > summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.field-more[open] { display: grid; gap: 8px; }
video.field-thumb { background: var(--ink); }
.field-image > .pill { justify-self: start; }

.media-upload { display: grid; gap: 10px; max-width: 560px; }
.media-upload-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.media-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.media-card { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: #fff; }
.media-thumb { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--cream-deep); }
.media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; }
.media-badge { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: var(--cream); font-size: 12px; }
.media-info { display: grid; gap: 4px; align-content: start; padding: 12px; font-size: 14px; }
.media-name { font-weight: 600; overflow-wrap: anywhere; }
.media-address code { font-size: 12px; overflow-wrap: anywhere; color: var(--ink-soft); }
.media-warning { color: #8a2a1c; font-size: 13px; }
.media-info > .admin-link { justify-self: start; }

.picker { width: min(920px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff; color: var(--ink); box-shadow: var(--shadow-3); }
.picker::backdrop { background: rgba(28, 28, 28, 0.35); }
.picker[open] { display: grid; gap: 12px; align-content: start; }
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.picker-head .admin-subtitle { margin: 0; }
.picker-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px dashed var(--line); border-radius: var(--r-md); }
.picker-upload input[type="text"] { flex: 1 1 220px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 14px; }
.picker-search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: 15px; background: var(--cream); }
.picker-groups { display: grid; gap: 10px; }
.picker-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.picker-tile { display: grid; gap: 4px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); text-align: left; font-size: 12px; color: var(--muted); }
.picker-tile:hover, .picker-tile:focus-visible { border-color: var(--ink); }
.picker-tile img, .picker-tile video { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; background: var(--cream-deep); }
.picker-tile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.picker-tile[hidden] { display: none; }

/* Site settings (src/render/admin-settings.js) */
.admin-settings-groups { display: grid; gap: 20px; }
.admin-settings-groups > .admin-card { width: 100%; }
.settings-fields { display: grid; gap: 14px; }

/* Usability round 1: home tasks, pages list, More options, layouts, section chooser, Undo */
.admin-tasks { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin: 4px 0 8px; }
.admin-task { position: relative; display: grid; gap: 4px; padding: 18px 44px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--cream); transition: border-color 0.15s, box-shadow 0.15s; }
.admin-task:hover, .admin-task:focus-visible { border-color: var(--ink); box-shadow: var(--shadow-1); }
.admin-task strong { font-size: 16px; }
.admin-task span { color: var(--muted); font-size: 14px; }
.admin-task .admin-task-arrow { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 18px; color: var(--ink); }

.admin-search { max-width: 420px; }
.admin-search input { width: 100%; height: 44px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); font: inherit; }
.page-group { display: grid; gap: 6px; }
.page-group[hidden] { display: none; }
.page-list { display: grid; }
.page-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); }
.page-row[hidden] { display: none; }
.page-row-main { display: grid; gap: 1px; }
.page-row-main strong { font-size: 15px; }
.page-row-main:hover strong { text-decoration: underline; }
.page-row-main .admin-muted { font-size: 13px; }
.page-row-meta { font-size: 13px; white-space: nowrap; }
@media (max-width: 760px) {
  .page-row { grid-template-columns: 1fr; gap: 4px; }
  .page-row-meta { white-space: normal; }
}

.field-cond[hidden] { display: none; }
.field-more-options { border-top: 1px dashed var(--line); padding-top: 10px; }
.field-more-options > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.field-more-options > summary:hover { color: var(--ink); }
.field-more-body { display: grid; gap: 14px; margin-top: 12px; }

details.add-section { display: block; margin-top: 10px; }
details.add-section > summary { list-style: none; cursor: pointer; display: inline-flex; }
details.add-section > summary::-webkit-details-marker { display: none; }
.add-section-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); margin-top: 12px; }
.add-section-choice { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; text-align: left; }
.add-section-choice:hover, .add-section-choice:focus-visible { border-color: var(--ink); }
.add-section-choice strong { font-size: 14px; }
.add-section-choice span { font-size: 13px; color: var(--muted); line-height: 1.4; }

.admin-saved { max-width: 1040px; width: 100%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.admin-undo { font-weight: 600; text-decoration: underline; cursor: pointer; color: inherit; }
.field-anchor.is-target > * { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 6px; }

/* Home screen (src/render/admin.js): the site's photos up front, quiet type, real activity. */
.home { max-width: 1160px; margin: 0 auto; display: grid; gap: clamp(28px, 4vw, 44px); }
.home-head { display: grid; gap: 10px; padding-top: 8px; }
.home-date { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.home-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 6vw, 76px); line-height: 0.98; letter-spacing: -0.02em; }
.home-title em { font-style: italic; }
.home-status { margin: 0; display: flex; align-items: center; gap: 10px; color: var(--ink-soft); font-size: 15px; }
.home-dot { width: 8px; height: 8px; border-radius: 50%; background: #5d8a62; box-shadow: 0 0 0 4px rgba(93, 138, 98, 0.16); flex: none; }

.home-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(220px, auto); gap: 14px; }
.home-tile { position: relative; display: grid; align-content: end; gap: 6px; padding: 22px; min-height: 220px; border-radius: 20px; background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s, border-color 0.35s; }
.home-tile:hover, .home-tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: transparent; }
.home-tile-title { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.home-tile-line { color: var(--muted); font-size: 14px; }

.home-feature { grid-row: span 2; min-height: 460px; padding: 30px; border: 0; color: var(--cream); background: var(--ink); }
.home-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.home-feature::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28, 28, 28, 0) 35%, rgba(28, 28, 28, 0.72) 100%); }
.home-feature:hover img { transform: scale(1.04); }
.home-feature-text { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 360px; }
.home-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: rgba(255, 253, 247, 0.8); }
.home-feature-title { font-family: var(--serif); font-size: clamp(38px, 4vw, 52px); line-height: 1; }
.home-feature-title em { font-style: italic; }
.home-feature-line { color: rgba(255, 253, 247, 0.85); font-size: 15px; }
.home-go { position: absolute; z-index: 1; right: 26px; bottom: 28px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: var(--cream); color: var(--ink); font-size: 18px; transition: transform 0.35s; }
.home-feature:hover .home-go { transform: translateX(4px); }

.home-thumbs { position: absolute; top: 22px; left: 22px; display: flex; }
.home-thumbs img { width: 64px; height: 84px; object-fit: cover; border-radius: 10px; border: 3px solid #fff; box-shadow: var(--shadow-1); transition: transform 0.35s; }
.home-thumbs img + img { margin-left: -14px; }
.home-tile:hover .home-thumbs img:nth-child(1) { transform: rotate(-4deg) translateY(-2px); }
.home-tile:hover .home-thumbs img:nth-child(3) { transform: rotate(4deg) translateY(-2px); }
.home-thumbs-round img { width: 58px; height: 58px; border-radius: 50%; }
.home-menu { position: absolute; top: 22px; left: 22px; right: 22px; display: flex; flex-wrap: wrap; gap: 6px; }
.home-menu span { padding: 5px 11px; border-radius: 999px; background: var(--cream-deep); font-size: 12px; font-weight: 500; }
.home-redirect { position: absolute; top: 26px; left: 22px; right: 22px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.home-redirect span:first-child { text-decoration: line-through; }
.home-redirect span:last-child { color: var(--ink); font-weight: 600; }
.home-redirect-arrow { color: var(--taupe); }

.home-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 14px; }
.home-panel { display: grid; align-content: start; gap: 12px; padding: 24px; border-radius: 20px; background: var(--cream); border: 1px solid var(--line); }
.home-panel-title { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.home-recent li + li, .home-team li + li { border-top: 1px solid var(--line); }
.home-recent a { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.home-recent a:hover .home-recent-name { text-decoration: underline; text-underline-offset: 3px; }
.home-recent-name { display: block; font-weight: 500; }
.home-recent-meta { display: block; color: var(--muted); font-size: 13px; white-space: nowrap; }
.home-team li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.home-avatar { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--sand); font-size: 12px; font-weight: 600; letter-spacing: 0.5px; flex: none; }
.home-panel-link { justify-self: start; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-feature { grid-column: 1 / -1; grid-row: auto; min-height: 340px; }
  .home-lower { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-recent a { flex-direction: column; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  .home-tile, .home-feature img, .home-thumbs img, .home-go { transition: none; }
}
.local-sign-in { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px dashed var(--line); }
.local-sign-in .admin-muted { flex-basis: 100%; margin: 0; }

.home-shopify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding: 28px; border-radius: 20px; background: #fff; border: 1px solid var(--line); }
.home-shopify-text { display: grid; gap: 10px; justify-items: start; }
.home-shopify .home-kicker { color: var(--muted); }
.home-shopify-title { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3vw, 40px); line-height: 1.05; }
.home-shopify-title em { font-style: italic; }
.home-shopify-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.home-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-products img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; background: var(--cream-deep); }
@media (max-width: 900px) { .home-shopify { grid-template-columns: 1fr; } }

/* Live preview beside the editor (wide screens only; narrower ones keep "Preview in a tab"). */
.editor-layout { display: grid; gap: 24px; align-items: start; }
.live-preview { display: none; }
.live-show { display: none; }
@media (min-width: 1200px) {
  .editor-layout { grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); max-width: 1880px; margin: 0 auto; }
  .editor-layout .editor-head, .editor-layout .editor-foot, .editor-layout > .admin-editor > .admin-alert, .editor-layout .admin-card { max-width: none; }
  .live-preview { position: sticky; top: 16px; display: grid; grid-template-rows: auto minmax(0, 1fr); height: calc(100vh - 32px); border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-1); overflow: hidden; }
  .editor-layout.preview-hidden { grid-template-columns: minmax(0, 1fr); }
  .editor-layout.preview-hidden .live-preview { display: none; }
  .live-show:not([hidden]) { display: inline-flex; }
}
.live-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; }
.live-status { margin-right: auto; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.live-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #5d8a62; }
.live-modes { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--cream-deep); }
.live-modes button { height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--muted); }
.live-modes button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.live-hide { font-size: 12px; font-weight: 600; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.live-stage { position: relative; overflow: hidden; background: var(--cream-deep); }
.live-stage iframe { position: absolute; top: 0; left: 0; border: 0; background: var(--cream); transform-origin: top left; }
.live-stage[data-mode="phone"] iframe { left: 50%; transform-origin: top center; translate: -50% 0; box-shadow: 0 0 0 1px var(--line); }
.section-item.is-target { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: var(--r-md); }
.live-status a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }