/* KurenaiOS — css/views/governor.css · @layer views
   View compositions for Governor, Shop, notifications and the cloud chip (M11).
   A view file may use tokens and primitives; it may not restyle a
   primitive's internals.

   Graphite step 6 (frames 12a–12d): the Seat, the Gold Shop, Avatar &
   profile and the Session Log (js/modules/governor-ui.js).

   Convention for every layer file: its rules sit inside ONE @layer block,
   and the block's contents are not indented, so line-anchored tooling
   (tools/lib/css.js, the smoke suites) reads them like top-level rules. */
@layer views {

.k-gv { display: flex; flex-direction: column; gap: var(--sp-20); margin-block-start: var(--sp-20); }

/* one tone vocabulary for dots, chips, rewards and bars on these pages */
.k-gv [data-tone="teal"] { --tone-c: var(--teal); }
.k-gv [data-tone="healthy"] { --tone-c: var(--green); }
.k-gv [data-tone="green"] { --tone-c: var(--green); }
.k-gv [data-tone="crimson"] { --tone-c: var(--crimson); }
.k-gv [data-tone="critical"], .k-gv [data-tone="danger"] { --tone-c: var(--alarm); }
.k-gv [data-tone="amber"], .k-gv [data-tone="strained"], .k-gv [data-tone="gold"] { --tone-c: var(--amber); }
.k-gv [data-tone="bloom"] { --tone-c: var(--bloom); }
.k-gv [data-tone="red"] { --tone-c: var(--red); }
.k-gv [data-tone="muted"] { --tone-c: var(--muted); }
.k-gv-dot { inline-size: var(--sp-8); block-size: var(--sp-8); flex: 0 0 auto; border-radius: 50%; background: var(--tone-c, var(--muted)); }
.k-gv-reward { font: var(--fs-11-5) var(--font-mono); white-space: nowrap; color: var(--tone-c, var(--muted)); }

/* ---------- Status: the Seat, the Stage (35a) ---------- */
.k-gv-seat { display: flex; flex-direction: column; gap: var(--sp-16); }
.k-gv-stage { position: relative; isolation: isolate; border-radius: var(--r-28); overflow: hidden; background: var(--s1); }
.k-gv-stage-bg { position: absolute; inset: 0; z-index: -2; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--obj-pos, 50% 40%); }
.k-gv-stage::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, color-mix(in oklch, var(--bg) 92%, transparent) 0%, color-mix(in oklch, var(--bg) 70%, transparent) 40%, color-mix(in oklch, var(--bg) 25%, transparent) 70%),
    linear-gradient(0deg, color-mix(in oklch, var(--bg) 80%, transparent) 0%, transparent 30%); }
.k-gv-stage-grid { display: grid; grid-template-columns: minmax(0, var(--gv-stage-left)) minmax(0, 1fr) minmax(0, var(--gv-stage-right));
  grid-template-areas: "id . right" "arc . right" "wall . right" "rules rules rules"; align-content: space-between; gap: var(--sp-16);
  min-block-size: var(--gv-stage-h); padding: var(--sp-32) var(--gv-stage-pad) var(--sp-28) var(--gv-stage-pad-start); }
.k-gv-stage-id { grid-area: id; display: flex; align-items: center; justify-content: center; gap: var(--sp-28); min-inline-size: 0; }
.k-gv-arc { grid-area: arc; }
.k-gv-wallg { grid-area: wall; }
.k-gv-rightg { grid-area: right; }
.k-gv-stage .k-gv-rules { grid-area: rules; margin-inline-start: calc(var(--sp-8) * -1); }
.k-gv-stage-txt { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-gv-stage-kick, .k-gv-glass-kick { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; font-weight: var(--weight-semibold); color: var(--gold); }
.k-gv-stage-kick { font-size: var(--fs-12); }
.k-gv-name { margin: 0; font: var(--weight-semibold) var(--fs-gv-level) / 1 var(--font-ui); letter-spacing: var(--track-h1); }
.k-gv-title { font: italic var(--weight-medium) var(--fs-26) var(--font-read); color: var(--gold); }
.k-gv-title--pick { align-self: flex-start; padding: 0; border: 0; background: none; font-size: var(--fs-18, var(--fs-17)); color: color-mix(in oklch, var(--gold) 70%, var(--muted)); cursor: pointer; }
.k-gv-status-line { max-inline-size: var(--gv-about-w); padding: 0; border: 0; background: none; text-align: start; font: italic var(--fs-15) / 1.45 var(--font-read); color: var(--text-2); }
button.k-gv-status-line { cursor: pointer; }
button.k-gv-status-line:hover { color: var(--text); }
.k-gv-about-empty { align-self: flex-start; padding: var(--sp-6) var(--sp-12); border-radius: var(--r-pill); box-shadow: inset 0 0 0 var(--hairline) var(--line); font-size: var(--fs-12-5); color: var(--text-2); background: var(--gv-glass); }
.k-gv-about-empty:hover { color: var(--text); }
.k-gv-xp { display: flex; align-items: center; gap: var(--sp-10); margin-block-start: var(--sp-4); font-size: var(--fs-12); color: var(--text-2); }
.k-gv-xp .k-bar { --bar-h: var(--bar-5, var(--bar-6)); --bar-c: var(--text); inline-size: var(--gv-xp-w); max-inline-size: 60%; background: color-mix(in oklch, var(--text) 18%, transparent); }
.k-gv-stage .k-btn { background: var(--gv-glass); }
.k-gv-stage .k-btn:hover { background: var(--s2); }
/* the test menu: a quiet ⋯ in the page header */
.k-gv-tools { position: relative; }
.k-gv-tools-btn { list-style: none; display: grid; place-items: center; inline-size: var(--sp-32); block-size: var(--sp-32); border-radius: 50%; color: var(--muted); cursor: pointer; font-size: var(--fs-17); }
.k-gv-tools-btn::-webkit-details-marker { display: none; }
.k-gv-tools-btn:hover, .k-gv-tools[open] .k-gv-tools-btn { color: var(--text); background: var(--s2); }
.k-gv-tools-btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-gv-tools-pop { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + var(--sp-6)); z-index: var(--z-menu); display: grid; grid-template-columns: auto auto; align-items: center; gap: var(--sp-8) var(--sp-10);
  inline-size: max-content; padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: var(--s2); box-shadow: var(--elev-3), inset 0 0 0 var(--hairline) var(--line); white-space: nowrap; }
.k-gv-preview { font-size: var(--fs-12); }
.k-gv-preview .k-seg-item { padding: var(--sp-4) var(--sp-10); }
.k-gv-preview-k { font-size: var(--fs-11-5); color: var(--muted); }

/* the portrait in its HP ring, the worn seal as a badge */
.k-gv-ring { --frame-out: var(--sp-6); --ring: var(--green); position: relative; flex: 0 0 auto; align-self: flex-start; display: grid; place-items: center; padding: var(--sp-6); border-radius: 50%; background: conic-gradient(var(--ring) 0 var(--hp, 100%), var(--line) var(--hp, 100%) 100%); }
.k-gv-stage-id .k-gv-ring { align-self: center; box-shadow: 0 0 0 var(--sp-6) var(--bg), 0 0 0 var(--sp-8) var(--teal); }
.k-gv-ring[data-hp="strained"] { --ring: var(--amber); }
.k-gv-ring[data-hp="critical"] { --ring: var(--alarm); }
button.k-gv-ring:hover { filter: brightness(1.08); }
.k-gv-ring-seal { position: absolute; inset-inline-end: calc(var(--sp-2) * -1); inset-block-end: var(--sp-6); inline-size: var(--gv-seal-badge); block-size: var(--gv-seal-badge); display: grid; place-items: center; border-radius: 50%; background: var(--crimson); color: var(--crimson-ink); font: var(--weight-semibold) var(--fs-16) var(--font-kanji); box-shadow: 0 0 0 var(--bar-3) var(--bg); }
.k-gv-stage-id .k-gv-ring-seal { inline-size: calc(var(--gv-seal-badge) * 1.5); block-size: calc(var(--gv-seal-badge) * 1.5); font-size: var(--fs-22); }

/* the showcase arc: six medals on an upside-down parabola, highest in the middle */
.k-gv-arc { position: relative; block-size: var(--gv-stage-arc-h); inline-size: 100%; }
.k-gv-arc-lines { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; pointer-events: none; }
.k-gv-arc-lines path { fill: none; vector-effect: non-scaling-stroke; stroke-width: 1; }
.k-gv-arc-lines [data-line="a"] { stroke: color-mix(in oklch, var(--gold) 45%, transparent); stroke-dasharray: 2 6; }
.k-gv-arc-lines [data-line="b"] { stroke: color-mix(in oklch, var(--gold) 20%, transparent); }
.k-gv-arc-slot { position: absolute; inset-inline-start: calc((100% - var(--gv-arc-m)) * var(--ax)); inset-block-start: calc((100% - var(--gv-arc-m)) * var(--ay)); inline-size: var(--gv-arc-m); block-size: var(--gv-arc-m); display: grid; place-items: center; }
.k-gv-arc-slot[data-empty] { border-radius: 50%; box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--muted) 45%, transparent); }
.k-gv-arc-btn { padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.k-gv-arc-btn:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-gv-arc-note { position: absolute; inset-inline-start: 50%; inset-block-start: 62%; translate: -50% 0; max-inline-size: 56%; text-align: center; font-size: var(--fs-13); color: var(--text-2); }

/* glass: the Wall and the record, the right panel, the rules */
.k-gv-glass { border-radius: var(--r-22); padding: var(--sp-14) var(--sp-20); background: color-mix(in oklch, var(--bg) 74%, transparent);
  -webkit-backdrop-filter: blur(var(--sp-10)); backdrop-filter: blur(var(--sp-10)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--gold) 22%, transparent); min-inline-size: 0; }
.k-gv-wallg { display: flex; flex-direction: column; gap: var(--sp-12); }
.k-gv-wallg-head { display: flex; align-items: baseline; gap: var(--sp-12); white-space: nowrap; padding-block-end: var(--sp-12); border-block-end: var(--hairline) solid color-mix(in oklch, var(--text) 12%, transparent); }
.k-gv-wallg-n { font: italic var(--weight-medium) var(--fs-30) / 1 var(--font-read); }
.k-gv-wallg-n small { font-size: var(--fs-13); font-style: normal; color: var(--muted); }
.k-gv-wallg .k-link { font-size: var(--fs-13); color: var(--text-2); }
.k-gv-recs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-gv-rec { display: flex; flex-direction: column; gap: var(--sp-6); padding-inline: var(--sp-12); min-inline-size: 0; }
.k-gv-rec:first-child { padding-inline-start: 0; }
.k-gv-rec + .k-gv-rec { border-inline-start: var(--hairline) solid color-mix(in oklch, var(--text) 14%, transparent); }
.k-gv-rec-k { font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; }
.k-gv-rec-v { font-size: var(--fs-22); line-height: 1.2; letter-spacing: var(--track-figure); white-space: nowrap; }
.k-gv-rec:nth-child(2) .k-gv-rec-v { font-size: var(--fs-14); line-height: 1.9; }
.k-gv-rec-v small { font-size: var(--fs-12); color: var(--muted); }
.k-gv-rightg { display: flex; flex-direction: column; gap: var(--sp-14); padding: var(--sp-18) var(--sp-20); }
.k-gv-rightg .k-card-head { padding: 0; margin: 0 0 var(--sp-8); }
/* the ledger and the five states share one grid of rows (subgrid), so a
   milestone sits beside each state and the two headings share a line */
.k-gv-rightg-low { flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 2fr) var(--hairline) minmax(0, 1fr); grid-template-rows: auto repeat(5, minmax(0, 1fr));
  column-gap: var(--sp-18); padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid color-mix(in oklch, var(--text) 12%, transparent); min-block-size: 0; }
.k-gv-rightg-low > .k-gv-ledger, .k-gv-rightg-low > .k-gv-stack { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; }
.k-gv-rightg-low > .k-gv-ledger > .k-empty { grid-row: 2 / -1; }
.k-gv-vrule { grid-row: 1 / -1; }
.k-gv-vrule { background: color-mix(in oklch, var(--text) 14%, transparent); }
.k-gv-rightg .k-gv-cadence, .k-gv-rightg .k-gv-ledger { padding: 0; background: none; box-shadow: none; }
.k-gv-rightg .k-gv-led-row { border-block-start-color: color-mix(in oklch, var(--text) 10%, transparent); }
.k-gv-rightg .k-gv-led-row:first-of-type { border-block-start: 0; }

/* the five states, stacked in the right panel */
.k-gv-stack { display: flex; flex-direction: column; justify-content: center; min-inline-size: 0; }
.k-gv-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; align-items: baseline; gap: var(--sp-2) var(--sp-8); padding-block: var(--sp-6); }
.k-gv-stat + .k-gv-stat { border-block-start: var(--hairline) solid color-mix(in oklch, var(--text) 10%, transparent); }
.k-gv-stat-k { grid-column: 1; grid-row: 1; font-size: var(--fs-12); color: var(--muted); }
.k-gv-stat-v { grid-column: 2; grid-row: 1; font: var(--weight-medium) var(--fs-17) var(--font-mono); letter-spacing: var(--track-head); white-space: nowrap; }
.k-gv-stat[data-kind="gold"] .k-gv-stat-v { color: var(--gold); }
.k-gv-stat-h { grid-column: 1 / -1; grid-row: 2; font-size: var(--fs-11-5); line-height: 1.3; color: var(--tone-c, var(--muted)); }
.k-gv-stat .k-bar { grid-column: 1 / -1; --bar-h: var(--hairline); --bar-c: var(--tone-c, var(--text-2)); margin-block-start: var(--sp-2); }

/* six area cards under the stage, each in its set's panorama */
.k-gv-areas { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-14); }
.k-gv-area { position: relative; block-size: var(--gv-area-h); padding: 0; border: 0; border-radius: var(--r-20); overflow: hidden; background: var(--s1); color: var(--text); font: inherit; text-align: start; cursor: pointer;
  box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--set-hue) 35%, var(--line)); }
.k-gv-area > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 70% center; }
.k-gv-area::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, transparent 30%, color-mix(in oklch, var(--bg) 92%, transparent) 82%); }
.k-gv-area::after { content: ""; position: absolute; z-index: 2; inset-block: 0; inset-inline-start: 0; inline-size: var(--bar-3); background: var(--set-hue); }
.k-gv-area:hover { box-shadow: inset 0 0 0 var(--hairline) var(--set-hue), var(--elev-1); }
.k-gv-area:focus-visible { outline: var(--focus-width) solid var(--focus-ring); outline-offset: var(--focus-offset); }
.k-gv-area-t { position: absolute; z-index: 2; inset-inline: var(--sp-16) var(--sp-14); inset-block-end: var(--sp-14); display: flex; flex-direction: column; gap: var(--sp-3); }
.k-gv-area-n { font-size: var(--fs-32); font-weight: var(--weight-medium); line-height: 1; letter-spacing: var(--track-figure); }
.k-gv-area-u { font-size: var(--fs-12-5); color: var(--text-2); }
.k-gv-area-s { font: italic var(--fs-12-5) var(--font-read); color: var(--muted); }

/* Edit your seat (35a·edit): the preview at 60% beside the editor */
.k-gv-edit { display: grid; grid-template-columns: minmax(0, var(--gv-edit-prev)) minmax(0, 1fr); gap: var(--sp-16); align-items: start; margin-block-start: var(--sp-20); }
.k-gv-edit-left { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-gv-edit-cap { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); font-size: var(--fs-12); }
.k-gv-prev { position: relative; inline-size: 100%; block-size: var(--prev-h, auto); aspect-ratio: 1328 / 700; overflow: hidden; border-radius: var(--r-18); box-shadow: inset 0 0 0 var(--hairline) var(--line); background: var(--bg); pointer-events: none; }
.k-gv-prev-inner { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: var(--gv-stage-w); transform-origin: 0 0; transform: scale(var(--prev-s, 0.6)); }
.k-gv-sum { display: grid; gap: var(--sp-12); padding: var(--sp-16) var(--sp-18); }
.k-gv-sum-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-14); padding-block-end: var(--sp-12); border-block-end: var(--hairline) solid var(--line); }
.k-gv-sum-c { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; font-size: var(--fs-13-5); }
.k-gv-sum-title { font: italic var(--weight-medium) var(--fs-16) var(--font-read); color: var(--gold); }
.k-gv-sum-seal { font: var(--weight-bold) var(--fs-16) var(--font-kanji); color: var(--crimson); }
.k-gv-sum-note { margin: 0; font-size: var(--fs-12-5); }
.k-gv-editor { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-16); min-inline-size: 0; }
.k-gv-edit-tabs { inline-size: 100%; }
.k-gv-edit-body { display: flex; flex-direction: column; gap: var(--sp-10); }
.k-gv-edit-h { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-14-5); margin-block-start: var(--sp-6); }
.k-gv-edit-h .k-muted { font-size: var(--fs-12-5); }
.k-gv-edit-hint { margin: 0; font-size: var(--fs-12); }
/* the tray is a container: six slots share its width, never wider than 60 */
.k-gv-edit-tray { container-type: inline-size; padding: var(--sp-10); border-radius: var(--r-12); background: var(--s2); }
.k-gv-edit-tray .k-ach-tray { justify-content: space-between; gap: var(--sp-6); }
.k-gv-edit-tray .k-ach-slot { --slot: min(var(--ach-row-col), calc((100cqi - var(--sp-6) * 5) / 6)); }
.k-gv-editor .k-ach-pickgrid { --ach-pick-cols: 6; gap: var(--sp-8); }
.k-gv-editor .k-ach-pick { padding: var(--sp-8) 0; gap: 0; }
.k-gv-bg-own { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-gv-bg-up { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); block-size: var(--sp-104, var(--ach-medal-ph)); border: var(--ring-1-5) dashed var(--line); border-radius: var(--r-14); background: none; color: var(--text-2); font: inherit; font-size: var(--fs-13); cursor: pointer; }
.k-gv-bg-up small { font-size: var(--fs-11); color: var(--muted); }
.k-gv-bg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8); max-block-size: var(--menu-max-h); overflow-y: auto; padding: var(--sp-2); }
.k-gv-bg-thumb { position: relative; aspect-ratio: 21 / 9; padding: 0; border: 0; border-radius: var(--r-10); overflow: hidden; background: color-mix(in oklch, var(--set-hue, var(--crimson)) 26%, var(--s1)); color: var(--text); font: inherit; cursor: pointer; }
.k-gv-bg-own .k-gv-bg-thumb { aspect-ratio: auto; block-size: 100%; }
.k-gv-bg-thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.k-gv-bg-thumb span { position: absolute; inset-inline-start: var(--sp-6); inset-block-end: var(--sp-4); font-size: var(--fs-micro); font-weight: var(--weight-semibold); text-shadow: 0 var(--hairline) var(--sp-3) var(--ach-dark); }
.k-gv-bg-thumb[aria-pressed="true"] { box-shadow: 0 0 0 calc(var(--hairline) * 2) var(--gold); }
.k-gv-bg-thumb[aria-pressed="true"]::after { content: "✓"; position: absolute; inset-inline-end: var(--sp-6); inset-block-start: var(--sp-4); inline-size: var(--sp-18); block-size: var(--sp-18); display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--bg); font-size: var(--fs-11); font-weight: var(--weight-bold); }
.k-gv-titles { display: flex; flex-direction: column; gap: var(--sp-2); }
.k-gv-topt { display: flex; align-items: center; gap: var(--sp-12); min-block-size: var(--hit-coarse); padding: 0 var(--sp-12); border: 0; border-radius: var(--r-12); background: none; color: var(--text); font: inherit; text-align: start; cursor: pointer; }
.k-gv-topt i { flex: 1; font: italic var(--weight-medium) var(--fs-16) var(--font-read); color: var(--gold); }
.k-gv-topt span { font-size: var(--fs-12); }
.k-gv-topt:disabled { cursor: default; }
.k-gv-topt:disabled i { color: var(--muted); font-weight: var(--weight-regular, 400); }
.k-gv-topt[aria-checked="true"] { background: color-mix(in oklch, var(--gold) 12%, var(--s1)); }
.k-gv-topt-r { inline-size: var(--sp-20); block-size: var(--sp-20); flex: none; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--muted); }
.k-gv-topt[aria-checked="true"] .k-gv-topt-r { box-shadow: inset 0 0 0 var(--sp-6) var(--gold); }
.k-gv-sigils { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-10); }
.k-gv-sigil { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding: var(--sp-14) var(--sp-6); border: 0; border-radius: var(--r-14); background: var(--s1); color: var(--text-2); font: inherit; font-size: var(--fs-12-5); cursor: pointer; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-gv-sigil b { display: grid; place-items: center; inline-size: var(--gv-seal-badge); block-size: var(--gv-seal-badge); border-radius: 50%; background: var(--crimson); color: var(--crimson-ink); font: var(--weight-bold) var(--fs-18, var(--fs-17)) var(--font-kanji); }
.k-gv-sigil[aria-checked="true"] { color: var(--text); box-shadow: inset 0 0 0 calc(var(--hairline) * 2) var(--gold); background: color-mix(in oklch, var(--gold) 10%, var(--s1)); }

/* the recovery dispatch (12a2) */
.k-gv-recovery { display: grid; grid-template-columns: minmax(0, 1fr) var(--gv-rec-w); gap: var(--sp-20); }
.k-gv-rec-card { padding: var(--sp-20) var(--sp-22); border-radius: var(--r-24); background: var(--gv-rec-bg); }
.k-gv-recovery[data-hp="strained"] .k-gv-rec-card { background: var(--gv-rec-bg-strained); }
.k-gv-rec-eyebrow { color: var(--crimson); }
.k-gv-recovery[data-hp="strained"] .k-gv-rec-eyebrow { color: var(--amber); }
.k-gv-rec-title { margin: var(--sp-6) 0 var(--sp-4); font-size: var(--fs-22); font-weight: var(--weight-semibold); letter-spacing: var(--track-figure); }
.k-gv-rec-copy { margin: 0; font-size: var(--fs-13); color: var(--text-2); }
.k-gv-rec-segs { display: flex; gap: var(--bar-3); margin: var(--sp-16) 0 var(--sp-6); }
.k-gv-rec-segs > span { flex: 1 1 0; block-size: var(--bar-6); border-radius: var(--bar-3); background: var(--s2); }
.k-gv-rec-segs > span[data-state~="done"] { background: var(--crimson); }
.k-gv-rec-meta { font-size: var(--fs-11-5); color: var(--muted); }
.k-gv-rec-list { padding: var(--sp-10) var(--sp-20); border-radius: var(--r-24); background: var(--s1); }
.k-gv-rec-item { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-10); border-block-start: var(--hairline) solid var(--line); }
.k-gv-rec-item:first-child { border-block-start: 0; }
.k-gv-rec-mark { inline-size: var(--check); block-size: var(--check); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 var(--ring-1-5) var(--crimson); font-size: var(--fs-11); font-weight: var(--weight-bold); }
.k-gv-rec-item[data-state~="done"] .k-gv-rec-mark { background: var(--crimson); color: var(--crimson-ink); box-shadow: none; }
.k-gv-rec-label { flex: 1 1 0; min-inline-size: 0; font-size: var(--fs-13-5); }
.k-gv-rec-item[data-state~="done"] .k-gv-rec-label { color: var(--muted); text-decoration: line-through; }
.k-gv-rec-go { color: var(--crimson); }
.k-gv-rec-done { font-size: var(--fs-12); color: var(--muted); }

/* cadence and the ledger */
/* the two cards share one height (frame 12a); the heatmap spans the card
   and its footer sits on the card's floor */
.k-gv-cadence { display: flex; flex-direction: column; }
.k-gv-heat { flex: 1 1 auto; display: flex; flex-direction: column; }
.k-gv-heat-foot { margin-block-start: auto; padding-block-start: var(--sp-12); }
.k-gv-cad-seg { margin-inline-start: auto; align-self: center; }
.k-gv-cad-seg .k-seg { font-size: var(--fs-12-5); }
.k-gv-heat-chart { margin-block-start: var(--sp-4); }
.k-gv-heat-chart svg { display: block; inline-size: 100%; block-size: auto; }
.k-gv-heat-foot { --heat-c: var(--crimson); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6) var(--sp-18); font-size: var(--fs-12); color: var(--muted); }
.k-gv-heat-foot[data-mode="rest"] { --heat-c: var(--teal); }
.k-gv-heat-foot b { color: var(--text); font-weight: var(--weight-semibold); }
.k-gv-heat-scale { margin-inline-start: auto; display: flex; align-items: center; gap: var(--sp-4); }
.k-gv-heat-scale i { inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: var(--r-2); background: var(--heat-c); }
.k-gv-heat-scale i[data-level="1"] { opacity: 0.3; }
.k-gv-heat-scale i[data-level="2"] { opacity: 0.55; }
.k-gv-heat-scale i[data-level="3"] { opacity: 0.8; }
.k-gv-led-row { display: flex; align-items: center; gap: var(--sp-12); padding-block: var(--sp-9); border-block-start: var(--hairline) solid var(--line); }
.k-gv-led-txt { flex: 1 1 0; min-inline-size: 0; }
.k-gv-led-title { font-size: var(--fs-13-5); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-led-sub { font-size: var(--fs-11-5); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the three rules */
.k-gv-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: var(--sp-16) var(--sp-22); }
.k-gv-rule { padding-inline: var(--sp-20); min-inline-size: 0; }
.k-gv-rule:first-child { padding-inline-start: 0; }
.k-gv-rule + .k-gv-rule { border-inline-start: var(--hairline) solid color-mix(in oklch, var(--text) 14%, transparent); }
.k-gv-rule-h { display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-13-5); font-weight: var(--weight-semibold); color: var(--tone-c); }
.k-gv-rule-h .k-gv-dot { background: currentColor; }
.k-gv-rule p { margin: var(--sp-6) 0 0; font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }

/* ---------- Gold Shop (12b) ---------- */
.k-gv-shop { display: flex; flex-direction: column; gap: var(--sp-20); }
.k-gv-balance { display: flex; align-items: center; gap: var(--sp-24); padding: var(--sp-20) var(--sp-26); border-radius: var(--r-24); background: var(--gv-bal-bg); }
.k-gv-bal-amt { margin-block-start: var(--sp-4); font: var(--weight-semibold) var(--fs-34) var(--font-mono); color: var(--amber); white-space: nowrap; }
.k-gv-bal-rule { inline-size: var(--hairline); align-self: stretch; background: var(--line); }
.k-gv-bal-copy { flex: 1 1 0; min-inline-size: 0; margin: 0; font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
.k-gv-bal-facts { display: flex; flex-direction: column; gap: var(--sp-6); text-align: end; }
.k-gv-bal-fact span { display: block; font-size: var(--fs-12); color: var(--muted); }
.k-gv-bal-fact b { font-size: var(--fs-13-5); font-weight: var(--weight-semibold); }
.k-gv-bal-fact:first-child b { font-size: var(--fs-17); }
.k-gv-shop-body { display: grid; grid-template-columns: var(--gv-rail-w) minmax(0, 1fr); gap: var(--sp-22); align-items: start; }
.k-gv-rail { position: sticky; inset-block-start: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-2); }
.k-gv-rail-item { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-12); border-radius: var(--r-12); font-size: var(--fs-13-5); color: var(--text-2); text-align: start; }
.k-gv-rail-item:hover { background: var(--s1); color: var(--text); }
.k-gv-rail-item[aria-selected="true"] { background: var(--s2); color: var(--text); }
.k-gv-rail-l { flex: 1 1 0; min-inline-size: 0; }
.k-gv-rail-n { font: var(--fs-11) var(--font-mono); color: var(--muted); }
.k-gv-rail-label { padding: var(--sp-14) var(--sp-12) var(--sp-6); font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-gv-rail-scroll { display: contents; }
.k-gv-rail-scroll > .k-scroller-arrow { display: none; }
.k-gv-wares { display: flex; flex-direction: column; gap: var(--sp-24); min-inline-size: 0; }
.k-gv-ware-head { display: flex; align-items: baseline; gap: var(--sp-10); margin-block-end: var(--sp-12); }
.k-gv-ware-head h3 { margin: 0; font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-gv-ware-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-16); }
.k-gv-ware { display: flex; flex-direction: column; gap: var(--sp-12); padding: var(--sp-12); border-radius: var(--r-24); background: var(--s1); min-inline-size: 0; }
.k-gv-ware[data-state~="is-active"] { box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--green) 45%, transparent); }
.k-gv-ware-h { display: flex; align-items: flex-start; gap: var(--sp-8); padding-inline: var(--sp-4); }
.k-gv-ware-t { flex: 1 1 0; min-inline-size: 0; }
.k-gv-ware-kind { font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.k-gv-ware-name { margin-block-start: var(--sp-2); font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-gv-price { font: var(--weight-semibold) var(--fs-12-5) var(--font-mono); color: var(--amber); white-space: nowrap; }
.k-gv-price[data-state~="short"] { color: var(--muted); }
.k-gv-ware-desc { flex: 1 1 auto; padding-inline: var(--sp-4); font-size: var(--fs-12-5); line-height: 1.45; color: var(--muted); }
.k-gv-ware-note { margin-block-start: var(--sp-6); font-size: var(--fs-11-5); color: var(--teal); }
.k-gv-ware-foot > .k-btn { inline-size: 100%; justify-content: center; border-radius: var(--r-14); }
.k-gv-ware-foot[data-state~="split"] { display: flex; gap: var(--sp-8); }
.k-gv-ware-foot[data-state~="split"] > .k-btn { inline-size: auto; flex: 1 1 0; }
.k-gv-ware-foot[data-state~="split"] > .k-gv-try { flex: 0 0 auto; }
.k-gv-try[aria-pressed="true"] { background: var(--wash-teal); color: var(--teal); }
.k-gv-ware[data-kind="theme"][data-state~="is-active"] { box-shadow: inset 0 0 0 var(--focus-width) var(--teal); }
/* the Avatar page's Theme section (21h) */
.k-gv-themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--gv-theme-min), 100%), 1fr)); gap: var(--sp-10); }
.k-gv-theme { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-6); border-radius: var(--r-16); background: var(--s2); text-align: start; }
.k-gv-theme:hover { background: color-mix(in oklch, var(--s2) 70%, var(--text) 8%); }
.k-gv-theme[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--focus-width) var(--teal); }
.k-gv-theme .k-gv-pv-theme { position: relative; block-size: var(--gv-theme-pv-h); border-radius: var(--r-12); }
.k-gv-theme-n { display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--sp-4) var(--sp-2); font-size: var(--fs-13); font-weight: var(--weight-semibold); }
.k-gv-theme-on { margin-inline-start: auto; color: var(--teal); }
.k-gv-theme-follow { display: flex; align-items: center; gap: var(--sp-10); margin-block-start: var(--sp-14); padding-block-start: var(--sp-14); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13); color: var(--text-2); cursor: pointer; }
.k-gv-theme-follow-t { flex: 1 1 0; min-inline-size: 0; }
.k-gv-theme-sync { font-size: var(--fs-12); color: var(--muted); }
.k-gv-buy { background: var(--gv-buy); color: var(--gv-buy-ink); box-shadow: none; font-weight: var(--weight-semibold); }
.k-gv-buy:hover { filter: brightness(1.06); background: var(--gv-buy); }
.k-gv-buy:disabled { background: var(--s2); color: var(--muted); opacity: 1; filter: none; }
.k-gv-apply[aria-pressed="true"] { background: color-mix(in oklch, var(--green) 18%, transparent); color: var(--green); box-shadow: none; }
.k-gv-unlocked { display: block; padding: var(--sp-10); border-radius: var(--r-14); background: color-mix(in oklch, var(--green) 14%, transparent); color: var(--green); font-size: var(--fs-12-5); text-align: center; }
.k-gv-earn { margin: 0; font-size: var(--fs-12-5); color: var(--muted); }

/* the previews: what is being sold */
.k-gv-pv { position: relative; block-size: var(--gv-pv-h); display: grid; place-items: center; border-radius: var(--r-16); overflow: hidden; background: var(--s3); }
.k-gv-pv-band { position: absolute; inset: 0; background-image: var(--pv-banner, none); background-size: cover; background-position: center; }
.k-gv-pv-theme { position: absolute; inset: 0; display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-10); background: var(--bg); }
.k-gv-pv-hero { flex: 1 1 0; border-radius: var(--r-10); background: linear-gradient(120deg, var(--hero-tint), color-mix(in oklch, var(--hero-tint) 55%, var(--crimson))); }
.k-gv-pv-row { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-10); border-radius: var(--r-10); background: var(--s1); }
.k-gv-pv-dots { flex: 1 1 0; display: flex; gap: var(--sp-4); }
.k-gv-pv-dots i { inline-size: var(--sp-8); block-size: var(--sp-8); border-radius: 50%; background: var(--cs); }
.k-gv-pv-dots i[data-subj="maths"] { background: var(--maths); }
.k-gv-pv-dots i[data-subj="it"] { background: var(--it); }
.k-gv-pv-go { padding: var(--sp-2) var(--sp-10); border-radius: var(--r-pill); background: var(--crimson); color: var(--crimson-ink); font-size: var(--fs-11); font-weight: var(--weight-semibold); }
/* the four-colour swatch: ground, tint, accent, second */
.k-gv-pv-strip { position: absolute; inset-block-start: var(--sp-10); inset-inline-end: var(--sp-10); display: flex; overflow: hidden; border-radius: var(--r-pill); box-shadow: 0 0 0 var(--hairline) var(--line); }
.k-gv-pv-strip i { inline-size: var(--sp-10); block-size: var(--sp-10); background: var(--bg); }
.k-gv-pv-strip i[data-n="tint"] { background: var(--hero-tint); }
.k-gv-pv-strip i[data-n="accent"] { background: var(--crimson); }
.k-gv-pv-strip i[data-n="second"] { background: var(--teal); }
.k-gv-pv-sw { position: absolute; inset-block-end: var(--sp-8); inset-inline-end: var(--sp-8); display: flex; gap: var(--sp-4); }
.k-gv-pv-sw i { inline-size: var(--sp-10); block-size: var(--sp-10); border-radius: 50%; box-shadow: 0 0 0 var(--hairline) var(--s3); }
.k-gv-pv-sw i[data-n="1"] { background: var(--sw1); }
.k-gv-pv-sw i[data-n="2"] { background: var(--sw2); }
.k-gv-pv-sw i[data-n="3"] { background: var(--sw3); }
.k-gv-pv-brand { display: flex; align-items: center; gap: var(--sp-10); padding: var(--sp-10) var(--sp-12); border-radius: var(--r-14); background: var(--bg); }
.k-gv-pv-brand b { font-size: var(--fs-14); font-weight: var(--weight-semibold); }
.k-gv-pv-glyph { inline-size: var(--tile); block-size: var(--tile); flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--crimson); color: var(--crimson-ink); font: var(--weight-semibold) var(--fs-15) var(--font-kanji); }
/* the real shelf, scaled into the card (frame 22e) */
.k-gv-pv-shelf { position: absolute; inset-block-end: 0; inset-inline-start: 50%; display: block; inline-size: calc(100% / var(--pv-shelf-scale)); transform: translateX(-50%) scale(var(--pv-shelf-scale)); transform-origin: 50% 100%; }
.k-gv-pv-shelf .k-bk-shelf { justify-content: center; overflow: hidden; }
.k-gv-pv-shelf .k-bk-spine { cursor: default; }
/* a small podium in the style (frame 22e): 02 · 01 · 03 */
.k-gv-pv-shrine { display: flex; align-items: flex-end; gap: var(--sp-8); }
.k-gv-pv-shrine i { position: relative; display: grid; place-items: start center; inline-size: var(--gv-pv-pod-w); block-size: var(--gv-pv-pod-h); padding-block-start: var(--sp-4); border-radius: var(--r-6); background: linear-gradient(160deg, var(--s2), var(--s1)); box-shadow: inset 0 0 0 var(--hairline) color-mix(in oklch, var(--shr-gold) 30%, transparent); font-style: normal; }
.k-gv-pv-shrine i[data-rank="1"] { block-size: calc(var(--gv-pv-pod-h) * 1.25); }
.k-gv-pv-shrine b { font-family: var(--font-kanji); font-size: var(--fs-12); color: var(--shr-gold); }
.k-gv-pv-shrine[data-skin="shrine-gilded"] i { outline: var(--sp-4) double var(--shr-gold); outline-offset: var(--sp-2); }
.k-gv-pv-shrine[data-skin="shrine-ink"] i { background: var(--shr-bone); box-shadow: var(--sp-4) var(--sp-4) 0 var(--shr-ink-shadow); }
.k-gv-pv-shrine[data-skin="shrine-ink"] b { color: var(--card-inkbrush-accent); background-image: linear-gradient(transparent 68%, var(--shr-ink-stroke) 68% 90%, transparent 90%); }
.k-gv-pv-shrine[data-skin="shrine-neon"] { padding: var(--sp-6); background-image: linear-gradient(var(--shr-neon-grid) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--shr-neon-grid) var(--hairline), transparent var(--hairline)); background-size: var(--sp-10) var(--sp-10); }
.k-gv-pv-shrine[data-skin="shrine-neon"] i { box-shadow: 0 0 var(--sp-10) var(--shr-neon-glow), inset 0 0 0 var(--hairline) var(--shr-neon); }
.k-gv-pv-shrine[data-skin="shrine-neon"] i[data-rank="1"] { box-shadow: 0 0 var(--sp-10) var(--shr-neon-glow2), inset 0 0 0 var(--hairline) var(--shr-neon2); }
.k-gv-pv-shrine[data-skin="shrine-neon"] b { color: var(--shr-neon); text-shadow: 0 0 var(--sp-6) var(--shr-neon-glow); }
.k-gv-pv-lab { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); }
.k-gv-pv-bars { display: flex; align-items: flex-end; gap: var(--sp-6); }
.k-gv-pv-bars i { display: block; inline-size: var(--box); border-radius: var(--r-6); background: color-mix(in oklch, var(--teal) 40%, transparent); }
.k-gv-pv-bars i:nth-child(1) { block-size: calc(var(--sp-10) * 2.4); }
.k-gv-pv-bars i:nth-child(2) { block-size: calc(var(--sp-10) * 4); }
.k-gv-pv-bars i:nth-child(3) { block-size: calc(var(--sp-10) * 1.6); }
.k-gv-pv-bars i:nth-child(4) { block-size: calc(var(--sp-10) * 4.8); background: var(--crimson); }
.k-gv-pv-bars i:nth-child(5) { block-size: calc(var(--sp-10) * 3.2); }
.k-gv-pv-mark { font: var(--weight-semibold) var(--fs-12) var(--font-mono); color: var(--text); }
.k-gv-pv-label { font-size: var(--fs-11); color: var(--muted); }
/* the labs' own miniatures (review B) */
.k-gv-sc { display: block; max-inline-size: 100%; block-size: auto; overflow: visible; }
.k-gv-sc-t { font: var(--weight-semibold) var(--fs-11) var(--font-mono); fill: var(--text-2); text-anchor: middle; }
.k-gv-sc-box { fill: var(--s2); stroke: color-mix(in oklch, var(--teal) 50%, transparent); stroke-width: 1.2; }
.k-gv-sc-box[data-hot], .k-gv-sc-node[data-hot] { stroke: var(--crimson); fill: color-mix(in oklch, var(--crimson) 18%, var(--s2)); }
.k-gv-sc-node { fill: var(--s2); stroke: color-mix(in oklch, var(--teal) 60%, transparent); stroke-width: 1.4; }
.k-gv-sc-line { fill: none; stroke: var(--muted); stroke-width: 1.3; }
.k-gv-sc-line[data-dash] { stroke-dasharray: 3 3; }
.k-gv-sc-axis { fill: none; stroke: var(--line); stroke-width: 1.2; }
.k-gv-sc-curve { fill: none; stroke: var(--crimson); stroke-width: 2.2; stroke-linecap: round; }
.k-gv-sc-curve[data-base] { stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 4 3; }
.k-gv-sc-ring { fill: none; stroke: color-mix(in oklch, var(--teal) 60%, transparent); stroke-width: 1.5; }
.k-gv-sc-dot { fill: var(--crimson); }
.k-gv-sc-area { fill: color-mix(in oklch, var(--teal) 30%, transparent); }
.k-gv-sc-stack { display: flex; flex-direction: column; gap: var(--sp-4); inline-size: var(--gv-sc-stack-w); }
.k-gv-sc-frame { padding: var(--sp-2) var(--sp-8); border-radius: var(--r-6); background: var(--s2); font: var(--fs-11) var(--font-mono); color: var(--text-2); }
.k-gv-sc-frame[data-state~="top"] { background: color-mix(in oklch, var(--crimson) 35%, var(--s2)); color: var(--text); }
.k-gv-sc-tt { display: grid; gap: var(--sp-2); font: var(--fs-11) var(--font-mono); }
.k-gv-sc-tr { display: grid; grid-template-columns: repeat(3, var(--sp-24)); gap: var(--sp-2); }
.k-gv-sc-tr > i { font-style: normal; text-align: center; padding: var(--hairline) 0; border-radius: var(--r-6); background: var(--s2); color: var(--text-2); }
.k-gv-sc-tr[data-state~="head"] > i { background: none; color: var(--muted); font-weight: var(--weight-bold); }
.k-gv-sc-tr > i[data-state~="on"] { background: color-mix(in oklch, var(--green) 35%, var(--s2)); color: var(--text); }
.k-gv-sc-tr > i[data-state~="off"] { background: color-mix(in oklch, var(--crimson) 22%, var(--s2)); }

/* ---------- Avatar & profile (12c) ---------- */
.k-gv-id-name { margin-block-start: var(--sp-10); font-size: var(--fs-22); font-weight: var(--weight-semibold); }
.k-gv-id-name span { font-size: var(--fs-13); font-weight: var(--weight-regular); color: var(--muted); }
.k-gv-id-status { margin-block-start: var(--sp-4); font-size: var(--fs-13); color: var(--text-2); }
.k-gv-id-facts { margin-block-start: var(--sp-18); }
.k-gv-id-facts .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
/* the Frames card takes the column's remaining height, so both columns
   end on one line (review B) */
.k-gv-media { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.k-gv-media-item { min-inline-size: 0; }
.k-gv-media-k { margin-block-end: var(--sp-6); font-size: var(--fs-12); color: var(--muted); }
.k-gv-media-v { padding: var(--sp-10) var(--sp-14); border-radius: var(--r-14); background: var(--s3); font-size: var(--fs-13-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-media-acts { display: flex; gap: var(--sp-12); margin-block-start: var(--sp-6); }
.k-gv-media-acts .k-link { color: var(--crimson); }
.k-gv-media-acts .k-gv-media-clear { color: var(--muted); }
.k-gv-seals { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-10); }
.k-gv-seal, .k-gv-frame { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); padding: var(--sp-12) 0; border-radius: var(--r-16); }
.k-gv-seal:hover, .k-gv-frame:hover { background: var(--s2); }
.k-gv-seal[aria-pressed="true"], .k-gv-frame[aria-pressed="true"] { background: var(--s2); box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-gv-seal[data-state~="locked"] { opacity: 0.45; }
.k-gv-seal-art { inline-size: var(--gv-seal); block-size: var(--gv-seal); border-radius: 50%; overflow: hidden; }
.k-gv-seal-art svg { display: block; inline-size: 100%; block-size: 100%; }
.k-gv-seal-n { font-size: var(--fs-11); color: var(--muted); }
.k-gv-frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-10); }
.k-gv-frame { gap: var(--sp-10); }
.k-gv-frame .k-avatar-host:not([data-frame]) > .k-avatar { box-shadow: 0 0 0 var(--bar-3) var(--s1), 0 0 0 calc(var(--bar-3) + var(--ring-1-5)) var(--line); }
.k-gv-cos { display: flex; flex-direction: column; gap: var(--sp-6); margin-block-start: var(--sp-10); }
.k-gv-cos-k { font-size: var(--fs-12); color: var(--muted); }
.k-gv-cos-row { flex-wrap: wrap; align-self: flex-start; }
.k-gv-frame-n { font-size: var(--fs-11-5); color: var(--text-2); text-align: center; }
.k-gv-frame[data-state~="locked"] .k-gv-frame-n { color: var(--muted); }

/* ---------- Session Log (12d) ---------- */
.k-gv-log-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); align-items: start; }
.k-gv-log-page[data-state~="has-entry"] { grid-template-columns: minmax(0, 1fr) var(--gv-entry-w); }
.k-gv-log-col { display: flex; flex-direction: column; gap: var(--sp-18); min-inline-size: 0; }
.k-gv-log-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.k-gv-log-week { margin-inline-start: auto; display: flex; flex-wrap: wrap; gap: var(--sp-6); font-size: var(--fs-12-5); color: var(--muted); }
.k-gv-log-week > span + span::before { content: "·"; margin-inline-end: var(--sp-6); }
.k-gv-log-note { margin: 0; font-size: var(--fs-12); color: var(--muted); }
.k-gv-log-note:empty { display: none; }
.k-gv-log { display: flex; flex-direction: column; gap: var(--sp-18); }
.k-gv-day-head { display: flex; align-items: baseline; gap: var(--sp-8); margin: 0; padding: 0 var(--sp-4) var(--sp-8); font-size: var(--fs-11); font-weight: var(--weight-semibold); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--muted); }
.k-gv-day-head small { font-size: var(--fs-11); font-weight: var(--weight-regular); letter-spacing: normal; text-transform: none; }
.k-gv-day-rows { padding: var(--sp-4) var(--sp-18); border-radius: var(--r-24); background: var(--s1); }
.k-gv-row { inline-size: 100%; display: grid; grid-template-columns: var(--gv-row-time) var(--gv-row-chip) minmax(0, 1fr) auto; gap: var(--sp-14); align-items: center; padding: var(--sp-10) var(--sp-8); border-block-start: var(--hairline) solid var(--line); text-align: start; }
.k-gv-row:first-child { border-block-start: 0; }
button.k-gv-row:hover { background: color-mix(in oklch, var(--s2) 60%, transparent); }
button.k-gv-row[aria-expanded="true"] { background: var(--s2); border-radius: var(--r-12); }
.k-gv-row .k-chip { justify-self: start; }
.k-gv-row-time { font: var(--fs-12) var(--font-mono); color: var(--muted); }
.k-gv-row-txt { display: flex; flex-direction: column; min-inline-size: 0; }
.k-gv-row-title { font-size: var(--fs-14); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-row-sub { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-log-pager { display: flex; justify-content: center; }
.k-gv-log-pager:empty { display: none; }
.k-gv-entry { position: sticky; inset-block-start: var(--sp-12); display: flex; flex-direction: column; gap: var(--sp-18); padding: var(--sp-20) var(--sp-22); border-inline-start: var(--hairline) solid var(--line); }
.k-gv-entry > * { flex-shrink: 0; }
.k-gv-entry-head { display: flex; align-items: center; }
.k-gv-entry-head .k-iconbtn { margin-inline-start: auto; }
.k-gv-entry-title { margin: var(--sp-10) 0 0; font-size: var(--fs-20); font-weight: var(--weight-semibold); line-height: var(--lh-snug); }
.k-gv-entry-when { margin-block-start: var(--sp-4); font-size: var(--fs-12-5); color: var(--muted); }
.k-gv-entry-figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hairline); border-radius: var(--r-16); overflow: hidden; background: var(--line); }
.k-gv-entry-figs > div { padding: var(--sp-10) var(--sp-14); background: var(--s1); }
.k-gv-entry-figs > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.k-gv-entry-k { font-size: var(--fs-11-5); color: var(--muted); }
.k-gv-entry-v { margin-block-start: var(--sp-2); font-size: var(--fs-17); font-weight: var(--weight-semibold); }
.k-gv-entry-rows .k-card-row:first-of-type { border-block-start: var(--hairline) solid var(--line); }
.k-gv-entry-rows .k-card-row-v[data-tone] { color: var(--tone-c); }
.k-gv-entry-p { margin: var(--sp-6) 0 0; font-size: var(--fs-13); line-height: 1.55; color: var(--text-2); }
.k-gv-entry-foot { margin: auto 0 0; font-size: var(--fs-12); line-height: var(--lh-body); color: var(--muted); }

/* ---------- the five tiers, widest first ---------- */
@media (max-width: 1240px) {
/* the Stage keeps two columns; the right panel narrows and its live
   figures go under the ledger */
.k-gv-stage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "id right" "arc right" "wall right" "rules rules"; min-block-size: 0; padding: var(--sp-28); }
.k-gv-stage-id { flex-direction: column; align-items: center; gap: var(--sp-14); }
.k-gv-stage-txt { align-items: center; text-align: center; }
.k-gv-stage-txt > * { align-self: center; }
.k-gv-stage .k-gv-rules { margin-inline-start: 0; }
.k-gv-rightg-low { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.k-gv-rightg-low > .k-gv-ledger, .k-gv-rightg-low > .k-gv-stack { grid-row: auto; display: flex; flex-direction: column; }
.k-gv-vrule { display: none; }
.k-gv-stack { padding-block-start: var(--sp-10); border-block-start: var(--hairline) solid color-mix(in oklch, var(--text) 12%, transparent); }
.k-gv-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-gv-edit { grid-template-columns: minmax(0, 1fr); }
.k-gv-recovery { grid-template-columns: minmax(0, 1fr); }
.k-gv-ware-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
.k-gv-shop-body { grid-template-columns: minmax(0, 1fr); }
.k-gv-rail { position: static; flex-direction: row; flex-wrap: wrap; gap: var(--sp-4); }
.k-gv-rail-label { display: none; }
.k-gv-rail-item { background: var(--s1); border-radius: var(--r-pill); }
.k-gv-balance { flex-wrap: wrap; }
.k-gv-bal-rule { display: none; }
.k-gv-seals { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.k-gv-frames { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
.k-gv-stage-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "id" "arc" "wall" "right" "rules"; }
.k-gv-arc { max-inline-size: var(--gv-stage-left); }
/* the open entry opens inline, under its own day (governor-ui.js moves it) */
.k-gv-log-page[data-state~="has-entry"] { grid-template-columns: minmax(0, 1fr); }
.k-gv-entry { position: static; border-inline-start: 0; border-radius: var(--r-24); background: var(--s1); }
.k-gv-rightg-low { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
.k-gv-rightg-low > .k-gv-ledger, .k-gv-rightg-low > .k-gv-stack { grid-row: auto; display: flex; flex-direction: column; }
.k-gv-vrule { display: none; }
.k-gv-recs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-12) 0; }
.k-gv-rec:nth-child(3) { padding-inline-start: 0; border-inline-start: 0; }
.k-gv-rule { padding-inline: 0; }
.k-gv-rule + .k-gv-rule { border-inline-start: 0; padding-block-start: var(--sp-12); border-block-start: var(--hairline) solid color-mix(in oklch, var(--text) 14%, transparent); }
.k-gv-sum-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-gv-ware-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-gv-media { grid-template-columns: minmax(0, 1fr); }
.k-gv-rules { grid-template-columns: minmax(0, 1fr); gap: var(--sp-14); }
.k-gv-seals { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.k-gv-frames { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-gv-bal-facts { text-align: start; }
}

@media (max-width: 700px) {
.k-gv-row { grid-template-columns: var(--gv-row-time) minmax(0, 1fr) auto; }
/* frame 15k: the instruments are a 2 × 2 grid, each figure under its
   label; the departments one chip scroller; the balance stacked */
/* the phone's Stage: a smaller ring and level, the six on one row */
.k-gv-stage-grid { padding: var(--sp-18) var(--sp-16); gap: var(--sp-14); }
.k-gv-stage-id { flex-direction: column; align-items: center; gap: var(--sp-14); }
.k-gv-stage-txt { align-items: center; text-align: center; }
.k-gv-stage-txt > * { align-self: center; }
.k-gv-stage-id .k-gv-ring { zoom: var(--gv-ring-zoom-ph); }
.k-gv-tools { display: none; }
.k-gv-name { font-size: var(--fs-40, var(--fs-34)); }
.k-gv-title { font-size: var(--fs-20); }
.k-gv-arc { block-size: auto; display: flex; justify-content: space-between; gap: var(--sp-4); }
.k-gv-arc-lines { display: none; }
.k-gv-arc-slot { position: static; inline-size: var(--ach-medal-sm); block-size: var(--ach-medal-sm); }
.k-gv-arc-slot .k-ach-medal { --m: var(--ach-medal-sm); }
.k-gv-arc-note { position: static; flex-basis: 100%; translate: none; max-inline-size: none; text-align: start; }
.k-gv-arc:has(.k-gv-arc-note:not(:empty)) { flex-wrap: wrap; }
.k-gv-wallg-head { flex-wrap: wrap; white-space: normal; }
.k-gv-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
.k-gv-area { block-size: var(--gv-area-h-ph, calc(var(--gv-area-h) * 0.72)); }
.k-gv-area-n { font-size: var(--fs-26); }
.k-gv-bg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-gv-sigils { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.k-gv-rail-scroll { display: flex; }
.k-gv-rail-scroll > .k-scroller-arrow { display: grid; }
.k-gv-rail { flex-wrap: nowrap; }
.k-gv-rail-item { flex: 0 0 auto; white-space: nowrap; min-block-size: var(--hit-coarse); }
.k-gv-balance { flex-direction: column; align-items: stretch; gap: var(--sp-10); padding: var(--sp-18) var(--sp-20); }
.k-gv-bal-copy { flex: 0 0 auto; }
.k-gv-bal-facts { flex-direction: row; flex-wrap: wrap; gap: var(--sp-8) var(--sp-20); }
.k-gv-row .k-chip { display: none; }
.k-gv-log-week { margin-inline-start: 0; }
}

@media (max-width: 560px) {
.k-gv-row { grid-template-columns: var(--gv-row-time) minmax(0, 1fr); }
.k-gv-row .k-gv-reward { grid-column: 2; }
.k-gv-day-rows { padding-inline: var(--sp-10); }
}

/* ================= the Gold Shop (design turn 34g–34i) ================= */
.k-gv-shopstage { min-block-size: var(--gv-shop-stage-h); }
.k-gv-shopstage-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--gv-try-w)) var(--gv-shop-fig-w); gap: var(--sp-24); align-items: center; padding: var(--sp-28) var(--sp-32); min-block-size: var(--gv-shop-stage-h); box-sizing: border-box; }
.k-gv-shop-purse { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-gv-shop-bal { font-size: var(--fs-56); font-weight: var(--weight-semibold); letter-spacing: var(--track-figure); line-height: 1; color: var(--gold); }
.k-gv-shop-owned { display: flex; flex-wrap: wrap; gap: var(--sp-6); }
.k-gv-shop-pin { display: flex; flex-direction: column; gap: var(--sp-6); margin-block-start: var(--sp-8); max-inline-size: var(--gv-try-w); }
.k-gv-shop-pin-t { display: flex; align-items: baseline; gap: var(--sp-10); justify-content: space-between; font-size: var(--fs-13-5); }
.k-gv-shop-pin .k-link { align-self: flex-start; font-size: var(--fs-12); }
.k-gv-shop-try { display: flex; flex-direction: column; gap: var(--sp-10); box-shadow: inset 0 0 0 var(--hairline) var(--art-glass-edge); }
.k-gv-shop-try-p { margin: 0; font-size: var(--fs-13); color: var(--text-2); line-height: 1.45; }
.k-gv-shop-tried { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.k-gv-shop-tried li { display: flex; align-items: baseline; gap: var(--sp-8); padding-block: var(--sp-6); border-block-start: var(--hairline) solid var(--line); font-size: var(--fs-13-5); }
.k-gv-shop-tried li:first-child { border-block-start: 0; }
.k-gv-shop-tried li > :nth-child(2) { flex: 1 1 0; font-size: var(--fs-12); }
.k-gv-shop-tried li > .k-mono { color: var(--gold); font-size: var(--fs-12-5); }
.k-gv-shop-try-act { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
.k-gv-shop-fig { align-self: stretch; position: relative; margin-block: calc(var(--sp-28) * -1); overflow: hidden; }
.k-gv-shop-fig > img { position: absolute; inset-block-start: var(--sp-16); inset-inline-start: 50%; block-size: 160%; inline-size: auto; max-inline-size: none; transform: translateX(-50%); }
/* the gold Buy */
.k-gv-buy, .k-gv-buy:hover { background: var(--gold); color: var(--gold-ink); box-shadow: none; font-weight: var(--weight-semibold); }
.k-gv-buy:disabled { opacity: 0.5; }
/* the card (34g) */
.k-gv-ware { position: relative; padding: 0; gap: 0; border-radius: var(--r-20); overflow: hidden; box-shadow: inset 0 0 0 var(--hairline) var(--line); }
.k-gv-ware[data-ware="on"], .k-gv-ware[data-kind="theme"][data-ware="on"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--gold); }
.k-gv-ware[data-ware="try"] { box-shadow: none; outline: var(--ring-1-5) dashed var(--gold); outline-offset: calc(var(--ring-1-5) * -1); }
.k-gv-ware-open { display: block; padding: 0; border: 0; background: none; inline-size: 100%; cursor: pointer; }
.k-gv-ware-open > .k-gv-pv { border-radius: 0; }
.k-gv-ware > .k-gv-ware-h { align-items: baseline; padding: var(--sp-12) var(--sp-14) 0; }
.k-gv-ware-h .k-gv-ware-name { flex: 1 1 0; min-inline-size: 0; margin: 0; font-size: var(--fs-14); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-ware > .k-gv-ware-foot { display: flex; align-items: center; gap: var(--sp-6); padding: var(--sp-8) var(--sp-14) var(--sp-14); }
.k-gv-ware > .k-gv-ware-foot > .k-btn { inline-size: auto; border-radius: var(--r-pill); }
.k-gv-ware-gap { flex: 1 1 0; }
.k-gv-ware .k-chip[data-tone="gold"] { background: color-mix(in oklch, var(--gold) 18%, transparent); color: var(--gold); }
/* the painted previews, each at its kind's aspect */
.k-gv-apv { block-size: auto; aspect-ratio: 4 / 3; background: var(--s2); }
.k-gv-apv[data-kind="outfit"] { aspect-ratio: 3 / 4; background: radial-gradient(70% 60% at 50% 30%, color-mix(in oklch, var(--crimson) 14%, var(--s1)), var(--s1) 78%); }
.k-gv-apv:is([data-kind="scene"]) { aspect-ratio: 16 / 9; }
.k-gv-apv:is([data-kind="hall"], [data-kind="banner"]) { aspect-ratio: 21 / 9; }
.k-gv-apv:is([data-kind="finish"]) { aspect-ratio: 3 / 4; }
.k-gv-apv:is([data-kind="avatar"], [data-kind="frame"], [data-kind="seal"], [data-kind="shrinestyle"]) { aspect-ratio: 1; }
.k-gv-apv[data-kind="shelfskin"] { aspect-ratio: 3 / 1; }
.k-gv-apv-img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.k-gv-apv-fig { position: absolute; inset: 0; overflow: hidden; }
.k-gv-apv-fig > img { position: absolute; inset-block-start: var(--sp-6); inset-inline-start: 50%; block-size: 190%; inline-size: auto; max-inline-size: none; transform: translateX(-50%); }
.k-gv-apv-clock { position: relative; padding: var(--sp-4) var(--sp-12); border-radius: var(--r-pill); background: var(--art-glass); box-shadow: inset 0 0 0 var(--hairline) var(--art-glass-edge); font-size: var(--fs-15); font-weight: var(--weight-semibold); }
.k-gv-apv-rank { position: absolute; inset-inline-start: var(--sp-12); inset-block-end: var(--sp-8); font: var(--weight-medium) var(--fs-22) / 1 var(--font-read); color: var(--shr-gold); }
.k-gv-apv[data-kind="banner"]::after { content: ""; position: absolute; inset: 0; background: var(--art-scrim-l); }
.k-gv-apv-id { position: absolute; inset-inline-start: var(--sp-14); inset-block: 0; z-index: 1; display: flex; align-items: center; gap: var(--sp-10); }
.k-gv-apv-id > span:last-child { display: flex; flex-direction: column; line-height: 1.2; }
.k-gv-apv-id small { font-size: var(--fs-11); letter-spacing: var(--track-kicker); text-transform: uppercase; color: var(--gold); }
.k-gv-apv-id b { font-size: var(--fs-15); }
.k-gv-apv-share { position: absolute; inset: var(--sp-10); display: flex; flex-direction: column; justify-content: space-between; color: var(--text); }
.k-gv-apv-share small { font-size: var(--fs-11); letter-spacing: var(--track-kicker); }
.k-gv-apv-share b { font-size: var(--fs-22); }
.k-gv-apv-disc { inline-size: 76%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 40%, var(--s1), var(--s3)); }
.k-gv-apv-disc > img { inline-size: 82%; block-size: 82%; object-fit: contain; }
.k-gv-apv-frame { position: relative; inline-size: 76%; aspect-ratio: 1; display: grid; place-items: center; }
.k-gv-apv-frame-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; z-index: 1; }
.k-gv-apv-frame-in .k-avatar-host::before, .k-gv-apv-frame-in .k-avatar-host::after, .k-gv-apv-frame-in .k-avatar-frame-art { display: none; }
.k-gv-apv-frame-in .k-avatar { inline-size: calc(var(--avatar) * 0.86); block-size: calc(var(--avatar) * 0.86); }
.k-gv-apv-card { position: relative; block-size: 88%; aspect-ratio: 2 / 3; }
.k-gv-apv-card > i { position: absolute; inset: 9% 11%; border-radius: var(--r-6); background: linear-gradient(160deg, var(--s3), var(--s2)); }
.k-gv-apv-card-art { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain; }
.k-gv-apv-seal { display: flex; align-items: center; gap: var(--sp-14); }
.k-gv-apv-seal-art { inline-size: var(--sp-64); aspect-ratio: 1; object-fit: contain; }
.k-gv-apv-seal b { inline-size: var(--sp-48); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: var(--crimson); color: var(--crimson-ink); font: var(--weight-bold) var(--fs-22) / 1 var(--font-kanji); }
.k-gv-apv-paper { position: absolute; inset: 0; background-color: var(--s1); }
.k-gv-apv-paper[data-paper="kraft"] { background: repeating-linear-gradient(transparent 0 var(--sp-16), var(--paper-ink) var(--sp-16) calc(var(--sp-16) + var(--hairline))), var(--paper-kraft); }
.k-gv-apv-paper[data-paper="slate"] { background-color: var(--s3); background-image: linear-gradient(var(--line) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--line) var(--hairline), transparent var(--hairline)); background-size: var(--sp-16) var(--sp-16); }
.k-gv-apv-paper[data-paper="iso"] { background-image: radial-gradient(var(--paper-ink) var(--hairline), transparent calc(var(--hairline) * 1.6)), radial-gradient(var(--paper-ink) var(--hairline), transparent calc(var(--hairline) * 1.6)); background-size: var(--sp-18) var(--sp-30-5); background-position: 0 0, var(--sp-9) var(--sp-15); }
.k-gv-apv-paper[data-paper="ms"] { background-image: linear-gradient(var(--line) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--line) var(--hairline), transparent var(--hairline)); background-size: var(--sp-22) var(--sp-22); }
.k-gv-apv-paper[data-paper="staff"] { background-image: repeating-linear-gradient(transparent 0 var(--sp-5), var(--paper-ink) var(--sp-5) var(--sp-6), transparent var(--sp-6) var(--sp-11), var(--paper-ink) var(--sp-11) var(--sp-12), transparent var(--sp-12) var(--sp-17), var(--paper-ink) var(--sp-17) var(--sp-18), transparent var(--sp-18) var(--sp-23), var(--paper-ink) var(--sp-23) var(--sp-24), transparent var(--sp-24) var(--sp-29), var(--paper-ink) var(--sp-29) var(--sp-30), transparent var(--sp-30) var(--sp-48)); }
.k-gv-apv-paper[data-paper="mm2"] { background-image: linear-gradient(var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--paper-ink) var(--hairline), transparent var(--hairline)), linear-gradient(var(--line) var(--hairline), transparent var(--hairline)), linear-gradient(90deg, var(--line) var(--hairline), transparent var(--hairline)); background-size: var(--sp-40) var(--sp-40), var(--sp-40) var(--sp-40), var(--sp-8) var(--sp-8), var(--sp-8) var(--sp-8); }
.k-gv-apv-paper > i { position: absolute; inset-inline: 18%; block-size: var(--ring-2); border-radius: var(--r-pill); background: var(--text); inset-block-start: 40%; transform: rotate(-4deg); }
.k-gv-apv-paper > i + i { background: var(--crimson); inset-block-start: 66%; inset-inline: 22% 30%; transform: rotate(2deg); }
.k-gv-apv[data-kind="unlock"] { aspect-ratio: 16 / 9; }
.k-gv-apv-lock { display: flex; flex-direction: column; align-items: center; gap: var(--sp-6); color: var(--text-2); font-size: var(--fs-12); }
.k-gv-apv-lock b { inline-size: var(--sp-48); aspect-ratio: 1; border-radius: var(--r-14); display: grid; place-items: center; background: var(--s3); color: var(--gold); font: var(--weight-semibold) var(--fs-22) / 1 var(--font-kanji); }
.k-gv-apv-pens { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-12); padding: var(--sp-16); background: var(--s1); --p1: var(--text); --p2: var(--crimson); --p3: var(--teal); }
.k-gv-apv-pens[data-set="exam"] { --p2: var(--red); --p3: var(--muted); }
.k-gv-apv-pens[data-set="sketch"] { --p1: var(--text-2); --p2: var(--bloom); --p3: var(--gold); }
.k-gv-apv-pens > i { display: block; block-size: var(--ring-2); border-radius: var(--r-pill); background: var(--p1); transform: rotate(-2deg); }
.k-gv-apv-pens > i:nth-child(2) { block-size: var(--sp-4); background: var(--p2); transform: rotate(1deg); inline-size: 80%; }
.k-gv-apv-pens > i:nth-child(3) { background: var(--p3); inline-size: 64%; }
/* the preview sheet (34h) */
.k-gv-sheet-dlg { inline-size: min(var(--gv-sheet-w), calc(100vw - var(--sp-32))); max-inline-size: none; }
.k-gv-sheet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--sp-28); align-items: start; }
.k-gv-sheet-pv > .k-gv-pv { border-radius: var(--r-20); }
.k-gv-sheet-pv > .k-gv-apv[data-kind="outfit"] { aspect-ratio: 14 / 15; }
.k-gv-sheet-pv > .k-gv-apv[data-kind="outfit"] .k-gv-apv-fig > img { block-size: 150%; }
.k-gv-sheet-txt { display: flex; flex-direction: column; gap: var(--sp-12); min-inline-size: 0; }
.k-gv-sheet-name { margin: 0; font: var(--weight-medium) var(--fs-38) / 1.05 var(--font-read); letter-spacing: var(--track-name); }
.k-gv-sheet-desc { margin: 0; color: var(--text-2); font-size: var(--fs-14); line-height: 1.5; }
.k-gv-sheet-faces { display: flex; gap: var(--sp-8); }
.k-gv-sheet-face { inline-size: var(--sp-48); block-size: var(--sp-48); border-radius: 50%; overflow: hidden; background: var(--s2); position: relative; }
/* the face crop from the 1400 px sprite (her face at x 343, y 150) */
.k-gv-sheet-face > img { position: absolute; block-size: 830%; inline-size: auto; max-inline-size: none; inset-inline-start: 50%; inset-block-start: calc(var(--sp-48) * -0.4); transform: translateX(-56.7%); }
.k-gv-sheet-price { display: flex; align-items: baseline; gap: var(--sp-12); }
.k-gv-sheet-price b { font-size: var(--fs-28); color: var(--gold); }
.k-gv-sheet-goal { display: flex; flex-direction: column; gap: var(--sp-6); padding: var(--sp-12) var(--sp-14); border-radius: var(--r-16); background: var(--s2); }
.k-gv-sheet-goal > .k-mono { color: var(--gold); font-weight: var(--weight-semibold); }
.k-gv-sheet-goal p { margin: 0; font-size: var(--fs-12-5); }
.k-gv-sheet-note { margin: 0 auto 0 0; font-size: var(--fs-12); }

@media (max-width: 1080px) {
.k-gv-shopstage-grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--gv-try-w)); }
.k-gv-shop-fig { display: none; }
}
@media (max-width: 700px) {
.k-gv-shopstage-grid { grid-template-columns: minmax(0, 1fr); padding: var(--sp-18) var(--sp-20); gap: var(--sp-14); }
.k-gv-shop-bal { font-size: var(--fs-36); }
.k-gv-sheet { grid-template-columns: minmax(0, 1fr); }
.k-gv-ware > .k-gv-ware-foot > .k-btn { min-block-size: var(--hit-coarse); }
}

/* ================= Avatar & profile on the Stage (1 November 2026) ================= */
.k-gv-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--gv-studio-ctl-w)); gap: var(--sp-24); align-items: center; padding: var(--sp-28) var(--sp-32); min-block-size: var(--gv-studio-h); box-sizing: border-box; }
.k-gv-id { display: flex; align-items: center; gap: var(--sp-22); min-inline-size: 0; }
.k-gv-id-txt { display: flex; flex-direction: column; gap: var(--sp-4); min-inline-size: 0; }
.k-gv-id .k-gv-ring { background-color: var(--s1); }
.k-gv-id-name { margin: 0; text-shadow: var(--hero-text-shadow); }
.k-gv-controls { min-inline-size: 0; }
.k-gv-controls .k-gv-media { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
.k-gv-controls .k-gv-media-item { display: grid; grid-template-columns: var(--gv-media-k-w) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-12); }
.k-gv-controls .k-gv-media-k { margin: 0; }
.k-gv-controls .k-gv-media-v { padding: var(--sp-6) var(--sp-12); background: color-mix(in oklch, var(--s3) 70%, transparent); }
.k-gv-controls .k-gv-media-acts { margin: 0; }
/* the wardrobe: one row a kind, owned pieces as small pictures */
.k-gv-ward { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-18) var(--sp-24); }
.k-gv-ward-row { display: flex; flex-direction: column; gap: var(--sp-8); min-inline-size: 0; }
.k-gv-ward-h { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-13-5); }
.k-gv-ward-h .k-muted { font-size: var(--fs-12); }
.k-gv-ward-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: center; min-block-size: var(--sp-48); }
.k-gv-ward-chip { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); inline-size: var(--sp-64); padding: var(--sp-4); border-radius: var(--r-14); background: var(--s2); font-size: var(--fs-11); color: var(--text-2); }
.k-gv-ward-chip[aria-pressed="true"] { box-shadow: inset 0 0 0 var(--ring-1-5) var(--gold); color: var(--text); }
.k-gv-ward-chip > img { inline-size: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-10); }
.k-gv-ward-chip > img[data-kind="outfit"] { object-fit: cover; object-position: 50% 4%; }
.k-gv-ward-chip > img:is([data-kind="avatar"], [data-kind="seal"]) { object-fit: contain; }
.k-gv-ward-k { inline-size: 100%; aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-10); background: var(--s3); font: var(--weight-semibold) var(--fs-20) / 1 var(--font-kanji); color: var(--crimson); }
.k-gv-ward-n { max-inline-size: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-gv-ward-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-20); align-items: stretch; }
@media (max-width: 1080px) {
.k-gv-ward { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.k-gv-ward-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 700px) {
.k-gv-studio { grid-template-columns: minmax(0, 1fr); padding: var(--sp-18) var(--sp-20); }
.k-gv-ward { grid-template-columns: minmax(0, 1fr); }
.k-gv-controls .k-gv-media-item { grid-template-columns: minmax(0, 1fr) auto; }
.k-gv-controls .k-gv-media-k { grid-column: 1 / -1; }
}

}