/* ui2.css — the shared kit (site audit 2026-09-27, "Design kit"; migration steps 1–4).

   A page opts in with {% block ui %}2{% endblock %}: base.html then writes data-ui="2"
   on <html> and loads this file after components.css. The operator console never
   does (base.html refuses on the admin surface and on any /admin path; a template
   test guards it). Page CSS loads after this file.

   Rules:
   - Every rule sits under [data-ui="2"]. That one attribute of specificity is what
     lets a kit class beat components.css's bare-element rules (button:hover,
     input[type=text], label) without !important.
   - Element resets are :where([data-ui="2"]) el, specificity (0,0,1): they tie
     components.css's bare `label`/`button`/`h1` and win on load order, and lose to
     every class rule, components.css's included (.linkish, .btn), so a class always wins.
   - Tokens only (tokens.css). The one raw colour is the dark scrim behind a tag on a
     photo, which must read on any photo whatever the surface.
   - Inter stops at 600: only 400/500/600 are shipped. Inter only: no condensed face in the kit.
   - Motion only under prefers-reduced-motion: no-preference.
   - Components carry the pp- prefix. The DIY tool's t- classes are selector aliases
     of the rules they share (".pp-btn, .t-btn"), so its templates did not change;
     rename them later with a sed and the DIY screen tests. tool.css keeps only what
     is the tool's own. The marketing pattern and its tokens are not here yet: the showcase
     branch owns those tokens. */

/* ---------- element resets ---------- */
/* the page body's type (main, not body: the top bar keeps components.css's metrics) */
:where([data-ui="2"]) main { font-size: var(--fs-body); line-height: 1.5; }
:where([data-ui="2"]) :is(h1, h2, h3, p, ul, ol, figure, form) { margin: 0; }
/* components.css makes every <label> a small grey caption with a margin; in the kit a
   label is usually the tap target (a chip, a card, a button), so it takes its class's type. */
:where([data-ui="2"]) label { margin: 0; font-size: inherit; font-weight: inherit; color: inherit; }
:where([data-ui="2"]) button { font: inherit; }
/* `hidden` must beat every component's own display */
:where([data-ui="2"]) [hidden] { display: none !important; }

/* ---------- layout ---------- */
[data-ui="2"] .pp-screen { max-width: var(--page-w); margin: 0 auto; padding: 20px var(--gutter) 48px; }
[data-ui="2"] .pp-stack, [data-ui="2"] .t-stack { display: flex; flex-direction: column; gap: 16px; }
[data-ui="2"] .pp-stack-s { display: flex; flex-direction: column; gap: 8px; }
[data-ui="2"] .pp-narrow, [data-ui="2"] .t-narrow { max-width: var(--narrow-w); margin-inline: auto; }
[data-ui="2"] .pp-head { display: flex; flex-direction: column; gap: 12px; }
/* Main column and side panel: one column on a phone (the panel is the next block),
   side by side from 900px, the side panel a fixed 23rem from 1000px. */
[data-ui="2"] .pp-split, [data-ui="2"] .t-split { display: grid; gap: 20px; }
/* Side panel first on a phone (when it is what the page is for), right-hand on a laptop. */
@media (min-width: 900px) {
  [data-ui="2"] { --fs-h1: 1.9rem; }
  [data-ui="2"] .pp-screen { padding-block: 36px 64px; }
  [data-ui="2"] .pp-split, [data-ui="2"] .t-split { grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr); gap: 40px; align-items: start; }
  [data-ui="2"] .pp-split > .pp-side, [data-ui="2"] .t-split > .t-side { position: sticky; top: 24px; }
  [data-ui="2"] .pp-split.is-side-first > .pp-side { grid-column: 2; grid-row: 1; }
  [data-ui="2"] .pp-split.is-side-first > .pp-main { grid-column: 1; grid-row: 1; }
  [data-ui="2"] .pp-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  [data-ui="2"] .pp-head .pp-btn { width: auto; }
}
@media (min-width: 1000px) {
  [data-ui="2"] .pp-split, [data-ui="2"] .t-split { grid-template-columns: minmax(0, 1fr) var(--side-w); gap: 32px; }
  [data-ui="2"] .pp-split > .pp-side, [data-ui="2"] .t-split > .t-side { max-height: calc(100vh - 48px); overflow-y: auto;
    overscroll-behavior: contain; padding: 2px; margin: -2px; }
  /* ...but a side that is itself a panel keeps the panel's padding (the 2px above
     would otherwise outweigh .pp-panel's 20px and put the text on the border). */
  [data-ui="2"] .pp-split > .pp-side.pp-panel { padding: 20px; margin: 0; }
}

/* ---------- type ---------- */
:where([data-ui="2"]) h1 { font-size: var(--fs-h1); font-weight: 600; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
:where([data-ui="2"]) h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.25; }
:where([data-ui="2"]) h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
[data-ui="2"] .pp-lede, [data-ui="2"] .t-lede { color: var(--ink-soft); font-size: 1.05rem; max-width: 60ch; }
[data-ui="2"] .pp-help, [data-ui="2"] .t-help { font-size: var(--fs-help); color: var(--ink-soft); }
[data-ui="2"] .pp-cap { color: var(--ink-faint); font-size: var(--fs-cap); }
[data-ui="2"] .pp-num { font-variant-numeric: tabular-nums; }
/* Quantities you buy or have (a pack, a balance), never prices in running text. Inter,
   not the condensed --font-figure: the condensed faces are the marketing site's and stay
   out of /app and /tool (designer's gaps, 2026-09-29). */
[data-ui="2"] .pp-figure { font-family: var(--font-ui); font-weight: 600; letter-spacing: -.02em; line-height: 1;
  font-variant-numeric: tabular-nums; }

/* ---------- buttons and links: one primary per screen, then second, then quiet ---------- */
[data-ui="2"] .pp-btn, [data-ui="2"] .t-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  min-height: var(--tap-lg); padding: 12px 18px; border-radius: var(--r-ctl); font: inherit; font-size: var(--fs-ctl);
  font-weight: 600; cursor: pointer; border: 1.5px solid transparent; text-decoration: none; }
[data-ui="2"] .pp-btn:hover, [data-ui="2"] .t-btn:hover { text-decoration: none; }
[data-ui="2"] .pp-btn:active, [data-ui="2"] .t-btn:active { transform: translateY(1px); }
[data-ui="2"] .pp-btn-primary, [data-ui="2"] .t-btn-primary { background: var(--accent); color: var(--on-accent); }
[data-ui="2"] .pp-btn-primary:hover, [data-ui="2"] .t-btn-primary:hover { background: var(--accent-strong); color: var(--on-accent); }
[data-ui="2"] .pp-btn-second, [data-ui="2"] .t-btn-second { background: var(--bg-card); color: var(--ink); border-color: var(--line); }
[data-ui="2"] .pp-btn-second:hover, [data-ui="2"] .t-btn-second:hover { border-color: var(--accent-line); background: var(--accent-soft);
  color: var(--ink); }
[data-ui="2"] .pp-btn-quiet, [data-ui="2"] .t-btn-quiet { background: none; color: var(--accent); min-height: var(--tap); }
[data-ui="2"] .pp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
[data-ui="2"] .pp-btn-primary:disabled:hover { background: var(--accent); }
[data-ui="2"] .pp-btn-sm { min-height: var(--tap); font-size: 15px; padding: 8px 14px; width: auto; }
[data-ui="2"] .pp-btn svg, [data-ui="2"] .t-btn svg { flex: none; }
[data-ui="2"] .pp-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; }
[data-ui="2"] .pp-link-row { min-height: var(--tap); display: inline-flex; align-items: center; }

/* ---------- chips: choices, the balance, a tag on a photo ---------- */
[data-ui="2"] .pp-chips, [data-ui="2"] .t-chips { display: flex; flex-wrap: wrap; gap: 8px; }
[data-ui="2"] .pp-chip, [data-ui="2"] .t-chip { position: relative; min-height: var(--tap); padding: 8px 16px;
  border-radius: var(--r-pill); border: 1.5px solid var(--line); background: var(--bg-card); font-size: 15.5px;
  font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; }
[data-ui="2"] .pp-chip { gap: 6px; color: var(--ink); }
[data-ui="2"] .pp-chip[aria-pressed="true"], [data-ui="2"] .pp-chip:has(input:checked),
[data-ui="2"] .t-chip:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  font-weight: 600; }
/* a radio or checkbox inside a chip, swatch or pack card: the whole card is the target */
[data-ui="2"] .pp-chip input, [data-ui="2"] .pp-swatch input, [data-ui="2"] .pp-pack input,
[data-ui="2"] .t-chip input, [data-ui="2"] .t-swatch input, [data-ui="2"] .t-pack input {
  position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
[data-ui="2"] .pp-chip:has(input:focus-visible), [data-ui="2"] .pp-swatch:has(input:focus-visible),
[data-ui="2"] .pp-pack:has(input:focus-visible), [data-ui="2"] .t-chip:has(input:focus-visible),
[data-ui="2"] .t-swatch:has(input:focus-visible), [data-ui="2"] .t-pack:has(input:focus-visible) { box-shadow: var(--focus-ring); }
[data-ui="2"] .pp-bal { font-size: 13.5px; font-weight: 600; color: var(--accent-strong); background: var(--accent-soft);
  border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: none; }
[data-ui="2"] .pp-bal.is-zero { color: var(--review); background: var(--review-bg); }
/* A tag on a photo. The scrim is the kit's one raw colour: it has to read on any photo. */
[data-ui="2"] .pp-tag, [data-ui="2"] .t-tag { position: absolute; top: 10px; font-size: 12.5px; font-weight: 600;
  color: var(--on-accent); background: rgb(0 0 0 / .5); padding: 3px 9px; border-radius: var(--r-pill); pointer-events: none; }
[data-ui="2"] .pp-tag-l, [data-ui="2"] .t-tag-l { left: 10px; }
[data-ui="2"] .pp-tag-r, [data-ui="2"] .t-tag-r { right: 10px; }

/* ---------- style swatches: picture, name, palette strip, tick ---------- */
[data-ui="2"] .pp-swatches, [data-ui="2"] .t-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
[data-ui="2"] .pp-swatch, [data-ui="2"] .t-swatch { position: relative; border: 2px solid var(--line); border-radius: var(--r-ctl);
  background: var(--bg-card); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; }
[data-ui="2"] .pp-swatch-pic, [data-ui="2"] .t-thumb { aspect-ratio: 16 / 9; width: 100%; display: block; }
[data-ui="2"] .pp-swatch-pic img, [data-ui="2"] .t-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
[data-ui="2"] .pp-swatch-nm, [data-ui="2"] .t-nm { padding: 7px 9px 9px; font-size: 14px; font-weight: 600; line-height: 1.25;
  min-height: 44px; display: flex; align-items: center; overflow-wrap: break-word; hyphens: manual; }
/* Three across on a 390px phone leave ~96px for a name: "Scandinavian" broke as
   "Scandinavia / n" (launch surface review P1). Slightly tighter type keeps it whole. */
@media (max-width: 430px) {
  [data-ui="2"] .pp-swatch-nm, [data-ui="2"] .t-nm { padding: 7px 6px 9px; font-size: 13px; }
}
[data-ui="2"] .pp-pal, [data-ui="2"] .t-pal { display: block; margin: -4px 9px 9px; width: 65px; height: 6px; }
[data-ui="2"] .pp-swatch.is-on, [data-ui="2"] .pp-swatch:has(input:checked),
[data-ui="2"] .t-swatch:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
[data-ui="2"] .pp-tick, [data-ui="2"] .t-tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent); display: none; place-items: center; }
[data-ui="2"] .pp-swatch.is-on .pp-tick, [data-ui="2"] .pp-swatch:has(input:checked) .pp-tick,
[data-ui="2"] .t-swatch:has(input:checked) .t-tick { display: grid; }

/* ---------- packs: a radio card with the quantity in the figure face ---------- */
[data-ui="2"] .pp-packs, [data-ui="2"] .t-packs { display: grid; gap: 10px; }
[data-ui="2"] .pp-pack, [data-ui="2"] .t-pack { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 14px; padding: 14px 16px; border: 2px solid var(--line); border-radius: var(--r-panel); background: var(--bg-card);
  cursor: pointer; min-height: 72px; }
[data-ui="2"] .pp-pack:has(input:checked), [data-ui="2"] .t-pack:has(input:checked) { border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
[data-ui="2"] .pp-radio, [data-ui="2"] .t-radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink-faint);
  display: grid; place-items: center; }
[data-ui="2"] .pp-pack:has(input:checked) .pp-radio, [data-ui="2"] .t-pack:has(input:checked) .t-radio { border-color: var(--accent); }
[data-ui="2"] .pp-pack:has(input:checked) .pp-radio::after, [data-ui="2"] .t-pack:has(input:checked) .t-radio::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
[data-ui="2"] .pp-qty, [data-ui="2"] .t-qty { font-family: var(--font-ui); font-size: 20px; font-weight: 600;
  letter-spacing: -.01em; line-height: 1.1; }
[data-ui="2"] .pp-per, [data-ui="2"] .t-per { font-size: 13.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
[data-ui="2"] .pp-price, [data-ui="2"] .t-price { font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- cards, panels, sheets ---------- */
[data-ui="2"] .pp-card { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r-panel); }
[data-ui="2"] .pp-card-pad { padding: 16px; }
[data-ui="2"] .pp-panel { display: flex; flex-direction: column; gap: 14px; }
[data-ui="2"] .pp-deep { border-radius: 16px; padding: 18px; background: var(--bg-deep); color: var(--band-body);
  display: flex; flex-direction: column; gap: 10px; }
[data-ui="2"] .pp-deep :where(h2, h3) { color: var(--on-accent); }
[data-ui="2"] .pp-deep .pp-btn { background: var(--bg-card); color: var(--bg-deep); }
[data-ui="2"] .pp-deep .pp-btn:hover { background: var(--accent-soft); }
[data-ui="2"] .pp-deep .pp-soft { color: var(--band-eyebrow); font-size: 14px; }
/* A bottom sheet on a phone; from 900px it is the side panel, so it loses the grab bar. */
[data-ui="2"] .pp-sheet, [data-ui="2"] .t-sheet { background: var(--bg-card); border-radius: var(--r-sheet); border: 1px solid var(--line);
  box-shadow: var(--shadow-sheet); padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
/* A sheet can be a <dialog>: .pp-sheet's display: flex would show it closed. */
[data-ui="2"] dialog.pp-sheet:not([open]) { display: none; }
[data-ui="2"] .pp-grab, [data-ui="2"] .t-grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line);
  margin: -6px auto 2px; }
@media (min-width: 900px) {
  [data-ui="2"] .pp-panel { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
    box-shadow: var(--shadow-card); }
  [data-ui="2"] .pp-grab, [data-ui="2"] .t-grab { display: none; }
  [data-ui="2"] .pp-sheet, [data-ui="2"] .t-sheet { box-shadow: var(--shadow-card); }
}
[data-ui="2"] .pp-rows { display: flex; flex-direction: column; }
[data-ui="2"] .pp-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; border-top: 1px solid var(--line);
  color: var(--ink); text-decoration: none; }
[data-ui="2"] .pp-row:first-child { border-top: 0; }
[data-ui="2"] .pp-row .pp-tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
[data-ui="2"] .pp-row .pp-tx span { font-size: var(--fs-help); color: var(--ink-soft); }
[data-ui="2"] .pp-row .pp-end { margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
[data-ui="2"] .pp-chev { color: var(--ink-faint); flex: none; }
[data-ui="2"] .pp-ic, [data-ui="2"] .t-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft);
  color: var(--accent); display: grid; place-items: center; flex: none; }

/* ---------- listing card and status rail ---------- */
[data-ui="2"] .pp-listings { display: flex; flex-direction: column; gap: 12px; }
[data-ui="2"] .pp-listing { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px 14px; padding: 12px; }
[data-ui="2"] .pp-listing .pp-thumb { width: 96px; aspect-ratio: 1; border-radius: var(--r-thumb); object-fit: cover; background: var(--bg-inset); }
[data-ui="2"] .pp-listing .pp-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
[data-ui="2"] .pp-listing .pp-where { color: var(--ink-soft); font-size: var(--fs-help); }
[data-ui="2"] .pp-listing .pp-act { grid-column: 1 / -1; }
[data-ui="2"] .pp-listing .pp-state { font-size: 15px; font-weight: 600; }
[data-ui="2"] .pp-listing .pp-state.is-ready { color: var(--pass); }
[data-ui="2"] .pp-listing .pp-state.is-draft { color: var(--review); }
@media (min-width: 900px) {
  [data-ui="2"] .pp-listing { grid-template-columns: 208px minmax(0, 1fr) 13rem; align-items: center; padding: 14px; gap: 20px; }
  [data-ui="2"] .pp-listing .pp-thumb { width: 208px; aspect-ratio: 3 / 2; }
  [data-ui="2"] .pp-listing .pp-act { grid-column: auto; }
}
/* A listing's status in the customer's words (views.public_status), coloured by its
   slug (status_kind): Received, Our team is staging it, Ready to download, Photos deleted. */
[data-ui="2"] .pp-stat { display: inline-flex; align-items: center; gap: 6px; width: fit-content; font-size: 13.5px;
  font-weight: 600; line-height: 1.3; border-radius: var(--r-pill); padding: 3px 10px; background: var(--bg-inset);
  color: var(--ink-soft); }
[data-ui="2"] .pp-stat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
[data-ui="2"] .pp-stat.is-ready { background: var(--pass-bg); color: var(--pass); }
[data-ui="2"] .pp-stat.is-in_review { background: var(--accent-soft); color: var(--accent-strong); }
[data-ui="2"] .pp-stat.is-submitted { background: var(--review-bg); color: var(--review); }
[data-ui="2"] .pp-stat.is-expired, [data-ui="2"] .pp-stat.is-closed { background: var(--bg-inset); color: var(--ink-soft); }
/* The rail: a listing's three named steps (Sent, With our team, Ready), filled up to
   the current one, the marker on it. Set --at on .pp-rail to 0, 1 or 2. */
[data-ui="2"] .pp-rail { margin-top: 6px; }
[data-ui="2"] .pp-rail-track { position: relative; height: 2px; background: var(--line-strong); border-radius: 2px; margin: 8px 6px 0; }
[data-ui="2"] .pp-rail-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 2px;
  width: calc(var(--at) * 50%); }
[data-ui="2"] .pp-rail-mark { position: absolute; top: 50%; left: calc(var(--at) * 50%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 14%, transparent); }
[data-ui="2"] .pp-rail ol { list-style: none; padding: 0; display: flex; justify-content: space-between; margin-top: 8px;
  font-size: var(--fs-cap); color: var(--ink-faint); }
[data-ui="2"] .pp-rail li.is-now { color: var(--ink); font-weight: 600; }
[data-ui="2"] .pp-rail.is-ready .pp-rail-fill, [data-ui="2"] .pp-rail.is-ready .pp-rail-mark { background: var(--pass); }

/* ---------- notes and toasts: info, needs you, done ---------- */
[data-ui="2"] .pp-note, [data-ui="2"] .t-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--r-ctl); background: var(--accent-soft); color: var(--ink); font-size: 15px; }
[data-ui="2"] .pp-note svg, [data-ui="2"] .t-note svg { flex: none; margin-top: 2px; color: var(--accent); }
[data-ui="2"] .pp-note.is-warn, [data-ui="2"] .t-note.t-warn { background: var(--review-bg); }
[data-ui="2"] .pp-note.is-warn svg, [data-ui="2"] .t-note.t-warn svg { color: var(--review); }
[data-ui="2"] .pp-toast, [data-ui="2"] .t-toast { display: flex; align-items: center; gap: 10px; font-size: 15px; padding: 10px 14px;
  border-radius: var(--r-ctl); background: var(--pass-bg); color: var(--ink); }
[data-ui="2"] .pp-toast svg, [data-ui="2"] .t-toast svg { color: var(--pass); flex: none; }
[data-ui="2"] .pp-toast.is-warn, [data-ui="2"] .t-toast.t-warn { background: var(--review-bg); }
[data-ui="2"] .pp-toast.is-warn svg, [data-ui="2"] .t-toast.t-warn svg { color: var(--review); }

/* ---------- form fields: 52px, 17px text, the error under the field ---------- */
[data-ui="2"] .pp-field { display: flex; flex-direction: column; gap: 6px; }
[data-ui="2"] .pp-label, [data-ui="2"] .t-label { font-weight: 600; font-size: 15.5px; }
/* max-width: none undoes components.css's 30rem cap on text inputs */
[data-ui="2"] .pp-input { width: 100%; max-width: none; min-height: var(--tap-lg); padding: 12px 14px; border-radius: var(--r-ctl);
  border: 1.5px solid var(--line); background: var(--bg-card); color: var(--ink); font: inherit; font-size: var(--fs-ctl); }
[data-ui="2"] .pp-input:focus-visible { border-color: var(--accent); box-shadow: var(--focus-ring); }
[data-ui="2"] .pp-input.is-error { border-color: var(--regen); }
[data-ui="2"] .pp-error { color: var(--regen); font-size: var(--fs-help); font-weight: 500; }
[data-ui="2"] .pp-check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--tap); font-size: 15.5px; cursor: pointer; }
[data-ui="2"] .pp-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

/* ---------- empty states and drawings ---------- */
[data-ui="2"] .pp-empty { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 28px 16px; }
[data-ui="2"] .pp-empty p { max-width: 36ch; color: var(--ink-soft); }
/* Line drawings: 160 by 120, a card-coloured frame, three weights, one signal colour. */
[data-ui="2"] .pp-art-box, [data-ui="2"] .t-art-box { display: grid; place-items: center; padding: 18px; border-radius: var(--r-panel);
  background: var(--bg-inset); }
[data-ui="2"] .pp-art, [data-ui="2"] .t-art { display: block; max-width: 100%; height: auto; }
[data-ui="2"] .pp-art-bg, [data-ui="2"] .t-art-bg { fill: var(--bg-card); stroke: var(--line); stroke-width: 2; }
[data-ui="2"] .pp-art-line, [data-ui="2"] .t-art-line { stroke: var(--ink-faint); stroke-width: 2.5; }
[data-ui="2"] .pp-art-thin, [data-ui="2"] .t-art-thin { stroke: var(--ink-faint); stroke-width: 1.5; }
[data-ui="2"] .pp-art-fig, [data-ui="2"] .t-art-fig { stroke: var(--ink-soft); stroke-width: 3.5; }
[data-ui="2"] .pp-art-do { stroke: var(--accent); stroke-width: 3.5; }
[data-ui="2"] .pp-art-no, [data-ui="2"] .t-art-no { stroke: var(--review); stroke-width: 5; }

/* ---------- motion: it answers the agent (a colour on hover); none if they asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-ui="2"] .pp-btn, [data-ui="2"] .t-btn { transition: background-color .15s, transform .1s; }
}