/* ============================================================
   SIZE 2.0 Module [PUBLIC] — shared design system
   Palette taken from the SIZE logo: warm yellow-orange to
   teal/green gradient, on a warm light background.
   Dark-on-light text, strong contrast throughout.
   ============================================================ */

/* SECTION: Design tokens | keywords: colors, palette, spacing, type, variables */
:root {
  /* Logo gradient colours */
  --c-amber: #f5a623;   /* warm yellow-orange (logo left) */
  --c-orange: #e8722a;  /* deep orange */
  --c-green: #2fbf8f;   /* mid green (logo middle) */
  --c-teal: #149a8c;    /* teal-green */
  --c-cyan: #1e9fd8;    /* bright cyan-blue (logo right) */

  /* Gradient (logo order: warm left -> teal right) */
  --grad-logo: linear-gradient(100deg, var(--c-amber) 0%, var(--c-orange) 22%, var(--c-green) 55%, var(--c-teal) 78%, var(--c-cyan) 100%);

  /* Surfaces */
  --bg-page: #faf7f2;        /* warm paper, matches logo's beige background */
  --bg-soft: #f3ede3;        /* slightly deeper warm tint for bands */
  --bg-card: #ffffff;
  --bg-footer: #22303a;      /* deep slate for the footer */

  /* Text (dark on light, strong contrast) */
  --ink: #1c2b33;            /* main text — near-black with a teal hint */
  --ink-soft: #4a5a63;       /* secondary text */
  --ink-faint: #6b7a82;      /* muted labels */
  --ink-on-dark: #f4f1ea;    /* text on dark surfaces */

  /* Brand accents */
  --brand: var(--c-teal);
  --brand-strong: #0f7d72;
  --accent-warm: var(--c-orange);

  /* Lines and shadows */
  --line: #e4ddd0;
  --shadow-card: 0 1px 2px rgba(28, 43, 51, 0.06), 0 8px 24px rgba(28, 43, 51, 0.07);
  --shadow-pop: 0 4px 12px rgba(28, 43, 51, 0.10), 0 16px 40px rgba(28, 43, 51, 0.12);

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Spacing scale */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Type */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.8125rem;   /* 13px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-lg: 1.125rem;    /* 18px */
  --fs-xl: 1.375rem;    /* 22px */
  --fs-2xl: 1.75rem;    /* 28px */
  --fs-3xl: 2.25rem;    /* 36px */
  --fs-hero: clamp(2rem, 5.5vw, 3.25rem);

  --maxw: 1120px;
}

/* SECTION: Reset and base | keywords: reset, body, typography, accessibility */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg-page);
}

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--sp-3); color: var(--ink); font-weight: 700; }
h1 { font-size: var(--fs-hero); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-2xl); letter-spacing: -0.01em; }
h3 { font-size: var(--fs-lg); }
p { margin: 0 0 var(--sp-4); }

a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-cyan);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* SECTION: Layout shell | keywords: container, wrap, width, page */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

/* SECTION: Header and navigation | keywords: header, nav, logo, menu, sign in */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 64px;
  padding-top: var(--sp-2);
  padding-bottom: var(--sp-2);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

.brand-logo {
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  object-fit: cover;
  box-shadow: 0 2px 8px rgba(28, 43, 51, 0.12);
}

.brand-tag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--brand-strong);
  background: #e2f3ef;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.site-nav {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: var(--sp-5);
}
.site-nav a {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: var(--fs-sm);
}
.site-nav a:hover { color: var(--ink); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.site-nav .nav-cta { margin-left: var(--sp-2); }

/* Header right side: the Create button sits top right; on narrow screens it
   moves under the nav instead of wrapping awkwardly. */
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
@media (max-width: 759px) {
  .header-actions {
    flex-basis: 100%;
    justify-content: flex-end;
    margin-left: 0;
  }
}

.nav-toggle {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--bg-card);
  border-radius: var(--r-sm);
  cursor: pointer;
  color: var(--ink);
}
@media (min-width: 760px) {
  .nav-toggle { display: none; }
}

.nav-open .site-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--bg-card);
  border-bottom: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  padding: var(--sp-3) var(--sp-4);
  gap: var(--sp-2);
}
.nav-open .site-nav a { padding: var(--sp-3) var(--sp-2); }

/* The hidden attribute must always win over any display rule, so a closed
   mobile menu never leaks its links into the header. */
[hidden] { display: none !important; }

/* The mobile nav panel lives below the header bar; hidden by default,
   opened only by the hamburger (.nav-open), never shown on desktop. */
.site-nav-mobile { display: none; }
.site-nav-mobile.show {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 0 16px;
}

/* Mobile nav panels: two toggle patterns share one behavior — closed by
   default, open only when the hamburger says so.
   - attribute pattern (index.html, signin/signup, server partial,
     studio): the panel carries the hidden attribute; the toggle removes
     it to open.
   - class pattern (lists.html, dashboard.html): the panel has no hidden
     attribute; the toggle adds .show to open.
   Without this block the inner pages' mobile panel renders on every
   screen size below the desktop nav, and the header looks doubled
   (two Sign in buttons). */
.site-nav-mobile { display: none; }
.site-nav-mobile.show,
.site-nav-mobile:not(.show):not([hidden]) {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 0 16px;
}
@media (min-width: 760px) {
  .site-nav { display: flex; }
  .nav-open .site-nav {
    position: static;
    flex-direction: row;
    box-shadow: none;
    border: none;
    background: none;
    padding: 0;
  }
  /* Mobile panels are for phones only: never show them beside the
     desktop nav, whatever state they are in. */
  .site-nav-mobile { display: none !important; }
}

/* SECTION: Buttons | keywords: button, btn, primary, ghost, link */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: var(--fs-base);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }

/* Button gradient uses the deeper end of the logo palette so white
   label text stays readable across the whole gradient (WCAG AA).
   !important so inherited nav link colors can never darken the label. */
.btn-primary {
  background: linear-gradient(100deg, #c2531a 0%, #0f7f63 50%, #0d6e64 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(15, 125, 114, 0.35);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(20, 154, 140, 0.45); text-decoration: none; }
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; }

.btn-outline {
  background: var(--bg-card);
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline:hover { border-color: var(--brand); color: var(--brand-strong); text-decoration: none; }

.btn-ghost {
  background: transparent;
  color: var(--brand-strong);
  min-height: 44px;
  padding: 0 var(--sp-3);
}
.btn-ghost:hover { background: #eef6f4; text-decoration: none; }

.btn-sm { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-sm); }

.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Nav-card: the Dashboard's engine card — clickable, centered, badge + arrow */
.nav-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav-card:hover, .nav-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
.nav-card:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }
.nav-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.nav-card h3 { margin: 0; font-size: 1.1rem; }
.nav-card p { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.5; }
.nav-card .meta { margin-top: auto; color: var(--ink-faint); font-size: 0.8rem; }
.nav-card .card-arrow { color: var(--brand-strong); flex: none; margin-top: 2px; }
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 3px 10px;
  flex: none;
}
.badge-demo { background: #e2f3ef; color: #0d5c4c; }
.badge-status { background: #fdf1e7; color: #9a4a12; }

/* Dashboard page head: title left, Create button top right */
.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.page-head h1 { margin: 0 0 var(--sp-1) 0; }
.page-head p { margin: 0; color: var(--ink-soft); max-width: 62ch; }
.engines-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 560px) { .page-head h1 { font-size: 1.6rem; } }

/* SECTION: Cards | keywords: card, panel, tile, shadow */
.card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
}

.card:hover { box-shadow: var(--shadow-pop); }

.card-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--r-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef6f4;
  color: var(--brand-strong);
  margin-bottom: var(--sp-3);
}
.card-icon.warm { background: #fdf0e3; color: var(--accent-warm); }
.card-icon.cool { background: #e3f2fa; color: #1478a8; }

/* SECTION: Hero | keywords: hero, banner, headline, call to action */
.hero {
  padding: var(--sp-8) 0 var(--sp-7);
  text-align: center;
  background:
    radial-gradient(60% 90% at 15% 0%, rgba(245, 166, 35, 0.14), transparent 60%),
    radial-gradient(60% 90% at 85% 10%, rgba(30, 159, 216, 0.12), transparent 60%),
    var(--bg-page);
}

.hero .kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-strong);
  background: #e2f3ef;
  border-radius: var(--r-pill);
  padding: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4);
}

.hero p.lede {
  max-width: 620px;
  margin: 0 auto var(--sp-5);
  font-size: var(--fs-lg);
  color: var(--ink-soft);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: center;
}

.hero-mark {
  width: 96px;
  height: 96px;
  margin: 0 auto var(--sp-4);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-pop);
}

/* SECTION: Sections and bands | keywords: section, band, heading, subhead */
.section { padding: var(--sp-7) 0; }
.section-soft { background: var(--bg-soft); }

.section-head { max-width: 640px; margin: 0 auto var(--sp-6); text-align: center; }
.section-head p { color: var(--ink-soft); font-size: var(--fs-lg); }

/* SECTION: Three-step cards (Inputs, Process, Presentation) | keywords: steps, flow, grid */
.steps-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .steps-grid { grid-template-columns: repeat(3, 1fr); }
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--grad-logo);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 800;
  margin-bottom: var(--sp-3);
}

.step-arrow {
  display: none;
}
@media (min-width: 760px) {
  .steps-grid { align-items: stretch; }
}

.card p { color: var(--ink-soft); margin-bottom: 0; }

/* SECTION: Footer | keywords: footer, links, copyright */
.site-footer {
  background: var(--bg-footer);
  color: var(--ink-on-dark);
  padding: var(--sp-6) 0;
  margin-top: var(--sp-7);
}
.site-footer a { color: #bfe6df; }
.site-footer a:hover { color: #ffffff; }

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  align-items: center;
  text-align: center;
  font-size: var(--fs-sm);
  color: #b9c6cc;
}
@media (min-width: 760px) {
  .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

.footer-links { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
@media (min-width: 760px) { .footer-links { justify-content: flex-end; } }

/* SECTION: Utility helpers | keywords: badge, muted, small, divider, centered */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: #eef6f4;
  color: var(--brand-strong);
}
.badge.warm { background: #fdf0e3; color: #b3541e; }

.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack { display: grid; gap: var(--sp-4); }

/* SECTION: Forms | keywords: form, label, input, field, textarea, select */
.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field label { font-weight: 600; font-size: var(--fs-sm); color: var(--ink); }
.field .hint { font-size: var(--fs-sm); color: var(--ink-faint); }

.input, .textarea, .select {
  width: 100%;
  min-height: 48px;
  padding: 10px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg-card);
  font-size: var(--fs-base);
}
.textarea { min-height: 110px; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: 3px solid rgba(30, 159, 216, 0.25);
  border-color: var(--c-cyan);
}

.form-error {
  background: #fdecea;
  border: 1px solid #f5c0b8;
  color: #8f2d1b;
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}
.form-note {
  background: #e8f6f1;
  border: 1px solid #bfe6da;
  color: #0f5f4d;
  border-radius: var(--r-sm);
  padding: var(--sp-3);
  font-size: var(--fs-sm);
  margin-bottom: var(--sp-4);
}