/* Native component classes for Astro and Worker HTML strings (docs/design-system.md §7).
   React islands use src/components/ui/* with the same tokens. Hover applies only to precise
   pointers that are not in touch mode (input-modality.js); press feedback stays in gallery.css. */

/* Button */
.ac-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ac-space-2);min-height:var(--ac-control-md);padding:0 18px;border:1px solid transparent;border-radius:var(--ac-radius-md);background:var(--ac-secondary);color:var(--ac-fg);font:var(--ac-weight-medium) var(--ac-text-base-sm)/1.25 var(--ac-font-sans);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--ac-duration-fast) var(--ac-ease-standard),border-color var(--ac-duration-fast) var(--ac-ease-standard),color var(--ac-duration-fast) var(--ac-ease-standard)}
.ac-btn svg{flex:none}
.ac-btn--primary{background:var(--ac-primary);color:var(--ac-primary-fg)}
.ac-btn--secondary{background:var(--ac-secondary);color:var(--ac-fg)}
.ac-btn--outline{background:transparent;border-color:var(--ac-border-strong);color:var(--ac-fg)}
.ac-btn--ghost{background:transparent;color:var(--ac-fg)}
.ac-btn--link{min-height:auto;padding:0;background:transparent;color:var(--ac-accent);border-radius:var(--ac-radius-xs)}
.ac-btn--danger{background:var(--ac-danger);color:var(--ac-danger-fg)}
.ac-btn--sm{min-height:var(--ac-control-sm);padding:0 12px}
.ac-btn--lg{min-height:var(--ac-control-lg);padding:0 20px;font-size:var(--ac-text-base)}
.ac-btn--block{display:flex;width:100%}
.ac-btn:is(:disabled,[aria-disabled="true"],[aria-busy="true"]){opacity:.5;cursor:not-allowed}
.ac-btn[aria-busy="true"]{cursor:progress}
.ac-spinner{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ac-spin .7s linear infinite}
@keyframes ac-spin{to{transform:rotate(360deg)}}
@media(hover:hover) and (pointer:fine){
  :where(:root:not([data-input-kind="touch"])) .ac-btn--primary:hover:where(:not(:disabled,[aria-disabled="true"],[aria-busy="true"])){background:var(--ac-primary-hover)}
  :where(:root:not([data-input-kind="touch"])) :is(.ac-btn--secondary,.ac-btn--ghost):hover:where(:not(:disabled,[aria-disabled="true"],[aria-busy="true"])){background:var(--ac-secondary-hover)}
  :where(:root:not([data-input-kind="touch"])) .ac-btn--outline:hover:where(:not(:disabled,[aria-disabled="true"],[aria-busy="true"])){background:var(--ac-secondary)}
  :where(:root:not([data-input-kind="touch"])) .ac-btn--link:hover{color:var(--ac-accent-hover);text-decoration:underline;text-underline-offset:3px}
}

/* Icon button */
.ac-icon-btn{display:inline-grid;place-items:center;width:var(--ac-control-md);height:var(--ac-control-md);padding:0;border:0;border-radius:var(--ac-radius-md);background:transparent;color:var(--ac-fg-muted);cursor:pointer;transition:background-color var(--ac-duration-fast),color var(--ac-duration-fast)}
@media(hover:hover) and (pointer:fine){:where(:root:not([data-input-kind="touch"])) .ac-icon-btn:hover:where(:not(:disabled,[aria-disabled="true"],[aria-busy="true"])){background:var(--ac-secondary);color:var(--ac-fg)}}

/* Field */
.ac-field{display:grid;gap:6px}
.ac-label{font-size:var(--ac-text-base-sm);font-weight:var(--ac-weight-medium);color:var(--ac-fg)}
.ac-help{font-size:var(--ac-text-sm);line-height:var(--ac-leading-sm);color:var(--ac-fg-muted)}
.ac-error{display:flex;align-items:center;gap:6px;font-size:var(--ac-text-sm);line-height:var(--ac-leading-sm);color:var(--ac-danger)}
.ac-input{width:100%;min-width:0;min-height:var(--ac-control-md);padding:0 12px;border:1px solid var(--ac-border-input);border-radius:var(--ac-radius-md);background:var(--ac-bg);color:var(--ac-fg);font:var(--ac-weight-regular) var(--ac-text-base)/1.4 var(--ac-font-sans);transition:border-color var(--ac-duration-fast),box-shadow var(--ac-duration-fast)}
textarea.ac-input{min-height:112px;padding:10px 12px;resize:vertical}
.ac-input::placeholder{color:var(--ac-fg-subtle)}
.ac-input:focus{outline:none;border-color:var(--ac-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac-focus) 25%,transparent)}
.ac-input[aria-invalid="true"]{border-color:var(--ac-danger)}

/* Chip (filters) */
.ac-chip-row{display:flex;gap:var(--ac-space-2);overflow-x:auto;scrollbar-width:none}
.ac-chip{display:inline-flex;align-items:center;gap:6px;flex:none;min-height:var(--ac-control-sm);padding:0 14px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-full);background:transparent;color:var(--ac-fg-muted);font:var(--ac-weight-medium) var(--ac-text-base-sm)/1 var(--ac-font-sans);text-decoration:none;cursor:pointer}
.ac-chip:is([aria-pressed="true"],[aria-checked="true"],[aria-current="page"]){background:var(--ac-fg);border-color:var(--ac-fg);color:var(--ac-bg)}
@media(hover:hover) and (pointer:fine){:where(:root:not([data-input-kind="touch"])) .ac-chip:not([aria-pressed="true"],[aria-checked="true"],[aria-current="page"]):hover{color:var(--ac-fg);border-color:var(--ac-fg-subtle)}}

/* Badge */
.ac-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:var(--ac-radius-full);background:var(--ac-surface);color:var(--ac-fg);font:var(--ac-weight-medium) var(--ac-text-xs)/1 var(--ac-font-sans);white-space:nowrap}
.ac-badge--official{background:var(--ac-accent-soft);color:var(--ac-accent)}
.ac-badge--success{background:var(--ac-success-bg);color:var(--ac-success)}
.ac-badge--warning{background:var(--ac-warning-bg);color:var(--ac-warning)}
.ac-badge--danger{background:var(--ac-danger-bg);color:var(--ac-danger)}
.ac-badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

/* Tabs / segmented control */
.ac-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:calc(var(--ac-radius-md) + 3px);background:var(--ac-surface)}
.ac-tab{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:0 14px;border:0;border-radius:var(--ac-radius-md);background:transparent;color:var(--ac-fg-muted);font:var(--ac-weight-medium) var(--ac-text-base-sm)/1 var(--ac-font-sans);text-decoration:none;cursor:pointer}
.ac-tab:is([aria-selected="true"],[aria-pressed="true"],[aria-current="page"]){background:var(--ac-bg);color:var(--ac-fg);box-shadow:var(--ac-shadow-sm)}

/* Panel, divider */
.ac-panel{border:1px solid var(--ac-border);border-radius:var(--ac-radius-lg);background:var(--ac-bg)}
.ac-divider{height:1px;border:0;margin:0;background:var(--ac-border)}

/* Alert, toast */
.ac-alert{display:flex;gap:10px;padding:12px 14px;border-radius:var(--ac-radius-md);background:var(--ac-surface);color:var(--ac-fg);font-size:var(--ac-text-base-sm);line-height:var(--ac-leading-base-sm)}
.ac-alert--danger{background:var(--ac-danger-bg);color:var(--ac-danger)}
.ac-alert--success{background:var(--ac-success-bg);color:var(--ac-success)}
.ac-alert--warning{background:var(--ac-warning-bg);color:var(--ac-warning)}
.ac-toast{display:flex;align-items:center;gap:12px;max-width:min(400px,calc(100vw - 32px));padding:12px 16px;border-radius:var(--ac-radius-lg);background:var(--ac-fg);color:var(--ac-bg);font-size:var(--ac-text-base-sm);line-height:var(--ac-leading-base-sm);box-shadow:var(--ac-shadow-md)}

/* Empty / error state */
.ac-empty{display:grid;justify-items:center;gap:var(--ac-space-2);padding:var(--ac-space-10) var(--ac-space-5);text-align:center;color:var(--ac-fg-muted)}
.ac-empty strong{color:var(--ac-fg);font-size:var(--ac-text-base);font-weight:var(--ac-weight-semibold)}

/* Skeleton */
.ac-skeleton{border-radius:var(--ac-radius-md);background:var(--ac-surface);animation:ac-pulse 1.6s ease-in-out infinite}
@keyframes ac-pulse{50%{opacity:.55}}
@media(prefers-reduced-motion:reduce){.ac-skeleton,.ac-spinner{animation:none}}

/* Keyboard hint */
.ac-kbd{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-xs);color:var(--ac-fg-muted);font:var(--ac-weight-medium) 11px/1 var(--ac-font-sans)}
@media not ((hover:hover) and (pointer:fine)){.ac-kbd{display:none}}