/* ---------------------------------------------------------------------------
   Design your website: the Studio as one full-screen workspace.

   It is the same site as every other page — the blue header is the real
   .site-header, the controls are the same white cards site.css already styles,
   the buttons are our .action buttons — with the marketing page's hero, bands
   and footer taken away so the website being designed fills the screen.
   Loaded after site.css; nothing here restyles a control, only the frame
   around them.
   --------------------------------------------------------------------------- */

:root { --dock-h:64px; --side-w:340px; }

html, body.studio-page { height:100%; }
/* The page-centring gutter (314px at 1920) belongs to a centred marketing page; this shell
   runs to the window edges, so the header and dock sit on a flat one. */
body.studio-page { --gutter:20px; }
body.studio-page { margin:0; overflow:hidden; background:var(--ground); }

.studio-app {
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:var(--side-w) minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) var(--dock-h);
  grid-template-areas:"header header" "side stage" "dock dock";
}

/* The site's own header, unchanged but for its grid cell (site.css gives it the home
   page's padding on every page). It must keep position:sticky from site.css:
   #primary-nav's phone dropdown is absolutely positioned against it, and with the
   header static the dropdown measures from the fixed shell and opens 6px below the
   fold, on a page that cannot scroll. */
.studio-page .site-header { grid-area:header; }

/* ---- the controls ---------------------------------------------------------- */
.side { grid-area:side; min-height:0; background:var(--ground); border-right:1px solid var(--rule); }
.side-scroll { position:relative; height:100%; padding:14px 14px 22px; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column; gap:12px; }   /* flex, not grid: a grid item's sticky is trapped in its own row */
/* Room under the sticky tab row, so a control scrolled into view or reached by Tab never lands behind it. */
.side-scroll { scroll-padding-top:86px; }
.side-modes { position:sticky; top:-14px; z-index:2; margin:-14px -14px 0; padding:14px; background:var(--ground); }
.side-modes .panel-tabs { margin:0; }
.side .control-group, .side .panel > .control-group, .side .panel > fieldset { margin:0; }
/* One column, always: site.css's ≤1080 rules were written for the old page's wider
   controls area and would put two 150px columns inside a 340px sidebar. The palette
   fills itself instead of being pinned to a count, so it is right at every width. */
.side .panel, .side #panel-design { display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }   /* the id beats a class, so name it */
.side .panel[hidden], .side #panel-design[hidden] { display:none; }   /* must out-specify the id rule above */
.side .palette-grid { grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); }
.side .custom-palette { grid-template-columns:1fr 1fr; }
.side .name-control input { width:100%; }
.side .name-control .logo-row { margin-top:12px; }   /* the logo lives with the name: a logo replaces the typed name in the header */
.side .name-control .range-row { margin-top:12px; }
/* A design with no logo slot (Burton's header is the typed name) offers none: the choice would do nothing there. */
.side .name-control[data-no-logo] .logo-row, .side .name-control[data-no-logo] .logo-preview, .side .name-control[data-no-logo] #logo-size-row, .side .name-control[data-no-logo] > .logo-note { display:none; }
.side .logo-note { margin:10px 0 0; }

/* Folded away, the controls give the whole window to the site. */
.studio-app[data-side="off"] { grid-template-columns:minmax(0,1fr); grid-template-areas:"header" "stage" "dock"; }
.studio-app[data-side="off"] .side { display:none; }

/* The layout cards carry the name and nothing else, per E: the two-line card with a
   blurb under the name is gone, so they go back to site.css's own centred tab. */
.side .layout-tab { min-height:52px; padding:0 10px; text-align:center; }
/* A layout that is named but not built yet: a dashed outline and a small "Soon", no hover. */
.side .layout-soon, .side .layout-soon:hover { gap:6px; background:transparent; border-style:dashed; border-color:var(--rule); color:var(--muted); cursor:default; }
.side .layout-soon small { font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }

/* ---- collapsible control cards ---------------------------------------------
   The Look panel is fourteen cards now, so each one folds. The summary IS the
   legend — same 14.5px/700, same 12px under it — and nothing inside a card is
   restyled; site.css still owns every control in it. The marker is drawn here
   because the browser's own triangle is not in the site's face.
   No accordion: opening one never shuts another, because an owner comparing
   Header height against Spacing needs both open at once. */
/* The card's own top padding moves onto the summary, so the whole head is the thing you
   click and a shut card is its label centred in it — not a label resting on the bottom
   edge under 20px of dead card. */
.side details.control-group { padding:0 20px 22px; }
.side details.control-group:not([open]) { padding-bottom:0; }
.side .control-summary {
  display:flex; align-items:center; gap:10px;
  margin:0 -20px 12px; padding:18px 20px; list-style:none; cursor:pointer;
  font-size:14.5px; font-weight:700; color:var(--ink);
}
.side details.control-group:not([open]) .control-summary { margin-bottom:0; }
.side .control-summary::-webkit-details-marker { display:none; }
/* margin-left:auto lives on the chevron, not on the dot: with it on the dot the chevron
   jumped to the right edge the moment a control left its default. */
.side .control-summary::after {
  content:""; order:3; flex:none; width:9px; height:9px; margin-left:auto; margin-right:2px;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .14s ease;
}
.side details[open] > .control-summary::after { transform:rotate(-135deg) translate(-3px,-3px); }
.side .control-summary:hover::after { border-color:var(--ink); }
.side .control-summary:focus-visible { outline:3px solid var(--ink); outline-offset:2px; border-radius:2px; }
/* A card holding a choice that is not the default says so while it is shut, in the
   same blue the selected segment and the selected layout card already use. */
.side .control-summary[data-changed]::before {
  content:""; order:2; flex:none; width:7px; height:7px;
  border-radius:50%; background:var(--blue);
}
/* A row that does nothing on this layout is hidden, and .seg-row is display:grid,
   which beats the browser's own [hidden] rule. */
.side .seg-row[hidden], .side .seg-item[hidden] { display:none; }
@media (max-width:640px) {
  .side details.control-group { padding:0 16px 18px; }
  .side details.control-group:not([open]) { padding-bottom:0; }
  .side .control-summary { margin-left:-16px; margin-right:-16px; padding:16px; }
}
@media (prefers-reduced-motion: reduce) { .side .control-summary::after { transition:none; } }

/* ---- the website being designed -------------------------------------------- */
/* site.css makes .stage a sticky column on the old Styles page; here it is a grid cell. */
/* site.css styles .stage for the old Styles page, where it was a sticky column that bled
   to the gutter. Here it is a grid cell, so its margin, order and stacking are reset too:
   below 1080 the inherited margin:0 -28px put the preview card over the sidebar and 10px
   off the right edge, and z-index:5 painted it above the controls. */
.stage { grid-area:stage; position:static; top:auto; margin:0; order:0; z-index:auto;
         display:flex; flex-direction:column;
         min-width:0; min-height:0; padding:0; background:var(--ground); }
/* The website is the window: no padding, no card, no shadow. At a phone's or a tablet's
   width it is centred on the grey ground, which is the whole point of those two modes. */
.preview-frame {
  position:relative; flex:1 1 auto; width:100%; min-height:0; margin:0 auto;
  overflow:hidden; background:var(--white);
  border-radius:0;          /* site.css gives the old page's preview a card; here it is the window */
  box-shadow:none;
}
.studio-app:not([data-device="desktop"]) .preview-frame { box-shadow:0 0 0 1px var(--rule); }
/* No transition on the width: the frame holds a whole website, and animating
   max-width relayouts every page inside it on every frame. The switch is instant. */
/* Absolute, so the three height clamps site.css has for the old page cannot reach it. */
.preview-frame iframe { position:absolute; inset:0; display:block; width:100%; height:100%; max-height:none; border:0; background:var(--white); }
.studio-app[data-device="phone"] .preview-frame { max-width:390px; }
.studio-app[data-device="tablet"] .preview-frame { max-width:834px; }
.studio-app[data-device="desktop"] .preview-frame { max-width:none; }

/* The preview link, when the preview host is on: a strip above the site. */
.publish-row { flex:none; display:grid; gap:6px; margin:0; padding:12px 18px; border-bottom:1px solid var(--rule); background:var(--white); }
.publish-row[hidden] { display:none; }
.publish-error { flex:none; margin:0; padding:12px 18px; border-bottom:1px solid var(--rule); background:#f6e3df; color:#a3341c; font-size:14.5px; font-weight:600; }   /* the site's own error ground (.form-error) and text (.publish-error) */
.publish-error[hidden] { display:none; }

/* ---- the strip along the bottom -------------------------------------------- */
.dock :focus-visible { outline-color:var(--ink); }   /* the dock is white; the site header's white ring would vanish here */
.dock { grid-area:dock; display:flex; align-items:center; gap:18px; padding:0 18px; background:var(--white); border-top:1px solid var(--rule); }
/* No icon dock. Two worded switches, in the same face as everything else here. */
.dock-switch { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border:1.5px solid var(--rule); border-radius:var(--radius-sm); background:var(--white); color:var(--ink); font-size:14px; font-weight:600; }
.dock-switch:hover { border-color:var(--ink); }
.dock-switch[aria-pressed="true"], .dock-switch[aria-expanded="false"] { background:var(--ink); border-color:var(--ink); color:var(--white); }
.dock-link { display:inline-flex; align-items:center; gap:7px; color:var(--ink); font-size:14.5px; font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.dock-link:hover { color:var(--blue); }
.dock-link[hidden] { display:none; }   /* a class display beats the UA's [hidden] */
/* Start over undoes everything, so it sits with the quiet controls, not against the
   primary action where a thumb aiming for "Continue" would find it. */
.dock-quiet { min-height:38px; padding:0 4px; border:0; background:none; color:var(--muted); font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
.dock-quiet:hover { color:var(--ink); }
.dock-actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-left:auto; min-width:0; }
.dock-actions .action { min-width:0; }
.dock .action-sm { min-height:42px; }

/* ---- Page settings ----------------------------------------------------------
   The fourth mode. Its tab carries two words, so the four share the row by their
   own widths rather than four equal quarters that would wrap "Page settings". */
.side .panel-tab { flex:1 1 auto; padding:0 8px; white-space:nowrap; }
.ps-label { display:block; margin:0 0 6px; font-size:13.5px; font-weight:600; }
.page-settings-control .text-input + .ps-label, .ps-count + .ps-label { margin-top:14px; }
.page-settings-control .text-input + .seg-row { margin-top:10px; }
.ps-desc { display:block; min-height:104px; padding:11px 14px; font:inherit; font-size:15px; line-height:1.45; resize:vertical; }
/* The count is a sentence in the site's own muted text, and the site's error red once
   the words run past what a search result shows. */
.ps-count { margin:6px 0 0; color:var(--muted); font-size:13px; line-height:1.4; }
.ps-count.over { color:#a3341c; }
.ps-photos { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.ps-photo { position:relative; display:block; aspect-ratio:1.91; border-radius:var(--radius-sm); overflow:hidden; background:var(--ground); cursor:pointer; }
.ps-photo input { position:absolute; width:1px; height:1px; margin:-1px; opacity:0; }
.ps-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.ps-photo:has(input:checked) { outline:3px solid var(--blue); outline-offset:2px; }
.ps-photo:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:2px; }
.ps-photo-none { grid-column:1 / -1; aspect-ratio:auto; display:flex; align-items:center; justify-content:center; min-height:40px; padding:0 12px; border:1.5px solid var(--rule); background:var(--white); color:var(--ink); font-size:13.5px; font-weight:600; }
.ps-photo-none:has(input:checked) { border-color:var(--blue); outline:0; box-shadow:inset 0 0 0 1.5px var(--blue); }
.ps-photo-none:has(input:focus-visible) { outline:3px solid var(--ink); outline-offset:2px; }
.side .control-group[hidden] { display:none; }

/* ---- Publish ---------------------------------------------------------------- */
.dock [hidden] { display:none !important; }   /* .action and .dock-quiet set display, which beats the UA's [hidden] */
.dock .dock-quiet:disabled { color:#8a92a6; text-decoration:none; cursor:default; }
/* Continue while the look is one the build would refuse (app.js sets aria-disabled; a click opens the
   Colors note saying why instead of going on): it reads as unavailable, not as the live blue button.
   It stays focusable so the note can still be reached; the grey text holds 5.3:1 on the ground. */
#continue-design[aria-disabled="true"], #continue-design[aria-disabled="true"]:hover { background:var(--ground); border-color:var(--rule); color:var(--muted); cursor:not-allowed; }
.publish-dialog { width:min(560px, calc(100vw - 32px)); max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:var(--radius); background:var(--white); color:var(--ink); box-shadow:0 18px 48px rgba(16,26,46,.28); }
.publish-dialog::backdrop { background:rgba(16,26,46,.55); }
.publish-dialog-body { display:grid; gap:14px; padding:26px 26px 22px; }
.publish-dialog h2 { margin:0; font-size:22px; font-weight:700; line-height:1.25; letter-spacing:0; }
.publish-dialog p { margin:0; font-size:15px; line-height:1.5; }
.publish-dialog p:empty { display:none; }
#publish-changes { max-height:min(42vh, 360px); overflow-y:auto; overscroll-behavior:contain; }
#publish-changes:empty { display:none; }
#publish-changes h3 { margin:0 0 6px; font-size:14.5px; font-weight:700; }
#publish-changes ul { margin:0; padding-left:20px; list-style:disc; font-size:14.5px; line-height:1.45; }
#publish-changes li + li { margin-top:4px; }
#publish-changes ul + h3 { margin-top:14px; }
#publish-count { font-weight:600; }
.publish-msg.error { color:#a3341c; font-weight:600; }
.publish-dialog .select-row[hidden] { display:none; }
.publish-dialog-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; margin-top:4px; }
.publish-dialog-actions .action { width:auto; }
.publish-dialog-actions [hidden] { display:none; }
@media (max-width:520px) {
  .publish-dialog-body { padding:22px 18px 18px; }
  .publish-dialog-actions .action { flex:1 1 auto; }
}

/* ---- a section's own panel (section-settings.js) ------------------------------
   Pick a section and the Sections list steps aside for its panel: where you are, then
   the same collapsible white cards the Look panel uses, built from the same segments,
   swatches and sliders. Nothing new in the kit, only its arrangement. */
.block-settings { display:grid; gap:12px; }
.block-settings[hidden] { display:none; }
.side .block-crumbs { display:flex; align-items:center; gap:8px; padding:8px 8px 8px 8px; }
.crumb-trail { display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0; }
.crumb-back { display:inline-flex; align-items:center; gap:4px; flex:none; min-height:36px; padding:0 10px 0 6px; border:0; border-radius:4px; background:var(--ground); color:var(--ink); font-size:14px; font-weight:600; }
.crumb-back:hover { background:var(--tint); }
.crumb-icon { display:inline-flex; }
.crumb-sep { flex:none; color:var(--muted); font-size:16px; }
.crumb-here { min-width:0; margin:0; overflow:hidden; font-size:15px; font-weight:700; letter-spacing:-.01em; text-overflow:ellipsis; white-space:nowrap; }

/* What shows, and how big: the part's name, its eye, its size. */
.part-row { display:grid; grid-template-columns:minmax(0,1fr) 32px minmax(0,1.25fr) 40px; align-items:center; gap:4px 8px; min-height:38px; }
.part-row + .part-row { margin-top:2px; }
.part-row.no-size { grid-template-columns:minmax(0,1fr) 32px; }
.part-name { min-width:0; overflow:hidden; font-size:13.5px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.part-row.is-off .part-name { color:var(--muted); text-decoration:line-through; text-decoration-thickness:1.5px; }
.part-row input[type="range"] { width:100%; min-width:0; accent-color:var(--blue); }
.part-row input[type="range"]:disabled { opacity:.4; }
.part-row output { color:var(--muted); font-size:13px; font-weight:500; font-variant-numeric:tabular-nums; text-align:right; }

/* Background: the palette's own colors as swatches, the name of the one picked under them. */
.bg-options { display:flex; flex-wrap:wrap; gap:8px; }
.bg-option { flex:0 0 38px; padding:0; border:0; background:none; }
.bg-swatch { display:block; width:100%; aspect-ratio:1; border-radius:4px; box-shadow:inset 0 0 0 1px rgba(16,26,46,.16); font-style:normal; }
.bg-swatch.is-default { background:linear-gradient(135deg, var(--white) 0 47%, #c3c8d6 47% 53%, var(--white) 53%); }
.bg-option:hover .bg-swatch { outline:2px solid #b9bfd2; outline-offset:2px; }
.bg-option.selected .bg-swatch { outline:2px solid var(--ink); outline-offset:2px; }
.bg-option:focus-visible { outline:0; }
.bg-option:focus-visible .bg-swatch { outline:3px solid var(--ink); outline-offset:2px; }
.bg-control .palette-name { margin:10px 0 0; }

/* Photos: the pickers, then corners, frame and tilt. The card's title names them already. */
.block-settings .photo-rows > .seg-label { display:none; }
.block-settings .photo-rows + .seg-row { margin-top:14px; }
.block-settings .block-fields + .block-hint { margin-top:10px; }

/* Buttons: show or hide, the words, where it goes. */
.btn-row { display:grid; gap:8px; }
.btn-row + .btn-row { margin-top:18px; }
.btn-head { display:grid; grid-template-columns:32px minmax(0,1fr); align-items:center; gap:6px; }
.btn-words.text-input { min-height:40px; font-size:14.5px; }
span.btn-words { overflow:hidden; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.btn-row.is-off .btn-words { color:var(--muted); text-decoration:line-through; }
.btn-link { padding-left:38px; }
.btn-url.text-input { width:auto; min-height:40px; margin-left:38px; font-size:14.5px; }
.btn-url[aria-invalid="true"] { border-color:#a3341c; box-shadow:inset 0 0 0 1px #a3341c; }
.btn-add.action { justify-self:start; width:auto; margin-top:16px; }
.btn-row + .btn-add.action { margin-top:18px; }

/* What an added section holds (section-items.js): its items by their own words, each moved
   or taken out; a nested list's lines under it; the form's fields, each one opening to its
   question, kind, choices, required and width. */
.item-row { display:grid; grid-template-columns:minmax(0,1fr) 32px 32px 32px; align-items:center; gap:2px; min-height:38px; }
.item-row + .item-row { margin-top:2px; }
.item-name { min-width:0; min-height:36px; padding:0 8px; overflow:hidden; border:0; border-radius:4px; background:none; color:var(--ink); font-size:13.5px; font-weight:600; text-align:left; text-overflow:ellipsis; white-space:nowrap; cursor:pointer; }
.item-name:hover { background:var(--ground); }
.item-sub .item-name { padding-left:26px; color:#3d4459; font-weight:500; }
.item-row .btn-remove:disabled { color:#c3c8d6; background:transparent; cursor:default; }
.item-add-sub { justify-self:start; margin:4px 0 8px 26px; padding:0; border:0; background:none; font-size:13.5px; font-weight:600; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.item-row + .btn-add.action, .item-add-sub + .btn-add.action { margin-top:14px; }
.field-row { border-radius:6px; background:var(--ground); }
.field-row + .field-row { margin-top:6px; }
.field-summary { display:grid; gap:2px; padding:10px 34px 10px 12px; position:relative; list-style:none; cursor:pointer; }
.field-summary::-webkit-details-marker { display:none; }
.field-summary::after { content:""; position:absolute; top:17px; right:14px; width:7px; height:7px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); }
.field-row[open] > .field-summary::after { top:20px; transform:rotate(-135deg); }
.field-summary:focus-visible { outline:3px solid var(--ink); outline-offset:1px; border-radius:6px; }
.field-name { overflow:hidden; font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.field-kind { color:var(--muted); font-size:12.5px; font-weight:500; }
.field-body { display:grid; gap:12px; padding:2px 12px 14px; }
.field-body .text-input, .field-body select { background:var(--white); }
.field-body .select-row + .select-row, .field-body .seg-row + .seg-row { margin-top:0; }
.field-body .seg { background:#e4e7ef; }
.field-choices.text-input, .code-input.text-input { min-height:0; padding:10px 12px; font:inherit; font-size:14px; line-height:1.45; resize:vertical; }
.code-input.text-input { font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12.5px; }
.field-actions { display:flex; align-items:center; gap:2px; }
.field-remove { margin-left:auto; padding:0; border:0; background:none; color:var(--muted); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.field-remove:hover { color:var(--ink); }
.field-remove:disabled { opacity:.45; text-decoration:none; cursor:default; }
.field-row + .btn-add.action { margin-top:14px; }
.block-settings .text-input[aria-invalid="true"] { border-color:#a3341c; box-shadow:inset 0 0 0 1px #a3341c; }
/* Show on: two switches; the one left on can't go off (a section on neither is hidden). */
.seg-toggles .seg-item input:disabled + span { cursor:default; }

.block-foot { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; padding:2px 6px 6px; }
.block-reset { padding:0; border:0; background:none; color:var(--muted); font-size:13.5px; font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px; }
.block-reset:hover { color:var(--ink); }

/* In the list, a section holding its own settings says so, the way a shut Look card does. */
.block-name[data-changed]::after { content:""; display:inline-block; width:7px; height:7px; margin-left:8px; border-radius:50%; background:var(--blue); vertical-align:middle; }

/* ---- narrow: the site on top, the controls under it ------------------------- */
@media (max-width:900px) {
  :root { --dock-h:auto; }
  /* the site first, then the controls, with the two actions along the bottom */
  .studio-app { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(38vh,1fr) auto auto; grid-template-areas:"header" "stage" "side" "dock"; overflow-y:auto; }
  /* A floor for the controls, and the shell scrolls when the stack is taller than a short window (a phone on its side): with
     only percentages the controls got whatever was left, 14px at 667x375, under the bottom bar. */
  .side { max-height:46vh; min-height:240px; border-right:0; border-top:1px solid var(--rule); }
  .side-scroll { padding:12px 12px 20px; scroll-padding-top:82px; }
  /* The scroller is the containing block for the controls' visually-hidden (absolute) labels, so they are clipped
     with it; otherwise they sat 2,000px below the shell and it scrolled into a blank void. */
  .side { overflow:hidden; }
  .side-modes { margin:-12px -12px 0; padding:12px; top:-12px; }
  .studio-app[data-device="tablet"] .preview-frame { max-width:none; }   /* phone size stays 390px, centred, here too */
  .dock { flex-wrap:wrap; gap:10px 14px; padding:12px; background:var(--white); border-top:1px solid var(--rule); }
  .dock-link { margin-left:auto; }
  #toggle-side { display:none; }   /* the controls are a row below, not a column beside */
  .dock-actions { width:100%; margin-left:0; }
  /* Wrap rather than squeeze: with "Get a preview link" present, three equal buttons on a
     375px row clip their own labels. The preview link takes its own line; the two that
     matter share the one below it. */
  /* site.css:551 makes every .action full width below 760 (right for a marketing page,
     wrong for a toolbar), so the dock's buttons take their own width back. */
  /* site.css:551 makes every .action full width below 760 (right for a marketing page,
     wrong for a toolbar), so the dock's buttons take their own width back. */
  .dock-actions .action { width:auto; white-space:nowrap; }
  .dock-actions #continue-design { flex:1 1 auto; }
  .dock-actions #publish-edits { flex:1 1 auto; }
  .dock-actions #publish-preview { flex:0 1 auto; }
}
@media (max-width:520px) {
  #preview-width { display:none; }   /* the preview is already phone-width here */
  .dock-link { font-size:14px; }
  /* A phone: more of the site, and the bar along the bottom in two rows, not three: the
     quiet choices (Start over, Get a preview link, Discard) share the top row as links,
     the one that moves things on (Continue, or Publish) takes the full row under them. */
  .studio-app { grid-template-rows:auto minmax(44vh,1fr) auto auto; }
  .side { max-height:40vh; min-height:240px; }
  .dock { gap:0 12px; padding:6px 12px 10px; }
  .dock-actions { display:contents; }
  .dock #reset-design, .dock #discard-edits { order:1; }
  .dock #publish-preview { order:2; margin-left:auto; min-height:38px; padding:0 4px; border:0; background:none; color:var(--ink); font-size:14px; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; }
  .dock #continue-design, .dock #publish-edits { order:3; flex:1 1 100%; min-height:46px; margin-top:4px; }
}

/* ---- Fonts card: category, button font, your own font ---- */
/* Each font menu (app.js buildFontPicker) is the site's select while shut: the same 44px
   field on the grey ground, showing the face in use in that face, with the cards'
   chevron. Open, it lists every face in its own letters under its category's name and
   scrolls inside itself, over the controls below. */
.side .font-picker { position:relative; }
.side .font-picker-button {
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:0 12px;
  border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--ground);
  color:var(--ink); font-size:17px; font-weight:400; line-height:1.2; text-align:left; cursor:pointer;
}
.side .font-picker-button:hover { border-color:#b9bfd2; }
.side .font-picker-value { flex:1 1 auto; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.side .font-picker-button::after {
  content:""; flex:none; width:8px; height:8px; margin:-5px 2px 0 0;
  border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg);
}
.side .font-picker-button[aria-expanded="true"]::after { margin-top:4px; transform:rotate(-135deg); }
.side .font-picker-list {
  position:absolute; z-index:6; top:calc(100% + 4px); left:0; right:0;
  max-height:min(340px, 50vh); padding:4px 0 6px; overflow-y:auto; overscroll-behavior:contain;
  border:1px solid var(--rule); border-radius:var(--radius-sm); background:var(--white);
  box-shadow:0 12px 32px rgba(16,26,46,.18);
}
.side .font-picker-list[hidden] { display:none; }
/* Focus stays on the list while the arrows move a highlighted row, so the ring goes on
   that row rather than round the whole list. */
.side .font-picker-list:focus-visible { outline:0; }
.side .font-picker-group { padding:12px 14px 4px; color:var(--muted); font-size:12.5px; font-weight:600; line-height:1.3; }
.side .font-picker-option {
  position:relative; display:flex; align-items:center; min-height:40px; padding:0 38px 0 14px;
  color:var(--ink); font-size:17px; font-weight:400; line-height:1.2; cursor:pointer;   /* 400: the weight the preview link loads (a light row sets 300 itself) */
}
.side .font-picker-option.active { background:var(--ground); }
.side .font-picker-list:focus-visible .font-picker-option.active { box-shadow:inset 0 0 0 2px var(--ink); }
.side .font-picker-option[aria-selected="true"]::after {
  content:""; position:absolute; top:50%; right:17px; width:5px; height:10px; margin-top:-7px;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue); transform:rotate(45deg);
}
/* The Buttons sample is the page's first button label, on one line. */
.font-sample-button { -webkit-line-clamp:1; font-size:15px; font-weight:600; letter-spacing:0; line-height:1.3; }
/* Your own font sits under the menus it adds to, the way the logo sits under the name. */
.side .type-control .font-upload-row { margin-top:14px; }
.side .type-control .font-upload-row ~ .seg-row { margin-top:12px; }
@media (max-width:900px) {
  .side .font-picker-list { max-height:min(300px, 34vh); }
}
.side .select-row[hidden] { display:none; }

/* ---- a phone: touch targets of 44px (look-20), and a 320px tab row (look-21) ----
   The desktop sizes (28-40px) stood at phone width: the panel tabs, the segmented
   options, the checkboxes, the custom-colour boxes, the swatches (a 44px hit area
   around the same 35px chip, so the 8-column grid does not become 5) and the quiet
   links in the dock. */
@media (max-width:900px) {
  .side .panel-tab, .side .seg-item span, .side .check, .dock-quiet { min-height:44px; }
  .side .custom-palette label { grid-template-columns:44px minmax(0,1fr); }
  .side .custom-palette input[type="color"] { width:44px; height:44px; }
  .side .palette-option { position:relative; }
  .side .palette-option::after { content:""; position:absolute; inset:-5px; }
}
@media (max-width:520px) {
  .dock #publish-preview { min-height:44px; }
}
/* "Page settings" is the widest of the four tabs: at 320px the row ran 14px past its bar. */
@media (max-width:360px) {
  .side .panel-tab { padding:0 4px; font-size:13px; }
}

/* Said when typing reaches a text limit (blocks.js limitNotice). */
.limit-toast { position:fixed; left:50%; bottom:84px; z-index:60; max-width:min(92vw,420px); margin:0; padding:10px 14px; border-radius:8px; background:var(--ink); color:#fff; font-size:13.5px; line-height:1.4; transform:translateX(-50%); box-shadow:0 6px 24px rgba(0,0,0,.25); }
.limit-toast[hidden] { display:none; }
.picker-warn { display:block; margin-top:2px; color:#a3341c; font-size:12px; font-weight:600; }