/*
 * AHA Live Kit v1: https://live.nedo.app/kit/kit.css
 * Small design kit for apps built live on stage at AHA 2026.
 * Calm warm neutrals, Inter, pill buttons, 16px cards, 4px tags; AHA red only as a small accent.
 * Values re-implemented for this event (no proprietary source). Inter is SIL OFL 1.1 (see inter-OFL.txt).
 *
 * Use:  <link rel="stylesheet" href="https://live.nedo.app/kit/kit.css">
 *       <body class="ak"> ... </body>
 * Example: https://live.nedo.app/kit/
 */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(inter-var.woff2) format('woff2');
}
:root {
  --ak-red: #C10E20; --ak-red-dark: #990000; --ak-red-tint: #FBE7E9;
  --ak-white: #FFFFFF; --ak-black: #000000;
  --ak-grey-10: #FCF9F8; --ak-grey-20: #F0ECEB; --ak-grey-30: #DBD6D5; --ak-grey-40: #CDC7C6; --ak-grey-50: #B6AFAF;
  --ak-grey-55: #847F7F; --ak-grey-60: #5B5756; --ak-grey-70: #423F3E; --ak-grey-80: #2F2F2F; --ak-grey-90: #1C1C1C;
  --ak-stone-10: #F9F5F1; --ak-stone-20: #F2EBE3; --ak-stone-30: #E7DCD0; --ak-stone-60: #726A64;
  --ak-green-10: #E7F6EC; --ak-green-60: #1E7A3F; --ak-amber-10: #FFF4DE; --ak-amber-60: #8A5A00;
  --ak-blue-10: #E9F0FB; --ak-blue-60: #24508F;
  /* semantic */
  --ak-bg: var(--ak-grey-20); --ak-surface: var(--ak-white); --ak-subtle: var(--ak-stone-10);
  --ak-text: var(--ak-black); --ak-text-2: var(--ak-grey-70); --ak-text-3: var(--ak-grey-60);
  --ak-stroke: var(--ak-grey-30); --ak-stroke-2: var(--ak-grey-20); --ak-focus: var(--ak-grey-90);
  --ak-accent: var(--ak-red);
  /* scale */
  --ak-s1: 4px; --ak-s2: 8px; --ak-s3: 12px; --ak-s4: 16px; --ak-s5: 24px; --ak-s6: 32px; --ak-s7: 48px;
  --ak-r-sm: 4px; --ak-r-md: 8px; --ak-r-lg: 12px; --ak-r-xl: 16px; --ak-r-xxl: 24px; --ak-r-pill: 999px;
  --ak-shadow-sm: 0 4px 6px -2px rgba(16,24,40,.03), 0 4px 16px -4px rgba(16,24,40,.05);
  --ak-shadow-md: 0 4px 6px -2px rgba(16,24,40,.03), 0 12px 16px -4px rgba(16,24,40,.08);
  --ak-shadow-lg: 0 4px 6px -2px rgba(16,24,40,.03), 0 16px 28px -4px rgba(16,24,40,.14);
  --ak-ease: cubic-bezier(.2,.8,.2,1);
  --ak-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ak-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.ak, .ak * { box-sizing: border-box; }
.ak { margin: 0; min-height: 100vh; background: var(--ak-bg); color: var(--ak-text); font: 400 16px/1.5 var(--ak-font);
  -webkit-font-smoothing: antialiased; font-feature-settings: 'cv11', 'ss01'; }
.ak h1, .ak h2, .ak h3, .ak h4 { font-weight: 500; letter-spacing: -.02em; line-height: 1.15; margin: 0; }
.ak h1 { font-size: clamp(28px, 4vw, 40px); } .ak h2 { font-size: 24px; } .ak h3 { font-size: 18px; } .ak h4 { font-size: 16px; }
.ak p { margin: 0; } .ak a { color: var(--ak-text); text-underline-offset: 3px; }
.ak button, .ak input, .ak select, .ak textarea { font: inherit; color: inherit; }
.ak :focus-visible { outline: 2px solid var(--ak-focus); outline-offset: 2px; }
.ak [hidden] { display: none !important; }
.ak-muted { color: var(--ak-text-3); } .ak-small { font-size: 13px; } .ak-label { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--ak-text-3); }
.ak-num { font-variant-numeric: tabular-nums; }

/* layout */
.ak-page { max-width: 1080px; margin: 0 auto; padding: var(--ak-s5) var(--ak-s5) var(--ak-s7); }
.ak-narrow { max-width: 640px; }
.ak-stack { display: flex; flex-direction: column; gap: var(--ak-s4); }
.ak-row { display: flex; align-items: center; gap: var(--ak-s3); flex-wrap: wrap; }
.ak-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--ak-s3); }
.ak-grid { display: grid; gap: var(--ak-s4); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* header / footer */
.ak-header { display: flex; align-items: center; justify-content: space-between; gap: var(--ak-s3); padding: var(--ak-s4) 0 var(--ak-s5); }
.ak-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.ak-wordmark { height: 16px; width: auto; color: var(--ak-grey-90); display: block; }
.ak-brand .ak-sep { width: 1px; height: 16px; background: var(--ak-stroke); }
.ak-footer { margin-top: var(--ak-s6); padding-top: var(--ak-s4); border-top: 1px solid var(--ak-stroke); font-size: 12px; color: var(--ak-text-3); }

/* card */
.ak-card { background: var(--ak-surface); border-radius: var(--ak-r-xl); padding: var(--ak-s5); box-shadow: var(--ak-shadow-sm); }
.ak-card.flat { box-shadow: none; border: 1px solid var(--ak-stroke); }
.ak-card.subtle { background: var(--ak-subtle); box-shadow: none; }
.ak-card > * + * { margin-top: var(--ak-s3); }

/* buttons (pills) */
.ak-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px;
  border-radius: var(--ak-r-pill); border: 1px solid transparent; font-weight: 500; font-size: 15px; cursor: pointer;
  text-decoration: none; white-space: nowrap; transition: background .2s var(--ak-ease), transform .1s var(--ak-ease); }
.ak-btn:active { transform: scale(.98); }
.ak .ak-btn, .ak-btn, .ak-btn.primary { background: var(--ak-grey-90); color: var(--ak-white); }
.ak-btn:hover { background: var(--ak-black); }
.ak .ak-btn.secondary, .ak-btn.secondary { background: var(--ak-surface); color: var(--ak-text); border-color: var(--ak-stroke); }
.ak-btn.secondary:hover { background: var(--ak-grey-10); border-color: var(--ak-grey-50); }
.ak .ak-btn.ghost, .ak-btn.ghost { background: transparent; color: var(--ak-text); }
.ak-btn.ghost:hover { background: var(--ak-grey-20); }
.ak .ak-btn.accent, .ak-btn.accent { background: var(--ak-red); color: var(--ak-white); } .ak-btn.accent:hover { background: var(--ak-red-dark); }
.ak-btn.sm { height: 32px; padding: 0 14px; font-size: 13px; } .ak-btn.lg { height: 52px; padding: 0 26px; font-size: 16px; }
.ak-btn.block { width: 100%; }
.ak-btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* tags + chips */
.ak-tag { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: var(--ak-r-sm);
  font-size: 12px; font-weight: 500; letter-spacing: .02em; white-space: nowrap; background: var(--ak-grey-20); color: var(--ak-text-2); }
.ak-tag.dark { background: var(--ak-grey-90); color: var(--ak-white); }
.ak-tag.red { background: var(--ak-red-tint); color: var(--ak-red-dark); }
.ak-tag.green { background: var(--ak-green-10); color: var(--ak-green-60); }
.ak-tag.amber { background: var(--ak-amber-10); color: var(--ak-amber-60); }
.ak-tag.blue { background: var(--ak-blue-10); color: var(--ak-blue-60); }
.ak-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; display: inline-block; }
.ak-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--ak-r-pill);
  border: 1px solid var(--ak-stroke); background: var(--ak-surface); font-size: 14px; cursor: pointer; }
.ak-chip[aria-pressed="true"], .ak-chip.on { background: var(--ak-grey-90); border-color: var(--ak-grey-90); color: var(--ak-white); }

/* inputs */
.ak-field { display: flex; flex-direction: column; gap: 6px; }
.ak-field > label { font-size: 13px; font-weight: 500; color: var(--ak-text-2); }
.ak-input, .ak-select, .ak-textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: var(--ak-r-md);
  border: 1px solid var(--ak-stroke); background: var(--ak-surface); font-size: 16px; transition: border-color .2s; }
.ak-textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
.ak-input:hover, .ak-select:hover, .ak-textarea:hover { border-color: var(--ak-grey-50); }
.ak-input:focus, .ak-select:focus, .ak-textarea:focus { outline: none; border-color: var(--ak-focus); box-shadow: 0 0 0 3px rgba(28,28,28,.08); }
.ak-check { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ak-stroke-2); cursor: pointer; }
.ak-check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ak-grey-90); flex: none; }

/* lists, stats, alerts, tables */
.ak-list { list-style: none; margin: 0; padding: 0; }
.ak-list > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--ak-stroke-2); }
.ak-list > li:last-child { border-bottom: 0; }
.ak-stat { display: flex; flex-direction: column; gap: 2px; }
.ak-stat b { font-size: 32px; font-weight: 500; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ak-stat span { font-size: 13px; color: var(--ak-text-3); }
.ak-alert { display: flex; gap: 10px; padding: 12px 16px; border-radius: var(--ak-r-lg); background: var(--ak-subtle); color: var(--ak-text-2); font-size: 14px; }
.ak-alert.red { background: var(--ak-red-tint); color: var(--ak-red-dark); }
.ak-alert.green { background: var(--ak-green-10); color: var(--ak-green-60); }
.ak-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ak-table th { text-align: left; font-weight: 500; font-size: 12px; color: var(--ak-text-3); letter-spacing: .03em; padding: 8px 10px; border-bottom: 1px solid var(--ak-stroke); }
.ak-table td { padding: 12px 10px; border-bottom: 1px solid var(--ak-stroke-2); }
.ak-progress { height: 8px; border-radius: 99px; background: var(--ak-grey-20); overflow: hidden; }
.ak-progress > i { display: block; height: 100%; background: var(--ak-grey-90); border-radius: inherit; transition: width .4s var(--ak-ease); }
.ak-divider { height: 1px; background: var(--ak-stroke); border: 0; margin: var(--ak-s4) 0; }

@media (max-width: 560px) { .ak-page { padding: var(--ak-s4) var(--ak-s4) var(--ak-s6); } .ak-card { padding: var(--ak-s4); } }
@media (prefers-reduced-motion: reduce) { .ak * { transition: none !important; animation: none !important; } }