/* A: one shared rail, with a reveal action and persistent switches.
   Important layer isolates the opt-in family from legacy page button skins. */
@layer ak-utility-controls {
  #dteGlobalAlertBar,#panel-chart .ch-alert-controls {
    --u-surface:color-mix(in srgb,var(--aku-copy) 12%,var(--aku-sky-2));
    --u-on:color-mix(in srgb,var(--aku-w-knowledge) 72%,var(--aku-sky-3));
    --u-reveal-top:var(--aku-paper);--u-reveal-bottom:color-mix(in srgb,var(--aku-paper) 86%,var(--aku-copy));--u-reveal-ink:var(--aku-primary-ink);
  }
  html[data-theme=light] #dteGlobalAlertBar,html[data-theme=light] #panel-chart .ch-alert-controls {
    --u-surface:color-mix(in srgb,var(--aku-copy) 6%,var(--aku-paper));--u-on:color-mix(in srgb,var(--aku-w-knowledge) 80%,var(--aku-ink));
    --u-reveal-top:color-mix(in srgb,var(--aku-ink) 80%,var(--aku-copy));--u-reveal-bottom:var(--aku-ink);--u-reveal-ink:var(--aku-paper);
  }
  #dteGlobalAlertBar .dgab-main-row {display:block!important;}
  #dteGlobalAlertBar .dgab-controls,#panel-chart .ch-alert-controls {
    display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:10px!important;min-width:0!important;max-width:100%!important;padding:8px 10px!important;
    border:1px solid var(--aku-line)!important;border-radius:14px!important;background:linear-gradient(180deg,var(--u-surface),var(--aku-sky-3))!important;
    box-shadow:inset 0 1px color-mix(in srgb,var(--aku-paper) 12%,transparent),0 6px 16px -12px var(--aku-sky-3)!important;
  }
  #dteGlobalAlertBar .dgab-controls {margin-top:14px!important;}
  .dgab-settings {display:inline-flex!important;align-items:center!important;flex-wrap:wrap!important;gap:12px!important;padding-inline:8px!important;border-inline:1px solid var(--aku-line)!important;max-width:100%!important;}
  #dteGlobalPermBtn {margin-inline-start:auto!important;}
  #panel-chart .ch-live-strip {min-width:0!important;max-width:100%!important;}
  #panel-chart #chLive {white-space:normal!important;max-width:100%!important;}
  .aku-utility {
    appearance:none;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;position:relative!important;
    min-height:38px!important;height:auto!important;width:auto!important;max-width:100%!important;padding:7px 10px!important;border:1px solid transparent!important;border-radius:10px!important;
    background:transparent!important;color:var(--aku-text)!important;box-shadow:none!important;font:600 .875rem/1.45 var(--aku-font-body)!important;cursor:pointer!important;text-align:start!important;text-decoration:none!important;
    transform:none!important;transform-style:flat!important;transition:translate 180ms ease,box-shadow 180ms ease,border-color 180ms ease!important;
  }
  .aku-utility:not(:disabled):hover,.aku-utility:focus-visible {translate:0 -1px!important;border-color:var(--aku-line)!important;background:color-mix(in srgb,var(--aku-copy) 10%,transparent)!important;color:var(--aku-text)!important;}
  .aku-utility:focus-visible {outline:2px solid var(--aku-accent)!important;outline-offset:4px!important;}
  .aku-utility:not(:disabled):active {translate:0 1px!important;}
  .aku-utility .aku-util-label {min-width:0!important;color:inherit!important;white-space:normal!important;}
  .aku-utility .aku-util-icon {display:inline-flex!important;flex:0 0 16px!important;width:16px!important;height:16px!important;color:inherit!important;transition:rotate 180ms ease,translate 180ms ease!important;}
  .aku-utility .aku-util-icon svg {width:100%!important;height:100%!important;fill:currentColor!important;overflow:visible;}
  /* Library bell keeps its coloured pixels; utility motion stays on the button. */
  .aku-utility .aku-util-icon .ak-px {animation:none!important;filter:none!important;vertical-align:initial!important;}
  .aku-utility .aku-util-icon .ak-px .tw {display:none!important;}
  .aku-utility:not(:disabled):hover .aku-util-icon {rotate:-7deg;translate:0 -1px;}
  /* Lock fill and ink together in native hover/focus as well as rest/open. */
  .aku-utility[data-aku-utility=reveal],.aku-utility[data-aku-utility=reveal]:not(:disabled):hover,.aku-utility[data-aku-utility=reveal]:focus-visible {
    background:linear-gradient(180deg,var(--u-reveal-top),var(--u-reveal-bottom))!important;color:var(--u-reveal-ink)!important;border-color:var(--aku-copy)!important;
    box-shadow:inset 0 1px color-mix(in srgb,var(--aku-paper) 50%,transparent),0 5px 12px -7px var(--aku-sky-1)!important;
  }
  .aku-utility[data-aku-utility=reveal]:not(:disabled):hover {box-shadow:inset 0 1px color-mix(in srgb,var(--aku-paper) 50%,transparent),0 0 0 2px color-mix(in srgb,var(--aku-copy) 22%,transparent),0 6px 14px -7px var(--aku-sky-1)!important;}
  .aku-util-count {display:inline-block!important;min-width:1.45em!important;min-height:0!important;padding:0 5px!important;border:0!important;border-inline-start:1px solid currentColor!important;border-radius:0!important;background:transparent!important;color:inherit!important;text-align:center!important;font:700 .9em/1.45 var(--aku-font-mono)!important;}
  .aku-util-chevron {flex:0 0 12px!important;width:12px!important;height:12px!important;fill:none!important;stroke:currentColor!important;stroke-width:2;transition:rotate 200ms ease!important;}
  [data-aku-utility=reveal][data-state=open] .aku-util-chevron {rotate:90deg;}
  .aku-util-track {position:relative!important;display:inline-block!important;flex:0 0 3.2em!important;width:3.2em!important;height:1.65em!important;border-radius:999px!important;background:var(--aku-copy)!important;color:var(--aku-sky-1)!important;box-shadow:inset 0 2px 4px color-mix(in srgb,var(--aku-sky-1) 40%,transparent)!important;}
  [data-state=on] .aku-util-track {background:var(--u-on)!important;}
  .aku-util-track .aku-util-state {position:absolute!important;inset-inline-end:.3em!important;top:50%!important;translate:0 -50%!important;font-size:.75em!important;line-height:1.4!important;color:var(--aku-sky-1)!important;white-space:nowrap!important;}
  [data-state=on] .aku-util-track .aku-util-state {inset-inline-end:auto!important;inset-inline-start:.3em!important;color:var(--aku-paper)!important;}
  .aku-util-knob {position:absolute!important;left:.15em!important;top:.25em!important;width:1.15em!important;height:1.15em!important;border:1px solid var(--aku-line)!important;border-radius:50%!important;background:var(--aku-paper)!important;box-shadow:0 1px 3px color-mix(in srgb,var(--aku-sky-1) 60%,transparent)!important;transition:translate 200ms cubic-bezier(.2,.8,.2,1)!important;}
  [data-state=on] .aku-util-knob {translate:1.7em 0!important;}
  .aku-utility[data-aku-utility=permission] {border-color:var(--aku-copy)!important;box-shadow:inset 0 1px color-mix(in srgb,var(--aku-paper) 12%,transparent),0 3px 7px -5px var(--aku-sky-1)!important;}
  [data-aku-utility=permission]>.aku-util-state {font-size:.82em!important;white-space:nowrap!important;color:var(--aku-copy)!important;}
  [data-aku-utility=permission]>.aku-util-state:empty,[data-aku-utility=permission]>.aku-util-permission-mark:empty {display:none!important;}
  .aku-util-permission-mark {display:inline-grid!important;place-items:center!important;width:1.1em!important;height:1.4em!important;border:0!important;border-radius:0!important;font-weight:700!important;line-height:1!important;color:var(--aku-copy)!important;}
  .aku-utility:disabled {cursor:not-allowed!important;border:1px dashed var(--aku-line)!important;color:var(--aku-copy)!important;box-shadow:none!important;translate:none!important;}
  .aku-utility:disabled::after {display:none!important;}
  #dteAlertExamples {overflow:visible!important;margin-top:16px!important;}
  #dteAlertExamples>summary {position:relative!important;overflow:hidden!important;gap:9px!important;border:1px solid var(--aku-line)!important;border-radius:12px!important;background:transparent!important;color:var(--aku-copy)!important;box-shadow:inset 0 1px color-mix(in srgb,var(--aku-paper) 10%,transparent)!important;}
  #dteAlertExamples>summary::before {content:none!important;display:none!important;}
  #dteAlertExamples .dgab-test-icon {display:inline-flex!important;flex:0 0 16px!important;width:16px!important;height:16px!important;}
  #dteAlertExamples .dgab-test-icon svg {width:100%!important;height:100%!important;fill:currentColor!important;}
  #dteAlertExamples .dgab-fold-state {display:inline-flex!important;align-items:center!important;gap:7px!important;margin-inline-start:5px!important;}
  #dteAlertExamples .dgab-fold-state::before {content:'เปิด'!important;}
  #dteAlertExamples[open] .dgab-fold-state::before {content:'ปิด'!important;}
  #dteAlertExamples .dgab-fold-state::after {content:''!important;display:block!important;width:6px!important;height:6px!important;border:0!important;border-right:1.5px solid currentColor!important;border-bottom:1.5px solid currentColor!important;rotate:45deg!important;translate:0 -2px!important;transition:rotate 180ms ease!important;}
  #dteAlertExamples[open] .dgab-fold-state::after {rotate:225deg!important;translate:0 2px!important;}
  #dteGlobalAlertStatus {color:var(--aku-copy)!important;max-width:100%!important;line-height:1.6!important;}
  #dteAlertExamples>summary:hover,#dteAlertExamples>summary:focus-visible {border-color:var(--aku-copy)!important;color:var(--aku-text)!important;translate:0 -1px!important;background:color-mix(in srgb,var(--aku-copy) 10%,transparent)!important;}
  .aku-utility-help {margin:14px 0 0!important;padding:10px 14px!important;border-inline-start:3px solid var(--aku-warn)!important;border-radius:0 10px 10px 0!important;background:var(--aku-sky-2)!important;color:var(--aku-text)!important;font:400 .9rem/1.65 var(--aku-font-body)!important;}
  .aku-utility-help[hidden] {display:none!important;}
  .aku-utility:not(:disabled)::after {content:''!important;display:block!important;position:absolute;pointer-events:none;left:35%;bottom:3px;width:25%;height:1px;background:currentColor;opacity:0;animation:akuControlGlint 6s ease-in-out infinite;}
  html[data-motion=paused] .aku-utility::after,.aku-utility[data-offscreen]::after {animation-play-state:paused!important;}
  @media(max-width:720px) {
    #dteGlobalAlertBar .dgab-controls {padding:8px!important;gap:8px!important;}
    .dgab-settings {flex-basis:100%!important;border:0!important;padding:0!important;gap:8px!important;}
    #dteGlobalPermBtn {margin-inline-start:0!important;}
    .aku-utility {padding:7px 6px!important;gap:6px!important;}
  }
  @media(max-width:359px) {.aku-utility[data-aku-utility=switch] .aku-util-icon {display:none!important;}}
  @media(prefers-reduced-motion:reduce) {.aku-utility,.aku-utility *,#dteAlertExamples .dgab-fold-state::after {transition:none!important;}.aku-utility::after {animation:none!important;}}
}