/* The door: sign-up (/start), sign-in, adding a passkey (/enroll), connecting an app (/oauth/authorize), the first run
   (/welcome), Settings (/settings, /billing, /agents) and /approve. Flaghand's identity, B · Pennant (style-and-taste
   references/flaghand.md): the page is the flag. The short door pages stand on the red field in cream; the working
   pages are a cream sheet that floats on the field on a desktop and is the whole screen on a phone. Familjen Grotesk
   only; the token block is flaghand.com's (site/public/index.html) word for word. */
@font-face {
  font-family: "Familjen Grotesk";
  src: url(/door/familjen-grotesk.woff2) format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --field: #c8321e;
  --on: #fff5e9;
  --on-2: #fff5e9;
  --on-hair: rgba(255, 245, 233, .28);
  --on-line: rgba(255, 245, 233, .5);
  --sheet: #fffaf3;
  --well: #f6ebdf;
  --ink: #24110c;
  --ink-2: #5a3f37;
  --muted: #7a6159;
  --hair: rgba(36, 17, 12, .11);
  --act: #c8321e;
  --act-on: #fff5e9;
  --act-text: #c8321e;
  --ok: #2f6b45;
  --bad: #a12a16;
  --scrim: rgba(60, 10, 4, .42);
  --shadow: 0 0 0 .5px rgba(60, 10, 4, .25), 0 2px 4px rgba(60, 10, 4, .10), 0 30px 60px -20px rgba(70, 8, 0, .55), 0 80px 140px -40px rgba(70, 8, 0, .55);
  --font: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ios: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --field: #3d0f09; --on: #ffeedd; --on-2: rgba(255, 238, 221, .88); --on-hair: rgba(255, 238, 221, .20); --on-line: rgba(255, 238, 221, .4);
    --sheet: #21110d; --well: #2c1813; --ink: #f8ebe0; --ink-2: #d9c4b8; --muted: #ab9187; --hair: rgba(248, 235, 224, .12);
    --act-text: #ef7a62; --ok: #8fc79f; --bad: #ff9a85; --scrim: rgba(10, 2, 0, .6);
    --shadow: 0 0 0 .5px rgba(255, 220, 200, .14), 0 30px 60px -20px rgba(0, 0, 0, .6), 0 80px 140px -40px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --field: #3d0f09; --on: #ffeedd; --on-2: rgba(255, 238, 221, .88); --on-hair: rgba(255, 238, 221, .20); --on-line: rgba(255, 238, 221, .4);
  --sheet: #21110d; --well: #2c1813; --ink: #f8ebe0; --ink-2: #d9c4b8; --muted: #ab9187; --hair: rgba(248, 235, 224, .12);
  --act-text: #ef7a62; --ok: #8fc79f; --bad: #ff9a85; --scrim: rgba(10, 2, 0, .6);
  --shadow: 0 0 0 .5px rgba(255, 220, 200, .14), 0 30px 60px -20px rgba(0, 0, 0, .6), 0 80px 140px -40px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

/* Each ground names its own roles, so a piece (a link, a button, the finished lines) reads right on either. On the
   field there is one text colour, cream: hierarchy is size and weight. On the sheet, ink and its greys. */
.fh {
  --fg: var(--on); --fg-2: var(--on-2); --fg-3: var(--on-2); --rule: var(--on-hair); --line: var(--on-line);
  --btn: var(--on); --btn-on: var(--field); --ring: var(--on); --err: var(--on); --err-w: 600; --tick: var(--on);
}
.fh .pane, .fh .page, .fh .sheet {
  --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--muted); --rule: var(--hair); --line: var(--muted);
  --btn: var(--ink); --btn-on: var(--sheet); --ring: var(--ink); --err: var(--bad); --err-w: 400; --tick: var(--ok);
}
.fh .mono { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--field); }
html, body { margin: 0; }
body {
  background: var(--field); color: var(--on); font: 400 16px/1.5 var(--font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
[hidden] { display: none !important; }
.fh a { color: inherit; }
.fh svg { display: block; }
.fh button, .fh input { font: inherit; letter-spacing: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fh :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
/* A step's title takes focus so a screen reader starts there (common.js focusStep). It isn't a control and is out of the
   tab order, so it draws no ring: Safari counts that script focus as focus-visible and boxed every title on the iPhone. */
.fh h1[tabindex="-1"]:focus { outline: none; }

/* ---------- shared pieces ---------- */
.fh .brand { display: inline-flex; align-items: center; gap: 10px; border-radius: 4px; color: var(--fg); text-decoration: none; }
.fh .brand svg { width: auto; height: 25px; fill: currentColor; }
.fh .brand span { font-weight: 700; font-size: 21px; line-height: 1; letter-spacing: -0.02em; }
.fh .nav { height: 80px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 56px; }
.fh .nav nav { display: flex; margin-right: -12px; font-size: 15px; }
.fh .nav nav a { padding: 12px; border-radius: 12px; text-decoration: none; }
.fh .nav nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

.fh h1, .fh h2 { margin: 0; font-weight: 700; color: var(--fg); text-wrap: balance; }
.fh .h-step { font-size: 76px; line-height: .96; letter-spacing: -0.045em; }
.fh .h-step.st { margin-left: -0.058em; }
.fh .h-step.rd { margin-left: -0.02em; }
.fh .lede { margin: 20px 0 0; font-size: 18px; line-height: 1.45; letter-spacing: -0.01em; color: var(--fg-2); text-wrap: pretty; overflow-wrap: anywhere; }
.fh .kicker { margin: 0 0 12px; font-size: 15px; color: var(--fg-3); }

/* The one button of a screen: cream on the field, ink on the sheet. Everything else is a text link. */
.fh .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px;
  border: 0; border-radius: 12px; background: var(--btn); color: var(--btn-on); cursor: pointer;
  font: 600 16px/1 var(--font); letter-spacing: -0.005em; white-space: nowrap; text-decoration: none;
  transition: opacity 150ms ease-out;
}
.fh .btn:hover { opacity: .92; }
.fh .btn.wide { width: 100%; max-width: 440px; }
.fh .btn svg { width: 20px; height: 20px; flex: none; }
.fh .btn:disabled { cursor: default; opacity: .7; }
.fh .link {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--fg); font-size: 15.5px; font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: currentColor;
}
.fh .link.quiet { color: var(--fg-2); }
.fh .link.bare { text-decoration-color: transparent; }
.fh .link.bare:hover, .fh .link.bare:focus-visible { text-decoration-color: currentColor; }
.fh .link:disabled { cursor: default; opacity: .7; }
.fh .out { margin-left: 2px; text-decoration: none; display: inline-block; }
.fh .acts { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
/* The quiet ways out under a step's button. Each link is a 44 px target; the row sits 24 px under the text above it. */
.fh .alt { margin-top: 14px; display: flex; gap: 0 24px; flex-wrap: wrap; }
.fh .alt > .link, .fh .acts > .link { display: inline-flex; align-items: center; min-height: 44px; }

/* A field: outlined in cream on the field (the home page's), a well on the sheet. */
.fh .field {
  display: block; width: 100%; max-width: 440px; height: 52px; margin: 0; padding: 0 16px; border: 1.5px solid var(--on-line); border-radius: 12px;
  background: transparent; color: var(--on); outline: none; font: 400 16px/1 var(--font); letter-spacing: -0.005em;
  transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}
.fh .field::placeholder { color: var(--on-2); opacity: 1; }
.fh .field:focus { border-color: var(--on); box-shadow: 0 0 0 1px var(--on); }
.fh .field:read-only { border-color: var(--on-hair); }
.fh form > * + * { margin-top: 12px; }
.fh form > .btn { margin-top: 20px; }
.fh .col > form { margin-top: 32px; }
.fh .col > .btn.wide { margin-top: 32px; }
.fh .legal { margin: 16px 0 0; max-width: 440px; font-size: 14px; line-height: 1.45; color: var(--fg-3); text-wrap: pretty; }
.fh .legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fh .legal + .legal { margin-top: 8px; }
/* /start: the free start under the lede, a beat louder than it, then the form. */
.fh .free { margin: 12px 0 0; font-size: 16px; line-height: 1.45; font-weight: 600; letter-spacing: -0.005em; color: var(--fg); text-wrap: pretty; }
/* The card step: the plans under the heading, the price and its first charge, the rest of the terms, then Checkout. */
.fh .col > h1 + .plans { margin-top: 32px; }
.fh .col > .plans + .price { margin-top: 24px; color: var(--fg); }
.fh .col > .price + .terms { margin-top: 8px; text-wrap: balance; }
.fh .col > .msg + .then, .fh .col > .acts + .then { margin-top: 20px; }
/* A sign-up the browser can't finish: Open in browser, Copy, and the one hint. */
.fh .recover { margin-top: 32px; }
.fh .recover > .acts { margin-top: 0; }
.fh .recover > .alt:first-child { margin-top: -10px; }
.fh .recover > .legal { margin-top: 6px; }
.fh .acts + .recover { margin-top: 14px; }
.fh .msg { margin: 16px 0 0; max-width: 440px; font-size: 14.5px; line-height: 1.45; font-weight: var(--err-w); color: var(--err); }
.fh .msg:empty { display: none; }

/* The plan choice (and the workspace choice on an app's sign-in): one row each, the whole row the target, a radio at
   its start. On the field the rows are outlined in cream; on the sheet they're tiles in the well. */
.fh .plans { display: grid; gap: 8px; max-width: 440px; margin-top: 12px; }
.fh .plans:focus-visible { outline: none; }
.fh .plan {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; min-height: 64px;
  padding: 10px 20px 10px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1.5px var(--on-line); cursor: pointer;
  transition: box-shadow 150ms ease-out; user-select: none; -webkit-tap-highlight-color: transparent;
}
.fh .plan::before { content: ""; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); transition: box-shadow 150ms ease-out; }
.fh .plan[aria-checked="true"] { box-shadow: inset 0 0 0 2.5px var(--fg); }
.fh .plan[aria-checked="true"]::before { box-shadow: inset 0 0 0 6px var(--fg); }
.fh .plans:focus-visible .plan[aria-checked="true"] { outline: 2px solid var(--ring); outline-offset: 2px; }
.fh .plan b { display: block; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.fh .plan small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.3; color: var(--fg-3); }
.fh .plan .amt { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.fh .plan .amt span { font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.fh .plan .amt em { font-style: normal; font-size: 14px; color: var(--fg-3); }

/* Finished steps: one quiet line each, never numbered. */
.fh .done { list-style: none; margin: 0 0 32px; padding: 0; display: grid; gap: 8px; font-size: 15.5px; color: var(--fg-2); }
.fh .done:empty { display: none; }
.fh .done li { display: flex; align-items: center; gap: 10px; min-height: 24px; }
.fh .done .ck { width: 14px; height: 14px; flex: none; }
.fh .done .ac { color: var(--fg); font-weight: 500; }
.fh .ck { color: var(--tick); }
.fh .status { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 18px; letter-spacing: -0.01em; color: var(--fg-2); text-wrap: pretty; }
.fh .status svg { width: 16px; height: 16px; flex: none; }
.fh .status.bad { color: var(--err); font-weight: var(--err-w); }
.fh .spin { color: var(--fg-3); animation: fh-spin 1s steps(8) infinite; }
@keyframes fh-spin { to { transform: rotate(360deg); } }

/* The agent tabs: a segmented control as wide as the blocks under it, every tab a 44 px target. */
.fh .seg { display: flex; margin-top: 32px; padding: 3px; border-radius: 12px; background: var(--well); }
.fh .seg button {
  flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 8px; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  font-size: 15px; font-weight: 500; color: var(--ink-2); white-space: nowrap; transition: background 150ms ease-out, color 150ms ease-out;
}
.fh .seg button[aria-selected="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .08); }

/* A block to copy: the command (mono) or the prompt. Copy floats at the top right, so only the lines beside it make
   room for it. */
.fh .copy { display: flow-root; margin-top: 12px; padding: 16px 18px; border-radius: 12px; background: var(--well); }
.fh .copy code { display: block; font: 400 13px/21px ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; letter-spacing: 0; color: var(--ink); overflow-wrap: break-word; white-space: pre-wrap; }
/* The token is the person's own part: tinted, kept whole with the punctuation after it, and wrapped only at the box's
   edge (never at its own hyphens). */
.fh .copy code .tw { display: inline-block; max-width: 100%; word-break: break-all; }
.fh .copy code .tok { background: var(--hair); border-radius: 4px; padding: 0 3px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fh .copy code .cm { color: var(--muted); }
.fh .copy code .nw { white-space: nowrap; }
.fh .copy p { margin: 0; font-size: 16px; line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.fh .copy .cbtn {
  float: right; position: relative; margin: -4px -6px 8px 16px; height: 32px; padding: 0 12px; border: 0; border-radius: 12px;
  background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .08);
  font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.fh .copy .cbtn::before { content: ""; position: absolute; inset: -6px; }
.fh .copy .cbtn svg { width: 12px; height: 12px; color: var(--ok); animation: fh-in 150ms ease-out; }
@keyframes fh-in { from { opacity: 0; } }
/* /approve from a notification, with several requests waiting: one row each, the whole row its link, hairlines between. */
.fh .asks { list-style: none; max-width: 520px; margin: 40px 0 0; padding: 0; border-top: 1px solid var(--rule); }
.fh .asks a { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 14px 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
.fh .asks b { display: block; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.fh .asks small { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.fh .asks .go { flex: none; font-size: 15.5px; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.fh .asks a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fh .asks + .acts { margin-top: 32px; }
.fh .then { margin: 24px 0 0; font-size: 16px; color: var(--fg-3); }
/* Claude's and ChatGPT's panel: where the app takes the URL, its menu path in ink, then the URL to copy. */
.fh .where { margin: 24px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.fh .where .ink { color: var(--ink); font-weight: 500; white-space: nowrap; }
/* A one-line block (the connector URL): the line and Copy share one centre. */
.fh .copy.one { display: flex; align-items: center; gap: 16px; }
.fh .copy.one code { flex: 1; min-width: 0; }
.fh .copy.one .cbtn { float: none; order: 1; flex: none; margin: -6px -6px; }
/* An account without a photo: its initials, in the well (in place of the platform's grey disc). */
.fh .ini { display: grid; place-items: center; width: 100%; height: 100%; background: var(--well); color: var(--ink-2); font: 600 16px/1 var(--font); letter-spacing: 0; }
.li-av .ini { font-size: 18px; }

/* Steps change with a short cross-fade of the column. */
.fh .col.enter { animation: fh-in 180ms ease-out; }

/* An X post as X draws it (public/x.js): floating on the field, or inline. */
.fh .proof { border-radius: 14px; overflow: hidden; box-shadow: var(--shadow); background: #000; }
/* On the sheet (the first run below desktop) a proof lies flat, like the approval sheet's. */
.fh .pane .proof { box-shadow: none; }
.fh .proof .x-wrap { width: 100%; min-height: 0; border: 0; }
.fh .proof .xt { width: 100%; margin: 0; }
.fh .inline-proof { margin-top: 24px; }
/* A plan's result: one line per post. */
.fh .plan-done { list-style: none; margin: 24px 0 0; padding: 0; font-size: 16px; color: var(--fg-2); }
.fh .plan-done li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid var(--rule); }
.fh .plan-done li:last-child { border-bottom: 1px solid var(--rule); }
.fh .plan-done b { font-weight: 600; color: var(--fg); }
.fh .plan-done span { margin-left: auto; text-align: right; }

/* ---------- the field: sign-in, sign-up, enrolment, an app's sign-in, and the page behind /approve ---------- */
/* The nav across the page, the column at the left on the page's margin; the right half is the field itself, and holds
   the live post. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100dvh; }
.split .left { display: contents; }
.split .nav { grid-column: 1 / -1; grid-row: 1; position: relative; z-index: 1; }
.split .main { grid-column: 1; grid-row: 2; min-width: 0; display: flex; flex-direction: column; padding: 120px 56px 56px; }
.split .foot { grid-column: 1; grid-row: 3; }
.split .col { width: 100%; max-width: 560px; }
/* An agent's sign-up link names the agent (start.js) in the space above the heading, so the heading, prices and Continue
   sit where every /start puts them; on a phone the line takes its own room. */
.split .col > .kicker { line-height: 20px; overflow-wrap: anywhere; }
.split .col > .kicker:first-child { margin-top: -32px; }
.fh .foot { height: 56px; flex: none; display: flex; align-items: center; gap: 12px; padding: 0 56px; font-size: 14px; color: var(--fg-2); }
.fh .foot a, .bill .legalnav a, .fh .mfoot a, .fh .pfoot a { text-decoration: none; }
.fh .foot a:hover, .bill .legalnav a:hover, .fh .mfoot a:hover, .fh .pfoot a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.split .right { grid-column: 2; grid-row: 1 / -1; position: sticky; top: 0; height: 100vh; height: 100dvh; pointer-events: none; }
.split .art { position: absolute; inset: 0 56px 0 0; }
.split .float { position: absolute; left: 50%; top: 50%; width: min(560px, 100%); transform: translate(-50%, -50%); pointer-events: auto; animation: fh-in 220ms ease-out; }

/* ---------- the first run: the sheet on the field ---------- */
/* On a desktop the field keeps the page's line at the left (and the live post under it), and the steps are on a cream
   sheet at the right, where the approval sheet opens over it. */
.work { display: grid; grid-template-columns: minmax(0, 1fr) 700px; min-height: 100vh; min-height: 100dvh; }
.work .left { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex; flex-direction: column; min-width: 0; }
.work .line { margin: 120px 0 0; padding: 0 56px; font-weight: 700; font-size: 76px; line-height: .96; letter-spacing: -0.045em; text-wrap: balance; }
.work .art { position: relative; flex: 1; min-height: 0; margin: 0 56px; }
.work .float { position: absolute; left: 0; top: 50%; width: min(560px, 100%); transform: translateY(-50%); animation: fh-in 220ms ease-out; }
.fh .pane {
  display: flex; flex-direction: column; min-width: 0; margin: 10px 10px 10px 0; min-height: calc(100vh - 20px); min-height: calc(100dvh - 20px);
  border-radius: 22px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow);
}
.pane .sbar { display: none; }
.pane .col { flex: 1; padding: 48px 52px; }
.fh .pane .h-step { font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.pane .pfoot { display: none; }

/* ---------- the approval sheet (sheet.js), cream, floating on the field ---------- */
.scrim { position: fixed; inset: 0; z-index: 30; background: var(--scrim); animation: fh-in 220ms ease-out; }
/* 702 px: X's own 598 px column between the sheet's 52 px margins, so a post wraps exactly as X shows it. */
.fh .sheet {
  position: fixed; z-index: 31; top: 10px; right: 10px; bottom: 10px; width: min(702px, calc(100vw - 20px)); border-radius: 22px;
  background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden;
  animation: fh-sheet 220ms cubic-bezier(.2, .8, .2, 1);
}
@keyframes fh-sheet { from { transform: translateX(24px); opacity: 0; } }
.fh .sheet:focus { outline: none; }
.fh .sheet .body { flex: 1; min-height: 0; overflow: auto; padding: 48px 52px 36px; border-radius: 22px 22px 0 0; }
/* Its ring is drawn inside it, since the sheet clips anything outside. */
.fh .sheet .body:focus-visible { outline-offset: -2px; }
.fh .sheet .sbar { display: none; }
/* On a sheet tile, so the scrolling work passes under it cleanly. */
.fh .sheet .close { position: absolute; z-index: 1; top: 42px; right: 44px; width: 36px; height: 36px; border: 0; border-radius: 12px; background: var(--sheet); color: var(--ink-2); display: grid; place-items: center; cursor: pointer; }
.fh .sheet .close svg { width: 18px; height: 18px; }
.fh .sheet h1 { font-size: 40px; line-height: 1; letter-spacing: -0.04em; padding-right: 44px; }
.fh .sheet .from { margin-top: 12px; font-size: 15px; color: var(--muted); }
.fh .sheet .note { margin: 18px 0 0; font-size: 17px; line-height: 1.5; color: var(--ink-2); text-wrap: pretty; overflow-wrap: anywhere; }
.fh .sheet .item { margin-top: 34px; border-top: 1px solid var(--hair); padding-top: 22px; }
.fh .sheet .ihead { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.fh .sheet .ihead b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fh .sheet .ihead .when { margin-left: auto; font-size: 15px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fh .sheet .pm { width: 16px; height: 16px; display: grid; place-items: center; color: var(--ink); flex: none; }
.fh .sheet .pm svg { width: 16px; height: 16px; }
.fh .sheet .isub { margin: 0 0 18px 26px; font-size: 14px; color: var(--muted); }
.fh .sheet .isub .ok { color: var(--ok); font-weight: 500; }
.fh .sheet .isub .no { color: var(--bad); font-weight: 500; }
/* A partly live X thread, under its account: the count and what goes on, then each live post as a link to it on X and
   the owner's choice to post the whole thread again at the end of the row. */
.fh .sheet .thread { margin: -10px 0 14px 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.fh .sheet .thread p { margin: 0; }
.fh .sheet .thread b { font-weight: 600; color: var(--ink); }
.fh .sheet .thread .tl { display: flex; flex-wrap: wrap; align-items: center; column-gap: 20px; }
.fh .sheet .thread .tl .link { display: inline-block; padding: 9px 0; line-height: 22px; font-size: 14.5px; text-underline-offset: 4px; }
.fh .sheet .thread .tl .repost { margin-left: auto; }
/* What the approval covers that the post doesn't show (alt text, a reply or quote, tags). */
.fh .sheet .facts { list-style: none; margin: 14px 0 0 26px; padding: 0; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
/* The agent's note on a post, between its line and its preview, in the line's indent. A long one scrolls under its label
   after six lines, so the preview's place never depends on what an agent wrote. */
.fh .sheet .anote { margin: 0 0 18px 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.fh .sheet .anote .alabel { display: block; font-size: 13px; color: var(--muted); }
.fh .sheet .anote p { margin: 2px 0 0; max-height: 8.7em; overflow-y: auto; text-wrap: pretty; }
.fh .sheet .sproof { border-radius: 14px; overflow: hidden; background: #000; }
.fh .sheet .sproof .x-wrap { width: 100%; min-height: 0; border: 0; border-radius: 14px; overflow: hidden; }
.fh .sheet .sproof .xt { width: 100%; }
/* The plug's line, between the post and the plug drawn under it, in X's own grey. */
.fh .sheet .sproof .ctx-label { padding: 6px 16px; font: 12px/16px -apple-system, "system-ui", sans-serif; color: rgb(113, 118, 123); background: #000; }
/* Narrower than X's column (an iPhone, a small window), X's photos and videos keep their whole frame, fitted to the
   column at their own shape as X's app draws them, never cut off at its edge (sheet.js sets each one's --ar). */
.fh .sheet .sproof .x-wrap { container-type: inline-size; }
@container (max-width: 597px) {
  .fh .sheet .sproof .xt-single { max-width: 100%; }
  .fh .sheet .sproof .xt-ph1 { width: 100% !important; height: auto !important; aspect-ratio: var(--ar); }
  /* A carousel keeps one height for its photos, low enough that the widest fits the column (less X's 64 + 16 px and its
     1 px borders); the rest scroll in beside it, as on X. */
  .fh .sheet .sproof .xt-carousel { height: auto !important; }
  .fh .sheet .sproof .xt-ph { width: auto !important; height: min(var(--tall), (100cqw - 82px) / var(--widest)) !important; aspect-ratio: var(--ar); }
}
/* LinkedIn's card is the proof itself, flush left, not a card inside a second box. */
.fh .sheet .sproof.li, .fh .sheet .sproof.tt-box { background: transparent; border-radius: 0; overflow: visible; }
.fh .sheet .sproof.li .li-card { margin: 0; max-width: 100%; box-shadow: 0 0 0 .5px var(--hair); }
.fh .tt b { display: block; font-size: 16px; font-weight: 600; }
.fh .tt p { margin: 2px 0 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.fh .tt-photos { display: flex; gap: 8px; margin-top: 14px; overflow-x: auto; }
.fh .tt-photos img { width: 92px; height: 163px; flex: none; object-fit: cover; border-radius: 12px; background: var(--well); }
.fh .tt-photos img.cover { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
/* Every photo and video the passkey signs is drawn whole. Its box has the file's own shape (the server reads it from the
   file), and any box that doesn't (a stated size from before, X's or LinkedIn's fixed carousel tiles, a link card's
   thumbnail, TikTok's frames) fits the file inside it rather than cutting it off. The card's title isn't clamped. */
.fh .sheet .sproof .xt-phbg { background-size: contain; background-repeat: no-repeat; }
.fh .sheet .sproof :is(.xt-ph1, .xt-ph) video, .fh .sheet .sproof :is(.li-cfig, .li-lpfig) img, .fh .sheet :is(.tt-photos, .tt-slides) img { object-fit: contain; }
.fh .sheet .sproof .li-lptitle { display: block; -webkit-line-clamp: none; }
.fh .sheet .sfoot { flex: none; border-top: 1px solid var(--hair); padding: 20px 52px 26px; display: flex; align-items: center; gap: 28px; }
.fh .sheet .sfoot .sum { flex: 1; font-size: 14px; color: var(--muted); display: grid; gap: 6px; }
.fh .sheet .sfoot .sum:empty { display: none; }
.fh .sheet .sfoot .ways { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; }
.fh .sheet .sfoot .ways:empty { display: none; }
/* Its links are 44 px to a finger without moving their lines. */
.fh .sheet .sfoot .ways > .link, .fh .sheet .sb-x { padding: 11px 0; margin: -11px 0; }
.fh .sheet .sfoot .link { color: var(--ink); }
.fh .sheet .sfoot .msg { margin: 0; font-size: 14px; }
.fh .sheet .msg.wait { color: var(--muted); font-weight: 400; }
.fh .sheet .consent { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.fh .sheet .consent a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
/* The pennant: the one button that sends something out (Post now, Approve, Schedule), a swallowtail cut into its fly.
   It's in the well until there's something to sign, raised red when there is, and fills hoist to fly as the passkey
   completes (sheet.js adds .flown). */
.fh .sheet .sfoot .btn {
  position: relative; flex: none; height: 54px; padding: 0 40px 0 28px; border-radius: 12px 0 0 12px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
  background: var(--act); color: var(--act-on); font-size: 16.5px; transition: background 150ms ease-out, color 150ms ease-out;
}
.fh .sheet .sfoot .btn:disabled { opacity: 1; background: var(--well); color: var(--muted); }
/* Its focus ring sits inside, since the clip would cut an outside ring away: a red gap, then a cream line. */
.fh .sheet .sfoot .btn:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--act), inset 0 0 0 6px var(--act-on); }
.fh .sheet .sfoot .btn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(36, 17, 12, .22); transform: scaleX(0); transform-origin: 0 50%; transition: transform 220ms ease-out; }
.fh .sheet .sfoot .btn.flown::before { transform: scaleX(1); }
.fh .sheet .sfoot .btn > * { position: relative; }

/* Send back (sheet.js): a text link beside the pennant (and under each head in a plan). Open, a one-line note takes its
   place: a well field, Send back in ink (it sends nothing out, so it's never a pennant), Cancel. */
.fh .sheet .sfoot.noting > :not(.sendback), .fh .sheet .sfoot:not(.noting) > .sendback { display: none; }
.fh .sheet .sendback { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.fh .sheet .sb-in {
  flex: 1 1 220px; min-width: 0; height: 54px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--well);
  color: var(--ink); font: 400 16px/1 var(--font); letter-spacing: -0.005em; transition: box-shadow 150ms ease-out;
}
.fh .sheet .sb-in::placeholder { color: var(--muted); opacity: 1; }
.fh .sheet .sb-in:focus-visible { outline: none; box-shadow: 0 0 0 1.5px var(--ink); }
.fh .sheet .sb-go {
  flex: none; height: 54px; margin: 0 0 0 -12px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--ink); color: var(--sheet);
  font: 600 16.5px/1 var(--font); letter-spacing: -0.005em; cursor: pointer; transition: background 150ms ease-out, color 150ms ease-out;
}
.fh .sheet .sb-go:disabled { background: var(--well); color: var(--muted); cursor: default; }
.fh .sheet .sb-x { flex: none; }
.fh .sheet .sb-msg { flex-basis: 100%; margin: 0; font-size: 14px; line-height: 1.45; color: var(--bad); }
.fh .sheet .sb-msg:empty { display: none; }
/* In a plan: each item's own Send back ends its sub line, and its note opens under it. */
.fh .sheet .isub { display: flex; align-items: baseline; gap: 16px; }
.fh .sheet .isub > .sb-open { margin: -12px 0 -12px auto; padding: 12px 0; font-size: 14px; text-underline-offset: 4px; color: var(--ink); }
.fh .sheet .item:has(> .sendback) .isub > .sb-open { visibility: hidden; }
.fh .sheet .item > .sendback { margin: -4px 0 20px 26px; }
/* Sent back and asked for again (since-send-back.js): what changed since, on the well under the item's head, the owner's
   note first. Removed words are struck through and added ones marked in the action's tint; the proof below is the whole post. */
.fh .sheet .since { margin: -4px 0 20px 26px; padding: 14px 16px; border-radius: 12px; background: var(--well); font-size: 15px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.fh .since p { margin: 0; }
.fh .since .since-k { display: block; font-size: 13px; line-height: 1.45; color: var(--muted); }
.fh .since .sent-note { color: var(--ink); }
.fh .since .since-list { display: grid; gap: 10px; list-style: none; margin: 12px 0 0; padding: 12px 0 0; border-top: 1px solid var(--hair); }
.fh .since .since-words { white-space: pre-wrap; text-wrap: pretty; }
.fh .since ins { --mark: color-mix(in srgb, var(--act) 16%, transparent); color: var(--ink); text-decoration: none; background: var(--mark); box-shadow: 0 0 0 2px var(--mark); border-radius: 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.fh .since .since-words del + ins { margin-left: .3em; }
.fh .since .since-swap del, .fh .since .since-swap ins { white-space: nowrap; }
.fh .since del { color: var(--muted); text-decoration: line-through 1.5px; }
.fh .since .since-gap { color: var(--muted); }
.fh .since .since-media { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fh .since .since-th { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; background: var(--sheet); }
.fh .since .since-none { color: var(--ink); }
/* A draft sent back keeps its place: its head, "Sent back", and the note. */
.fh .sheet .item.sent { outline: none; }
.fh .sheet .item.sent .when { color: var(--ink); font-weight: 500; }
.fh .sent-note { display: block; quotes: "\201C" "\201D"; overflow-wrap: anywhere; text-wrap: pretty; }
.fh .sheet .item.sent .sent-note { margin: 2px 0 0 26px; font-size: 15px; line-height: 1.45; color: var(--ink-2); }

/* ---------- a client preview link (preview.js): the sheet's items on the first run's pane, nothing to approve ---------- */
/* The pane is the sheet here, so the sheet's own box steps aside and its items, proofs and facts keep their rules. */
.fh .sheet.view { position: static; inset: auto; width: auto; margin: 0; border-radius: 0; background: none; box-shadow: none; display: block; overflow: visible; animation: none; }
.fh .sheet.view h1 { padding-right: 0; }
.fh .sheet.view .from { font-variant-numeric: tabular-nums; }
.fh .sheet.view .from .fr { display: none; }
.fh .sheet.view .ihead + .sproof { margin-top: 18px; }
.fh .sheet .isub .chg { color: var(--act-text); font-weight: 500; }
.fh .sheet.view .isub { display: grid; gap: 2px; }
.fh .tt .tt-video { margin-top: 14px; }

/* ---------- TikTok's posting screen (tiktok.js) ---------- */
.fh .tt-ac { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fh .tt-ac .av { width: 24px; height: 24px; border-radius: 50%; overflow: hidden; flex: none; background: var(--well); }
.fh .tt-ac .av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fh .tt-ac .av .ini { font: 700 12.5px/24px var(--font); text-align: center; display: block; }
.fh .tt-ac b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Every photo as TikTok gets it, in order, the cover first-ringed; or the video. */
.fh .tt-slides { display: flex; gap: 8px; margin: 0 -52px; padding: 2px 52px 4px; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding: 0 52px; scrollbar-width: none; }
.fh .tt-slides::-webkit-scrollbar { display: none; }
.fh .tt-slides figure { margin: 0; flex: none; scroll-snap-align: start; }
.fh .tt-slides img { display: block; width: 112px; height: 199px; object-fit: cover; border-radius: 12px; background: var(--well); box-shadow: 0 0 0 1px var(--hair); }
.fh .tt-slides .cover img { box-shadow: 0 0 0 2px var(--sheet), 0 0 0 3.5px var(--ink); }
.fh .tt-slides figcaption { margin-top: 8px; font-size: 13px; line-height: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.fh .tt-slides .cover figcaption { color: var(--ink); font-weight: 500; }
.fh .tt-video { display: flex; align-items: flex-end; gap: 20px; }
.fh .tt-video video { display: block; width: 168px; height: 299px; border-radius: 12px; background: #000; object-fit: contain; }
.fh .tt-video p { margin: 0; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }

.fh .tt-rows { margin-top: 28px; }
.fh .tt-row { display: grid; grid-template-columns: 148px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--hair); }
.fh .tt-row:first-child { border-top: 0; padding-top: 0; }
.fh .tt-lab { padding-top: 12px; font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.fh .tt-row.tt-line .tt-lab { padding-top: 1px; }
.fh .tt-val { min-width: 0; display: grid; gap: 10px; justify-items: start; }
.fh .tt-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.fh .tt-note.wait { color: var(--act-text); }

/* The caption, edited in place: the title over the description, in a well. */
.fh .tt-cap { width: 100%; border-radius: 12px; background: var(--well); padding: 12px 16px 13px; display: grid; gap: 2px; }
.fh .tt-cap:focus-within { box-shadow: 0 0 0 1.5px var(--ink); }
.fh .sheet .tt-cap :focus-visible { outline: none; }
.fh .tt-cap input, .fh .tt-cap textarea {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--ink); outline: none; resize: none;
  font: 400 16px/1.45 var(--font); letter-spacing: -0.005em;
}
.fh .tt-cap input { font-weight: 600; height: 24px; }
.fh .tt-cap textarea { color: var(--ink-2); min-height: 23px; overflow: hidden; }
.fh .tt-cap ::placeholder { color: var(--muted); opacity: 1; }
.fh .tt-cap .n { justify-self: end; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Post to: a two-way segmented control. */
.fh .tt-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--well); }
.fh .tt-seg button { height: 42px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-2); font: 500 15px/1 var(--font); cursor: pointer; }
.fh .tt-seg button[aria-checked="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 .5px var(--hair), 0 1px 2px rgba(36, 17, 12, .08); }
.fh .tt-seg button:disabled { cursor: default; }

/* Who can view: TikTok's options, nothing chosen; red-ringed while it waits for you. Settings' time zone is the same menu. */
.fh .tt-sel, .fh .zone-sel {
  -webkit-appearance: none; appearance: none; width: min(100%, 300px); height: 48px; padding: 0 44px 0 16px; border: 0; border-radius: 12px;
  background: var(--well) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%237a6159' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") right 16px center / 12px 12px no-repeat;
  color: var(--ink); font: 400 16px/1 var(--font); letter-spacing: -0.005em; cursor: pointer;
}
.fh .tt-sel.wait { color: var(--muted); box-shadow: inset 0 0 0 1.5px var(--act); }
.fh .tt-sel:disabled, .fh .zone-sel:disabled { cursor: default; color: var(--muted); }
.fh .tt-sel option, .fh .zone-sel option { color: var(--ink); background: var(--sheet); }
.fh .tt-sel option:disabled { color: var(--muted); }

/* Tick boxes (comments, Duet, Stitch, music, the two disclosure kinds) and the disclosure switch. */
.fh .tt-ck { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 24px; cursor: pointer; font-size: 16px; line-height: 24px; color: var(--ink); }
.fh .tt-ck input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.fh .tt-ck .box { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--muted); display: grid; place-items: center; color: var(--sheet); transition: background 150ms ease-out, box-shadow 150ms ease-out; }
.fh .tt-ck .box svg { width: 14px; height: 14px; opacity: 0; }
.fh .tt-ck input:checked + .box { background: var(--ink); box-shadow: none; }
.fh .tt-ck input:checked + .box svg { opacity: 1; }
.fh .tt-ck input:focus-visible + .box, .fh .tt-ck input:focus-visible + .sw { outline: 2px solid var(--ink); outline-offset: 2px; }
.fh .tt-ck small { display: block; font-size: 13.5px; line-height: 1.4; color: var(--muted); }
.fh .tt-ck.off { cursor: default; color: var(--muted); }
.fh .tt-ck.off .box { box-shadow: inset 0 0 0 1.5px var(--hair); background: var(--well); }
.fh .tt-ck .sw { flex: none; position: relative; width: 40px; height: 24px; border-radius: 12px; background: var(--well); box-shadow: inset 0 0 0 1.5px var(--muted); transition: background 150ms ease-out, box-shadow 150ms ease-out; }
.fh .tt-ck .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform 150ms ease-out, background 150ms ease-out; }
.fh .tt-ck input:checked + .sw { background: var(--ink); box-shadow: none; }
.fh .tt-ck input:checked + .sw::after { transform: translateX(16px); background: var(--sheet); }
.fh .tt-boxes { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.fh .tt-kinds { display: grid; gap: 14px; padding-left: 52px; }


/* ---------- Settings: the field holds the brand and the settings; the page is a sheet ---------- */
.fh .bar { height: 64px; display: flex; align-items: center; gap: 24px; padding: 0 32px; }
.fh .bar nav { display: flex; font-size: 15px; }
.fh .bar nav a { padding: 12px; border-radius: 12px; text-decoration: none; }
.fh .bar nav a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.fh .bar .right { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.fh .me { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--on-line); font-size: 13px; font-weight: 600; line-height: 1; letter-spacing: .01em; }
.bill { display: grid; grid-template-columns: 264px minmax(0, 1fr); min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); padding: 0 10px 10px 0; }
.bill .snav { position: relative; z-index: 1; padding: 32px 20px 0; display: flex; flex-direction: column; gap: 4px; }
.bill .snav h2 { margin: 0 0 12px; padding: 0 12px; font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
.bill .snav > a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; font-size: 16px; font-weight: 500; text-decoration: none; }
.bill .snav > a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.bill .snav > a[aria-current="page"] { background: var(--on); color: var(--field); font-weight: 600; text-decoration: none; }
.bill .snav .legalnav { margin-top: auto; height: 56px; padding: 0 12px; display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--on-2); }
.fh .page { min-width: 0; padding: 72px 64px 56px; border-radius: 22px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow); }
.bill .bcol { max-width: 600px; }
.bill .h-bill { font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
.bill .lede { margin-top: 16px; }
.bill .warn { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; font-size: 16px; color: var(--ink); }
.bill .warn .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--act); flex: none; }
.bill .rows { margin-top: 44px; border-top: 1px solid var(--hair); }
.bill .r { display: grid; grid-template-columns: 140px minmax(0, 1fr) auto; align-items: baseline; column-gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 16px; }
.bill .r > span:first-child { color: var(--muted); font-size: 14.5px; }
.bill .r .v { color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.bill .r .link { font-size: 15px; justify-self: end; }
.bill .r .muted { color: var(--muted); }
.bill .r .nw { white-space: nowrap; }
.bill .r .drafts { display: block; margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--muted); font-variant-numeric: tabular-nums; }
.bill .r code { font: 400 14px/1.4 ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; letter-spacing: 0; overflow-wrap: anywhere; }
.bill .inv { display: grid; grid-template-columns: 120px 80px 1fr auto; column-gap: 12px; font-variant-numeric: tabular-nums; }
.bill .inv + .inv { margin-top: 8px; }
.bill .inv span:nth-child(3) { color: var(--muted); }
.bill .cancel { margin-top: 24px; }
.bill .plans { margin-top: 32px; }
.bill .loading { min-height: 240px; }
/* A group of settings (settings.js; agents.js' voice): its heading, then rows of the page's one shape, whichever part
   draws them. Rows that follow rows in a group carry on the same table: one hairline between, never two. A row's second
   line (what a state means, when a login ends) is small and quiet, red only when it waits for you. */
.bill .group { margin-top: 56px; }
.bill .group > .h-sec { margin-bottom: 0; }
.bill .group .rows { margin-top: 0; border-top: 0; }
.bill .group > .h-sec + .rows, .bill .group > .h-sec + * > .rows:first-child { margin-top: 16px; border-top: 1px solid var(--hair); }
.bill .r .v small { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: pretty; }
.bill .r .v small.due { color: var(--act-text); }
.bill .r .more { grid-column: 2 / -1; min-width: 0; }
.bill .r .more small { display: block; margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* A switch at a row's end, on its value's first line as a row's links are, its whole 44 px box the target. */
.bill .r .toggle { justify-self: end; align-self: start; align-items: center; min-width: 44px; min-height: 44px; margin: -10px 0; justify-content: flex-end; }
.bill .r .toggle .sw { pointer-events: none; }
/* Slack and Discord (chat-alerts.js): a row per channel, its destination wrapping only after a slash, then the row that
   adds one: the app, then the URL with Add at the row's end (Add under it in a narrow column), then what arrives. */
.bill .chat .r .v { overflow-wrap: normal; }
.bill .chat .rows:empty { display: none; }
.bill .r.chat-add { grid-template-columns: 140px minmax(0, 1fr); }
.bill .chat-add > * + * { margin-top: 0; }
.bill .chat-add .v { display: grid; justify-items: start; row-gap: 12px; }
.bill .chat-add .tt-seg button { height: 46px; }
.bill .chat-add .in { display: flex; align-items: center; gap: 20px; width: 100%; }
.bill .chat-add .in .field { flex: 1; min-width: 0; height: 52px; }
.bill .chat-add .in .link { margin: 0; }
.bill .r.chat-add .v small { margin-top: -4px; }
.bill .h-sec { margin: 0 0 20px; font-size: 24px; line-height: 1.15; letter-spacing: -0.025em; }
/* The voice note: a group whose one line is under its heading, its text in a well that grows by hand. */
.bill .voice .h-sec { margin-bottom: 8px; }
.bill .voice .sub { margin: 0 0 20px; font-size: 14.5px; line-height: 1.45; color: var(--muted); }
.bill .voice .field { height: auto; min-height: 208px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.bill .voice .acts { margin-top: 20px; }
/* An account's row: the platform, who it posts as (and when its login ends), then Posting times, Reconnect and
   Disconnect, each in its own column so they line up down the table; Connect stands where Disconnect would. LinkedIn's
   notice stays the next thing after the link that starts its login, set as the row's quiet second line. */
.bill .r.acct { grid-template-columns: 140px minmax(0, 1fr) auto auto auto; }
.bill .r.acct .ends, .bill .r.acct .connection-auth { display: contents; }
.bill .acct > span, .bill .acct .ends > *, .bill .acct .connection-auth > button { grid-row: 1; }
.bill .acct .times { grid-column: 3; }
.bill .acct .connection-auth > button { grid-column: 4; }
.bill .acct .disconnect, .bill .acct.none .connection-auth > button { grid-column: 5; }
.bill .connection-notice { max-width: 440px; margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.bill .acct .connection-notice { grid-row: 2; grid-column: 2 / -1; }
/* Under 560 px of column (a tablet beside the settings list) an account's links go on the line under who it posts as, and
   a chat channel's Add under its URL. */
.bill .bcol { container: settings / inline-size; }
@container settings (max-width: 559px) {
  .bill .r.acct { grid-template-columns: 140px minmax(0, 1fr); }
  .bill .r.acct .ends { grid-row: 2; grid-column: 2; display: flex; flex-wrap: wrap; column-gap: 20px; justify-self: stretch; margin-top: 10px; }
  .bill .acct .ends > *, .bill .acct .connection-auth > button { grid-row: auto; grid-column: auto; justify-self: auto; }
  .bill .acct .connection-notice { order: 1; flex-basis: 100%; margin-top: 4px; }
  .bill .chat-add .in { flex-direction: column; align-items: stretch; gap: 4px; }
  .bill .chat-add .in .field { flex: none; }
  .bill .chat-add .in .link { align-self: flex-end; }
}
.bill .connection-notice a { color: var(--ink); }
/* An account's links at its row's end. Its posting times (slots.js): the zone in a row, then the week, one line per time,
   the time in a well and a tick box under each day. The first box's left edge is the zone menu's. Under 560 px of
   column (a phone, a tablet beside the settings list) the boxes go under their time. */
.bill .r .ends { display: flex; align-items: baseline; gap: 20px; justify-self: end; }
.bill .slots { container-type: inline-size; }
.bill .slots .wk, .bill .slots .t { display: grid; grid-template-columns: 149px repeat(7, 44px) minmax(0, 1fr); align-items: center; }
.bill .slots .wk { padding: 16px 0 4px; font-size: 13px; line-height: 1.45; color: var(--muted); text-align: center; }
.bill .slots .wk span:first-child { font-size: 14.5px; text-align: left; }
.bill .slots .t { padding: 8px 0; border-bottom: 1px solid var(--hair); }
.bill .slots .time {
  -webkit-appearance: none; appearance: none; width: 140px; height: 48px; margin: 0; padding: 0 12px 0 16px; border: 0; border-radius: 12px;
  background: var(--well); color: var(--ink); font: 400 16px/1 var(--font); letter-spacing: -0.005em; font-variant-numeric: tabular-nums;
}
.bill .slots .time::-webkit-date-and-time-value { text-align: left; }
.bill .slots .time::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.bill .slots .tt-ck { width: 44px; height: 44px; align-items: center; justify-content: center; }
.bill .slots .tt-ck .box { margin-top: 0; pointer-events: none; }
.bill .slots .t .link { justify-self: end; padding: 10px 0; font-size: 15px; }
.bill .slots .add { margin-top: 6px; padding: 10px 0; }
.bill .next { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); font-variant-numeric: tabular-nums; }
.bill .next:empty { display: none; }
@container (max-width: 559px) {
  .bill .slots .wk, .bill .slots .t { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .bill .slots .wk span:first-child { display: none; }
  .bill .slots .t { row-gap: 8px; padding: 14px 0 10px; }
  .bill .slots .time { grid-column: 1 / 6; width: 100%; }
  .bill .slots .t .link { grid-row: 1; grid-column: 6 / -1; }
  .bill .slots .t .tt-ck { grid-row: 2; justify-self: center; }
}
/* Create token: the name in a well, what it can do as plain choices (the drafting four down the first column, chosen),
   then the token once, its lines under it. */
.bill .mint { margin-top: 32px; }
.bill .flabel { display: block; margin: 0 0 8px; padding: 0; font-size: 14.5px; color: var(--muted); }
.fh .page .field { max-width: none; border-color: transparent; background: var(--well); color: var(--ink); }
.fh .page .field::placeholder { color: var(--muted); }
.fh .page .field:focus { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.bill .opts { min-width: 0; margin: 32px 0 0; padding: 0; border: 0; }
.bill .opts .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; column-gap: 24px; }
.bill .opt { min-height: 44px; align-items: center; }
.bill .opt .box { margin-top: 0; }
.bill .opt .box .ck { color: inherit; }
.bill .mint .acts { margin-top: 32px; }
.bill .copy.once { margin-top: 32px; }
.bill .copy.once code { font-size: 14px; }
/* Account › Notifications: this device's row first (its state, one line on what it means, Turn on when it can), then every
   device that gets them. A finished step's line is quiet. */
.bill .push .r .v { font-variant-numeric: tabular-nums; }
.bill .msg.note { color: var(--muted); font-weight: 400; } /* a finished step's line is quiet; only a problem is red */
/* A row's text links keep their place and get a 44 px target. */
.bill .r .link { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; }
/* A heading that takes focus when its screen opens (focusStep), and the state a step moves focus to, are places to start
   reading from, not controls. */
.bill .bcol > h1[tabindex="-1"]:focus-visible, .bill .push .state[tabindex="-1"]:focus { outline: none; }
.fh .mfoot { display: none; }

/* On the sheet, the plan rows are tiles in the well and the radio is ink. */
.fh .page .plan, .fh .pane .plan { background: var(--well); box-shadow: none; }
.fh .page .plan[aria-checked="true"], .fh .pane .plan[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- a laptop: the sheet and the settings narrow ---------- */
@media (max-width: 1279px) {
  .work .line { font-size: 56px; }
}

/* ---------- under 1100 px: one column on the field ---------- */
@media (max-width: 1099px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .right { display: none; }
  .split .main { padding: 96px 40px 56px; }
  .fh .nav, .fh .foot { padding: 0 40px; }
  .fh .h-step { font-size: 56px; }

  .work { display: flex; flex-direction: column; }
  .work .left { position: static; height: auto; }
  .work .line, .work .art, .work .left .foot { display: none; }
  .fh .pane { flex: 1; margin: 0 10px 10px; min-height: calc(100vh - 90px); min-height: calc(100dvh - 90px); }
  .pane .col { padding: 48px 52px; }
  .pane .pfoot { display: flex; gap: 12px; padding: 0 52px 24px; font-size: 14px; color: var(--muted); }

  .bill { grid-template-columns: 216px minmax(0, 1fr); }
  .fh .page { padding: 56px 40px 40px; }

  /* The field's line is hidden, so a preview link's sheet says what it's for. */
  .fh .sheet.view .from .fr { display: inline; }

  /* With no field column to its left, the approval sheet stands in the middle and rises, like an iPad's form sheet. */
  .fh .sheet { right: auto; left: 50%; margin-left: calc(min(702px, 100vw - 20px) / -2); animation-name: fh-rise; }
}
@keyframes fh-rise { from { transform: translateY(24px); opacity: 0; } }

/* ---------- iPhone: the field for the door, the sheet as the whole screen for work ---------- */
@media (max-width: 640px) {
  .fh .nav { height: 64px; padding: 0 20px; }
  .fh .nav nav { font-size: 14.5px; }
  .fh .brand svg { height: 22px; }
  .fh .brand span { font-size: 19px; }
  .fh .h-step { font-size: 40px; line-height: 1; letter-spacing: -0.04em; }
  .fh .lede { margin-top: 16px; font-size: 16.5px; }
  .fh .btn { height: 54px; }
  .split .main { padding: 44px 20px 32px; }
  .split .col > .kicker:first-child { margin-top: 0; }
  .split .lede .cancel { display: block; }
  .fh .foot { justify-content: flex-start; padding: 0 20px 24px; height: auto; }
  .fh .done { margin-bottom: 24px; }
  .fh .acts { flex-direction: column; align-items: stretch; gap: 20px; text-align: center; }
  .fh .acts .btn { width: 100%; }
  .fh .acts > .link { justify-content: center; margin: -10px 0; } /* a 44 px target that keeps the stack's rhythm */
  .fh .copy { padding: 14px 16px; }
  .fh .copy code { font-size: 12.5px; line-height: 20px; }
  /* Two rows of three: the terminal's tabs, then the apps'. Five or four tabs: the first row's take half each. */
  .fh .seg { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; margin-top: 24px; }
  .fh .seg button { grid-column: span 2; padding: 0 6px; font-size: 14.5px; }
  .fh .seg button:first-child:nth-last-child(5), .fh .seg button:first-child:nth-last-child(5) + button,
  .fh .seg button:first-child:nth-last-child(4), .fh .seg button:first-child:nth-last-child(4) ~ button { grid-column: span 3; }

  /* The work pages are the sheet: the brand bar on top, the page under it. */
  body:has(.work), body:has(.bill), html:has(.work), html:has(.bill) { background: var(--sheet); }
  .work .left { display: none; }
  .fh .pane { margin: 0; min-height: 100vh; min-height: 100dvh; border-radius: 0; box-shadow: none; }
  .pane .sbar, .fh .sheet .sbar { display: flex; align-items: center; height: 60px; flex: none; padding: 0 20px; border-bottom: 1px solid var(--hair); }
  .pane .sbar .brand svg, .fh .sheet .sbar .brand svg, .fh .bar .brand svg { fill: var(--act); }
  .pane .col { padding: 28px 20px 32px; }
  .fh .pane .h-step { font-size: 36px; }
  .pane .pfoot { padding: 0 20px calc(24px + env(safe-area-inset-bottom)); }

  /* The approval sheet is the whole page on iPhone (an approval link opens there). */
  .fh .sheet { inset: 0; width: auto; margin: 0; border-radius: 0; box-shadow: none; animation: fh-in 220ms ease-out; }
  .fh .sheet .close { top: 12px; right: 12px; }
  .fh .sheet .body { padding: 28px 20px; border-radius: 0; }
  .fh .sheet h1 { font-size: 36px; padding-right: 0; }
  .fh .sheet .from { font-size: 14.5px; line-height: 1.4; }
  .fh .sheet .note { font-size: 16.5px; margin-top: 14px; }
  .fh .sheet .item { margin-top: 26px; padding-top: 18px; }
  .fh .sheet .thread .tl .link { padding: 11px 0; }
  .fh .sheet .thread .tl .repost { margin-left: 0; margin-right: auto; }
  .fh .sheet .sfoot { flex-direction: column-reverse; align-items: stretch; gap: 14px; padding: 16px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; }
  .fh .sheet .sfoot .btn { width: 100%; height: 56px; font-size: 17px; }
  .fh .sheet .sfoot .ways { justify-content: center; }
  .fh .sheet .sendback { gap: 8px 12px; }
  .fh .sheet .sb-go { margin-left: 0; padding: 0 20px; height: 56px; font-size: 17px; }
  .fh .sheet .sb-in { height: 56px; flex-basis: 140px; }
  .fh .sheet .sb-x { flex-basis: 100%; margin: -3px 0 -11px; }
  .fh .sheet .item > .sendback { margin-left: 0; }
  .fh .sheet .sfoot .btn svg { width: 22px; height: 22px; }
  .fh .sheet .sfoot.tt { flex-direction: column; }
  .fh .sheet .consent { font-size: 13.5px; text-align: center; }
  .fh .tt-slides { margin: 0 -20px; padding: 2px 20px 4px; scroll-padding: 0 20px; }
  .fh .tt-slides img { width: 104px; height: 185px; }
  .fh .tt-video video { width: 150px; height: 267px; }
  .fh .tt-rows { margin-top: 24px; }
  .fh .tt-row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 16px 0; }
  .fh .tt-lab, .fh .tt-row.tt-line .tt-lab { padding-top: 0; font-size: 14.5px; color: var(--muted); }
  .fh .tt-sel, .fh .zone-sel { width: 100%; height: 52px; font-size: 17px; }
  .fh .tt-seg { display: flex; width: 100%; }
  .fh .tt-seg button { flex: 1; height: 44px; }
  .fh .tt-ck { font-size: 17px; line-height: 26px; }
  .fh .tt-ck .box { margin-top: 2px; }
  .fh .tt-kinds { padding-left: 0; }

  /* Settings: the brand bar, the settings as a row of tabs, then the page, all on the sheet. */
  .fh .bar, .fh .bill {
    --fg: var(--ink); --fg-2: var(--ink-2); --fg-3: var(--muted); --rule: var(--hair); --line: var(--muted);
    --btn: var(--ink); --btn-on: var(--sheet); --ring: var(--ink); --err: var(--bad); --err-w: 400; --tick: var(--ok);
  }
  .fh .bar { height: 60px; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--hair); color: var(--ink); }
  .fh .bar nav { display: none; }
  .fh .me { box-shadow: inset 0 0 0 1.5px var(--hair); color: var(--ink-2); }
  .bill { display: flex; flex-direction: column; min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); padding: 0; background: var(--sheet); color: var(--ink); }
  .bill .snav { flex-direction: row; flex-wrap: wrap; gap: 4px; padding: 12px 12px; border-bottom: 1px solid var(--hair); }
  .bill .snav h2 { display: none; }
  .bill .snav > a { min-width: 0; max-width: 100%; overflow-wrap: anywhere; color: var(--ink-2); }
  .bill .snav > a[aria-current="page"] { background: var(--well); color: var(--ink); }
  .bill .snav .legalnav { display: none; }
  .fh .page { display: flex; flex: 1; flex-direction: column; min-height: 0; padding: 32px 20px 28px; border-radius: 0; box-shadow: none; }
  .bill .h-bill { font-size: 36px; }
  .bill .lede { font-size: 16.5px; }
  .bill .acts { gap: 16px; }
  .bill .acts > .link:only-child { align-self: flex-start; } /* a lone link starts at the rows' edge */
  .bill .rows { margin-top: 32px; }
  .bill .r { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding: 14px 0; }
  .bill .r > span:first-child { grid-column: 1 / -1; font-size: 13px; }
  .bill .inv { grid-template-columns: 1fr auto auto auto; column-gap: 14px; }
  .bill .r .ends { gap: 20px; }
  /* An account on a phone: the platform, who, then its links on one line that wraps, LinkedIn's notice under them. */
  .bill .r.acct { grid-template-columns: minmax(0, 1fr); }
  .bill .acct .v { grid-row: 2; }
  .bill .r.acct .ends { grid-row: 3; grid-column: 1; display: flex; flex-wrap: wrap; column-gap: 20px; justify-self: stretch; margin-top: 10px; }
  .bill .acct .ends > *, .bill .acct .connection-auth > button { grid-row: auto; grid-column: auto; justify-self: auto; }
  .bill .acct .connection-notice { order: 1; flex-basis: 100%; margin-top: 4px; }
  .bill .r .toggle { grid-row: 2; grid-column: 2; }
  .bill .r .more { grid-column: 1 / -1; }
  .bill .slot-zone .v, .bill .r.zone .v { grid-column: 1 / -1; } /* the menu as wide as the rows; Use London time under it */
  .bill .slots .time { height: 52px; font-size: 17px; }
  .bill .opts .grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .bill .copy.once code { font-size: 12.5px; }
  .bill .group { margin-top: 44px; }
  .bill .r.chat-add { grid-template-columns: minmax(0, 1fr); }
  .bill .chat-add .tt-seg button { height: 48px; font-size: 16px; }
  .bill .chat-add .in .field { height: 54px; font-size: 17px; }
  .fh .mfoot { display: flex; gap: 12px; margin-top: auto; padding-top: 44px; font-size: 14px; color: var(--muted); }
}
@media (max-width: 359px) {
  .fh .nav, .split .main, .fh .foot, .pane .col, .fh .sheet .body, .fh .sheet .sfoot { padding-left: 16px; padding-right: 16px; }
}

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