/* Builder layout. Components come from gui.css (generated from the Graphical
   theme); this file only arranges them, using the theme's named tokens.
   Grid tracks, breakpoints and the preview's size are structural choices. */

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
/* the page never scrolls: the form scrolls inside its panel */
body { overflow: hidden; }
body { min-height: 100%; }

.layout {
  display: grid;
  /* fixed tracks (not auto) so the entrance can animate them */
  grid-template-columns: var(--panel-w, 440px) var(--space-xs) minmax(0, 1fr);
  grid-template-areas: 'panel split preview';
  height: 100dvh;
}
.panel { grid-area: panel; }
.preview { grid-area: preview; }

/* Entrance: the shirt first fills the page (as on the home page), then once
   it has landed the form glides in and the shirt eases over to make room.
   An expo-style ease-out: quick to start, a long soft settle. */
.layout { --enter-ease: cubic-bezier(0.16, 1, 0.3, 1); }
.layout.intro { transition: grid-template-columns 1.1s var(--enter-ease), grid-template-rows 1.1s var(--enter-ease); }
.layout.entering { grid-template-columns: 0px 0px minmax(0, 1fr); }
/* while waiting, the form and divider take no room and draw nothing (no
   panel edge or scrollbar gutter beside the shirt); during the slide the
   panel clips to its opening width */
.layout.entering :is(.panel, .splitter) { visibility: hidden; }
.layout.intro .panel { overflow: hidden; }
.layout :is(.panel, .splitter) { min-width: 0; min-height: 0; }
/* the form's contents drift in a beat behind the panel opening; the divider
   is part of the panel's edge, so it rides in with it from the first frame
   (just a short fade to cover its track opening from nothing) */
.layout.intro .panel > * { transition: opacity 0.7s var(--enter-ease) 0.35s, transform 0.9s var(--enter-ease) 0.3s; }
.layout.intro .splitter { transition: opacity 0.2s var(--enter-ease); }
.layout.entering .panel > * { opacity: 0; transform: translateX(-24px); }
.layout.entering .splitter { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .layout.intro, .layout.intro .panel > *, .layout.intro .splitter { transition: none; }
}

/* the form's scrollbar: just a thin handle, no track, shown only while the
   pointer is over the form or it's scrolling */
.panel {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  /* the scrollbar's room is always kept, so nothing narrows when it
     appears (after the entrance, or when a section opens) */
  scrollbar-gutter: stable;
}
.panel:hover,
.panel.scrolling { scrollbar-color: var(--neutral-5) transparent; }
.panel::-webkit-scrollbar { width: 10px; background: transparent; }
.panel::-webkit-scrollbar-track { background: transparent; }
.panel::-webkit-scrollbar-thumb {
  border-radius: var(--radius-full);
  border: 3px solid transparent;
  background-clip: padding-box;
  background-color: transparent;
}
.panel:hover::-webkit-scrollbar-thumb,
.panel.scrolling::-webkit-scrollbar-thumb { background-color: var(--neutral-5); }
.panel::-webkit-scrollbar-thumb:hover { background-color: var(--neutral-7); }

/* the draggable divider between form and preview */
.splitter {
  grid-area: split;
  position: relative;
  width: var(--space-xs);
  cursor: col-resize;
  touch-action: none;
  background: var(--cte-surface);
  display: grid;
  place-items: center;
  outline-offset: -2px;
}
.grip {
  width: 4px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--neutral-5);
  transition: background var(--motion-duration) var(--motion-easing),
    transform var(--motion-duration) var(--motion-easing);
}
.splitter:hover .grip,
.splitter:focus-visible .grip,
.layout.resizing .grip { background: var(--neutral-10); transform: scale(1.15); }
/* fingers: a wider invisible grab zone either side of the divider (nothing
   moves; the zone just hangs out over the preview's and the form's edges) */
@media (pointer: coarse) {
  .splitter { z-index: 1; }
  .splitter::after { content: ''; position: absolute; inset: 0 -12px; }
}
/* the preview's iframe would swallow the pointer mid-drag */
.layout.resizing iframe { pointer-events: none; }
.layout.resizing { user-select: none; }

/* Spacing, one rule throughout (theme tokens):
   xs  label -> its field
   s   neighbouring fields, across and down
   l   sections, and tour stops */
.panel {
  overflow-y: auto;
  padding: var(--space-xl) var(--space-l);
  display: flex;
  flex-direction: column;
  background: var(--cte-surface);
}

/* Sections: the theme's Accordion (trigger padded m, chevron indicator in
   neutral-7, panel padded m below), divided by hairlines. Inside a section,
   the spacing rule above applies. */
.acc { border-bottom: 1px solid var(--neutral-4-transparent); }
.acc-head { margin: 0; font: inherit; }
.gui .acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding: var(--space-m) 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--neutral-10);
  font-family: var(--font-ui);
  font-size: var(--size-m);
  line-height: var(--line-m);
  font-weight: var(--weight-ui-medium);
  text-align: left;
  cursor: pointer;
}
.acc-chevron {
  color: var(--neutral-7);
  transition: transform var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing);
}
.acc-trigger:hover .acc-chevron { color: var(--neutral-10); }
.acc-trigger[aria-expanded="false"] .acc-chevron { transform: rotate(-90deg); }
/* open and close by animating the row height between 0 and its content */
.acc-panel {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--motion-duration) var(--motion-easing), visibility 0s;
}
.acc-panel.closed { grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--motion-duration) var(--motion-easing), visibility 0s var(--motion-duration); }
/* clip while sliding; the inset padding keeps focus rings and lifted
   swatches from being cut off */
.acc-body { min-height: 0; overflow: hidden; margin-inline: -8px; }
.acc-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: 8px 8px calc(var(--space-m) + 8px);
}
@media (prefers-reduced-motion: reduce) {
  .acc-panel, .acc-panel.closed, .acc-chevron { transition: none; }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.title {
  margin: 0 0 var(--space-s);
  font-family: var(--font-brand);
  font-weight: var(--weight-brand-medium);
  font-size: var(--size-l);
  line-height: var(--line-l);
  letter-spacing: var(--letter-spacing-l);
}

fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; }
/* a legend sits outside the fieldset's flex gap, so give it the same label gap */
fieldset.field > legend { margin-bottom: var(--space-xs); }
.field { display: flex; flex-direction: column; gap: var(--space-xs); }
.field .gui-description { margin: 0; color: var(--cte-text-muted); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.gui-input { width: 100%; min-width: 0; }
.gui-input::placeholder { color: var(--cte-text-muted); opacity: 1; }

.gui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
/* compact icon buttons (the theme's button padding is sized for labels) */
/* (in every state: the theme's hover/focus rules set label padding too) */
.gui[data-mode] .gui-button.icon[data-variant],
.gui[data-mode] .gui-button.icon[data-variant]:is(:hover:not(:disabled):not([aria-disabled="true"]), :focus-visible, :disabled) {
  padding: var(--space-xs);
}
/* theme gap: ghost buttons have no disabled colour. Muted text still reads
   as live, so disabled icons drop to the rest grey (the divider's grip) */
.gui .gui-button.icon[data-variant]:disabled { color: var(--neutral-5); }
.gui-button:is(:disabled, [aria-disabled="true"]) { cursor: default; }
.gui-icon {
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.gui-toggle-group { display: flex; flex-wrap: wrap; }
/* a label with controls at its right end */
.field-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); min-height: 32px; }
.font-opts { display: flex; flex-direction: column; gap: var(--space-s); }

/* lettering choices: cards that share the full width evenly, each showing
   the name in its face over the face's name; the chosen one gets a ring */
#fonts { display: grid; grid-template-columns: repeat(var(--font-cols, 4), minmax(0, 1fr)); gap: var(--space-xs); }
.gui[data-mode] #fonts .gui-toggle,
.gui[data-mode] #fonts .gui-toggle:is(:hover, :focus-visible, [aria-checked="true"]) {
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xxs);
  min-width: 0;
  padding: var(--space-s) var(--space-xs);
  background: var(--neutral-3);
  transition: background var(--motion-duration) var(--motion-easing), box-shadow var(--motion-duration) var(--motion-easing);
}
.gui[data-mode] #fonts .gui-toggle:hover { background: var(--neutral-4); }
.gui[data-mode] #fonts .gui-toggle[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--neutral-10); }
.gui[data-mode] #fonts .gui-toggle:focus-visible { outline: 2px solid var(--cte-focus); outline-offset: 2px; }
#fonts .font-sample { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#fonts.caps .font-sample { text-transform: uppercase; }
.font-name {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xxs);
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--cte-text-muted);
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  font-weight: var(--weight-ui-regular);
}
.font-name .gui-icon { width: 12px; height: 12px; }
/* + Google font / + Image: tertiary buttons sharing a row under the cards */
/* + Google font: a card like the faces, a plus where the sample goes. It
   (or your Google font) sits last across the full width. */
#fonts .wide { grid-column: 1 / -1; }
#fonts .add-font .add-font-icon { width: 20px; height: var(--line-m); }
#fonts-more[hidden] { display: none; }
/* Lettering | Image: the theme's Tabs (list neutral-3, the chosen trigger
   neutral-1), as a full-width segmented control */
.gui-tabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
  border-radius: var(--radius-m);
  background: var(--neutral-3);
}
.gui .gui-tab {
  padding: var(--space-xxs) var(--space-s);
  min-height: 36px;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--neutral-7);
  font-family: var(--font-ui);
  font-size: var(--size-s);
  line-height: var(--line-s);
  letter-spacing: var(--letter-spacing-s);
  font-weight: var(--weight-ui-medium);
  cursor: pointer;
  transition: background var(--motion-duration) var(--motion-easing), color var(--motion-duration) var(--motion-easing);
}
.gui .gui-tab:hover { color: var(--neutral-10); }
.gui .gui-tab[aria-selected="true"] { background: var(--neutral-1); color: var(--neutral-10); }
.tab-panel { display: flex; flex-direction: column; gap: var(--space-s); }
.tab-panel[hidden], .gui .drop[hidden], .image-card[hidden] { display: none; }

/* the upload area: a dashed drop target that's also the button */
.gui .drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xl) var(--space-l);
  border: 1px dashed var(--neutral-5);
  border-radius: var(--radius-m);
  background: transparent;
  color: var(--neutral-10);
  font-family: var(--font-ui);
  cursor: pointer;
  transition: background var(--motion-duration) var(--motion-easing), border-color var(--motion-duration) var(--motion-easing);
}
.gui .drop:hover, .gui #panel-image.dropping .drop { background: var(--neutral-3); border-color: var(--neutral-7); }
.drop-icon { width: 24px; height: 24px; margin-bottom: var(--space-xxs); }
.drop-title { font-size: var(--size-s); line-height: var(--line-s); font-weight: var(--weight-ui-medium); }
.drop-hint { font-size: var(--size-xs); line-height: var(--line-xs); color: var(--cte-text-muted); }

/* the chosen image: the print, in the text colour, on a card */
.image-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-s);
  border-radius: var(--radius-m);
  background: var(--neutral-3);
}
#panel-image.dropping .image-card { box-shadow: inset 0 0 0 2px var(--neutral-7); }
/* the 16:9 print window: the picture's ink inside it, white, as it prints.
   Drag (or arrow keys) to move it; Zoom scales it. */
.image-crop {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-xs);
  background: var(--neutral-2);
  touch-action: none;
}
.image-crop.croppable { cursor: grab; }
.image-crop.dragging { cursor: grabbing; }
.image-crop:focus-visible { outline: 2px solid var(--cte-focus); outline-offset: 2px; }
.image-print {
  position: absolute;
  background: var(--neutral-10);
  -webkit-mask: var(--thumb) center / 100% 100% no-repeat;
  mask: var(--thumb) center / 100% 100% no-repeat;
  pointer-events: none;
}
/* Replace and Delete side by side, sharing the width evenly */
.image-actions { display: flex; gap: var(--space-xs); }
.image-actions > * { flex: 1 1 0; min-width: 0; justify-content: center; }

/* image print options */
.image-opts { display: flex; flex-direction: column; gap: var(--space-s); }
.image-opts[hidden], .font-opts[hidden], .slider-field[hidden], .gui-toggle[hidden], .gui .switch-row[hidden] { display: none; }
/* Invert: a label with the theme's Switch at the row's end (control
   neutral-4, color-1 when on; thumb neutral-1) */
.gui .switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--neutral-10);
  font-family: var(--font-ui);
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-s);
}
.gui-switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--neutral-4);
  transition: background var(--motion-duration) var(--motion-easing);
}
.gui-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  background: var(--neutral-1);
  transition: transform var(--motion-duration) var(--motion-easing);
}
.switch-row[aria-checked="true"] .gui-switch { background: var(--color-1); }
.switch-row[aria-checked="true"] .gui-switch::after { transform: translateX(16px); }
.switch-row:hover .gui-switch { background: var(--neutral-5); }
.switch-row[aria-checked="true"]:hover .gui-switch { background: var(--neutral-9); }
.slider-field { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--space-xs); }
.slider-label { font-size: var(--size-s); line-height: var(--line-s); font-weight: var(--weight-ui-medium); color: var(--neutral-10); }
/* the typed value beside each slider: a small field, right-aligned */
.slider-num {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font-size: var(--size-xs);
  line-height: var(--line-xs);
  color: var(--neutral-7);
}
.gui .slider-value {
  width: 4.5ch;
  padding: 2px 2px 2px var(--space-xxs);
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
  font: inherit;
  font-variant-numeric: tabular-nums;
  text-align: right;
  -moz-appearance: textfield;
  appearance: textfield;
  transition: background var(--motion-duration) var(--motion-easing);
}
.gui .slider-value:hover, .gui .slider-value:focus { background: var(--neutral-3); color: var(--neutral-10); }
.slider-value::-webkit-inner-spin-button, .slider-value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* the theme's Slider: neutral-3 track, color-1 fill, neutral-2 thumb ringed
   in color-1 (native range input, filled up to the thumb with --fill) */
.gui-slider {
  grid-column: 1 / -1;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.gui-slider::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--radius-full);
  background: linear-gradient(to right, var(--color-1) var(--fill, 50%), var(--neutral-3) var(--fill, 50%));
}
.gui-slider::-moz-range-track { height: 6px; border-radius: var(--radius-full); background: var(--neutral-3); }
.gui-slider::-moz-range-progress { height: 6px; border-radius: var(--radius-full); background: var(--color-1); }
.gui-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: var(--radius-full);
  background: var(--neutral-2);
  border: 2px solid var(--color-1);
  transition: transform var(--motion-duration) var(--motion-easing);
}
.gui-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--neutral-2);
  border: 2px solid var(--color-1);
}
.gui-slider:hover::-webkit-slider-thumb { transform: scale(1.12); }
.gui-slider:focus-visible { outline: 2px solid var(--cte-focus); outline-offset: 2px; border-radius: var(--radius-full); }

/* the Google Font tile, while its name is being typed */
#fonts .font-input { grid-column: 1 / -1; text-align: center; }
#fonts .font-input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--error); }
#fonts .font-input.loading { animation: font-loading 1s var(--motion-easing) infinite alternate; }
@keyframes font-loading { to { opacity: 0.5; } }
@media (prefers-reduced-motion: reduce) { #fonts .font-input.loading { animation: none; } }
.font-error { margin: 0; color: var(--error-text); }
.font-error[hidden] { display: none; }
.gui-toggle { cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-xs); }
/* lettering choices preview the name in each face */
.font-sample { font-weight: 400; font-size: var(--size-m); line-height: var(--line-m); letter-spacing: 0; }
.swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--swatch);
  box-shadow: inset 0 0 0 1px var(--neutral-10-transparent);
}

.stops { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-l); }
.stop { display: flex; flex-direction: column; gap: var(--space-s); }
.stop-head { display: flex; align-items: center; justify-content: space-between; }
.stop-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); }
.stop-field { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
.stop-field .gui-description { color: var(--cte-text-muted); }
.stop-tools { display: flex; gap: var(--space-xxs); }

.gui-separator { border: 0; height: 0; margin: 0; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-s); margin-top: var(--space-l); }
.links { display: flex; flex-direction: column; gap: var(--space-s); }
/* colour strips: swatches butted into one rounded bar; the chosen one lifts
   out with a ring. A + tile at the end holds the custom colour picker. */
.strip-legend { display: flex; gap: var(--space-xs); width: 100%; }
.strip-value { color: var(--cte-text-muted); font-weight: var(--weight-ui-regular); }
.swatch-strip { display: flex; align-items: stretch; gap: var(--space-xs); height: 44px; margin-block-end: var(--space-xxs); }
.strip { display: flex; flex: 1; min-width: 0; border-radius: var(--radius-s); }
.chip {
  position: relative;
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 0;
  cursor: pointer;
  background: var(--chip);
  transition: transform var(--motion-duration) var(--motion-easing),
    box-shadow var(--motion-duration) var(--motion-easing),
    border-radius var(--motion-duration) var(--motion-easing);
}
.chip:first-child { border-radius: var(--radius-s) 0 0 var(--radius-s); transform-origin: left center; }
.chip:last-child { border-radius: 0 var(--radius-s) var(--radius-s) 0; transform-origin: right center; }
/* (the end chips grow inward when chosen, so the section's edge doesn't clip them) */
/* themes: the shirt colour as a dot on its page colour */
.chip[data-tee]::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px;
  height: 12px;
  translate: -50% -50%;
  border-radius: var(--radius-full);
  background: var(--tee);
}
.chip:hover { transform: scaleY(1.06); }
.chip[aria-checked="true"] {
  z-index: 1;
  border-radius: var(--radius-xs);
  transform: scale(1.06, 1.14);
  box-shadow: 0 0 0 3px var(--neutral-10), var(--shadow-s);
}
.chip:focus-visible { z-index: 2; outline-offset: 4px; }
.chip-add {
  position: relative;
  flex: none;
  width: 56px;
  border-radius: var(--radius-s);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--chip, var(--neutral-3));
  color: var(--neutral-10);
  transition: box-shadow var(--motion-duration) var(--motion-easing);
}
.chip-add[data-on] { box-shadow: 0 0 0 3px var(--neutral-10), var(--shadow-s); }
.chip-add[data-on] .gui-icon { display: none; }
.chip-add input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip-add { transition: none; }
  .chip:hover, .chip[aria-checked="true"] { transform: none; }
}

.preview { position: relative; background: #000; min-height: 0; } /* the tee's page colour is set on load */
.preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.gui-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-l);
  transform: translateX(-50%);
  z-index: 10;
}
.gui-toast[hidden] { display: none; }

/* phones: the shirt on top, the form below it */
@media (max-width: 760px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-rows: var(--preview-h, 46dvh) var(--space-s) minmax(0, 1fr);
    grid-template-areas: 'preview' 'split' 'panel';
  }
  .layout.entering { grid-template-columns: 1fr; grid-template-rows: 100dvh 0px minmax(0, 1fr); }
  .layout.entering .panel > * { transform: translateY(24px); }
  .panel { padding: var(--space-l) var(--space-s); }
  .splitter { width: auto; height: var(--space-s); cursor: row-resize; }
  .grip { width: 36px; height: 4px; }
  /* stacked: the grab zone grows up and down instead (16px bar, 44px to the finger) */
  @media (pointer: coarse) {
    .splitter::after { inset: -14px 0; }
  }
}

/* ---------- header: title + account ---------- */
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); margin-bottom: var(--space-s); }
.panel-head .title { margin: 0; }
/* signed out: a compact tertiary button whose text lines up with the
   right edge of the form below (the padding hangs out past it) */
.gui[data-mode] .account-btn[data-variant],
.gui[data-mode] .account-btn[data-variant]:is(:hover:not(:disabled):not([aria-disabled="true"]), :focus-visible, :active:not(:disabled), :disabled) {
  padding: var(--space-xxs) var(--space-xs);
  margin-right: calc(-1 * var(--space-xs));
  gap: var(--space-xxs);
}
/* signed in: the theme's Avatar (neutral-3 circle, initials in neutral-8) */
.gui[data-mode] .account-btn.avatar[data-variant],
.gui[data-mode] .account-btn.avatar[data-variant]:is(:hover:not(:disabled):not([aria-disabled="true"]), :focus-visible, :active:not(:disabled), :disabled) {
  width: 36px;
  height: 36px;
  padding: 0;
  margin-right: 0;
  border-radius: var(--radius-full);
  background: var(--neutral-3);
  color: var(--neutral-8);
  font-size: var(--size-s);
  font-weight: var(--weight-ui-medium);
  letter-spacing: 0.02em;
}
.gui[data-mode] .account-btn.avatar[data-variant]:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--neutral-4); color: var(--neutral-10); }



/* publish: full width over Open / Copy */
.actions .publish { grid-column: 1 / -1; }
.actions [hidden] { display: none; }