/* Harbor design system — the single source of truth for this app's surface.
 * Never hard-code a hex, radius, or type stack in a component; add a token here.
 * Spec and rationale: docs/design-system.md */

:root{
  /* ---- ink: a warm near-black for text, the one filled action and
   *      selected state. Greys are ink at lower opacity so they sit right on
   *      any surface. ---- */
  --color-ink:          #27251e;
  --color-on-ink:       #ffffff;
  /* every grey word: 4.66:1 on the darkest surface it can sit on (a
   *      selected row in the sidebar). 65% fails AA there. */
  --color-mute:         rgba(39,37,30,.67);
  /* icons, chevrons, separators - never text */
  --color-faint:        rgba(39,37,30,.55);

  /* ---- the one hue: harbor navy, for text links only ---- */
  --color-link:         #0b3d66;

  /* ---- surface: a warm off-white page, warm-tinted panels, white for
   *      anything that sits on top (the composer, menus, sheets, paper) ---- */
  --color-canvas:       #fdfbfb;
  --color-raised:       #ffffff;
  --color-surface:      rgba(39,26,0,.035);   /* panels, inputs, hover */
  --color-selected:     rgba(39,26,0,.07);    /* selected row, pressed */
  --color-sidebar:      #f6f3f2;              /* the surface tint, opaque: the phone drawer covers the page */
  --color-hairline:     rgba(39,26,0,.1);     /* 1px dividers, the composer's edge */
  --color-edge-focus:   rgba(39,26,0,.24);    /* the composer's edge while you type */
  --color-scrim:        rgba(39,37,30,.28);
  --shadow-float:       0 12px 32px rgba(39,37,30,.14), 0 1px 3px rgba(39,37,30,.08);

  /* ---- spacing (4px base) ---- */
  --space-xxs:2px; --space-xs:4px;  --space-sm:8px;  --space-md:10px;
  --space-lg:16px; --space-xl:24px; --space-2xl:32px;
  --space-3xl:48px; --space-4xl:64px; --space-5xl:96px;

  /* ---- radius: 8 for inputs and form buttons, 12 for panels and rows,
   *      16 for the Ask composer, pills for 32px controls. ---- */
  --rounded-sm:8px; --rounded-md:12px; --rounded-lg:16px; --rounded-pill:9999px;

  /* ---- faces: the platform's own sans (SF Pro on Apple, Inter elsewhere)
   *      for all UI; the serif only for reading; mono only for verbatim
   *      document text. ---- */
  --font-sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-serif:'Newsreader', 'New York', ui-serif, Georgia, serif;
  --font-mono:ui-monospace, 'SF Mono', SFMono-Regular, monospace;

  /* ---- type scale: four sizes, 12 / 14 / 16 / 24, regular unless a label.
   *      Use these as `font:var(--text-*)`; never a size of your own. ---- */
  --text-caption: 400 12px/16px var(--font-sans);
  --text-small:   400 14px/20px var(--font-sans);
  /* sidebar rows only: light, so the nav recedes behind the page */
  --text-nav:     300 14px/20px var(--font-sans);
  --text-label:   500 14px/20px var(--font-sans);
  --text-body:    400 16px/24px var(--font-sans);
  /* long-form sans text (the terms and privacy pages): 16px with room to read */
  --text-prose:   400 16px/26px var(--font-sans);
  --text-strong:  500 16px/24px var(--font-sans);
  --text-title:   400 24px/32px var(--font-sans);
  /* the public site only (heycapt.co): a hero headline and section titles.
   *      The app stops at --text-title. */
  --text-display:    400 40px/48px var(--font-sans);
  --text-display-sm: 400 32px/40px var(--font-sans);
  /* the wordmark "heycapt" beside the monogram */
  --text-brand:      300 24px/28px var(--font-serif);
  /* reading text: Ask's answers, document summaries, the service record */
  --text-read:    400 17px/26px var(--font-serif);
  --text-quote:   400 12px/18px var(--font-mono);

  /* ---- controls: one height. Drawn 32px; .btn::after takes the tap target
   *      to the 44px floor. ---- */
  --control-h:32px;
  --row-h:40px;     /* a sidebar row, a full-width form button */
  --chip-h:28px;    /* a source chip above an answer */
  --mbar-h:52px;    /* the phone's top bar; the thread bar pins under it */
  --tap-h:44px;

  /* ---- motion: quick and quiet. Never on reduced-motion. ---- */
  --ease-out:cubic-bezier(.2,.8,.2,1);
  --dur-fast:.14s; --dur-base:.22s; --dur-slow:.32s;

  --container-max:1200px;
  /* the sidebar: dragged between these, remembered per browser */
  --side-w:240px; --side-min:200px; --side-max:360px; --side-rail:60px;
}

/* ---- type utilities. Numbers everywhere use tabular figures. ---- */
.t-title   { font:var(--text-title); letter-spacing:-.2px; }
.t-body    { font:var(--text-body); }
.t-small   { font:var(--text-small); }
.t-label   { font:var(--text-label); }
.t-caption { font:var(--text-caption); }
.num       { font-variant-numeric:tabular-nums; }

/* ---- components ---- */

/* The one control. Drawn 32px tall; the ::after keeps the tap target at the
   44px floor without spacing rows apart. */
.btn{
  font:var(--text-label);
  border-radius:var(--rounded-pill);
  min-height:var(--control-h);
  padding:6px 14px;
  border:none; cursor:pointer; background:none;
  color:var(--color-ink);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-xs);
  transition:transform .08s ease, background-color .15s ease;
}
.btn::after{ content:''; position:absolute; left:0; right:0;
             top:calc((var(--control-h) - var(--tap-h)) / 2);
             bottom:calc((var(--control-h) - var(--tap-h)) / 2); }
.btn:active:not(:disabled){ transform:scale(.97); }
/* at most one per screen */
.btn-primary{ background:var(--color-ink); color:var(--color-on-ink); }
.btn-primary:hover:not(:disabled){ opacity:.86; }
/* every secondary action */
.btn-ghost{ background:var(--color-surface); }
.btn-ghost:hover:not(:disabled){ background:var(--color-selected); }
.btn:disabled{ opacity:.4; cursor:default; }
/* a round icon-only control: the composer's submit */
.btn-icon{ width:var(--control-h); padding:0; }
/* a bare icon control (copy, rate): grey until pointed at */
.btn-icon:not(.btn-primary):not(.btn-ghost){ color:var(--color-mute); }
.btn-icon:not(.btn-primary):not(.btn-ghost):hover:not(:disabled){ background:var(--color-surface); color:var(--color-ink); }
.btn-icon.on{ background:var(--color-selected); color:var(--color-ink); }
.btn-icon.on:disabled{ opacity:1; }
/* a bare text control with an icon (back): no fill until pointed at */
.btn:not(.btn-primary):not(.btn-ghost):not(.btn-icon):hover:not(:disabled){ background:var(--color-surface); }
/* a full-width form action: taller, and squarer than a pill */
.btn-block{ width:100%; min-height:var(--row-h); border-radius:var(--rounded-sm); }
.btn:focus-visible{ outline:2px solid var(--color-ink); outline-offset:2px; }

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

/* card: an ink-tinted panel, no border, no shadow */
.card{
  background:var(--color-surface);
  border-radius:var(--rounded-md);
  padding:var(--space-lg);
}

/* status pill: tinted for "act on this", outline for information */
.pill{
  display:inline-block;
  font:var(--text-caption);
  border:1px solid var(--color-hairline);
  border-radius:var(--rounded-pill);
  padding:2px var(--space-sm);
  color:var(--color-mute);
}
/* "act on this": a soft tint with dark text - it stands out without being
   the heaviest mark on the page */
.pill-fill{ background:var(--color-selected); border-color:transparent; color:var(--color-ink); font-weight:500; }

/* table: sentence-case labels over hairline-ruled rows */
.table-header{
  font:var(--text-label);
  color:var(--color-mute);
  border-bottom:1px solid var(--color-hairline);
}
.table-row{ border-bottom:1px solid var(--color-hairline); }

.input{
  background:var(--color-surface); color:var(--color-ink);
  border:1px solid transparent; border-radius:var(--rounded-sm);
  padding:var(--space-sm) 12px; min-height:var(--tap-h);
  font:var(--text-body); width:100%;
}
.input:focus{ outline:none; border-color:var(--color-ink); background:var(--color-raised); }
.input::placeholder{ color:var(--color-mute); }

a{ color:var(--color-link); text-underline-offset:2px; }
a.btn{ text-decoration:none; }