/*
 * Aura Owner -- Dashboard Interactive Kit: stat tiles, bar charts, donut
 * charts, quick-action cards. Layout/visual rules only -- token *values*
 * live in tokens.css, referenced here via var(--aura-*) only (never a
 * literal hex), same discipline as shell.css/components.css.
 *
 * Tone modifier vocabulary (--default/--success/--warning/--danger/
 * --pending) mirrors components.css's own .badge.* groupings so a status
 * always gets the same color whether shown as a badge or a chart segment.
 * "pending" maps to the warning color group, matching .badge.pending.
 */

.aura-quick-actions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--aura-space-3);
  margin-block-end: var(--aura-space-4);
}
.aura-quick-action-card {
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  background: var(--aura-color-surface-raised);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-md);
  padding: var(--aura-space-3);
  text-decoration: none;
  color: var(--aura-color-text-primary);
  font-size: var(--aura-font-size-sm);
  font-weight: var(--aura-font-weight-medium);
}
.aura-quick-action-card:hover, .aura-quick-action-card:focus-visible {
  border-color: var(--aura-color-brand-primary);
  box-shadow: 0 0 0 2px var(--aura-color-brand-primary-soft);
}

.aura-stat-tile-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--aura-space-3);
  margin-block-end: var(--aura-space-4);
}
.aura-stat-tile {
  display: flex;
  flex-direction: column;
  gap: var(--aura-space-1);
  background: var(--aura-color-surface-raised);
  border: 1px solid var(--aura-color-border-default);
  border-inline-start: 3px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-md);
  padding: var(--aura-space-3);
  text-decoration: none;
  color: inherit;
}
.aura-stat-tile:hover, .aura-stat-tile:focus-visible {
  border-color: var(--aura-color-brand-primary);
  border-inline-start-color: var(--aura-color-brand-primary);
}
.aura-stat-tile--static { cursor: default; }
.aura-stat-tile--default { border-inline-start-color: var(--aura-color-brand-primary); }
.aura-stat-tile--success { border-inline-start-color: var(--aura-color-success); }
.aura-stat-tile--warning { border-inline-start-color: var(--aura-color-warning); }
.aura-stat-tile--danger { border-inline-start-color: var(--aura-color-danger); }
.aura-stat-tile__value {
  font-size: var(--aura-font-size-2xl);
  font-weight: var(--aura-font-weight-bold);
  color: var(--aura-color-text-primary);
  line-height: var(--aura-line-height-tight);
}
.aura-stat-tile__label {
  font-size: var(--aura-font-size-sm);
  color: var(--aura-color-text-secondary);
}
/* Derived qualifier under the label ("34% of all subscriptions") -- muted
   and smaller than the label so the tile keeps ONE headline number. */
.aura-stat-tile__hint {
  font-size: var(--aura-font-size-xs);
  color: var(--aura-color-text-muted);
}

.aura-bar-chart { display: flex; flex-direction: column; gap: var(--aura-space-2); }
.aura-bar-chart__row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: var(--aura-space-2);
  /* Anchor for the absolutely-positioned readout below. An out-of-flow
     child does not become a fourth grid track, so the 3-column layout is
     unchanged. */
  position: relative;
}
.aura-bar-chart__label {
  font-size: var(--aura-font-size-sm);
  color: var(--aura-color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.aura-bar-chart__track {
  display: block;
  block-size: 10px;
  background: var(--aura-color-surface-muted);
  border-radius: var(--aura-radius-full);
  overflow: hidden;
  text-decoration: none;
}
.aura-bar-chart__fill {
  display: block;
  block-size: 100%;
  /* Fallback for the (theoretical) case data-cat is absent -- every real
     caller sets it, see the loop in _charts.html's bar_chart macro. */
  background: var(--aura-color-brand-primary);
  border-radius: var(--aura-radius-full);
  transition: inline-size var(--aura-motion-base) var(--aura-ease-standard),
              filter var(--aura-motion-fast) var(--aura-ease-standard);
}
/* Categorical colour per bar (dashboard UI redesign, "colourful charts").
   One rule per data-cat value the macro can emit (1-8, wrapping); every
   colour comes from --aura-chart-cat-* (tokens.css), never a literal hex,
   so the active chart-palette selection (brand/vivid/cb-safe) repaints
   every bar automatically with no change needed here. */
.aura-bar-chart__fill[data-cat="1"] { background: var(--aura-chart-cat-1); }
.aura-bar-chart__fill[data-cat="2"] { background: var(--aura-chart-cat-2); }
.aura-bar-chart__fill[data-cat="3"] { background: var(--aura-chart-cat-3); }
.aura-bar-chart__fill[data-cat="4"] { background: var(--aura-chart-cat-4); }
.aura-bar-chart__fill[data-cat="5"] { background: var(--aura-chart-cat-5); }
.aura-bar-chart__fill[data-cat="6"] { background: var(--aura-chart-cat-6); }
.aura-bar-chart__fill[data-cat="7"] { background: var(--aura-chart-cat-7); }
.aura-bar-chart__fill[data-cat="8"] { background: var(--aura-chart-cat-8); }
.aura-bar-chart__value {
  font-size: var(--aura-font-size-sm);
  font-weight: var(--aura-font-weight-medium);
  text-align: end;
}

.aura-donut-chart {
  display: flex;
  align-items: center;
  gap: var(--aura-space-4);
  flex-wrap: wrap;
}
.aura-donut-chart__svg { inline-size: 96px; block-size: 96px; flex: 0 0 auto; }
.aura-donut-chart__track { fill: none; stroke: var(--aura-color-surface-muted); stroke-width: 3; }
.aura-donut-chart__segment {
  fill: none;
  stroke-width: 3;
  transition: stroke-width var(--aura-motion-fast) var(--aura-ease-standard),
              opacity var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-donut-chart__segment--default { stroke: var(--aura-color-brand-primary); }
.aura-donut-chart__segment--success { stroke: var(--aura-color-success); }
.aura-donut-chart__segment--warning, .aura-donut-chart__segment--pending { stroke: var(--aura-color-warning); }
.aura-donut-chart__segment--danger { stroke: var(--aura-color-danger); }
/* Categorical fallback (donut_chart called with no class_for -- see the
   macro's own comment on this). Same 8-colour ramp and tokens as the bar
   chart above, so a chart-palette switch repaints both chart types the
   same way. */
.aura-donut-chart__segment--cat-1 { stroke: var(--aura-chart-cat-1); }
.aura-donut-chart__segment--cat-2 { stroke: var(--aura-chart-cat-2); }
.aura-donut-chart__segment--cat-3 { stroke: var(--aura-chart-cat-3); }
.aura-donut-chart__segment--cat-4 { stroke: var(--aura-chart-cat-4); }
.aura-donut-chart__segment--cat-5 { stroke: var(--aura-chart-cat-5); }
.aura-donut-chart__segment--cat-6 { stroke: var(--aura-chart-cat-6); }
.aura-donut-chart__segment--cat-7 { stroke: var(--aura-chart-cat-7); }
.aura-donut-chart__segment--cat-8 { stroke: var(--aura-chart-cat-8); }
.aura-donut-chart__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aura-space-1); }
.aura-donut-chart__legend-item {
  display: flex;
  align-items: center;
  gap: var(--aura-space-2);
  font-size: var(--aura-font-size-sm);
  /* Anchor for this row's readout, plus a resting inline padding so the
     hover/highlight background can appear without shifting the text. */
  position: relative;
  padding-inline: var(--aura-space-1);
  border-radius: var(--aura-radius-sm);
  transition: background var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-donut-chart__legend-item a { color: var(--aura-color-text-primary); text-decoration: none; }
.aura-donut-chart__legend-item a:hover { color: var(--aura-color-brand-primary); }
.aura-donut-chart__swatch { inline-size: 10px; block-size: 10px; border-radius: var(--aura-radius-full); flex: 0 0 auto; }
.aura-donut-chart__swatch--default { background: var(--aura-color-brand-primary); }
.aura-donut-chart__swatch--success { background: var(--aura-color-success); }
.aura-donut-chart__swatch--warning, .aura-donut-chart__swatch--pending { background: var(--aura-color-warning); }
.aura-donut-chart__swatch--danger { background: var(--aura-color-danger); }
.aura-donut-chart__swatch--cat-1 { background: var(--aura-chart-cat-1); }
.aura-donut-chart__swatch--cat-2 { background: var(--aura-chart-cat-2); }
.aura-donut-chart__swatch--cat-3 { background: var(--aura-chart-cat-3); }
.aura-donut-chart__swatch--cat-4 { background: var(--aura-chart-cat-4); }
.aura-donut-chart__swatch--cat-5 { background: var(--aura-chart-cat-5); }
.aura-donut-chart__swatch--cat-6 { background: var(--aura-chart-cat-6); }
.aura-donut-chart__swatch--cat-7 { background: var(--aura-chart-cat-7); }
.aura-donut-chart__swatch--cat-8 { background: var(--aura-chart-cat-8); }
.aura-donut-chart__legend-value { margin-inline-start: auto; color: var(--aura-color-text-muted); }

/* ======================================================================
   Interactivity (Dashboard Interactive Kit, stage 2)
   ----------------------------------------------------------------------
   All of it is CSS. There is no charts JS file and no charting library --
   every rule below is a projection of DOM state the browser already
   tracks (:hover / :focus-within / :has()), so the behavior survives a
   full-page re-render, works with JS disabled, and has nothing to keep in
   sync with the server-rendered markup.

   Motion: every transition duration comes from a --aura-motion-* token,
   and tokens.css already collapses all of those to 0ms under
   `prefers-reduced-motion: reduce`. The explicit reduced-motion block at
   the bottom of this file is a second, belt-and-braces guard so a future
   transition that hardcodes a duration still can't animate for an
   employee who asked for no motion.
   ====================================================================== */

/* -- Focus visibility -------------------------------------------------
   The kit's hover treatment is a border-color change, which is NOT a
   sufficient focus indicator on its own. Every focusable element in the
   kit gets a real ring, in the token color the rest of the app uses. */
.aura-stat-tile:focus-visible,
.aura-bar-chart__track:focus-visible,
.aura-donut-chart__legend-item a:focus-visible,
.aura-donut-chart__legend-label:focus-visible,
.aura-chart-empty__action:focus-visible {
  outline: var(--aura-border-width-md) solid var(--aura-color-focus-ring);
  outline-offset: 2px;
}

/* -- Shared value readout --------------------------------------------
   One bubble per data point, carrying "<label>: <value> (<share>% of
   total)". aria-hidden in the markup because the focus target's own
   accessible name is that same string -- this is the sighted-user half of
   the same information, never a second source of truth.

   pointer-events:none so the bubble can never sit between the pointer and
   the element whose hover opened it (which would make it flicker). */
.aura-bar-chart__readout,
.aura-donut-chart__readout {
  position: absolute;
  inset-block-start: calc(100% + var(--aura-space-1));
  inset-inline-start: 0;
  z-index: var(--aura-z-dropdown);
  max-inline-size: 24rem;
  padding: var(--aura-space-1) var(--aura-space-2);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  background: var(--aura-color-surface-overlay);
  box-shadow: var(--aura-shadow-md);
  color: var(--aura-color-text-primary);
  font-size: var(--aura-font-size-xs);
  line-height: var(--aura-line-height-dense);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--aura-motion-fast) var(--aura-ease-standard);
}

/* -- Bar chart: hover/focus highlight ---------------------------------
   Hovering or focusing one row fades its peers back so the row being read
   is unambiguous, and the row's own label/bar/value strengthen together
   (the label IS this chart's legend, so "legend highlights in sync" is
   structural here rather than a cross-element rule).
   :focus-within is what carries the keyboard half: the focus lands on the
   track (a real <a>, or a tabindex="0" role="img" when no drill-down
   exists), and the row it lives in reacts identically to a hover. */
.aura-bar-chart:hover .aura-bar-chart__row,
.aura-bar-chart:focus-within .aura-bar-chart__row {
  opacity: 0.5;
  transition: opacity var(--aura-motion-fast) var(--aura-ease-standard);
}
.aura-bar-chart:hover .aura-bar-chart__row:hover,
.aura-bar-chart:focus-within .aura-bar-chart__row:focus-within {
  opacity: 1;
}
.aura-bar-chart__row:hover .aura-bar-chart__label,
.aura-bar-chart__row:focus-within .aura-bar-chart__label {
  color: var(--aura-color-text-primary);
}
.aura-bar-chart__row:hover .aura-bar-chart__fill,
.aura-bar-chart__row:focus-within .aura-bar-chart__fill {
  /* brightness(), not a background swap: each bar now carries its own
     categorical colour (data-cat, see above), and a hard-coded hover
     background would erase that colour and make every bar look the same
     on hover -- exactly the "colourful charts" this pass adds, undone by
     its own hover state. filter animates independently of `background`
     and reads as "this bar is highlighted" regardless of which of the 8
     categorical colours it started from. */
  filter: brightness(1.12);
}
.aura-bar-chart__row:hover .aura-bar-chart__track,
.aura-bar-chart__row:focus-within .aura-bar-chart__track {
  box-shadow: 0 0 0 2px var(--aura-color-brand-primary-soft);
}
.aura-bar-chart__row:hover .aura-bar-chart__readout,
.aura-bar-chart__row:focus-within .aura-bar-chart__readout {
  opacity: 1;
  visibility: visible;
}

/* -- Donut: the legend row's own hover/focus -------------------------- */
.aura-donut-chart__legend-item:hover,
.aura-donut-chart__legend-item:focus-within {
  background: var(--aura-color-surface-muted);
}
.aura-donut-chart__legend-item:hover .aura-donut-chart__legend-value,
.aura-donut-chart__legend-item:focus-within .aura-donut-chart__legend-value {
  color: var(--aura-color-text-primary);
}
.aura-donut-chart__legend-item:hover .aura-donut-chart__readout,
.aura-donut-chart__legend-item:focus-within .aura-donut-chart__readout {
  opacity: 1;
  visibility: visible;
}

/* -- Donut: pointing at the ring itself -------------------------------
   Segment-side highlighting needs no :has() -- the segments are siblings
   inside the SVG. The segments are hover affordances only: they stay
   aria-hidden and non-clickable, because making an SVG element the
   interactive surface is exactly the pattern this kit deliberately
   rejected (contract point (a)); the legend row remains the real target
   for click, focus and assistive tech. */
.aura-donut-chart__svg:hover .aura-donut-chart__segment { opacity: 0.28; }
.aura-donut-chart__svg:hover .aura-donut-chart__segment:hover {
  opacity: 1;
  stroke-width: 4.5;
}

/* -- Donut: cross-highlight between a segment and its legend row -------
   `data-slice` is the shared index the macro stamps on both halves of a
   pair. CSS has no loops, so each pair costs one hand-written selector,
   which is why this is capped at 8 slices: the real status vocabularies
   this kit renders are closed and small (License has 7: DRAFT, ISSUED,
   ACTIVE, SUSPENDED, EXPIRED, REVOKED, REPLACED), and 8 leaves headroom
   without turning this file into generated CSS. A 9th slice degrades
   cleanly rather than glitching: because the dim rules are themselves
   indexed, hovering an unsynced legend row dims nothing at all instead of
   dimming the ring and failing to re-light its own segment.

   These rules are kept in their own blocks, never comma-joined with a
   non-:has() selector: a browser without :has() support discards the
   whole rule it appears in, so mixing them would silently drop the
   baseline hover styling too. Everything above still works there; only
   this cross-pane sync is lost. */
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="1"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="2"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="3"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="4"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="5"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="6"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="7"]:is(:hover, :focus-within)) .aura-donut-chart__segment,
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="8"]:is(:hover, :focus-within)) .aura-donut-chart__segment {
  opacity: 0.28;
}
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="1"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="1"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="2"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="2"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="3"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="3"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="4"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="4"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="5"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="5"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="6"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="6"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="7"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="7"],
.aura-donut-chart:has(.aura-donut-chart__legend-item[data-slice="8"]:is(:hover, :focus-within)) .aura-donut-chart__segment[data-slice="8"] {
  opacity: 1;
  stroke-width: 4.5;
}
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="1"]:hover) .aura-donut-chart__legend-item[data-slice="1"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="2"]:hover) .aura-donut-chart__legend-item[data-slice="2"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="3"]:hover) .aura-donut-chart__legend-item[data-slice="3"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="4"]:hover) .aura-donut-chart__legend-item[data-slice="4"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="5"]:hover) .aura-donut-chart__legend-item[data-slice="5"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="6"]:hover) .aura-donut-chart__legend-item[data-slice="6"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="7"]:hover) .aura-donut-chart__legend-item[data-slice="7"],
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="8"]:hover) .aura-donut-chart__legend-item[data-slice="8"] {
  background: var(--aura-color-surface-muted);
}
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="1"]:hover) .aura-donut-chart__legend-item[data-slice="1"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="2"]:hover) .aura-donut-chart__legend-item[data-slice="2"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="3"]:hover) .aura-donut-chart__legend-item[data-slice="3"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="4"]:hover) .aura-donut-chart__legend-item[data-slice="4"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="5"]:hover) .aura-donut-chart__legend-item[data-slice="5"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="6"]:hover) .aura-donut-chart__legend-item[data-slice="6"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="7"]:hover) .aura-donut-chart__legend-item[data-slice="7"] .aura-donut-chart__readout,
.aura-donut-chart:has(.aura-donut-chart__segment[data-slice="8"]:hover) .aura-donut-chart__legend-item[data-slice="8"] .aura-donut-chart__readout {
  opacity: 1;
  visibility: visible;
}

/* -- Chart empty state ------------------------------------------------
   A chart with nothing in it used to render one italic line that told the
   employee neither what the chart is for nor how to make it non-empty --
   current-ui-audit.md's top finding. The hint answers the first, and the
   action link (rendered only when the caller confirmed the employee holds
   the matching create permission) answers the second. */
.aura-chart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--aura-space-2);
}
.aura-chart-empty__message { margin: 0; }
.aura-chart-empty__hint { color: var(--aura-color-text-muted); }
.aura-chart-empty__action {
  display: inline-flex;
  align-items: center;
  gap: var(--aura-space-1);
  font-size: var(--aura-font-size-sm);
  font-weight: var(--aura-font-weight-medium);
  color: var(--aura-color-brand-primary);
  text-decoration: none;
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-sm);
  padding: var(--aura-space-1) var(--aura-space-3);
}
.aura-chart-empty__action:hover { border-color: var(--aura-color-brand-primary); }

@media (max-width: 720px) {
  .aura-bar-chart__row { grid-template-columns: 100px 1fr 50px; }
  /* Narrow viewports cannot hold a one-line readout next to a 100px label
     column -- let it wrap instead of overflowing the card. */
  .aura-bar-chart__readout,
  .aura-donut-chart__readout { white-space: normal; max-inline-size: 60vw; }
}

@media (prefers-reduced-motion: reduce) {
  /* tokens.css already zeroes every --aura-motion-* duration here; this is
     the second guard, and it also kills the stroke-width/opacity easing on
     the donut, which is the only motion in this file an employee would
     perceive as movement rather than a state change. */
  .aura-bar-chart__fill,
  .aura-bar-chart__row,
  .aura-bar-chart__readout,
  .aura-donut-chart__segment,
  .aura-donut-chart__legend-item,
  .aura-donut-chart__readout {
    transition: none;
  }
}

/* -- Keyboard shortcuts cheatsheet (Dashboard Interactive Kit) --
   Reuses the same overlay/panel visual language as the command palette
   and profile menu -- see components.css/shell.css for the precedent
   this mirrors. */
.aura-shortcuts-cheatsheet {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 38, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--aura-z-modal);
}
.aura-shortcuts-cheatsheet[hidden] { display: none; }
.aura-shortcuts-cheatsheet__panel {
  position: relative;
  background: var(--aura-color-surface-overlay);
  border: 1px solid var(--aura-color-border-default);
  border-radius: var(--aura-radius-lg);
  box-shadow: var(--aura-shadow-lg);
  padding: var(--aura-space-5);
  min-inline-size: 320px;
  max-inline-size: 90vw;
}
.aura-shortcuts-cheatsheet__close {
  position: absolute;
  inset-block-start: var(--aura-space-2);
  inset-inline-end: var(--aura-space-2);
  background: transparent;
  border: none;
  font-size: var(--aura-font-size-lg);
  color: var(--aura-color-text-secondary);
  cursor: pointer;
}
.aura-shortcuts-cheatsheet__list { list-style: none; margin: var(--aura-space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--aura-space-2); }
.aura-shortcuts-cheatsheet__list kbd {
  font-family: var(--aura-font-mono);
  font-size: var(--aura-font-size-xs);
  background: var(--aura-color-surface-muted);
  border: 1px solid var(--aura-color-border-default);
  border-radius: 4px;
  padding: 0 4px;
}
.aura-shortcuts-cheatsheet__list a { color: var(--aura-color-text-primary); }