/* 換甚麼最值 (redeem.html): every way to spend RC on one HK$-per-RC scale.
   Built on style.css tokens; lists are CSS-grid rows that fold into two-line cards on phones,
   so nothing scrolls sideways. */

/* ---------- top picks for the chosen RC pool ---------- */
.rd-top { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.rd-pick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rd-pick.first { border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: linear-gradient(160deg, var(--red-soft), var(--surface) 70%); }
.rd-pick .rk { font-size: 12px; color: var(--ink-3); font-weight: 500; }
.rd-pick h3 { margin: 0; font-size: 15px; font-weight: 650; line-height: 1.35; }
.rd-pick .v { font: 700 24px/1.2 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--red); }
.rd-pick .v small { font-size: 12px; font-weight: 500; color: var(--ink-3); margin-left: 4px; letter-spacing: 0; }
.rd-pick p { margin: 0; font-size: 12.5px; color: var(--ink-2); }

/* ---------- ladder: one row per use, range bar + typical dot on a shared HK$/RC axis ---------- */
.rd-ladder { padding: 12px 16px 14px; position: relative; }
.ld-axis, .ld-row { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr) 64px; align-items: center; gap: 10px; }
.ld-axis { height: 22px; font: 500 11px/1 var(--num); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ld-axis .ld-track { height: 100%; }
.ld-axis .tk { position: absolute; top: 4px; transform: translateX(-50%); white-space: nowrap; }
.ld-axis .tk:last-child { transform: translateX(-100%); }
.ld-axis .tk:first-child { transform: none; }
.ld-group { font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; padding: 10px 0 2px; border-top: 1px solid var(--line); margin-top: 4px; }
.ld-group:first-of-type { border-top: 0; margin-top: 0; }
.ld-row { min-height: 30px; cursor: default; border-radius: 6px; }
.ld-row:hover { background: var(--surface-2); }
.ld-name { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.ld-name small { color: var(--ink-3); font-size: 11.5px; margin-left: 4px; }
.ld-track { position: relative; height: 20px; }
.ld-grid { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line); }
.ld-cash { position: absolute; top: -3px; bottom: -3px; width: 0; border-left: 1.5px dashed var(--ink-3); }
.ld-bar { position: absolute; top: 8px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--red) 45%, transparent); min-width: 4px; }
.ld-dot { position: absolute; top: 4px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--surface); }
.ld-row.low .ld-bar { background: color-mix(in srgb, var(--ink-3) 45%, transparent); }
.ld-row.low .ld-dot { background: var(--ink-3); }
.ld-row.na { opacity: .45; }
.ld-val { font: 600 13px/1 var(--num); font-variant-numeric: tabular-nums; text-align: right; padding-right: 4px; white-space: nowrap; }
.ld-row.low .ld-val { color: var(--ink-2); }
.ld-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--dark); color: var(--dark-ink); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; max-width: 300px; box-shadow: var(--shadow-2); }
.ld-tip b { font-variant-numeric: tabular-nums; }
.ld-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12px; color: var(--ink-3); padding: 8px 4px 0; }
.ld-legend i { display: inline-block; vertical-align: middle; margin-right: 5px; }
.ld-legend .lg-bar { width: 22px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--red) 45%, transparent); }
.ld-legend .lg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); }
.ld-legend .lg-cash { width: 0; height: 12px; border-left: 1.5px dashed var(--ink-3); }

/* ---------- grid lists (table semantics, no sideways scroll) ---------- */
.rd-list { font-size: 13.5px; }
.rd-row { display: grid; grid-template-columns: var(--cols); gap: 4px 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); align-items: start; }
.rd-row:last-child { border-bottom: 0; }
.rd-row.hd { font-size: 11.5px; font-weight: 500; color: var(--ink-3); padding-top: 11px; padding-bottom: 8px; align-items: end; }
.rd-row.na { color: var(--ink-3); }
.rd-row.na .c-val { color: var(--ink-3); font-weight: 500; }
.rd-row > * { min-width: 0; }
.rd-row .num { text-align: right; font-family: var(--num); font-variant-numeric: tabular-nums; }
.rd-row .c-name b { font-weight: 600; }
.rd-row .c-val { font: 700 15px/1.3 var(--num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rd-row .c-val.hi { color: var(--red); }
.rd-row .sub { display: block; font-size: 11.5px; color: var(--ink-3); font-weight: 400; margin-top: 2px; }
.rd-row .c-val .sub { font-family: var(--sans); }
.rd-row .c-txt { color: var(--ink-2); font-size: 13px; }
.rd-row .c-src { font-size: 12px; }
.rd-row .c-src a { display: inline-block; margin-right: 8px; white-space: nowrap; }
.rd-row .tagc { display: inline-block; font-size: 11px; font-weight: 500; padding: 0 6px; border-radius: 4px; background: var(--surface-2); color: var(--ink-2); margin-right: 6px; white-space: nowrap; vertical-align: 1px; }
.rd-row .tagc.live { background: var(--good-soft); color: var(--good); }
.rd-row .conf.med { background: var(--surface-2); color: var(--ink-3); }
.rd-row .src-inline { display: none; }

/* ---------- hotels ---------- */
.rd-hotels { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 12px; }
.rd-hotel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.rd-hotel h3 { margin: 0; font-size: 15px; font-weight: 650; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rd-hotel h3 .ratio { font-size: 12px; }
.rd-hotel .hv { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--ink-3); }
.rd-hotel .hv b { display: block; font: 700 18px/1.25 var(--num); font-variant-numeric: tabular-nums; color: var(--ink); }
.rd-hotel .hv b.hi { color: var(--red); }
.rd-hotel p { margin: 0; font-size: 13px; color: var(--ink-2); }
.rd-hotel ul { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--ink-2); }
.rd-hotel li { margin: 3px 0; }
.rd-hotel .ex { font-variant-numeric: tabular-nums; }
.rd-hotel .src { font-size: 12px; margin-top: auto; }
.rd-hotel .src a { margin-right: 8px; white-space: nowrap; }

@media (max-width: 1040px) {
  .rd-row { grid-template-columns: var(--cols-md, var(--cols)); }
  .rd-row .c-src.h-md { display: none; }
  .rd-row .src-inline { display: block; margin-top: 4px; font-size: 12px; }
  .rd-row .src-inline a { margin-right: 8px; white-space: nowrap; }
}
@media (max-width: 900px) {
  .rd-top { grid-template-columns: 1fr; }
  .rd-pick:not(.first) { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
  .rd-pick:not(.first) h3 { flex: 1 1 60%; }
  .rd-pick:not(.first) .v { font-size: 18px; }
  .rd-pick:not(.first) p { flex: 1 0 100%; }
}
/* phones: every row becomes "name · value" over a full-width detail line */
@media (max-width: 720px) {
  .rd-row { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 14px; }
  .rd-row.hd { display: none; }
  .rd-row .wide { grid-column: 1 / -1; }
  .rd-row .h-sm { display: none; }
  .rd-row .num.wide { text-align: left; }
  .ld-axis, .ld-row { grid-template-columns: minmax(0, 44%) minmax(0, 1fr) 52px; gap: 6px; }
  .ld-name small { display: none; }
}
@media (max-width: 440px) {
  .ld-axis, .ld-row { grid-template-columns: minmax(0, 40%) minmax(0, 1fr) 48px; }
  .ld-name { font-size: 12.5px; }
}
.rd-row .when-sm { display: none; }
@media (max-width: 720px) { .rd-row .when-sm { display: inline; color: var(--ink); } }
.ld-unit { font: 500 11px/1 var(--sans); color: var(--ink-3); padding-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .ld-axis .tk.odd { display: none; }
  .toolbar .sg small { display: none; }
}
.ld-bar.over { border-radius: 2px 0 0 2px; }
.ld-bar.over::after { content: ""; position: absolute; right: -7px; top: -4px; border: 6px solid transparent; border-left: 7px solid color-mix(in srgb, var(--red) 70%, transparent); border-right: 0; }
@media (max-width: 720px) {
  .ld-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; font-size: 12.5px; }
  .ld-row { min-height: 34px; padding: 2px 0; }
}
.rd-row .sub a { margin-right: 10px; white-space: nowrap; }

/* ---------- 規則與加成動態 (watch.js): bonus, news and official-page status from rcmax/watch.py ---------- */
.wt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.wt code { font: 500 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--surface-2); color: var(--ink-2); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.wt .sub { display: block; font-size: 12px; color: var(--ink-3); font-weight: 400; margin-top: 1px; overflow-wrap: anywhere; }
.wt-empty { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--ink-2); }
.wt-head { display: flex; flex-wrap: wrap; gap: 2px 18px; align-items: baseline; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.wt-head b { color: var(--ink); font-weight: 600; font-family: var(--num); font-variant-numeric: tabular-nums; }
.wt-head b.hot { color: var(--red); }
.wt-head .stale { color: var(--warn); font-weight: 500; }
.wt-tag { display: inline-block; font-size: 10.5px; font-weight: 600; line-height: 1.5; padding: 0 5px; border-radius: 4px; margin-left: 6px; vertical-align: 1px; background: var(--warn-soft); color: var(--warn); white-space: nowrap; }
.wt-tag.new { background: var(--red-soft); color: var(--red); }

/* bonus strip */
.wt-bonus { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 13px; }
.wt-bonus.on { background: linear-gradient(160deg, var(--red-soft), var(--surface) 75%); }
.wt-b { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 14px; align-items: baseline; }
.wt-b + .wt-b { margin-top: 10px; }
.wt-b b { font-size: 14.5px; font-weight: 650; }
.wt-pct { font: 700 26px/1.1 var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--red); white-space: nowrap; }
.wt-none { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; }
.wt-none b { font-size: 14px; font-weight: 600; }
.wt-outlook { margin: 3px 0 0; color: var(--ink-2); font-size: 12.5px; }
.wt-more { margin-top: 4px; font-size: 12.5px; }
.wt-more > summary { cursor: pointer; color: var(--accent); font-weight: 500; width: max-content; max-width: 100%; }
.wt-more p { margin: 4px 0 0; color: var(--ink-2); }
.wt-more .sub a { margin-right: 2px; }
.wt-hints { margin-top: 8px; padding: 8px 10px; border-radius: var(--r); background: var(--warn-soft); font-size: 12.5px; }
.wt-hints b { font-weight: 600; color: var(--warn); }
.wt-hints .sub { color: var(--ink-2); }

/* two columns: news | official pages */
.wt-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.wt-col { min-width: 0; padding-bottom: 6px; }
.wt-col + .wt-col { border-left: 1px solid var(--line); }
.wt-h { margin: 0; padding: 11px 16px 5px; font-size: 13px; font-weight: 650; display: flex; flex-wrap: wrap; gap: 0 10px; align-items: baseline; }
.wt-h span { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.wt-foot { margin: 0; padding: 6px 16px 8px; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; }

.wt-news { list-style: none; margin: 0; padding: 0; }
.wt-n { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0 10px; padding: 6px 16px; font-size: 13px; line-height: 1.45; }
.wt-n:hover { background: var(--surface-2); }
.wt-n time { font: 500 12px/1.65 var(--num); font-variant-numeric: tabular-nums; color: var(--ink-3); white-space: nowrap; }
.wt-n time small { display: block; font-size: 11px; line-height: 1.2; }
.wt-n a { color: var(--ink); overflow-wrap: anywhere; }
.wt-n a:hover { color: var(--accent); }
.wt-news:not(.all) .wt-n:nth-child(n+9) { display: none; }
.wt-all { display: block; margin: 2px 0 0 64px; }

.wt-gh { padding: 8px 16px 3px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); letter-spacing: .02em; }
.wt-p { border-top: 1px solid var(--line); }
.wt-gh + .wt-p { border-top: 0; }
.wt-row, .wt-p > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 7px 16px; font-size: 13px; line-height: 1.4; }
.wt-p > summary { cursor: pointer; list-style: none; }
.wt-p > summary::-webkit-details-marker { display: none; }
.wt-pn { min-width: 0; }
.wt-pn b { font-weight: 600; }
.wt-pn a { color: var(--ink); }
.wt-pn a:hover { color: var(--accent); }
.wt-pn .dot { vertical-align: 1px; }
.wt-pn .sub { padding-left: 12px; }
.wt-ps { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.wt-p.err a.wt-ps { color: var(--accent); font-weight: 600; }
.wt-p.chg { background: var(--warn-soft); }
.wt-p.chg .wt-ps { color: var(--warn); font-weight: 600; }
.wt-p.chg .wt-ps::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .15s; }
.wt-p.chg[open] .wt-ps::after { transform: rotate(-135deg) translateY(-1px); }
.wt-diff { padding: 0 16px 10px 28px; font-size: 12.5px; line-height: 1.5; }
.wt-diff ins, .wt-diff del { display: block; text-decoration: none; padding-left: 1.2em; text-indent: -1.2em; overflow-wrap: anywhere; }
.wt-diff ins { color: var(--good); }
.wt-diff del { color: var(--red); }
.wt-diff .meta { margin: 4px 0 0; color: var(--ink-3); font-size: 12px; }

@media (max-width: 900px) {
  .wt-cols { grid-template-columns: minmax(0, 1fr); }
  .wt-col + .wt-col { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .wt-head, .wt-bonus, .wt-h, .wt-n, .wt-row, .wt-p > summary, .wt-gh, .wt-foot, .wt-empty { padding-left: 14px; padding-right: 14px; }
  .wt-diff { padding-left: 26px; padding-right: 14px; }
  .wt-pct { font-size: 22px; }
}