/* Foundations specimen and shared popup structure. Load after the shared bundle. */
@layer components {
 html[data-warlock-design="v1"] .surface-popup { box-sizing:border-box; display:flex; flex-direction:column; min-width:0; max-height:100%; padding:16px 10px; color:var(--wl-sys-color-text); background:var(--wl-sys-color-surface); border:1px solid var(--wl-sys-color-border-essential); border-radius:12px; box-shadow:var(--wl-sys-shadow-raised); font:var(--wl-sys-type-body-weight) var(--wl-sys-type-body-size)/var(--wl-sys-type-body-line-height) var(--wl-sys-type-body-family); letter-spacing:var(--wl-sys-type-body-tracking); font-synthesis:none; }
 html[data-warlock-design="v1"] .surface-popup > :is(h1,p) { flex:none; margin-inline:6px; }
 html[data-warlock-design="v1"] .surface-popup > h1 { margin-block:0 4px; font:700 1.25rem/1.4 'Space Grotesk',sans-serif; letter-spacing:-.0125rem; }
 html[data-warlock-design="v1"] .surface-popup > p { margin-block:0 16px; color:var(--wl-sys-color-text-secondary); }
 html[data-warlock-design="v1"] .surface-popup .surface-controls { min-height:0; overflow:auto; padding:6px; scroll-padding:6px; display:flex; flex-direction:column; gap:6px; }
 html[data-warlock-design="v1"] .surface-popup .surface-controls > * { flex-shrink:0; }
 html[data-warlock-design="v1"] .surface-popup .surface-controls button { position:relative; box-sizing:border-box; min-height:2.25rem; padding:6px 12px; border:1px solid transparent; border-radius:6px; text-align:start; white-space:normal; overflow-wrap:anywhere; color:var(--wl-sys-color-text); background:transparent; font:500 .875rem/1.428571 Inter,sans-serif; scroll-margin:6px; }
 html[data-warlock-design="v1"] .surface-popup button:has(.control-detail:not(:empty)) { min-height:3.5rem; }
 html[data-warlock-design="v1"] .surface-popup :is(.control-label,.control-detail) { display:block; }
 html[data-warlock-design="v1"] .surface-popup .control-detail { color:var(--wl-sys-color-text-secondary); font:var(--wl-sys-type-detail-weight) var(--wl-sys-type-detail-size)/var(--wl-sys-type-detail-line-height) var(--wl-sys-type-detail-family); letter-spacing:var(--wl-sys-type-detail-tracking); margin-top:2px; }
 html[data-warlock-design="v1"] .surface-popup .control-detail:empty { display:none; }
 html[data-warlock-design="v1"] .surface-popup .launcher-search { box-sizing:border-box; min-height:2.75rem; padding:10px 12px; border:1px solid var(--wl-sys-color-border-essential); border-radius:6px; background:var(--wl-sys-color-surface-recessed); color:var(--wl-sys-color-text); font:400 .875rem/1.428571 Inter,sans-serif; scroll-margin:6px; }
 html[data-warlock-design="v1"] .surface-popup .launcher-search::placeholder { color:var(--wl-sys-color-text-secondary); opacity:1; }
 @media (pointer:coarse) { html[data-warlock-design="v1"] .surface-popup .surface-controls button { min-height:2.75rem; } html[data-warlock-design="v1"] .surface-popup button:has(.control-detail:not(:empty)) { min-height:3.75rem; } }
 @media (max-height:480px) { html[data-warlock-design="v1"] .surface-popup { overflow:auto; } html[data-warlock-design="v1"] .surface-popup .surface-controls { overflow:visible; flex:none; } }
}
@layer components {
 /* Unavailable cue slot: a constant inline-end reserve on every popup label, so the cue never changes control dimensions. */
 html[data-warlock-design="v1"] .surface-popup button > .control-label { padding-inline-end:calc(.75rem + 8px); }
}
@layer states {
 html[data-warlock-design="v1"] .surface-popup button { transition:none; }
 @media (hover:hover) and (pointer:fine) {
  html[data-warlock-design="v1"] .surface-popup button:not(:disabled):not([aria-disabled="true"]):hover { background:var(--wl-sys-color-surface-hover); }
  html[data-warlock-design="v1"] .surface-popup button:not(:disabled):not([aria-disabled="true"]):active { background:var(--wl-sys-color-surface-pressed); }
  /* Pointer feedback only: the transition exists while a quiet control is hovered or pressed. A control entering a
     candidate, selected, unavailable or busy state computes without a transition and changes at once; a selection leaving
     a hovered control settles over the 90ms pointer timing. */
  html[data-warlock-design="v1"] :is(.surface-popup[data-motion="full"], [data-motion="full"] .surface-popup:not([data-motion])) button:not(:disabled):not([aria-disabled="true"]):not([data-focus-only="true"]):not([aria-busy="true"]):not(:is([aria-current="true"],[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-expanded="true"])):hover { transition:background-color 90ms cubic-bezier(.2,0,0,1); }
  html[data-warlock-design="v1"] :is(.surface-popup[data-motion="full"], [data-motion="full"] .surface-popup:not([data-motion])) button:not(:disabled):not([aria-disabled="true"]):not([data-focus-only="true"]):not([aria-busy="true"]):not(:is([aria-current="true"],[aria-selected="true"],[aria-pressed="true"],[aria-checked="true"],[aria-expanded="true"])):active { transition:background-color 60ms cubic-bezier(.2,0,0,1); }
 }
 /* Settings selection: background plus a 3px inset bar; border and padding stay constant. */
 html[data-warlock-design="v1"] .surface-popup[data-mode="settings"] button[aria-current="true"] { background:var(--wl-sys-color-surface-selected); }
 html[data-warlock-design="v1"] .surface-popup[data-mode="settings"] button[aria-current="true"]::before { content:""; position:absolute; inset-block:6px; inset-inline-start:0; inline-size:3px; border-radius:2px; background:var(--wl-sys-color-brand-text); pointer-events:none; }
 @media (hover:hover) and (pointer:fine) {
  html[data-warlock-design="v1"] .surface-popup[data-mode="settings"] button[aria-current="true"]:not(:disabled):not([aria-disabled="true"]):hover { background:var(--wl-sys-color-surface-selected-hover); }
  html[data-warlock-design="v1"] .surface-popup[data-mode="settings"] button[aria-current="true"]:not(:disabled):not([aria-disabled="true"]):active { background:var(--wl-sys-color-surface-selected-pressed); }
 }
 html[data-warlock-design="v1"] .surface-popup :is(button,input):focus-visible { outline:2px solid var(--wl-sys-color-focus); outline-offset:2px; box-shadow:0 0 0 2px var(--wl-sys-color-focus-gap); z-index:1; }
 html[data-warlock-design="v1"] .surface-popup button:is(:disabled,[aria-disabled="true"]) { opacity:1; color:var(--wl-sys-color-text-secondary); }
 /* The slashed ring is decorative; native disabled or aria-disabled supplies semantics. It paints as the label's own
    background inside the reserved slot, so button ::before and ::after stay free for selection, checks and diagrams. */
 html[data-warlock-design="v1"] .surface-popup button:is(:disabled,[aria-disabled="true"]) > .control-label {
  background-image:linear-gradient(135deg, transparent calc(50% - .75px), currentColor calc(50% - .75px) calc(50% + .75px), transparent calc(50% + .75px)), radial-gradient(circle closest-side, transparent calc(100% - 1.5px), currentColor calc(100% - 1.25px) calc(100% - .25px), transparent 100%);
  background-repeat:no-repeat; background-origin:padding-box; background-clip:padding-box;
  background-size:calc(.75rem - 4px) calc(.75rem - 4px), .75rem .75rem;
  background-position:right 2px top .375rem, right 0 top .25rem;
  background-position:right 2px top calc((1lh - .75rem) / 2 + 2px), right 0 top calc((1lh - .75rem) / 2);
 }
 html[data-warlock-design="v1"] .surface-popup button:is(:disabled,[aria-disabled="true"]) > .control-label:dir(rtl) { background-position:left 2px top calc((1lh - .75rem) / 2 + 2px), left 0 top calc((1lh - .75rem) / 2); }
}
@layer accessibility {
 html[data-warlock-design="v1"] :is(.surface-popup[data-effects="off"],.surface-popup[data-effects-tier="off"],.surface-popup[data-theme="high-contrast"], [data-effects="off"] .surface-popup, [data-effects-tier="off"] .surface-popup, [data-theme="high-contrast"] .surface-popup:not([data-theme="night"]):not([data-theme="dawn"])) { box-shadow:none; }
 /* Reduced or unknown motion: zero-duration feedback, matching the effects precedence. */
 html[data-warlock-design="v1"] :is(.surface-popup[data-motion="reduced"], [data-motion="reduced"] .surface-popup:not([data-motion])) button { transition:none; }
 @media (prefers-reduced-motion:reduce) { html[data-warlock-design="v1"]:not([data-motion]) .surface-popup:not([data-motion]) button { transition:none; } }
 @media (forced-colors:active) {
  html[data-warlock-design="v1"] .surface-popup :is(button,input):focus-visible { forced-color-adjust:none; outline:2px solid Highlight; outline-offset:2px; box-shadow:0 0 0 2px Canvas; }
  html[data-warlock-design="v1"] .surface-popup[data-mode="settings"] button[aria-current="true"]::before { forced-color-adjust:none; background:CanvasText; }
  html[data-warlock-design="v1"] .surface-popup button:is(:disabled,[aria-disabled="true"]) > .control-label { forced-color-adjust:none; color:GrayText; }
 }
}