/* How-to guide: static replicas of the application's subscription card, window view and capacity charts.
   Tokens and class vocabulary follow the application (docs/design/paper-atlas.md); IBM Plex only, sentence case, one framed block per figure. */
.howto {
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-figure: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --fs-1: 10px; --fs-2: 11px; --fs-3: 12px; --fs-4: 12.5px; --fs-5: 13.5px; --fs-6: 15px; --fs-7: 18px; --fs-8: 24px; --fs-9: 32px;
  --fw-medium: 500; --fw-semibold: 600; --ls-tight: -0.02em; --ls-figure: -0.04em;
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 20px; --s-10: 24px; --s-11: 32px;
  --r-card: 5px 12px 6px 10px / 10px 5px 11px 5px; --r-chip: 4px 8px 5px 7px; --r-bar: 3px 5px 2px 4px; --r-dot: 47% 53% 42% 58%;
  --rule: 1px dashed var(--line);
  --faint: #6c7e7f; --sunk: #f1f4f4; --line: #d9e1e1; --line2: #b4c2c3; --violet: #71669d;
  --claude: #b8693a; --codex: #136d88; --gemini: #4a8763; --grok: #77868a; --hatch: rgba(255, 255, 255, 0.55);
  --tier-1: var(--ok); --tier-5: var(--accent); --tier-20: var(--violet);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .howto {
  --faint: #8399a0; --sunk: #1c2b31; --line: #34494f; --line2: #4f666d; --violet: #bdb3df;
  --claude: #e3a47c; --codex: #85d1e5; --gemini: #9ccfa8; --grok: #b7c3c5; --hatch: rgba(24, 37, 43, 0.5);
}

/* Page frame */
.howto-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; align-items: start; padding-block: 56px 96px; }
.howto-side { position: sticky; top: 28px; display: grid; gap: 22px; }
.howto-side h1 { font-size: 26px; line-height: 1.2; margin: 0; }
.howto-toc { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--pencil); counter-reset: toc; }
.howto-toc a { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; padding: 10px 0; border-bottom: 1px dashed var(--line); color: var(--muted); font-size: 14px; line-height: 1.35; }
.howto-toc a::before { counter-increment: toc; content: counter(toc); color: var(--accent); font-family: var(--font-figure); font-size: 13px; }
.howto-toc a:hover { color: var(--text); }
.howto-source { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.howto-source strong { color: var(--text); font-weight: 600; }
.howto-main { min-width: 0; display: grid; gap: 88px; }
.howto-intro p { max-width: 760px; margin: 14px 0 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.howto-intro h2 { font-size: 34px; line-height: 1.15; margin: 0; }
.howto-section { scroll-margin-top: 28px; }
.howto-section > header { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; align-items: baseline; margin-bottom: 26px; }
.howto-section > header h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.howto-no { color: var(--accent); font-family: var(--font-figure); font-size: 22px; font-weight: 500; }
.howto-section > header p { grid-column: 2; max-width: 760px; margin: 10px 0 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.howto-note { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.howto-note strong { color: var(--text); font-weight: 600; }
.howto-links { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 22px 0 0; padding: 0; list-style: none; }
.howto-links a { text-decoration: underline; text-underline-offset: .2em; }

/* Figure = one replica and its numbered callouts */
.hw-figure { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 0 64px; align-items: start; margin: 0; }
.hw-figure.is-wide { grid-template-columns: minmax(0, 1fr); gap: 28px 0; }
.hw-figure.is-wide .hw-callouts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.hw-replica { position: relative; min-width: 0; }
.hw-callouts { display: grid; margin: 0; padding: 0; list-style: none; align-content: start; }
.hw-callouts li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-top: 1px dashed var(--line2); font-size: 14px; line-height: 1.5; }
.hw-callouts li:first-child { border-top: 1px solid var(--pencil); }
.hw-figure.is-wide .hw-callouts li:nth-child(2) { border-top: 1px solid var(--pencil); }
.hw-callouts strong { display: block; font-weight: 600; color: var(--text); }
.hw-callouts p { margin: 2px 0 0; color: var(--muted); }
.hw-pin { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); color: var(--button-ink, #fff);
  font-family: var(--font-figure); font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0; }
.hw-pin.is-abs { position: absolute; z-index: 2; }
.hw-pin.is-inline { width: 16px; height: 16px; margin-left: 4px; font-size: 10px; vertical-align: 1px; }
.hw-caption { margin: 12px 0 0; color: var(--faint); font-size: 12.5px; }

/* The application's one framed block */
.hw-frame { padding: var(--s-9); border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); }
.hw-frame.is-bare { padding: 0; border: 0; background: transparent; }

/* Subscription card (SubscriptionCards.css) */
.hw-card { display: block; padding: var(--s-6) var(--s-7); border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); color: var(--text); line-height: 1.45; font-size: var(--fs-4); }
.sub-card-row { display: flex; align-items: center; gap: var(--s-3); min-width: 0; position: relative; }
.sub-card-row.is-value { align-items: baseline; gap: var(--s-4); margin-top: var(--s-3); }
.sub-card-row.is-meta { justify-content: space-between; gap: var(--s-5); margin-top: var(--s-3); font-size: var(--fs-3); color: var(--faint); }
.sub-card-row.is-meta > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub-card-row.is-meta > :first-child { flex: 0 0 auto; }
.sub-card-row.is-usage { justify-content: space-between; gap: var(--s-5); margin-top: var(--s-4); font-size: var(--fs-3); color: var(--muted); }
.sub-card-dot { width: 8px; height: 8px; flex: 0 0 8px; border-radius: var(--r-dot); }
.sub-card-name { font-size: var(--fs-5); font-weight: var(--fw-semibold); line-height: 1.3; min-width: 0; white-space: nowrap; }
.sub-card-plan { font-size: var(--fs-2); padding: 0 var(--s-3); border-radius: var(--r-chip); border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.sub-card-aside { margin-left: auto; font-size: var(--fs-2); color: var(--faint); white-space: nowrap; }
.sub-card-account { margin-top: var(--s-1); font-size: var(--fs-3); color: var(--muted); position: relative; }
.sub-card-pct { font-family: var(--font-figure); font-size: var(--fs-9); font-weight: var(--fw-medium); letter-spacing: var(--ls-figure); line-height: 1; white-space: nowrap; }
.sub-card-note { font-size: var(--fs-3); color: var(--muted); min-width: 0; white-space: nowrap; }
.sub-card-pace { margin-left: auto; font-family: var(--font-figure); font-size: var(--fs-4); font-weight: var(--fw-medium); white-space: nowrap; }
.sub-card-bar { display: block; position: relative; height: 7px; margin-top: var(--s-3); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-bar); overflow: hidden; }
.sub-card-bar > .is-fill { position: absolute; top: 0; bottom: 0; left: 0; }
.sub-card-bar > .is-elapsed { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.sub-card-money { color: var(--text); }
.sub-card-pool { margin-top: var(--s-4); padding-top: var(--s-3); border-top: var(--rule); min-width: 0; position: relative; }
.sub-card-pool-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); min-width: 0; }
.sub-card-pool-label { font-size: var(--fs-3); color: var(--muted); white-space: nowrap; }
.sub-card-pool-amount { font-size: var(--fs-6); font-weight: var(--fw-semibold); color: var(--violet); font-family: var(--font-figure); letter-spacing: var(--ls-figure); }
.sub-card-pool-aside { flex: none; font-size: var(--fs-3); color: var(--muted); white-space: nowrap; }
.sub-card-pool-bar { position: relative; display: block; height: 5px; margin-top: var(--s-2); background: var(--sunk); border: 1px solid var(--line); border-radius: var(--r-bar); overflow: hidden; }
.sub-card-pool-bar > i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--violet); }
.sub-card-pool-line { display: flex; justify-content: space-between; gap: var(--s-5); margin-top: var(--s-1); font-size: var(--fs-2); color: var(--faint); position: relative; }
.sub-card-pool-dots { display: inline-flex; gap: 3px; margin-right: var(--s-2); vertical-align: 1px; }
.sub-card-pool-dots > i { width: 7px; height: 7px; border-radius: var(--r-dot); background: var(--violet); }

/* KPI strip: an open row between dashed rules (index.css) */
.ui-kpi-strip { position: relative; display: grid; grid-template-columns: repeat(var(--kpi-columns, 4), minmax(0, 1fr)); border-block: var(--rule); }
.ui-kpi-cell { position: relative; padding: var(--s-5) var(--s-7) var(--s-6); min-width: 0; }
.ui-kpi-cell:first-child { padding-left: 0; }
.ui-kpi-cell + .ui-kpi-cell { border-left: var(--rule); }
.ui-eyebrow { font-size: var(--fs-3); font-weight: var(--fw-medium); line-height: 1.3; color: var(--muted); }
.ui-figure { font-family: var(--font-figure); font-weight: var(--fw-medium); letter-spacing: var(--ls-figure); font-variant-numeric: tabular-nums; }
.ui-kpi-value { font-size: var(--fs-9); line-height: 1.15; margin-top: var(--s-2); }
.ui-kpi-unit { font-size: var(--fs-6); color: var(--muted); font-weight: var(--fw-medium); letter-spacing: 0; }
.ui-kpi-caption { font-size: var(--fs-3); color: var(--muted); margin-top: var(--s-3); line-height: 1.5; }
.ui-kpi-caption .is-faint { color: var(--faint); }
.hw-track { position: relative; height: 6px; margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-bar); background: var(--sunk); }
.hw-track.is-thick { height: 8px; margin-top: 0; }
.hw-track > .is-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); }
.hw-track > .is-tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); }
.hw-track > .is-danger { position: absolute; top: 0; bottom: 0; left: 50%; right: 0; border-radius: inherit; background: var(--crit-soft); }
.hw-track > .is-dot { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: var(--r-dot); transform: translate(-50%, -50%); border: 2px solid var(--surface); }
.hw-rates { display: grid; grid-template-columns: 56px 1fr 78px; gap: var(--s-2) var(--s-4); align-items: center; margin-top: var(--s-4); font-size: var(--fs-3); }
.hw-rates > span:nth-child(3n + 1) { color: var(--muted); }
.hw-rates > div { height: 6px; border-radius: var(--r-bar); }

/* Chart */
.hw-chart { display: block; width: 100%; height: auto; font-family: var(--font-figure); overflow: visible; }
.hw-legend { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: var(--s-1) 0 0 44px; font-size: var(--fs-3); color: var(--muted); }
.hw-legend i { display: inline-block; vertical-align: middle; margin-right: 6px; }
.hw-legend .is-violet { color: var(--violet); }
.hw-pill { display: inline-flex; align-items: center; gap: var(--s-3); padding: var(--s-1) var(--s-4); border: 1px solid var(--line2); border-radius: var(--r-chip); background: var(--surface); font-size: var(--fs-3); font-weight: var(--fw-medium); line-height: 1.4; white-space: nowrap; }
.hw-pill.is-neutral { color: var(--muted); }
.hw-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); flex-wrap: wrap; margin-bottom: var(--s-6); }
.hw-head .title { font-size: var(--fs-6); font-weight: var(--fw-semibold); line-height: 1.2; }
.hw-head .meta { color: var(--muted); font-size: var(--fs-5); }
.hw-head .span { color: var(--faint); font-size: var(--fs-3); margin-left: var(--s-6); }
.hw-head .read { color: var(--faint); font-size: var(--fs-3); }

/* Aside panels (Liczniki, lokalny indeks) */
.hw-aside { display: grid; gap: var(--s-8); font-size: var(--fs-4); }
.hw-counters { position: relative; display: grid; grid-template-columns: 86px minmax(60px, 1fr) auto 72px; gap: var(--s-4) var(--s-5); align-items: center; margin-top: var(--s-4); font-size: var(--fs-4); }
.hw-counters > b { font-weight: var(--fw-semibold); white-space: nowrap; }
.hw-counters > b.is-sub { padding-left: 8px; }
.hw-counters .hw-track { margin-top: 0; height: 8px; }
.hw-counters .value { text-align: right; white-space: nowrap; font-family: var(--font-figure); letter-spacing: var(--ls-tight); }
.hw-counters .reset { color: var(--muted); white-space: nowrap; }
.hw-extra { position: relative; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); font-size: var(--fs-3); color: var(--muted); }
.hw-extra b { color: var(--text); font-weight: var(--fw-semibold); }
.hw-stat { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: var(--s-2) var(--s-5); align-items: baseline; padding: var(--s-4) 0; border-bottom: var(--rule); font-size: var(--fs-4); }
.hw-stat > :first-child { color: var(--muted); }
.hw-stat > .value { font-family: var(--font-figure); font-weight: var(--fw-medium); letter-spacing: var(--ls-figure); font-size: var(--fs-6); }
.hw-stat > .detail { grid-column: 2; min-width: 0; }
.hw-stack { display: flex; height: 6px; border: 1px solid var(--line); border-radius: var(--r-bar); overflow: hidden; background: var(--sunk); }
.hw-mini { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-1); font-size: var(--fs-2); color: var(--muted); }

/* Capacity formula (section 4) */
.hw-formula { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-block: var(--rule); }
.hw-formula > div { position: relative; padding: var(--s-7) var(--s-8); min-width: 0; }
.hw-formula > div:first-child { padding-left: 0; }
.hw-formula > div + div { border-left: var(--rule); }
.hw-formula .op { position: absolute; left: -11px; top: 50%; transform: translateY(-50%); z-index: 1; padding: 2px 4px; background: var(--bg); color: var(--faint); font-family: var(--font-figure); font-size: var(--fs-7); }
.hw-formula .label { color: var(--muted); font-size: var(--fs-3); font-weight: var(--fw-medium); }
.hw-formula .value { margin-top: var(--s-2); font-size: var(--fs-8); line-height: 1.2; }
.hw-formula .sub { margin-top: var(--s-2); color: var(--muted); font-size: var(--fs-3); line-height: 1.5; }
.hw-result { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-4) var(--s-9); margin-top: var(--s-9); }
.hw-result .value { font-size: var(--fs-9); line-height: 1.1; }
.hw-result .label { color: var(--muted); font-size: var(--fs-5); }

/* Cycle chart and tables */
.hw-cycles { margin-top: var(--s-4); }
.hw-matrix { width: 100%; margin-top: 28px; border-collapse: collapse; font-size: 14px; }
.hw-matrix caption { text-align: left; color: var(--muted); font-size: 13.5px; padding-bottom: 10px; }
.hw-matrix th, .hw-matrix td { padding: 9px 12px 9px 0; text-align: right; border-bottom: 1px dashed var(--line); white-space: nowrap; font-weight: 400; }
.hw-matrix th:first-child, .hw-matrix td:first-child { text-align: left; }
.hw-matrix thead th { border-bottom: 1px solid var(--pencil); color: var(--muted); }
.hw-matrix td { font-family: var(--font-figure); letter-spacing: var(--ls-tight); }
.hw-matrix td small { color: var(--faint); font-family: var(--font-sans); font-size: 12px; margin-left: 6px; }
.hw-matrix td.is-empty { color: var(--faint); }
.hw-matrix tr.is-story td, .hw-matrix tr.is-story th { background: var(--accent-soft); }

/* Provider comparison */
.hw-compare { width: 100%; border-collapse: collapse; font-size: 14px; }
.hw-compare th, .hw-compare td { padding: 14px 16px 14px 0; border-bottom: 1px dashed var(--line); text-align: left; vertical-align: top; font-weight: 400; }
.hw-compare thead th { border-bottom: 1px solid var(--pencil); color: var(--muted); font-size: 13px; padding-block: 10px; }
.hw-compare .provider { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; }
.hw-compare .provider i { width: 8px; height: 8px; border-radius: var(--r-dot); }
.hw-compare .plan { color: var(--muted); font-size: 13px; margin-top: 2px; }
.hw-compare .figure { font-family: var(--font-figure); font-size: 20px; font-weight: 500; letter-spacing: var(--ls-figure); line-height: 1.2; }
.hw-compare .figure.is-bound { color: var(--muted); }
.hw-compare .sub { display: block; margin-top: 3px; color: var(--faint); font-size: 12.5px; font-family: var(--font-sans); letter-spacing: 0; font-weight: 400; }
.hw-compare .bar { display: block; height: 6px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-bar); background: var(--sunk); overflow: hidden; }
.hw-compare .bar > i { display: block; height: 100%; }
.hw-compare .bar.is-bound > i { background-image: repeating-linear-gradient(115deg, transparent 0 3px, var(--hatch) 3px 4px); }
.hw-compare td.is-missing { color: var(--faint); }
.hw-compare tr.is-unavailable td { color: var(--faint); }

.hw-compare td.is-thin { color: var(--faint); }
.hw-compare td.is-thin .figure { font-weight: 400; }
.hw-compare td.is-stale { opacity: 0.55; }
.hw-compare .delta { display: inline-block; margin-top: 3px; font-size: 12px; font-weight: 600; font-family: var(--font-figure); }
.hw-compare .delta.is-down { color: var(--crit); }
.hw-compare .delta.is-up { color: var(--ok); }
.hw-compare .delta.is-flat { color: var(--muted); }
.hw-compare caption { text-align: left; color: var(--muted); font-size: 13px; padding-bottom: 12px; line-height: 1.5; }
.hw-compare .figure { font-size: 16px; }
.hw-compare th, .hw-compare td { padding-right: 10px; }
.hw-compare .sub { font-size: 11.5px; }
.hw-compare th:first-child { width: 18%; }
.hw-compare .figure { white-space: nowrap; }

/* Range bars: the spread of a period's cycles on one scale per row */
.hw-range { position: relative; display: block; height: 14px; margin-top: 6px; }
.hw-range::before { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1px; background: var(--line); }
.hw-range-span { position: absolute; top: 4px; height: 6px; border-radius: var(--r-bar); background: var(--accent-soft); border: 1px solid var(--accent); box-sizing: border-box; }
.hw-range.is-bound .hw-range-span { background-image: repeating-linear-gradient(115deg, transparent 0 3px, var(--hatch) 3px 4px); }
.hw-range-dot { position: absolute; top: 5px; width: 4px; height: 4px; margin-left: -2px; border-radius: var(--r-dot); background: var(--text); opacity: 0.55; }
.hw-range-median { position: absolute; top: 0; width: 2px; height: 14px; margin-left: -1px; background: var(--text); text-decoration: none; }
.hw-range.is-thin { opacity: 0.6; }
.hw-spread .figure { font-size: 15px; }
.hw-month th, .hw-month td { padding-block: 10px; }
.hw-month td .sub { display: block; }
.hw-month .is-violet { color: var(--violet); }

.howto-sub { margin: 36px 0 10px; font-size: 18px; font-weight: 600; }
.howto-section > .howto-sub:first-of-type { margin-top: 0; }
.hw-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 28px; margin-top: 16px; }
.hw-panel { margin: 0; min-width: 0; padding: 12px 12px 10px; border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); }
.hw-panel figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; }
.hw-panel figcaption strong { font-weight: 600; }
.hw-panel-latest { color: var(--text); font-family: var(--font-figure); font-size: 13px; white-space: nowrap; }
.hw-panel-take { margin: 6px 0 0; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.hw-panel-since { margin: 2px 0 0; color: var(--faint); font-size: 12px; }
.hw-compact { list-style: none; margin: 16px 0 0; padding: 0; border-top: 1px solid var(--line2); }
.hw-compact-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.5; }
.hw-compact-row strong { font-weight: 600; }
.hw-compact-pp { color: var(--muted); }
.hw-compact-cycle.is-excluded { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line2); }
.hw-compact-row em { color: var(--muted); font-style: normal; }

/* At a glance */
.hw-glance { margin: 0 0 56px; }
.hw-glance-kicker { color: var(--accent); font-family: var(--font-figure); font-size: 14px; }
.hw-glance h2 { margin: 6px 0 0; font-size: 30px; line-height: 1.15; letter-spacing: -0.01em; }
.hw-glance-lead { margin: 14px 0 0; max-width: 940px; font-size: 18px; line-height: 1.55; }
.hw-glance-lead b { font-weight: 600; }
.hw-glance-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
.hw-glance-card { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px 16px; border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); }
.hw-glance-card h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: 15px; font-weight: 600; }
.hw-glance-card h3 small { color: var(--muted); font-size: 13px; font-weight: 400; }
.hw-glance-big { font-family: var(--font-figure); font-size: 30px; font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.hw-glance-sub { margin-top: 4px; color: var(--muted); font-size: 13px; }
.hw-glance-chip { align-self: flex-start; padding: 3px 10px; border-radius: var(--r-chip); font-size: 13.5px; font-weight: 500; }
.hw-glance-chip.is-down { background: var(--crit-soft); color: var(--crit); }
.hw-glance-chip.is-flat { background: var(--ok-soft); color: var(--ok); }
.hw-glance-rows { display: grid; gap: 8px; margin: 0; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 13.5px; line-height: 1.45; }
.hw-glance-rows > div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; }
.hw-glance-rows dt { color: var(--muted); }
.hw-glance-rows dd { margin: 0; }
.hw-glance-rows dd b { font-family: var(--font-figure); font-weight: 500; }
.hw-glance-tiers { margin-top: 28px; }
.hw-glance-tiers h3 { margin: 0; font-size: 16px; }
.hw-glance-tiers > p { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.hw-glance-chart { margin: 14px 0 0; padding: 14px 22px 10px; border: 1px solid var(--line2); border-radius: var(--r-card); background: var(--surface); }
.hw-glance-chart figcaption { font-size: 14px; color: var(--muted); }
.hw-glance-chart figcaption strong { color: var(--text); font-weight: 600; }
.hw-glance-chart .hw-chart { font-family: var(--font-sans); margin-top: 4px; }
.hw-glance-missing { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.hw-glance-month { padding: 8px 10px; border-radius: var(--r-chip); background: var(--sunk); font-size: 13.5px; line-height: 1.45; }
.hw-glance-month b { font-weight: 600; }
.hw-glance-foot { margin: 18px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.hw-glance-foot b { color: var(--text); font-weight: 600; }
.hw-glance-more { display: inline-block; margin-top: 14px; color: var(--accent); font-size: 14.5px; }