/* Credit engine · theme C (2026-10-30). The study is design-system/decisions/mobile-layout/ce.html; the decision
   is in design-system/decisions/log.md ("크레딧 엔진 테마 C"). Loaded after styles.css; every selector starts
   html:root body so it outranks the older layers (CLAUDE.md §2). Tokens only. */

/* ---- small type helpers for the parts home-c.js draws ---- */
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-t1 { font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--tracking-title); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-t2 { font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); letter-spacing: var(--tracking-title); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-t3 { font-size: var(--text-title-3-size); line-height: var(--text-title-3-line); font-weight: var(--text-title-3-weight); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-hl { font-size: var(--text-headline-size); line-height: var(--text-headline-line); font-weight: var(--text-headline-weight); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-co { font-size: var(--text-callout-size); line-height: var(--text-callout-line); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-fn { font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-cp { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-sec { color: var(--text-secondary); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-b { font-weight: var(--text-headline-weight); }
html:root body :is(.hc-how, .hero-facts, .hero-ex) .hc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html:root body :where(.hc-how, .hero-facts, .hero-ex) :where(p, h2, h3, h4, ol, ul, dl, dd) { margin: 0; padding: 0; } /* :where — the reset never outranks a component rule */
html:root body :where(.hc-how, .hero-facts) :where(ol, ul) { list-style: none; }
html:root body .hc-ib { display: grid; place-items: center; width: 20px; height: 20px; }
html:root body .hc-ib svg { width: 100%; height: 100%; fill: currentColor; }

/* ---- hero: light, the blueprint drawn in the text colour; one column ---- */
html:root body .ce-entry { background: var(--bg-base); }
/* the header is clear at the top; on the home page the page behind it is white like the hero (the result stays grey) */
html:root body:not(.has-result) { background: var(--bg-base); }
html:root body .ce-entry::before { inset: 0; top: 0; right: 0; width: auto; height: auto; aspect-ratio: auto; border: 0; border-radius: 0; transform: none;
  background: var(--text-primary); opacity: .12; /* the hero is only title, lookup and facts now, so the art covers it like the study */
  -webkit-mask: url("/assets/hero/blueprint.svg") right center / cover no-repeat; mask: url("/assets/hero/blueprint.svg") right center / cover no-repeat; }
html:root body .ce-entry-inner { grid-template-columns: minmax(0, 1fr); }
html:root body .ce-lead { text-wrap: pretty; }
html:root body .br-wide { display: none; }

/* the lookup: an opaque light fill at rest (the blueprint never shows through), white with a soft focus halo when typing */
html:root body .ce-search .address-field { height: 56px; border: 1px solid transparent; background: var(--bg-grouped);
  transition: background var(--motion-release) var(--ease-standard), border-color var(--motion-release) var(--ease-standard), outline-color var(--motion-release) var(--ease-standard); }
html:root body .ce-search .address-field:hover { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-grouped)); }
html:root body .ce-search .address-field:focus-within { background: var(--surface-card); border-color: var(--stroke-strong); box-shadow: none;
  outline: 4px solid color-mix(in srgb, var(--focus-ring) 22%, transparent); outline-offset: 0; }
html:root body .ce-search #submit { background: var(--action-brand); color: var(--text-on-inverse); }

/* examples under the field: tap to fill it; phones one line that scrolls sideways */
html:root body .hero-ex { width: 100%; margin: var(--space-12) 0 0; display: flex; align-items: center; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
html:root body .hero-ex::-webkit-scrollbar { display: none; }
html:root body .hero-ex:empty { display: none; }
html:root body .hc-hx { all: unset; flex: none; white-space: nowrap; cursor: pointer; height: 28px; padding: 0 var(--space-8); border-radius: var(--radius-s);
  display: inline-flex; align-items: center; background: var(--fill-faint); color: var(--text-primary);
  font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); transition: background var(--motion-release) var(--ease-standard); }
html:root body .hc-hx:hover { background: var(--fill-subtle); }
html:root body .hc-hx:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 2px; }

/* the four facts: what each number is made of. In the hero on desktop; below it on phones and tablets so the hero fits
   the first screen (CLAUDE.md §5). No separators. */
html:root body .hero-facts { width: 100%; margin: var(--space-32) 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-24) var(--space-16); }
html:root body .hero-facts > div { min-width: 0; display: grid; align-content: start; }
html:root body .hero-facts dd { margin: var(--space-2) 0 0; color: var(--text-secondary); }
html:root body .hero-facts .hf-v { margin-top: var(--space-12); min-height: 24px; display: flex; align-items: center; }
html:root body .hero-facts .hf-txt { display: block; white-space: normal; }
html:root body .hf-band { display: flex; gap: var(--space-2); width: 100%; max-width: 160px; height: 6px; }
html:root body .hf-band i { border-radius: 2px; }
html:root body .hero-facts.hf-top { display: none; }
html:root body .hf-below { padding: 0 var(--space-20) var(--space-32); background: var(--bg-base); }
html:root body .hf-below .hero-facts { margin-top: 0; }
html:root body.has-result .hf-below { display: none; }
/* network / protocol marks: white fill + inner hairline (CLAUDE.md §4); no mark → first letter on grey fill */
html:root body .hc-lgs { display: flex; }
html:root body .hc-lgs .hc-lg + .hc-lg { margin-left: calc(var(--space-8) * -1); }
html:root body .hc-lg { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--surface-card);
  box-shadow: inset 0 0 0 1px var(--stroke-subtle); outline: 2px solid var(--bg-base); color: var(--text-secondary);
  font-size: var(--text-caption-2-size); font-weight: var(--text-headline-weight); }
html:root body .hc-lg img { width: 100%; height: 100%; object-fit: contain; }
html:root body .hc-lg-t { background: var(--fill-default); box-shadow: none; }
html:root body .sb-high { background: var(--error-fill); } html:root body .sb-sub { background: var(--warning-fill); }
html:root body .sb-near { background: var(--info-fill); } html:root body .sb-prime { background: var(--success-fill); }

/* ---- how it's assessed: pipeline · factors and weights · score calculation · risk · asset scope ---- */
/* the old research wrapper keeps no ground or gap of its own (its sand and 16 px top showed as a stripe) */
html:root body .engine-research { margin-top: 0; padding-top: 0; background: none; }
html:root body .hc-how { padding: var(--space-64) 0; border-image: conic-gradient(var(--bg-base) 0 0) fill 0 / / 0 100vmax; } /* a white band, full width, on the grey page */
html:root body .hc-head > .hc-t1 { margin-top: var(--space-4); }
html:root body .hc-head > .hc-co { margin-top: var(--space-8); }
html:root body .mt-flow { position: relative; margin-top: var(--space-32); display: grid; gap: var(--space-20); }
html:root body .mt-flow::before { content: ""; position: absolute; left: 15px; top: var(--space-16); bottom: var(--space-16); width: 2px; background: var(--stroke-separator); }
html:root body .mt-flow li { position: relative; display: grid; grid-template-columns: 32px 1fr; column-gap: var(--space-16); row-gap: var(--space-2); }
html:root body .mt-flow li > :not(.mt-node) { grid-column: 2; }
html:root body .mt-node { grid-row: 1 / span 3; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-inverse); color: var(--text-on-inverse);
  font-size: var(--text-footnote-size); font-weight: var(--text-headline-weight); outline: var(--space-4) solid var(--bg-base); }
html:root body .mt-out { justify-self: start; margin-top: var(--space-4); padding: var(--space-2) var(--space-8); border-radius: var(--radius-xs); background: var(--fill-subtle); color: var(--text-secondary); }
html:root body .mt-grid { margin-top: var(--space-64); display: grid; gap: var(--space-48); }
html:root body .mt-grid > * { min-width: 0; }
html:root body .mt-factors > .hc-fn { margin-top: var(--space-4); }
html:root body .mt-list { margin-top: var(--space-8); }
html:root body .mt-list li { display: grid; grid-template-columns: minmax(0, 1fr) 112px; column-gap: var(--space-16); align-items: start; padding: var(--space-16) 0; }
/* weight: a bar against the largest weight, then the number, on the name's line (one size, regular weight, so the name reads first) */
html:root body .mt-w { display: flex; align-items: center; gap: var(--space-8); height: var(--text-callout-line); }
html:root body .mt-wb { flex: 1; min-width: 0; }
html:root body .mt-wb i { display: block; height: 4px; border-radius: 2px; background: var(--ui-accent); }
html:root body .mt-w .hc-num { min-width: 32px; text-align: right; }
html:root body .mt-list li + li { box-shadow: inset 0 1px 0 var(--stroke-separator); }
html:root body .mt-list .hc-fn { margin-top: var(--space-2); }
html:root body .mt-calc { padding: var(--space-20); border-radius: var(--radius-card); background: var(--bg-grouped); }
html:root body .mt-eq { margin-top: var(--space-16); padding: var(--space-16) 0; text-align: center; border-radius: var(--radius-l); background: var(--surface-card);
  font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums; }
html:root body .mt-calc sub { font-size: .6em; }
html:root body .mt-leg { margin-top: var(--space-12); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4) var(--space-20); }
html:root body .mt-leg div { display: flex; gap: var(--space-8); }
html:root body .mt-leg dt { font-weight: var(--text-headline-weight); }
html:root body .mt-ex { margin-top: var(--space-20); padding: var(--space-16); border-radius: var(--radius-l); background: var(--surface-card); }
html:root body .mt-ex ol { margin-top: var(--space-8); display: grid; }
html:root body .mt-ex li { display: grid; grid-template-columns: minmax(0, 1fr) auto 48px; gap: var(--space-12); align-items: baseline; padding: var(--space-4) 0; }
html:root body .mt-ex li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .mt-ex li > span:last-child { text-align: right; }
html:root body .mt-ex-sum { margin-top: var(--space-8); padding-top: var(--space-12); display: flex; justify-content: space-between; align-items: center; gap: var(--space-8); box-shadow: inset 0 1px 0 var(--stroke-separator); }
html:root body .mt-ex-sum > span:last-child { display: inline-flex; align-items: center; gap: var(--space-8); }
html:root body .hc-gr { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); border-radius: var(--radius-xs); font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); white-space: nowrap; }
html:root body .hc-gr.near { background: var(--info-bg); color: var(--info-text); }
html:root body .mt-scale { margin-top: var(--space-24); }
html:root body .mt-scale b { color: var(--text-primary); font-weight: var(--text-headline-weight); }
html:root body .mt-sbar { margin-top: var(--space-8); display: flex; gap: var(--space-2); height: 8px; }
html:root body .mt-sbar i { border-radius: 2px; }
html:root body .mt-bands { margin-top: var(--space-8); display: flex; gap: var(--space-2); }
html:root body .mt-bands li { min-width: 0; display: grid; gap: var(--space-2); }
html:root body .mt-cnote { margin-top: var(--space-16); }
html:root body :is(.mt-risk, .mt-scope) { margin-top: var(--space-64); }
html:root body :is(.mt-risk, .mt-scope) > .hc-fn { margin-top: var(--space-4); }
html:root body .mt-cards { margin-top: var(--space-20); display: grid; gap: var(--space-16); }
html:root body .mt-cards li { padding: var(--space-20); border-radius: var(--radius-card); background: var(--bg-grouped); display: grid; gap: var(--space-8); align-content: start; }
html:root body .mt-ic { width: 40px; height: 40px; margin-bottom: var(--space-4); border-radius: var(--radius-m); display: grid; place-items: center; background: var(--surface-card); color: var(--text-primary); }
html:root body .mt-f { padding: var(--space-8) var(--space-12); border-radius: var(--radius-m); background: var(--surface-card); font-weight: var(--text-headline-weight); }
html:root body .mt-tags { display: flex; flex-wrap: wrap; gap: var(--space-4); }
html:root body .mt-tags span { padding: var(--space-2) var(--space-8); border-radius: var(--radius-xs); background: var(--surface-card); color: var(--text-secondary); }
/* coverage, phones and tablets: one filled card, three zones (no lines between); logo chips that wrap; token rows one line */
html:root body .mt-cov { margin-top: var(--space-16); padding: 0 var(--space-20); border-radius: var(--radius-card); background: var(--bg-grouped); }
html:root body .mt-cov > section { padding: var(--space-20) 0; }
html:root body .mt-cov > section + section { padding-top: var(--space-4); }
html:root body .mt-cov h4 b { margin-left: var(--space-4); color: var(--text-primary); font-weight: var(--text-headline-weight); }
html:root body .cov-l { margin-top: var(--space-12); display: flex; flex-wrap: wrap; gap: var(--space-8); }
html:root body .cov-l li { min-width: 0; height: 32px; padding: 0 var(--space-12) 0 var(--space-4); border-radius: var(--radius-m); display: flex; align-items: center; gap: var(--space-8); background: var(--surface-card); }
html:root body .cov-l li > span:last-child { min-width: 0; display: grid; }
html:root body .cov-l li .hc-cp { display: none; }
html:root body .cov-l .hc-lg { outline: 0; }
html:root body .cov-r { margin-top: var(--space-4); display: grid; }
html:root body .cov-r li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-8) 0; }
html:root body .cov-r li + li { box-shadow: inset 0 1px 0 var(--stroke-separator); }
html:root body .cov-r li > span:first-child { min-width: 0; display: grid; }
html:root body .cov-r li > span:first-child .hc-cp { display: none; }
html:root body .mt-note { margin-top: var(--space-16); }

/* ---- FAQ and footer on the brand sand (light only) ---- */
html:root body .ce-faq { border-image: conic-gradient(var(--surface-brand) 0 0) fill 0 / / 0 100vmax; }
html:root body > footer { background: var(--surface-brand); }
html:root body .ft-credits { margin-top: var(--space-8); }

@media (prefers-reduced-motion: reduce) { html:root body :is(.hc-hx, .ce-search .address-field) { transition: none; } }

/* ---- tablets and up: the lead in three lines (what it covers / analyses / shows) ---- */
@media (min-width: 600px) {
  html:root body .br-wide { display: inline; }
}

/* ---- desktop (≥960): its own layout, written once ---- */
@media (min-width: 960px) {
  html:root body .ce-entry-inner { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); }
  html:root body .ce-entry-main { grid-column: 1 / span 8; }
  html:root body .hero-facts.hf-top { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-24); margin-top: var(--space-48); }
  html:root body .hf-below { display: none; }
  html:root body .ce-search { position: relative; }
  html:root body .ce-search .address-field { padding-right: calc(var(--space-80) * 2); }
  html:root body .ce-search :is(#submit, .hc-in-submit) { position: absolute; top: 6px; right: 6px; height: var(--control-m); padding: 0 var(--space-20); border-radius: var(--radius-s); } /* 14 − 6 = 8: concentric */
  html:root body .hero-ex { flex-wrap: wrap; overflow: visible; }
  html:root body .mt-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--space-24); }
  html:root body .mt-flow::before { left: 16px; right: calc((100% - 4 * var(--space-24)) / 5 - 16px); top: 15px; bottom: auto; width: auto; height: 2px; } /* ends at step 5 */
  html:root body .mt-flow li { grid-template-columns: 1fr; row-gap: var(--space-4); }
  html:root body .mt-flow li > :not(.mt-node) { grid-column: 1; }
  html:root body .mt-node { grid-row: auto; margin-bottom: var(--space-12); }
  html:root body .mt-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); align-items: start; }
  html:root body .mt-factors { grid-column: 1 / span 7; }
  html:root body .mt-calc { grid-column: 8 / span 5; padding: var(--space-24); }
  html:root body .mt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); }
  html:root body .mt-cards li { padding: var(--space-24); }
  html:root body .mt-cov { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-24); padding: 0; background: none; }
  html:root body .mt-cov > section, html:root body .mt-cov > section + section { padding: var(--space-24); border-radius: var(--radius-card); background: var(--bg-grouped); }
  html:root body .cov-l { margin-top: var(--space-16); display: grid; gap: var(--space-12); }
  html:root body .cov-l.two { grid-template-columns: 1fr 1fr; }
  html:root body .cov-l li { height: auto; padding: 0; border-radius: 0; gap: var(--space-12); background: none; }
  html:root body :is(.cov-l li .hc-cp, .cov-r li > span:first-child .hc-cp) { display: block; }
  html:root body .cov-l .hc-lg { width: 32px; height: 32px; }
  html:root body .cov-r li { padding: var(--space-12) 0; }
}

/* ---- public wallets (step 2): the navy stage — gallery by kind and matchups ---- */
html:root body.has-result .hc-explore { display: none; }
html:root body .hc-explore { --on: var(--text-on-inverse); --on-2: color-mix(in srgb, var(--text-on-inverse) 68%, transparent);
  --on-fill: color-mix(in srgb, var(--text-on-inverse) 12%, transparent); --on-fill-2: color-mix(in srgb, var(--text-on-inverse) 16%, transparent);
  padding: var(--space-64) var(--space-20); background: var(--surface-inverse); color: var(--on); }
html:root body .hx-in { max-width: 1200px; margin: 0 auto; }
html:root body :where(.hc-explore) :where(p, h2, h3, h4, ol, ul) { margin: 0; padding: 0; }
html:root body :where(.hc-explore) :where(ol, ul) { list-style: none; }
html:root body .hc-explore :is(.hc-t1, .hc-t2, .hc-hl, .hc-fn, .hc-cp, .hc-co) { color: inherit; }
html:root body .hc-explore .hc-t1 { font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--tracking-title); }
html:root body .hc-explore .hc-t2 { font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); letter-spacing: var(--tracking-title); }
html:root body .hc-explore .hc-hl { font-size: var(--text-headline-size); line-height: var(--text-headline-line); font-weight: var(--text-headline-weight); }
html:root body .hc-explore .hc-co { font-size: var(--text-callout-size); line-height: var(--text-callout-line); }
html:root body .hc-explore .hc-fn { font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); }
html:root body .hc-explore .hc-cp { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); }
html:root body .hc-explore .hc-b { font-weight: var(--text-headline-weight); }
html:root body .hc-explore .hc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html:root body :is(.hx-k, .hx-sub) { color: var(--on-2); }
html:root body .hx-sub { margin-top: var(--space-8); }
html:root body .hx-sec { margin-top: var(--space-48); }
html:root body .hx-tabs { margin-top: var(--space-16); display: flex; gap: var(--space-8); overflow-x: auto; scrollbar-width: none; }
html:root body .hx-tabs::-webkit-scrollbar { display: none; }
/* more chips past an edge: that edge fades out (a mask, so it works on any ground). home-c.js edgeFade sets the classes */
@property --fade-l { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: "<length>"; inherits: false; initial-value: 0px; }
html:root body .hx-tabs { mask-image: linear-gradient(to right, transparent, currentColor var(--fade-l), currentColor calc(100% - var(--fade-r)), transparent);
  transition: --fade-l .2s var(--ease-standard), --fade-r .2s var(--ease-standard); }
html:root body .hx-tabs.is-fade-l { --fade-l: 48px; }
html:root body .hx-tabs.is-fade-r { --fade-r: 48px; }
@media (prefers-reduced-motion: reduce) { html:root body .hx-tabs { transition: none; } }
html:root body .hx-tab { all: unset; cursor: pointer; flex: none; height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-s); display: inline-flex; align-items: center; gap: var(--space-4);
  background: var(--on-fill); color: var(--on); font-size: var(--text-footnote-size); font-weight: var(--text-headline-weight); }
html:root body .hx-tab[aria-selected="true"] { background: var(--text-on-inverse); color: var(--surface-inverse); }
html:root body .hx-tab:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 2px; }
/* gallery: fixed height per tab (columns × rows), photo tiles that fade into the tile */
html:root body .xg { margin-top: var(--space-16); display: grid; grid-template-columns: repeat(var(--gal-cols, 1), minmax(0, 1fr)); grid-template-rows: repeat(var(--gal-rows, 6), 72px); gap: var(--space-8); }
html:root body .xt { all: unset; cursor: pointer; box-sizing: border-box; position: relative; min-width: 0; overflow: hidden; display: flex; align-items: center;
  padding: 0 var(--space-16) 0 calc(var(--space-80) + var(--space-32)); border-radius: var(--radius-l); background: var(--on-fill); color: var(--on); transition: transform .2s var(--ease-standard), background .2s var(--ease-standard); }
html:root body .xt:active { transform: scale(var(--state-press-scale)); }
html:root body .xt:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 2px; }
html:root body .xt-ph { position: absolute; inset: 0 auto 0 0; width: 140px; display: grid; place-items: center start; padding-left: var(--space-20); color: var(--on-2);
  -webkit-mask-image: linear-gradient(90deg, var(--text-primary) 88px, transparent 128px); mask-image: linear-gradient(90deg, var(--text-primary) 88px, transparent 128px); }
html:root body .xt-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 18%; }
html:root body .xt-ph.is-kind, html:root body .xt-ph.is-mono { background: var(--on-fill-2); }
html:root body .xt-ph.is-mono { font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); color: var(--on); }
html:root body .xt-b { position: relative; flex: 1; min-width: 0; display: grid; gap: var(--space-2); }
html:root body .xt-n, html:root body .xt-r { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .xt-r { color: var(--on-2); }
html:root body .xt-more { padding: 0; justify-content: center; gap: var(--space-8); color: var(--on-2); }
@media (hover: hover) { html:root body .xt:hover { background: var(--on-fill-2); } }
html:root body .xg-note { margin-top: var(--space-12); color: var(--on-2); display: grid; gap: var(--space-8); }
/* matchups: two photos meeting at a VS seam; the score is a "?" until both wallets are read */
html:root body .xv { margin-top: var(--space-16); display: grid; gap: var(--space-12); }
html:root body .xv-feat { position: relative; padding: var(--space-20); border-radius: var(--radius-card); background: var(--on-fill); text-align: center; }
html:root body .xd-role, html:root body .xv-note, html:root body .xd-q { color: var(--on-2); }
html:root body .xv-q { margin-top: var(--space-8); }
html:root body .xd { position: relative; margin-top: var(--space-16); display: grid; grid-template-columns: 1fr 1fr; }
html:root body .xd-p { position: relative; min-width: 0; display: grid; justify-items: center; gap: var(--space-2); }
/* the two photos meet on a slanted seam, 4px apart, with the VS mark on it; names sit on the photo over a scrim */
html:root body .xd-ph { --seam: 28px; position: relative; grid-area: 1 / 1; width: calc(100% + var(--seam) / 2); height: 144px; display: grid; place-items: center; overflow: hidden; color: var(--on-2); }
html:root body .xd-ph::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, color-mix(in srgb, var(--surface-inverse) 82%, transparent), transparent 58%); }
html:root body .xd-cap { grid-area: 1 / 1; align-self: end; z-index: 1; width: 100%; min-width: 0; padding: 0 var(--space-16) var(--space-12); display: grid; gap: var(--space-2); }
html:root body .xd-a .xd-cap { justify-items: start; text-align: start; }
html:root body .xd-b .xd-cap { justify-items: end; text-align: end; }
html:root body .xd-cap .xd-n { color: var(--on); }
html:root body .xd-a .xd-sc { justify-items: start; padding-inline: var(--space-16); }
html:root body .xd-b .xd-sc { justify-items: end; padding-inline: var(--space-16); }
html:root body .xd-p > .xd-sc { justify-self: stretch; }
html:root body .xd-a .xd-ph { justify-self: start; border-radius: var(--radius-l) 0 0 var(--radius-l); clip-path: polygon(0 0, 100% 0, calc(100% - var(--seam)) 100%, 0 100%); }
html:root body .xd-b .xd-ph { justify-self: end; border-radius: 0 var(--radius-l) var(--radius-l) 0; clip-path: polygon(calc(var(--seam) + 4px) 0, 100% 0, 100% 100%, 4px 100%); }
html:root body .xd-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: filter .4s var(--ease-standard), opacity .4s var(--ease-standard); }
html:root body .xd-ph.is-kind, html:root body .xd-ph.is-mono { background: var(--on-fill-2); }
html:root body .xd-ph.is-mono { font-size: var(--text-title-1-size); font-weight: var(--text-title-1-weight); color: var(--on); }
html:root body .xd-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .xd-vs { position: absolute; z-index: 2; left: 50%; top: 72px; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--text-on-inverse); color: var(--surface-inverse); font-size: var(--text-footnote-size); font-weight: var(--text-headline-weight); }
html:root body .xd-sc { margin-top: var(--space-12); min-height: 64px; align-content: start; display: grid; justify-items: center; gap: var(--space-4); }
html:root body .xd-p.lose img { filter: grayscale(1); opacity: .6; }
html:root body .hc-explore .hc-gr { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); border-radius: var(--radius-xs); background: var(--surface-card); font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); }
html:root body .hc-gr.prime { color: var(--success-text); } html:root body .hc-explore .hc-gr.near { color: var(--info-text); }
html:root body .hc-gr.sub { color: var(--text-primary); } html:root body .hc-gr.high { color: var(--error-text); }
html:root body .xv-res { margin-top: var(--space-16); color: var(--on-2); }
html:root body .xv-res b { color: var(--on); }
html:root body .xv-act { margin-top: var(--space-16); display: grid; gap: var(--space-8); }
html:root body .xv-go[disabled] { cursor: default; opacity: var(--state-disabled); }
/* a second, quieter action: put your own wallet in (the lookup field, on the navy band), or go back */
html:root body .xv-mine.ce-search { width: 100%; max-width: none; margin-top: 0; }
html:root body .xv-mine .address-field { background: var(--on-fill-2); }
html:root body .xv-mine .address-field:hover { background: color-mix(in srgb, var(--on) 20%, transparent); }
html:root body .xv-mine .address-field:focus-within { background: color-mix(in srgb, var(--on) 22%, transparent); border-color: var(--on-2); }
html:root body .xv-mine .address-field :is(input, .address-icon) { color: var(--on); }
html:root body .xv-mine .address-field input::placeholder { color: var(--on-2); }
html:root body .xv-mine .hc-in-submit { background-color: var(--on-fill-2); color: var(--on); } /* the white button above stays the one main action */
html:root body .xv-sub { all: unset; cursor: pointer; box-sizing: border-box; height: 44px; padding: 0 var(--space-16); border-radius: var(--radius-l); display: grid; place-items: center;
  background: var(--on-fill-2); color: var(--on); font-size: var(--text-subhead-size); font-weight: var(--text-headline-weight); white-space: nowrap; }
html:root body .xv-sub:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) { html:root body .xv-sub:hover { background: color-mix(in srgb, var(--on) 18%, transparent); } }
/* the step list floats over the card while both wallets are read, so the card keeps its height */
html:root body .xv-ov { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: var(--space-24); border-radius: var(--radius-card);
  background: color-mix(in srgb, var(--surface-inverse) 86%, transparent); -webkit-backdrop-filter: var(--blur-thin); backdrop-filter: var(--blur-thin); }
html:root body .xv-ov .ck { margin: 0; width: 100%; }
html:root body .xv-go { all: unset; cursor: pointer; box-sizing: border-box; height: 52px; border-radius: var(--radius-l); display: grid; place-items: center;
  background: var(--text-on-inverse); color: var(--surface-inverse); font-size: var(--text-headline-size); font-weight: var(--text-headline-weight); }
html:root body .xv-note { margin-top: var(--space-12); }
html:root body .xv-list { display: flex; gap: var(--space-8); overflow-x: auto; margin: 0 calc(var(--space-20) * -1); padding: 0 var(--space-20); scrollbar-width: none; }
html:root body .xv-list::-webkit-scrollbar { display: none; }
html:root body .xv-list li { flex: none; width: 260px; }
html:root body .xv-i { all: unset; cursor: pointer; box-sizing: border-box; width: 100%; min-height: 56px; padding: var(--space-8) var(--space-12); border-radius: var(--radius-l); display: flex; align-items: center; gap: var(--space-12); background: var(--on-fill); color: var(--on); }
html:root body .xv-i[aria-current="true"] { background: var(--text-on-inverse); color: var(--surface-inverse); }
html:root body .xv-f { flex: none; display: flex; gap: var(--space-4); }
html:root body .xv-av { width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--on-fill-2); font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); }
html:root body .xv-i[aria-current="true"] .xv-av { background: var(--fill-subtle); }
html:root body .xv-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
html:root body .xv-av .hc-ib { width: 16px; height: 16px; }
html:root body .xv-iq { text-align: left; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* scoring checklist in the matchup, readable on the navy */
html:root body .ck { margin: var(--space-20) auto 0; max-width: 480px; text-align: left; }
html:root body .ck-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-12); }
html:root body .ck-t { color: var(--on-2); }
html:root body .ck-bar { margin-top: var(--space-12); height: 4px; border-radius: 2px; background: var(--on-fill-2); overflow: hidden; }
html:root body .ck-bar i { display: block; width: 0; height: 100%; background: var(--info-fill); } /* drawn every frame (home-c.js makeChecks) */
html:root body .ck-steps li:not(.ok) .ck-ic svg { display: none; }
html:root body .ck-steps { margin-top: var(--space-8); display: grid; }
html:root body .ck-steps li { display: flex; gap: var(--space-12); padding: var(--space-8) 0; color: color-mix(in srgb, var(--on) 40%, transparent); }
html:root body .ck-steps li.ok { color: var(--on-2); }
html:root body .ck-steps li.now { color: var(--on); }
html:root body .ck-ic { position: relative; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--on-fill-2); }
html:root body .ck-steps li.ok .ck-ic { box-shadow: none; color: var(--success-fill); }
html:root body .ck-ic svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@media (prefers-reduced-motion: reduce) { html:root body :is(.xt, .xd-ph img) { transition: none; } }
@media (min-width: 960px) {
  html:root body .hc-explore { padding: var(--space-80) max(var(--space-48), calc((100% - 1200px) / 2)); }
  html:root body .xg { margin-top: var(--space-24); grid-template-rows: repeat(var(--gal-rows, 3), 80px); gap: var(--space-12); }
  html:root body .xv { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-24); align-items: stretch; }
  html:root body .xv-feat { grid-column: 1 / span 8; padding: var(--space-32); display: flex; flex-direction: column; }
  html:root body .xd { margin-top: var(--space-24); }
  html:root body .xd-ph { --seam: 40px; height: 220px; }
  html:root body .xd-vs { top: 110px; width: 52px; height: 52px; }
  html:root body .xv-act { margin-top: auto; padding-top: var(--space-20); }
  html:root body .xv-list { grid-column: 9 / span 4; margin: 0; padding: 0; flex-direction: column; overflow: visible; }
  html:root body .xv-list li { width: auto; flex: 1; display: flex; max-height: 72px; }
  html:root body .xv-list .xv-i { flex: 1; min-height: 48px; }
}

/* ---- result: the report tabs stick under the header looking exactly as they sat — no frosted header,
   no hairline between the two; header and tabs read as one grey strip ---- */
html:root body.has-result .site-header { animation-name: site-header-flat; }
@keyframes site-header-flat { to { background-color: var(--bg-grouped); border-bottom-color: transparent; } }

/* ---- while scoring (step 3): the progress card is a sheet; the page shows the report's shape ---- */
html:root body .ce-entry #loading.loading { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; margin: 0; max-height: 70vh; overflow-y: auto;
  padding: var(--space-20); border-radius: var(--radius-sheet) var(--radius-sheet) 0 0; background: var(--surface-elevated);
  box-shadow: var(--shadow-lg); /* lint-ok shadow/floating: a sheet over the page */
  animation: hc-sheet-up .4s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes hc-sheet-up { from { transform: translateY(100%); } }
html:root body .ce-entry #loading :is(.ce-an-sources, .ce-an-feed, .ce-load-note) { display: none; }
html:root body .ce-entry #loading .ce-load-head { cursor: pointer; }
html:root body .ce-entry #loading.is-folded :is(.ce-an-steps, .ce-load-meta) { display: none; }
/* the home sections step aside; the skeleton stands where the report will be */
html:root body .hc-skel { display: none; }
html:root body.hc-scoring:not(.has-result) .hc-skel { display: block; }
html:root body.hc-scoring:not(.has-result) :is(.hf-below, .hc-explore, #engine-research, .ce-faq, .hero-facts) { display: none; }
/* the page stays white behind the clear header while scoring; only the skeleton sits on the grey */
html:root body.hc-scoring .ce-entry { padding-bottom: var(--space-32); }
html:root body .hc-skel { max-width: 1200px; margin: 0 auto; padding: var(--space-32) var(--space-20) var(--space-64); border-image: conic-gradient(var(--bg-grouped) 0 0) fill 0 / / 0 100vmax; }
html:root body .sk-title { margin: 0; font-size: var(--text-title-2-size); line-height: var(--text-title-2-line); font-weight: var(--text-title-2-weight); color: var(--text-primary); }
html:root body .sk-tabs { margin-top: var(--space-32); padding: var(--space-8) 0; display: flex; gap: var(--space-4); overflow: hidden; }
html:root body .sk-tabs span { flex: none; height: 36px; padding: 0 var(--space-16); border-radius: var(--radius-m); display: grid; place-items: center;
  color: var(--text-secondary); font-size: var(--text-subhead-size); font-weight: var(--text-headline-weight); }
html:root body .sk-tabs span.on { background: var(--surface-card); color: var(--text-primary); }
html:root body .sk-id { margin-top: var(--space-24); height: 64px; display: flex; align-items: center; }
html:root body .sk-grid { display: grid; gap: var(--space-16); }
html:root body .sk-rail { min-height: 480px; padding: var(--space-20); border-radius: var(--radius-card); background: var(--surface-inverse); display: grid; align-content: start; justify-items: center; gap: var(--space-24); }
html:root body .sk-rail > .sk-l { justify-self: start; }
html:root body .sk-ring { width: 240px; animation: hc-pulse 1.2s var(--ease-standard) infinite alternate; }
html:root body .sk-ring svg { display: block; width: 100%; height: auto; fill: none; stroke: color-mix(in srgb, var(--text-on-inverse) 12%, transparent); stroke-width: 16; stroke-linecap: round; }
html:root body .sk-story { min-height: 420px; padding: var(--space-20); border-radius: var(--radius-card); background: var(--surface-card); display: grid; align-content: start; gap: var(--space-12); }
html:root body .sk-l { display: block; height: 12px; border-radius: var(--radius-xs); background: var(--fill-subtle); animation: hc-pulse 1.2s var(--ease-standard) infinite alternate; }
html:root body .sk-l.sk-inv { background: color-mix(in srgb, var(--text-on-inverse) 16%, transparent); }
html:root body .sk-t { height: 24px; }
html:root body .sk-facts { margin-top: var(--space-16); display: grid; }
html:root body .sk-facts div { display: flex; justify-content: space-between; padding: var(--space-20) 0; }
html:root body .sk-facts div + div { box-shadow: inset 0 1px 0 var(--stroke-separator); }
@keyframes hc-pulse { to { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { html:root body :is(.sk-l, .sk-ring) { animation: none; } html:root body .ce-entry #loading.loading { animation: none; } }
@media (min-width: 960px) {
  html:root body .ce-entry #loading.loading { top: calc(var(--site-header-h) + var(--space-12)); bottom: auto; width: 440px; margin-inline: auto; max-height: min(640px, 70vh);
    border-radius: var(--radius-sheet); animation-name: hc-sheet-down; }
  @keyframes hc-sheet-down { from { opacity: 0; transform: translateY(calc(var(--space-24) * -1)); } }
  html:root body .hc-skel { padding-inline: max(var(--space-48), calc((100% - 1200px) / 2)); max-width: none; }
  html:root body .sk-grid { grid-template-columns: 380px minmax(0, 1fr); }
  html:root body .sk-rail, html:root body .sk-story { min-height: 560px; padding: var(--space-32); }
}

/* ---- the result is its own screen: no hero, no home sections; a back link leads home ---- */
html:root body.has-result:not(.hc-scoring) :is(.ce-entry, .hf-below, .hc-explore, #engine-research, .ce-faq) { display: none; }
html:root body .hc-back { display: none; }
html:root body.has-result .hc-back { display: inline-flex; align-items: center; gap: var(--space-4); min-height: 44px; margin: var(--space-24) 0 0 calc(var(--space-8) * -1); padding: 0 var(--space-8);
  border-radius: var(--radius-m); color: var(--text-secondary); font-size: var(--text-callout-size); text-decoration: none; }
html:root body.has-result .hc-back:hover { color: var(--text-primary); }
html:root body.has-result .hc-back:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 0; }

/* ---- result: profile card (who was read) above the report ---- */
html:root body .hc-profile, html:root body .hc-compare { display: none; }
html:root body.has-result .hc-profile, html:root body.has-result .hc-compare { display: block; }
html:root body :where(.hc-profile, .hc-compare) :where(p, h2, h3, ol, ul, dl, dd, dt) { margin: 0; padding: 0; }
html:root body :where(.hc-compare) :where(ol, ul) { list-style: none; }
html:root body :is(.hc-profile, .hc-compare) :is(.hc-t1) { font-size: var(--text-title-1-size); line-height: var(--text-title-1-line); font-weight: var(--text-title-1-weight); letter-spacing: var(--tracking-title); }
html:root body :is(.hc-profile, .hc-compare) .hc-hl { font-size: var(--text-headline-size); line-height: var(--text-headline-line); font-weight: var(--text-headline-weight); }
html:root body :is(.hc-profile, .hc-compare) .hc-co { font-size: var(--text-callout-size); line-height: var(--text-callout-line); }
html:root body :is(.hc-profile, .hc-compare) .hc-fn { font-size: var(--text-footnote-size); line-height: var(--text-footnote-line); }
html:root body :is(.hc-profile, .hc-compare) .hc-cp { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); }
html:root body :is(.hc-profile, .hc-compare) .hc-sec { color: var(--text-secondary); }
html:root body :is(.hc-profile, .hc-compare) .hc-b { font-weight: var(--text-headline-weight); }
html:root body :is(.hc-profile, .hc-compare) .hc-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
html:root body .pf-card { margin-top: var(--space-16); padding: var(--space-20); border-radius: var(--radius-card); background: var(--surface-card); display: grid; gap: var(--space-16); }
html:root body :is(.pf-av, .cc-av) { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--fill-subtle); color: var(--text-primary);
  font-size: var(--text-title-2-size); font-weight: var(--text-title-2-weight); }
html:root body :is(.pf-av, .cc-av) img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
/* Holdings in place of a photo (home-c.js HOLD): the frame splits into one slice per holding, largest first,
   each a full-bleed flag or a metal mark on its own tint, so the tile reads as boldly as a portrait */
html:root body :is(.xt-ph, .xd-ph, .xv-av, .pf-av, .cc-av).is-hold { display: flex; align-items: stretch; padding: 0; gap: 2px; }
html:root body .hm { position: relative; flex: 1; min-width: 0; display: grid; place-items: center; overflow: hidden; background: var(--on-fill-2);
  font-size: 34px; line-height: 1; /* lint-ok font/family: commodity glyphs must render as colour emoji, not Pretendard */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
html:root body .hm > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
html:root body .hm:is(.is-coin, .is-card) > img { position: static; width: 40px; height: auto; }
html:root body .hm.is-coin > img { border-radius: 50%; }
html:root body .xt-ph .hm:is(.is-coin, .is-logo) { justify-items: start; padding-left: var(--space-20); }
html:root body .xt-ph .hm.is-card { justify-items: start; padding-left: var(--space-12); }
/* coins: stacked discs floating on the tile, like the cards */
html:root body .hm.is-coins { background: none; display: flex; align-items: center; padding-left: var(--space-16); }
html:root body .hm.is-coins > img { position: static; flex: none; width: 52px; height: 52px; border-radius: 50%; box-shadow: var(--shadow-md); }
html:root body .hm.is-coins > img:only-child { width: 60px; height: 60px; }
html:root body .hm.is-coins > img + img { margin-left: -24px; }
html:root body .xt-ph .hm.is-coins:has(> img:nth-child(3)) { padding-left: var(--space-12); }
html:root body .xt-ph .hm.is-coins:has(> img:nth-child(3)) > img { width: 44px; height: 44px; }
html:root body .xt-ph .hm.is-coins:has(> img:nth-child(3)) > img + img { margin-left: -20px; }
html:root body .xd-ph .hm.is-coins { justify-content: center; padding-left: 0; }
html:root body .xd-ph .hm.is-coins > img { width: 96px; height: 96px; }
html:root body .xd-ph .hm.is-coins > img + img { margin-left: -40px; }
html:root body :is(.xv-av, .pf-av, .cc-av) .hm.is-coins { padding: 0; justify-content: center; }
html:root body .xv-av .hm.is-coins > img { width: 100%; height: 100%; box-shadow: none; }
/* a card floats on the tile, tilted, as if laid down: no slice fill behind it */
html:root body .hm.is-card { background: none; overflow: visible; }
html:root body .hm.is-card > img { width: 86px; max-width: none; border-radius: var(--radius-xs); transform: rotate(-12deg) translate(-6px, 10px); box-shadow: var(--shadow-md); }
html:root body .xt:hover .hm.is-card > img { transform: rotate(-6deg) translate(-6px, 4px); }
html:root body .hm.is-card > img { transition: transform .3s var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { html:root body .hm.is-card > img { transition: none; } }
html:root body .hm.is-logo { justify-items: start; padding-left: var(--space-12); }
html:root body .hm.is-logo > img { position: static; width: min(84px, 80%); max-height: 44%; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
html:root body .xd-ph .hm.is-logo { justify-items: center; padding-left: 0; }
html:root body .xd-ph .hm.is-logo > img { width: min(200px, 60%); }
html:root body .xv-av .hm.is-logo { padding-left: 0; justify-items: center; }
html:root body .xv-av .hm.is-logo > img { width: 80%; }
html:root body .xv-i[aria-current="true"] .hm.is-logo > img { filter: brightness(0); } /* the selected row is light */
html:root body .xd-ph .hm { font-size: 48px; }
html:root body .xd-ph .hm.is-coin > img { width: 72px; }
html:root body .xd-ph .hm.is-card > img { width: 62%; max-width: 220px; border-radius: var(--radius-m); transform: rotate(-8deg); }
html:root body .xv-av.is-hold .hm { font-size: 20px; }
html:root body .xv-av .hm:is(.is-coin, .is-card) > img { width: 100%; border-radius: 0; max-width: none; }
html:root body .xv-av .hm.is-card > img { width: 170%; transform: none; box-shadow: none; }
html:root body .xv-av .hm.is-card { overflow: hidden; }
html:root body .hm-more { position: absolute; left: var(--space-4); bottom: var(--space-4); padding: 0 var(--space-4); border-radius: var(--radius-s); background: var(--surface-inverse); color: var(--on); }
/* Portraits with a measured face (home-c.js FACES: cy, fh, ar). Wide frames (tile, matchup) size the photo so the face is
   --t of the frame's height, never wider than the frame; any spare width falls in the frame's fade. Round avatars always
   fill. The face centre then sits at --fy of the frame, without leaving a gap above or below. */
html:root body :is(.xt-ph, .xd-ph, .xv-av, .pf-av, .cc-av):has(> img[data-f]) { container-type: size; --fy: .5; --t: .78; }
html:root body .xd-ph:has(> img[data-f]) { --t: 9; } /* matchup halves always fill, so the two photos meet at the VS seam */
html:root body :is(.xv-av, .pf-av, .cc-av):has(> img[data-f]) { position: relative; --fy: .48; --t: 9; }
html:root body :is(.xt-ph, .xd-ph, .xv-av, .pf-av, .cc-av) > img[data-f] { --w: min(100cqw, 100cqh * var(--t) / var(--fh) * var(--ar));
  position: absolute; inset: auto; left: 0; width: var(--w); height: auto; aspect-ratio: var(--ar); max-width: none; object-fit: fill;
  top: clamp(calc(100cqh - var(--w) / var(--ar)), calc(var(--fy) * 100cqh - var(--cy) * var(--w) / var(--ar)), 0px); }
html:root body .xd-b .xd-ph > img[data-f] { left: auto; right: 0; }
/* a photo narrower than its frame fades out on its own inner edge, so no hard line shows */
html:root body .xt-ph > img[data-f] { -webkit-mask-image: linear-gradient(90deg, var(--text-primary) 55%, transparent); mask-image: linear-gradient(90deg, var(--text-primary) 55%, transparent); }
html:root body .pf-tags { display: flex; flex-wrap: wrap; gap: var(--space-8); }
html:root body .pf-tag { height: 28px; padding: 0 var(--space-8); border-radius: var(--radius-xs); display: inline-flex; align-items: center; background: var(--fill-subtle); font-weight: var(--text-headline-weight); }
html:root body .pf-name { margin-top: var(--space-8); }
html:root body .pf-id > .hc-co { margin-top: var(--space-4); }
html:root body .pf-note { margin-top: var(--space-8); }
html:root body .pf-info { padding-top: var(--space-16); box-shadow: inset 0 1px 0 var(--stroke-separator); }
html:root body .pf-info dl { margin-top: var(--space-8); display: grid; gap: var(--space-8); }
html:root body .pf-info dl div { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-8); }
html:root body .pf-act { margin-top: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-8); }
html:root body .pf-btn { all: unset; cursor: pointer; box-sizing: border-box; height: 32px; padding: 0 var(--space-12); border-radius: var(--radius-s); display: inline-flex; align-items: center;
  background: var(--fill-subtle); color: var(--text-primary); font-size: var(--text-footnote-size); font-weight: var(--text-headline-weight); }
html:root body .pf-btn:hover { background: var(--fill-default); }
html:root body .pf-btn:focus-visible { outline: var(--stroke-width-focus) solid var(--focus-ring); outline-offset: 2px; }
/* ---- result: side by side below the report ---- */
html:root body .hc-compare { margin-top: var(--space-64); padding: var(--space-64) 0; border-image: conic-gradient(var(--bg-base) 0 0) fill 0 / / 0 100vmax; }
html:root body .cmp-in .hc-head > .hc-t1 { margin-top: var(--space-4); }
html:root body .cmp-in .hc-head > .hc-co { margin-top: var(--space-8); }
html:root body .cmp-pick { margin-top: var(--space-24); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
html:root body .cmp-pick .cmp-mine.ce-search { width: auto; max-width: none; margin-top: 0; justify-self: stretch; }
@media (min-width: 640px) { html:root body .cmp-pick { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } html:root body .cmp-lb { grid-column: 1 / -1; } }
/* while the engine reads the new right-hand wallet: its steps float over the last result, on the light page */
html:root body .cmp-body { position: relative; min-height: 360px; }
html:root body .cmp-ov { --on: var(--text-primary); --on-2: var(--text-secondary); --on-fill-2: var(--fill-default);
  position: absolute; inset: calc(var(--space-8) * -1); z-index: 3; display: grid; justify-items: center; align-content: start; padding: var(--space-48) var(--space-24);
  border-radius: var(--radius-card); background: color-mix(in srgb, var(--surface-card) 84%, transparent); -webkit-backdrop-filter: var(--blur-thin); backdrop-filter: var(--blur-thin); }
html:root body .cmp-ov .ck { margin: 0; width: 100%; }
/* a picker in the lookup field's clothes: same fill, height and focus; Phosphor caret in its own box */
html:root body .hc-select { display: grid; align-items: center; height: 56px; border: 1px solid transparent; border-radius: var(--radius-l); background: var(--bg-grouped);
  transition: background var(--motion-release) var(--ease-standard), border-color var(--motion-release) var(--ease-standard); }
html:root body .hc-select > * { grid-area: 1 / 1; }
html:root body .hc-select select { all: unset; grid-area: 1 / 1; display: block; box-sizing: border-box; width: 100%; height: 100%; line-height: 54px; padding: 0 calc(var(--space-16) + 28px) 0 var(--space-16); cursor: pointer;
  font-size: var(--text-body-size); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html:root body .hc-select .icon { justify-self: end; margin-right: var(--space-16); width: 20px; height: 20px; color: var(--text-secondary); pointer-events: none; }
html:root body .hc-select:hover { background: color-mix(in srgb, var(--text-primary) 6%, var(--bg-grouped)); }
html:root body .hc-select:focus-within { background: var(--surface-card); border-color: var(--stroke-strong); outline: 4px solid color-mix(in srgb, var(--focus-ring) 22%, transparent); }
html:root body .cmp-cols { margin-top: var(--space-32); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
html:root body .cc { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
html:root body .cc .cc-av { margin-bottom: var(--space-8); width: 72px; height: 72px; }
html:root body .cc-n { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .hc-compare .hc-gr { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--space-8); border-radius: var(--radius-xs); font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); }
html:root body .hc-compare .hc-gr.prime { background: color-mix(in srgb, var(--success-fill) 20%, transparent); color: var(--success-text); }
html:root body .hc-compare .hc-gr.near { background: var(--info-bg); color: var(--info-text); }
html:root body .hc-compare .hc-gr.sub { background: color-mix(in srgb, var(--warning-fill) 30%, transparent); color: var(--text-primary); }
html:root body .hc-compare .hc-gr.high { background: var(--error-bg); color: var(--error-text); }
html:root body .cmp-ghost { margin-top: var(--space-32); display: grid; gap: var(--space-16); }
html:root body .cmp-ghost .cg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); }
html:root body .cmp-ghost .cg-sc { height: 120px; }
@media (min-width: 960px) {
  html:root body .pf-card { padding: var(--space-32); grid-template-columns: 112px minmax(0, 1fr) 360px; column-gap: var(--space-32); align-items: start; }
  html:root body .pf-av { width: 112px; height: 112px; }
  html:root body .pf-info { padding: 0 0 0 var(--space-32); box-shadow: inset 1px 0 0 var(--stroke-separator); }
}

/* side by side, round 2: the two scores as pins on 300–940 (the span between them shaded), one verdict line, then each
   factor as a mirrored row — left wallet's bar grows left, right wallet's grows right, the factor and the gap in the
   middle, the higher side in full ink. Comparing reads across one row instead of down two columns. */
html:root body .cmp-gap { position: relative; margin-top: var(--space-32); height: 44px; }
html:root body .cmp-bands { position: absolute; left: 0; right: 0; bottom: 8px; height: 4px; display: flex; gap: var(--space-2); }
html:root body .cmp-bands i { border-radius: 2px; }
html:root body .cmp-span { position: absolute; bottom: 7px; height: 6px; border-radius: 3px; background: var(--text-primary); opacity: .2; }
html:root body .cmp-pin { position: absolute; bottom: 0; transform: translateX(-50%); display: grid; justify-items: center; }
html:root body .cmp-pin b { padding: var(--space-2) var(--space-8); border-radius: var(--radius-xs); background: var(--text-primary); color: var(--text-on-inverse); font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); }
html:root body .cmp-pin::after { content: ""; width: 2px; height: 14px; margin-top: var(--space-2); background: var(--text-primary); }
html:root body .cmp-pin.b b { background: color-mix(in srgb, var(--text-primary) 45%, var(--bg-base)); }
html:root body .cmp-pin.b::after { background: color-mix(in srgb, var(--text-primary) 45%, var(--bg-base)); }
html:root body .cmp-gap:has(.cmp-pin.up) { height: 68px; }
html:root body .cmp-pin.up::after { height: 38px; }
html:root body .cmp-verdict { margin-top: var(--space-16); padding: var(--space-16); border-radius: var(--radius-m); background: var(--bg-grouped); color: var(--text-secondary); }
html:root body .cmp-verdict b { color: var(--text-primary); font-weight: var(--text-headline-weight); }
html:root body .cmp-heads { margin-top: var(--space-32); padding-bottom: var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: var(--space-12); align-items: end; box-shadow: inset 0 -1px 0 var(--stroke-separator); }
html:root body .cmp-heads > :first-child { text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .cmp-heads > :nth-child(2) { text-align: center; }
html:root body .cmp-heads > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html:root body .cmp-rows .vr { display: grid; grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: var(--space-12); align-items: center; padding: var(--space-12) 0; }
html:root body .cmp-rows .vr + .vr { box-shadow: inset 0 1px 0 var(--stroke-separator); }
html:root body .cmp-rows .vv { min-width: 0; display: flex; align-items: center; gap: var(--space-8); color: var(--text-secondary); }
html:root body .cmp-rows .vv.win { color: var(--text-primary); }
html:root body .cmp-rows .vv b { flex: none; width: 28px; font-weight: var(--text-headline-weight); }
html:root body .cmp-rows .vv.l b { text-align: right; }
html:root body .cmp-rows .vb { flex: 1; height: 8px; border-radius: 4px; background: var(--fill-subtle); display: flex; overflow: hidden; }
html:root body .cmp-rows .vb.l { justify-content: flex-end; }
html:root body .cmp-rows .vb i { display: block; height: 100%; border-radius: 4px; background: color-mix(in srgb, var(--text-primary) 35%, var(--bg-base)); }
html:root body .cmp-rows .vv.win .vb i { background: var(--text-primary); }
html:root body .cmp-rows .vl { display: grid; justify-items: center; gap: var(--space-4); text-align: center; color: var(--text-secondary); }
html:root body .cmp-rows .vdiff { height: 20px; padding: 0 var(--space-8); border-radius: var(--radius-full); display: inline-flex; align-items: center; background: var(--fill-subtle); color: var(--text-primary);
  font-size: var(--text-caption-1-size); font-weight: var(--text-headline-weight); }
@media (max-width: 640px) {
  html:root body :is(.cmp-heads, .cmp-rows .vr) { grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); gap: var(--space-8); }
}
@media (min-width: 960px) {
  html:root body :is(.cmp-heads, .cmp-rows .vr) { grid-template-columns: minmax(0, 1fr) 176px minmax(0, 1fr); } /* the factor name on one line */
}