/* Self-hosted Inter, not a Google Fonts @import. Every model request in this
   project pins inference_geo, Supabase is in Frankfurt, and Resend sends from
   Ireland — a page load that phones fonts.googleapis.com would leak a
   student's IP address to a US-jurisdiction host and break that posture.
   One variable-weight file covers every weight this stylesheet uses. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  /* The warm paper canvas is core to the calm, and pure white is not it. */
  background: var(--canvas-soft);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--body-md-size);
  line-height: var(--body-md-line);
  font-feature-settings: 'lnum' 1;
}

.shell { max-width: 1080px; margin: 0 auto; padding: var(--space-xxl) var(--space-lg); }

/* FINDING 2 (review round 1): dashboard.js's header markup referenced this
   class with no rule anywhere in this file. Spacing and alignment only, on
   existing spacing tokens -- no fourth brand-controlled value, nothing from
   the sticker palette. Aligns the coach's logo (an <img>) or name (a
   <strong>) on one line and separates the header from the first week card. */
.shell-head { display: flex; align-items: center; margin-bottom: var(--space-lg); }

/* Sign-in and the callback are one short card, not a dashboard. A full 1080px
   column would strand a 40-character field alone on a wide screen. Spacing
   tokens only, nothing brand-controlled. */
.shell--narrow { max-width: 420px; }

/* The Google button is an <a>, so it needs the block layout a <button> gets
   for free inside the card. */
.button-block {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: none;
  /* min-height alone does not centre an anchor's text the way it does a
     button's, so the vertical padding does it here. */
  padding-top: var(--space-sm);
  padding-bottom: var(--space-sm);
}

h1 { font-size: var(--heading-1-size); line-height: var(--heading-1-line); letter-spacing: var(--heading-1-tracking); font-weight: 700; margin: 0 0 var(--space-lg); }
h2 { font-size: var(--heading-2-size); line-height: var(--heading-2-line); letter-spacing: var(--heading-2-tracking); font-weight: 700; margin: 0 0 var(--space-sm); }
h3 { font-size: var(--heading-3-size); line-height: var(--heading-3-line); letter-spacing: var(--heading-3-tracking); font-weight: 700; margin: 0 0 var(--space-xs); }
.eyebrow { font-size: var(--eyebrow-size); line-height: var(--eyebrow-line); letter-spacing: var(--eyebrow-tracking); font-weight: 600; text-transform: none; color: var(--ink-muted); }
.caption { font-size: var(--caption-size); line-height: var(--caption-line); color: var(--ink-faint); }
.muted { color: var(--ink-muted); }

a { color: var(--primary); }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}
.card--raised { box-shadow: var(--shadow-soft); }
.card--locked { background: var(--canvas-soft); color: var(--ink-muted); }

.button-primary {
  background: var(--primary);
  color: var(--on-primary);
  border: none;
  border-radius: var(--rounded-full);
  font: 500 var(--body-md-size)/var(--body-md-line) var(--font-sans);
  padding: var(--space-sm) var(--space-lg);
  min-height: 44px;
  cursor: pointer;
}
.button-primary:active { background: var(--primary-active); transform: scale(0.98); }
.button-primary[disabled] { opacity: 0.45; cursor: default; }

.button-utility {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-md);
  font: 500 var(--body-md-size)/var(--body-md-line) var(--font-sans);
  padding: var(--space-xxs) 14px;
  min-height: 44px;
  cursor: pointer;
}

.badge {
  display: inline-block;
  background: var(--surface);
  color: var(--primary);
  border: 1px solid var(--hairline);
  border-radius: var(--rounded-full);
  font-size: var(--eyebrow-size);
  font-weight: 600;
  letter-spacing: var(--eyebrow-tracking);
  padding: var(--space-xxs) var(--space-xs);
}
.badge--done { color: var(--success); }
.badge--locked { color: var(--ink-faint); }

/* Inputs stay tight at 4px. Pill radii on a form field is explicitly wrong
   in this system. */
.field {
  width: 100%;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid #dddddd;
  border-radius: var(--rounded-xs);
  font: 400 var(--body-sm-size)/var(--body-sm-line) var(--font-sans);
  padding: 6px;
}
.field:focus { box-shadow: var(--shadow-soft); }

label { display: block; font-size: var(--body-sm-size); margin-bottom: var(--space-xxs); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.notice-error {
  background: var(--error-soft);
  border: 1px solid var(--error);
  border-radius: var(--rounded-md);
  color: var(--error);
  padding: var(--space-sm) var(--space-md);
}
.notice-success {
  background: var(--success-soft);
  border: 1px solid var(--success);
  border-radius: var(--rounded-md);
  color: var(--success);
  padding: var(--space-sm) var(--space-md);
}

.band {
  background: var(--secondary);
  color: var(--on-primary);
  border-radius: var(--rounded-xl);
  padding: var(--space-xxl);
}

@media (max-width: 600px) {
  .shell { padding: var(--space-lg) var(--space-md); }
  h1 { font-size: 32px; letter-spacing: -0.5px; }
  .button-primary, .button-utility { width: 100%; }
}

.thread { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-lg); }
.bubble { border-radius: var(--rounded-lg); padding: var(--space-sm) var(--space-md); max-width: 46em; }
.bubble--assistant { background: var(--surface); border: 1px solid var(--hairline); }
.bubble--user { background: var(--primary); color: var(--on-primary); align-self: flex-end; }
.artifact-body { font-size: var(--body-sm-size); line-height: var(--body-sm-line); }

.library-list { list-style: none; margin: 0; padding: 0; }
.library-list li { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm) 0; border-bottom: 1px solid var(--hairline); }
.library-list li:last-child { border-bottom: none; }