/* tokens.css */
/* Design tokens.
 *
 * Components never hardcode a colour. They reference the role tokens in the
 * second block, and those roles are the only thing a restyle would touch.
 *
 * This system commits to one look: a warm green on white. There is no dark
 * theme, so every colour is stated explicitly here and nothing is left to be
 * inherited from whatever page the components are rendered into.
 */

:root {
  color-scheme: light;

  /* Palette. A warm, natural green: less institutional than a forest green,
   * and easier to sit with on the long screens this product is read on. */
  --ah-brand-50: #f0f7ef;
  --ah-brand-100: #dbedda;
  --ah-brand-200: #bcdcba;
  --ah-brand-300: #93c591;
  --ah-brand-400: #6fae6d;
  --ah-brand-500: #4c8b4a;
  --ah-brand-600: #3b6e39;
  --ah-brand-700: #2c5329;

  /* Neutrals carry a slight warm bias so they sit with the green rather than
   * beside it. A pure grey next to this green reads as unfinished. */
  --ah-ink-900: #1a1f18;
  --ah-ink-800: #272e25;
  --ah-ink-700: #3f4a3d;
  --ah-ink-600: #525d50;
  --ah-ink-500: #6b756a;
  --ah-ink-400: #8f998d;
  --ah-ink-300: #b8c0b6;
  --ah-ink-200: #d8ded6;
  --ah-ink-100: #eaefe8;
  --ah-ink-50: #f4f7f3;
  --ah-white: #ffffff;

  /* Verdict colours. Deliberately separate from the brand: "this passed" must
   * not be the same signal as "this is our product". */
  --ah-pass-fg: #3b6e39;
  --ah-pass-bg: #ecf5eb;
  --ah-warn-fg: #8a5e00;
  --ah-warn-bg: #fbf1dc;
  --ah-fail-fg: #a13636;
  --ah-fail-bg: #fbeaea;
  --ah-info-fg: #2f5c8a;
  --ah-info-bg: #e9f0f8;

  /* Roles. Everything a component touches. White ground; panels separate by
   * border and a light shadow rather than by a tinted fill. */
  --ah-bg: #ffffff;
  --ah-bg-raised: #ffffff;
  --ah-bg-sunken: var(--ah-ink-50);
  --ah-fg: var(--ah-ink-900);
  --ah-fg-muted: var(--ah-ink-600);
  --ah-fg-subtle: var(--ah-ink-500);
  --ah-border: var(--ah-ink-200);
  --ah-border-strong: var(--ah-ink-300);
  --ah-accent: var(--ah-brand-500);
  --ah-accent-hover: var(--ah-brand-600);
  --ah-accent-fg: var(--ah-white);
  --ah-accent-weak: var(--ah-brand-50);
  --ah-focus: var(--ah-brand-400);

  /* Type. A system stack: the runtime blocks font CDNs, and a real webfont
   * would ship as a large embedded blob for little gain in a dense tool. */
  --ah-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ah-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --ah-text-xs: 0.75rem;
  --ah-text-sm: 0.8125rem;
  --ah-text-md: 0.9375rem;
  --ah-text-lg: 1.125rem;
  --ah-text-xl: 1.5rem;
  --ah-leading-tight: 1.25;
  --ah-leading-normal: 1.55;

  /* Space, on a 4px base. */
  --ah-space-1: 4px;
  --ah-space-2: 8px;
  --ah-space-3: 12px;
  --ah-space-4: 16px;
  --ah-space-5: 24px;
  --ah-space-6: 32px;
  --ah-space-7: 48px;

  --ah-radius-sm: 4px;
  --ah-radius-md: 8px;
  --ah-radius-lg: 12px;
  --ah-radius-pill: 999px;

  --ah-shadow-sm: 0 1px 2px rgba(26, 31, 24, 0.06);
  --ah-shadow-md: 0 2px 8px rgba(26, 31, 24, 0.08);

  --ah-sidebar-width: 280px;
}


/* components.css */
/* Component rules. Every colour comes from a role token in tokens.css, so a
 * theme change never touches this file. */

.ah-root {
  font-family: var(--ah-font-sans);
  font-size: var(--ah-text-md);
  line-height: var(--ah-leading-normal);
  color: var(--ah-fg);
  background: var(--ah-bg);
}
.ah-root *, .ah-root *::before, .ah-root *::after { box-sizing: border-box; }

:where(.ah-root) :focus-visible {
  outline: 2px solid var(--ah-focus);
  outline-offset: 2px;
  border-radius: var(--ah-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .ah-root * { transition: none !important; animation: none !important; }
}

/* --- Button ------------------------------------------------------------- */
.ah-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ah-space-2);
  font: inherit; font-weight: 600; line-height: 1;
  border-radius: var(--ah-radius-md); border: 1px solid transparent;
  cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
}
.ah-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ah-btn--md { padding: 9px 16px; font-size: var(--ah-text-md); }
.ah-btn--sm { padding: 6px 11px; font-size: var(--ah-text-sm); }
.ah-btn--primary { background: var(--ah-accent); color: var(--ah-accent-fg); }
.ah-btn--primary:hover:not(:disabled) { background: var(--ah-accent-hover); }
.ah-btn--secondary { background: var(--ah-bg-raised); color: var(--ah-fg); border-color: var(--ah-border-strong); }
.ah-btn--secondary:hover:not(:disabled) { background: var(--ah-bg-sunken); }
.ah-btn--ghost { background: transparent; color: var(--ah-fg-muted); }
.ah-btn--ghost:hover:not(:disabled) { background: var(--ah-bg-sunken); color: var(--ah-fg); }
.ah-btn--danger { background: var(--ah-fail-bg); color: var(--ah-fail-fg); border-color: var(--ah-fail-fg); }
.ah-btn--danger:hover:not(:disabled) { background: var(--ah-fail-fg); color: var(--ah-bg-raised); }

/* --- Form controls ------------------------------------------------------ */
.ah-control {
  width: 100%; font: inherit; color: var(--ah-fg);
  background: var(--ah-bg-raised);
  border: 1px solid var(--ah-border-strong); border-radius: var(--ah-radius-md);
  padding: 9px 12px;
}
.ah-control::placeholder { color: var(--ah-fg-subtle); }
.ah-control:disabled { background: var(--ah-bg-sunken); cursor: not-allowed; }
.ah-textarea { min-height: 96px; resize: vertical; line-height: var(--ah-leading-normal); }
.ah-select { appearance: none; padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }

.ah-field { display: flex; flex-direction: column; gap: var(--ah-space-2); }
.ah-field__label { font-size: var(--ah-text-sm); font-weight: 600; color: var(--ah-fg-muted); }
.ah-field__hint { font-size: var(--ah-text-sm); color: var(--ah-fg-subtle); }
.ah-field__error { font-size: var(--ah-text-sm); color: var(--ah-fail-fg); }

/* --- Badge and pill ----------------------------------------------------- */
.ah-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: var(--ah-radius-sm);
  font-size: var(--ah-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--ah-bg-sunken); color: var(--ah-fg-muted);
}
.ah-badge--pass { background: var(--ah-pass-bg); color: var(--ah-pass-fg); }
.ah-badge--warn { background: var(--ah-warn-bg); color: var(--ah-warn-fg); }
.ah-badge--fail { background: var(--ah-fail-bg); color: var(--ah-fail-fg); }
.ah-badge--info { background: var(--ah-info-bg); color: var(--ah-info-fg); }
.ah-badge--accent { background: var(--ah-accent-weak); color: var(--ah-accent); }

.ah-pill {
  display: inline-flex; align-items: center; gap: var(--ah-space-2);
  padding: 4px 12px; border-radius: var(--ah-radius-pill);
  font-size: var(--ah-text-sm); font-weight: 600;
  background: var(--ah-bg-sunken); color: var(--ah-fg-muted);
}
.ah-pill--running { background: var(--ah-info-bg); color: var(--ah-info-fg); }
.ah-pill--ok { background: var(--ah-pass-bg); color: var(--ah-pass-fg); }
.ah-pill--warn { background: var(--ah-warn-bg); color: var(--ah-warn-fg); }
.ah-pill--error { background: var(--ah-fail-bg); color: var(--ah-fail-fg); }
.ah-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }

/* --- Panel, toolbar, shell ---------------------------------------------- */
.ah-panel {
  background: var(--ah-bg-raised); border: 1px solid var(--ah-border);
  border-radius: var(--ah-radius-lg); box-shadow: var(--ah-shadow-sm);
}
.ah-panel__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ah-space-3);
  padding: var(--ah-space-3) var(--ah-space-4); border-bottom: 1px solid var(--ah-border);
}
.ah-panel__title { margin: 0; font-size: var(--ah-text-xs); font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ah-fg-subtle); }
.ah-panel__body { padding: var(--ah-space-4); }
.ah-panel__body--flush { padding: 0; }

.ah-toolbar {
  display: flex; align-items: center; gap: var(--ah-space-3); flex-wrap: wrap;
  padding: var(--ah-space-3) var(--ah-space-4);
  background: var(--ah-bg-raised); border-bottom: 1px solid var(--ah-border);
}
.ah-toolbar__spacer { flex: 1 1 auto; }

.ah-shell { display: flex; min-height: 100vh; background: var(--ah-bg); }
.ah-shell__sidebar {
  width: var(--ah-sidebar-width); flex: none; overflow-y: auto;
  background: var(--ah-bg-raised); border-right: 1px solid var(--ah-border);
}
.ah-shell__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ah-shell__content { flex: 1 1 auto; padding: var(--ah-space-5); display: flex; flex-direction: column; gap: var(--ah-space-4); }
@media (max-width: 860px) {
  .ah-shell { flex-direction: column; }
  .ah-shell__sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--ah-border); max-height: 40vh; }
}

/* --- Tree --------------------------------------------------------------- */
.ah-tree { padding: var(--ah-space-3); font-size: var(--ah-text-sm); }
.ah-tree__group { margin-bottom: var(--ah-space-1); }
.ah-tree__label {
  display: flex; align-items: center; gap: var(--ah-space-2); width: 100%;
  padding: 6px 8px; border: none; background: none; font: inherit; color: var(--ah-fg);
  border-radius: var(--ah-radius-sm); cursor: pointer; text-align: left;
}
.ah-tree__label:hover { background: var(--ah-bg-sunken); }
.ah-tree__label[aria-current="true"] { background: var(--ah-accent-weak); color: var(--ah-accent); font-weight: 600; }
.ah-tree__caret { flex: none; width: 12px; color: var(--ah-fg-subtle); transition: transform 120ms ease; }
.ah-tree__caret--open { transform: rotate(90deg); }
.ah-tree__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah-tree__children { margin-left: var(--ah-space-4); border-left: 1px solid var(--ah-border); padding-left: var(--ah-space-2); }

/* --- Check list --------------------------------------------------------- */
.ah-checks { display: flex; flex-direction: column; }
.ah-checks__row {
  display: flex; align-items: baseline; gap: var(--ah-space-3);
  padding: var(--ah-space-2) var(--ah-space-4); border-bottom: 1px solid var(--ah-border);
  font-size: var(--ah-text-sm);
}
.ah-checks__row:last-child { border-bottom: none; }
.ah-checks__mark { flex: none; font-weight: 700; font-family: var(--ah-font-mono); }
.ah-checks__mark--pass { color: var(--ah-pass-fg); }
.ah-checks__mark--fail { color: var(--ah-fail-fg); }
.ah-checks__label { flex: 1 1 auto; min-width: 0; }
.ah-checks__detail { color: var(--ah-fg-subtle); font-family: var(--ah-font-mono); font-size: var(--ah-text-xs); }
.ah-checks__row--fail { background: var(--ah-fail-bg); }

/* --- Score card --------------------------------------------------------- */
.ah-score { display: flex; flex-wrap: wrap; gap: var(--ah-space-5); align-items: flex-end; }
.ah-score__item { display: flex; flex-direction: column; gap: var(--ah-space-1); }
.ah-score__label { font-size: var(--ah-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ah-fg-subtle); }
.ah-score__value { font-size: var(--ah-text-xl); font-weight: 700; font-variant-numeric: tabular-nums; line-height: var(--ah-leading-tight); }
.ah-score__value--strong { color: var(--ah-accent); }

/* --- Compare ------------------------------------------------------------ */
.ah-compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ah-space-4); }
@media (max-width: 860px) { .ah-compare { grid-template-columns: 1fr; } }
.ah-compare__col { display: flex; flex-direction: column; gap: var(--ah-space-2); min-width: 0; }
.ah-compare__head { display: flex; align-items: center; gap: var(--ah-space-2); }
.ah-compare__body {
  white-space: pre-wrap; word-break: break-word; font-size: var(--ah-text-sm);
  background: var(--ah-bg-sunken); border-radius: var(--ah-radius-md); padding: var(--ah-space-3);
  overflow-x: auto;
}

/* --- Proposal card ------------------------------------------------------ */
.ah-proposal {
  display: flex; gap: var(--ah-space-3); align-items: flex-start;
  padding: var(--ah-space-3); border: 1px solid var(--ah-border);
  border-radius: var(--ah-radius-md); background: var(--ah-bg-raised); cursor: pointer;
}
.ah-proposal:hover { border-color: var(--ah-border-strong); }
.ah-proposal__box { margin-top: 3px; flex: none; accent-color: var(--ah-accent); }
.ah-proposal__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--ah-space-2); }
.ah-proposal__rule { display: flex; align-items: baseline; gap: var(--ah-space-2); flex-wrap: wrap; }
.ah-proposal__why { font-size: var(--ah-text-sm); color: var(--ah-fg-subtle); }
.ah-proposal__edit {
  font-family: var(--ah-font-mono); font-size: var(--ah-text-xs);
  background: var(--ah-bg-sunken); padding: var(--ah-space-2); border-radius: var(--ah-radius-sm);
  overflow-x: auto; white-space: pre;
}

/* --- Callout ------------------------------------------------------------ */
.ah-callout {
  display: flex; flex-direction: column; gap: var(--ah-space-2);
  padding: var(--ah-space-3) var(--ah-space-4);
  border-radius: var(--ah-radius-md); border-left: 3px solid;
  font-size: var(--ah-text-sm);
}
.ah-callout--info { background: var(--ah-info-bg); border-color: var(--ah-info-fg); color: var(--ah-info-fg); }
.ah-callout--warn { background: var(--ah-warn-bg); border-color: var(--ah-warn-fg); color: var(--ah-warn-fg); }
.ah-callout--danger { background: var(--ah-fail-bg); border-color: var(--ah-fail-fg); color: var(--ah-fail-fg); }
.ah-callout--pass { background: var(--ah-pass-bg); border-color: var(--ah-pass-fg); color: var(--ah-pass-fg); }
.ah-callout__title { font-weight: 700; }

/* --- Deliverable -------------------------------------------------------- */
.ah-deliverable { display: flex; flex-direction: column; gap: var(--ah-space-3); }
.ah-deliverable__meta { display: flex; align-items: center; gap: var(--ah-space-2); flex-wrap: wrap; }
.ah-deliverable__body {
  white-space: pre-wrap; word-break: break-word;
  font-size: var(--ah-text-md); line-height: var(--ah-leading-normal);
  background: var(--ah-bg-sunken); border-radius: var(--ah-radius-md); padding: var(--ah-space-4);
  overflow-x: auto;
}

/* --- Empty state -------------------------------------------------------- */
.ah-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--ah-space-2);
  padding: var(--ah-space-7) var(--ah-space-4); text-align: center; color: var(--ah-fg-subtle);
}
.ah-empty__title { font-weight: 600; color: var(--ah-fg-muted); }