/*
 * KAS specimen page styles.
 *
 * This file is intentionally separate from kas.css. The selectors below
 * describe this reference page's layout and demo-only enhancements; they are
 * not part of the reusable classless library.
 */

body > header, body > footer { max-width: 52rem; }
[data-skip-link] { position: fixed; z-index: 30; top: 1rem; left: 1rem; transform: translateY(-200%); padding: .65rem .9rem; border-radius: 999px; background: var(--kas-contrast-background); color: var(--kas-contrast-foreground); text-decoration: none; }
[data-skip-link]:focus-visible { transform: translateY(0); color: var(--kas-contrast-foreground); }
[data-kas-top-nav] { position: fixed; z-index: 40; top: 1rem; right: clamp(1rem, 3vw, 2rem); display: flex; justify-content: flex-end; }
[data-kas-top-nav] button { display: inline-flex; min-height: 2.6rem; align-items: center; gap: .45rem; padding: .55rem .8rem; border: 1px solid var(--kas-border); border-radius: 999px; background: color-mix(in srgb, var(--kas-surface) 88%, transparent); color: var(--kas-heading-foreground); box-shadow: var(--kas-elevation-subtle); backdrop-filter: blur(12px); }
[data-kas-top-nav] button:hover { border-color: var(--kas-action); background: var(--kas-surface); }
[data-kas-top-nav] svg { width: 1.1rem; height: 1.1rem; }
[data-kas-top-nav] [data-kas-theme-trigger-label] { color: var(--kas-muted-foreground); font-size: .85em; }
main:focus { outline: none; }
body > header { padding: 5.75rem 0 3rem; }
body > header > p:first-child { display: flex; gap: .65rem; align-items: baseline; color: var(--kas-action-strong); letter-spacing: .08em; text-transform: uppercase; }
body > header > p:first-child span { color: var(--kas-muted-foreground); font-size: .75rem; letter-spacing: .04em; }
body > header > p:nth-of-type(2) { max-width: 48ch; font-size: clamp(1.1rem, 2vw, 1.35rem); }
body > header nav { display: flex; flex-wrap: wrap; gap: .65rem 1rem; align-items: center; }
body > header aside { max-width: 38rem; margin-top: 3rem; padding: 1rem 1.2rem; border-left: 4px solid var(--kas-support); background: var(--kas-support-subtle); }
body > header aside p { margin: 0; }

main > section { margin: 2rem 0 4rem; padding: clamp(1.2rem, 3vw, 3rem); border: 1px solid var(--kas-border); border-radius: calc(var(--kas-radius) + 4px); background: var(--kas-surface); box-shadow: var(--kas-elevation-subtle); }
main > section > header { max-width: 58rem; margin-bottom: 2.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--kas-border); }
main > section > header p:first-child { margin-bottom: .4rem; color: var(--kas-action-strong); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
main > section > header h2 { margin: 0 0 .7rem; }
main > section > header p:last-child { max-width: 58ch; margin: 0; color: var(--kas-muted-foreground); }
main > section > [data-kas-layout="split"] { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .8fr); gap: 1.5rem; align-items: start; }
main > section[data-tone="dark"] { --kas-foreground: var(--kas-inverse-foreground, #ececf0); --kas-heading-foreground: var(--kas-inverse-heading-foreground, #ffffff); --kas-muted-foreground: var(--kas-inverse-muted-foreground, #c4c9d4); --kas-surface: var(--kas-inverse-surface, #202638); --kas-surface-raised: var(--kas-inverse-surface-raised, #252c3d); --kas-border: var(--kas-inverse-border, #3b455b); background: var(--kas-inverse-background, #171d2c); color: var(--kas-foreground); border-color: var(--kas-inverse-border-strong, #30384d); }
main > section[data-tone="dark"] h2, main > section[data-tone="dark"] h3, main > section[data-tone="dark"] h4, main > section[data-tone="dark"] h5, main > section[data-tone="dark"] h6, main > section[data-tone="dark"] legend, main > section[data-tone="dark"] label, main > section[data-tone="dark"] th { color: var(--kas-inverse-heading-foreground, #ffffff); }
main > section[data-tone="dark"] > header { border-color: var(--kas-inverse-border-strong, #30384d); }
main > section[data-tone="dark"] > header p:last-child { color: var(--kas-muted-foreground); }
main > section[data-tone="dark"] table, main > section[data-tone="dark"] td, main > section[data-tone="dark"] th { border-color: var(--kas-inverse-border, #3b455b); }
main > section[data-tone="accent"] { background: var(--kas-action); border-color: var(--kas-action); }
main > section[data-tone="accent"] h2, main > section[data-tone="accent"] h3, main > section[data-tone="accent"] p, main > section[data-tone="accent"] a { color: var(--kas-contrast-background); }
main > section[data-tone="accent"] > header p:first-child, main > section[data-tone="accent"] > header p:last-child, main > section[data-tone="accent"] small { color: var(--kas-contrast-background); }
main > section[data-tone="accent"] > header { border-color: rgb(17 21 34 / .22); }
main > section[data-tone="accent"] pre { background: rgb(17 21 34 / .9); }
main > section aside[data-tone="accent"] { padding: 1.25rem; border-radius: var(--kas-radius); background: var(--kas-highlight); color: var(--kas-contrast-background); }
main > section aside[data-tone="accent"] p { color: inherit; }
body > footer { margin-top: 5rem; padding-top: 1.5rem; border-top: 1px solid var(--kas-border); color: var(--kas-muted-foreground); }
body > footer p:first-child { color: var(--kas-heading-foreground); }

[data-kas-combobox] { position: relative; max-width: 34rem; }
[data-kas-combobox] > input { max-width: none; }
[data-kas-combobox] [role="listbox"] { position: absolute; z-index: 20; inset: calc(100% + .4rem) 0 auto; max-width: none; max-height: 15rem; overflow-y: auto; margin: 0; padding: .35rem; border: 1px solid var(--kas-border); border-radius: var(--kas-radius-small); background: var(--kas-surface); box-shadow: var(--kas-elevation-raised); color: var(--kas-foreground); list-style: none; }
[data-kas-combobox] [role="option"] { display: flex; width: 100%; margin: 0; padding: .65rem .75rem; border-radius: calc(var(--kas-radius-small) - 3px); color: var(--kas-foreground); cursor: pointer; flex-direction: column; gap: .1rem; }
[data-kas-combobox] [role="option"] + [role="option"] { margin-top: .15rem; }
[data-kas-combobox] [role="option"]:hover, [data-kas-combobox] [role="option"][aria-selected="true"] { background: var(--kas-action-subtle); color: var(--kas-heading-foreground); }
[data-kas-combobox] [data-kas-option-label] { color: var(--kas-muted-foreground); font-size: .85em; }
[data-kas-combobox] [role="option"]:hover [data-kas-option-label], [data-kas-combobox] [role="option"][aria-selected="true"] [data-kas-option-label] { color: inherit; opacity: .78; }
[data-kas-combobox] > small { display: block; margin-top: .55rem; }

[data-kas-customizer] { max-width: 68ch; }
[data-kas-customizer] > h3 { margin-top: 1.75rem; }
[data-kas-theme-tabs] { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 .4rem; }
[data-kas-theme-tabs] [role="tab"] { min-height: 2.4rem; padding: .5rem .85rem; border-color: var(--kas-border); background: transparent; color: var(--kas-foreground); }
[data-kas-theme-tabs] [role="tab"][aria-selected="true"] { border-color: var(--kas-contrast-background); background: var(--kas-contrast-background); color: var(--kas-contrast-foreground); }
[data-kas-palette-controls] { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .9rem; max-width: none; }
[data-kas-palette-controls] label { display: grid; gap: .35rem; margin: 0; font-size: .9rem; }
[data-kas-palette-controls] input[type="color"] { width: 100%; max-width: none; min-height: 2.8rem; padding: .25rem; }
[data-kas-customizer-actions] { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
[data-kas-customizer-actions] output { min-height: 1.4em; color: var(--kas-support); font-size: .9rem; }
[data-kas-customizer] pre { max-width: none; max-height: 24rem; }

[data-kas-theme-tray] { position: fixed; z-index: 35; right: 0; bottom: 0; left: 0; max-height: min(86vh, 58rem); overflow: auto; padding: 1rem; border-top: 1px solid var(--kas-border); background: color-mix(in srgb, var(--kas-page-background) 92%, transparent); box-shadow: 0 -16px 40px rgb(17 21 34 / .18); backdrop-filter: blur(18px); }
[data-kas-theme-tray][hidden] { display: none; }
[data-kas-theme-tray-shell] { width: min(100%, 76rem); margin: 0 auto; padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--kas-border); border-radius: var(--kas-radius); background: var(--kas-surface); color: var(--kas-foreground); }
[data-kas-theme-tray-header] { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
[data-kas-theme-tray-header] p:first-child { margin: 0 0 .35rem; color: var(--kas-action-strong); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
[data-kas-theme-tray-header] h2 { margin: 0 0 .45rem; font-size: clamp(1.6rem, 3vw, 2.5rem); }
[data-kas-theme-tray-header] p:last-child { max-width: 48ch; margin: 0; color: var(--kas-muted-foreground); }
[data-kas-theme-close] { display: inline-grid; width: 2.5rem; min-width: 2.5rem; height: 2.5rem; min-height: 2.5rem; padding: 0; place-items: center; border: 1px solid var(--kas-border); border-radius: 50%; background: transparent; color: var(--kas-heading-foreground); font-size: 1.5rem; line-height: 1; }
[data-kas-theme-close]:hover { border-color: var(--kas-action); background: var(--kas-action-subtle); }
[data-kas-theme-tray] [data-kas-customizer] { max-width: none; }
[data-kas-theme-tray] [data-kas-customizer] > p:not([data-kas-customizer-actions]) { max-width: 68ch; }
[data-kas-theme-tray] [data-kas-palette-controls] { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }

@media (max-width: 700px) {
  body > header { padding-top: 5rem; }
  main > section > [data-kas-layout="split"] { grid-template-columns: 1fr; }
  [data-kas-theme-tray] { padding: .6rem; }
  [data-kas-theme-tray-shell] { border-radius: var(--kas-radius-small); }
  [data-kas-theme-tray] [data-kas-palette-controls] { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
}

@media print {
  [data-kas-top-nav], [data-kas-theme-tray] { display: none; }
  body > header, main > section { border: 0; padding: 0; }
  main > section { break-inside: avoid; }
}