/*
 * Per-category identities for the product surfaces (owner round
 * 2026-09-22, spec .local/wf-catdesign/spec.md): the categories keep
 * the M11-B2 ledger language (mono notes, hairlines, breathing space) and
 * gain their own signature pairs — category color rides ONLY the 3px row
 * left bar (橫列式列表 2026-09-24: the card top bar retired with the grid)
 * and the 2px detail left rules, all through existing tokens, zero new
 * colors. Loads after product-detail.css; content.css, product-rows.css and
 * product-detail.css stay untouched by this sheet's identities.
 */

/* ---------- category color: the 3px row left bar only ---------- */

/* Attribute selector outranks .prod-row's own border-left-color; the hover
   override keeps the uniform --color-accent hover because this sheet loads
   later. Brokerages keep the ink default. */
.prod-rows[data-cat="credit-cards"] .prod-row { border-left-color: var(--color-accent); }
.prod-rows[data-cat="personal-loans"] .prod-row { border-left-color: var(--color-warning-fill); }
/* Tax loans (tax-loan plan §3.1/§3.5, 2026-09-24) join the loan family:
   same amber bar, figure color and rate-cell emphasis as personal loans. */
.prod-rows[data-cat="tax-loans"] .prod-row { border-left-color: var(--color-warning-fill); }
.prod-rows[data-cat="bank-accounts"] .prod-row { border-left-color: var(--color-info); }
.prod-rows[data-cat="virtual-bank-accounts"] .prod-row { border-left-color: var(--color-success); }
.prod-rows[data-cat] .prod-row:hover { border-left-color: var(--color-accent); }

/* ---------- category quick-nav (UX refine B1, 2026-09-24) ---------- */

/* One mono chip per locale-published category under the page head; the
   current list carries aria-current="page" with the segmented-control
   current vocabulary (controls.css locale link) on the shared .chip base. */
.cat-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.cat-nav .chip[aria-current="page"] {
  font-weight: var(--weight-semibold);
  background: var(--color-accent-soft);
}

/* The card-era signature blocks, feature-row hairlines, kv hit marker and
   the big-figure rules retired with the grid (橫列式列表 2026-09-24): the
   signature reads as inline pairs and the feature rows as one run on the
   row's third line — their styles moved to product-rows.css (.pair,
   .pair--hit, .feat-*, .sig-scope, .mk-tokens, .mk-zero, .loan-apr b at
   pair scale). */

/* ---------- 賣點凸顯層 grade (owner round 2026-09-22) ----------
   The signature lead pair carries bold + the category's signature color:
   loans amber, brokerages ink. Text-grade tokens only (each has a dark-mode
   remap in tokens.css); the amber fill stays exclusive to the 3px left bar.
   Highlight = type and color, never a filled block. */
.prod-rows[data-cat="personal-loans"] .loan-apr b { color: var(--color-warning); }
.prod-rows[data-cat="tax-loans"] .loan-apr b { color: var(--color-warning); }
/* Brokerages keep the ink default: zero legs read bold ink, their offer
   band tag signs in ink while the band text keeps the coral offer line. */
.prod-rows[data-cat="brokerages"] .offer-tag { color: var(--color-text); }

/* ---------- detail: loan borrowing reminder (list page too) ---------- */

.loan-reminder { margin: 0.6rem 0 0; font-size: 0.7rem; color: var(--color-text-muted); }
/* Review round 2: the reminder line left mono — the mono stack has no CJK
   glyphs, so zh rendered sans while en rendered the whole sentence
   typewriter; the body family reads the same in both locales. */

/* ---------- detail: credit-card rewards ledger (own section) ---------- */

/* The 2px accent left rule is the card category's detail signature, same
   hand as .detail-fit li (product-detail.css). */
.rate-ledger { border-left: 2px solid var(--color-accent); margin-top: 0.4rem; }
/* Review round 2: a two-column grid (figure | scope) keeps adjacent rows in
   one shape — flex-wrap dropped a long scope whole beneath its figure while
   short scopes stayed inline. Scope-only rows span both columns. */
.rate-row { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: baseline; padding: 0.5rem 0 0.5rem 0.9rem; border-bottom: 1px dashed var(--color-border); }
.rate-row:last-child { border-bottom: 0; }
.rate-row > .scope:only-child { grid-column: 1 / -1; }
.rate { font-family: var(--font-mono); font-size: 1.35rem; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.rate-row .scope { font-size: 0.92rem; line-height: 1.55; }

/* ---------- detail: loan lead figures (oversized fact cells) ---------- */

.facts .v.v--lead { font-size: 1.6rem; line-height: 1.25; }

/* ---------- detail: rate-type key-facts emphasis (intro round 2026-09-22) ----------
   The rate cells a reader must not miss carry v--rate on a data-cat grid —
   the SAME emphasis vocabulary as the list-card 賣點凸顯層 above: semibold
   type + the category's signature color (text-grade tokens, dark remaps in
   tokens.css), never a filled block. The loan rate stays the oversized lead;
   non-lead rate cells step up one size so 利率 reads first. */
.facts .v.v--rate:not(.v--lead) { font-size: 1.15rem; line-height: 1.3; }
.facts[data-cat="credit-cards"] .v.v--rate { color: var(--color-accent-text); }
.facts[data-cat="personal-loans"] .v.v--rate { color: var(--color-warning); }
.facts[data-cat="tax-loans"] .v.v--rate { color: var(--color-warning); }
.facts[data-cat="bank-accounts"] .v.v--rate { color: var(--color-info); }
.facts[data-cat="virtual-bank-accounts"] .v.v--rate { color: var(--color-success); }
/* Brokerages keep the ink default, same as their zero-commission grade:
   the commission figure reads bold ink, not a color. */
.facts[data-cat="brokerages"] .v.v--rate { color: var(--color-text); }

/* A pending always-on cell (品類欄位統一 2026-09-24): muted regular text at
   the cell's normal type size — same frame, same height, clearly not a
   value. Pending cells never carry v--lead/v--rate, so no emphasis rule
   reaches them. */
.facts .v.v--pending { color: var(--color-text-muted); font-weight: var(--weight-regular); }

/* ---------- detail: bank opening list (conditions, not steps) ---------- */

.open-list { border: 1px solid var(--color-border-strong); }
.open-row { display: flex; gap: 0.6rem; padding: 0.55rem 0.9rem; border-bottom: 1px dashed var(--color-border); }
.open-row:last-of-type { border-bottom: 0; }
.open-row > span { font-family: var(--font-mono); color: var(--color-text-muted); }
.open-row p { margin: 0; font-size: 0.92rem; line-height: 1.55; }

/* ---------- detail: brokerage per-market fee table ---------- */

/* The horizontal variant of .facts: three ledger columns, hairline row
   separation, ink left rule (the brokerage detail signature). */
.mktable { border: 1px solid var(--color-border-strong); border-left: 2px solid var(--color-text); margin-top: 1.2rem; }
.facts-group .mktable:only-child { margin-top: 0; }
.mktable-h, .mktable-r { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 0.4rem 1rem; align-items: baseline; padding: 0.5rem 0.9rem; }
.mktable-h {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-strong);
}
.mktable-r { border-bottom: 1px dashed var(--color-border); }
.mktable-r:last-child { border-bottom: 0; }
.mktable-r > span:first-child { font-family: var(--font-mono); font-size: 0.85rem; }
.mktable-r > span:nth-child(2) { font-size: 0.92rem; }
.mktable-r b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; justify-self: end; }
@media (max-width: 640px) {
  .mktable-h, .mktable-r { grid-template-columns: 3.2rem minmax(0, 1fr) auto; }
}

/* ---------- travel insurance (sixth category, plan §4.3, 2026-09-24) ----------
   Signature color = --color-danger, the only remaining token with a dark
   remap (tokens.css) — PENDING OWNER SIGN-OFF per plan §4.3; on veto it
   retreats to --color-info (shared with traditional accounts). The row
   joins the existing 3px left-bar system, the medical figure reuses the
   loan-apr hand, and the coverage table is the mktable's two-column ledger
   with the danger left rule as the category's detail signature. */
.prod-rows[data-cat="travel-insurance"] .prod-row { border-left-color: var(--color-danger); }
.prod-rows[data-cat="travel-insurance"] .travel-amount b { color: var(--color-danger); }
.facts[data-cat="travel-insurance"] .v.v--rate { color: var(--color-danger); }
.covtable { border: 1px solid var(--color-border-strong); border-left: 2px solid var(--color-danger); margin-top: 1.2rem; }
.covtable-h, .covtable-r { display: grid; grid-template-columns: minmax(0,1fr) max-content; gap: 0.4rem 1rem; padding: 0.5rem 0.9rem; }
.covtable-h { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border-strong); }
.covtable-r { border-bottom: 1px dashed var(--color-border); }
.covtable-r:last-child { border-bottom: 0; }
.covtable-r b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* 品類欄位統一 refine-2 2026-09-24: an unprojected coverage row keeps its
   slot with the 待查證 placeholder — muted regular, never the mono-bold
   figure voice (same vocabulary as .facts/.kv .v--pending). */
.covtable-r b.v--pending { color: var(--color-text-muted); font-weight: var(--weight-regular); }
/* Review 2026-09-24 (390px): a max-content figure column cannot shrink —
   the VHIS 成像 row measured 470px zh / 518px en (scrollWidth 527/575) and
   squeezed row labels to one character per line — so inside 640px both
   ledger columns become bounded shares and long figures wrap (the mktable's
   own 640px adjustment above). */
@media (max-width: 640px) {
  .covtable-h, .covtable-r { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
}

/* ---------- pet / home / VHIS insurance (trio plan §3.4, 2026-09-24) ----------
   The three new insurance categories join the systems travel joined: the 3px
   left bar, the loan-apr figure hand (pet-amount/home-amount/vhis-amount) and
   the rate-cell emphasis; the .covtable ledger above is shared as-is. The
   palette was exhausted at five signature colors (travel holds --color-
   danger, itself PENDING OWNER SIGN-OFF above), so per plan §3.4's
   zero-freeze-change fallback the trio ride existing text-grade tokens —
   pet with loans (amber), home with traditional accounts (navy), VHIS with
   virtual banks (green) — pending owner sign-off for three dedicated
   tokens; on approval only these nine lines remap. */
.prod-rows[data-cat="pet-insurance"] .prod-row { border-left-color: var(--color-warning-fill); }
.prod-rows[data-cat="home-insurance"] .prod-row { border-left-color: var(--color-info); }
.prod-rows[data-cat="vhis"] .prod-row { border-left-color: var(--color-success); }
.prod-rows[data-cat="pet-insurance"] .pet-amount b { color: var(--color-warning); }
.prod-rows[data-cat="home-insurance"] .home-amount b { color: var(--color-info); }
.prod-rows[data-cat="vhis"] .vhis-amount b { color: var(--color-success); }
.facts[data-cat="pet-insurance"] .v.v--rate { color: var(--color-warning); }
.facts[data-cat="home-insurance"] .v.v--rate { color: var(--color-info); }
.facts[data-cat="vhis"] .v.v--rate { color: var(--color-success); }