/* app-chrome — sole owner of .ax-*: the SHARED chrome both demo apps compose
   (one home, no per-app copies to drift — the same contract console-input.css
   holds for the composer). Datacore's idiom is the canon (the 7 Jul design
   pass: "agent-ops pulled onto datacore's exact idioms"). Tokens only; linked
   LAST on the root page and both standalone app pages, so an equal-specificity
   tie resolves to these recipes. */

/* ── app header: sidebar toggles left/right of a spacer, under the topbar.
   Each app decides WHEN it hides (dc <--bp-sm, ao <--bp-md) in its own sheet
   via an owner-scoped selector (.dc .ax-header / .ao .ax-header). */
.ax-header { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--border); flex: none; }

/* ── icon button (the rail recipe): borderless centered square, hover tint;
   slim on desktop, 44px on coarse pointers. --lg = the modal-close/overlay
   square (2.25rem). is-active = text-over-tint (never accent-over-tint). */
.ax-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 0; padding: 0; background: transparent; color: var(--text-muted); cursor: pointer; border-radius: var(--radius-sm); font-size: var(--text-lg); line-height: 1; flex: none; }
.ax-iconbtn:hover { background: var(--hover); color: var(--text); }
.ax-iconbtn.is-active { background: var(--accent-tint); color: var(--text); }
.ax-iconbtn--lg { width: 2.25rem; height: 2.25rem; }

/* ── keyboard-tools row (narrow composers): bordered squares sharing the row
   width, riding the hints row in thumb range. display:none at rest — each
   app's media turns its own row on (.dc-hints/.ao-hints .ax-kbtools). The
   .ax-kbtools scope also outranks the apps' generic hint-button resets. */
.ax-kbtools { display: none; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0; }
.ax-kbtools .ax-kbtool { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: 2.75rem; padding: 0; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); border-radius: var(--radius-sm); font-size: 1.15rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ax-kbtools .ax-kbtool:hover { border-color: var(--accent); color: var(--text); }
.ax-kbtools .ax-kbtool:active { background: var(--hover); color: var(--text); }

/* ── ⓘ reference pill: bordered text-glyph button (NOT an icon square) —
   element-qualified so it outranks the apps' `.dc-hints button`-style resets
   (0,1,1) with this sheet linked last. */
button.ax-ref { display: inline-flex; align-items: center; gap: 0.35rem; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-sm); padding: 0.2rem 0.55rem; cursor: pointer; font-size: var(--text-xs); color: var(--text-muted); font-family: inherit; }
button.ax-ref:hover { border-color: var(--accent); color: var(--text); }
button.ax-ref .glyph { font-size: 1.05rem; line-height: 1; }

/* touch — the 44px floor (amenan-typescript) */
@media (pointer: coarse) {
  .ax-iconbtn, .ax-iconbtn--lg { width: var(--chrome-btn, 2.75rem); height: var(--chrome-btn, 2.75rem); }
  button.ax-ref { min-height: 2.75rem; padding: 0.5rem 0.8rem; }
}