/* Reference components v0.1. Design values are aliases from tokens.css. */
.ds-stack { display:grid; gap:var(--space-content); }
.ds-row { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-sm); }
.ds-between { justify-content:space-between; }
.ds-muted { color:var(--color-text-muted); }
.ds-mono { font-family:var(--font-family-data); font-variant-numeric:tabular-nums; }
.tsb-design-system .ds-visually-hidden { position:absolute; width:var(--stroke-width); height:var(--stroke-width); padding:0; margin:calc(var(--stroke-width) * -1); overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.ds-kicker { color:var(--color-accent); font-size:var(--font-label); font-weight:var(--font-weight-label); line-height:var(--line-height-caption); letter-spacing:var(--tracking-label); text-transform:uppercase; }
.ds-title { font-size:var(--font-h3); font-weight:var(--font-weight-heading); line-height:var(--line-height-heading); letter-spacing:var(--tracking-heading); margin:0; }
.ds-card { padding:var(--card-padding); border:var(--stroke-width) solid var(--card-border); border-radius:var(--card-radius); background:var(--card-bg); box-shadow:var(--shadow-card); color:var(--color-text); }
.ds-card[data-interactive]:is(:hover,[data-state="hover"]) { border-color:var(--color-border-strong); }
.ds-card[data-interactive][data-state="active"] { border-color:var(--color-accent); }
.ds-identity { display:grid; place-items:center; flex:none; width:var(--primitive-size-46); height:var(--primitive-size-46); border:var(--stroke-width) solid var(--color-border-strong); border-radius:var(--radius-control); font:var(--font-weight-heading) var(--font-h4)/var(--primitive-line-control) var(--font-family); color:var(--color-text); background:var(--color-surface-raised); }
.ds-button { display:inline-flex; justify-content:center; align-items:center; gap:var(--space-sm); min-height:var(--button-height); padding:0 var(--button-pad-inline); border:var(--stroke-width) solid var(--color-border); border-radius:var(--button-radius); background:var(--color-surface-control); color:var(--color-text); text-decoration:none; cursor:pointer; transition:background var(--duration-fast) var(--ease-out),border-color var(--duration-fast) var(--ease-out); }
.tsb-design-system .ds-button { font:var(--button-weight) var(--button-font)/var(--primitive-line-control) var(--font-family); }
.ds-button:is(:hover,[data-state="hover"]):not(:disabled) { background:var(--color-surface-hover); border-color:var(--color-border-strong); color:var(--color-text); }
.ds-button:is(:active,[data-state="active"]):not(:disabled) { background:var(--color-accent-soft); border-color:var(--color-accent); color:var(--color-text); }
.ds-button[data-kind="primary"] { background:var(--button-primary-bg); color:var(--button-primary-text); border-color:var(--button-primary-border); }
.ds-button[data-kind="primary"]:is(:hover,[data-state="hover"]):not(:disabled) { background:var(--button-primary-hover); color:var(--button-primary-text); }
.ds-button[data-kind="primary"]:is(:active,[data-state="active"]):not(:disabled) { background:var(--button-primary-active); color:var(--button-primary-text); }
.ds-button[data-kind="tinted"] { background:var(--button-tinted-bg); color:var(--button-tinted-text); border-color:var(--button-tinted-border); }
.ds-button[data-kind="tinted"]:is(:hover,[data-state="hover"]):not(:disabled) { background:var(--button-tinted-hover-bg); border-color:var(--color-accent); color:var(--button-tinted-text); }
.ds-button[data-kind="tinted"]:is(:active,[data-state="active"]):not(:disabled) { background:var(--color-accent-soft); border-color:var(--color-accent); color:var(--button-tinted-text); }
.ds-button[data-kind="tertiary"] { background:transparent; border-color:transparent; color:var(--color-accent); }
.ds-button[data-kind="destructive"] { background:var(--color-negative-surface); border-color:var(--color-negative); color:var(--color-negative); }
.ds-button[data-kind="tertiary"]:is(:hover,:active,[data-state="hover"],[data-state="active"]):not(:disabled) { color:var(--color-accent); }
.ds-button[data-kind="destructive"]:is(:hover,:active,[data-state="hover"],[data-state="active"]):not(:disabled) { color:var(--color-negative); }
.ds-button[data-size="compact"] { gap:var(--button-compact-gap); min-height:var(--button-compact-height); padding-inline:var(--button-compact-pad-inline); }
.tsb-design-system .ds-button[data-size="compact"] { font-size:var(--button-compact-font); }
.ds-button>:is(i,svg) { width:var(--select-chevron-size); height:var(--select-chevron-size); flex:none; }
.ds-button:disabled,.ds-field:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
.tsb-design-system :is(button,a,input,select,summary):focus-visible,.ds-button[data-state="focus"],.ds-field[data-state="focus"] { outline:var(--focus-width) solid var(--color-focus); outline-offset:var(--focus-offset); }
.ds-badge { display:inline-flex; align-items:center; gap:var(--space-xs); width:fit-content; border:var(--stroke-width) solid var(--color-border); border-radius:var(--badge-radius); padding:var(--badge-padding-block) var(--badge-padding-inline); color:var(--color-text-muted); background:var(--color-surface-raised); font:var(--primitive-weight-label) var(--badge-font)/var(--line-height-caption) var(--font-family); }
.ds-badge[data-tone="positive"] { color:var(--color-positive); background:var(--color-positive-surface); }
.ds-badge[data-tone="negative"] { color:var(--color-negative); background:var(--color-negative-surface); }
.ds-badge[data-tone="warning"] { color:var(--color-warning); background:var(--color-warning-surface); }
.ds-badge[data-tone="info"] { color:var(--color-info); background:var(--color-info-surface); }
.ds-badge[data-tone="partner"] { color:var(--color-partner); background:var(--color-accent-soft); border-color:var(--color-border-strong); }
.ds-data { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-md); margin:0; }
.ds-data dt { font-size:var(--font-caption); color:var(--color-text-muted); }
.ds-data dd { margin:var(--space-xs) 0 0; font-family:var(--font-family-data); font-size:var(--font-body); font-variant-numeric:tabular-nums; }
.ds-fact-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--fact-list-min-column)),1fr)); gap:var(--space-md); margin:0; }
.ds-fact-list>div { min-width:0; padding-top:var(--space-sm); border-top:var(--stroke-width) solid var(--color-border); }
.ds-fact-list dt { color:var(--color-text-muted); font-size:var(--font-caption); font-weight:var(--font-weight-label); line-height:var(--line-height-caption); }
.ds-fact-list dd { margin:var(--space-xs) 0 0; color:var(--color-text); font:var(--font-weight-label) var(--font-body-small)/var(--line-height-body) var(--font-family-data); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.ds-fact-list--stacked { grid-template-columns:1fr; gap:0; }
.ds-fact-list--stacked>div { padding:var(--space-sm) 0; border-top:0; }
.ds-fact-list--stacked>div:first-child { padding-top:0; }
.ds-fact-list--stacked>div+div { border-top:var(--stroke-width) solid var(--color-border); }
.ds-fact-list--stacked>div:last-child { padding-bottom:0; }
.ds-note-disclosure { color:var(--color-text-muted); font-size:var(--font-body-small); line-height:var(--line-height-body); }
.ds-note-disclosure summary { display:inline-flex; align-items:center; gap:var(--space-xs); color:var(--color-text-muted); cursor:pointer; font-size:var(--font-caption); font-weight:var(--font-weight-label); list-style:none; }
.ds-note-disclosure summary::-webkit-details-marker { display:none; }
.ds-note-disclosure summary:is(:hover,:focus-visible) { color:var(--color-accent); }
.ds-note-disclosure summary>:is(i,svg) { width:var(--select-chevron-size); height:var(--select-chevron-size); flex:none; transition:transform var(--duration-fast) var(--ease-out); }
.ds-note-disclosure[open] summary>:is(i,svg) { transform:rotate(180deg); }
.ds-note-disclosure>p { margin:var(--space-sm) 0 0; overflow-wrap:anywhere; }
.ds-disclosure { display:flex; width:100%; align-items:flex-start; gap:var(--space-md); margin:0; padding:var(--space-md); border:var(--stroke-width) solid var(--color-border); border-inline-start:var(--focus-width) solid var(--color-partner); border-radius:var(--radius-inner); color:var(--color-text-muted); background:var(--disclosure-bg); font-size:var(--disclosure-font); line-height:var(--line-height-body); }
.tsb-design-system .ds-disclosure.pf-affiliate-disclosure { display:flex; width:100%; gap:var(--space-md); margin:0; padding:var(--space-md); border:var(--stroke-width) solid var(--color-border); border-inline-start:var(--focus-width) solid var(--color-partner); border-radius:var(--radius-inner); background:var(--disclosure-bg); color:var(--color-text-muted); font-size:var(--disclosure-font); line-height:var(--line-height-body); }
.ds-disclosure>:is(i,svg) { width:var(--disclosure-icon-size); height:var(--disclosure-icon-size); flex:0 0 var(--disclosure-icon-size); margin-top:var(--space-xs); color:var(--color-partner); stroke-width:var(--icon-stroke); }
.ds-disclosure>span { min-width:0; }
.ds-disclosure strong { color:var(--color-text); }
.ds-disclosure a { color:var(--color-accent); font-weight:var(--font-weight-label); }
.ds-disclosure a:is(:hover,:focus-visible) { color:var(--color-primary-hover); }
.ds-table-region { overflow:auto; border:var(--stroke-width) solid var(--color-border); border-radius:var(--radius-card); }
.ds-table { width:100%; min-width:var(--width-table-min); border-collapse:collapse; font-size:var(--table-font); color:var(--color-text); background:var(--color-surface-card); }
.ds-table caption { text-align:left; padding:var(--space-md); color:var(--color-text-muted); background:var(--color-surface-raised); }
.ds-table th,.ds-table td { text-align:left; padding:var(--table-cell-block) var(--table-cell-inline); border-bottom:var(--stroke-width) solid var(--color-border-soft); vertical-align:top; }
.ds-table th { color:var(--color-text-muted); font-weight:var(--font-weight-label); }
.ds-table tbody tr:last-child td { border-bottom:0; }
.ds-table tbody tr:is(:hover,[data-state="hover"]) { background:var(--color-surface-hover); }
.ds-table td[data-numeric] { font-family:var(--font-family-data); font-variant-numeric:tabular-nums; }
.ds-hero { display:grid; gap:var(--space-lg); padding:var(--hero-padding); background:var(--color-surface-page); color:var(--color-text); }
.ds-hero h3 { margin:0; font-size:var(--hero-font); font-weight:var(--hero-weight); line-height:var(--hero-line); letter-spacing:var(--tracking-h1); text-wrap:balance; }
.ds-hero p { max-width:var(--width-reading); margin:0; color:var(--color-text-muted); }
.ds-cta { display:grid; gap:var(--space-lg); padding:var(--space-xl); border:var(--stroke-width) solid var(--color-border); border-radius:var(--radius-card); background:var(--color-surface-raised); color:var(--color-text); }
.ds-faq { border-block-start:var(--stroke-width) solid var(--color-border); }
.ds-faq details { border-block-end:var(--stroke-width) solid var(--color-border); }
.ds-faq summary { cursor:pointer; padding:var(--faq-padding) 0; font-weight:var(--font-weight-label); }
.ds-faq details p { color:var(--color-text-muted); padding:0 0 var(--faq-padding); margin:0; }
.ds-field-wrap { display:grid; gap:var(--space-sm); font-size:var(--font-body-small); }
.ds-field { width:100%; min-width:0; min-height:var(--field-height); padding:var(--space-sm) var(--space-md); border:var(--stroke-width) solid var(--color-border-strong); border-radius:var(--radius-control); color:var(--color-text); background:var(--color-surface-control); font-size:var(--field-font); }
.tsb-design-system .ds-field { font:inherit; }
.ds-field::placeholder { color:var(--color-text-muted); }
.ds-metric { font:var(--font-weight-heading) var(--font-metric)/var(--line-height-heading) var(--font-family-data); font-variant-numeric:tabular-nums; }
.ds-metric[data-tone="positive"] { color:var(--color-positive); }
.ds-metric[data-tone="negative"] { color:var(--color-negative); }
.tsb-design-system[data-motion="reduced"] * { transition:none; animation:none; }

.ds-metric-card { padding:var(--metric-card-padding); }
.ds-button[data-variant="index-hero"] { min-height:var(--button-hero-height); border-radius:var(--button-hero-radius); box-shadow:var(--shadow-cta); }
.ds-metric-editorial { padding:var(--space-md) 0; border:0; border-radius:0; border-block:var(--stroke-width) solid var(--color-border); background:transparent; }
.ds-program-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-md); }
.ds-program-row .ds-data { flex:1; min-width:var(--width-swatch); }
.ds-field:is(:hover,[data-state="hover"]):not(:disabled) { border-color:var(--color-accent); }
.ds-field:is(:active,[data-state="active"]):not(:disabled) { background:var(--color-accent-soft); }

/* Native popup, spinner and date-picker theme follows the semantic surface. */
.tsb-design-system { color-scheme:var(--native-color-scheme); }
.tsb-design-system :is(input,select,textarea,button) { color-scheme:var(--native-color-scheme); accent-color:var(--color-primary); }
.tsb-design-system :is(option,optgroup) { color:var(--color-text); background:var(--color-surface-control); }

/* Document-rendered listbox: same token context as the trigger, including top layer. */
.ds-select { display:block; position:relative; min-width:0; max-width:100%; }
.ds-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); cursor:pointer; text-align:start; }
.ds-select-caption { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-select-arrow { display:block; flex:none; width:var(--select-chevron-size); height:var(--select-chevron-size); color:var(--color-text-muted); stroke-width:var(--select-chevron-stroke); pointer-events:none; }
.ds-select-trigger { padding-inline-end:var(--select-chevron-inset); }
.ds-select-list { position:fixed; inset:auto; left:var(--select-menu-x); top:var(--select-menu-y); width:var(--select-menu-width); max-height:var(--select-menu-available); z-index:var(--select-menu-layer); margin:0; padding:var(--select-menu-padding); overflow:auto; overscroll-behavior:contain; border:var(--stroke-width) solid var(--color-border-strong); border-radius:var(--radius-control); background:var(--select-menu-bg); color:var(--select-menu-text); box-shadow:var(--shadow-card); font:var(--font-weight-body) var(--select-option-font)/var(--select-option-line) var(--font-family); }
.ds-select-list::backdrop { background:transparent; }
.ds-select-option { display:flex; align-items:center; justify-content:space-between; gap:var(--space-sm); min-height:0; padding:var(--select-option-pad-block) var(--select-option-pad-inline); border-radius:var(--select-option-radius); cursor:pointer; overflow-wrap:anywhere; }
.ds-select-option::after { content:""; flex:none; width:var(--select-chevron-size); }
.ds-select-option[data-committed="true"]::after { content:'✓'; color:var(--color-accent); }
.ds-select-option:hover { background:var(--color-surface-hover); }
.ds-select-option[aria-selected="true"] { background:var(--color-accent-soft); color:var(--color-text); }
.ds-select-option[aria-disabled="true"] { opacity:var(--opacity-disabled); cursor:not-allowed; }

/* A page section owns spacing. Only the comparison table owns a surface. */
.ds-segment { display:grid; gap:var(--space-lg); }
.ds-segment h3 { margin:0; font-size:var(--font-h2); line-height:var(--line-height-heading); letter-spacing:var(--tracking-heading); }
.ds-segment p { margin:0; }
.ds-segment-filters { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:var(--space-md); }
.ds-segment-note { font-size:var(--font-body-small); }
.tsb-design-system[data-viewport="small"] .ds-segment-filters { grid-template-columns:1fr; }