/* ==========================================================================
   Meeting tool — style system
   Layer order fixes precedence by position, not specificity: a utility always
   beats a component, and a component never fights the base reset.
   ========================================================================== */
@layer tokens, base, layout, components, utilities;

/* ==========================================================================
   TOKENS
   Raw palette values are declared once; each theme only remaps the aliases
   underneath. Style components through the aliases, never the raw values.
   ========================================================================== */
@layer tokens {
  :root {
    /* raw palette — slate neutrals biased cool, institutional azure accent */
    --c-ink-l: #171b23;          --c-ink-d: #e7eaf0;
    --c-mute-l: #5b6472;         --c-mute-d: #98a2b3;
    --c-bg-l: #f5f7fa;           --c-bg-d: #10131a;
    --c-surf-l: #ffffff;         --c-surf-d: #1a1f28;
    --c-line-l: #e3e6ec;         --c-line-d: #2b313d;
    --c-accent-l: #2a5cd7;       --c-accent-d: #7aa5ff;
    --c-accent-on-l: #ffffff;    --c-accent-on-d: #0d1017;
    --c-accent-hover-l: #1f49b4; --c-accent-hover-d: #9dbcff;
    --c-accent-wash-l: #eaf0fe;  --c-accent-wash-d: #1c2740;
    --c-ok-l: #0f7a52;           --c-ok-d: #48d597;
    --c-ok-wash-l: #e6f6ef;      --c-ok-wash-d: #12301f;
    --c-warn-l: #8a5a00;         --c-warn-d: #f0b849;
    --c-warn-wash-l: #fdf4e3;    --c-warn-wash-d: #332612;
    --c-bad-l: #b3261e;          --c-bad-d: #ff9a90;
    --c-bad-wash-l: #fdeceb;     --c-bad-wash-d: #3a1c19;
    --c-shadow-l: 0 1px 2px rgba(16, 19, 26, .06), 0 4px 12px rgba(16, 19, 26, .05);
    --c-shadow-d: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 14px rgba(0, 0, 0, .3);

    /* active aliases — light */
    --text: var(--c-ink-l);
    --muted: var(--c-mute-l);
    --bg: var(--c-bg-l);
    --surface: var(--c-surf-l);
    --line: var(--c-line-l);
    --accent: var(--c-accent-l);
    --accent-on: var(--c-accent-on-l);
    --accent-hover: var(--c-accent-hover-l);
    --accent-wash: var(--c-accent-wash-l);
    --ok: var(--c-ok-l);
    --ok-wash: var(--c-ok-wash-l);
    --warn: var(--c-warn-l);
    --warn-wash: var(--c-warn-wash-l);
    --bad: var(--c-bad-l);
    --bad-wash: var(--c-bad-wash-l);
    --shadow: var(--c-shadow-l);

    /* type */
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    --t-xs: .75rem;
    --t-sm: .8125rem;
    --t-md: .9375rem;
    --t-base: 1rem;
    --t-lg: 1.125rem;
    --t-xl: 1.375rem;
    --t-2xl: 1.75rem;

    /* space + shape */
    --s1: .25rem;
    --s2: .5rem;
    --s3: .75rem;
    --s4: 1rem;
    --s5: 1.5rem;
    --s6: 2rem;
    --s7: 3rem;
    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 12px;
    --r-full: 999px;
  }

  /* --- mode selection -----------------------------------------------------
     "Auto" removes data-mode entirely, so the media query governs. Every
     explicit mode sets the attribute, which is why :not([data-mode]) is all
     the guarding the media query needs — no specificity arithmetic.
     "Light" needs no block: the :root defaults above already are light.
     ---------------------------------------------------------------------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-mode]) {
      --text: var(--c-ink-d);
      --muted: var(--c-mute-d);
      --bg: var(--c-bg-d);
      --surface: var(--c-surf-d);
      --line: var(--c-line-d);
      --accent: var(--c-accent-d);
      --accent-on: var(--c-accent-on-d);
      --accent-hover: var(--c-accent-hover-d);
      --accent-wash: var(--c-accent-wash-d);
      --ok: var(--c-ok-d);
      --ok-wash: var(--c-ok-wash-d);
      --warn: var(--c-warn-d);
      --warn-wash: var(--c-warn-wash-d);
      --bad: var(--c-bad-d);
      --bad-wash: var(--c-bad-wash-d);
      --shadow: var(--c-shadow-d);
    }
  }

  :root[data-mode="dark"] {
    --text: var(--c-ink-d);
    --muted: var(--c-mute-d);
    --bg: var(--c-bg-d);
    --surface: var(--c-surf-d);
    --line: var(--c-line-d);
    --accent: var(--c-accent-d);
    --accent-on: var(--c-accent-on-d);
    --accent-hover: var(--c-accent-hover-d);
    --accent-wash: var(--c-accent-wash-d);
    --ok: var(--c-ok-d);
    --ok-wash: var(--c-ok-wash-d);
    --warn: var(--c-warn-d);
    --warn-wash: var(--c-warn-wash-d);
    --bad: var(--c-bad-d);
    --bad-wash: var(--c-bad-wash-d);
    --shadow: var(--c-shadow-d);
  }

}

/* ==========================================================================
   BASE
   ========================================================================== */
@layer base {
  *,
  *::before,
  *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font: var(--t-base) / 1.6 var(--sans);
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 {
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.015em;
    text-wrap: balance;
  }
  h1 { font-size: var(--t-2xl); font-weight: 650; }
  h2 { font-size: var(--t-xl); font-weight: 620; }
  h3 { font-size: var(--t-md); font-weight: 640; }

  p { margin: 0; }
  ul { margin: 0; padding: 0; list-style: none; }

  a {
    color: var(--accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
  }
  a:hover { color: var(--accent-hover); }

  code { font: var(--t-sm) / 1.5 var(--mono); }

  :where(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      transition-duration: .01ms !important;
      animation-duration: .01ms !important;
    }
  }
}

/* ==========================================================================
   LAYOUT
   Sibling groups are spaced with flex/grid gap, never per-element margins.
   ========================================================================== */
@layer layout {
  .wrap {
    width: 100%;
    max-width: 64rem;
    margin: 0 auto;
    padding: var(--s5) var(--s5) var(--s7);
    display: flex;
    flex-direction: column;
    gap: var(--s5);
  }
  .wrap--narrow { max-width: 30rem; }

  /* centered single-card pages (sign-in) */
  .layout-centered {
    display: grid;
    place-items: center;
    padding: var(--s5);
  }

  .app-header {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) var(--s5);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  .panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow);
    padding: var(--s5);
    display: flex;
    flex-direction: column;
    gap: var(--s4);
  }

  .stack {
    display: flex;
    flex-direction: column;
    gap: var(--s3);
  }
  .stack--tight { gap: var(--s1); }
  .stack--loose { gap: var(--s5); }

  .row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
  }

  .scroll-x { overflow-x: auto; }
}

/* ==========================================================================
   COMPONENTS
   ========================================================================== */
@layer components {
  /* --- brand / identity --- */
  .brand {
    display: flex;
    align-items: center;
    gap: var(--s3);
    font-weight: 650;
    color: var(--text);
    text-decoration: none;
  }
  .brand-mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border-radius: var(--r-sm);
    background: var(--accent);
    color: var(--accent-on);
    font: 700 var(--t-sm) / 1 var(--sans);
  }

  .identity {
    display: flex;
    align-items: center;
    gap: var(--s3);
    min-width: 0;
  }
  .avatar {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    flex-shrink: 0;
    border-radius: var(--r-full);
    background: var(--accent-wash);
    color: var(--accent);
    font: 700 var(--t-md) / 1 var(--sans);
  }
  .identity-name { font-weight: 640; font-size: var(--t-md); }
  .identity-mail {
    font-size: var(--t-sm);
    color: var(--muted);
    overflow-wrap: anywhere;
  }

  /* --- buttons: one class, three intents --- */
  .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    padding: .55rem .9rem;
    border: 1px solid transparent;
    border-radius: var(--r-md);
    font: 640 var(--t-md) / 1.2 var(--sans);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
  }
  .btn--primary {
    background: var(--accent);
    color: var(--accent-on);
  }
  .btn--primary:hover { background: var(--accent-hover); color: var(--accent-on); }
  .btn--secondary {
    background: var(--surface);
    color: var(--text);
    border-color: var(--line);
  }
  .btn--secondary:hover {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent);
  }
  .btn--ghost {
    background: transparent;
    color: var(--accent);
    padding-inline: var(--s2);
  }
  .btn--ghost:hover { background: var(--accent-wash); }
  .btn--lg { padding: .7rem 1.25rem; font-size: var(--t-base); }
  .btn[disabled],
  .btn[aria-disabled="true"] { opacity: .6; cursor: default; }

  /* --- state pills --- */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .55rem;
    border-radius: var(--r-full);
    font: 640 var(--t-xs) / 1.3 var(--sans);
    white-space: nowrap;
  }
  .pill--ok { background: var(--ok-wash); color: var(--ok); }
  .pill--warn { background: var(--warn-wash); color: var(--warn); }
  .pill--bad { background: var(--bad-wash); color: var(--bad); }
  .pill--info { background: var(--accent-wash); color: var(--accent); }

  /* --- messages --- */
  .note {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s3) var(--s4);
    border-left: 3px solid;
    border-radius: var(--r-md);
    font-size: var(--t-md);
  }
  .note--info { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
  .note--warn { background: var(--warn-wash); color: var(--warn); border-color: var(--warn); }
  .note--bad { background: var(--bad-wash); color: var(--bad); border-color: var(--bad); }
  .note-detail {
    font: var(--t-xs) / 1.5 var(--mono);
    opacity: .85;
    overflow-wrap: anywhere;
  }

  /* --- labelled metadata (IDs, join URLs) --- */
  .field { display: flex; flex-direction: column; gap: var(--s1); }
  .field-label {
    font: 640 var(--t-xs) / 1 var(--sans);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .field-value {
    font: var(--t-sm) / 1.5 var(--mono);
    overflow-wrap: anywhere;
    color: var(--text);
  }

  /* --- artifact row: transcripts + recordings --- */
  .artifact {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: center;
    justify-content: space-between;
    padding: var(--s3) 0;
    border-bottom: 1px solid var(--line);
  }
  .artifact:last-child { border-bottom: 0; }
  .artifact-main {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    flex: 1 1 14rem;
  }
  .artifact-kind {
    font: 640 var(--t-xs) / 1.3 var(--sans);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .artifact-time {
    font: var(--t-md) / 1.4 var(--mono);
    font-variant-numeric: tabular-nums;
  }
  .artifact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
    align-items: center;
  }
  .artifact-status {
    font: var(--t-xs) / 1.5 var(--mono);
    overflow-wrap: anywhere;
  }
  .artifact-status--ok { color: var(--ok); }
  .artifact-status--bad { color: var(--bad); }

  /* --- meeting list --- */
  .meeting-item {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s4);
    align-items: center;
    justify-content: space-between;
    padding: var(--s4) 0;
    border-bottom: 1px solid var(--line);
  }
  .meeting-item:last-child { border-bottom: 0; }
  .meeting-title {
    font: 650 var(--t-base) / 1.4 var(--sans);
    color: var(--accent);
    text-decoration: none;
  }
  .meeting-title:hover { text-decoration: underline; }
  .meeting-when {
    font: var(--t-sm) / 1.5 var(--mono);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
  }

  /* --- empty / loading --- */
  .empty {
    padding: var(--s5) 0;
    color: var(--muted);
    font-size: var(--t-md);
  }

  /* --- mode pulldown --- */
  .mode {
    display: flex;
    align-items: center;
    gap: var(--s2);
  }
  .mode-select {
    appearance: none;
    padding: .5rem 1.9rem .5rem .7rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background-color: var(--surface);
    color: var(--text);
    font: 640 var(--t-md) / 1.2 var(--sans);
    cursor: pointer;
    /* chevron drawn in the token colour, so it follows the mode */
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) center, calc(100% - .75rem) center;
    background-size: .3rem .3rem, .3rem .3rem;
    background-repeat: no-repeat;
  }
  .mode-select:hover { border-color: var(--accent); color: var(--accent); }

  /* --- feedback dialog --- */
  .btn--icon { gap: var(--s2); }
  .btn--icon svg { flex-shrink: 0; }

  .sheet {
    width: min(32rem, calc(100vw - 2rem));
    padding: var(--s5);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 12px 40px rgb(0 0 0 / .28);
  }
  .sheet::backdrop { background: rgb(8 11 16 / .55); }
  .sheet > form {
    display: flex;
    flex-direction: column;
    gap: var(--s5);
  }

  .segmented {
    display: flex;
    gap: var(--s2);
    flex-wrap: wrap;
  }
  .segment {
    flex: 1 1 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s2);
    padding: .55rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    font: 640 var(--t-md) / 1.2 var(--sans);
    text-align: center;
    cursor: pointer;
  }
  .segment input { position: absolute; opacity: 0; pointer-events: none; }
  .segment:hover { border-color: var(--accent); }
  .segment:has(input:checked) {
    background: var(--accent-wash);
    border-color: var(--accent);
    color: var(--accent);
  }
  .segment:has(input:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  .input {
    width: 100%;
    padding: var(--s3);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    background: var(--bg);
    color: var(--text);
    font: var(--t-md) / 1.55 var(--sans);
    resize: vertical;
  }
  .input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
  }

  .disclose { font-size: var(--t-sm); color: var(--muted); }
  .disclose summary { cursor: pointer; }
  .disclose-list {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    padding: var(--s2) 0 0 var(--s4);
    list-style: disc;
  }
  .disclose-list li { display: list-item; }

  .feedback-status {
    font-size: var(--t-md);
    min-height: 1.4em;
    color: var(--muted);
  }
  .feedback-status--ok { color: var(--ok); }
  .feedback-status--bad { color: var(--bad); }

  /* --- checklist (sign-in page) --- */
  .checklist {
    display: flex;
    flex-direction: column;
    gap: var(--s2);
    font-size: var(--t-md);
    color: var(--muted);
    text-align: left;
  }
  .checklist li {
    display: flex;
    gap: var(--s2);
    align-items: baseline;
  }
  .checklist li::before {
    content: "✓";
    color: var(--ok);
    font-weight: 700;
    flex-shrink: 0;
  }

}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
@layer utilities {
  .eyebrow {
    font: 600 var(--t-xs) / 1.3 var(--sans);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .lede { color: var(--muted); max-width: 62ch; }
  .muted { color: var(--muted); }
  .mono { font-family: var(--mono); }
  .tabular { font-variant-numeric: tabular-nums; }
  .text-center { text-align: center; }
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}