/*
 * secondbrain.com, one stylesheet.
 *
 * The tokens are the app's own light scheme, copied verbatim from the desktop
 * repo's sb-theme.css (`:root:not([data-theme])`, the Gilded Almanac values)
 * so the website and the app are the same object seen from outside. The
 * component measurements come from the locked canvas boards 27 (landing), 28
 * (sign in) and 29 (account); where a number below looks oddly specific, it is
 * because the board drew it that way.
 *
 * There is one stylesheet and no build step, so keep it readable: tokens,
 * reset, base, layout, then one section per component, then the responsive
 * rules at the bottom in one place.
 *
 * The CSP in site/_headers is `style-src 'self'` with no 'unsafe-inline', so
 * nothing here may ever move into a page as a `<style>` block or a `style=""`
 * attribute. scripts/check-site.mjs refuses both.
 */

/* ------------------------------------------------------------------ fonts */
/* EB Garamond, self hosted, copied from the desktop app's fonts/ (OFL). Same
   two faces, same unicode-range, so the site loads exactly what the app does. */
@font-face {
  font-family: "EB Garamond";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/EBGaramond-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/EBGaramond-Italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  /* the app's light scheme, verbatim from sb-theme.css */
  --bone: #E7E0CE;      /* page ground */
  --zone-w: #F3EEE0;    /* the quieter band: nav strips, inset panels */
  --paper: #FCF9F1;     /* warm ivory card surface */
  --chip-w: #EBE1CB;    /* warm chip fill */
  --ochre: #A8720F;     /* accent: burnt gold */
  --ink: #201A11;       /* primary ink */
  --t2w: #665C46;       /* secondary text */
  --t3w: #857A5F;       /* muted text */
  --gold-hi: #C9932E;
  --gold-mid: #A8720F;
  --gold-lo: #855A0C;
  --gold-deep: #6A4708;

  /* the boards' own additions on top of that scheme */
  --sheet: #F8F5EC;
  --gold-dk: #8F5708;   /* the eyebrow gold, darkened for small caps on bone */
  --red: #B5482F;
  --moss: #5E7345;
  --bd: rgba(28, 26, 23, 0.09);
  --bd-em: rgba(28, 26, 23, 0.16);
  --sh: 0 1px 2px rgba(28, 26, 23, 0.06), 0 2px 6px rgba(28, 26, 23, 0.07);
  --sh-lift: 0 4px 8px rgba(28, 26, 23, 0.08), 0 12px 28px rgba(28, 26, 23, 0.11);

  /* layout */
  --wrap: 1120px;       /* the boards' content column */
  --gutter: 24px;
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ reset */
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box; }

img, svg { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }

/* ------------------------------------------------------------------- base */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bone);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.5;
  font-feature-settings: "lnum" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

.u {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: var(--t2w);
}
a.u:hover { color: var(--ochre); }

:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Reachable by keyboard, invisible until it is used. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  z-index: 20;
}
.skip:focus { left: 0; }

/* ----------------------------------------------------------------- layout */
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* -------------------------------------------------------------------- nav */
.nav {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding-top: 14px;
  padding-bottom: 14px;
}

.wordmark {
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.nav .wordmark { font-size: 26px; }

.navlinks {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 16px;
  color: var(--t2w);
  flex-wrap: wrap;
}
.navlinks a:hover { color: var(--ochre); }

/* ------------------------------------------------------------------ pills */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  background: none;
  cursor: default;
}
a.pill, button.pill { cursor: pointer; }
.pill.ink { background: var(--ink); color: var(--bone); }
.pill.ghost { border: 1.5px solid var(--bd-em); color: var(--ink); }
.pill.sm { height: 38px; padding: 0 18px; font-size: 15px; }
.pill.md { height: 36px; padding: 0 16px; font-size: 14.5px; }
a.pill.ink:hover, button.pill.ink:hover { background: var(--gold-deep); }
a.pill.ghost:hover, button.pill.ghost:hover { border-color: var(--ochre); color: var(--ochre); }

/* -------------------------------------------------------- marks and rules */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dk);
}

/* The house double rule: a heavy ochre line over a thin one. */
.gilt {
  height: 6px;
  border-top: 2px solid var(--ochre);
  border-bottom: 1px solid var(--gold-lo);
}
.gilt.short { width: 120px; margin-top: 20px; }

.fine {
  font-size: 14px;
  color: var(--t3w);
  line-height: 1.45;
}
.fine .u { color: var(--t2w); }

/* ------------------------------------------------------- landing: the hero */
.hero {
  display: flex;
  align-items: center;
  gap: 60px;
  margin-top: 22px;
}
.hero .copy { flex: 1; min-width: 0; }

.h1 {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.12;
  margin-top: 12px;
}

.lede {
  font-size: 18px;
  color: var(--t2w);
  line-height: 1.5;
  margin-top: 18px;
  max-width: 560px;
}

.ctas {
  display: flex;
  gap: 12px;
  margin-top: 24px;
  align-items: center;
  flex-wrap: wrap;
}

.hero .fine { margin-top: 16px; }

/* --------------------------------------------------- landing: the phone mock
   A drawing of the app, not a screenshot, so it stays true when the app moves.
   Decorative: the markup marks it aria-hidden and it leaves under 768px. */
.phone {
  width: 270px;
  height: 500px;
  border-radius: 40px;
  background: var(--ink);
  padding: 9px;
  flex: none;
  box-shadow: var(--sh-lift);
}
.phone .glass {
  width: 100%;
  height: 100%;
  border-radius: 33px;
  background: var(--bone);
  overflow: hidden;
  padding: 38px 16px 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.phone .dt { font-size: 20px; font-weight: 600; font-style: italic; line-height: 1.1; }
.phone .gr { font-size: 12.5px; font-style: italic; color: var(--t2w); }
.phone .rule {
  height: 4px;
  border-top: 1.5px solid var(--ochre);
  border-bottom: 1px solid var(--gold-lo);
  margin: 6px 0 4px;
}
.phone .cap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--bd-em);
  padding: 6px 0 8px;
  font-size: 13px;
  font-style: italic;
  color: var(--t3w);
}
.phone .plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--ochre);
  color: var(--ochre);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex: none;
}
.phone .eyebrow { font-size: 9px; margin-top: 6px; }
.phone .grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 4px;
}
.phone .tile { height: 58px; align-items: center; justify-content: center; gap: 3px; padding: 0; border-radius: 8px; }
.phone .tile .tw { font-style: italic; font-size: 15px; line-height: 1; }
.phone .tile .ts { font-size: 7.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--t3w); margin-top: 0; }
.phone .tile::after { width: 18px; height: 2px; }

/* ------------------------------------------------------ landing: the tiles */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}

.tile {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: var(--sh);
  padding: 14px 18px 16px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.tile .tw { font-style: italic; font-weight: 400; font-size: 24px; line-height: 1; }
.tile .ts {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t3w);
  margin-top: 5px;
}
.tile p { font-size: 14.5px; color: var(--t2w); line-height: 1.4; margin-top: 8px; }
/* the gold tick under each tile, centred on its lower edge */
.tile::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 3px;
  background: var(--ochre);
}

/* ------------------------------------------------------ landing: the strip */
.strip {
  margin-top: 18px;
  background: var(--zone-w);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
}
.strip .lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-dk);
  white-space: nowrap;
}
.strip .it { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--t2w); }
.strip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ochre); flex: none; }

/* ------------------------------------------------------------------- foot */
.foot {
  margin-top: auto;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--t3w);
  border-top: 1px solid var(--bd);
  padding-top: 14px;
  padding-bottom: 14px;
}
.foot .links { display: flex; gap: 22px; flex-wrap: wrap; }

/* --------------------------------------------------- sign in: the sheet card
   Board 28: one card, centred, everything inside it. */
.center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--gutter) 60px;
}
.sheet {
  width: 100%;
  max-width: 460px;
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 16px;
  box-shadow: var(--sh-lift);
  padding: 38px 40px 34px;
}
.sheet .wm { font-size: 40px; font-weight: 600; font-style: italic; line-height: 1.05; letter-spacing: -0.01em; }
.sheet .gilt { width: 110px; margin-top: 12px; }
.tag { font-size: 17px; font-style: italic; color: var(--t2w); line-height: 1.45; }

/* The card's vertical rhythm. Boards 25 and 28 draw these gaps as inline
   margins; the CSP forbids a style attribute, so they live here instead. */
.sheet .tag { margin-top: 16px; }
.sheet .applebtn { margin-top: 30px; }
.sheet .orline { margin-top: 20px; }
.sheet .field { margin-top: 16px; }
.sheet .turn { margin-top: 16px; }
.sheet .ghostbtn { margin-top: 14px; }
.sheet .codes { margin-top: 28px; }
.sheet .errline { margin-top: 14px; }
.sheet .fine { margin-top: 24px; }
.sheet .fine + .fine { margin-top: 6px; }
.sheet .pill { margin-top: 24px; }

.applebtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bone);
  font-size: 17px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}
.ghostbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 999px;
  border: 1.5px solid var(--bd-em);
  background: none;
  color: var(--ink);
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}
.ghostbtn:hover { border-color: var(--ochre); }
.ghostbtn[disabled] { color: var(--t3w); cursor: default; }

.orline {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--t3w);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.orline::before, .orline::after { content: ""; flex: 1; height: 1px; background: var(--bd-em); }

.field {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1.5px solid var(--bd-em);
  padding: 8px 2px 10px;
}
.field input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-size: 17px;
  outline: none;
}
.field input::placeholder { font-style: italic; color: var(--t3w); }
.field:focus-within { border-bottom-color: var(--ochre); }

/* the human check sits in its own quiet panel so the card keeps its rhythm */
.turn {
  display: flex;
  align-items: center;
  min-height: 56px;
  border: 1px solid var(--bd-em);
  border-radius: 8px;
  background: var(--zone-w);
  padding: 0 14px;
  font-size: 14px;
  color: var(--t2w);
}

/* the six digit boxes, board 25 */
.codes { display: flex; gap: 8px; }
.codebox {
  flex: 1;
  min-width: 0;
  height: 56px;
  border-radius: 12px;
  border: 1.5px solid var(--bd-em);
  background: var(--paper);
  text-align: center;
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 600;
  font-feature-settings: "lnum" 1, "tnum" 1;
  outline: none;
}
.codebox:focus, .codebox.on { border-color: var(--ochre); }

.errline { color: var(--red); font-size: 15px; line-height: 1.4; }

/* ------------------------------------------------------ account: the shape
   Board 29: a rail of anchors on the left, a stack of cards on the right. */
.who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--chip-w);
  color: var(--ink);
  font-size: 15px;
}

.body {
  display: flex;
  gap: 40px;
  margin-top: 22px;
  align-items: flex-start;
}
.rail { width: 200px; flex: none; padding-top: 6px; position: sticky; top: 22px; }
.rail .h { font-size: 28px; font-weight: 600; line-height: 1.1; margin-bottom: 18px; }
.rail .lnk {
  display: flex;
  align-items: center;
  height: 38px;
  padding-left: 14px;
  font-size: 16px;
  color: var(--t2w);
  border-left: 2px solid transparent;
}
.rail .lnk:hover { color: var(--ink); }
.rail .lnk.on { color: var(--ink); border-left-color: var(--ochre); font-weight: 600; }
.rail .lnk.danger { color: var(--red); }

.stack { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 16px; }

.card {
  background: var(--paper);
  border: 1px solid var(--bd);
  border-radius: 12px;
  box-shadow: var(--sh);
  padding: 16px 20px;
}
.card.warn { border-color: rgba(181, 72, 47, 0.35); }
.card.warn .eyebrow { color: var(--red); }

.row {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 16px;
  border-bottom: 1px solid var(--bd);
  padding: 4px 0;
  flex-wrap: wrap;
}
.card .row:last-child { border-bottom: none; }
.dm { font-size: 13px; color: var(--t3w); }
.mut { color: var(--t3w); font-size: 14px; }
.act { font-size: 14px; font-weight: 600; color: var(--t2w); background: none; border: none; cursor: pointer; }
.act:hover { color: var(--ochre); }
.note { font-size: 13.5px; color: var(--t3w); line-height: 1.45; margin-top: 6px; }
.danger { color: var(--red); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* the one time agent token: shown once, so it is easy to select and copy */
.tokenbox {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  background: var(--zone-w);
  border: 1px solid var(--bd-em);
  border-radius: 8px;
  padding: 12px 14px;
}
.tokenbox code {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.4;
  word-break: break-all;
  user-select: all;
}

/* ------------------------------------------------------------------ toast */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  background: var(--ink);
  color: var(--bone);
  font-size: 15px;
  padding: 11px 20px;
  border-radius: 999px;
  box-shadow: var(--sh-lift);
  z-index: 30;
}
.toast.warn { background: var(--red); }

/* ------------------------------------------------------------- responsive
   Four widths matter: 390 (the phone the app is built for), 768, 1024, 1440.
   One column under 900; the decorative phone mock leaves under 768. */

@media (max-width: 1024px) {
  .hero { gap: 36px; }
  .strip { gap: 22px; }
  .body { gap: 28px; }
  .rail { width: 170px; }
}

@media (max-width: 900px) {
  .h1 { font-size: 38px; }
  .hero { flex-direction: column; align-items: flex-start; gap: 32px; }
  .hero .copy { width: 100%; }
  .tiles { grid-template-columns: 1fr; gap: 14px; }
  .two { grid-template-columns: 1fr; }
  .body { flex-direction: column; }
  .rail { width: 100%; position: static; }
  .rail .lnk { height: 34px; }
  .stack { width: 100%; }
}

@media (max-width: 768px) {
  .phone { display: none; }
  .strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .sheet { padding: 30px 24px 28px; }
  .sheet .wm { font-size: 34px; }
}

@media (max-width: 560px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .nav { flex-direction: column; align-items: flex-start; gap: 14px; }
  .navlinks { gap: 16px; width: 100%; }
  .h1 { font-size: 31px; }
  .lede { font-size: 17px; }
  .ctas .pill { flex: 1 1 100%; }
  .foot { flex-direction: column; align-items: flex-start; gap: 10px; }
  .codebox { height: 48px; font-size: 22px; }
}