/* ============================================================
   NSOffice Hive style, as this app's design tokens.
   Light mode, DM Sans, NSOffice colours, solid surfaces, no glass.
   Values come from the live Hive (hive-nsoffice.vercel.app) so this
   Bee and the Hive look like one product.

   The token names are the ones the app has always used. Only what
   they resolve to changed, so every screen picks the theme up
   without its markup moving.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,300..600,0,0&display=swap');

:root {
  color-scheme: light;

  /* ---------- Colour: one blue, neutrals, and a faint wash ---------- */
  --blue: #2424FF;            /* the only accent */
  --blue-hover: #0000EF;      /* hover and pressed */
  --blue-press: #0000EF;
  --blue-soft: #EEEEFF;       /* soft fills: selected, chips, notices */
  --lavender: #EEEEFF;        /* icon containers */
  --pink: #FF74BD;            /* only inside the pink to blue gradient */
  --ink: #16161E;             /* headings and strong text */
  --text: #323232;            /* body */
  --slate: #696969;           /* secondary text and labels */
  --muted: #696969;
  --bg: #FFFFFF;              /* cards and controls */
  --bg-alt: #F3F3FA;          /* quiet fills on white */
  --page: #F8F8FD;            /* behind everything */
  --line: rgba(20, 20, 60, 0.09);
  --line-strong: rgba(20, 20, 60, 0.15);
  --art-bg: #121320;
  --gradient: linear-gradient(135deg, #FF74BD, #2424FF);

  /* ---------- Type: DM Sans, heavy headings, tight tracking ---------- */
  --font: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-hero:    800 clamp(32px, 3vw, 44px)/1.06 var(--font);
  --text-title:   800 clamp(26px, 2.4vw, 32px)/1.12 var(--font);
  --text-heading: 700 22px/1.25 var(--font);
  --text-body:    400 16px/1.5 var(--font);
  --text-medium:  500 15px/1.45 var(--font);
  --text-caption: 400 13px/1.4  var(--font);
  --text-light:   400 15.5px/1.55 var(--font);

  /* ---------- Space: 8 point scale ---------- */
  --space-xs: 4px;  --space-sm: 8px;  --space-md: 16px;
  --space-lg: 24px; --space-xl: 48px; --space-2xl: 96px;
  --content-max: 680px;
  --page-max: 1200px;

  /* ---------- Shape and depth: soft, cool, layered shadows ---------- */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-tile: 0 1px 2px rgba(20, 20, 60, 0.06), 0 12px 30px -16px rgba(20, 20, 90, 0.3);
  --shadow-control: 0 1px 2px rgba(20, 20, 60, 0.08), 0 8px 20px -10px rgba(20, 20, 60, 0.3);
  --shadow-menu: 0 0 0 1px var(--line), 0 24px 60px -18px rgba(20, 20, 80, 0.35);
  --shadow-card: var(--shadow-tile);
  --shadow-float: var(--shadow-control);

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
  --t-fast: 0.2s var(--ease-soft);
  --t-med: 0.3s var(--ease);
}

/* ---------- Base ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       text-rendering: optimizeLegibility; -webkit-text-size-adjust: 100%; }
body { font: var(--text-body); font-optical-sizing: auto; color: var(--text);
       background: var(--page); }

/* A soft wash behind everything: lavender, blush, mint and peach. It should
   read as white with a hint of colour. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 50% at 0% 0%, #E7E7FF 0%, rgba(231, 231, 255, 0) 70%),
    radial-gradient(45% 42% at 100% 0%, #FFE3F5 0%, rgba(255, 227, 245, 0) 70%),
    radial-gradient(55% 45% at 100% 100%, #DDF7F1 0%, rgba(221, 247, 241, 0) 70%),
    radial-gradient(50% 42% at 0% 100%, #FFEFE0 0%, rgba(255, 239, 224, 0) 70%),
    var(--page);
}

h1 { font: var(--text-hero); letter-spacing: -0.04em; color: var(--ink); text-wrap: balance; }
h2 { font: var(--text-title); letter-spacing: -0.035em; color: var(--ink); text-wrap: balance; }
h3 { font: var(--text-heading); letter-spacing: -0.02em; color: var(--ink); }
b, strong { color: var(--ink); }
.caption, small { font: var(--text-caption); color: var(--slate); }
a { color: var(--blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--blue-press); }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
button { font-family: var(--font); }

/* ---------- Surfaces: solid white, shadow in place of a border ---------- */
.card {
  background: var(--bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-tile);
  padding: var(--space-lg);
}

/* ---------- The Ask bar ---------- */
.decision-bar {
  display: flex; align-items: center; gap: var(--space-sm);
  width: min(640px, 100%);
  padding: 8px 8px 8px 22px;
  border-radius: var(--radius-pill);
}
.decision-bar input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font: var(--text-body); color: var(--ink);
}
.decision-bar input::placeholder { color: var(--slate); }
.decision-bar .go {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  transition: background-color var(--t-fast), transform 0.2s var(--ease);
}
.decision-bar .go:hover { background: var(--blue-press); }
.decision-bar .go:active { transform: scale(0.97); }

/* ---------- Buttons: 48px pills, one primary per view ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-pill);
  font: 600 15.5px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: background-color var(--t-fast), box-shadow var(--t-fast),
              transform 0.2s var(--ease); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-press); color: #fff; }
.btn-primary:active { transform: scale(0.97); }
.btn-secondary { background: var(--bg); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn-secondary:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(20, 20, 60, 0.3); }
.btn-secondary .material-symbols-rounded { color: var(--blue); }
.btn-ghost { background: transparent; color: var(--blue); padding: 0 10px; }
.btn-ghost:hover { color: var(--blue-press); }
.btn:disabled { opacity: 0.55; cursor: default; }

/* ---------- Icon containers ---------- */
.icon-chip {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 14px;
  background: var(--blue-soft); color: var(--blue);
}
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ---------- Chips ---------- */
.hive-chip {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px;
  border-radius: 999px; background: var(--blue-soft); color: var(--blue);
  font-size: 13px; font-weight: 700; white-space: nowrap;
}

/* ---------- Loading: the shape of what is coming, not a spinner ---------- */
.skeleton {
  border-radius: var(--radius-md); background-size: 300% 100%;
  animation: shimmer 1.4s linear infinite;
  background-image: linear-gradient(100deg, rgba(20, 20, 60, 0.05) 30%,
    rgba(20, 20, 60, 0.09) 50%, rgba(20, 20, 60, 0.05) 70%);
}
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ---------- Motion ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 0.3s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}