.tokens-subject-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:var(--md-sys-measurement-space200); }
.tokens-subject-actions { display:flex; flex-wrap:wrap; gap:var(--md-sys-measurement-space250); align-items: center; }

/* Material system and component tokens supplied by the served publication.
   Custom: table widths, nesting layout, responsive breakpoint and disclosure
   rotation. Dialogs use a border: the source gives elevation dp, not CSS shadows. */
.tokens-token-browser {
  container-type:inline-size;
  color:var(--md-sys-color-on-surface);
  background:var(--md-sys-color-surface-container-low);
  border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant);
  border-radius:var(--md-sys-shape-corner-large);
  overflow:hidden;
  font-family:var(--md-sys-typescale-body-large-font);
  letter-spacing:var(--md-sys-typescale-body-large-tracking);
  font-size:var(--md-sys-typescale-body-large-size);
  line-height:var(--md-sys-typescale-body-large-line-height);
}
.tokens-token-browser svg { width:var(--md-comp-dialog-with-icon-icon-size); height:var(--md-comp-dialog-with-icon-icon-size); flex:none; }
.tokens-token-browser button, .tokens-token-browser select, .tokens-token-browser input { font:inherit; color:inherit; }
.tokens-token-browser button:focus-visible, .tokens-token-browser select:focus-visible,
.tokens-token-browser input:focus-visible, .tokens-token-folder summary: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-visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.tokens-token-toolbar { display:grid; grid-template-columns:minmax(0,1fr) 234px auto; align-items:center; gap:var(--md-sys-measurement-space100); padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space150); min-height:var(--md-sys-measurement-space700); border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-token-browser .tokens-token-set { justify-self:start; display:flex; align-items:center; gap:var(--md-sys-measurement-space150); max-width:100%; border:0; border-radius:var(--md-sys-shape-corner-small); background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); padding:var(--md-sys-measurement-space75) var(--md-sys-measurement-space150); font-size:var(--md-sys-typescale-label-large-size); line-height:var(--md-sys-typescale-label-large-line-height); font-weight:bold; }
.tokens-token-browser .tokens-token-set svg { width:var(--md-sys-measurement-space200); height:var(--md-sys-measurement-space200); }
.tokens-token-set-menu { position:fixed; inset:auto; top:20%; left:var(--md-sys-measurement-space200); margin:0; width:min(400px,calc(100vw - var(--md-sys-measurement-space400))); max-height:calc(100dvh - var(--md-sys-measurement-space400)); overflow:auto; padding:var(--md-sys-measurement-space100); 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); color:var(--md-sys-color-on-surface); }
.tokens-token-set-menu section + section { border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-token-set-menu h3, .tokens-token-set-overview { display:block; padding:var(--md-sys-measurement-space150); }
.tokens-token-set-menu ul { list-style:none; padding:0; margin:0; }
.tokens-token-set-menu li a { display:flex; align-items:center; gap:var(--md-sys-measurement-space150); min-height:var(--md-sys-measurement-space600); padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space150); border-radius:var(--md-sys-shape-corner-small); text-decoration:none; }
.tokens-token-set-menu a[aria-current="page"] { background:var(--md-sys-color-secondary-container); color:var(--md-sys-color-on-secondary-container); }
.tokens-token-set-menu a:not([aria-current="page"]) > svg { visibility:hidden; }
.tokens-token-set-menu li a:hover { background:color-mix(in srgb,transparent,currentColor calc(var(--md-sys-state-hover-state-layer-opacity) * 100%)); }
.tokens-token-set-menu a[aria-current="page"]:hover { background:color-mix(in srgb,var(--md-sys-color-secondary-container),var(--md-sys-color-on-secondary-container) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%)); }
.tokens-token-tools { display:flex; gap:var(--md-sys-measurement-space50); flex-shrink:0; }
.tokens-token-search { min-width:0; background:var(--md-sys-color-surface); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); border-radius:var(--md-sys-shape-corner-full); width:234px; height:var(--md-sys-measurement-space500); display:flex; align-items:center; gap:var(--md-sys-measurement-space150); padding:0 var(--md-sys-measurement-space175); }
.tokens-token-search input { border:0; outline:0; background:transparent; width:100%; min-width:0; }
.tokens-token-search input::placeholder { color:var(--md-sys-color-on-surface); opacity:1; }
.tokens-icon-button { display:grid; place-items:center; width:var(--md-sys-measurement-space400); height:var(--md-sys-measurement-space500); border:0; background:transparent; border-radius:var(--md-sys-shape-corner-extra-large); color:var(--md-sys-color-on-surface-variant)!important; }
.tokens-icon-button:hover { background:var(--md-sys-color-surface-container-high); }
.tokens-icon-button[aria-pressed="true"]:not([data-action="previews"]) { background:var(--md-sys-color-secondary-container); }
.tokens-token-columns { display:grid; grid-template-columns:minmax(0,1fr) 248px; align-items:center; padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200); min-height:var(--md-sys-measurement-space600); border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-token-columns>span:first-child { padding-left:var(--md-sys-measurement-space100); }
.tokens-context-button { max-width:100%; flex-wrap:wrap; display:flex; align-items:center; justify-content:center; gap:var(--md-sys-measurement-space200); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-small); min-height:var(--md-sys-measurement-space400); justify-self:center; padding:var(--md-sys-measurement-space50) var(--md-sys-measurement-space150); background:transparent; }
.tokens-context-button svg { height:var(--md-sys-measurement-space200); width:var(--md-sys-measurement-space200); }
.tokens-token-folder { border:0; margin:0; }
.tokens-token-folder[open]:not(:last-child), .tokens-token-table-wrap:not(:last-child) { border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-token-folder>summary {
  display:flex; align-items:center; gap:var(--md-sys-measurement-space150); padding:0 var(--md-sys-measurement-space300); height:var(--md-sys-measurement-space800);
  border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); cursor:pointer; list-style:none;
}
.tokens-token-folder>summary::-webkit-details-marker { display:none; }
.tokens-token-groups > .tokens-token-folder:last-child:not([open]) > summary { border-bottom:0; }
.tokens-token-folder>summary>svg:last-child { margin-left:auto; height:var(--md-sys-measurement-space250); width:var(--md-sys-measurement-space250); }
.tokens-token-folder[open]>summary>svg:last-child { transform:rotate(180deg); }
.tokens-token-folder>summary:hover { background:var(--md-sys-color-surface-container-high); }
.tokens-token-subfolder>summary { padding-left:var(--md-sys-measurement-space450); }
.tokens-token-subfolder .tokens-token-subfolder>summary { padding-left:var(--md-sys-measurement-space600); }
.tokens-token-table { width:100%; table-layout:fixed; border-collapse:collapse; background:var(--md-sys-color-surface); }
.tokens-token-table th, .tokens-token-table td { padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200); border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); vertical-align:middle; font-weight:var(--md-sys-typescale-body-medium-weight); text-align:left; }
.tokens-token-table tbody tr:last-child > th, .tokens-token-table tbody tr:last-child > td { border-bottom:0; }
.tokens-token-value-column { width:280px; }
.tokens-token-table th { padding-left:var(--md-sys-measurement-space400); }
.tokens-token-description { display:block; }
.tokens-token-value { min-height:var(--md-sys-measurement-space700); border-radius:var(--md-sys-shape-corner-medium); background:var(--md-sys-color-surface-container-low); display:flex; align-items:center; justify-content:center; padding:var(--md-sys-measurement-space150) var(--md-sys-measurement-space200); text-align:center; overflow-wrap:anywhere; }
.tokens-token-color { background:linear-gradient(var(--tokens-preview-color),var(--tokens-preview-color)),var(--tokens-preview-on-dark); color:var(--tokens-preview-on-color); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); font-weight:var(--md-sys-typescale-label-large-weight); }
.tokens-token-source-name { display:none; overflow-wrap:anywhere; }
.tokens-token-reference { background:var(--md-sys-color-surface-container-low); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-medium); }
.tokens-token-reference>summary { min-height:var(--md-sys-measurement-space600); padding:var(--md-sys-measurement-space150); cursor:pointer; list-style:none; display:flex; flex-direction:column; gap:var(--md-sys-measurement-space50); }
.tokens-token-reference>summary::-webkit-details-marker { display:none; }
.tokens-token-reference code { font-family:ui-monospace, monospace; overflow-wrap:anywhere; }
.tokens-reference-toggle { display:flex; align-items:center; gap:var(--md-sys-measurement-space50); color:var(--md-sys-color-primary); }
.tokens-reference-hide, .tokens-token-reference[open] .tokens-reference-show { display:none; }
.tokens-token-reference[open] .tokens-reference-hide { display:inline; }
.tokens-token-reference[open] .tokens-reference-toggle svg { transform:rotate(180deg); }
.tokens-reference-chain { border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); padding:var(--md-sys-measurement-space150); }
.tokens-reference-chain ul { margin-top:var(--md-sys-measurement-space100); padding-left:var(--md-sys-measurement-space150); border-left:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); }
.tokens-reference-chain li { margin-bottom:var(--md-sys-measurement-space100); }
.tokens-reference-chain li > .tokens-material-symbol { width:var(--md-sys-measurement-space200); height:var(--md-sys-measurement-space200); color:var(--md-sys-color-primary); }
.tokens-reference-preview { display:flex; align-items:center; justify-content:flex-end; gap:var(--md-sys-measurement-space75); font-size:var(--md-sys-typescale-body-small-size); color:var(--md-sys-color-on-surface-variant); padding:var(--md-sys-measurement-space50) var(--md-sys-measurement-space100) 0; }
.tokens-reference-preview[style]::before { content:""; width:var(--md-sys-measurement-space150); height:var(--md-sys-measurement-space150); border-radius:var(--md-sys-shape-corner-full); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); background:var(--tokens-preview-color); }
.tokens-no-previews .tokens-reference-preview { display:none; }
.tokens-token-lifecycle { font-size:var(--md-sys-typescale-body-small-size); color:var(--md-sys-color-primary); margin-left:var(--md-sys-measurement-space100); }
.tokens-token-download button { font:inherit; color:inherit; background:transparent; border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-extra-small); padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space150); }
.tokens-token-download button { cursor:pointer; }
.tokens-token-download button:hover { background:var(--md-sys-color-outline-variant); }
.tokens-token-download dialog { color:var(--md-sys-color-on-surface); background:var(--md-sys-color-surface-container-low); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-small); width:440px; max-width:calc(100vw - var(--md-sys-measurement-space400)); max-height:calc(100vh - var(--md-sys-measurement-space400)); overflow:auto; padding:var(--md-sys-measurement-space300); }
.tokens-token-download dialog::backdrop { background:var(--md-comp-navigation-drawer-scrim-color); opacity:var(--md-comp-navigation-drawer-scrim-opacity); }
.tokens-token-download h2 { font-size:var(--md-sys-typescale-title-large-size); font-weight:var(--md-sys-typescale-label-large-weight); margin:0 0 var(--md-sys-measurement-space100); }
.tokens-download-table { font-size:var(--md-sys-typescale-body-medium-size); color:var(--md-sys-color-on-surface-variant); margin:0 0 var(--md-sys-measurement-space300); }
.tokens-token-download fieldset { border:0; padding:0; margin:0; }
.tokens-token-download legend { font-size:var(--md-sys-typescale-body-medium-size); margin-bottom:var(--md-sys-measurement-space100); }
.tokens-download-option { display:flex; align-items:baseline; gap:var(--md-sys-measurement-space150); padding:var(--md-sys-measurement-space200) 0; cursor:pointer; }
.tokens-download-option + .tokens-download-option { border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-download-option input { flex-shrink:0; accent-color:var(--md-sys-color-primary); }
.tokens-download-option strong { display:block; font-weight:var(--md-sys-typescale-label-large-weight); }
.tokens-download-option small { display:block; color:var(--md-sys-color-on-surface-variant); margin-top:var(--md-sys-measurement-space50); }
.tokens-download-help { color:var(--md-sys-color-on-surface-variant); font-size:var(--md-sys-typescale-body-small-size); margin:0 0 var(--md-sys-measurement-space100); }
.tokens-token-download dialog { width:560px; overflow:hidden; }
.tokens-token-download dialog > form { display:flex; flex-direction:column; max-height:calc(100dvh - 80px); }
.tokens-token-download fieldset { min-height:0; overflow-y:auto; }
.tokens-download-choices { min-height:0; overflow-y:auto; }
.tokens-download-choices fieldset { overflow:visible; }
.tokens-token-download footer { flex-shrink:0; }
.tokens-download-option > span { min-width:0; overflow-wrap:anywhere; }
.tokens-download-option .tokens-download-counts { color:var(--md-sys-color-on-surface); font-weight:var(--md-sys-typescale-label-large-weight); }
.tokens-download-preview { display:none; }
.tokens-download-option input:checked + span .tokens-download-preview { display:block; margin-top:var(--md-sys-measurement-space100); padding-left:var(--md-sys-measurement-space150); border-left:2px solid var(--md-sys-color-primary); }
.tokens-download-option:has(input:checked) strong { color:var(--md-sys-color-primary); }
.tokens-token-download footer { display:flex; justify-content:flex-end; gap:var(--md-sys-measurement-space100); margin-top:var(--md-sys-measurement-space200); padding-top:var(--md-sys-measurement-space200); border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-token-download [type="submit"] { color:var(--md-sys-color-surface-container-low); background:var(--md-sys-color-primary); border-color:var(--md-sys-color-primary); }
.tokens-token-download [type="submit"]:hover {  background:var(--md-sys-color-primary); }
.tokens-token-no-value { color:var(--md-sys-color-on-surface-variant); }
.tokens-token-browser.tokens-no-previews .tokens-token-value { background:transparent; border:0; color:var(--md-sys-color-on-surface); min-height:var(--md-sys-measurement-space500); font-weight:var(--md-sys-typescale-body-medium-weight); }
.tokens-token-browser.tokens-flat-view .tokens-token-folder>summary { display:none; }
.tokens-token-browser.tokens-flat-view .tokens-token-source-name { display:block; color:var(--md-sys-color-on-surface-variant); margin-top:var(--md-sys-measurement-space50); }
.tokens-context-dialog { color:var(--md-sys-color-on-surface); background:var(--md-sys-color-surface); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-extra-large); width:412px; max-width:calc(100vw - var(--md-sys-measurement-space400)); padding:var(--md-sys-measurement-space300) var(--md-sys-measurement-space300) 0;  max-height:85vh; }
.tokens-context-dialog::backdrop { background:var(--md-comp-navigation-drawer-scrim-color); opacity:var(--md-comp-navigation-drawer-scrim-opacity); }
.tokens-context-dialog h2 { font-size:var(--md-comp-dialog-headline-size); line-height:var(--md-comp-dialog-headline-line-height); letter-spacing:var(--md-comp-dialog-headline-tracking); font-weight:var(--md-sys-typescale-body-medium-weight); margin:0 0 var(--md-sys-measurement-space150); }
.tokens-context-dialog p { font-size:var(--md-sys-typescale-body-medium-size); margin:0 0 var(--md-sys-measurement-space300); }
.tokens-context-fields { max-height:50vh; overflow:auto; }
.tokens-context-fields fieldset { border:0; padding:0; margin:0 0 var(--md-sys-measurement-space300); }
.tokens-context-fields legend { margin-bottom:var(--md-sys-measurement-space150); }
.tokens-context-advanced>summary { cursor:pointer; color:var(--md-sys-color-primary); margin-bottom:var(--md-sys-measurement-space200); }
.tokens-context-options { display:flex; flex-wrap:wrap; gap:var(--md-sys-measurement-space100); }
.tokens-context-options label { max-width:100%; cursor:pointer; position:relative; }
.tokens-context-options input { position:absolute; opacity:0; width:100%; height:100%; }
.tokens-context-options span { overflow-wrap:anywhere; display:flex; align-items:center; min-height:var(--md-sys-measurement-space400); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); border-radius:var(--md-sys-shape-corner-small); padding:var(--md-sys-measurement-space50) var(--md-sys-measurement-space125); }
.tokens-context-options input:checked+span { color:var(--md-sys-color-surface); background:var(--md-sys-color-primary); border-color:var(--md-sys-color-primary); }
.tokens-context-options input+span svg { display:none; }
.tokens-context-options input:checked+span svg { display:inline-block; width:var(--md-sys-measurement-space200); height:var(--md-sys-measurement-space200); margin-right:var(--md-sys-measurement-space100); }
.tokens-context-options input:focus-visible+span { 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-context-dialog footer { display:flex; justify-content:flex-end; gap:var(--md-sys-measurement-space300); border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); margin:0 calc(-1 * var(--md-sys-measurement-space300)); padding:var(--md-sys-measurement-space250) var(--md-sys-measurement-space400); }
.tokens-context-dialog footer button { border:0; background:none; color:var(--md-sys-color-primary); }
.tokens-empty { padding:var(--md-sys-measurement-space300); }
.tokens-timeline-batch { border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); padding-top:var(--md-sys-measurement-space300); }
.tokens-change-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:var(--md-sys-measurement-space150); padding:var(--md-sys-measurement-space200) 0 0; margin-bottom:calc(-1 * var(--md-sys-measurement-space200)); }
.tokens-change-filter-actions { display:flex; align-items:center; gap:var(--md-sys-measurement-space150); min-height:var(--md-comp-outlined-text-field-container-height); }
.tokens-change-filters label { min-width:0; max-width:100%; display:flex; flex-direction:column; gap:var(--md-sys-measurement-space75); }
.tokens-change-filters select, .tokens-change-filters input, .tokens-change-filters button { font:inherit; color:inherit; background:var(--md-sys-color-surface-container-low); border:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline); border-radius:var(--md-sys-shape-corner-extra-small); padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space125); min-height:var(--md-comp-outlined-text-field-container-height); max-width:100%; }
.tokens-change-filters input { width:200px; }
.tokens-change-filters button { cursor:pointer; }
.tokens-change-counts { color:var(--md-sys-color-on-surface-variant); }
.tokens-material-symbol { display:inline-block; width:var(--md-sys-measurement-space250); height:var(--md-sys-measurement-space250); flex-shrink:0; vertical-align:middle; }
.tokens-change-disclosure > summary { cursor:pointer; display:grid; grid-template-columns:var(--md-sys-measurement-space250) minmax(0,1fr) auto; gap:var(--md-sys-measurement-space100) var(--md-sys-measurement-space150); list-style:none; }
.tokens-change-disclosure > summary > .tokens-material-symbol { grid-column:1; grid-row:1; }
.tokens-change-disclosure[open] > summary > .tokens-material-symbol { transform:rotate(90deg); }
.tokens-change-disclosure > summary h3, .tokens-change-disclosure > summary h4 { grid-column:2; grid-row:1; }
.tokens-change-disclosure > summary .tokens-change-status { grid-column:3; grid-row:1; }
.tokens-change-disclosure > summary .tokens-change-context-summary { grid-column:2 / -1; margin:0; }
.tokens-change-disclosure > summary::-webkit-details-marker { display:none; }
@media(max-width:639px) { .tokens-change-filters label { width:100%; } .tokens-change-filters input { width:100%; } }
.tokens-timeline-batch > h2 { margin-bottom:var(--md-sys-measurement-space100); }
.tokens-change-heading { display:flex; justify-content:space-between; align-items:center; gap:var(--md-sys-measurement-space200); }
.tokens-change-heading h3, .tokens-change-heading h4 { margin:0; font-size:inherit; font-weight:var(--md-sys-typescale-label-large-weight); overflow-wrap:anywhere; }
.tokens-change-status { color:var(--md-sys-color-on-surface-variant); white-space:nowrap; }
.tokens-change-hierarchy { display:flex; flex-wrap:wrap; gap:var(--md-sys-measurement-space50) 0; list-style:none; padding:0; margin:var(--md-sys-measurement-space150) 0 0; color:var(--md-sys-color-on-surface-variant); }
.tokens-change-hierarchy li { display:flex; align-items:center; }
.tokens-change-hierarchy .tokens-material-symbol { width:var(--md-sys-measurement-space200); height:var(--md-sys-measurement-space200); margin:0 var(--md-sys-measurement-space75); }
.tokens-change-hierarchy li:last-child { color:var(--md-sys-color-on-surface); }
.tokens-change-context { margin:var(--md-sys-measurement-space100) 0 0; color:var(--md-sys-color-on-surface-variant); }
.tokens-change-summary { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:var(--md-sys-measurement-space300); padding:var(--md-sys-measurement-space200) 0; border-bottom:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); }
.tokens-change-summary h3, .tokens-change-summary p { margin:0; }
.tokens-change-summary p { color:var(--md-sys-color-on-surface-variant); }
.tokens-change-summary > a { display:inline-flex; align-items:center; gap:var(--md-sys-measurement-space50); }
.tokens-change-component-link { margin:0 0 var(--md-sys-measurement-space200); font-size:var(--md-sys-typescale-body-medium-size); }
@media(max-width:639px) { .tokens-change-summary { grid-template-columns:minmax(0,1fr) auto; gap:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200); } .tokens-change-summary h3 { grid-column:1 / -1; } }
.tokens-change-table { width:100%; table-layout:fixed; border-collapse:collapse; margin-top:var(--md-sys-measurement-space200); }
.tokens-change-table th, .tokens-change-table td { text-align:left; vertical-align:top; padding:var(--md-sys-measurement-space100); border-top:var(--md-comp-divider-thickness) solid var(--md-sys-color-outline-variant); overflow-wrap:anywhere; font-weight:normal; }
.tokens-change-table thead th { color:var(--md-sys-color-on-surface-variant); }
@media(max-width:640px) {
  .tokens-token-set { max-width:100%; }
  .tokens-token-columns { grid-template-columns:minmax(0,1fr) 140px; }
  .tokens-token-value-column { width:40%; }
  .tokens-token-table th { padding-left:var(--md-sys-measurement-space200); }
  .tokens-token-table td { padding:var(--md-sys-measurement-space100); }
  .tokens-token-value { padding:var(--md-sys-measurement-space100); }
}
/* Material component roles, rather than spacing aliases for controls. */
.tokens-token-download button, .tokens-change-filters button {
  min-height:var(--md-comp-filled-button-container-height);
  border-radius:var(--md-comp-filled-button-container-shape);
  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);
}
.tokens-token-download [type="submit"], .tokens-change-filters button {
  color:var(--md-comp-filled-button-label-text-color);
  background:var(--md-comp-filled-button-container-color);
  border-color:transparent;
}
.tokens-token-download [type="submit"]:hover, .tokens-change-filters button:hover {
  background:color-mix(in srgb, var(--md-comp-filled-button-container-color), var(--md-comp-filled-button-hover-state-layer-color) calc(var(--md-comp-filled-button-hover-state-layer-opacity) * 100%));
}
.tokens-context-dialog, .tokens-token-download dialog {
  background:var(--md-comp-dialog-container-color);
  border-radius:var(--md-comp-dialog-container-shape);
}
.tokens-context-options span {
  min-height:var(--md-comp-filter-chip-container-height);
  border-radius:var(--md-comp-filter-chip-container-shape);
}
.tokens-context-options input:checked+span {
  color:var(--md-comp-filter-chip-selected-label-text-color);
  background:var(--md-comp-filter-chip-flat-selected-container-color);
  border-color:transparent;
}
.tokens-icon-button { min-width:var(--md-sys-measurement-space600); min-height:var(--md-sys-measurement-space600); }
.tokens-icon-button:hover {
  background:color-mix(in srgb, transparent, var(--md-sys-color-on-surface) calc(var(--md-sys-state-hover-state-layer-opacity) * 100%));
}
.tokens-token-download h2 {
  font-family:var(--md-comp-dialog-headline-font);
  font-size:var(--md-comp-dialog-headline-size);
  line-height:var(--md-comp-dialog-headline-line-height);
  letter-spacing:var(--md-comp-dialog-headline-tracking);
}
.tokens-context-dialog footer button {
  min-height:var(--md-comp-text-button-container-height);
  border-radius:var(--md-comp-text-button-container-shape);
  padding:var(--md-sys-measurement-space100) var(--md-sys-measurement-space200);
  color:var(--md-comp-text-button-label-text-color);
}
.tokens-token-download button, .tokens-context-dialog footer button, .tokens-change-filters button {
  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);
}
.tokens-reference-chain ul { list-style:none; }
/* Readable content uses body roles; compact action labels use label roles.
   Only timestamps, counts and preview captions retain the small scale. */
.tokens-token-reference code, .tokens-token-source-name, .tokens-download-option small,
.tokens-change-context, .tokens-change-hierarchy, .tokens-change-counts,
.tokens-change-status, .tokens-change-table thead th, .tokens-change-filters label {
  font-size:var(--md-sys-typescale-body-medium-size);
  line-height:var(--md-sys-typescale-body-medium-line-height);
  letter-spacing:var(--md-sys-typescale-body-medium-tracking);
}
.tokens-change-filters select, .tokens-change-filters input {
  font-size:var(--md-sys-typescale-body-large-size);
  line-height:var(--md-sys-typescale-body-large-line-height);
  letter-spacing:var(--md-sys-typescale-body-large-tracking);
}
.tokens-reference-toggle, .tokens-token-toolbar select, .tokens-context-button {
  font-size:var(--md-sys-typescale-label-large-size);
  line-height:var(--md-sys-typescale-label-large-line-height);
  letter-spacing:var(--md-sys-typescale-label-large-tracking);
}
/* Reflow against the table's width, even when embedded in a narrow panel. */
@container (max-width:760px) {
  .tokens-token-toolbar { grid-template-columns:minmax(234px,1fr) auto; }
  .tokens-token-set { grid-column:1 / -1; }
  .tokens-token-search { width:100%; }
}
@container (max-width:480px) {
  .tokens-token-toolbar { grid-template-columns:minmax(0,1fr); }
  .tokens-token-tools { justify-self:end; }
  .tokens-token-columns { grid-template-columns:auto minmax(0,1fr); gap:var(--md-sys-measurement-space100); }
  .tokens-context-button { justify-self:end; }
}