/* ---------- SP ☆12 difficulty tables ---------- */

/* No overflow clip: the display-settings popover may extend past a short table. */
.tier-panel { margin-top: 12px; }

.tier-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: var(--radius-lg);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background-color 140ms var(--ease);
}

.tier-panel[open] > .tier-summary { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }

.tier-summary::-webkit-details-marker { display: none; }

.tier-summary:hover { background: var(--surface-2); }

/* Collapsed-table peek at the observed lamp goals (same scope wording as the full cards). */
.tier-summary-goals {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tier-summary-goals small { font-size: var(--fs-meta); }

.tier-summary-goals span {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.tier-summary-goals span::before {
  content: "";
  align-self: center;
  width: 12px;
  height: 5px;
  border-radius: 2px;
  background: var(--lamp);
  box-shadow: 0 0 5px color-mix(in srgb, var(--lamp) 60%, transparent);
}

.tier-summary-goals b {
  font-family: var(--font-num);
  font-size: 18px;
  font-weight: 600;
}

.tier-summary-goals .is-easy { --lamp: #2fa345; color: #1d6b2b; }
.tier-summary-goals .is-hard { --lamp: #e03a4a; color: #a51e2c; }

.tier-panel[open] .tier-summary-goals { display: none; }

.tier-summary-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: var(--fs-control);
}

.tier-summary-action b { white-space: nowrap; }

.tier-summary-action i {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--ink-2);
  /* The shared chevron, optically centred (the ⌄ glyph sits on its baseline, low in the box). */
  background: var(--surface) var(--chevron) no-repeat center / 10px 6px;
  font-size: 0;
  font-style: normal;
  line-height: 1;
  transition: transform 180ms var(--ease);
}

.tier-panel[open] .tier-summary-action b { font-size: 0; }

.tier-panel[open] .tier-summary-action b::after {
  content: "表を閉じる";
  font-size: var(--fs-control);
}

.tier-panel[open] .tier-summary-action i { transform: rotate(180deg); }

.tier-panel[open][data-fold="closing"] .tier-summary-action b { font-size: var(--fs-control); }
.tier-panel[open][data-fold="closing"] .tier-summary-action b::after { content: none; }
.tier-panel[open][data-fold="closing"] .tier-summary-action i { transform: none; }

.tier-body { border-top: 1px solid var(--line); }

/* One row: the long-horizon goals on the left, the table switches and a folded
   display-settings popover on the right. */
.tier-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
}

.tier-body > .tier-controls { padding: 10px 16px 0; }

/* Both views reserve the same five-choice lane. The track stays at its natural
   width; switching views cannot change line wrapping or the settings baseline. */
.tier-lamp-slot { display: flex; align-items: center; width: 350px; max-width: 100%; flex: 0 0 auto; }
.tier-lamp-control { display: inline-flex; width: max-content; max-width: 100%; flex: 0 0 auto; padding: 5px; flex-wrap: nowrap; }
.tier-lamp-control button { flex: 0 0 auto; min-width: max-content; padding-inline: 6px; }
/* Every checkbox toggle in a controls row (縮小表示, 分割表示) centres its box on the label text. */
.tier-controls > .tier-date-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-control); white-space: nowrap; }

/* The split orientation note sits just left of the segment buttons (after the goals, which
   take the free width): it keeps its slot while AC is active and only turns invisible, so
   toggling the split adds no height, moves neither the controls nor the card grid, and an
   off note never leaves a hole at the row's far right. */
.tier-split-legend { color: var(--ink-3); font-size: var(--fs-micro); font-weight: 700; line-height: 1; white-space: nowrap; }
.tier-split-legend.is-off { visibility: hidden; }

.tier-options .options-popover-panel { width: 250px; }

.tier-options[open] > .options-popover-panel {
  position: absolute;
  z-index: 30;
  width: min(280px, calc(100vw - 44px));
  box-sizing: border-box;
  grid-template-columns: minmax(0, 1fr);
  max-height: max(70px, calc(100dvh - var(--region-sticky-top) - var(--region-head-h, 0px) - 130px));
  overflow: auto;
  overscroll-behavior: contain;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}

.tier-options .options-popover-panel > label,
.tier-cpi-control > label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-2);
  font-size: var(--fs-control);
  font-weight: 700;
}

.tier-options .tier-bp-field {
  justify-content: space-between;
  width: 100%;
}

.tier-controls input[type="number"] {
  width: 64px;
  height: 28px;
  padding: 0 7px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-num);
  font-size: var(--fs-body);
}

.tier-date-toggle input {
  width: 15px;
  height: 15px;
  margin: 0;
}

.tier-cpi-control {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tier-cpi-control select {
  height: 28px;
  max-width: 110px;
  padding: 0 26px 0 8px;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--ink);
  font-size: var(--fs-meta);
  font-weight: 700;
}

/* Observed lamp goals: two long-horizon counters, each lit in its lamp colour. Compact (no
   gauge) so the sticky controls row stays short; the observed denominator and scope line
   carry the coverage. */
.tier-lamp-progress {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.tier-lamp-progress[hidden] { display: none; }

.tier-lamp-goal {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  justify-content: start;
  column-gap: 6px;
  row-gap: 1px;
  min-width: 128px;
  padding: 3px 12px 4px 13px;
  border: 1px solid color-mix(in srgb, var(--lamp) 30%, var(--line));
  border-radius: 9px;
  color: var(--lamp-ink);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--lamp) 10%, transparent), transparent 70%),
    var(--lamp-tint);
  box-shadow: inset 3px 0 0 var(--lamp), -1px 0 8px -2px color-mix(in srgb, var(--lamp) 55%, transparent);
}

.tier-lamp-goal.is-easy { --lamp: #2fa345; --lamp-tint: #effaf1; --lamp-ink: #1d6b2b; }
.tier-lamp-goal.is-hard { --lamp: #e03a4a; --lamp-tint: #fef1f2; --lamp-ink: #a51e2c; }

.tier-lamp-goal small {
  grid-column: 1 / -1;
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1.2;
}

.tier-lamp-goal strong {
  font-family: var(--font-num);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}

.tier-lamp-goal em {
  grid-column: 2;
  align-self: baseline;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  font-style: normal;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.tier-lamp-scope {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  color: var(--ink-3);
  font-size: var(--fs-meta);
  font-weight: 500;
  line-height: 1.25;
}

.tier-lamp-scope b {
  color: var(--ink-2);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.tier-lamp-scope span { white-space: nowrap; }

.tier-table {
  display: grid;
  gap: 6px;
  padding: 10px 16px 16px;
}

.tier-row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  /* Rows far off screen skip rendering (the table holds hundreds of lit cards); a row keeps its
     last measured height, so scroll length and anchors stay put. */
  /* Keep app.js LIVE_MOTION_CONTAINERS in sync with this paint-contained row. */
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

/* Tier colour is the warm ordinal ramp (hotter = harder); CPI groups use their lamp basis.
   It lights the index bar and tints the header. */
.tier-row > header {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 8px 8px 8px 12px;
  border-right: 1px solid var(--line);
  color: var(--ink);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tier-color) 22%, transparent), color-mix(in srgb, var(--tier-color) 6%, transparent)),
    var(--surface-2);
  text-align: center;
}

.tier-row > header::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5px;
  background: var(--tier-color);
  box-shadow: 0 0 8px color-mix(in srgb, var(--tier-color) 70%, transparent);
}

.tier-row > header strong {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15;
}

.tier-row > header span {
  color: var(--ink-2);
  font-size: var(--fs-meta);
}

.tier-row.is-unranked {
  margin-top: 8px;
  border-style: dashed;
}

.tier-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  /* Card rows keep their own height: a region with few charts (whose label column can be
     taller than one card row, e.g. a CPI range in 縮小表示) leaves empty space instead of
     stretching its cards away from their peers' geometry. */
  align-content: start;
  gap: 6px;
  padding: 6px;
}

.tier-chart-card {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--lamp, #9aa3ad) 30%, var(--line));
  border-radius: 8px;
  background: var(--lamp-tint, #f2f4f6);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.tier-chart-card.lamp-fullcombo,
.tier-chart-card.lamp-perfect { background: var(--lamp-sheen-soft); }

.tier-chart-card.lamp-hard { border-color: color-mix(in srgb, var(--lamp) 42%, var(--line)); }

/* EX-HARD's pale gold would fade next to HARD's red: a gold rim and a controlled warm gradient.
   The gradient runs vertically so both card edges (the lamp bar and a right-edge badge) sit
   on the same tone. */
.tier-chart-card.lamp-exhard {
  border-color: color-mix(in srgb, #e0a200 72%, #ffffff);
  background: linear-gradient(180deg, #fffae6, #ffefb3 55%, #ffe58f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

/* FULL COMBO keeps its prismatic body but is framed, and barred, in its purple. */
.tier-chart-card.lamp-fullcombo {
  border-color: color-mix(in srgb, #7c52d8 72%, #ffffff);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* The card's lamp bar: the colour a 地力表 reader scans for. */
.tier-chart-card::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: -1px;
  width: 5px;
  border-radius: 8px 0 0 8px;
  background: var(--lamp-sheen, var(--lamp, #9aa3ad));
  pointer-events: none;
}

.tier-chart-card.lamp-exhard { --tier-bar: linear-gradient(180deg, #ffe066, #f0b000); }
.tier-chart-card.lamp-fullcombo { --tier-bar: linear-gradient(180deg, #b39bff, #7a4fd6); }
.tier-chart-card:is(.lamp-exhard, .lamp-fullcombo)::before { background: var(--tier-bar); }

/* Split view, AC-only chart: the source colour moves to the right edge (AC's side). */
.tier-chart-card.is-accent-right::before {
  right: -1px;
  left: auto;
  border-radius: 0 8px 8px 0;
}

.tier-chart-card.is-accent-right button { padding-right: 13px; padding-left: 8px; }

/* Hover feedback stays inside the card's own box. An outer drop shadow (8px blur, 2px down)
   reached across the 6px grid gap into the next card's transparent rounded corner and, with
   its transition, flashed there on every hover in/out — the lower-left flicker seen on the
   card to the right of the pointer. */
.tier-chart-card:hover {
  border-color: color-mix(in srgb, var(--lamp, #9aa3ad) 60%, var(--line));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lamp, #9aa3ad) 30%, transparent);
}

/* A lamp reached inside the period lights the whole card: light pours from its lamp bar
   across the card, the rim glows and the card throws light onto the table. Held lamps keep
   the flat tinted card, so the newly lit ones read as switched on. */
.tier-chart-card.has-period-update {
  border-color: color-mix(in srgb, var(--lamp) 80%, #ffffff);
  background:
    radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--light, var(--lamp)) 26%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%),
    var(--lamp-tint);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--lamp) 45%, transparent),
    0 0 7px color-mix(in srgb, var(--light, var(--lamp)) 60%, transparent),
    0 0 18px color-mix(in srgb, var(--light, var(--lamp)) 30%, transparent);
}

.tier-chart-card.lamp-fullcombo.has-period-update,
.tier-chart-card.lamp-perfect.has-period-update {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%),
    var(--lamp-sheen-soft);
}

.tier-chart-card.has-period-update::before {
  width: 6px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    var(--tier-bar, var(--lamp-sheen, var(--lamp)));
  box-shadow: 0 0 6px var(--light, var(--lamp)), 0 0 14px color-mix(in srgb, var(--light, var(--lamp)) 55%, transparent);
}

.tier-chart-card button {
  display: grid;
  width: 100%;
  grid-template-rows: minmax(15px, auto) 21px 13px;
  gap: 3px;
  min-height: 60px;
  padding: 6px 8px 6px 13px;
  border: 0;
  border-radius: 8px;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

/* A card without history to open is not a disabled control visually: it keeps full priority
   unless the view mutes it explicitly (below), overriding the generic disabled-button fade. */
.tier-chart-card button:disabled { cursor: default; opacity: 1; }

/* Quieter only in the INF / 両方 comparison for a chart without INFINITAS history; AC-only
   display never mutes a chart for being absent from INF (the class is not set there). */
.tier-chart-card.is-muted button { opacity: 0.7; }

/* SPA titles stay ink; SPH and SPL titles take their difficulty colour for fast scanning,
   next to the explicit (SPH)/(SPL) label. */
.tier-chart-title {
  overflow: hidden;
  color: var(--ink);
  font-size: var(--fs-control);
  font-weight: 800;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier-chart-title.difficulty-h,
.tier-chart-title.difficulty-l { color: var(--difficulty-text); }

/* INF/AC correspondence mark: one glyph inside the title line, so the card never grows. */
.tier-correspondence-mark {
  display: inline-grid;
  place-items: center;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  border: 1px solid var(--ink-3);
  border-radius: 50%;
  color: var(--ink-2);
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  vertical-align: 1px;
  cursor: help;
}

.tier-correspondence-mark.is-distinct {
  border-color: var(--ink-2);
  background: var(--ink-2);
  color: var(--surface, #fff);
}

.tier-chart-title em {
  color: var(--difficulty-text, var(--difficulty, var(--ink-3)));
  font-size: var(--fs-micro);
  font-style: normal;
  font-weight: 800;
}

.tier-chart-status {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  width: 100%;
  min-width: 0;
  margin: 0;
}

.tier-chart-status .lamp-pill {
  --glow-scale: 0.7;
  min-height: 19px;
  font-size: var(--fs-micro);
}

.tier-current-cpi,
.tier-card-cpi {
  display: inline-flex;
  align-items: baseline;
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tier-current-cpi {
  min-height: 18px;
  align-items: center;
  padding: 0 5px;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.72);
}

/* The CPI figures carry their lamp basis: the held lamp's CPI and the table's basis CPI. */
.tier-current-cpi[class*="cpi-lamp-"],
.tier-card-cpi[class*="cpi-lamp-"] { color: var(--cpi); }

.tier-current-cpi[class*="cpi-lamp-"] { border-color: color-mix(in srgb, var(--cpi) 38%, transparent); }

.tier-current-cpi .metric-decimal,
.tier-card-cpi .metric-decimal { color: inherit; opacity: 0.75; }

.tier-card-cpi .metric-integer { font-weight: 700; }

.tier-bp-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  min-width: 58px;
  margin-left: auto;
  white-space: nowrap;
}

.tier-bp-wrap i {
  flex: 0 0 auto;
  color: var(--ink-2);
  font-size: var(--fs-meta);
  font-style: normal;
}

.tier-bp {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  font-weight: 600;
  white-space: nowrap;
}

.tier-chart-card time {
  color: var(--ink-3);
  font-family: var(--font-num);
  font-size: var(--fs-micro);
}

.tier-table.hide-dates time { display: none; }

/* When the lamp was reached inside the period: a small lit tag in the card's lamp. It takes the
   last-update date's lower-left slot (the same source date), overlapping the row's edges
   rather than reserving a second line. */
.tier-period-update {
  position: relative;
  z-index: 2;
  grid-column: 1;
  justify-self: start;
  align-self: center;
  margin: -2px 0 -2px -5px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 16px;
  padding: 0 6px;
  border: 1px solid color-mix(in srgb, var(--lamp) 72%, #000);
  border-radius: 999px;
  color: var(--lamp-on);
  background: linear-gradient(180deg, var(--lamp-hi), var(--lamp) 70%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--light, var(--lamp)) 55%, transparent);
  font-size: var(--fs-micro);
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
  pointer-events: none;
}

.tier-chart-card.lamp-exhard .tier-period-update,
.tier-chart-card.lamp-fullcombo .tier-period-update,
.tier-chart-card.lamp-perfect .tier-period-update { text-shadow: none; }

.tier-chart-card.lamp-fullcombo .tier-period-update { background: var(--lamp-sheen); }
.tier-chart-card.lamp-perfect .tier-period-update { background: var(--lamp-sheen); }

.tier-period-update time {
  display: inline !important;
  color: inherit !important;
  font-family: var(--font-num);
  font-weight: 700;
}

.tier-empty {
  padding: 28px;
  color: var(--ink-3);
  text-align: center;
}

/* INF / AC split card (両方 + 分割表示): the card is halved behind its content, INF on the left
   and AC on the right, each half tinted and barred in its own lamp; a dashed seam and the
   INF / AC tags on the two lamps name the sources. Same height as a single card. The title
   spans the whole card, so the seam starts below the title row (3px padding + 15px title + 2px
   gap = --tier-split-seam-top) and never runs through the chart name. */
.tier-chart-card.is-split { --tier-split-seam-top: 20px; background: var(--surface); }
.tier-chart-card.is-split::before { display: none; }

/* Split-context accent grammar, shared by both halves of a split card and by a one-sided card
   in the same view: one 5px stripe laid on the source's side and clipped by the card's 7px
   inner radius (INF left, AC right). --split-bar is the stripe (EX-HARD / FULL COMBO keep their
   vertical gradient bars) and --split-body the half's body (EX-HARD's vertical gradient). */
:is(.tier-chart-card, .tier-split-half) {
  --split-bar: linear-gradient(var(--lamp, #9aa3ad), var(--lamp, #9aa3ad));
  --split-body: var(--lamp-tint, #f2f4f6);
}

:is(.tier-chart-card, .tier-split-half).lamp-exhard {
  --split-bar: linear-gradient(180deg, #ffe066, #f0b000);
  --split-body: linear-gradient(180deg, #fffae6, #ffefb3 55%, #ffe58f);
}

:is(.tier-chart-card, .tier-split-half).lamp-fullcombo { --split-bar: linear-gradient(180deg, #b39bff, #7a4fd6); }
:is(.tier-chart-card, .tier-split-half):is(.lamp-fullcombo, .lamp-perfect) { --split-body: var(--lamp-sheen-soft); }

.tier-split-half {
  position: absolute;
  top: 0;
  bottom: 0;
  background: var(--split-body);
  pointer-events: none;
}

.tier-split-half.is-inf {
  left: 0;
  right: 50%;
  border-radius: 7px 0 0 7px;
  background: var(--split-bar) left top / 5px 100% no-repeat, var(--split-body);
}

.tier-split-half.is-ac {
  left: 50%;
  right: 0;
  border-radius: 0 7px 7px 0;
  background: var(--split-bar) right top / 5px 100% no-repeat, var(--split-body);
}

.tier-split-half.is-ac::before {
  content: "";
  position: absolute;
  top: var(--tier-split-seam-top);
  bottom: 0;
  left: 0;
  border-left: 1px dashed rgba(21, 27, 36, 0.28);
}

/* A compact split card is the title alone: nothing sits below it for a seam to divide. */
.tier-table.is-compact .tier-split-half.is-ac::before { display: none; }

/* A one-sided card in split context draws that half's accent exactly: same stripe, same inner
   radius, same inset from the rim — not the free-standing bar used outside the split view. */
.tier-chart-card.is-split-side::before,
.tier-chart-card.is-split-side.has-period-update::before {
  inset: 0;
  width: auto;
  border-radius: 7px;
  background: var(--split-bar) left top / 5px 100% no-repeat;
  box-shadow: none;
}

.tier-chart-card.is-split-side-ac::before,
.tier-chart-card.is-split-side-ac.has-period-update::before {
  background: var(--split-bar) right top / 5px 100% no-repeat;
}

/* A lit AC-side card pours its light from the AC (right) edge. */
.tier-chart-card.is-split-side-ac.has-period-update:not(.lamp-fullcombo, .lamp-perfect) {
  background:
    radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--light, var(--lamp)) 26%, transparent), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 45%),
    var(--lamp-tint);
}

/* Symmetric padding keeps the two status halves on the two background halves. The split card
   is four tight rows: title, INF | AC lamps, BP | CPI | BP, then the date at the bottom. */
.tier-chart-card.is-split button {
  position: relative;
  grid-template-rows: 15px 17px 12px 12px;
  gap: 2px;
  min-height: 0;
  padding: 3px 11px 4px;
}

.tier-chart-card.is-split .tier-chart-title { line-height: 15px; }

.tier-source-lamp {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  gap: 3px;
  min-width: 0;
}

.tier-source-lamp.is-ac { justify-content: flex-start; padding-left: 4px; }

.tier-source-lamp i {
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: 9px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.tier-chart-card.is-split .tier-chart-status {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.tier-chart-card.is-split .tier-source-lamp.is-ac { padding-left: 7px; }
.tier-chart-card.is-split .tier-chart-status .lamp-pill { min-width: 0; min-height: 17px; padding: 0 5px; overflow: hidden; text-overflow: ellipsis; }

/* BP flanks the CPI on one row: INF's under the INF half, AC's at the AC edge. */
.tier-card-meta.is-split-meta {
  grid-template-rows: 12px 12px;
  row-gap: 2px;
  align-items: center;
}

.tier-split-bp {
  grid-row: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--ink-2);
  font-family: var(--font-num);
  font-size: var(--fs-micro);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tier-split-bp i {
  margin-right: 1px;
  color: var(--ink-2);
  font-style: normal;
}

.tier-split-bp.is-inf { grid-column: 1; justify-self: start; }
.tier-split-bp.is-ac { grid-column: 3; justify-self: end; }
.tier-card-meta.is-split-meta > .tier-card-cpi { grid-row: 1; line-height: 12px; }
.tier-card-meta.is-split-meta > time,
.tier-card-meta.is-split-meta > .tier-observation-date,
.tier-card-meta.is-split-meta > .tier-period-update { grid-row: 2; grid-column: 1 / -1; line-height: 12px; }
.tier-card-meta.is-split-meta > .tier-period-update { min-height: 15px; margin-top: -2px; margin-bottom: -3px; }

.tier-bp.is-ac { color: var(--ink-3); }

/* v1.4.4: keep tier-card date, reference CPI, and update badge in stable slots. */
.tier-card-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  width: 100%;
  min-height: 13px;
  align-items: baseline;
  gap: 0;
  overflow: visible;
}

.tier-card-meta > time,
.tier-card-meta > .tier-observation-date {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
}

.tier-card-meta > .tier-card-cpi {
  grid-column: 2;
  justify-self: center;
}

.tier-table.is-compact .tier-row { grid-template-columns: 64px minmax(0, 1fr); }

.tier-table.is-compact .tier-row > header {
  min-height: 24px;
  padding: 3px 4px 3px 8px;
  line-height: 1;
}

.tier-table.is-compact .tier-row > header strong { font-size: var(--fs-meta); }

.tier-table.is-compact .tier-row > header span { font-size: var(--fs-unit); }

.tier-table.is-compact .tier-chart-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

.tier-table.is-compact .tier-chart-card button {
  min-height: 24px;
  grid-template-rows: auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 3px 7px 3px 10px;
}

/* Compact INF with 更新日 on: the update date is a small badge on the card's right edge. */
.tier-table.is-compact .tier-chart-card.has-compact-date button {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 5px;
}

.tier-table.is-compact .tier-chart-card.is-accent-right button { padding: 3px 10px 3px 7px; }

.tier-compact-date {
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  padding: 0 5px;
  border: 1px solid color-mix(in srgb, var(--lamp, #9aa3ad) 38%, var(--line));
  border-radius: 999px;
  color: var(--ink-2) !important;
  background: rgba(255, 255, 255, 0.78);
  font-family: var(--font-num);
  font-size: var(--fs-micro) !important;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.tier-compact-date.is-period-update {
  border-color: color-mix(in srgb, var(--lamp) 72%, #000);
  color: var(--lamp-on) !important;
  background: linear-gradient(180deg, var(--lamp-hi), var(--lamp) 70%);
  box-shadow: 0 0 6px color-mix(in srgb, var(--light, var(--lamp)) 55%, transparent);
}

.tier-chart-card:is(.lamp-fullcombo, .lamp-perfect) .tier-compact-date.is-period-update { background: var(--lamp-sheen); }

.tier-table.is-compact .tier-chart-title { line-height: 18px; font-size: 12px; }
.tier-table.is-compact .tier-chart-grid { gap: 3px; }
.tier-table.is-compact .tier-chart-card { min-height: 0; }
.tier-table.is-compact .tier-card-meta,
.tier-table.is-compact .tier-period-update { display: none !important; }

.tier-table.is-compact .tier-chart-title em,
.tier-table.is-compact .tier-chart-status { display: none !important; }