/* CORE component CSS. Components are className-driven so :hover / :active / :focus-visible
   are real CSS states, not JS. Every value comes from a token. */

/* ---- icon: pixelarticons glyph painted with currentColor via mask ---- */
.ag-icon{display:inline-block;flex:0 0 auto;background-color:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100% 100%;mask-size:100% 100%}

/* ---- button ---- */
.ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-family:var(--font-mono);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-caps);border:var(--bw-hair) solid transparent;background:none;cursor:pointer;clip-path:var(--clip-notch-4);position:relative;white-space:nowrap;transition:background-color var(--t-hover),color var(--t-hover),border-color var(--t-hover),transform var(--t-press),box-shadow var(--t-press),opacity var(--t-hover)}
.ag-btn[data-size="sm"]{font-size:var(--fs-micro);padding:var(--sp-2) var(--sp-3);min-height:28px}
.ag-btn[data-size="md"]{font-size:var(--fs-caption);padding:var(--sp-3) var(--sp-5);min-height:40px}
.ag-btn[data-size="lg"]{font-size:var(--fs-body-s);padding:var(--sp-4) var(--sp-8);min-height:52px}
.ag-btn[data-variant="primary"]{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-2)}
.ag-btn[data-variant="primary"]:hover{background:var(--mint-300);transform:var(--lift-hover);box-shadow:var(--shadow-3)}
.ag-btn[data-variant="secondary"]{color:var(--text-strong);border-color:var(--line-strong);background:var(--surface-raised);box-shadow:var(--shadow-1)}
.ag-btn[data-variant="secondary"]:hover{border-color:var(--accent);color:var(--accent);transform:var(--lift-hover);box-shadow:var(--shadow-2)}
.ag-btn[data-variant="ghost"]{color:var(--text-body)}
.ag-btn[data-variant="ghost"]:hover{color:var(--text-strong);background:var(--surface-hover)}
.ag-btn[data-variant="danger"]{background:var(--danger);color:var(--ink-1000);box-shadow:var(--shadow-2)}
.ag-btn[data-variant="danger"]:hover{background:var(--rose-300);transform:var(--lift-hover);box-shadow:var(--shadow-3)}
.ag-btn:active:not(:disabled){transform:var(--lift-press);box-shadow:none;transition-duration:var(--dur-1)}
.ag-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none}
.ag-btn[data-block="true"]{width:100%}
.ag-btn[data-loading="true"]{color:transparent}
.ag-btn[data-loading="true"]::after{content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;background:currentColor;color:var(--accent-ink);animation:ag-blink var(--dur-5) steps(2,end) infinite}

/* ---- icon button ---- */
.ag-iconbtn{display:inline-flex;align-items:center;justify-content:center;background:var(--surface-raised);color:var(--text-body);border:var(--bw-hair) solid var(--line);cursor:pointer;clip-path:var(--clip-notch-4);transition:color var(--t-hover),background-color var(--t-hover),border-color var(--t-hover),transform var(--t-press)}
.ag-iconbtn[data-size="sm"]{width:28px;height:28px}
.ag-iconbtn[data-size="md"]{width:40px;height:40px}
.ag-iconbtn[data-size="lg"]{width:48px;height:48px}
.ag-iconbtn:hover{color:var(--accent);border-color:var(--accent);transform:var(--lift-hover)}
.ag-iconbtn:active{transform:var(--lift-press)}
.ag-iconbtn[data-variant="bare"]{background:none;border-color:transparent}
.ag-iconbtn[data-variant="bare"]:hover{background:var(--surface-hover);border-color:transparent}
.ag-iconbtn:disabled{opacity:.4;cursor:not-allowed}

/* ---- panel ---- */
.ag-panel{position:relative;background:var(--surface-panel);border:var(--bw-hair) solid var(--line);clip-path:var(--clip-notch-8);color:var(--text-body)}
.ag-panel[data-variant="raised"]{background:var(--surface-raised);box-shadow:var(--shadow-panel)}
.ag-panel[data-variant="sunken"]{background:var(--surface-sunken);box-shadow:var(--shadow-sunken);border-color:var(--line-hairline)}
.ag-panel[data-variant="glass"]{background:color-mix(in oklab,var(--ink-800) 72%,transparent);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass)}
.ag-panel[data-accent="true"]{border-color:color-mix(in oklab,var(--accent) 45%,transparent);box-shadow:var(--glow-soft)}
.ag-panel__bar{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-bottom:var(--bw-hair) solid var(--line);background:var(--ink-800);min-height:32px}
.ag-panel__dots{display:flex;gap:3px;flex:0 0 auto}
.ag-panel__dots i{width:6px;height:6px;background:var(--line-strong);display:block}
.ag-panel__title{font:var(--type-hud);letter-spacing:var(--ls-hud);text-transform:uppercase;color:var(--text-muted);flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-panel__body{padding:var(--pad-panel)}
.ag-panel__body[data-flush="true"]{padding:0}

/* ---- badge ---- */
.ag-badge{display:inline-flex;align-items:center;gap:var(--sp-2);font-family:var(--font-mono);font-size:var(--fs-micro);font-weight:var(--fw-medium);text-transform:uppercase;letter-spacing:var(--ls-caps);padding:3px var(--sp-2);clip-path:var(--clip-notch-4);border:var(--bw-hair) solid transparent;line-height:1.5}
.ag-badge i{width:6px;height:6px;background:currentColor;display:block;flex:0 0 auto}
.ag-badge[data-variant="soft"]{background:color-mix(in oklab,currentColor 14%,transparent)}
.ag-badge[data-variant="outline"]{border-color:color-mix(in oklab,currentColor 45%,transparent)}
.ag-badge[data-variant="solid"]{background:currentColor}
.ag-badge[data-variant="solid"] span{color:var(--ink-1000);mix-blend-mode:normal}
.ag-badge[data-tone="published"]{color:var(--status-published)}
.ag-badge[data-tone="ongoing"]{color:var(--status-ongoing)}
.ag-badge[data-tone="exact"]{color:var(--status-exact)}
.ag-badge[data-tone="falsified"]{color:var(--status-falsified)}
.ag-badge[data-tone="private"]{color:var(--status-private)}
.ag-badge[data-tone="info"]{color:var(--info)}
.ag-badge[data-pulse="true"] i{animation:ag-glow-pulse 1.6s steps(4,end) infinite}

/* ---- tag ---- */
.ag-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:var(--fs-caption);color:var(--text-muted);background:var(--surface-sunken);border:var(--bw-hair) solid var(--line-hairline);padding:4px var(--sp-2);clip-path:var(--clip-notch-4);transition:color var(--t-hover),border-color var(--t-hover),background-color var(--t-hover)}
.ag-tag[data-interactive="true"]{cursor:pointer}
.ag-tag[data-interactive="true"]:hover{color:var(--text-strong);border-color:var(--line-strong);background:var(--surface-hover)}
.ag-tag[data-active="true"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

/* ---- keycap ---- */
.ag-key{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 5px;font-family:var(--font-pixel);font-size:var(--fs-hud);color:var(--text-body);background:var(--ink-600);border:var(--bw-hair) solid var(--line-strong);box-shadow:0 2px 0 0 var(--ink-1000);clip-path:var(--clip-notch-4);text-transform:uppercase}
.ag-key[data-pressed="true"]{transform:translate3d(0,2px,0);box-shadow:none;color:var(--accent);border-color:var(--accent)}
.ag-keyhint{display:inline-flex;align-items:center;gap:var(--sp-2);font:var(--type-label);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-faint)}