/*
 * Offhand on the web — the same design tokens the app ships, as CSS.
 *
 * app/src/theme.js is the source of truth; every value below is copied from it
 * rather than reinvented, so the browser and the phone are the same product in
 * two windows. The two registers are PAPER and NIGHT (see BRAND.md), and the
 * page follows the system setting for the reason the app does: a light page
 * punched into a dark screen at night is a defect from the reader's side of the
 * glass, whatever the brand intends.
 *
 * The vocabulary is the suite's Field-notes one: every piece of chrome is a
 * stamp — the register's paper with a hairline, radius 12 and a short shadow —
 * carrying an uppercase mono label. One roundness: 12 for stamps, buttons,
 * fields and cards, 16 for wells and sheets, circles for the orbs.
 */

:root {
  color-scheme: light dark;

  --bg: #FBF9F5;
  --surface: #FFFFFF;
  --surface-alt: #F2EEE7;
  --border: #E4DED3;

  --text: #1B1A17;
  --muted: #6B665C;
  --faint: #8E887B;

  --accent: #1F6B4F;
  --accent-pressed: #185540;
  --accent-soft: #E4F0EA;
  --on-accent: #FFFFFF;

  --live: #CE3A2E;
  --danger: #A32A21;
  --danger-soft: rgba(163, 42, 33, .10);

  --stamp: #F5EFE3;
  --stamp-ink: #1B1A17;
  --hairline: rgba(0, 0, 0, .12);
  --shadow: rgba(0, 0, 0, .14);

  /* The ink band is the ink itself in both registers — it is the icon's tile,
     not a surface that follows the page. */
  --band: #1B1A17;
  --band-ink: #F5F1EA;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12110F;
    --surface: #1C1A17;
    --surface-alt: #242119;
    --border: #2E2B26;

    --text: #F5F1EA;
    --muted: #9B948A;
    --faint: #6E675D;

    --accent: #3F9E77;
    --accent-pressed: #348566;
    --accent-soft: #1A2E25;
    --on-accent: #0C1A14;

    --live: #F0564A;
    --danger: #F0564A;
    --danger-soft: rgba(240, 86, 74, .16);

    --stamp: #1B1A17;
    --stamp-ink: #F5F1EA;
    --hairline: rgba(255, 255, 255, .14);
    --shadow: rgba(0, 0, 0, .5);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  /* Body copy is the system face, for the reason the app gives: a custom text
     face would look marginally more expensive at the cost of every line read. */
  font: 16px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

/* ── The wordmark ───────────────────────────────────────────────────────────
   Not drawn: an upright geometric O, a cursive "ffh" through the middle, an
   upright "and" — Poppins for the uprights, Pacifico for the script, in the
   register's ink. Inline runs in one line box, so the script sits on the
   uprights' real baseline instead of a nudged one (the bug the app's
   Wordmark.js documents at length). Sized in em, so one font-size scales the
   whole mark. */
.wm {
  display: inline-block;
  font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  white-space: nowrap;
  color: inherit;
}
.wm .cu {
  font-family: Pacifico, cursive;
  font-weight: 400;
  font-size: 1.15em;
  letter-spacing: 0;
}

/* ── Stamps and mono labels ─────────────────────────────────────────────── */
.mono {
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.stamp {
  background: var(--stamp);
  color: var(--stamp-ink);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  box-shadow: 0 1px 2px var(--shadow);
}

.eyebrow { color: var(--muted); margin: 0 0 8px; }

/* ── The ink band ───────────────────────────────────────────────────────── */
header.band { background: var(--band); color: var(--band-ink); }
header.band .inner {
  max-width: 860px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap;
}
header.band a.lockup {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--band-ink); text-decoration: none;
}
header.band a.lockup img { height: 26px; width: auto; display: block; }
header.band a.lockup .wm { font-size: 22px; }
header.band .spacer { flex: 1 1 auto; }
header.band nav { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
header.band nav a, header.band nav button {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: rgba(245, 241, 234, .78); text-decoration: none;
  font: inherit; font-size: 14px;
}
header.band nav a:hover, header.band nav button:hover { color: var(--band-ink); }
/* Who is signed in. `.small` is the muted page ink, which on the ink band is
   nearly invisible in the paper register — the band has its own ink. */
header.band #who { color: rgba(245, 241, 234, .78); }

/* ── The page ───────────────────────────────────────────────────────────── */
main { max-width: 860px; margin: 0 auto; padding: 28px 20px 72px; }
h1, h2, h3 { line-height: 1.2; }
h1 { font-size: 26px; letter-spacing: -.4px; margin: 0 0 10px; }
h2 { font-size: 21px; letter-spacing: -.3px; margin: 32px 0 12px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p, ul, ol { margin: 0 0 14px; }
li { margin: 5px 0; }
a { color: var(--accent); }

.lede { font-size: 20px; line-height: 1.4; color: var(--muted); max-width: 34em; margin: 0 0 24px; }
.small { font-size: 14px; color: var(--muted); }
.rule { border: 0; border-top: 1px solid var(--border); margin: 32px 0; }

/* ── Controls ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; cursor: pointer;
  border-radius: var(--r-md); border: 1px solid var(--hairline);
  background: var(--stamp); color: var(--stamp-ink);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  font-weight: 600; font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
  box-shadow: 0 1px 2px var(--shadow);
}
/* The one filled stamp on a row. */
.btn.primary { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: var(--accent-pressed); }
.btn.quiet { background: transparent; box-shadow: none; border-color: var(--border); color: var(--muted); }
.btn.danger { background: transparent; box-shadow: none; border-color: var(--border); color: var(--danger); }
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

input[type="text"], input[type="tel"], input[type="email"], input[type="url"], textarea {
  width: 100%; padding: 12px 14px; font: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md);
}
textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--faint); }
label.field { display: block; margin: 0 0 14px; }
label.field > .mono { display: block; color: var(--muted); margin: 0 0 6px; }

.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* A banner, in the voice the brand asks for: what happened and what it needs. */
.banner { padding: 12px 14px; border-radius: var(--r-md); margin: 0 0 16px; font-size: 15px; }
.banner.bad { background: var(--danger-soft); color: var(--danger); }
.banner.good { background: var(--accent-soft); color: var(--accent); }

/* ── Sign in ─────────────────────────────────────────────────────────────
   The suite's sign-in, as SignInScreen.js draws it and BRAND.md describes it:
   the notebook page beside the wordmark in one centred row, the mono tagline
   under it, on the page colour rather than a stamp — no card, no panel, no
   heading. The numbers are that screen's: mark 64 tall, 12 to the wordmark at
   44, 16 down to the tagline, 36 from there to the eyebrow, fields at radius
   12 with a hairline.

   It fills the first screen and centres in it, the way it owns the phone's,
   with what the page says about itself below the rule. */
.signin {
  max-width: 420px;
  margin: 0 auto;
  min-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lockup-hero { display: flex; align-items: center; justify-content: center; gap: 12px; }
.lockup-hero img { height: 64px; width: auto; display: block; }
.lockup-hero .wm { font-size: 44px; }
.tagline { text-align: center; color: var(--muted); margin: 16px 0 36px; }

.signin .eyebrow { margin: 0 0 10px; }

/* The field and the dial button are the same height, and the row owns the
   space below them so neither carries a margin. */
.dial-row { display: flex; gap: 8px; margin: 0 0 12px; }
.dial-row input { flex: 1 1 auto; margin: 0; }
.dial {
  /* 52 holds the longest dial code in the table (+971) — a minimum, not a fixed
     width, so switching Canada for the UAE never shoves the field sideways. */
  min-width: 52px; padding: 0 8px; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font: inherit; font-variant-numeric: tabular-nums;
}
.dial:hover:not(:disabled) { background: var(--surface-alt); }
.dial:disabled { color: var(--faint); cursor: default; }

.warning { color: var(--danger); font-size: 12px; margin: -4px 0 10px; }
.send { width: 100%; margin: 8px 0 0; }
.confirmation { color: var(--muted); font-size: 14px; text-align: center; margin: 0 0 12px; }

/* Six digits, spaced, centred — the one field on the screen that is read a
   character at a time. */
.code-input {
  text-align: center; font-size: 24px; letter-spacing: 8px;
  /* The tracking pushes the run right of centre by one space; pull it back. */
  text-indent: 8px;
  font-variant-numeric: tabular-nums;
}

.links { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 20px 0 0; }
.link {
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  color: var(--muted); font: inherit; text-align: center;
}
.link:hover:not(:disabled) { color: var(--text); }
.link:disabled { opacity: .5; cursor: default; }
.hint { color: var(--muted); font-size: 13px; text-align: center; margin: 16px 0 0; }
#toggle-channel { margin-top: 8px; }

/* ── The country sheet ──────────────────────────────────────────────────── */
#country-sheet {
  width: 100%; max-width: 520px; max-height: 75vh;
  margin: auto auto 0;              /* bottom sheet, as on the phone */
  padding: 0 0 16px;
  background: var(--surface); color: var(--text);
  border: 0; border-top: 1px solid var(--border);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  display: none; flex-direction: column; overflow: hidden;
}
#country-sheet[open] { display: flex; }
#country-sheet::backdrop { background: rgba(0, 0, 0, .35); }
#country-sheet .handle {
  align-self: center; width: 36px; height: 4px; border-radius: 999px;
  background: var(--border); margin: 12px 0;
}
#country-search {
  margin: 0 16px 8px; width: auto; background: var(--surface-alt);
}
.country-list { overflow-y: auto; }
.country {
  display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 48px; padding: 0 16px; cursor: pointer;
  background: none; border: 0; font: inherit; color: var(--text); text-align: left;
}
.country:hover { background: var(--surface-alt); }
.country[aria-selected="true"] .name { font-weight: 600; color: var(--accent); }
.country .flag { font-size: 20px; }
.country .name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.country .dial-code { color: var(--muted); font-size: 15px; font-variant-numeric: tabular-nums; }
.country-list .empty { text-align: center; padding: 24px; }

/* ── The signed-in shell ────────────────────────────────────────────────── */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 22px; }
.tabs .btn[aria-current="page"] { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* Ask */
.thread { display: flex; flex-direction: column; gap: 16px; margin: 0 0 20px; }
.turn { max-width: 46em; }
.turn.you { align-self: flex-end; }
.turn.you .bubble {
  background: var(--stamp); color: var(--stamp-ink); border: 1px solid var(--hairline);
  border-radius: var(--r-md); padding: 11px 14px; box-shadow: 0 1px 2px var(--shadow);
}
/* The answer in its soft pine well — one of the few things that stays
   Offhand's own rather than the suite's. */
.turn.offhand .bubble {
  background: var(--accent-soft); border-radius: var(--r-lg); padding: 14px 16px;
  white-space: pre-wrap; line-height: 1.5;
}
.turn .who { margin: 0 0 5px; color: var(--muted); }
.turn.you .who { text-align: right; }
.cites { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.cite {
  font: inherit; font-size: 13px; padding: 3px 10px; border-radius: 999px;
  background: var(--surface-alt); color: var(--muted);
  border: 1px solid var(--border); cursor: pointer;
}
.composer { display: flex; gap: 10px; align-items: flex-end; }
.composer textarea { min-height: 52px; max-height: 40vh; }

/* Record */
.recorder { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px 0 8px; }
.orb {
  width: 112px; height: 112px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--hairline); background: var(--accent); color: var(--on-accent);
  box-shadow: 0 1px 2px var(--shadow);
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace; font-weight: 600;
  font-size: 11px; letter-spacing: .11em; text-transform: uppercase;
}
/* The record stamp keeps its red ring: the one live thing on the screen. */
.orb.live { background: var(--surface); color: var(--live); border: 3px solid var(--live); }
.orb:disabled { opacity: .5; cursor: default; }
.timer { font-size: 44px; font-weight: 200; font-variant-numeric: tabular-nums; line-height: 1; }
.level { width: 190px; height: 4px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.level i { display: block; height: 100%; width: 0; background: var(--live); transition: width .12s linear; }

/* Notes and to-dos */
.list { display: flex; flex-direction: column; gap: 10px; }
.card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--stamp); color: var(--stamp-ink);
  border: 1px solid var(--hairline); border-radius: var(--r-md);
  box-shadow: 0 1px 2px var(--shadow); padding: 13px 15px; font: inherit;
}
.card.flat { cursor: default; }
.card .kind { color: var(--muted); margin: 0 0 5px; }
.card .title { font-weight: 600; font-size: 16px; margin: 0 0 4px; }
.card .sub { color: var(--muted); font-size: 14px; margin: 0; }
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px; margin-left: 8px;
  background: var(--accent-soft); color: var(--accent); vertical-align: 1px;
  font-family: "IBM Plex Mono", ui-monospace, Consolas, Menlo, monospace;
  font-weight: 600; font-size: 10px; letter-spacing: .11em; text-transform: uppercase;
}
.badge.working { background: var(--surface-alt); color: var(--muted); }
.badge.failed { background: var(--danger-soft); color: var(--danger); }

.todo { display: flex; gap: 12px; align-items: flex-start; }
.todo input { margin: 3px 0 0; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }

.transcript {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 16px; white-space: pre-wrap; line-height: 1.55; max-height: 60vh; overflow: auto;
}

.empty { color: var(--muted); padding: 26px 0; }

/* Plan */
.figure { font-size: 34px; font-weight: 300; font-variant-numeric: tabular-nums; line-height: 1.1; margin: 0 0 4px; }
.figure .of { color: var(--muted); font-size: 22px; }
.plan-actions { margin: 18px 0 8px; }

footer.page {
  max-width: 860px; margin: 0 auto; padding: 18px 20px 52px;
  border-top: 1px solid var(--border); color: var(--muted); font-size: 14px;
}
footer.page a { color: var(--muted); }