#cssExamplesView .css-example-section { padding: 22px 0; border-bottom: 1px solid var(--line); }
#cssExamplesView .css-example-section > h2 { margin-bottom: 18px; }
#cssExamplesView .css-example-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
#cssExamplesView .css-example-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
#cssExamplesView .css-sample { min-width: 0; }
#cssExamplesView .css-sample-caption { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 12px; }
#cssExamplesView .css-sample-caption > strong { font-size: 13px; }
#cssExamplesView code { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
#cssExamplesView .css-swatches { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; }
#cssExamplesView .css-swatches > div { display: grid; align-content: start; gap: 6px; min-width: 0; font-size: 12px; }
#cssExamplesView .css-swatch { display: block; height: 36px; border: 1px solid var(--line); border-radius: 4px; }
#cssExamplesView .css-fields { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
#cssExamplesView .css-form-actions { margin-top: 18px; }
#cssExamplesView .css-icon-button { display: inline-grid; place-items: center; width: 36px; min-width: 36px; height: 36px; min-height: 36px; padding: 6px; }
#cssExamplesView .css-select-example { display: block; margin: 0; max-width: 280px; }
#cssExamplesView input[aria-invalid="true"] { border-color: var(--md-error); }
#cssExamplesView #css-error-text { color: var(--md-error); }
#cssExamplesView input[type="range"], #cssExamplesView progress { display: block; width: 100%; max-width: 340px; margin-top: 12px; accent-color: var(--md-primary); }
#cssExamplesView input[type="checkbox"], #cssExamplesView input[type="radio"] { accent-color: var(--md-primary); }
#cssExamplesView .css-menu { position: relative; }
#cssExamplesView .css-menu > summary { display: grid; place-items: center; cursor: pointer; list-style: none; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 6px; font-size: 22px; }
#cssExamplesView .css-menu > summary::-webkit-details-marker { display: none; }
#cssExamplesView .css-menu > div { position: absolute; z-index: 3; top: 42px; right: 0; width: 190px; padding: 6px; display: grid; gap: 4px; border: 1px solid var(--line); background: var(--md-surface-container-low); border-radius: 6px; box-shadow: var(--md-elevation-2); }
#cssExamplesView .css-menu button { text-align: left; }
#cssExamplesView .css-accordion { padding: 14px 0; border-bottom: 1px solid var(--line); }
#cssExamplesView .css-accordion summary { cursor: pointer; font-weight: 650; }
#cssExamplesView .css-checklist { display: grid; gap: 14px; padding: 16px 0 0; }
#cssExamplesView dialog { width: min(540px,calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border: 1px solid var(--line); border-radius: 8px; color: var(--md-on-surface); background: var(--md-surface-container-low); }
#cssExamplesView dialog::backdrop { background: rgba(0,0,0,.42); }
#cssExamplesView .css-icon-sample { width: 76px; display: grid; justify-items: center; gap: 10px; }
#cssExamplesView .css-icon-sample img { width: 28px; height: 28px; }
#cssExamplesView .css-logo { width: 110px; height: 60px; object-fit: contain; }
#cssExamplesNotice { margin: 14px 0 0; }
#cssExamplesView .project-task-overview-item { cursor: default; }
#cssExamplesView .project-task-overview-item:hover { transform: none; }
@media(max-width:1000px) { #cssExamplesView .css-fields { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media(max-width:650px) {
  #cssExamplesView .css-example-grid, #cssExamplesView .css-fields { grid-template-columns: minmax(0,1fr); }
  #cssExamplesView .css-swatches { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #cssExamplesView .css-example-section { padding: 18px 0; }
}


/* Underline tab proposal, scoped to the component showcase. */
html body #cssExamplesView .settings-tabs {
  gap: 8px; padding: 0; border-bottom: 1px solid var(--line);
}
html body #cssExamplesView button[data-css-tab] {
  position: relative; padding: 12px 18px; min-height: 44px;
  border: 0 !important; border-radius: 0; background: transparent !important;
  color: var(--muted) !important; box-shadow: none !important;
}
html body #cssExamplesView button[data-css-tab]::after {
  content: ''; position: absolute; bottom: -1px; left: 12px; right: 12px;
  height: 3px; border-radius: 3px 3px 0 0; background: transparent;
}
html body #cssExamplesView button[data-css-tab]:hover { color: var(--ink) !important; }
html body #cssExamplesView button[data-css-tab][aria-selected="true"] { color: var(--md-primary) !important; }
html body #cssExamplesView button[data-css-tab][aria-selected="true"]::after { background: var(--md-primary); }

/* Native switch semantics and keyboard handling, with a visible toggle track. */
html body #cssExamplesView label:has(> input[role="switch"]) {
  display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer;
}
html body #cssExamplesView input[type="checkbox"][role="switch"] {
  appearance:none; -webkit-appearance:none; position:relative; flex:0 0 42px;
  width:42px; height:24px; min-height:24px; margin:0; padding:0;
  border:1px solid var(--md-outline); border-radius:999px;
  background:var(--md-surface-container-highest); cursor:pointer;
}
html body #cssExamplesView input[role="switch"]::before {
  content:""; position:absolute; top:3px; left:3px; width:16px; height:16px;
  border:0; border-radius:50%; background:var(--muted);
  transition:transform .15s ease;
}
html body #cssExamplesView input[role="switch"]:checked {
  background:var(--match-green); border-color:var(--match-green);
}
html body #cssExamplesView input[role="switch"]:checked::before {
  transform:translateX(18px); background:var(--md-surface-container-low);
}
html body #cssExamplesView input[role="switch"]:focus-visible {
  outline:2px solid var(--md-primary); outline-offset:3px;
}
@media (prefers-reduced-motion:reduce) {
  html body #cssExamplesView input[role="switch"]::before { transition:none; }
}
@media (forced-colors:active) {
  html body #cssExamplesView input[role="switch"] { appearance:auto; }
  html body #cssExamplesView input[role="switch"]::before { display:none; }
}


/* Segmented single selection; native radios retain arrow-key navigation. */
html body #cssExamplesView .css-segmented {
  display:inline-flex; gap:4px; padding:4px; border:1px solid var(--line);
  border-radius:9px; background:var(--md-surface-container);
}
html body #cssExamplesView .css-segmented label { position:relative; margin:0; cursor:pointer; }
html body #cssExamplesView .css-segmented input {
  position:absolute; width:1px; height:1px; padding:0; margin:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}
html body #cssExamplesView .css-segmented span {
  display:flex; align-items:center; justify-content:center; min-height:36px;
  padding:0 16px; border-radius:6px; color:var(--muted); font-weight:600;
}
html body #cssExamplesView .css-segmented input:checked + span {
  background:var(--md-surface-container-low); color:var(--ink);
  box-shadow:0 1px 3px rgb(0 0 0 / 18%);
}
html body #cssExamplesView .css-segmented label:hover input:not(:disabled):not(:checked) + span {
  background:var(--md-surface-container-high); color:var(--ink);
}
html body #cssExamplesView .css-segmented input:focus-visible + span {
  outline:2px solid var(--md-primary); outline-offset:1px;
}
html body #cssExamplesView .css-segmented input:disabled + span { opacity:.45; cursor:not-allowed; }

/* Inset dropdown chevron, using the field's current text color. */
html body #cssExamplesView .css-select-example label { position:relative; }
html body #cssExamplesView .css-select-example select {
  appearance:none; -webkit-appearance:none; padding-right:36px;
}
html body #cssExamplesView .css-select-example label::after {
  content:""; position:absolute; right:15px; bottom:17px;
  width:6px; height:6px; border-right:1.5px solid var(--ink);
  border-bottom:1.5px solid var(--ink); transform:rotate(45deg);
  pointer-events:none;
}
@media (forced-colors:active) {
  html body #cssExamplesView .css-select-example select { appearance:auto; }
  html body #cssExamplesView .css-select-example label::after { display:none; }
}

/* Dark-mode proposal: quiet version chips with color carried by the text. */
html:root[data-theme="dark"] body #cssExamplesView .version-chip {
  background:var(--md-surface-container-low);
  border:1px solid var(--line);
}
html:root[data-theme="dark"] body #cssExamplesView .version-chip.is-ok {
  color:#8bdbb1; background:color-mix(in srgb,#8bdbb1 7%,var(--md-surface));
  border-color:color-mix(in srgb,#8bdbb1 30%,var(--line));
}
html:root[data-theme="dark"] body #cssExamplesView .version-chip.is-warning {
  color:#e6c47a; background:color-mix(in srgb,#e6c47a 7%,var(--md-surface));
  border-color:color-mix(in srgb,#e6c47a 30%,var(--line));
}
html:root[data-theme="dark"] body #cssExamplesView .version-chip.is-missing {
  color:#fff; background:#d11124;
  border-color:#ff5060; font-weight:800;
}

/* Status badges follow the version-snippet treatment in the dark showcase. */
html:root[data-theme="dark"] body #cssExamplesView :is(.badge,.project-task-status,.project-task-overview-meta .is-age-warning,.project-task-overview-meta .is-age-critical) {
  border:1px solid var(--line); border-radius:999px;
  background:var(--md-surface-container-low); color:var(--ink);
}
html:root[data-theme="dark"] body #cssExamplesView .badge.muted { color:var(--muted); background:transparent; }
html:root[data-theme="dark"] body #cssExamplesView :is(.badge.match,.project-task-status.is-done) {
  color:#8bdbb1; background:color-mix(in srgb,#8bdbb1 7%,var(--md-surface));
  border-color:color-mix(in srgb,#8bdbb1 30%,var(--line));
}
html:root[data-theme="dark"] body #cssExamplesView :is(.project-task-status:not(.is-done),.project-task-overview-meta .is-age-warning) {
  color:#e6c47a; background:color-mix(in srgb,#e6c47a 7%,var(--md-surface));
  border-color:color-mix(in srgb,#e6c47a 30%,var(--line));
}
html:root[data-theme="dark"] body #cssExamplesView .project-task-overview-meta .is-age-critical {
  color:#fff; background:#d11124; border-color:#ff5060; font-weight:800;
}