/* Trial: the studio's inspector docked like Figma's design panel (ui-flag.js,
   ?ui=figma). It sits flush against the right edge from the top of the window
   to the bottom - no outer gap, no floating card - in the scene's own colour, so
   panel and canvas read as one dark surface split by a hairline. Its left edge
   drags to resize (ui-figma.js). Sections are divided by hairlines instead of
   cards; buttons and segments keep the site's pill shapes. The print readout
   folds to its status pill. Desktop only: a phone keeps the stacked studio.
   Scoped to html[data-editor="figma"]. */

@media (min-width: 901px) {
  html[data-editor="figma"] .shell { grid-template-columns: minmax(0, 1fr) var(--insp-w, var(--insp-default, 360px));
    gap: 0; padding: 0; }
  /* The overlays keep their breathing room from the window's edge... */
  html[data-editor="figma"] .stage { margin: 20px 20px 20px 24px; }
  /* ...while the canvas fills everything up to the panel's edge. */
  html[data-editor="figma"] .viewport,
  html[data-editor="figma"] body.has-desk-nav .viewport { inset: -20px -20px -20px -24px; }

  html[data-editor="figma"] .panel {
    position: relative;
    height: 100%;
    border-radius: 0;
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    background: var(--bg);               /* the scene's colour (app.js BACKDROP) */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  html[data-editor="figma"] .panel-head { padding: 12px 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
  html[data-editor="figma"] .panel-scroll { padding: 0 18px; }

  /* Sections: a hairline between them, a compact bold title. */
  html[data-editor="figma"] .block { border-bottom: 1px solid rgba(255, 255, 255, 0.07); }
  html[data-editor="figma"] .block:last-child { border-bottom: 0; }
  html[data-editor="figma"] .block-head { padding: 14px 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0; }
  html[data-editor="figma"] .group { background: none; border: 0; box-shadow: none; padding: 4px 0 8px; }

  /* Compact controls; the shapes stay the site's pills. */
  html[data-editor="figma"] .row { font-size: 12px; }
  html[data-editor="figma"] .seg { min-height: 30px; padding: 6px 10px; font-size: 12px; }
  html[data-editor="figma"] .row input[type="range"] { height: 20px; margin-top: 6px; }
  html[data-editor="figma"] .row input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -5.5px; }
  html[data-editor="figma"] .row input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; }

  /* The dock: part of the panel, a hairline above. */
  html[data-editor="figma"] .panel-dock { padding: 12px 18px; background: var(--bg);
    border-top: 1px solid rgba(255, 255, 255, 0.08); }
  html[data-editor="figma"] .panel-dock .btn { height: 38px; font-size: 13.5px; }
  html[data-editor="figma"] .panel-dock .dock-download { font-size: 13.5px; }

  /* The drag edge (ui-figma.js): invisible until the pointer finds it. */
  html[data-editor="figma"] .figma-resize { position: absolute; z-index: 10; top: 0; bottom: 0; left: -3px; width: 7px;
    cursor: col-resize; touch-action: none; }
  html[data-editor="figma"] .figma-resize::after { content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px;
    background: transparent; transition: background .15s ease; }
  html[data-editor="figma"] .figma-resize:hover::after,
  html[data-editor="figma"] .figma-resize:focus-visible::after,
  html[data-editor="figma"].figma-resizing .figma-resize::after { background: rgba(255, 255, 255, 0.5); width: 2px; }
  html[data-editor="figma"] .figma-resize:focus-visible { outline: none; }
  html[data-editor="figma"].figma-resizing, html[data-editor="figma"].figma-resizing * { cursor: col-resize !important;
    user-select: none; }
}

/* The print readout folds to its status pill (ui-figma.js adds the button). */
html[data-editor="figma"] .meta-top { display: flex; align-items: center; gap: 8px; }
html[data-editor="figma"] .meta-fold { display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-dim);
  cursor: pointer; transition: color .15s ease, transform .12s cubic-bezier(0.23, 1, 0.32, 1); }
html[data-editor="figma"] .meta-fold svg { width: 14px; height: 14px; transition: transform .2s cubic-bezier(0.23, 1, 0.32, 1); }
html[data-editor="figma"] .meta-fold:active { transform: scale(0.94); }
@media (hover: hover) and (pointer: fine) { html[data-editor="figma"] .meta-fold:hover { color: var(--ink); } }
html[data-editor="figma"] .meta.is-folded .meta-fold svg { transform: rotate(180deg); }
html[data-editor="figma"] .meta.is-folded > :not(.meta-top) { display: none !important; }
html[data-editor="figma"] .meta.is-folded { gap: 0; }
@media (prefers-reduced-motion: reduce) {
  html[data-editor="figma"] .meta-fold, html[data-editor="figma"] .meta-fold svg { transition: none; }
}

/* ---------------------------------------------------------------- pro-tool shapes
   An editor packs its controls: small 6-8 px corners instead of pills (pills
   spend width on their round ends), a label on the left and its control on the
   right of one line, the chosen option a filled tile. Desktop only, like the
   dock above. */
@media (min-width: 901px) {
  html[data-editor="figma"] { --radius-ctl: 6px; }

  /* Rows: label left, slider in the middle, value right - one line each. */
  html[data-editor="figma"] .row { gap: 6px 12px; padding-bottom: 14px; }
  html[data-editor="figma"] .row label { font-size: 12.5px; }
  html[data-editor="figma"] .row:has(> input[type="range"]) {
    grid-template-columns: minmax(0, 46%) minmax(0, 1fr) 54px; }
  html[data-editor="figma"] .row:has(> input[type="range"]) > input[type="range"] {
    grid-column: 2; grid-row: 1; margin: 0; }
  html[data-editor="figma"] .row:has(> input[type="range"]) > .val {
    grid-column: 3; grid-row: 1; justify-self: end; font-size: 12px; }

  /* Choices: a quiet track, the chosen one a filled tile. */
  html[data-editor="figma"] .segmented { border-radius: 8px; padding: 2px; gap: 2px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
  html[data-editor="figma"] .seg { border-radius: 6px; }
  html[data-editor="figma"] .seg[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14); color: #fff;
    font-weight: 500; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

  /* Fields, pickers and the panel's buttons: the same small corner. */
  html[data-editor="figma"] .swatch-current,
  html[data-editor="figma"] .mini-select,
  html[data-editor="figma"] .block-reset,
  html[data-editor="figma"] .panel-dock .btn,
  html[data-editor="figma"] .cost-btn,
  html[data-editor="figma"] .meta .status,
  html[data-editor="figma"] .meta-fold { border-radius: 6px; }
  html[data-editor="figma"] .select-trigger,
  html[data-editor="figma"] .panel .btn { border-radius: 6px; }
  html[data-editor="figma"] .stage-label { border-radius: 4px; }
  html[data-editor="figma"] .gen-switch,
  html[data-editor="figma"] .notice { border-radius: 8px; }
  html[data-editor="figma"] .swatch-current { padding: 6px 10px; min-width: 120px; }

  /* The scene's toolbars and the AI line, in the same language. */
  html[data-editor="figma"] .seg-pills { border-radius: 8px; padding: 2px; }
  html[data-editor="figma"] .stage-tools .view-btn,
  html[data-editor="figma"] .seg-pills .view-btn,
  html[data-editor="figma"] .light-bright { border-radius: 6px; }
}

/* ---------------------------------------------------------------- shapes, rings, fields */
@media (min-width: 901px) {
  /* Shape choices as picture tiles: the silhouette over its name (ui-figma.js). */
  html[data-editor="figma"] .segmented.seg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 4px; padding: 4px; border-radius: 8px; }
  html[data-editor="figma"] .segmented.seg-icons .seg { display: grid; justify-items: center; gap: 4px; padding: 8px 4px 6px;
    min-height: 0; white-space: normal; line-height: 1.15; font-size: 11px; color: var(--ink-dim); }
  html[data-editor="figma"] .segmented.seg-icons .seg svg { width: 22px; height: 22px; }
  html[data-editor="figma"] .segmented.seg-icons .seg[aria-pressed="true"] { color: #fff; }

  /* The ring's own pictures (profiles) and the plate's shapes: same tiles. */
  html[data-editor="figma"] .profile-chip,
  html[data-editor="figma"] .shape-chip { border-radius: 6px; }
  html[data-editor="figma"] .profile-chip[aria-pressed="true"],
  html[data-editor="figma"] .shape-chip[aria-pressed="true"] { background: rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }

  /* Two sliders side by side do not fit the one-line row: stack them. Two
     selects (size system / size) still share a line. */
  html[data-editor="figma"] .pair:has(input[type="range"]) { grid-template-columns: minmax(0, 1fr); gap: 0; }
  html[data-editor="figma"] .pair:has(input[type="range"]) .row { padding-bottom: 14px; }

  /* Every field and picker: one height, one corner. */
  html[data-editor="figma"] .panel input.text-input,
  html[data-editor="figma"] .panel input[type="text"],
  html[data-editor="figma"] .panel input[type="number"],
  html[data-editor="figma"] .panel textarea { border-radius: 6px; }
  html[data-editor="figma"] .panel input.text-input,
  html[data-editor="figma"] .panel input[type="text"],
  html[data-editor="figma"] .panel input[type="number"],
  html[data-editor="figma"] .panel .select-trigger { min-height: 36px; height: 36px; font-size: 13px; }
}

/* A laptop or tablet (901-1279 px): a narrower inspector, and ui-figma.js folds
   the left menu to icons, so the scene keeps room for its toolbars. */
@media (min-width: 901px) and (max-width: 1279px) {
  html[data-editor="figma"] { --insp-default: 300px; }
}
@media (min-width: 901px) {
  html[data-editor="figma"] .panel-dock .btn { white-space: nowrap; padding: 0 12px; }
}

/* Hints without the row of ⓘ (ui-figma.js): the button is kept for the keyboard
   and screen readers but unseen until focused; the label carries the hint. */
html[data-editor="figma"] .has-hint .info:not([data-warn]):not(:focus-visible) {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html[data-editor="figma"] .has-hint .label-text[title]:not([title=""]),
html[data-editor="figma"] .has-hint .block-title[title]:not([title=""]) { cursor: help; }
@media (hover: hover) and (pointer: fine) {
  html[data-editor="figma"] .has-hint .label-text[title]:not([title=""]):hover {
    text-decoration: underline dotted rgba(255, 255, 255, 0.35); text-underline-offset: 3px; }
}