/* ---------------------------------------------------------------------------
   Design your website: the Styles page 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, and nothing about it changes but its padding. 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; padding-top:14px; padding-bottom:14px; }

/* ---- the controls ---------------------------------------------------------- */
.side { grid-area:side; min-height:0; background:var(--ground); border-right:1px solid var(--rule); }
.side-scroll { 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 */
.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%; }

/* 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; }

.side .layout-tab { display:flex; flex-direction:column; gap:2px; min-height:56px; padding:10px 8px; line-height:1.25; }
.side .layout-tab small { font-size:11.5px; font-weight:500; opacity:.75; }

/* ---- 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; }

/* ---- 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"; }
  .side { max-height:46vh; border-right:0; border-top:1px solid var(--rule); }
  .side-scroll { padding:12px 12px 20px; }
  .side-modes { margin:-12px -12px 0; padding:12px; top:-12px; }
  .studio-app[data-device="phone"] .preview-frame, .studio-app[data-device="tablet"] .preview-frame { max-width:none; }
  .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-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; }
}