/*
 * Styles shared by every page. Rules used by one page only live in pages/<page>.css, scoped to
 * main[data-page='<page id>'].
 *
 * Breakpoints: 1150px (narrow desktop: slimmer sidebar), 850px (phone layout: the sidebar becomes
 * a top bar), 620px (small phone).
 */

/* ==== Fonts ==== */

@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ==== Tokens ==== */

:root {
  /* Surfaces and text */
  --paper: #f7f5ec;
  --white: #fffef9;
  --on-dark: #fff;
  --ink: #1f2b52;
  --muted: #6e788c;
  --hint: #636f8a;
  --line: #e6e3d8;
  --field-border: #ced8ea;
  --tint: #e8effb;
  --speaker: #75819d;
  --subtle: #6a748b;

  /* Blues, from Zeo: its body, shade, and ring track, plus light tints */
  --blue: #2a62e0;
  --blue-dark: #2152c4;
  --blue-shadow: #1b46a8;
  --on-blue: #fffef6;
  --sky: #dfe9fb;
  --sky-strong: #d3e1fb;
  --hover: #d9e5fb;
  --tab-text: #657496;
  --idea: #e8f0fd;
  --idea-text: #2a4fa8;
  --removed: #f0ede3;
  --focus: #2a62e0;

  /* Zeo's light: the wordmark dot and the "Ready" dot */
  --signal: #f2b01e;

  /* Warnings: flagged chats, held-back replies, and deleting */
  --red: #9a4a37;
  --warning-surface: #f8ebdf;
  --warning-border: #efd8c4;
  --warning-ink: #5c4334;
  --warning-text: #8a4b34;

  /* Spacing and sizes */
  --s2: 2px;
  --s4: 4px;
  --s8: 8px;
  --s12: 12px;
  --s16: 16px;
  --s24: 24px;
  --s32: 32px;
  --s40: 40px;
  --s48: 48px;
  --s64: 64px;

  /* Type: font sizes, line heights, and letter spacing for each heading size */
  --text-12: 12px;
  --text-14: 14px;
  --text-16: 16px;
  --text-18: 18px;
  --text-20: 20px;
  --text-24: 24px;
  --text-30: 30px;
  --text-36: 36px;
  --leading-16: 16px;
  --leading-20: 20px;
  --leading-24: 24px;
  --leading-28: 28px;
  --leading-32: 32px;
  --leading-36: 36px;
  --leading-40: 40px;
  --tracking-16: -0.2px;
  --tracking-18: -0.3px;
  --tracking-24: -0.7px;
  --tracking-30: -1px;
  --tracking-36: -1.3px;

  /* Shapes */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-24: 24px;
  --radius-pill: 999px;
  --border: 1px solid var(--line);
  --focus-ring: 3px solid var(--focus);

  /* Motion */
  --curve: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 300ms;

  /* Sizes */
  --icon-size: 22px;
  --icon-size-small: 18px;
  --tap-target: 44px;
  --button-edge: 0 3px 0 var(--blue-shadow);

  /* Layout */
  --sidebar-width: 248px;
}

/* ==== Base elements ==== */

* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font:
    400 var(--text-14) / var(--leading-20) Manrope,
    ui-rounded,
    system-ui,
    sans-serif;
}

h1,
h2,
h3,
p {
  margin: 0;
  text-wrap: pretty;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
h1 {
  font-size: var(--text-36);
  line-height: var(--leading-40);
  font-weight: 600;
  letter-spacing: var(--tracking-36);
}
h2 {
  font-size: var(--text-24);
  line-height: var(--leading-32);
  font-weight: 600;
  letter-spacing: var(--tracking-24);
}
h3 {
  font-size: var(--text-18);
  line-height: var(--leading-28);
  font-weight: 600;
  letter-spacing: var(--tracking-18);
}
p {
  line-height: var(--leading-24);
}
strong {
  font-weight: 600;
}
small {
  display: block;
  font-size: var(--text-12);
  line-height: var(--leading-16);
}
a {
  color: inherit;
  text-decoration: none;
}
svg {
  width: var(--icon-size);
  height: var(--icon-size);
  flex-shrink: 0;
}
::selection {
  background: #ffe3a0;
}
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--s4);
}
[hidden] {
  display: none !important;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}
button,
a {
  touch-action: manipulation;
  transition:
    background-color var(--speed) var(--curve),
    opacity var(--speed) var(--curve),
    transform var(--speed) var(--curve);
}
button {
  border: 0;
  background: none;
  cursor: pointer;
}
button:active {
  transform: translateY(1px);
}
button:disabled {
  cursor: default;
  opacity: 0.5;
}
button:disabled:hover {
  transform: none;
}

label {
  display: block;
  font-size: var(--text-14);
  line-height: var(--leading-20);
  font-weight: 600;
}
input:not([type='checkbox'], [type='range']),
select,
textarea {
  width: 100%;
  margin-top: var(--s8);
  padding: var(--s12) var(--s16);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-8);
  background: var(--white);
  line-height: var(--leading-24);
  outline-offset: var(--s2);
}
textarea {
  min-height: 80px;
  resize: vertical;
  field-sizing: content;
}
input[type='checkbox'] {
  flex-shrink: 0;
  width: var(--s16);
  height: var(--s16);
  margin: 0;
  accent-color: var(--blue);
}
input[type='range'] {
  width: 100%;
  margin: var(--s16) 0 0;
  accent-color: var(--blue);
}
fieldset {
  margin: var(--s24) 0;
  padding: 0;
  border: 0;
}
legend {
  margin-bottom: var(--s12);
  padding: 0;
  font-weight: 600;
}
details summary {
  display: flex;
  justify-content: space-between;
  gap: var(--s16);
  font-weight: 600;
  cursor: pointer;
}

/* ==== Utilities ==== */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip {
  position: fixed;
  top: -80px;
  left: var(--s16);
  z-index: 100;
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-8);
  background: var(--blue);
  color: var(--on-dark);
}
.skip:focus {
  top: var(--s16);
}
.muted {
  color: #7d8baa;
}

/* ==== App layout: sidebar, workspace, and page areas ==== */

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-width);
  padding: var(--s40) var(--s24) var(--s24);
  border-right: var(--border);
  background: #f0ede3;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s12);
  font-size: var(--text-36);
  line-height: var(--leading-40);
  font-weight: 700;
  letter-spacing: -2px;
}
.brand-dot {
  color: var(--signal);
}
.sidebar nav {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
  margin-top: var(--s40);
}
.sidebar nav a {
  display: flex;
  align-items: center;
  gap: var(--s12);
  padding: var(--s12) var(--s16);
  border-radius: var(--radius-12);
  color: #6b768f;
  font-weight: 600;
}
.sidebar nav a[aria-current] {
  background: var(--sky-strong);
  color: var(--blue-dark);
}
.sidebar nav a:hover {
  background: #dbe6f9;
}
.sidebar-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s8);
  margin-top: auto;
  padding-top: var(--s24);
}
.connection {
  display: flex;
  align-items: center;
  gap: var(--s8);
  color: #76819a;
  font-size: var(--text-12);
  line-height: var(--leading-16);
}
.connection:before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #aeb6c7;
}
.connection.ready:before {
  background: var(--signal);
}
.cost-chip {
  padding: var(--s8) var(--s12);
  border: var(--border);
  border-radius: var(--radius-pill);
  color: #737d95;
  font-size: var(--text-12);
  line-height: var(--leading-16);
}

.workspace {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  margin-left: var(--sidebar-width);
}
/* Each page has a pinned top area and one scrolling area; the window itself never scrolls. */
main {
  --page-padding-x: var(--s48);
  --page-padding-top: var(--s40);
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  outline: none;
}
.page-top {
  flex: none;
  padding: var(--page-padding-top) var(--page-padding-x) var(--s16);
  transition: box-shadow var(--speed) var(--curve);
}
main.scrolled .page-top {
  box-shadow: 0 1px 0 var(--line);
}
.page-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--page-padding-top) var(--page-padding-x) var(--s48);
}
.page-top + .page-scroll {
  padding-top: var(--s16);
}
.page-inner {
  max-width: 1304px;
  margin: 0 auto;
}
/* Parent settings pages use a narrower, left-aligned column. */
main[data-page='guide'] .page-inner,
main[data-page='coach'] .page-inner,
main[data-page='settings'] .page-inner,
main[data-page='costs'] .page-inner {
  max-width: 944px;
  margin: 0;
}
.page-inner > .paper-card + .paper-card {
  margin-top: var(--s16);
}

@media (max-width: 1150px) {
  :root {
    --sidebar-width: 216px;
  }
  .sidebar {
    padding: var(--s32) var(--s16) var(--s24);
  }
  main {
    --page-padding-x: var(--s32);
    --page-padding-top: var(--s32);
  }
}
/* The sidebar becomes a top bar with the brand, the cost, and a row of links. */
@media (max-width: 850px) {
  body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
  }
  .sidebar {
    position: static;
    display: grid;
    flex: none;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--s16);
    width: auto;
    padding: var(--s16) var(--s24);
    border: 0;
  }
  .brand {
    font-size: var(--text-30);
    line-height: var(--leading-36);
  }
  .sidebar nav {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: var(--s8);
    margin-top: var(--s16);
    overflow-x: auto;
  }
  .sidebar nav a {
    padding: var(--s8) var(--s12);
    font-size: var(--text-12);
    line-height: var(--leading-20);
    white-space: nowrap;
  }
  .sidebar nav svg {
    width: var(--s16);
    height: var(--s16);
  }
  .sidebar-status {
    grid-row: 1;
    grid-column: 2;
    column-gap: var(--s16);
    margin: 0;
    padding: 0;
  }
  .connection {
    display: none;
  }
  .workspace {
    flex: 1;
    min-height: 0;
    height: auto;
    margin: 0;
  }
  main {
    --page-padding-x: var(--s24);
    --page-padding-top: var(--s24);
  }
  /* The logo row scrolls away, and both rows of tabs stay in reach. The first pixels a page
     scrolls (--scrolled-away, set in core/router.js, at most the height of the logo row) pull the
     top bar up past the top edge. The scroll area grows by as much and gets the pixels back as
     padding, so its content moves with the finger and its scroll length stays the same. */
  .sidebar {
    margin-top: calc(-1 * var(--scrolled-away, 0px));
  }
  .page-scroll {
    padding-top: calc(var(--page-padding-top) + var(--scrolled-away, 0px));
  }
  .page-top + .page-scroll {
    padding-top: calc(var(--s16) + var(--scrolled-away, 0px));
  }
}
@media (max-width: 620px) {
  h1 {
    font-size: var(--text-30);
    line-height: var(--leading-36);
    letter-spacing: var(--tracking-30);
  }
  .sidebar {
    padding: var(--s16);
  }
  .sidebar nav {
    justify-content: flex-start;
  }
  .sidebar nav a {
    padding: var(--s8) var(--s16);
    font-size: var(--text-14);
    line-height: var(--leading-20);
  }
  .sidebar nav svg {
    display: none;
  }
  main {
    --page-padding-x: var(--s16);
    --page-padding-top: var(--s16);
  }
}

/* ==== Buttons ==== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s8);
  min-height: var(--tap-target);
  padding: var(--s8) var(--s12);
  border-radius: var(--radius-12);
  font-size: var(--text-16);
  line-height: var(--leading-24);
  font-weight: 600;
  white-space: nowrap;
}
.button.primary {
  background: var(--blue);
  color: var(--on-blue);
  box-shadow: var(--button-edge);
}
.button.primary:hover:not(:disabled) {
  background: #2152c4;
  transform: translateY(-1px);
}
.button.secondary {
  border: 1px solid #c2d1eb;
  background: transparent;
}
.button.secondary:hover:not(:disabled) {
  background: var(--hover);
}
.button.large {
  padding: var(--s12) var(--s24);
}
.text-button {
  display: inline-flex;
  align-items: center;
  gap: var(--s16);
  width: fit-content;
  padding: 0;
  color: #4e6089;
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
}
.text-button:hover {
  text-decoration: underline;
  text-underline-offset: var(--s4);
}
.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: var(--s32);
  height: var(--s32);
  padding: 0;
  border-radius: var(--radius-8);
  color: #838ea5;
  font-size: var(--text-24);
  line-height: var(--leading-32);
}
.icon-button:hover {
  background: #eee9dc;
  color: #784b3d;
}

@media (max-width: 620px) {
  .button.large {
    min-height: var(--s48);
  }
}

/* ==== Parent settings header: tabs between the parent pages, and the shared Save and Discard ==== */

.page-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s16);
}
.parent-tabs {
  display: flex;
  gap: var(--s8);
  width: fit-content;
  margin: 0;
  padding: var(--s4);
  border-radius: var(--radius-12);
  background: #eeeae0;
}
.parent-tabs a {
  padding: var(--s8) var(--s16);
  border-radius: var(--radius-8);
  color: var(--tab-text);
  font-size: var(--text-14);
  line-height: var(--leading-24);
  font-weight: 600;
  white-space: nowrap;
}
.parent-tabs a[aria-current] {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 4px #18234a12;
}
.save-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--s8);
}
/* With nothing to save, Save reads as a quiet "Saved" label. */
[data-save]:disabled {
  background: none;
  box-shadow: none;
  color: var(--muted);
  opacity: 1;
}

@media (max-width: 620px) {
  /* The tabs fit a 375px phone with slim side padding; a narrower screen scrolls them. */
  .parent-tabs {
    gap: var(--s2);
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .parent-tabs a {
    flex: 1;
    padding: var(--s8) var(--s4);
    font-size: var(--text-12);
    line-height: var(--leading-20);
    text-align: center;
  }
  /* On phones Save and Discard sit in a bar along the bottom while there is something to save,
     and the page makes room for the bar, so it never covers anything. */
  .page-bar .save-actions {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    justify-content: flex-end;
    padding: var(--s12) var(--s16) calc(var(--s12) + env(safe-area-inset-bottom));
    border-top: var(--border);
    background: var(--white);
    box-shadow: 0 -4px 16px #18234a14;
  }
  .page-bar .save-actions[data-state='saved'] {
    display: none;
  }
  main:has(.save-actions:not([data-state='saved'])) {
    padding-bottom: calc(69px + env(safe-area-inset-bottom));
  }
  /* A notice sits above that bar, so "Press Save" never covers Save. */
  body:has(.save-actions:not([data-state='saved'])) #notice {
    bottom: calc(69px + var(--s16) + env(safe-area-inset-bottom));
  }
}

/* ==== Cards and empty states ==== */

.paper-card {
  min-width: 0;
  padding: var(--s24);
  border: var(--border);
  border-radius: var(--radius-16);
  background: var(--white);
}
.empty-state {
  padding: var(--s48) var(--s24);
  border: 1px dashed #c6d3e9;
  border-radius: var(--radius-16);
  background: #f3f0e6;
  text-align: center;
}
.empty-state p {
  max-width: 520px;
  margin: var(--s16) auto var(--s24);
  color: var(--muted);
}

@media (max-width: 620px) {
  .paper-card {
    padding: var(--s24) var(--s16);
  }
}

/* ==== Form rows ==== */

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--s24);
  margin-bottom: var(--s24);
}
.paper-card .field-row:last-child {
  margin-bottom: 0;
}
.field-help {
  margin: var(--s12) 0 var(--s24);
  color: var(--hint);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
.field-row .field-help {
  margin: var(--s8) 0 0;
}

/* Sensitivity slider for a check on the Guidance tab (core/components.js). */
.sensitivity-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s16);
}
.sensitivity output {
  color: var(--blue);
  font-weight: 600;
}
.sensitivity-range {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'low slider high';
  align-items: center;
  gap: var(--s16);
  min-height: var(--tap-target);
  margin-top: var(--s8);
}
.sensitivity-range input {
  grid-area: slider;
  margin: 0;
}
.sensitivity-scale {
  display: contents;
  color: var(--hint);
  font-size: var(--text-12);
  line-height: var(--leading-20);
}
.sensitivity-scale span:first-child {
  grid-area: low;
}
.sensitivity-scale span:last-child {
  grid-area: high;
}

@media (max-width: 620px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* ==== On/off switch (Guidance) ==== */

.switch-label {
  display: inline-flex;
  align-items: center;
  gap: var(--s4);
  margin: 0;
  color: var(--muted);
  font-size: var(--text-12);
  line-height: var(--leading-20);
  font-weight: 600;
  cursor: pointer;
}
.switch-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: var(--s4);
  vertical-align: middle;
  cursor: pointer;
}
/* The real checkbox stays focusable but invisible; the track and knob draw the switch. */
.switch-toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.switch-track {
  display: block;
  width: var(--s40);
  height: var(--s24);
  border-radius: var(--radius-pill);
  background: #c0cce2;
  transition: background-color var(--speed) var(--curve);
}
.switch-track:after {
  content: '';
  position: absolute;
  top: var(--s8);
  left: var(--s8);
  width: var(--s16);
  height: var(--s16);
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px #18234a22;
  transition: transform var(--speed) var(--curve);
}
.switch-toggle input:checked + .switch-track {
  background: var(--blue);
}
.switch-toggle input:checked + .switch-track:after {
  transform: translateX(var(--s16));
}
.switch-toggle input:focus-visible + .switch-track {
  outline: var(--focus-ring);
  outline-offset: var(--s4);
}

/* ==== Conversation transcript messages ==== */

.messages {
  display: flex;
  flex-direction: column;
  gap: var(--s16);
  margin-top: var(--s24);
}
.message {
  align-self: flex-start;
  max-width: 90%;
  padding: var(--s16);
  border-radius: var(--radius-12);
  background: var(--tint);
  overflow-wrap: anywhere;
}
.message.child {
  align-self: flex-end;
  background: #f2e9d4;
}
.message p {
  margin-top: var(--s4);
  font-size: var(--text-14);
  line-height: var(--leading-24);
}

/* ==== Notice toast ==== */

#notice {
  position: fixed;
  right: var(--s24);
  bottom: var(--s24);
  z-index: 100;
  max-width: 480px;
  padding: var(--s16) var(--s24);
  border-radius: var(--radius-16);
  background: var(--blue);
  color: var(--on-dark);
  box-shadow: 0 8px 32px #18234a22;
  font-size: var(--text-14);
  line-height: var(--leading-24);
}
#notice.error {
  background: #865c44;
}

@media (max-width: 620px) {
  #notice {
    right: var(--s16);
    bottom: var(--s16);
    left: var(--s16);
    padding: var(--s16);
  }
}

/* ==== Loading placeholder and the 404 page ==== */

.loading-placeholder {
  height: 500px;
  border-radius: var(--radius-24);
  background: #efebdf;
  opacity: 0.7;
}
.loading-placeholder:after {
  content: '';
  display: block;
  width: 60%;
  height: var(--s24);
  margin: var(--s48);
  border-radius: var(--radius-8);
  background: #e2dfd3;
}
.not-found {
  max-width: 600px;
  margin: 80px auto;
  text-align: center;
}
.not-found h1 {
  margin-top: var(--s24);
}
.not-found p {
  margin: var(--s24) 0;
}

/* ==== Jumping to a control (core/router.js) ==== */

/* The part of a page a data-jump link lands on glows for a moment. */
.jumped-to {
  border-radius: var(--radius-8);
  animation: jumped-to 2s ease-out;
}
@keyframes jumped-to {
  from {
    background-color: #fff0c4;
    box-shadow: 0 0 0 var(--s8) #fff0c4;
  }
}

/* ==== Reduced motion ==== */

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}