/* innernote.ai/write, beside the site's style sheet (scripts/site-write-page.ts). */
.write { max-width: calc(var(--column) + 2 * var(--gutter)); margin: 0 auto; padding: 56px var(--gutter) 64px; }
.write h1 { margin: 6px 0 0; color: var(--ink); font: 500 2.75rem/3.25rem InnerNotePlayfairDisplay, Georgia, serif; }
.write .lead { margin: 16px 0 0; color: var(--ink); font: 1.25rem/1.8rem InnerNoteFigtree, system-ui, sans-serif; }
.write .link-grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; margin-top: 32px; }
.write .code {
  margin: 0; color: var(--ink);
  font: 2.125rem/2.5625rem InnerNoteIBMPlexMono, ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em; white-space: nowrap;
}
.write .qr { width: 172px; height: 172px; padding: 8px; background: #FBF7EF; color: #2A2620; border-radius: 16px; }
.write .qr svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.write .qr:empty { visibility: hidden; }
.write .link-line, .write .line { margin: 16px 0 0; min-height: 1.25rem; color: var(--ink-secondary); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif; }
.write .privacy { margin: 24px 0 0; }
/* The page, on paper, as the app draws it. */
.write .paper-page {
  margin-top: 24px; padding: 24px 32px 32px;
  background: var(--paper); color: var(--paper-ink); border-radius: 24px;
}
.write .head { color: var(--paper-ink-secondary); }
.write textarea {
  display: block; width: 100%; min-height: 20rem; margin: 16px 0 0; padding: 0; border: 0; resize: vertical;
  background: transparent; color: var(--paper-ink); caret-color: #9E452F;
  font: 1.1875rem/1.875rem InnerNoteSpectral, Georgia, serif;
}
.write textarea:focus { outline: none; }
.write textarea::selection { background: rgba(180, 71, 46, 0.22); }
.write .seal-row { display: flex; justify-content: flex-end; align-items: center; gap: 16px; margin-top: 16px; }
.write .seal-row .line { margin: 0; flex: 1; color: var(--paper-ink-secondary); }
/* The one orange thing on the page. */
.write .seal {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; min-width: 88px; padding: 0 32px;
  border: 1px solid transparent; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); cursor: pointer;
  font: 500 1.0625rem/1.375rem InnerNoteFigtreeMedium, system-ui, sans-serif;
}
.write .seal:disabled { opacity: 0.4; cursor: default; }
.write .seal:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* The witness's margin note, as the app sets it on the page: indented, a
   2pt rule in the page's secondary ink, the label, the words. */
.write .witness { margin: 16px 0 0 16px; padding-left: 8px; border-left: 2px solid var(--paper-ink-secondary); }
.write .witness .label { color: var(--paper-ink-secondary); }
.write .witness-body { margin: 8px 0 0; color: var(--paper-ink-secondary); font: 1.0625rem/1.625rem InnerNoteSpectral, Georgia, serif; white-space: pre-wrap; overflow-wrap: break-word; }
.write .witness-action { margin: 8px 0 0; }
.write .witness a, .write .witness .link-button { color: var(--paper-ink); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif; }
/* Under the paper: the quiet actions, the choice, the note, the waiting pages. */
.write .under { margin-top: 8px; }
.write .actions { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; }
.write .actions:empty, .write .actions:not(:has(:not([hidden]))) { display: none; }
.write .link-button { font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif; }
.write .choice, .write .witness-note { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.write .choice h2, .write .witness-note h2 { margin: 0; color: var(--ink); font: 500 1.5rem/1.9rem InnerNotePlayfairDisplay, Georgia, serif; }
.write .witness-note p { margin: 16px 0 0; color: var(--ink); font: 1.0625rem/1.5rem InnerNoteFigtree, system-ui, sans-serif; }
.write .choices { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; }
.write .waiting { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.write .waiting:empty { display: none; }
.write .waiting li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.write .waiting .row-line { margin: 0; color: var(--ink-secondary); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif; }
.write .waiting-count { margin: 0 0 8px; }
.write .waiting-note { margin: 8px 0 0; }
/* The way to the app while a page waits: the badge or the quiet line, the
   store's QR, one email field. */
.write .nudge { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.write .nudge h2 { margin: 0; color: var(--ink); font: 500 1.5rem/1.9rem InnerNotePlayfairDisplay, Georgia, serif; }
.write .nudge .store { margin: 16px 0 0; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.write .store-text { color: var(--ink); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif; }
.write .store-qr { width: 172px; height: 172px; margin: 16px 0 0; padding: 8px; background: #FBF7EF; color: #2A2620; border-radius: 16px; }
.write .store-qr svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.write .store-qr:empty { display: none; }
.write .app-link { margin: 24px 0 0; }
.write .app-link .row { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.write .app-link input {
  flex: 1 1 16rem; min-height: 52px; padding: 0 16px;
  border: 1px solid var(--control-edge); border-radius: 12px;
  background: none; color: var(--ink); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, sans-serif;
}
.write .app-link .status { margin: 8px 0 0; color: var(--ink-secondary); }
.write .app-link .status:empty { display: none; }
.write .link { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--rule); }
.write .link-confirm { margin-top: 24px; }
.write .confirm-code {
  margin: 8px 0 0; color: var(--ink);
  font: 2.125rem/2.5625rem InnerNoteIBMPlexMono, ui-monospace, Menlo, monospace;
  letter-spacing: 0.12em; white-space: nowrap;
}
.write .app-link-check { margin: 8px 0 0; }
.write .phone { display: none; }
.write .phone .store { margin-top: 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
@media (max-width: 720px) {
  .write .desk { display: none; }
  .write .phone { display: block; }
  .write h1 { font: 500 2.125rem/2.6rem InnerNotePlayfairDisplay, Georgia, serif; }
}
@media print { .write { display: none; } }