/* Shared UI foundations and components. See docs/DESIGN_SYSTEM.md. */
/* Foundation and native element defaults. */

* {
  box-sizing:border-box;
}
:root {
  font:var(--text-base)/var(--line-body) var(--font-body);
}
body {
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a {
  color:var(--accent-text);
  text-underline-offset:.23em;
}
button,input,select {
  font:inherit;
}
button,a,summary {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
button,select,summary {
  cursor:pointer;
}
button:disabled {
  cursor:wait;
  opacity:.6;
}
img {
  max-width:100%;
}
:focus-visible {
  outline:3px solid var(--focus-ring);
  outline-offset:4px;
}
h1,h2,h3,p {
  margin-top:0;
}
h1,h2,h3 {
  line-height:var(--line-heading);
}
h1 {
  font-size:2.7rem;
  letter-spacing:-.05em;
  margin:0;
}
h2 {
  font-size:1.4rem;
  letter-spacing:-.035em;
}
h3 {
  font-size:1.1rem;
  letter-spacing:-.02em;
}
[hidden] {
  display:none!important;
}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  padding:var(--space-3);
  background:var(--surface);
  z-index:20;
}
.skip-link:focus {
  top:10px;
}
.leaf-icon {
  display:inline-block;
  width:24px;
  height:24px;
  background:currentColor;
  mask:url('/assets/brand-leaf.png') center/contain no-repeat;
  -webkit-mask:url('/assets/brand-leaf.png') center/contain no-repeat;
}
.eyebrow {
  font-size:var(--text-caption);
  letter-spacing:.13em;
  font-weight:var(--weight-heavy);
  color:var(--accent-text);
  margin:0 0 var(--space-2-5);
}
.secondary {
  color:var(--secondary-ink);
  font-size:var(--text-small);
}
.button,.text-button,.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-2-5);
  min-height:var(--control-size);
  border-radius:var(--radius-control-compact);
  padding:var(--space-2-5) var(--space-4-5);
  font-size:var(--text-control);
  font-weight:var(--weight-semibold);
  background:var(--action-fill);
  border:1px solid var(--action-fill);
  color:var(--on-accent);
  text-decoration:none;
  transition:transform var(--motion-fast) ease;
}
.button:active {
  transform:scale(.98);
}
.secondary-button {
  background:var(--surface);
  color:var(--ink);
  border-color:var(--control-border);
}
.text-button {
  background:transparent;
  border-color:transparent;
  color:var(--accent-text);
  padding-inline:var(--space-2);
}
.icon-button {
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--control-border);
  width:var(--control-size);
  font-size:1.4rem;
  padding:0;
}
.notice {
  padding:var(--space-4) var(--space-5);
  border-left:3px solid var(--accent);
  background:var(--tinted-surface);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-6);
  font-size:var(--text-body-small);
}
.notice p {
  margin:0;
}
.notice .button {
  margin-top:var(--space-4);
}
.card {
  border:1px solid var(--separator);
  background:var(--surface);
  border-radius:var(--radius-group);
  padding:var(--space-7);
  min-width:0;
}
.subtitle {
  color:var(--secondary-ink);
  font-size:var(--text-body-small);
}
.fine-print {
  font-size:var(--text-small);
  color:var(--secondary-ink);
}
.empty-state {
  padding:var(--space-16) var(--space-6);
  text-align:center;
  border:1px solid var(--separator);
  border-radius:var(--radius-group);
  background:var(--surface);
}
.empty-state>.leaf-icon {
  width:36px;
  height:36px;
  color:var(--accent-text);
  margin-bottom:var(--space-4);
}
.empty-state h2 {
  margin-bottom:var(--space-3);
}
.empty-state p {
  max-width:500px;
  margin:0 auto var(--space-5);
  color:var(--secondary-ink);
}
.empty-state a {
  margin:var(--space-2);
}
.field {
  display:flex;
  flex-direction:column;
  gap:var(--space-2);
  font-size:var(--text-control);
  flex:1;
  min-width:160px;
}
.field label {
  font-weight:var(--weight-semibold);
}
.field input,.field select {
  width:100%;
  min-height:var(--control-size);
  background:var(--surface);
  color:var(--ink);
  border:1px solid var(--control-border);
  border-radius:var(--radius-control-compact);
  padding:var(--space-2-5) var(--space-3);
  font-size:var(--text-body-small);
}
.search-field {
  flex:2;
  min-width:220px;
}
.filter-panel {
  border:1px solid var(--separator);
  border-radius:var(--radius-popover);
  background:var(--surface);
  margin-bottom:var(--space-5);
}
.filter-panel summary {
  padding:var(--space-4) var(--space-5);
  min-height:var(--control-size-roomy);
  font-size:var(--text-control);
  font-weight:var(--weight-semibold);
}
.filter-fields {
  padding:var(--space-1) var(--space-5) var(--space-5);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-5);
}
.filter-fields .field {
  min-width:0;
}
.filter-actions {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:var(--space-3);
}
.filter-error {
  color:var(--accent-text);
  margin:0;
}
.view-switch {
  display:flex;
  gap:var(--space-2);
}
.view-switch button {
  min-height:var(--control-size);
  border:1px solid var(--control-border);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--radius-md);
  padding:var(--space-2) var(--space-4);
  font-size:var(--text-control);
}
.view-switch button[aria-pressed=true] {
  background:var(--action-fill);
  border-color:var(--action-fill);
  color:var(--on-accent);
}
.chart-wrap {
  margin-top:var(--space-5);
}
.chart {
  display:flex;
  gap:var(--space-2);
  align-items:end;
  height:280px;
  border-bottom:1px solid var(--control-border);
  padding:var(--space-4) 0 0;
}
.chart-column {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:end;
  height:100%;
  gap:var(--space-2);
}
.chart-value {
  font-size:var(--text-caption);
  font-variant-numeric:tabular-nums;
}
.chart-bar {
  background:var(--action-fill);
  width:100%;
  max-width:64px;
  min-height:2px;
  border-radius:var(--radius-xs) var(--radius-xs) 0 0;
  animation:arrive 360ms ease;
}
.chart-table-wrap {
  overflow-x:auto;
  margin-top:var(--space-6);
}
.chart-table {
  border-collapse:collapse;
  width:100%;
  font-size:var(--text-control);
  text-align:left;
}
.chart-table caption {
  text-align:left;
  font-weight:var(--weight-strong);
  margin-bottom:var(--space-4);
}
.chart-table th,.chart-table td {
  padding:var(--space-3-5) var(--space-3);
  border-bottom:1px solid var(--separator);
}
.chart-table th {
  font-weight:var(--weight-semibold);
  color:var(--secondary-ink);
}
dialog {
  border:1px solid var(--separator);
  border-radius:var(--radius-card);
  background:var(--surface);
  color:var(--ink);
  width:min(700px,calc(100% - 32px));
  max-height:85vh;
  padding:var(--space-7);
}
dialog::backdrop {
  background:var(--dialog-scrim);
}
.dialog-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-5);
  margin-bottom:var(--space-6);
}
.dialog-top h2 {
  margin:0;
  font-size:var(--text-heading);
}
.facts {
  display:grid;
  grid-template-columns:minmax(140px,.8fr) minmax(0,1.3fr);
  margin:0;
}
.facts dt,.facts dd {
  padding:var(--space-4) 0;
  border-bottom:1px solid var(--separator);
  overflow-wrap:anywhere;
}
.facts dt {
  color:var(--secondary-ink);
  font-size:var(--text-control);
}
.facts dd {
  margin:0;
  font-size:var(--text-body-small);
}
.article-body {
  white-space:pre-line;
  overflow-wrap:anywhere;
}
.article-link {
  min-height:var(--control-size);
  display:inline-flex;
  align-items:center;
  margin-top:var(--space-5);
}
@keyframes arrive {
  from {
    opacity:.3;
  }
  to {
    opacity:1;
  }
}
@media(max-width:760px) {

h1 {
    font-size:2.3rem;
  }
.card {
    padding:var(--space-6) var(--space-5);
  }
.filter-fields {
    grid-template-columns:1fr 1fr;
  }
.chart {
    gap:var(--space-1);
  }
.chart-value {
    font-size:var(--text-caption);
    writing-mode:vertical-rl;
    transform:rotate(180deg);
  }
.facts {
    grid-template-columns:1fr;
  }
.facts dt {
    border:0;
    padding-bottom:0;
  }
.facts dd {
    padding-top:var(--space-1);
  }
.dialog-top h2 {
    font-size:1.2rem;
  }

}
@media(max-width:380px) {

.filter-fields {
    grid-template-columns:1fr;
  }

}
@media(prefers-reduced-motion:reduce) {

* {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }

}
@media(forced-colors:active) {

.chart-bar {
    background:Highlight;
  }

}
@media print {

.card {
    break-inside:avoid;
  }
.chart-bar {
    print-color-adjust:exact;
  }

}
.chart-scroll {
  overflow-x:auto;
}
.appearance-control { display:flex; align-items:center; gap:var(--space-2-5); font-size:var(--text-small); color:var(--secondary-ink); }
.appearance-control select { min-height:var(--control-size); border:1px solid var(--control-border); border-radius:var(--radius-md); padding:var(--space-2) var(--space-7) var(--space-2) var(--space-3); background:var(--surface); color:var(--ink); font-size:var(--text-small); }
h1 { font-size:var(--text-heading); letter-spacing:-.035em; }
/* Title case also covers titles supplied by published data. Preserve acronyms. */
h1,h2,h3,h4,h5,h6,.row-title,.history-name strong,.overview-next strong,.trend-selection-name strong,.allocation-column>strong { text-transform:capitalize; }
.card,.summary-strip { box-shadow:var(--shadow-subtle); }
.card { padding:var(--space-5); border-radius:var(--radius-lg); }
.summary-strip { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); background:var(--surface); border:1px solid var(--separator); border-radius:var(--radius-lg); margin-bottom:var(--space-6); padding:var(--space-5) var(--space-2); }
.summary-stat { padding:0 var(--space-6); border-right:1px solid var(--separator); min-width:0; }
.summary-stat:last-child { border:0; }
.summary-stat span { display:block; font-size:var(--text-caption); color:var(--secondary-ink); }
.summary-stat strong { display:block; margin:var(--space-1-5) 0 var(--space-1); font-size:var(--text-heading); font-weight:var(--weight-strong); letter-spacing:-.04em; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.summary-stat small { display:block; font-size:var(--text-micro); color:var(--secondary-ink); }
.chart-date { font-size:.5625rem; color:var(--secondary-ink); white-space:nowrap; }
.chart-key { display:flex; align-items:center; gap:var(--space-2); font-size:var(--text-micro); color:var(--secondary-ink); }
.chart-key:before { content:""; width:7px; height:7px; border-radius:var(--radius-round); background:var(--complementary); }
.privacy-notice { position:fixed; z-index:30; inset:auto 16px 16px; max-width:640px; margin:auto; padding:var(--space-4-5) var(--space-5); border-radius:var(--radius-lg); background:var(--notice-surface); color:var(--notice-ink); box-shadow:var(--shadow-notice); text-align:center; }
.privacy-notice p { margin:0; font-size:var(--text-control); line-height:1.5; }
.privacy-notice a { color:var(--notice-ink); text-decoration:underline; }
.privacy-notice-actions { display:flex; justify-content:center; align-items:center; gap:var(--space-3); margin-top:var(--space-3-5); }
.privacy-notice .button { min-height:var(--control-size); padding:var(--space-2) var(--space-6); background:var(--notice-ink); color:var(--notice-surface); border:0; border-radius:var(--radius-md); font-weight:var(--weight-bold); }
.privacy-notice-close { min-width:var(--control-size); min-height:var(--control-size); border:0; background:transparent; color:var(--notice-ink); font-size:var(--text-title); line-height:1; }
@media(max-width:760px) {

.appearance-control>span { display:none; }
.appearance-control select { max-width:108px; }
.summary-strip { grid-template-columns:1fr 1fr; padding:var(--space-4) 0 0; margin-bottom:var(--space-4); }
.summary-stat { padding:0 var(--space-4) var(--space-3); }
.summary-stat:nth-child(2) { border:0; }
.summary-stat:last-child { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); padding:var(--space-2-5) var(--space-4); border-top:1px solid var(--separator); }
.summary-stat:last-child strong { font-size:var(--text-control); margin:0; }
.summary-stat:last-child small { display:none; }
.summary-stat strong { font-size:var(--text-heading); }

}
@media(prefers-contrast:more) {

.card,.summary-strip { box-shadow:none; }

}
@media(forced-colors:active) {

.chart-bar { background:Highlight; }

}
.chart-scroll-hint { display:none; }
@media(max-width:760px) {

.chart-scroll-hint { display:block; font-size:var(--text-caption); color:var(--secondary-ink); margin:0 0 var(--space-2); }

}
.match-badge { padding:var(--space-1) var(--space-2); border-radius:var(--radius-sm); color:var(--accent-text); background:var(--tinted-surface); font-size:var(--text-caption); }
.inventory-metrics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); }
.inventory-metrics dt { font-size:var(--text-caption); color:var(--secondary-ink); }
.inventory-metrics dd { margin:var(--space-2) 0; font-size:var(--text-heading-small); font-weight:var(--weight-semibold); overflow-wrap:anywhere; }
@media(max-width:760px) {

.inventory-metrics { gap:var(--space-3); }
.inventory-metrics dd { font-size:var(--text-base); }

}
@media (max-width:760px) {

.field input,.field select,.appearance-control select { font-size:16px; }

}
@supports (height:100dvh) {

dialog { max-height:calc(100dvh - 32px); }

}
.app-prompt[hidden],.app-prompt [hidden] { display:none; }
.app-prompt { position:fixed; z-index:30; inset:auto 12px max(12px,env(safe-area-inset-bottom)); display:flex; align-items:center; gap:var(--space-2-5); width:calc(100% - 24px); max-width:560px; margin-inline:auto; padding:var(--space-3); border:1px solid var(--separator); border-radius:var(--radius-popover); background:var(--surface); color:var(--ink); box-shadow:var(--shadow-prompt); }
.app-prompt>img { border-radius:var(--radius-control-compact); flex-shrink:0; }
.app-prompt-copy { flex:1; min-width:0; }
.app-prompt-copy strong { display:block; font-size:var(--text-base); line-height:var(--line-heading); }
.app-prompt-copy p { margin:3px 0 0; color:var(--secondary-ink); font-size:var(--text-caption); line-height:1.35; }
.app-prompt>.button { display:inline-flex; align-items:center; justify-content:center; min-height:var(--control-size); padding:var(--space-2) var(--space-4-5); border-radius:var(--radius-pill); }
.app-prompt>.icon-button { flex-shrink:0; }
@media(max-width:380px) {

.app-prompt { gap:var(--space-1-5); padding:var(--space-2-5); }
.app-prompt>img { width:40px; height:40px; }
.app-prompt>.button { padding-inline:var(--space-3); }

}
@media print {

.app-prompt,.privacy-notice { display:none; }

}
@media (max-width:760px) {

.card { padding:var(--space-4); }
.article-link { margin-top:var(--space-1); }
.inventory-metrics { margin:var(--space-3) 0 var(--space-1); }
.inventory-metrics dd { margin:var(--space-1) 0 0; }

}
.chart-key { font-size:var(--text-caption); }
.privacy-notice-actions { flex-wrap:wrap; }

/* Website component variants, responsive states, and accessibility. */
/* Web composition. The mobile app's Fraunces files and semantic colours are shared. */
@font-face {
 font-family:Fraunces; font-style:normal; font-weight:400; font-display:swap;
 src:url('/assets/fonts/Fraunces9pt-Regular.ttf') format('truetype');
}
@font-face {
 font-family:Fraunces; font-style:normal; font-weight:600; font-display:swap;
 src:url('/assets/fonts/Fraunces9pt-SemiBold.ttf') format('truetype');
}
body { background:var(--surface); }
h1,h2,h3 { font-family:var(--editorial); font-weight:var(--weight-regular); letter-spacing:-.035em; }
button,a { -webkit-tap-highlight-color:transparent; }
.button,.text-button { min-height:var(--control-size); border-radius:var(--radius-pill); font-size:var(--text-control); font-weight:var(--weight-medium); line-height:var(--line-control); gap:var(--space-2); transition:background-color var(--motion-control),color var(--motion-control),box-shadow var(--motion-control),transform var(--motion-control); }
.button { padding:11px var(--space-5-5); border:1px solid transparent; }
.button.secondary-button { background:var(--tinted-surface); color:var(--ink); border-color:transparent; }
.text-button { padding:var(--space-2-5) var(--space-3-5); border:0; }
button:focus-visible,a.button:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.button:active:not(:disabled),.text-button:active:not(:disabled) { transform:scale(.98); }
.button:disabled,.text-button:disabled { opacity:.5; transform:none; box-shadow:none; }
.icon-button,.privacy-notice-close { display:inline-grid; position:relative; place-items:center; flex-shrink:0; width:var(--control-size); height:var(--control-size); min-height:var(--control-size); padding:0; border:0; border-radius:var(--radius-round); color:var(--secondary-ink); background:transparent; line-height:1; }
.icon-button::before,.privacy-notice-close::before { content:""; position:absolute; inset:4px; border-radius:var(--radius-round); background:var(--tinted-surface); transition:background-color var(--motion-control),transform var(--motion-control); }
.icon-button svg,.privacy-notice-close svg { position:relative; width:16px; height:16px; pointer-events:none; }
.icon-button:focus-visible,.privacy-notice-close:focus-visible { outline-offset:-2px; }
.icon-button:active::before,.privacy-notice-close:active::before { transform:scale(.92); }
.privacy-notice-close { color:var(--notice-ink); }
.privacy-notice-close::before { background:var(--notice-close-fill); }
.privacy-notice .button { border-radius:var(--radius-pill); font-weight:var(--weight-medium); }
.view-switch { gap:var(--space-1); padding:var(--space-1); border-radius:var(--radius-pill); background:var(--tinted-surface); }
.view-switch button { padding:9px var(--space-5); border:1px solid transparent; border-radius:var(--radius-pill); font-size:var(--text-control); font-weight:var(--weight-medium); background:transparent; color:var(--secondary-ink); transition:background-color var(--motion-control),color var(--motion-control),box-shadow var(--motion-control); }
.view-switch button[aria-pressed=true] { background:var(--elevated-surface); color:var(--ink); border-color:var(--border-subtle); box-shadow:var(--shadow-selected); }
@media(hover:hover) {

.button:hover:not(:disabled) { background:var(--action-hover); box-shadow:var(--shadow-action); }
.button.secondary-button:hover:not(:disabled) { background:var(--surface-hover); box-shadow:none; }
.text-button:hover:not(:disabled) { background:var(--tinted-surface); }
.icon-button:hover { color:var(--ink); }
.icon-button:hover::before { background:var(--surface-icon-hover); }
.privacy-notice-close:hover::before { background:var(--notice-close-hover); }
.privacy-notice .button:hover { background:var(--notice-action-hover); color:var(--notice-surface); }
.view-switch button:hover { color:var(--ink); }

}
.text-button span,.article-link span { display:inline-block; transition:transform 220ms ease; }
.text-button:hover span,.article-link:hover span { transform:translateX(4px); }
.card { box-shadow:none; border-color:var(--border-subtle); border-radius:var(--radius-card); padding:var(--space-7); }
.eyebrow { font-family:var(--font-mono); font-size:var(--text-micro); font-weight:var(--weight-medium); letter-spacing:.12em; }
.appearance-control { position:relative; flex-shrink:0; }
.appearance-trigger { display:grid; place-items:center; width:var(--control-size); height:var(--control-size); padding:0; border:0; border-radius:var(--radius-round); background:transparent; color:var(--secondary-ink); transition:background-color var(--motion-control),color var(--motion-control); }
.appearance-trigger>span { display:flex; }
.appearance-trigger:hover,.appearance-trigger[aria-expanded=true] { background:var(--tinted-surface); color:var(--ink); }
.appearance-trigger:focus-visible { outline:2px solid var(--focus-ring); outline-offset:-4px; }
.appearance-menu { position:absolute; z-index:45; top:calc(100% + 8px); right:0; width:196px; padding:var(--space-2); border:1px solid var(--separator); border-radius:var(--radius-popover); background:var(--elevated-surface); color:var(--ink); box-shadow:var(--shadow-popover); animation:appearance-in var(--motion-fast) ease-out; }
.appearance-menu-title { margin:var(--space-1) var(--space-2-5) var(--space-2); font-size:var(--text-micro); font-weight:var(--weight-medium); color:var(--secondary-ink); }
.appearance-menu [role=menuitemradio] { display:flex; align-items:center; gap:var(--space-3); width:100%; min-height:var(--control-size); padding:var(--space-2-5); border:0; border-radius:var(--radius-md); background:transparent; color:var(--ink); text-align:left; font-size:var(--text-control); line-height:var(--line-control); }
.appearance-menu [role=menuitemradio]:hover,.appearance-menu [role=menuitemradio]:focus-visible { background:var(--tinted-surface); outline:2px solid transparent; outline-offset:-2px; }
.appearance-menu [role=menuitemradio]:focus-visible { outline-color:var(--control-border); }
.appearance-menu [role=menuitemradio][aria-checked=true] { color:var(--accent-text); }
.appearance-check { margin-left:auto; opacity:0; }
@keyframes appearance-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
.summary-stat strong { font-family:var(--numeric); font-variant-numeric:tabular-nums; }
.summary-strip { box-shadow:none; border:0; background:var(--canvas); padding:var(--space-7) var(--space-2); border-radius:var(--radius-card); margin-bottom:var(--space-7); }
.summary-stat { padding:var(--space-2) var(--space-7); }
.summary-stat strong { font-size:var(--text-display); font-weight:var(--weight-medium); margin:var(--space-3) 0 var(--space-1-5); line-height:1.1; }
.summary-stat:last-child strong { font-size:var(--text-title); }
.summary-stat span { font-size:var(--text-control); }
.summary-stat small { font-size:var(--text-caption); }
@media(max-width:1000px) {

.summary-stat { padding-inline:var(--space-5); }
.summary-stat strong { font-size:var(--text-display-small); }
.summary-stat:last-child strong { font-size:var(--text-heading); }

}
@media(max-width:760px) {

.summary-strip { grid-template-columns:1fr 1fr; padding:var(--space-6) 0 0; }
.summary-stat { padding:0 var(--space-5) var(--space-6); }
.summary-stat strong { font-size:var(--text-display-small); margin-top:var(--space-2-5); }
.summary-stat:last-child { padding:var(--space-4) var(--space-5); }
.summary-stat:last-child strong { font-size:var(--text-lead); }
.summary-stat span { font-size:var(--text-small); }
.summary-stat small { font-size:var(--text-micro); }

}
@media(max-width:380px) {

.summary-stat { padding-inline:var(--space-4); }
.summary-stat strong { font-size:var(--text-title); }

}
.field input,.field select { min-height:var(--control-size-roomy); padding:var(--space-3) var(--space-3-5); border-color:var(--control-border); border-radius:var(--radius-lg); box-shadow:var(--shadow-field); transition:border-color var(--motion-fast),box-shadow var(--motion-fast); }
.field input::placeholder { color:var(--secondary-ink); opacity:.85; }
.field input:focus-visible,.field select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-color:transparent; box-shadow:none; }
.field label { font-size:var(--text-small); font-weight:var(--weight-semibold); }
.field-hint { font-size:var(--text-small); color:var(--secondary-ink); line-height:var(--line-body); margin:0; }
.search-input-wrap { position:relative; display:flex; align-items:center; }
.search-input-wrap>svg { position:absolute; left:16px; color:var(--secondary-ink); pointer-events:none; }
.search-input-wrap input { min-height:54px; padding:var(--space-3-5) var(--space-13) var(--space-3-5) var(--space-12); font-size:var(--text-base); }
.search-input-wrap input::-webkit-search-cancel-button { -webkit-appearance:none; }
.search-clear { position:absolute; right:5px; display:grid; place-items:center; width:var(--control-size); height:var(--control-size); padding:0; border:0; border-radius:var(--radius-round); background:transparent; color:var(--secondary-ink); }
.search-clear:hover { background:var(--tinted-surface); color:var(--ink); }
.search-clear:focus-visible { outline-offset:-4px; }
.filter-disclosure { font-size:var(--text-heading-small); transition:transform 200ms; }
.filter-panel[open] .filter-disclosure { transform:rotate(45deg); }
.filter-error:empty { display:none; }
.filter-error:not(:empty) { flex-basis:100%; padding:var(--space-3) var(--space-4); background:var(--surface); border-left:3px solid var(--accent); border-radius:var(--radius-xs); font-size:var(--text-control); }
.filter-chip { display:inline-flex; align-items:center; gap:var(--space-2-5); min-height:var(--control-size); max-width:100%; padding:9px var(--space-3-5); border:1px solid var(--separator); border-radius:var(--radius-pill); background:var(--surface); color:var(--ink); text-align:left; overflow-wrap:anywhere; font-size:var(--text-small); line-height:var(--line-control); }
.filter-chip:hover { background:var(--tinted-surface); }
.filter-chip span { font-size:var(--text-base); color:var(--secondary-ink); }
@media(max-width:760px) {

.search-input-wrap input { text-overflow:ellipsis; }

}
@media(prefers-reduced-motion:reduce) {

* { animation:none!important; transition:none!important; scroll-behavior:auto!important; }

}
@media(forced-colors:active) {

.button,.text-button,.view-switch button,.icon-button,.privacy-notice-close { border:1px solid ButtonText; }
.view-switch button[aria-pressed=true] { outline:2px solid Highlight; outline-offset:-3px; }
.icon-button::before,.privacy-notice-close::before { background:Canvas; }
.icon-button,.privacy-notice-close { color:ButtonText; }

}
.shimmer-loading { width:100%; min-width:0; padding-block:var(--space-2) var(--space-6); }
.loading-caption { margin:0 0 var(--space-4-5); color:var(--secondary-ink); font-size:var(--text-control); }
.skeleton-layout { display:grid; gap:var(--space-5); }
.skeleton-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:var(--space-6); }
.shimmer-loading[data-layout="compare"] .skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.skeleton-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.skeleton-card { display:grid; gap:var(--space-5-5); padding:var(--space-7); border:1px solid var(--separator); border-radius:var(--radius-card); background:var(--canvas); min-width:0; }
.skeleton-block { display:block; height:14px; width:100%; border-radius:var(--radius-sm); background:linear-gradient(100deg,color-mix(in srgb,var(--ink) 7%,transparent) 25%,color-mix(in srgb,var(--ink) 14%,transparent) 45%,color-mix(in srgb,var(--ink) 7%,transparent) 65%); background-size:250% 100%; animation:loading-shimmer 1.8s ease-in-out infinite; }
.skeleton-eyebrow { width:30%; height:10px; }
.skeleton-title { width:72%; height:28px; border-radius:var(--radius-md); }
.skeleton-short { width:65%; }
.skeleton-metrics { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-7); padding-block:var(--space-2); }
.skeleton-metric { height:64px; width:80%; border-radius:var(--radius-control-compact); }
.skeleton-action { width:120px; height:40px; border-radius:24px; }
.skeleton-input { height:var(--control-size-roomy); border-radius:var(--radius-lg); }
.skeleton-history,.skeleton-facts { border-block:1px solid var(--separator); }
.skeleton-row { display:grid; grid-template-columns:1fr 2fr 1fr; align-items:center; gap:var(--space-6); min-height:76px; padding:var(--space-5) var(--space-3); }
.skeleton-row+.skeleton-row { border-top:1px solid var(--separator); }
.skeleton-chart { height:220px; display:flex; align-items:flex-end; gap:var(--space-4-5); padding:var(--space-4) 0 0; border-bottom:1px solid var(--separator); }
.skeleton-bar { height:60%; border-radius:var(--radius-sm) var(--radius-sm) 0 0; }
.skeleton-bar:nth-child(3n+1) { height:80%; }
.skeleton-bar:nth-child(3n+2) { height:45%; }
.shimmer-loading.compact { padding-block:var(--space-4); }
.shimmer-loading.compact .skeleton-row { min-height:var(--control-size); padding:var(--space-3-5) 0; }
@keyframes loading-shimmer { from { background-position:150% 0; } to { background-position:-150% 0; } }
@media(min-width:761px) and (max-width:1000px) {

.shimmer-loading[data-layout="overview"] .skeleton-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:var(--space-2); }

}
@media(max-width:760px) {

.skeleton-grid,.shimmer-loading[data-layout="compare"] .skeleton-grid { grid-template-columns:1fr; gap:var(--space-4); }
.skeleton-summary { grid-template-columns:1fr 1fr; }
.skeleton-card { padding:var(--space-5-5); gap:var(--space-4-5); }
.skeleton-row { gap:var(--space-4); grid-template-columns:1fr 2fr 1fr; }
.skeleton-chart { gap:var(--space-2-5); }

}
@media(prefers-reduced-motion:reduce) {

.skeleton-block { animation:none; background:color-mix(in srgb,var(--ink) 9%,transparent); }

}
@media(forced-colors:active) {

.skeleton-block { animation:none; background:Canvas; border:1px solid GrayText; }

}
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.interactive-chart { min-width:0; }
.interactive-chart .chart-scroll, .overview-chart.interactive-chart .chart-scroll { padding:var(--space-1-5); margin-inline:calc(-1 * var(--space-1-5)); }
.interactive-chart .chart { min-width:100%; width:max-content; min-height:232px; }
.interactive-chart [data-chart-point] {
 color:var(--ink); background:transparent; border:0; border-radius:var(--radius-sm);
 padding:var(--space-1); min-width:var(--chart-target-size); flex:1 0 var(--chart-target-size); cursor:pointer;
 touch-action:pan-x pan-y pinch-zoom;
}
.interactive-chart [data-chart-point][aria-pressed="true"] {
 outline:2px solid var(--focus-ring); outline-offset:-2px; background:var(--surface);
}
.interactive-chart [data-chart-point]:focus-visible { outline:3px solid var(--focus-ring); outline-offset:-3px; }
.interactive-chart .chart-value,.interactive-chart .chart-date {
 writing-mode:horizontal-tb; transform:none; white-space:nowrap; font-size:var(--text-caption);
}
.interactive-chart .chart-bar { flex-shrink:0; }
.interactive-chart .comparison-observation { flex:0 0 120px; }
.chart-selection { min-height:3.1em; margin:var(--space-3) 0; font-size:var(--text-control); overflow-wrap:anywhere; }
.chart-instructions { margin-block:var(--space-3) var(--space-1); }
@media(forced-colors:active) {

.interactive-chart [aria-pressed="true"] { outline-color:Highlight; }

}
.card { transition:border-color var(--motion-standard),box-shadow var(--motion-standard),background-color var(--motion-standard),color var(--motion-standard),transform var(--motion-standard) var(--motion-ease); }
.appearance-ready :is(body,.site-header,.local-header,.footer,.search-panel,.summary-strip,dialog,.app-prompt) { transition:background-color var(--motion-standard),color var(--motion-standard),border-color var(--motion-standard); }
.appearance-ready :is(.secondary,.subtitle,.fine-print,.field-hint,.row-meta,.row-context,.metric-label,.draw-header-label strong) { transition:color var(--motion-standard); }
.appearance-ready .site-menu { transition:clip-path 400ms var(--motion-ease),opacity 250ms,visibility 400ms,background-color var(--motion-standard),color var(--motion-standard); }
.app-prompt:not([hidden]),.privacy-notice { animation:panel-arrive var(--motion-enter) var(--motion-ease); }
.card:focus-within { border-color:color-mix(in srgb,var(--accent) 55%,var(--separator)); }
.filter-chip,.interactive-chart [data-chart-point] { transition:background-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast); }
.chart-bar { transform-origin:center bottom; animation:chart-grow 500ms var(--motion-ease) backwards; }
.chart-column:nth-child(2n) .chart-bar { animation-delay:35ms; }
.chart-column:nth-child(3n) .chart-bar { animation-delay:70ms; }
dialog { box-shadow:var(--shadow-dialog); }
dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
.dialog-top { flex-shrink:0; }
#dialog-content { min-height:0; overflow-y:auto; overscroll-behavior:contain; }
@media(max-width:760px) {

dialog { padding:var(--space-5); max-height:calc(100dvh - 32px); }
.dialog-top { gap:var(--space-3); margin-bottom:var(--space-4); }
.dialog-top h2 { font-size:var(--text-heading-small); line-height:var(--line-control); overflow-wrap:anywhere; }
#close-dialog { width:var(--control-size-roomy); height:var(--control-size-roomy); min-height:var(--control-size-roomy); }

}
dialog::backdrop { background:var(--dialog-scrim); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:backdrop-arrive 220ms ease-out; }
dialog.dialog-closing::backdrop { animation:backdrop-leave var(--motion-fast) ease-in forwards; }
#content details>summary { transition:color var(--motion-fast),margin-bottom var(--motion-standard) var(--motion-ease); }
#content details[open]>:not(summary) { animation:disclosure-arrive var(--motion-standard) var(--motion-ease); }
@supports (interpolate-size:allow-keywords) and selector(details::details-content) {

#content details { interpolate-size:allow-keywords; }
#content details::details-content { block-size:0; opacity:0; overflow:clip; overflow-clip-margin:var(--space-1-5); transition:block-size var(--motion-standard) var(--motion-ease),opacity var(--motion-standard),content-visibility var(--motion-standard) allow-discrete; }
#content details[open]::details-content { block-size:auto; opacity:1; }
#content details[open]>:not(summary) { animation:none; }

}
@media(hover:hover) and (pointer:fine) {

.interactive-chart [data-chart-point]:hover { background:var(--tinted-surface); }

}
@keyframes chart-grow { from { opacity:.4; transform:scaleY(.15); } to { opacity:1; transform:scaleY(1); } }
@keyframes disclosure-arrive { from { opacity:.5; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
@keyframes backdrop-arrive { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-leave { from { opacity:1; } to { opacity:0; } }
@keyframes panel-arrive { from { opacity:.5; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@media(prefers-reduced-motion:reduce) {

dialog::backdrop { animation:none; }
#content details::details-content { transition:none; }

}
.chart-inspector { margin:var(--space-5) 0 var(--space-3); padding:var(--space-5-5) var(--space-6); border:1px solid var(--separator); border-left:3px solid var(--accent); border-radius:var(--radius-lg); background:var(--canvas); }
.chart-selection-empty { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-2) var(--space-4); padding:var(--space-0-5) 0; }
.chart-selection-empty strong { font-size:var(--text-control); font-weight:var(--weight-semibold); }
.chart-selection-empty>span { font-size:var(--text-small); color:var(--secondary-ink); }
.chart-selected-draw { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4) var(--space-8); align-items:center; }
.chart-selected-draw[hidden],.chart-selection-empty[hidden] { display:none; }
.chart-selected-eyebrow { display:block; color:var(--secondary-ink); font-size:var(--text-micro); font-weight:var(--weight-strong); letter-spacing:.06em; text-transform:uppercase; }
.chart-selected-identity h3 { margin:var(--space-2) 0; font-family:inherit; font-size:var(--text-lead); line-height:var(--line-control); font-weight:var(--weight-semibold); letter-spacing:-.015em; overflow-wrap:anywhere; }
.chart-selected-meta { display:flex; flex-wrap:wrap; gap:var(--space-1-5) var(--space-3); margin:0; font-size:var(--text-small); color:var(--secondary-ink); }
.chart-selected-meta [data-selected-number]:not([hidden]) { border-left:1px solid var(--separator); padding-left:var(--space-3); }
.chart-selected-metrics { display:flex; gap:var(--space-7); margin:0; }
.chart-selected-metrics>div { min-width:90px; max-width:180px; }
.chart-selected-metrics dt { font-size:var(--text-caption); color:var(--secondary-ink); margin-bottom:var(--space-1-5); }
.chart-selected-metrics dd { margin:0; font-size:1.6rem; line-height:1.25; font-weight:var(--weight-semibold); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.chart-selected-metrics .is-current dd { color:var(--accent-text); }
.chart-detail-action { display:inline-flex; justify-self:start; align-items:center; gap:var(--space-3-5); min-height:var(--control-size); padding:0; border:0; background:transparent; color:var(--accent-text); font:inherit; font-size:var(--text-small); font-weight:var(--weight-semibold); cursor:pointer; }
.chart-detail-action:hover { text-decoration:underline; }
.chart-detail-action:focus-visible { outline:2px solid var(--focus-ring); outline-offset:4px; border-radius:var(--radius-xs); }
@media(max-width:900px) {

.chart-selected-draw { grid-template-columns:minmax(0,1fr); gap:var(--space-4-5); }
.chart-selected-metrics { border-top:1px solid var(--separator); padding-top:var(--space-4); gap:var(--space-6); }
.chart-selected-metrics>div { flex:1; max-width:none; min-width:0; }
.chart-detail-action { border-top:1px solid var(--separator); padding-top:var(--space-3); justify-self:stretch; justify-content:space-between; }

}
@media(max-width:600px) {

.chart-inspector { padding:var(--space-4-5); }
.chart-selected-identity h3 { font-size:var(--text-base); }
.chart-selected-metrics dd { font-size:1.4rem; }

}
.interactive-chart:has([data-chart-inspector]):has([aria-pressed="true"]) .chart-bar { background:var(--complementary); }
.interactive-chart:has([data-chart-inspector]) [aria-pressed="true"] .chart-bar { background:var(--action-fill); }
.allocation-overview { margin-top:var(--space-8); }
.allocation-summary { display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2fr); align-items:center; gap:var(--space-4) var(--space-7); padding:var(--space-4) var(--space-5); background:var(--tinted-surface); border-radius:var(--radius-lg); margin:var(--space-5) 0; }
.allocation-summary h3 { margin:0 0 var(--space-1-5); font-size:var(--text-heading-small); }
.allocation-summary-heading>a { font-size:var(--text-caption); margin:0; min-height:var(--control-size); align-content:center; }
.allocation-summary .inventory-metrics { margin:0; }
.allocation-summary .inventory-metrics dd { margin:var(--space-1) 0 0; }
.allocation-toolbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
.allocation-toolbar h3 { margin:0; }
.allocation-navigation { display:flex; align-items:center; gap:var(--space-2); }
.allocation-navigation>span { font-size:var(--text-small); color:var(--secondary-ink); font-variant-numeric:tabular-nums; margin-right:var(--space-1); }
.allocation-navigation .button { width:var(--control-size); padding:0; font-size:var(--text-heading-small); }
.allocation-instructions { margin:var(--space-1) 0 var(--space-3); }
.allocation-legend { display:flex; gap:var(--space-6); margin:var(--space-2) 0; font-size:var(--text-small); }
.allocation-legend span::before { content:''; display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:var(--space-2); }
.allocation-filled-key::before,.allocation-filled { background:var(--accent); }
.allocation-remaining-key::before,.allocation-stack { background:var(--tinted-surface); }
.allocation-columns { display:flex; gap:var(--space-3); overflow-x:auto; padding:var(--space-2) var(--space-1) var(--space-4); scrollbar-color:var(--secondary-ink) var(--tinted-surface); scrollbar-width:auto; border-bottom:1px solid var(--separator); }
.allocation-chart .allocation-column { flex:0 0 140px; display:flex; flex-direction:column; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-2); text-align:center; font:inherit; font-size:var(--text-small); line-height:var(--line-control); border-radius:var(--radius-control-compact); }
.allocation-column:hover { background:var(--tinted-surface); }
.allocation-column strong { overflow-wrap:anywhere; }
.allocation-column>span:first-child { min-height:36px; }
.allocation-stack { height:160px; flex-shrink:0; width:56px; display:flex; align-items:flex-end; border:1px solid var(--separator); border-radius:var(--radius-md); overflow:hidden; }
.allocation-filled { width:100%; }
.allocation-unknown { background:repeating-linear-gradient(45deg,var(--tinted-surface),var(--tinted-surface) 6px,var(--separator) 6px,var(--separator) 8px); }
.allocation-detail { border-top:1px solid var(--separator); padding:var(--space-4) 0; }
.allocation-detail summary { cursor:pointer; min-height:28px; font-weight:var(--weight-semibold); }
.allocation-inspector { margin:var(--space-4) 0; padding:var(--space-4) var(--space-5); }
.allocation-selected { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--space-4) var(--space-6); }
.allocation-selected[hidden] { display:none; }
.allocation-selected h4 { margin:var(--space-1-5) 0; font-size:var(--text-base); }
.allocation-selected p { margin:var(--space-1-5) 0; }
.allocation-selected a { font-size:var(--text-small); margin-top:0; }
.allocation-selected .inventory-metrics { margin:0; }
.allocation-data>summary { min-height:var(--control-size); align-content:center; cursor:pointer; font-size:var(--text-small); color:var(--accent-text); }
@media(max-width:600px) {

.allocation-summary,.allocation-selected { grid-template-columns:1fr; gap:var(--space-3-5); }
.allocation-summary-heading { display:flex; align-items:baseline; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2); }
.allocation-summary h3 { margin:0; }
.allocation-summary,.allocation-inspector { padding:var(--space-4); }
.allocation-selected .inventory-metrics { border-top:1px solid var(--separator); padding-top:var(--space-3); }

}

/* Comparison identity badges. */
.draw-role-badge { display:inline-grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border-radius:7px; background:var(--action-fill); color:var(--on-accent); font-size:var(--text-control); font-weight:var(--weight-bold); }
.baseline-badge { background:var(--secondary-ink); color:var(--surface); }
@media(max-width:760px) {
.draw-role-badge { flex-basis:24px; width:24px; height:24px; font-size:var(--text-caption); }
}
@media(forced-colors:active) {
.draw-role-badge,.comparison-cell-key { border:1px solid CanvasText; }
}

/* Native field states keep their label and validation text authoritative. */
.field input:disabled,.field select:disabled { background:var(--tinted-surface); color:var(--secondary-ink); cursor:not-allowed; }
.field input[aria-invalid="true"],.field select[aria-invalid="true"] { border-color:var(--accent-text); }