/* Self-hosted Roboto from Google Fonts v51; license in static/fonts/OFL.txt.
   The current Web/3P/Static font tokens select this family. */
@font-face { font-family:Roboto; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/roboto-latin-ext.woff2') format('woff2'); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family:Roboto; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/roboto-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Values come from /theme.css. App-specific choices: content widths,
   breakpoint, stacking order, column proportions and identifier monospace.
   Structural 0/1px rules and viewport sizing are not design tokens. */
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; background:var(--md-sys-color-surface); color:var(--md-sys-color-on-surface); font-family:var(--md-sys-typescale-body-large-font); font-size:var(--md-sys-typescale-body-large-size); line-height:var(--md-sys-typescale-body-large-line-height); font-weight:var(--md-sys-typescale-body-large-weight); letter-spacing:var(--md-sys-typescale-body-large-tracking); }
p { margin:0; }
.tokens-body { display:flex; flex-direction:column; }
a { color:inherit; }
button, input, select { font:inherit; color:inherit; }
button:not(:disabled), [role=button]:not([aria-disabled=true]) { cursor:pointer; }
:focus-visible { outline:var(--md-sys-state-focus-indicator-thickness) solid var(--md-sys-color-primary); outline-offset:var(--md-sys-state-focus-indicator-outer-offset); }
.tokens-site-header { position:sticky; top:0; z-index:10; border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); background:var(--md-sys-color-surface); }
.tokens-primary-nav { min-width:0; display:flex; max-width:72rem; margin:0 auto; align-items:center; flex-wrap:wrap; gap:var(--md-sys-measurement-space400); padding:var(--md-sys-measurement-space200) var(--md-sys-measurement-space300); }
.tokens-brand { display:inline-flex; align-items:center; gap:var(--md-sys-measurement-space150); text-decoration:none; flex-shrink:0; }
.tokens-brand-logo { width:var(--md-sys-measurement-space500); height:var(--md-sys-measurement-space500); object-fit:contain; flex-shrink:0; }
.tokens-nav-links { min-width:0; display:flex; flex:1; flex-wrap:wrap; justify-content:flex-end; gap:var(--md-sys-measurement-space300); }
.tokens-nav-link { color:var(--md-sys-color-on-surface-variant); text-decoration:none; }
.tokens-nav-link:hover, .tokens-nav-link:focus-visible { color:var(--md-sys-color-primary); }
.tokens-theme-controls { display:flex; align-items:center; gap:var(--md-sys-measurement-space150); }
.tokens-theme-controls button { display:grid; place-items:center; width:var(--md-sys-measurement-space500); height:var(--md-sys-measurement-space500); border:0; border-radius:var(--md-sys-shape-corner-full); background:transparent; color:var(--md-sys-color-on-surface-variant); }
.tokens-theme-controls button:hover { background:color-mix(in srgb, transparent, currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%)); }
.tokens-contrast-buttons { display:flex; gap:var(--md-sys-measurement-space50); padding:var(--md-sys-measurement-space50); border-radius:var(--md-sys-shape-corner-full); background:var(--md-sys-color-secondary-container); }
.tokens-contrast-buttons button { color:var(--md-sys-color-on-secondary-container); }
.tokens-contrast-buttons button[aria-pressed="true"] { background:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary); }
.tokens-contrast-buttons button[aria-pressed="true"]:hover { background:color-mix(in srgb, var(--md-sys-color-primary), var(--md-sys-color-on-primary) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%)); }
.tokens-main { display:flex; width:100%; max-width:72rem; flex:1; margin:0 auto; flex-direction:column; gap:var(--md-sys-measurement-space400); padding:var(--md-sys-measurement-space400) var(--md-sys-measurement-space300); }
.tokens-site-footer { background:var(--md-sys-color-surface-container-low); color:var(--md-sys-color-on-surface-variant); }
.tokens-footer-content { display:grid; grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr)); max-width:72rem; margin:0 auto; align-items:start; gap:var(--md-sys-measurement-space400); padding:var(--md-sys-measurement-space300); }
.tokens-footer-content > div { display:grid; gap:var(--md-sys-measurement-space100); }
.tokens-footer-content .md-typescale-title-medium { color:var(--md-sys-color-on-surface); }
.tokens-section { display:flex; flex-direction:column; gap:var(--md-sys-measurement-space150); }
.md-typescale-headline-medium { margin:0; font-family:var(--md-sys-typescale-headline-medium-font); font-size:var(--md-sys-typescale-headline-medium-size); line-height:var(--md-sys-typescale-headline-medium-line-height); font-weight:var(--md-sys-typescale-headline-medium-weight); letter-spacing:var(--md-sys-typescale-headline-medium-tracking); }
.md-typescale-title-medium { margin:0; font-family:var(--md-sys-typescale-title-medium-font); font-size:var(--md-sys-typescale-title-medium-size); line-height:var(--md-sys-typescale-title-medium-line-height); font-weight:var(--md-sys-typescale-title-medium-weight); letter-spacing:var(--md-sys-typescale-title-medium-tracking); }
.md-typescale-label-large { margin:0; font-family:var(--md-sys-typescale-label-large-font); font-size:var(--md-sys-typescale-label-large-size); line-height:var(--md-sys-typescale-label-large-line-height); font-weight:var(--md-sys-typescale-label-large-weight); letter-spacing:var(--md-sys-typescale-label-large-tracking); }
.md-typescale-body-large { margin:0; font-family:var(--md-sys-typescale-body-large-font); font-size:var(--md-sys-typescale-body-large-size); line-height:var(--md-sys-typescale-body-large-line-height); font-weight:var(--md-sys-typescale-body-large-weight); letter-spacing:var(--md-sys-typescale-body-large-tracking); }
.md-typescale-body-medium { margin:0; font-family:var(--md-sys-typescale-body-medium-font); font-size:var(--md-sys-typescale-body-medium-size); line-height:var(--md-sys-typescale-body-medium-line-height); font-weight:var(--md-sys-typescale-body-medium-weight); letter-spacing:var(--md-sys-typescale-body-medium-tracking); }
.md-typescale-body-small { margin:0; font-family:var(--md-sys-typescale-body-small-font); font-size:var(--md-sys-typescale-body-small-size); line-height:var(--md-sys-typescale-body-small-line-height); font-weight:var(--md-sys-typescale-body-small-weight); letter-spacing:var(--md-sys-typescale-body-small-tracking); }
.tokens-metadata { margin:0; color:var(--md-sys-color-on-surface-variant); font-size:var(--md-sys-typescale-body-small-size); line-height:var(--md-sys-typescale-body-small-line-height); }
.md-typescale-body-small { color:var(--md-sys-color-on-surface-variant); }
.tokens-code, .tokens-token-name { font-family:ui-monospace, monospace; font-size:var(--md-sys-typescale-body-medium-size); }
.tokens-code { padding:var(--md-sys-measurement-space25) var(--md-sys-measurement-space50); border-radius:var(--md-sys-shape-corner-extra-small); background:var(--md-sys-color-surface-container); overflow-wrap:anywhere; }
.tokens-link { color:var(--md-sys-color-primary); text-decoration:none; }
.tokens-link:hover { text-decoration:underline; }
.tokens-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:var(--md-sys-measurement-space200); list-style:none; margin:0; padding:0; }
.tokens-card, .tokens-list-panel, .tokens-change-card { border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-medium); background:var(--md-sys-color-surface-container-low); padding:var(--md-sys-measurement-space200); }
.tokens-card small { display:block; margin-top:var(--md-sys-measurement-space50); color:var(--md-sys-color-on-surface-variant); }
.tokens-card:hover { border-color:var(--md-sys-color-primary); }
.tokens-search-form { display:flex; flex-direction:column; gap:var(--md-sys-measurement-space100); max-width:36rem; }
.tokens-search-input { width:100%; min-height:var(--md-comp-outlined-text-field-container-height); padding:var(--md-sys-measurement-space200); border:var(--md-comp-outlined-text-field-outline-width) solid var(--md-comp-outlined-text-field-outline-color); border-radius:var(--md-sys-shape-corner-extra-small); background:var(--md-sys-color-surface-container-low); }
.tokens-source-list, .tokens-subject-list { list-style:none; margin:0; padding:0; }
.tokens-list-item { flex-wrap:wrap; display:flex; align-items:baseline; gap:var(--md-sys-measurement-space100); padding:var(--md-sys-measurement-space100) 0; border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-list-item:last-child { border:0; }
.tokens-back-link, .tokens-actions { margin:0; }
.tokens-change-card + .tokens-change-card { margin-top:var(--md-sys-measurement-space200); }
.tokens-pagination { display:flex; align-items:center; justify-content:center; gap:var(--md-sys-measurement-space200); padding:var(--md-sys-measurement-space200) 0; }
@media(max-width:640px) {
  .tokens-primary-nav { align-items:flex-start; flex-direction:column; gap:var(--md-sys-measurement-space100); }
  .tokens-nav-links { justify-content:flex-start; gap:var(--md-sys-measurement-space200); }
  .tokens-main { padding:var(--md-sys-measurement-space200); }
  .tokens-footer-content { grid-template-columns:1fr; padding:var(--md-sys-measurement-space200); }
}