/* ==========================================================================
   EDITOR — the profile builder
   --------------------------------------------------------------------------
   Two panes that scroll independently, the way a design tool does: the form
   on the left never moves the preview, and scrolling the preview never loses
   your place in the form. Below 1024px there is not enough width for that
   conversation, so the form takes the whole page and the preview moves
   behind a button.

   Every measurement comes from tokens.css. The only bare numbers here are
   the ones doing arithmetic — the frame scale is a ratio, and a ratio has no
   unit by definition.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page shell
   -------------------------------------------------------------------------- */

.editor-page {
  background: var(--color-bg-sunken);
}

/* The builder is a workspace. A marketing footer under it would be the one
   thing on screen that cannot be used, so it is taken out of the flow on
   wide screens and restored when the page stacks. */
.editor-page .site-footer {
  display: none;
}

.editor {
  display: grid;
  gap: 0;
}


/* --------------------------------------------------------------------------
   2. Form pane
   -------------------------------------------------------------------------- */

.pane--form {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
}

/* ----- Simple header ----- */

.formhead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--ed-gutter);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}

.formhead__text {
  min-width: 0;
}

.formhead__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--color-text);
}

.formhead__sub {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.formhead .btn {
  flex: none;
}

/* Tier badges. The three tiers are told apart by colour everywhere else on
   the site, so they are told apart by colour here too. */
.badge--basic {
  color: var(--color-text-muted);
  background: var(--color-surface-muted);
  border-color: var(--color-border);
}

.badge--standard {
  color: var(--color-accent-text);
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft-border);
}

.badge--premium {
  color: var(--white);
  background: var(--gradient-accent);
  border-color: transparent;
  box-shadow: var(--shadow-accent);
}

/* ----- The form body ----- */

.form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--ed-group-gap);
  padding: var(--space-5) var(--ed-gutter) 0;
}

.form__tail {
  height: var(--space-8);
}


/* --------------------------------------------------------------------------
   3. Groups
   -------------------------------------------------------------------------- */

.group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--ed-radius-lg);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.group[open],
.group--slug {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
}

/* The arrow a browser puts on a summary is not the arrow this design uses. */
.group__summary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
  cursor: pointer;
  list-style: none;
  border-radius: var(--ed-radius-lg);
}

.group__summary::-webkit-details-marker {
  display: none;
}

.group__summary:hover {
  background: var(--color-surface-muted);
}

.group__summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.group__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.group__icon,
.group__title .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--color-accent-text);
}

.group__name {
  flex: 1 1 auto;
  min-width: 0;
}

.group__count {
  flex: none;
  min-width: 1.6rem;
  padding: 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1.6rem;
  text-align: center;
  color: var(--color-text-subtle);
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
}

.group__chevron {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
  color: var(--color-text-subtle);
  transition: transform var(--duration-base) var(--ease-out);
}

.group[open] > .group__summary .group__chevron {
  transform: rotate(180deg);
}

.group__body {
  display: grid;
  gap: var(--ed-field-gap);
  padding: var(--space-2) var(--space-5) var(--space-6);
}

.group--slug .group__body,
.group--slug .field {
  padding: var(--space-4) var(--space-5) var(--space-6);
}

.group__note {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
}


/* --------------------------------------------------------------------------
   4. Fields
   -------------------------------------------------------------------------- */

.field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

.field__count {
  flex: none;
  font-size: var(--text-2xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-subtle);
}

.field__count.is-full {
  color: var(--color-danger-text);
}

.field__note {
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-subtle);
}

.input {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-field);
  border: 1px solid var(--color-field-border);
  border-radius: var(--ed-radius);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.input::placeholder {
  color: var(--color-text-subtle);
}

.input:hover {
  border-color: var(--color-border-strong);
}

.input:focus {
  outline: none;
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.input--area {
  min-height: 5.5rem;
  line-height: var(--leading-relaxed);
  resize: vertical;
}


/* --------------------------------------------------------------------------
   5. The profile address
   -------------------------------------------------------------------------- */

.group--slug .group__title .icon {
  color: var(--color-accent-text);
}

.slug {
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--color-field);
  border: 1px solid var(--color-field-border);
  border-radius: var(--ed-radius);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.slug:focus-within {
  background: var(--color-surface);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.slug__prefix {
  flex: none;
  padding: var(--space-3) 0 var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  user-select: none;
}

.slug__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  background: none;
  border: 0;
}

.slug__input:focus {
  outline: none;
}

/* One slot, three possible icons. Which one shows is decided by the state
   on the wrapper, so the layout never jumps as the answer changes. */
.slug__state {
  position: relative;
  flex: none;
  width: 2.5rem;
  height: 1.25rem;
}

.slug__icon {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1.15rem;
  height: 1.15rem;
  opacity: 0;
  transform: translateX(-50%) scale(0.7);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-spring);
}

.slug--busy .slug__icon--busy,
.slug--available .slug__icon--ok,
.slug--taken .slug__icon--no,
.slug--invalid .slug__icon--no {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.slug__icon--busy {
  color: var(--color-text-subtle);
  animation: ed-spin var(--duration-slower) linear infinite;
}

.slug__icon--ok {
  color: var(--color-success);
}

.slug__icon--no {
  color: var(--color-danger);
}

.slug--available {
  border-color: var(--color-success);
}

.slug--taken,
.slug--invalid {
  border-color: var(--color-danger-border);
}

/* The message under the input carries the same colour as the icon. */
.field--slug[data-state="available"] .field__note {
  color: var(--color-success);
}

.field--slug[data-state="taken"] .field__note,
.field--slug[data-state="invalid"] .field__note {
  color: var(--color-danger-text);
}

@keyframes ed-spin {
  to { transform: translateX(-50%) rotate(360deg); }
}


/* --------------------------------------------------------------------------
   6. File fields
   -------------------------------------------------------------------------- */

.field--file {
  gap: var(--space-2);
}

.drop {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3);
  cursor: pointer;
  background: var(--color-field);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--ed-radius);
  transition: border-color var(--duration-base) var(--ease-out),
              background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

.drop:hover,
.drop.is-over {
  background: var(--color-accent-wash);
  border-color: var(--color-accent);
  border-style: solid;
  box-shadow: var(--shadow-sm);
}

.drop:focus-within {
  outline: none;
  border-color: var(--color-accent);
  border-style: solid;
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.drop__thumb {
  position: relative;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  overflow: hidden;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.drop__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.drop__thumb--doc {
  display: grid;
  place-items: center;
  color: var(--color-text-subtle);
}

.drop__thumb--doc .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.drop__text {
  display: grid;
  gap: var(--space-1);
  min-width: 0;
}

.drop__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.drop__title .icon {
  width: 1rem;
  height: 1rem;
  color: var(--color-accent-text);
}

.drop__meta {
  overflow: hidden;
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop__meta.is-heavy {
  color: var(--color-danger-text);
}

/* The real input still has to exist and still has to be reachable by
   keyboard, so it is made invisible rather than hidden. */
.drop__input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.drop__clear {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--ed-radius-sm);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.drop__clear:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

.drop__clear .icon {
  width: 0.9rem;
  height: 0.9rem;
}


/* --------------------------------------------------------------------------
   7. Sticky action bar
   -------------------------------------------------------------------------- */

.actionbar {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  min-height: var(--ed-bar-h);
  padding: var(--space-3) var(--ed-gutter);
  margin: 0 calc(var(--ed-gutter) * -1);
  background: var(--color-surface-translucent);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--color-border);
}

.actionbar__progress {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  margin: 0;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
}

.actionbar__count {
  white-space: nowrap;
}

.actionbar__track {
  display: block;
  width: auto;
  height: 4px;
  overflow: hidden;
  background: var(--color-surface-muted);
  border-radius: var(--radius-full);
}

.actionbar__fill {
  display: block;
  width: 0;
  height: 100%;
  background: var(--gradient-accent);
  border-radius: inherit;
  transition: width var(--duration-slow) var(--ease-out);
}


/* The quiet warning that sits above the buttons until somebody has an
   account. It is deliberately not an alert: nothing has gone wrong yet,
   and it is read before the click rather than after it. */
.actionbar__gate {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin: 0;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft-border);
  border-radius: var(--radius-md);
}

.actionbar__gate .icon {
  width: 1em;
  height: 1em;
  margin-top: 0.15em;
  color: var(--color-accent);
}

.actionbar__btns {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: var(--space-2);
}


/* --------------------------------------------------------------------------
   8. Preview pane
   -------------------------------------------------------------------------- */

.pane--preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background:
    radial-gradient(60% 50% at 50% 0%, var(--color-accent-wash), transparent 70%),
    var(--color-bg-sunken);
}

.vptoolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--ed-gutter);
}

.vpswitch {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-xs);
}

.vpswitch__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: none;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}

.vpswitch__btn .icon {
  width: 1rem;
  height: 1rem;
}

.vpswitch__btn:hover {
  color: var(--color-text);
}

.vpswitch__btn.is-on {
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  box-shadow: var(--shadow-accent);
}

.vpswitch__btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.vptoolbar__exit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
}

.vptoolbar__exit:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
}


/* ----- The stage and the device frame -----
   --stage-w / --stage-h are unitless pixel counts written by editor.js from
   a ResizeObserver. The values below are a sensible frame for the moment
   before that runs, and the whole thing still works without JS. */

.stage {
  --stage-w: 420;
  --stage-h: 720;

  --vw: var(--ed-vw-mobile);
  --ar: var(--ed-ar-mobile);
  --cap: var(--ed-cap-mobile);
  --bezel: var(--ed-bezel-mobile);
  --frame-radius: var(--ed-frame-mobile);
  --chrome: 0rem;

  display: grid;
  flex: 1 1 auto;
  place-items: center;
  min-height: 0;
  padding: 0 var(--ed-stage-pad);
}

.stage[data-vp="tablet"] {
  --vw: var(--ed-vw-tablet);
  --ar: var(--ed-ar-tablet);
  --cap: var(--ed-cap-tablet);
  --bezel: var(--ed-bezel-tablet);
  --frame-radius: var(--ed-frame-tablet);
}

.stage[data-vp="desktop"] {
  --vw: var(--ed-vw-desktop);
  --ar: var(--ed-ar-desktop);
  --cap: var(--ed-cap-desktop);
  --bezel: var(--ed-bezel-desktop);
  --frame-radius: var(--ed-frame-desktop);
  --chrome: var(--ed-chrome-h);
}

/* The screen is whichever is smallest: the room across, the room down once
   the aspect is honoured, or the cap for this device. Three constraints,
   one min(). */
.stage {
  --screen-w: min(var(--stage-w), var(--cap), calc(var(--stage-h) / var(--ar)));
  --scale: calc(var(--screen-w) / var(--vw));
}

.phone {
  padding: var(--bezel);
  background: var(--slate-900);
  border-radius: var(--frame-radius);
  box-shadow:
    0 0 0 1px rgb(var(--rgb-slate-900) / 0.12),
    var(--shadow-xl);
  transition: border-radius var(--duration-slow) var(--ease-out),
              padding var(--duration-slow) var(--ease-out);
}

/* Mobile earns a notch, desktop earns a window bar with three dots.
   Tablet gets neither, which is what a tablet looks like. */
.phone__chrome {
  display: block;
  height: var(--chrome);
}

.stage[data-vp="mobile"] .phone__chrome {
  position: relative;
  z-index: var(--z-raised);
  width: 32%;
  height: 1.1rem;
  margin: 0 auto -1.1rem;
  background: var(--slate-900);
  border-radius: 0 0 var(--radius-full) var(--radius-full);
}

.stage[data-vp="desktop"] .phone__chrome {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0 var(--space-3);
}

.stage[data-vp="desktop"] .phone__chrome::before,
.stage[data-vp="desktop"] .phone__chrome::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  background: var(--slate-600);
  border-radius: var(--radius-full);
  box-shadow: 0.7rem 0 0 var(--slate-600);
}

.stage[data-vp="desktop"] .phone__chrome::after {
  margin-left: 1.4rem;
}

.phone__screen {
  position: relative;
  width: calc(var(--screen-w) * 1px);
  height: calc(var(--screen-w) * var(--ar) * 1px);
  overflow: hidden;
  background: var(--color-bg);
  border-radius: calc(var(--frame-radius) - var(--bezel));
  transition: width var(--duration-slow) var(--ease-out),
              height var(--duration-slow) var(--ease-out),
              border-radius var(--duration-slow) var(--ease-out);
}

/* The iframe is laid out at the virtual viewport width and then scaled to
   whatever the screen can show. The template inside believes it is being
   read on a 390px phone or a 1440px laptop; only the picture is shrunk. */
.phone__doc {
  display: block;
  width: calc(var(--vw) * 1px);
  height: calc(var(--vw) * var(--ar) * 1px);
  border: 0;
  transform: scale(var(--scale));
  transform-origin: 0 0;
  transition: width var(--duration-slow) var(--ease-out),
              height var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.stage__hint {
  padding: var(--space-4) var(--ed-gutter) var(--space-5);
  margin: 0;
  font-size: var(--text-xs);
  text-align: center;
  text-wrap: balance;
  color: var(--color-text-subtle);
}


/* --------------------------------------------------------------------------
   9. Full-screen preview
   -------------------------------------------------------------------------- */

.editor.is-previewing .pane--preview {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  background: var(--color-bg-sunken);
}

.editor.is-previewing .vptoolbar {
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
}

.editor.is-previewing .vptoolbar__exit {
  display: inline-flex;
}

.editor.is-previewing .fab {
  display: none;
}

.is-previewing-lock {
  overflow: hidden;
}


/* --------------------------------------------------------------------------
   10. Floating preview button (small screens only)
   -------------------------------------------------------------------------- */

.fab {
  position: fixed;
  right: var(--ed-gutter);
  bottom: calc(var(--ed-bar-real, var(--ed-bar-h)) + var(--space-4));
  z-index: var(--z-sticky);
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-on-accent);
  background: var(--gradient-accent);
  border: 0;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-accent-lg), var(--shadow-lg);
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out);
}

.fab:hover {
  transform: translateY(-2px);
}

.fab .icon {
  width: 1.05rem;
  height: 1.05rem;
}


/* --------------------------------------------------------------------------
   11. Stacked layout — below 1024px
   -------------------------------------------------------------------------- */

@media (max-width: 63.99rem) {
  .editor-page .site-footer {
    display: block;
  }

  .pane--form {
    border-right: 0;
  }

  /* The preview is still in the document — the engine keeps writing to it —
     but it is out of the way until the button asks for it. */
  .pane--preview {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out),
                visibility var(--duration-base) var(--ease-out);
  }

  .editor.is-previewing .pane--preview {
    visibility: visible;
    opacity: 1;
  }

  .fab {
    display: inline-flex;
  }

  .vptoolbar {
    justify-content: space-between;
  }

  .vptoolbar__exit {
    display: inline-flex;
  }

  .vpswitch__btn span {
    display: none;
  }

  .vpswitch__btn {
    padding: var(--space-2);
  }
}

@media (max-width: 39.99rem) {
  .formhead {
    flex-wrap: wrap;
  }

  /* The bar keeps its order on a phone, but the two buttons stop sharing
     a line: a thumb wants the whole width to aim at. */
  .actionbar {
    padding-bottom: var(--space-4);
  }

  .actionbar__btns {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .actionbar__btns .btn {
    width: 100%;
  }
}


/* --------------------------------------------------------------------------
   12. Two-pane layout — 1024px and up
   -------------------------------------------------------------------------- */

@media (min-width: 64rem) {
  /* The two panes own the viewport between them and scroll inside
     themselves, so the page itself has nothing left to scroll. */
  .editor-page {
    overflow: hidden;
  }

  .editor {
    grid-template-columns: var(--ed-form-w) minmax(0, 1fr);
    height: calc(100dvh - var(--header-height));
  }

  .pane--form {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .pane--preview {
    height: 100%;
    overflow: hidden;
  }

  .form {
    padding-bottom: 0;
  }
}

@media (min-width: 90rem) {
  :root {
    --ed-form-w: clamp(30rem, 34vw, 38rem);
  }
}


/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .phone,
  .phone__screen,
  .phone__doc,
  .actionbar__fill,
  .slug__icon,
  .group__chevron {
    transition-duration: 1ms;
  }

  .slug__icon--busy {
    animation: none;
  }
}


/* --------------------------------------------------------------------------
   14. What came back from saving
   -------------------------------------------------------------------------- */

.result {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin: var(--space-5) var(--ed-gutter) 0;
  padding: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border: 1px solid transparent;
  border-radius: var(--ed-radius);
}

.result .icon {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.1rem;
}

.result__text {
  flex: 1 1 auto;
  min-width: 0;
}

.result code {
  padding: 0.1rem var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--color-surface);
  border-radius: var(--radius-xs);
}

.result__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  opacity: 0.85;
}

.result--good {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: var(--color-success);
}

.result--bad {
  color: var(--color-danger-text);
  background: var(--color-danger-soft);
  border-color: var(--color-danger-border);
}

.result__copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: inherit;
  background: var(--color-surface);
  border: 1px solid currentColor;
  border-radius: var(--ed-radius-sm);
  cursor: pointer;
}

.result__copy .icon {
  width: 0.95rem;
  height: 0.95rem;
  margin-top: 0;
}