/* ag-components.css — reusable utility classes distilled from static/atoms.html.
   Generated source of truth: edit here only. Pages link this AFTER ag-tokens.css.
   Every value references --ag-* tokens; paddings/radii/weights mirror the atoms.
   :hover states are real CSS so the [data-hover] JS pass is optional.
   Premium polish ("craft, not paint") baked in: elevation, motion, real hover
   colors (no opacity wash) and focus rings — tokens only, no new palette.
   Originated as templates/premium-polish/ag-premium.css in Claude Design. */

::selection{background:color-mix(in srgb,var(--ag-accent) 22%,transparent);}

/* === Buttons =============================================================== */
.ag-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:38px;padding:0 16px;border:none;border-radius:var(--ag-r-lg);
  font:600 13px/1 var(--ag-sans);cursor:pointer;white-space:nowrap;
  background:var(--ag-card-bg);color:var(--ag-text-main);text-decoration:none;
  transition:background var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease),
    border-color var(--ag-dur-fast) var(--ag-ease),box-shadow var(--ag-dur-fast) var(--ag-ease),
    transform var(--ag-dur-fast) var(--ag-ease);
}
.ag-btn:active:not([disabled]){transform:translateY(.5px);}
.ag-btn:focus-visible{outline:none;box-shadow:var(--ag-ring);}
.ag-btn--primary{background:var(--ag-text-primary);color:var(--ag-card-bg);box-shadow:var(--ag-highlight),var(--ag-shadow-xs);}
.ag-btn--primary:hover{background:color-mix(in srgb,var(--ag-text-primary) 86%,var(--ag-page-bg));}
.ag-btn--secondary{background:var(--ag-card-bg);color:var(--ag-text-main);border:1px solid var(--ag-border);box-shadow:var(--ag-shadow-xs);}
.ag-btn--secondary:hover{background:var(--ag-hover-bg);}
.ag-btn--secondary:active:not([disabled]){background:var(--ag-selected-bg);}
.ag-btn--ghost{background:transparent;color:var(--ag-text-muted);}
.ag-btn--ghost:hover{background:var(--ag-hover-bg);color:var(--ag-text-primary);}
.ag-btn--ghost:active{background:var(--ag-selected-bg);}
.ag-btn--accent{background:var(--ag-accent);color:#fff;box-shadow:var(--ag-highlight),0 1px 2px color-mix(in srgb,var(--ag-accent) 30%,transparent);}
.ag-btn--accent:hover{background:color-mix(in srgb,var(--ag-accent) 90%,#000);}
.ag-btn--danger{background:var(--ag-danger-bg);color:var(--ag-danger);border:1px solid color-mix(in srgb,var(--ag-danger) 22%,transparent);}
.ag-btn--danger:hover{background:color-mix(in srgb,var(--ag-danger) 13%,var(--ag-danger-bg));}
.ag-btn--sm{height:30px;padding:0 12px;border-radius:var(--ag-r-md);font:600 12px/1 var(--ag-sans);}
.ag-btn[disabled],.ag-btn:disabled{
  background:var(--ag-input-bg);color:var(--ag-text-secondary);
  border:1px solid var(--ag-border-light);cursor:not-allowed;opacity:1;box-shadow:none;
}
.ag-btn[disabled]:active,.ag-btn:disabled:active{transform:none;}

/* === Status badges ========================================================= */
.ag-badge{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--ag-r-sm);font:500 12px/1 var(--ag-sans);
  background:var(--ag-tag-bg);color:var(--ag-tag-text);white-space:nowrap;
}
.ag-badge .ag-badge-dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,currentColor 16%,transparent);}
.ag-badge .ag-badge-glyph{font:700 10px/1 var(--ag-mono);}
.ag-badge--success{background:var(--ag-success-bg);color:var(--ag-success);}
.ag-badge--warning{background:var(--ag-warning-bg);color:var(--ag-warning);}
.ag-badge--danger{background:var(--ag-danger-bg);color:var(--ag-danger);}
.ag-badge--info{background:var(--ag-info-bg);color:var(--ag-info);}

/* === Tags / chips ========================================================== */
.ag-tag{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;
  background:var(--ag-tag-bg);color:var(--ag-tag-text);
  border-radius:var(--ag-r-md);font:500 11px/1 var(--ag-sans);
}
.ag-tag--sm{padding:4px 8px;}
.ag-tag--selected{background:var(--ag-selected-bg);color:var(--ag-text-main);border:1px solid var(--ag-border);}
.ag-tag--add{
  background:transparent;border:1px dashed var(--ag-border);color:var(--ag-text-secondary);cursor:pointer;
  transition:border-color var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease),background var(--ag-dur-fast) var(--ag-ease);
}
.ag-tag--add:hover{border-color:var(--ag-text-secondary);color:var(--ag-text-muted);background:var(--ag-hover-bg);}

/* === Inputs ================================================================ */
.ag-input-wrap{
  display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;
  background:var(--ag-input-bg);border-radius:var(--ag-r-lg);border:1px solid transparent;
  transition:border-color var(--ag-dur-fast) var(--ag-ease),background var(--ag-dur-fast) var(--ag-ease),box-shadow var(--ag-dur-fast) var(--ag-ease);
}
.ag-input-wrap:hover{background:color-mix(in srgb,var(--ag-input-bg) 62%,var(--ag-card-bg));}
/* focus: border holds (no 1.5px layout jump), soft accent halo appears */
.ag-input-wrap--focus,.ag-input-wrap:focus-within{border:1px solid var(--ag-accent);background:var(--ag-card-bg);box-shadow:var(--ag-halo);}
.ag-input{
  flex:1;min-width:0;border:none;background:transparent;outline:none;
  font:400 14px/1 var(--ag-sans);color:var(--ag-text-primary);
}
.ag-input::placeholder{color:var(--ag-text-secondary);}

/* === Card ================================================================== */
.ag-card{
  border:1px solid var(--ag-border);border-radius:var(--ag-r-xl);
  background:var(--ag-card-bg);padding:24px;box-shadow:var(--ag-shadow-card);
}

/* === Pill ================================================================== */
.ag-pill{
  display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
  background:var(--ag-card-bg);border:1px solid var(--ag-border);
  border-radius:var(--ag-r-pill);font:500 13px/1 var(--ag-sans);color:var(--ag-text-main);
  box-shadow:var(--ag-shadow-xs);
}

/* === Toggle ================================================================ */
/* knob travels via transform (animatable) instead of a justify-content flip */
.ag-toggle{
  display:inline-flex;align-items:center;width:42px;height:24px;padding:3px;
  background:var(--ag-text-primary);border-radius:var(--ag-r-pill);
  justify-content:flex-start;cursor:pointer;flex-shrink:0;
  transition:background var(--ag-dur-med) var(--ag-ease),border-color var(--ag-dur-med) var(--ag-ease);
}
.ag-toggle .ag-toggle-knob{
  width:18px;height:18px;border-radius:50%;background:var(--ag-card-bg);
  transform:translateX(18px);transition:transform var(--ag-dur-med) var(--ag-ease);
  box-shadow:0 1px 2px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.04);
}
.ag-toggle:focus-visible{outline:none;box-shadow:var(--ag-ring);}
.ag-toggle--off{background:var(--ag-selected-bg);border:1px solid var(--ag-border);justify-content:flex-start;}
.ag-toggle--off .ag-toggle-knob{transform:translateX(0);border:1px solid var(--ag-border);}

/* === Header / topbar ======================================================= */
.ag-topbar{
  position:sticky;top:0;z-index:40;backdrop-filter:blur(16px) saturate(1.4);
  background:color-mix(in srgb, var(--ag-page-bg) 76%, transparent);
  border-bottom:1px solid var(--ag-border);
}
.ag-topbar-inner{
  max-width:1160px;margin:0 auto;padding:16px 32px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}

/* === Sidebar + nav ========================================================= */
.ag-sidebar{
  width:256px;flex-shrink:0;border-right:1px solid var(--ag-border);
  background:var(--ag-card-bg);display:flex;flex-direction:column;
}
.ag-nav-item{
  display:flex;align-items:center;gap:11px;padding:9px 10px;
  border-radius:var(--ag-r-md);font:500 13px/1 var(--ag-sans);
  color:var(--ag-text-muted);text-decoration:none;cursor:pointer;
  transition:background var(--ag-dur-fast) var(--ag-ease),color var(--ag-dur-fast) var(--ag-ease);
}
.ag-nav-item:hover{background:var(--ag-hover-bg);color:var(--ag-text-primary);}
.ag-nav-item:focus-visible{outline:none;box-shadow:var(--ag-ring);}
.ag-nav-item--active{font-weight:600;color:var(--ag-text-primary);background:var(--ag-selected-bg);}

/* === Table ================================================================= */
.ag-table{
  border:1px solid var(--ag-border);border-radius:var(--ag-r-xl);
  background:var(--ag-card-bg);overflow:hidden;box-shadow:var(--ag-shadow-card);
}
.ag-table-row{
  display:grid;
  grid-template-columns:26px minmax(240px,1fr) 156px 104px 108px 64px 88px;
  gap:14px;align-items:center;padding:14px 18px;
  border-bottom:1px solid var(--ag-border-light);
  transition:background var(--ag-dur-fast) var(--ag-ease);font-variant-numeric:tabular-nums;
}
.ag-table-row:hover{background:var(--ag-hover-bg);}
.ag-table-row:last-child{border-bottom:none;}
.ag-table-head{
  padding:11px 18px;background:var(--ag-hover-bg);
  border-bottom:1px solid var(--ag-border);
  font:600 10px/1 var(--ag-mono);letter-spacing:.1em;
  color:var(--ag-text-secondary);text-transform:uppercase;
}
.ag-table-head:hover{background:var(--ag-hover-bg);}

/* === Callout =============================================================== */
.ag-callout{
  display:flex;gap:13px;padding:16px 18px;border-radius:var(--ag-r-xl);
  background:var(--ag-accent-soft);
  border:1px solid color-mix(in srgb,var(--ag-accent) 20%,transparent);
}
.ag-callout p{margin:0;font:400 14px/1.6 var(--ag-sans);color:var(--ag-text-main);}
.ag-callout--info{background:var(--ag-accent-soft);border:1px solid color-mix(in srgb,var(--ag-accent) 20%,transparent);}
.ag-callout--warning{background:var(--ag-warning-bg);border:1px solid color-mix(in srgb,var(--ag-warning) 26%,transparent);}

/* === Code block ============================================================ */
.ag-code{border:1px solid var(--ag-border);border-radius:var(--ag-r-xl);overflow:hidden;box-shadow:var(--ag-shadow-card);}
.ag-code-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:9px 14px;background:var(--ag-hover-bg);
  border-bottom:1px solid var(--ag-border);
  font:500 11px/1 var(--ag-mono);color:var(--ag-text-muted);
}
.ag-code-body{
  margin:0;padding:16px 18px;background:var(--ag-input-bg);overflow-x:auto;
  font:500 13px/1.7 var(--ag-mono);color:var(--ag-text-primary);
}

/* === Dot-pattern header background ========================================= */
.ag-dotgrid{
  position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(var(--ag-dot) 1.4px, transparent 1.4px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 75%);
}

/* === Reduced motion ======================================================== */
@media (prefers-reduced-motion:reduce){
  .ag-btn,.ag-input-wrap,.ag-toggle,.ag-toggle-knob,.ag-tag--add,.ag-nav-item,.ag-table-row{transition-duration:1ms;}
}