/*
 * template-system-base — root of the template-pipeline theme cascade.
 *
 * Owns the chrome (CSS) for shell-level blueprints that ship SSR markup
 * without bundled CSS:
 *   - <able-app-header>      .aah-*
 *   - <able-spinner>         .abs-*
 *   - <able-offcanvas>       .aoff-*
 *   - <able-toast-stack>     .atst-*
 *
 * Tenant themes (asuite-theme-v2, theme-base-v2, etc.) opt in via parentRef.
 * Last cascade level wins on equal specificity, so tenants can override any
 * rule below without touching this file.
 *
 * Original chrome authored by victor@ inside asuite-theme-v2 on 2026-05-08
 * with the explicit note "Track as a platform gap to lift into the system
 * theme later" — this node is that lift.
 */

/* ────────────────────────────────────────────────────────────────────
   Global box-sizing reset — every template-pipeline app inherits this.
   Without it, authors writing `height: 32px` on an input get 42px back
   (32 + 8 padding + 2 border) because content-box is the CSS default.
   The reset is at the cascade root so per-app themes (whose parents
   may or may not include `system-base-theme`) all pay nothing to opt
   in — every page that mounts a template-pipeline shell gets it.
   ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

/* able-app-header — single grid row */
able-app-header { display: block; }
.aah-bar {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 20px;
  height: 60px;
  box-sizing: border-box;
  background-color: var(--ah-bg-color, var(--aah-fill, #0f172a));
  color: #fff;
}
.aah-area { display: flex; align-items: center; gap: 8px; min-width: 0; }
.aah-area--logo { justify-content: flex-start; }
.aah-area--title { padding-left: 4px; }
.aah-area--nav { gap: 16px; flex: 0 1 auto; }
.aah-area--extra { gap: 8px; }
.aah-area--ask-able { justify-content: flex-end; }
.aah-area--theme { }
.aah-area--user { position: relative; }
/* The burger CELL hides at desktop — it's the 8th emitted area in a 7-column
   grid; left participating it shifts the areas and wraps the user menu onto
   a second row. The blueprint's injected chrome shows it on mobile. */
.aah-area--burger { display: none; }

.aah-logo-img { height: 36px; max-height: 40px; width: auto; display: block; }
.aah-title { margin: 0; font-size: 17px; font-weight: 700; color: #fff; white-space: nowrap; }

.aah-ask-able {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.08); color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 6px 14px; border-radius: 9999px; font-size: 13px;
  cursor: pointer; transition: background-color 120ms;
}
.aah-ask-able:hover { background: rgba(255, 255, 255, 0.16); }
.aah-ask-icon { font-size: 14px; }

.aah-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9999px;
  background: rgba(255, 255, 255, 0.06); color: #e2e8f0;
  cursor: pointer; transition: background-color 120ms;
}
.aah-theme-toggle:hover { background: rgba(255, 255, 255, 0.14); }

.aah-user { position: relative; display: inline-flex; align-items: center; }
.aah-user-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 4px; border-radius: 9999px;
  background: transparent; cursor: pointer;
  transition: background-color 120ms;
}
.aah-user-btn:hover { background: rgba(255, 255, 255, 0.08); }
.aah-user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px;
  background: var(--asuite_brand, #f97316); color: #fff;
  font-weight: 700; font-size: 13px;
}
.aah-user-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 220px; padding: 8px;
  background: #1a2332; color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  z-index: 100;
}
.aah-user-menu[hidden] { display: none !important; }
.aah-user-info { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.aah-user-name { font-weight: 600; font-size: 13px; }
.aah-user-email { font-size: 12px; opacity: 0.7; margin-top: 2px; }
.aah-user-menu button, .aah-user-menu a {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px;
  color: inherit; background: transparent; cursor: pointer; font-size: 13px;
}
.aah-user-menu button:hover, .aah-user-menu a:hover {
  background: rgba(255, 255, 255, 0.08); text-decoration: none;
}

/* able-spinner — top progress strip / overlay */
able-spinner { display: contents; }
.abs-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--accent, #3b82f6) 50%, transparent 100%);
  z-index: 1000; pointer-events: none;
  transform: translateX(-100%);
  animation: abs-slide 1.2s linear infinite;
}
.abs-bar[hidden] { display: none !important; }
@keyframes abs-slide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
.abs-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 15, 26, 0.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
}
.abs-overlay[hidden] { display: none !important; }
.abs-spinner {
  width: 36px; height: 36px;
  border: 3px solid rgba(255, 255, 255, 0.16);
  border-top-color: var(--accent, #3b82f6);
  border-radius: 50%;
  animation: abs-spin 800ms linear infinite;
}
@keyframes abs-spin { to { transform: rotate(360deg); } }

/* able-offcanvas — slide-in panel
 *
 * NOTE: The blueprint JS adds class `aoff` and `aoff--open` to the host
 * <able-offcanvas> element AND sets `data-position` (NOT `data-side`).
 * It builds .aoff-content + .aoff-close children inside.
 * Selectors must match the JS classnames + attribute names. */
.aoff-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(11, 15, 26, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity 220ms ease;
}
.aoff-backdrop.aoff-backdrop--open { opacity: 1; pointer-events: auto; }

able-offcanvas.aoff {
  position: fixed; top: 0; bottom: 0;
  /* Semantic surface + text so the panel is legible in BOTH light and dark mode.
     Was `--grey-50` (an absolute primitive that never re-binds) + `--asuite_text`
     (a fryaway-only token, undefined elsewhere → light #e2e8f0 fallback) → light
     text on light bg in every non-asuite app. Keep --asuite_text as fryaway's
     override; fall back to the canonical semantic tokens for everyone else. */
  background: var(--surface-card, #ffffff);
  color: var(--asuite_text, var(--text-primary, #111111));
  z-index: 201;
  display: none;
  flex-direction: column;
  box-shadow: -10px 0 30px rgba(0, 0, 0, 0.4);
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
able-offcanvas.aoff[data-position="right"] { right: 0; transform: translateX(100%); }
able-offcanvas.aoff[data-position="left"]  { left: 0;  transform: translateX(-100%); }
/* When open, regardless of position, slide into view. Specificity must
   beat the data-position rules above (0,2,1) — use 0,2,1 with the same
   attribute selector form to win on source order. */
able-offcanvas.aoff.aoff--open[data-position="right"],
able-offcanvas.aoff.aoff--open[data-position="left"] {
  display: flex !important;
  transform: translateX(0) !important;
}
able-offcanvas.aoff > .aoff-content {
  flex: 1; min-height: 0; overflow: auto;
  padding: 24px 28px;
}
/* Offcanvas close button: NO theme rule. The Mac-style red traffic-light
   dot (top-left, persistent ×, 22px, visible on any panel bg) is the
   single source of truth in the BLUEPRINT chrome CSS
   (able-api/.../static/template/blueprints/able-offcanvas.js, injected at
   runtime so it wins over theme links at equal specificity). Themes must
   NOT redeclare `.aoff-close` — change it once in the blueprint so every
   page/app inherits it without reinventing. Override here ONLY for a
   deliberate per-platform-theme exception. */

/* able-toast-stack — stacked notifications */
able-toast-stack { display: contents; }
.atst-stack {
  position: fixed; z-index: 500;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px;
  pointer-events: none;
  max-width: 360px;
}
.atst-stack[data-corner="top-right"]    { top: 0;    right: 0; }
.atst-stack[data-corner="top-left"]     { top: 0;    left: 0; }
.atst-stack[data-corner="bottom-right"] { bottom: 0; right: 0; }
.atst-stack[data-corner="bottom-left"]  { bottom: 0; left: 0; }
.atst-toast {
  pointer-events: auto;
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 14px;
  /* Same fix as able-offcanvas: semantic surface + text (flip in dark mode);
     keep --asuite_text as fryaway's override. */
  background: var(--surface-card, #ffffff);
  color: var(--asuite_text, var(--text-primary, #111111));
  border: 1px solid var(--border-default, #303236);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  font-size: 13px;
  max-width: 360px;
  animation: atst-in 180ms ease-out;
}
.atst-toast[data-kind="success"] { border-left: 3px solid var(--success, #267e3d); }
.atst-toast[data-kind="warning"] { border-left: 3px solid var(--warning, #f9a006); }
.atst-toast[data-kind="error"]   { border-left: 3px solid var(--danger, #BF3C00); }
.atst-toast[data-kind="info"]    { border-left: 3px solid var(--info, #4B6D7A); }
@keyframes atst-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.atst-toast-msg { flex: 1; min-width: 0; line-height: 1.4; }
.atst-toast-close {
  background: transparent; color: inherit; cursor: pointer;
  font-size: 14px; opacity: 0.7;
  padding: 0 4px;
}
.atst-toast-close:hover { opacity: 1; }

/* Mobile collapse for header areas */
@media (max-width: 600px) {
  .aah-bar {
    grid-template-columns: auto 1fr auto auto auto;
    padding: 8px 12px;
    gap: 8px;
  }
  .aah-area--nav, .aah-area--extra { display: none; }
  .aah-title { font-size: 15px; }
  .aah-ask-label { display: none; }
}

/* ── <able-typeahead> chrome — .aty-* ─────────────────────────────────────────
 * Platform-level structural chrome. The blueprint JS injects only mobile
 * ergonomics (row height, pop max-height); WITHOUT these rules the result
 * list renders IN-FLOW as plain text and pushes the page apart. The popover
 * is a floating mini-modal card anchored under the input. Semantic tokens
 * only — flips correctly in dark mode. Tenant themes may re-skin. */
.aty {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  /* Floor for a standalone typeahead; dense filter strips opt into narrower
     widths via --aty-min-width: 0 on the parent. */
  min-width: var(--aty-min-width, 180px);
}
.aty:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
.aty-icon  { font-size: 12px; color: var(--text-muted); }
.aty-input {
  border: 0; outline: 0; background: transparent; font: inherit;
  color: var(--text-primary); min-width: 0; width: 100%;
}
.aty-input::placeholder { color: var(--text-subtle); }
.aty-clear {
  width: 18px; height: 18px; border: 0; background: var(--surface-hover);
  border-radius: var(--radius-full); cursor: pointer; color: var(--text-muted);
  font-size: 12px; line-height: 1; padding: 0; display: grid; place-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .aty-clear:hover { background: var(--surface-active); color: var(--text-primary); }
}
.aty-pop {
  /* Floating mini-modal anchored to the input's left edge, sized to content. */
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: max(100%, 280px); max-width: 440px; width: max-content;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  z-index: var(--z-popover, 800); padding: 4px;
}
.aty-row { padding: 8px 10px; cursor: pointer; border-radius: var(--radius-sm); }
.aty-row.is-active { background: var(--surface-hover); }
@media (hover: hover) and (pointer: fine) {
  .aty-row:hover { background: var(--surface-hover); }
}
.aty-row-label {
  color: var(--text-primary); font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aty-row-sub {
  color: var(--text-muted); font-size: 0.88em; margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.aty-empty { padding: 12px; color: var(--text-muted); font-style: italic; }

/* ── <able-multi-select> chrome — .amsel-* ────────────────────────────────────
 * Same gap, same fix: float the menu as a card instead of an in-flow block. */
.amsel { position: relative; }
.amsel-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: max(100%, 220px); max-width: 340px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  z-index: var(--z-popover, 800); padding: 4px;
}
.amsel-title {
  padding: 6px 10px 4px; font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.amsel-empty { padding: 12px; color: var(--text-muted); font-style: italic; }
.amsel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.amsel-item.is-active { background: var(--surface-hover); }
@media (hover: hover) and (pointer: fine) {
  .amsel-item:hover { background: var(--surface-hover); }
}
.amsel-item.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.amsel-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.amsel-check {
  flex: 0 0 16px; width: 16px; height: 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--border-strong);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; line-height: 1; color: var(--on-accent); background: var(--surface-card);
}
.amsel-item.is-selected .amsel-check { background: var(--accent); border-color: var(--accent); }
.amsel-icon { font-size: 12px; color: var(--text-muted); }
.amsel-item-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── <able-table> chrome — .abt-* ─────────────────────────────────────────────
 * Platform baseline so a table is presentable on a NEW app with zero theme
 * work (the chrome previously lived only in tenant themes — ablecollect /
 * rates / payroll each carried a near-identical copy). Semantic tokens only;
 * flips in dark mode. Tenant themes load after this and win on overrides. */
.abt {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  /* `clip` (NOT `hidden`) — both clip the rounded corners, but `overflow:hidden`
     turns the <table> into a scroll-container, which captures the sticky
     `.abt-thead--sticky` / `.abt-th` headers so they pin to the TABLE (which
     never scrolls) instead of the page's scroll region — i.e. sticky-header
     silently does nothing. `overflow:clip` clips without creating a scroll
     container. Do NOT change to hidden. */
  overflow: clip;
  font-size: 12px;
}
.abt-th {
  position: sticky;
  top: 0;
  background: var(--surface-subtle);
  padding: 8px 10px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-default);
  cursor: pointer;
  user-select: none;
}
.abt-th[data-sort-field=""] { cursor: default; }
.abt-th.is-asc::after  { content: ' ▲'; color: var(--accent); }
.abt-th.is-desc::after { content: ' ▼'; color: var(--accent); }
.abt-th--check, .abt-th--num { width: 36px; text-align: center; }
.abt-th--group { text-align: center; border-bottom: 1px solid var(--border-default); }

.abt-row { transition: background var(--transition-fast, 120ms) ease; }
@media (hover: hover) and (pointer: fine) {
  .abt-row:hover { background: var(--surface-hover); }
  /* Pointer ONLY on rows that act: the directive pass emits data-on-row-click
     on the <able-table> HOST when a page wires @row-click. Read-only grids
     keep the default cursor. */
  able-table[data-on-row-click] .abt-row:hover { cursor: pointer; }
}
.abt-td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
  font-size: 12px;
}
.abt-td--check, .abt-td--num { text-align: center; color: var(--text-muted); }

.abt-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}
.abt-muted { color: var(--text-subtle); }
.abt-thead--sticky { position: sticky; top: 0; z-index: 1; }

/* ── <able-pagination> chrome — .abp-* ────────────────────────────────────── */
.abp { display: flex; align-items: center; gap: 8px; }
.abp-range { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.abp-btn {
  width: 28px; height: 28px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-primary);
  font-size: 14px; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
  .abp-btn:not([disabled]):hover { background: var(--surface-hover); }
}
.abp-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.abp-page { font-size: 11px; color: var(--text-secondary); font-family: var(--font-mono); }
.abp-size {
  height: 28px; padding: 0 8px;
  border-radius: var(--radius-md); border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-primary);
  /* Focusable select MUST be ≥16px or iOS Safari zooms on focus (rule 29 §10)
     — was 11px, flagged fleet-wide by the tenniswest P2 batch audit. */
  font-size: max(16px, var(--font-base));
}

/* ── <able-select> chrome — .asel-* ───────────────────────────────────────────
 * Single-select sibling of .amsel (same popover-card pattern). The blueprint
 * self-injects only mobile ergonomics; this is the structural baseline. */
.asel { position: relative; display: inline-block; min-width: var(--asel-min-width, 160px); }
.asel-trigger {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 10px; width: 100%;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); cursor: pointer; color: var(--text-primary);
  font: inherit; text-align: left;
}
.asel.is-open .asel-trigger { outline: 2px solid var(--accent); outline-offset: -1px; }
.asel.is-disabled .asel-trigger { opacity: 0.55; cursor: not-allowed; }
.asel-trigger-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asel-trigger-text.is-placeholder { color: var(--text-subtle); }
.asel-chev { color: var(--text-muted); font-size: 11px; }
.asel-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: max(100%, 200px); max-width: 340px;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  max-height: 340px; overflow-y: auto; overflow-x: hidden;
  z-index: var(--z-popover, 800); padding: 4px;
}
.asel-title {
  padding: 6px 10px 4px; font-size: 0.78em; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted);
}
.asel-empty { padding: 12px; color: var(--text-muted); font-style: italic; }
.asel-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.asel-item.is-active { background: var(--surface-hover); }
@media (hover: hover) and (pointer: fine) { .asel-item:hover { background: var(--surface-hover); } }
.asel-item.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.asel-item.is-disabled { opacity: 0.45; cursor: not-allowed; }
.asel-icon { font-size: 12px; color: var(--text-muted); }
.asel-item-label { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── <able-more-filters> chrome — .amf-* ─────────────────────────────────── */
.amf { position: relative; display: inline-block; }
.amf-pop:not([hidden]) {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--surface-card); border: 1px solid var(--border-default);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 12px; min-width: 280px; z-index: var(--z-popover, 800);
  display: grid; gap: 8px;
}
.amf-grid { display: grid; gap: 8px; }
.amf-col, .amf-row, .amf-group { display: grid; gap: 4px; }
.amf-group-title, .amf-row span {
  font-size: 0.78em; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.amf-row input, .amf-row select, .amf-grid input, .amf-grid select {
  height: 30px; padding: 0 8px; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); background: var(--surface-base); color: var(--text-primary);
}
.amf-pop-footer { display: flex; justify-content: flex-end; gap: 8px; padding-top: 4px; }
.amf-clear {
  border: 0; background: transparent; color: var(--text-muted);
  cursor: pointer; font-size: 0.85em; text-decoration: underline;
}

/* ── <able-operations-filter> chrome — .aof-* ────────────────────────────── */
/* The blueprint renders its parts directly inside the custom element (no inner
   .aof wrapper) — the ELEMENT is the positioning anchor or the menu floats to
   the viewport corner. */
able-operations-filter, .aof { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.aof-menu {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 200px; background: var(--surface-card);
  border: 1px solid var(--border-default); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); z-index: var(--z-popover, 800); padding: 4px;
}
.aof-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; cursor: pointer; border-radius: var(--radius-sm);
  color: var(--text-primary);
}
@media (hover: hover) and (pointer: fine) { .aof-menu-item:hover { background: var(--surface-hover); } }
.aof-menu-symbol { font-family: var(--font-mono); color: var(--text-muted); min-width: 24px; }
.aof-menu-label { flex: 1 1 auto; }
.aof-chevron { color: var(--text-muted); font-size: 11px; cursor: pointer; }
.aof-between-and { color: var(--text-muted); font-size: 0.85em; padding: 0 2px; }

/* ── <able-accordion> chrome — .aacc-* ───────────────────────────────────── */
.aacc-section {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); overflow: hidden;
}
.aacc-section + .aacc-section { margin-top: var(--space-2); }
.aacc-header {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-primary); font: inherit; font-weight: 600; text-align: left;
}
@media (hover: hover) and (pointer: fine) { .aacc-header:hover { background: var(--surface-hover); } }
.aacc-label { flex: 1 1 auto; }
.aacc-badge {
  font-size: 0.78em; padding: 1px 8px; border-radius: var(--radius-full);
  background: var(--surface-subtle); color: var(--text-secondary);
}
.aacc-chevron { color: var(--text-muted); transition: transform var(--transition-base, 200ms); }
.aacc-section[data-expanded="true"] .aacc-chevron,
.aacc-header[aria-expanded="true"] .aacc-chevron { transform: rotate(90deg); }
.aacc-body { padding: 12px; border-top: 1px solid var(--border-subtle); }

/* ── <able-stepper> chrome — .ast-* ──────────────────────────────────────── */
.ast-header { display: flex; align-items: flex-start; gap: 4px; }
.ast[data-orientation="vertical"] .ast-header { flex-direction: column; }
.ast-step { display: flex; align-items: center; gap: 8px; padding: 4px 6px; }
.ast-step-circle {
  width: 28px; height: 28px; border-radius: var(--radius-full);
  display: grid; place-items: center; font-size: 12px; font-weight: 600;
  background: var(--surface-subtle); color: var(--text-secondary);
  border: 1px solid var(--border-default);
}
.ast-step[data-state="active"] .ast-step-circle { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.ast-step[data-state="completed"] .ast-step-circle { background: var(--success); border-color: var(--success); color: var(--on-success); }
.ast-step[data-state="error"] .ast-step-circle { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.ast-step[data-state="disabled"] { opacity: 0.5; }
.ast-connector { flex: 1 1 16px; height: 1px; background: var(--border-default); margin-top: 14px; min-width: 16px; }
.ast-bodies { margin-top: var(--space-3); }

/* ── <able-file-upload> chrome — .afu-* / .afuq-* ────────────────────────────
 * Baseline for both modes; consumer pages may re-skin (documents-v2 etc.
 * carry richer page-scoped versions that win on cascade). */
.afu-zone, .afuq-zone {
  display: grid; place-items: center; gap: 6px; text-align: center;
  padding: 24px 16px; cursor: pointer;
  border: 2px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-subtle); color: var(--text-secondary);
  transition: border-color var(--transition-fast, 120ms), background var(--transition-fast, 120ms);
}
@media (hover: hover) and (pointer: fine) {
  .afu-zone:hover, .afuq-zone:hover { border-color: var(--accent); background: var(--surface-hover); }
}
.afu-icon { font-size: 22px; color: var(--text-muted); }
.afu-label { font-weight: 500; }
.afu-status { font-size: 0.85em; color: var(--text-muted); }
.afu-input { display: none; }
.afuq-list { display: grid; gap: 6px; margin-top: var(--space-2); }
.afuq-file {
  border: 1px solid var(--border-default); border-radius: var(--radius-md);
  background: var(--surface-card); padding: 8px 10px;
}
.afuq-row { display: flex; align-items: center; gap: 8px; }
.afuq-ic { color: var(--text-muted); flex: none; }
.afuq-name-wrap { flex: 1 1 auto; display: inline-flex; align-items: baseline; min-width: 0; }
.afuq-base {
  border: 0; outline: 0; background: transparent; color: var(--text-primary);
  font: inherit; min-width: 0; flex: 0 1 auto;
  border-bottom: 1px dashed transparent;
}
.afuq-base:focus { border-bottom-color: var(--accent); }
.afuq-ext { color: var(--text-muted); }
.afuq-pct { font-size: 0.85em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.afuq-check { color: var(--success); }
.afuq-err { color: var(--danger); }
.afuq-expand { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }
.afuq-prog { height: 3px; border-radius: 2px; background: var(--surface-subtle); margin-top: 6px; overflow: hidden; }
.afuq-prog-fill { height: 100%; background: var(--accent); transition: width 160ms ease; }
.afuq-desc {
  width: 100%; margin-top: 6px; padding: 6px 8px;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-base); color: var(--text-primary); font: inherit;
}
.afuq-count { font-size: 0.85em; color: var(--text-muted); }

/* ── small input/commerce primitives ─────────────────────────────────────── */
.aci-step--up, .aci-step--down {
  border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-secondary); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0 6px; line-height: 1.4;
}
@media (hover: hover) and (pointer: fine) {
  .aci-step--up:hover, .aci-step--down:hover { background: var(--surface-hover); }
}
.aqty-minus, .aqty-plus {
  width: 28px; height: 28px; border: 1px solid var(--border-default);
  background: var(--surface-card); color: var(--text-primary);
  border-radius: var(--radius-sm); cursor: pointer;
}
.aqty-input {
  width: 48px; height: 28px; text-align: center;
  border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--surface-base); color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.aprc-current { font-weight: 700; color: var(--text-primary); }
.aprc-original { color: var(--text-muted); text-decoration: line-through; margin-left: 6px; font-size: 0.9em; }
.aprc-unit { color: var(--text-muted); font-size: 0.85em; margin-left: 4px; }
.arat-stars { color: var(--warning); letter-spacing: 1px; }
.arat-value { font-weight: 600; margin-left: 4px; }
.arat-count { color: var(--text-muted); font-size: 0.88em; margin-left: 4px; }
.arfc-input { text-transform: uppercase; font-family: var(--font-mono); }
.arfc-detected { color: var(--success); font-size: 0.85em; }
.arfc-error { color: var(--danger); font-size: 0.85em; }
.adsc-code { font-family: var(--font-mono); }
.adsc-apply {
  border: 1px solid var(--border-default); background: var(--surface-card);
  color: var(--text-primary); border-radius: var(--radius-sm); cursor: pointer; padding: 4px 10px;
}
.adsc-applied { color: var(--success); font-weight: 600; }
.adsc-discount { color: var(--success); }
.adsc-remove { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }

/* ── <able-app-header> baseline polish ────────────────────────────────────────
 * The masthead every app inherits. Dark in BOTH modes by design (pinned
 * white-on-dark contract); tenants re-tint via --aah-fill or override rules.
 * Goal: an app with ZERO header CSS looks intentional, not default. */
.aah-bar {
  gap: 12px;
  padding: 0 20px;
  height: 56px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.aah-area--title { padding-left: 0; }
.aah-title {
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.aah-home-link { text-decoration: none; }
/* Letter-fallback logo square */
.aah-logo-fallback, .aah-logo-letter {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-weight: 700; font-size: 14px;
}
/* Slotted nav links — shells just drop <a slot="nav"> and get chips for free */
.aah-area--nav { gap: 4px; }
.aah-area--nav a {
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-full);
  transition: background-color 120ms, color 120ms;
}
@media (hover: hover) and (pointer: fine) {
  .aah-area--nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
}
.aah-area--nav a[aria-current="page"], .aah-area--nav a.is-active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.aah-ask-able {
  padding: 7px 14px;
  font-weight: 500;
  border-color: rgba(255, 255, 255, 0.16);
}
.aah-theme-toggle { width: 34px; height: 34px; font-size: 15px; }

/* ── <able-claw> skin — lift the visual identity into the THEME ──────────────
 * The blueprint's injected CHROME_CSS owns structure/layout; the theme owns
 * the SKIN so tenants tune it without an able-api deploy. `html` prefix wins
 * the cascade against the later-injected sheet at equal class specificity. */
html able-claw[data-mode="launcher"] .aclaw-grid {
  border: 1px solid var(--border-default);
  border-radius: 16px;
  box-shadow: var(--shadow-xl, 0 16px 48px rgba(0,0,0,0.28));
  background: var(--surface-card);
  overflow: hidden;
}
html able-claw .aclaw-helper-header {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-subtle);
}
html able-claw .aclaw-launcher-pill {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 500;
}
html able-claw .aclaw-input-bar {
  background: var(--surface-card);
  border-top: 1px solid var(--border-subtle);
}
html able-claw .aclaw-input {
  background: var(--surface-base);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl, 12px);
  color: var(--text-primary);
}
html able-claw .aclaw-input:focus { border-color: var(--accent); outline: none; }
html able-claw .aclaw-input::placeholder { color: var(--text-subtle); }
html able-claw .aclaw-send {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
  border-radius: var(--radius-full);
}
html able-claw .aclaw-send:disabled { opacity: 0.45; }
html able-claw .aclaw-message-bubble {
  border-radius: 14px;
  line-height: 1.55;
}
html able-claw .aclaw-message-bubble[data-role="user"],
html able-claw .aclaw-message--user .aclaw-message-bubble {
  background: var(--accent-soft);
  color: var(--text-primary);
}
html able-claw .aclaw-shortcut {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  transition: border-color 120ms, background 120ms;
}
@media (hover: hover) and (pointer: fine) {
  html able-claw .aclaw-shortcut:hover { border-color: var(--accent); background: var(--surface-hover); }
}
html able-claw .aclaw-conversation-row { border-radius: var(--radius-md); }
@media (hover: hover) and (pointer: fine) {
  html able-claw .aclaw-conversation-row:hover { background: var(--surface-hover); }
}
html able-claw .aclaw-sidebar {
  background: var(--surface-subtle);
  border-right: 1px solid var(--border-subtle);
}

/* Welcome shortcut cards — equal height across the category row (a 2-line
   card otherwise leaves its siblings' bottoms ragged). The cards sit inside
   a .aclaw-welcome-category-items wrapper — both layers must flex-fill. */
html able-claw .aclaw-welcome-category { display: flex; flex-direction: column; }
html able-claw .aclaw-welcome-category-items { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; }
html able-claw .aclaw-welcome-category-items .aclaw-shortcut { flex: 1 1 auto; align-items: flex-start; }