/* pages: page styles on top of the design-system primitives in /styles.css.
   Tokens only (var(--...)); no hex, no rgba, no new hues. */

/* ── Documents ───────────────────────────────────────────────────── */
.docs-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.docs-tabs { margin: 0 0 20px; }
.docs-list .feed-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
.docs-list .row-title { display: block; }
/* Format tile (Core v11 file rows): the format's tone on the icon only. */
.docs-ic {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center;
  background: var(--soft); color: var(--ink-2);
}
.docs-ic .docs-ic--pdf { color: var(--alert); }
.docs-ic .docs-ic--sheet { color: var(--good); }
.docs-open { display: grid; place-items: center; color: var(--ink-3); transition: color 160ms var(--ease-out); }
.feed-row:hover .docs-open { color: var(--ink); }
.docs-snippet {
  display: block; margin-top: 4px; max-width: 72ch;
  font-size: var(--fs-meta); color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Preview drawer */
.docs-view { display: flex; flex-direction: column; gap: 16px; min-height: 100%; }
.docs-view-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding-bottom: 14px; border-bottom: 1px solid var(--line-2);
}
.docs-view-meta { font-size: var(--fs-meta); color: var(--ink-3); }
/* A note's HTML is authored for paper: it renders on a light page in both themes. */
.docs-frame {
  flex: 1; width: 100%; min-height: 60vh;
  border: 1px solid var(--line); border-radius: var(--r-md);
  color-scheme: light; background: Canvas;
}
.docs-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--fs-body); line-height: 1.6; color: var(--ink); }
.docs-meta summary { cursor: pointer; font-size: var(--fs-meta); color: var(--ink-3); }
.docs-meta pre { margin-top: 8px; }

/* ── Help ────────────────────────────────────────────────────────── */
.help { display: flex; flex-direction: column; max-width: 72ch; }
.help-sec { padding: 28px 0; border-top: 1px solid var(--line-2); }
.help-sec:first-child { padding-top: 0; border-top: 0; }
.help-sec h2 { font-size: var(--fs-section); margin: 0 0 10px; }
.help-sec p, .help-sec li { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-2); }
.help-sec p { margin: 0 0 10px; }
.help-sec ul { margin: 0 0 10px; padding-left: 20px; }
.help-sec ul ul { margin: 6px 0 0; }
.help-sec li + li { margin-top: 6px; }
.help-sec strong, .help-sec em { color: var(--ink); }
.help-sec strong { font-weight: 600; }
.help-sec .btn { margin-top: 6px; }
.help-sec > :last-child { margin-bottom: 0; }

/* ── Sign-in family (auth screens, client setup, public reply page) ── */
.signin-card--wide { max-width: 560px; }
.signin-note { font-size: var(--fs-meta); color: var(--ink-3); margin: 0 0 16px; }
.signin-live { min-height: 20px; margin: 10px 0 16px; }
.signin-error { margin: 10px 0 0; }
.signin-error:empty { margin: 0; } /* stays in the DOM so role=alert still announces */
.signin-card h1 + .field { margin-top: 20px; }
.signin-card .banner { margin-top: 8px; }
.signin-actions { display: flex; flex-direction: column; gap: 8px; }
.signin-lang { display: flex; justify-content: center; margin-top: 20px; }
/* One-time codes: Plex Mono, wide tracking. */
.code-input { height: 48px; font-family: var(--font-mono); font-size: 20px; letter-spacing: .4em; text-align: center; }
.code-input--secret { height: 40px; font-size: var(--fs-meta); letter-spacing: .08em; text-align: left; }
/* The QR keeps a light page so every phone camera can read it. */
.mfa-qr {
  width: fit-content; margin: 0 auto 20px; padding: 10px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  color-scheme: light; background: Canvas;
}
.mfa-qr img { display: block; width: 180px; height: 180px; }
/* The native file picker button, dressed as a secondary button. */
.signin-card input[type="file"] { color: var(--ink-2); font-size: var(--fs-ui); }
.signin-card input[type="file"]::file-selector-button {
  height: 30px; margin-right: 10px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-xs);
  background: var(--soft); color: var(--ink); font: inherit; font-weight: 500; cursor: pointer;
}
.reply-ask { margin: 0 0 16px; padding: 16px 18px; border-radius: var(--r-md); background: var(--soft); }
.reply-ask h2 { font-size: var(--fs-meta); font-weight: 500; color: var(--ink-3); margin: 0 0 4px; }
.reply-ask p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 14px; }
.reply-ask p:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .docs-view-meta { flex-basis: 100%; }
  .docs-view-bar .spacer { display: none; }
  .signin-wrap { padding: 16px; }
  .signin-card { padding: 28px 20px 24px; }
}