/* AI Studio /create (vision §E7, §F4 fallback, §H4, §H7). Controls on columns 1–5, the studio canvas
   centred in 6–12 (sticky, square, ≤ 640px); below 1024 the canvas follows the Paint it button.
   AI images are flat: no lamp pool, no shadow, no filter. Only Jamal's originals ("similar colours")
   hang lit. Calm keeps every colour and drops every movement. */
@layer pages {
  .studio-page {
    padding-block: var(--space-5) var(--section);
  }

  /* ---- Local nav: Make | Visitor Wall (shared look with /visitors) -------------------------- */
  .studio-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .studio-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
    font: var(--ja-nav-type, 600 12.5px/1 var(--font-ui));
    letter-spacing: var(--ja-nav-track, 0.16em);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--ink-2);
    transition: color var(--dur-quick) var(--ease-set);
  }
  .studio-nav a:hover { color: var(--ink); }
  .studio-nav a[aria-current] { color: var(--ink); }
  .studio-nav a[aria-current]::after {
    content: "";
    position: absolute;
    inset-inline: -3px calc(var(--ja-nav-track, 0.16em) * -1 - 2px);
    inset-block-end: 8px;
    block-size: 2px;
    background: currentColor;
    -webkit-mask: var(--brush-underline) center / 100% 100% no-repeat;
    mask: var(--brush-underline) center / 100% 100% no-repeat;
  }

  /* ---- Layout ---------------------------------------------------------------------------------- */
  .studio {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-7) var(--gutter);
    margin-block-start: var(--space-6);
  }
  .studio__controls,
  .studio__more { min-inline-size: 0; }

  @media (min-width: 1024px) {
    .studio {
      grid-template-columns: repeat(12, minmax(0, 1fr));
      grid-template-rows: auto 1fr;
      align-items: start;
      row-gap: var(--space-6);
      /* Room under Paint it, so the sticky easel is not pushed up while the button is in view. */
      padding-block-end: var(--space-8);
    }
    .studio__controls { grid-column: 1 / span 5; grid-row: 1; }
    .studio__more { grid-column: 1 / span 5; grid-row: 2; }
    /* The canvas hangs centred in columns 6–12 (vision §E7), at most 640 px. */
    .studio__easel { grid-column: 6 / -1; grid-row: 1 / span 2; align-self: start; display: grid; justify-items: center; }
  }
  /* Sticky only where the canvas and its label fit the viewport. */
  @media (min-width: 1024px) and (min-height: 700px) {
    .studio__easel {
      position: sticky;
      inset-block-start: var(--space-5);
    }
  }

  /* ---- Head ------------------------------------------------------------------------------------ */
  .studio__head {
    display: grid;
    gap: var(--space-4);
    margin-block-end: var(--space-8);
  }
  .studio__title { margin: 0; }
  .studio__intro {
    max-inline-size: 44ch;
    margin: 0;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--ink-2);
  }
  .studio__noscript {
    padding: var(--space-3) var(--space-4);
    background: var(--raised);
    box-shadow: var(--e1);
    font-size: var(--step--1);
  }

  /* ---- Steps 1–3 --------------------------------------------------------------------------------- */
  .studio__form { display: grid; gap: var(--space-8); }
  .studio-step {
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }
  .studio-step__legend {
    float: none;
    inline-size: 100%;
    padding: 0;
    margin: 0 0 var(--space-4);
  }
  .studio-step__title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    font: 600 var(--step-1)/1.2 var(--font-ui);
    font-stretch: 92%;
    letter-spacing: -0.005em;
    color: var(--ink);
  }
  .studio-step__legend .studio-step__title { margin: 0; }
  .studio-step__no {
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--edge);
    border-radius: var(--radius-1);
    font: 500 13px/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }
  .studio-step__note {
    margin: var(--space-3) 0 0;
    font-size: var(--step--1);
    line-height: 1.45;
    color: var(--ink-2);
  }
  .studio-step__from {
    margin: 0 0 var(--space-4);
    max-inline-size: 48ch;
  }

  /* Style cards: the example work on a sunken mat (true aspect, never cropped), name, description. */
  .style-choices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
  }
  .choice--style {
    align-content: start;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-3);
  }
  .choice--style::after { content: none; } /* the check moves into the label, off the image */
  .choice--style .choice__label {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    margin-block-start: var(--space-2);
    margin-inline-start: 2px;
  }
  .choice--style .choice__label::before {
    content: "";
    flex: none;
    inline-size: 0;
    block-size: 14px;
    background: currentColor;
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
    transition: inline-size var(--dur-quick) var(--ease-set);
  }
  .choice--style:has(:checked) .choice__label::before { inline-size: 14px; }
  .choice--style .choice__note {
    margin-inline-start: 2px;
    font-size: var(--step--1);
    line-height: 1.35;
  }
  .choice__media {
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--sunken);
  }
  .choice__media > img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  .choice__media[data-shape="tall"] > img {
    inline-size: auto;
    block-size: 100%;
  }
  .choice--style { position: relative; }
  .choice__draft {
    justify-self: start;
    margin: var(--space-1) 0 0 2px;
    padding: 2px 6px;
    font-size: 9.5px;
  }

  /* Palettes: name with the check, then the four colours as a strip. */
  .palette-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
  }
  @media (min-width: 600px) and (max-width: 1023.98px), (min-width: 1200px) {
    .palette-choices { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  .choice--palette {
    gap: var(--space-2);
    min-block-size: 0;
    padding: var(--space-3) var(--space-3) var(--space-3);
    align-content: start;
    justify-items: stretch;
  }
  .choice--palette::after { inset-block-start: 13px; inset-inline-end: var(--space-3); }
  .choice--palette .choice__label {
    justify-self: start;
    padding-inline-end: 24px;
    font-size: var(--step--1);
    font-weight: 500;
  }
  .palette-strip {
    display: block;
    block-size: 14px;
    border-radius: 1px;
    background: linear-gradient(90deg, var(--c1) 0 25%, var(--c2) 25% 50%, var(--c3) 50% 75%, var(--c4) 75%);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 14%, transparent);
    forced-color-adjust: none;
  }

  /* Step 3: tabs, idea, examples, chip groups. */
  .studio-tabs .tabs__panel { padding-block-start: var(--space-5); }
  .studio-tabs .tabs__panel[hidden] { display: none; }
  .studio-idea { min-block-size: 8.5rem; resize: vertical; }
  .studio-examples { margin-block-start: var(--space-5); }
  .studio-examples__label {
    margin: 0 0 var(--space-3);
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  .studio-examples__list { margin: 0; padding: 0; list-style: none; --cluster-gap: var(--space-2); }
  .studio-example { white-space: normal; text-align: start; line-height: 1.25; padding-block: 6px; }
  .studio-chips {
    min-inline-size: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    border: 0;
  }
  .studio-chips__legend {
    float: none;
    padding: 0;
    margin: 0 0 var(--space-2);
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .studio-chips .cluster { --cluster-gap: var(--space-2); }
  #panel-build > .studio-step__note { margin: 0 0 var(--space-5); }

  /* Paint it, and the reason it is not ready yet (aria-disabled keeps it focusable). */
  .studio-paint { display: grid; gap: var(--space-3); }
  .studio-paint__button { min-block-size: 56px; font-size: 1rem; }
  .studio-paint__reason {
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  .studio-paint__button:not([aria-disabled="true"]) + .studio-paint__reason { display: none; }
  .studio-paint__reason[data-flash] { color: var(--ink); }

  /* ---- The studio canvas ---------------------------------------------------------------------- */
  /* Canvas and label share one width; on desktop the canvas shrinks on short screens so the whole
     easel (canvas + steps or actions) fits the viewport while it sticks. */
  .studio__easel { --canvas-size: min(100%, 640px); min-inline-size: 0; }
  @media (min-width: 1024px) {
    .studio__easel { --canvas-size: min(100%, 640px, max(380px, 100svh - 21rem)); }
  }
  .studio-canvas {
    position: relative;
    isolation: isolate;
    inline-size: var(--canvas-size);
    aspect-ratio: 1;
    overflow: hidden;
    background: #e9e3d8; /* gesso, before its photograph arrives */
    /* A hairline so the primed canvas reads against a light wall; no shadow (AI images are flat). */
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 10%, transparent);
  }
  .studio-canvas__gesso,
  .studio-canvas__gesso > img,
  .studio-canvas__drying,
  .studio-canvas__result {
    position: absolute;
    inset: 0;
    display: block;
    inline-size: 100%;
    block-size: 100%;
  }
  .studio-canvas__gesso > img { object-fit: cover; }
  .studio-canvas__result { z-index: 2; background: transparent; }
  .studio-canvas__result[hidden] { display: none; }
  .studio-canvas__drying { z-index: 1; pointer-events: none; }

  /* The wipe that brushes the finished image in, left to right (420 ms; instant in Calm). */
  .studio-canvas__result[data-reveal] {
    -webkit-mask: url("/assets/v3/textures/brush-wipe.webp") 100% 0 / 300% 100% no-repeat;
    mask: url("/assets/v3/textures/brush-wipe.webp") 100% 0 / 300% 100% no-repeat;
    animation: studio-brush-in var(--dur-pour) var(--ease-drag) both;
  }
  :root[data-motion="calm"] .studio-canvas__result[data-reveal] { -webkit-mask: none; mask: none; animation: none; }
  @keyframes studio-brush-in {
    from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    to { -webkit-mask-position: 0% 0; mask-position: 0% 0; }
  }

  /* ---- Drying canvas, CSS fallback (vision §F4): the palette laid on the gesso as four dry-brush
     strokes. They move only when a real step arrives, settle within 1.6 s, and keep still in Calm
     or when paused. Phase 3 may paint WebGL into this host; the DOM stays the fallback. */
  .drying {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--dur-settle) var(--ease-set);
  }
  .studio-canvas[data-state="waiting"] .drying,
  .studio-canvas[data-state="revealing"] .drying { opacity: 1; }
  .drying__band {
    position: absolute;
    inset-inline-start: -16%;
    inline-size: 132%;
    block-size: 34%;
    inset-block-start: 35%;
    background: var(--c, #888);
    opacity: var(--o, 0);
    mix-blend-mode: multiply;
    /* One broad dry-brush stroke: loaded head, bristle lanes, a tail that runs dry. */
    -webkit-mask: url("/js/v3/features/studio/media/stroke.webp") 0 0 / 100% 100% no-repeat;
    mask: url("/js/v3/features/studio/media/stroke.webp") 0 0 / 100% 100% no-repeat;
    translate: var(--tx, 0) var(--ty, 0);
    rotate: var(--r, 0deg);
    scale: var(--sx, 1) var(--sy, 1);
    transform-origin: 50% 50%;
    transition:
      translate var(--dur-dry) var(--ease-set),
      rotate var(--dur-dry) var(--ease-set),
      scale var(--dur-dry) var(--ease-set),
      opacity var(--dur-pour) var(--ease-set);
    will-change: translate, rotate, scale;
  }
  .drying__band[data-dir="rtl"] { transform: scaleX(-1); }
  .drying[data-paused] .drying__band { transition: none; }
  :root[data-motion="calm"] .drying__band { transition: none; }

  /* ---- Easel label: idle hint · wait steps · result · message ---------------------------------- */
  .easel-label {
    display: grid;
    align-content: start;
    min-block-size: 16.5rem;
    inline-size: var(--canvas-size);
    padding-block-start: var(--space-4);
  }
  .easel-label__view[hidden] { display: none; }
  .easel-label__hint {
    margin: 0;
    font: 400 var(--step-1)/1.3 var(--font-display);
    font-style: italic;
    color: var(--ink-2);
  }
  .easel-label__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: var(--space-2) 0 0;
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .palette-dots {
    display: inline-flex;
    gap: 4px;
    forced-color-adjust: none;
  }
  .palette-dots > span {
    inline-size: 10px;
    block-size: 10px;
    border-radius: var(--radius-pill);
    box-shadow: 0 0 0 1px color-mix(in oklab, var(--ink) 18%, transparent);
  }
  .palette-dots > span:nth-child(1) { background: var(--c1); }
  .palette-dots > span:nth-child(2) { background: var(--c2); }
  .palette-dots > span:nth-child(3) { background: var(--c3); }
  .palette-dots > span:nth-child(4) { background: var(--c4); }

  /* Wait */
  .wait { display: grid; gap: var(--space-3); }
  .wait__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .wait__title {
    margin: 0;
    font: 400 var(--step-1)/1.3 var(--font-display);
    font-style: italic;
  }
  .wait__elapsed {
    margin: 0;
    font: 450 var(--step--1)/1 var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }
  .wait__steps { gap: var(--space-2); margin-block-start: var(--space-1); }
  .wait__steps > li { min-block-size: 28px; }
  .wait__steps > li:not([aria-current], [data-done]) { color: var(--ink-2); }
  .wait__detail {
    min-block-size: 1.45em;
    margin: 0;
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  /* After 180 s the note takes the status line's place (the easel keeps its height while it sticks). */
  .wait__long {
    margin: 0;
    min-block-size: 1.45em;
    font: 500 var(--step--1)/1.45 var(--font-ui);
    color: var(--ink);
  }
  .wait:has(.wait__long:not([hidden])) .wait__detail { display: none; }
  .wait__actions { margin-block-start: var(--space-2); }
  /* Pause is a toggle (aria-pressed): pressed shows a check, as chips do (never colour alone). */
  .wait__pause[aria-pressed="true"]::before {
    content: "";
    flex: none;
    inline-size: 14px;
    block-size: 14px;
    background: currentColor;
    -webkit-mask: var(--icon-check) center / contain no-repeat;
    mask: var(--icon-check) center / contain no-repeat;
  }

  /* Result */
  .result__title {
    margin: 0;
    font: 400 var(--step-2)/1.2 var(--font-display);
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  /* AI titles are Instrument Sans 600 roman everywhere (as on the home AI band): Fraunces italic
     always means a title by Jamal. */
  .ai-title { font-family: var(--font-ui); font-style: normal; font-weight: 600; letter-spacing: -0.01em; }
  .result__caption { margin: var(--space-2) 0 0; }
  .result__note {
    margin: var(--space-2) 0 0;
    font-size: var(--step--1);
    color: var(--ink-2);
  }
  .result__actions { margin-block-start: var(--space-5); --cluster-gap: var(--space-2) var(--space-3); }
  .result__status {
    min-block-size: 1.45em;
    margin: var(--space-3) 0 0;
    font-size: var(--step--1);
    color: var(--ink);
  }
  .result__status:empty { margin: 0; min-block-size: 0; }
  .result__status a { font-weight: 600; }
  .result__status[data-tone="alert"] { color: var(--alert); }
  .result__unavailable {
    margin: 0;
    flex-basis: 100%;
    font-size: var(--step--1);
    color: var(--ink-2);
  }

  /* Message (error, cancelled): text first, never colour alone. */
  .message {
    display: flex;
    gap: 0.6em;
    margin: 0;
    font-size: var(--step-0);
    line-height: 1.5;
    color: var(--ink);
  }
  .message:focus { outline: none; }
  .message:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; }
  .message[data-tone="alert"] { color: var(--alert); }
  .message[data-tone="alert"]::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.2em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .message__actions { margin: var(--space-4) 0 0; }

  /* ---- Consent dialog: Hang it on the Visitor Wall? (copy deck §H7) ---------------------------- */
  .hang-dialog .dialog__body { padding-block-start: 0; }
  .hang-dialog__form { display: grid; gap: var(--space-5); }
  .hang-dialog__consent {
    margin: 0;
    max-inline-size: 52ch;
    line-height: 1.55;
  }
  .hang-dialog__error {
    display: flex;
    gap: 0.5em;
    margin: 0;
    color: var(--alert);
    font: 500 var(--step--1)/1.45 var(--font-ui);
  }
  .hang-dialog__error::before {
    content: "";
    flex: none;
    inline-size: 1.1em;
    block-size: 1.1em;
    margin-block-start: 0.15em;
    background: currentColor;
    -webkit-mask: var(--icon-alert) center / contain no-repeat;
    mask: var(--icon-alert) center / contain no-repeat;
  }
  .hang-dialog__error[hidden] { display: none; }
  .hang-dialog textarea.field__input { min-block-size: 6rem; }

  /* ---- See the full prompt --------------------------------------------------------------------- */
  .studio-prompt[hidden] { display: none; }
  .studio-prompt .field { margin-block-end: var(--space-4); }
  .studio-prompt__text {
    min-block-size: 10rem;
    font: 400 var(--step--1)/1.6 var(--font-mono);
  }

  /* ---- Real paintings by Jamal in similar colours (lit: these are originals) ----------------- */
  .studio-similar,
  .studio-mine { margin-block-start: var(--section); }
  @media (min-width: 1024px) {
    .studio + .studio-similar,
    .studio + .studio-similar[hidden] + .studio-mine { margin-block-start: calc(var(--section) - var(--space-8)); }
  }
  .studio-similar[hidden] { display: none; }
  .studio-similar__head,
  .studio-mine__title { max-inline-size: 40rem; }
  .studio-similar__head h2 { margin: 0; }
  .studio-similar__lede {
    margin: var(--space-3) 0 0;
    color: var(--ink-2);
  }
  /* One row on the wall: widths follow each painting's aspect ratio so all three hang at the same
     height (capped), with room between them for the lamp pool and cast shadow. */
  .studio-similar__list {
    --similar-h: 380px;
    display: flex;
    align-items: flex-start; /* one hang line: equal-height works share their top and bottom edges */
    gap: clamp(var(--space-6), 5vw, var(--space-9));
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
  }
  .similar__item {
    flex: var(--ar, 1) 1 0%;
    min-inline-size: 0;
    max-inline-size: calc(var(--ar, 1) * var(--similar-h));
  }
  .similar__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
  .similar__link .hang { inline-size: 100%; --hang-max: 100%; }
  .similar__link:hover .label__title,
  .similar__link:focus-visible .label__title { text-decoration: underline 1px var(--accent); text-underline-offset: 0.2em; }
  .similar__link:focus-visible { outline: 2px solid var(--lamp); outline-offset: 6px; }
  .similar__link .label__extra { margin-block-start: 2px; }
  @media (max-width: 599.98px) {
    .studio-similar__list { --similar-h: min(52svh, 360px); flex-direction: column; align-items: flex-start; gap: var(--space-8); }
    .similar__item { flex: none; inline-size: min(100%, calc(var(--ar, 1) * var(--similar-h))); }
  }

  /* ---- Your images (this device) ------------------------------------------------------------- */
  .studio-mine__title { margin: 0; }
  .studio-mine__empty {
    margin: var(--space-4) 0 0;
    max-inline-size: 48ch;
    color: var(--ink-2);
  }
  .studio-mine__empty[hidden],
  .studio-mine__list[hidden] { display: none; }
  .studio-mine__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7) var(--gutter);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 600px) { .studio-mine__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .studio-mine__list { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (min-width: 1440px) { .studio-mine__list { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  .mine__card { display: grid; align-content: start; gap: var(--space-2); }
  .mine__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--sunken);
  }
  .mine__expired {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 100%;
    aspect-ratio: 1;
    padding: var(--space-4) var(--space-4) var(--space-6);
    background: var(--sunken);
    color: var(--ink-2);
  }
  .mine__expired > p {
    margin: 0;
    max-inline-size: 26ch;
    font-size: var(--step--1);
    line-height: 1.45;
    text-align: center;
    text-wrap: pretty;
  }
  .mine__strip {
    position: absolute;
    inset: auto var(--space-4) var(--space-4);
    block-size: 6px;
  }
  .mine__title {
    margin: var(--space-1) 0 0;
    font: 600 var(--step-0)/1.25 var(--font-ui);
  }
  /* "PAINTINGS · OCEAN DEPTHS · 2 WEEKS AGO": facts wrap whole, and a wrapped line never starts
     with a dot (each dot sits in the gutter before its fact; the row's first gutter is clipped). */
  .mine__meta {
    --gap: 1.1em;
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 0 calc(var(--gap) * -1);
    clip-path: inset(-6px -6px -6px var(--gap));
    font: 450 var(--step--2)/1.5 var(--font-mono);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .mine__fact {
    position: relative;
    margin-inline-start: var(--gap);
    white-space: nowrap;
  }
  .mine__fact::before {
    content: "·";
    content: "·" / "";
    position: absolute;
    inset-inline-start: calc(var(--gap) * -1);
    inline-size: var(--gap);
    text-align: center;
  }
  .mine__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .mine__actions .button--text { min-block-size: 32px; padding-block: 4px; font-size: var(--step--1); }
  .mine__card[aria-current] .mine__thumb { outline: 2px solid var(--ink); outline-offset: 3px; }

  /* ---- Below 1024: the canvas follows Paint it ------------------------------------------------- */
  @media (max-width: 1023.98px) {
    .studio__head { margin-block-end: var(--space-7); }
    .studio__form { gap: var(--space-7); }
    .studio__easel { scroll-margin-block-start: var(--space-4); }
    .easel-label { min-block-size: 12rem; }
  }
  @media (max-width: 599.98px) {
    .style-choices { gap: var(--space-2); }
    .choice--style { padding: 6px 6px var(--space-3); }
    .choice--style .choice__note { display: none; }
    .result__actions > .button { flex: 1 1 auto; }
  }

  /* ---- Forced colours and high contrast --------------------------------------------------------- */
  @media (forced-colors: active) {
    .studio-canvas { border: 1px solid CanvasText; box-shadow: none; }
    .drying { display: none; }
    .studio-nav a[aria-current]::after { background: CanvasText; }
    .message[data-tone="alert"]::before { background: CanvasText; forced-color-adjust: none; }
    .choice--style .choice__label::before { background: CanvasText; forced-color-adjust: none; }
  }
}