/*
 * The full-width product row band (橫列式列表 2026-09-24, plan
 * tmp/row-list): one product is one full-width row — the media slot on the
 * left, then three lines on the right (name / key-fact pairs / offers,
 * feature rows and the source line). The old 3-column card grid and its
 * card frames retired; hairline separation between rows continues the
 * ledger language, the category color rides a 3px left bar per row, and
 * every value resolves through the frozen design tokens. Loaded after
 * content.css and before product-detail.css, so category.css keeps the
 * last word on the per-category bar colors.
 */

/* ---------- the row band ---------- */

/* Hairline scale (排版盤點 2026-09-25 ②, site-wide rule): 1px everywhere;
   solid = between records (this list's row border-bottom), dashed = within
   one record (the detail .facts/.rate-row rows, category.css). Anyone adding
   a line follows this split. */
/* Top hairline opens the band (the framed filter grid sits above it);
   each row closes itself with a bottom hairline. */
.prod-rows { border-top: 1px solid var(--color-border); }
.prod-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 1.5rem;
  align-items: start; /* the media tops the name line */
  padding: 2rem 0 2rem 1.2rem;
  border-left: 3px solid var(--color-text);
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.prod-row:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}
/* The hover hand stays the one token swap (accent), now on the left bar;
   no fills, no shadows — the ledger row never gains a background. */
.prod-row:hover { border-left-color: var(--color-accent); }

/* ---------- media slot (owner: 卡面放大一點點 = one --space-3 step) ---------- */

/* Credit-card cover: one fixed 6rem × 1.586 (ID-1) rectangle; the art fills
   it through the card-cover--img rule in product-detail.css. */
.prod-row-thumb { width: 8rem; aspect-ratio: 1.586; }
/* Institution logo slot: the slot is the fixed 5.25×2.625rem box (2:1) and
   the stored logo or monogram fills it — base .inst-logo sizes stay in
   content.css for the home author card and the detail head. */
.prod-row-thumb--inst { width: 7rem; height: 3.5rem; aspect-ratio: auto; }
.prod-row-thumb--inst .inst-logo { width: 100%; height: 100%; }
.prod-row-thumb--inst .inst-logo--mono { font-size: 1.05rem; }

/* ---------- line 1: name ---------- */

.prod-row .inst { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-text-muted); }
.prod-row-name {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.55rem;
  align-items: baseline;
}
.prod-row-name h2 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  text-wrap: balance; /* a rare two-line name splits evenly; one-line names are untouched */
}

/* ---------- line 2: key-fact pairs ---------- */

/* Every field is one inline pair (label + value); the signature pairs the
   category emits lead the line, the uniform kv pairs follow. The ｢·｣
   separator rides each pair after the first, so a wrapped line keeps its
   marks. Row-interior vertical scale (排版盤點 2026-09-25 ②, loosened by the
   density round 2026-09-25 ②③ — tokens.css is frozen, these are local
   constants): 0.3rem between wrapped lines of one logical line, 0.45rem
   before the next line block, 1.25rem of band padding above/below the row
   (640px steps down to 1.1rem / 0.4rem, see the narrow block below). */
.prod-row-facts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.1rem; /* density round 2026-09-25 ③: pair↔pair air, was 0.9rem */
  row-gap: 0.3rem;
  align-items: baseline;
  margin-top: 0.45rem; /* density round 2026-09-25 ③: line1→line2, was 0.3rem */
  line-height: 1.6; /* the ledger leading, density round 2026-09-25 ②: was 1.5 */
}
/* The pair is one atomic inline unit (排版盤點 2026-09-25 ③): flex keeps
   label and value on one line — a long value wraps inside its own box and
   the continuation hangs at the value's own start, never under the label.
   Do not turn this back into inline flow. */
.pair {
  display: flex;
  min-width: 0;
  max-width: 100%;
  column-gap: 0.35rem;
  align-items: baseline;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums; /* multi-segment number lines align digit for digit */
}
.prod-row-facts > .pair + .pair::before { content: "·"; color: var(--color-text-muted); }
.pair .k { color: var(--color-text-muted); }
/* Same pending hand the kv rows carried: the slot keeps its place, the
   value reads muted regular — never a fake figure. */
.pair .v--pending { color: var(--color-text-muted); font-weight: var(--weight-regular); }
/* Signature-grade values read semibold; only the lead figures step up. */
.pair b { font-weight: var(--weight-semibold); }
/* Tabular-nums inventory (排版盤點 2026-09-25 D8): the digit-aligned hands
   today are — list rows .pair/.sig-scope/.loan-apr b/.feat-row/.feat-rate
   (this sheet), detail .facts .v (product-detail.css), the .rate/.mktable-r b
   /.covtable-r b ledgers (category.css), the .count-line b head (content.css)
   and the home coverage .big (public.css). New number styles join this list. */
/* The lead figure hand (loans, travel/pet/home/VHIS) at pair scale — the
   1.5rem poster figure retired with the card grid (行內位 2026-09-24). */
.loan-apr b {
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.sig-scope { font-size: 0.7rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
/* Brokerage material: the mono market tokens keep their own voice; the
   零佣金 mark stays the ink semibold label (never muted). */
.mk-tokens { display: flex; flex-wrap: wrap; gap: 0.25rem 0.55rem; min-width: 0; overflow-wrap: anywhere; font-family: var(--font-mono); font-size: 0.82rem; font-weight: var(--weight-medium); }
.mk-zero { flex-shrink: 0; }
.mk-zero { color: var(--color-text); font-weight: var(--weight-semibold); letter-spacing: 0.06em; }

/* Filter hit marker (行式 refine 2026-09-24, pair adaptation): the matched
   pair's label turns ink and its value carries the 1px coral underline —
   one restrained mark on the straight pair line, no fills, no frames.
   Pending pairs never hit. */
.pair--hit .k { color: var(--color-text); }
.pair--hit > span:last-child {
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

/* ---------- line 3: offers, features, source ---------- */

.prod-row-extra {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1.1rem; /* density round 2026-09-25 ③, mirrors the fact line */
  row-gap: 0.3rem;
  align-items: baseline;
  margin-top: 0.45rem; /* density round 2026-09-25 ③: line2→line3, was 0.3rem */
  line-height: 1.6; /* same ledger leading as the fact line above */
}
/* Ledger prose tone: the mono tag and the medium-bold title carry the
   emphasis; the plain line reads muted. */
.offer { font-size: 0.84rem; color: var(--color-text-muted); }

/* The plain offer clamps its verbatim text like the highlight band: the
   scan surface caps at 3 lines, the full text sits on the detail page. */
.offer-text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Highlight band: small category-signed tag (outline pill, mono) plus the
   verbatim title in medium ink, the nowrap deadline riding along. */
.offer-hl { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; align-items: baseline; }
.offer-until { white-space: nowrap; }
/* Child combinator on purpose: only the title <b> clamps. The descendant
   selector this replaces also hit the deadline's inner <b class="nw-date">,
   blockifying the date and splitting 「（至 / 日期 / ）」 onto three lines
   (排版盤點 2026-09-25 #1); the deadline rides .offer-until's nowrap instead. */
.offer-hl > b {
  color: var(--color-text);
  font-weight: var(--weight-medium);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* The deadline date keeps the ink medium voice the title carries — one
   unbreakable 「（至 <日期>）」 unit on the title's baseline. */
.offer-until b {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
.offer-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: var(--weight-medium);
  letter-spacing: 0.06em;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  padding: 0.02rem 0.4rem;
  color: var(--color-accent-text);
}

/* Band C feature rows inline (橫列 2026-09-24): the dashed row borders and
   padding retire with the card grid — the rows read as one more run on the
   third line, type sizes unchanged. */
.feat-rows {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.9rem;
  row-gap: 0.3rem;
  align-items: baseline;
}
/* One feature row is the detail rate-row's two-column hand (category.css
   .rate-row): the figure/label takes max-content, the description takes the
   rest — a long description wraps and hangs under itself instead of
   stranding the rate value alone at the line head (排版盤點 2026-09-25 #6).
   A value-only row spans both columns. The .feat-rows container above stays
   flex-wrap so short rows still sit side by side on the desktop. */
.feat-row {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 0.55rem;
  align-items: baseline;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}
.feat-row > .feat-v:only-child { grid-column: 1 / -1; }
.feat-k { color: var(--color-text-muted); }
.feat-v { color: var(--color-text); font-weight: var(--weight-regular); }
.feat-rate { font-family: var(--font-mono); font-weight: var(--weight-semibold); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* The source line sits at the row's end, right-aligned on the desktop and
   still right-aligned on its own wrapped line on narrow screens. */
.src-line { margin-left: auto; font-family: var(--font-mono); font-size: 0.7rem; color: var(--color-text-muted); }

.disclose { margin: 1.6rem 0 0; font-size: 0.78rem; color: var(--color-text-muted); }

/* ---------- narrow viewports (390 落點) ---------- */

/* The media slot shrinks and stays left-mounted: the row grid keeps its
   auto | 1fr shape at every width, only the slot sizes step down (logo back
   to today's 4.5×2.25rem footprint, monogram with it). The 640px line is
   the same breakpoint .filters stacks on (content.css). The density round
   2026-09-25 ②③ keeps its own decent step here: slightly less band padding
   and tighter pair gaps than the desktop, still looser than the pre-round
   values; the leading and the wrapped-line row-gaps carry over unchanged. */
@media (max-width: 640px) {
  .prod-row { padding: 1.5rem 0 1.5rem 0.8rem; column-gap: 1rem; }
  .prod-row-thumb { width: 6rem; }
  .prod-row-thumb--inst { width: 5.5rem; height: 2.75rem; }
  .prod-row-thumb--inst .inst-logo--mono { font-size: 0.95rem; }
  .prod-row-facts { column-gap: 0.95rem; margin-top: 0.4rem; }
  .prod-row-extra { column-gap: 0.95rem; margin-top: 0.4rem; }
  .prod-row .src-line { min-width: 0; overflow-wrap: anywhere; }
  .prod-row .src-line .nw-date { white-space: normal; }
}

@media (max-width: 375px) {
  .prod-row { column-gap: 0.75rem; }
  .prod-row-thumb { width: 5.25rem; }
  .prod-row-thumb--inst { width: 5rem; height: 2.5rem; }
}

/* Keep pending/error feedback outside the replaced region and reserve its line. */
.pagination-status { min-height: 1.6em; margin: 0.5rem 0; color: var(--color-text-muted); font-size: 0.85rem; }
[data-product-results]:focus { outline: none; }
[data-product-results][aria-busy="true"] .pager { cursor: progress; }