/* pastebin-ui · design tokens
 * ──────────────────────────────────────────────────────────────────────
 * The single source of truth for the Pastebin / Slate design system.
 *
 * Every component (Astro, web-component, or hand-written HTML) reads
 * colours, type, spacing and shape from these tokens via var(--pb-*).
 * To rebrand or theme, override these in a stylesheet AFTER this one.
 *
 * Heritage palette
 *   --pb-accent  warm vermillion — pastebin.ca's primary nav colour
 *                since 2001. Used for Publish, Fork, Copy-link, etc.
 *   --pb-peri    periwinkle blue — the original section-head tint.
 *                Used as boundary stripes; never a primary action.
 */

/* Self-hosted Geist (SIL OFL 1.1; see /assets/fonts/LICENSE.txt).
 * Single variable woff2 covers all weights 100–900 — keeps payload small
 * and removes the runtime dependency on fonts.googleapis.com. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surface ─────────────────────────────────────────────────────────── */
  --pb-bg:      #fbfbfa;
  --pb-surface: #ffffff;
  --pb-panel:   #f6f6f4;
  --pb-panel-2: #f1f1ee;

  /* Hairlines ──────────────────────────────────────────────────────── */
  --pb-hair:    #ececea;
  --pb-hair-2:  #e3e3e0;
  --pb-hair-3:  #d4d4d0;

  /* Ink ────────────────────────────────────────────────────────────── */
  --pb-ink:     #0f0f10;
  --pb-body:    #262626;
  --pb-dim:     #5d5d5d;
  --pb-mute:    #6f6f6f;
  --pb-faint:   #c0c0bd;

  /* Accent · warm vermillion (heritage) ────────────────────────────── */
  --pb-accent:        #c2531a;
  --pb-accent-soft:   #fbe9d6;
  --pb-accent-ink:    #7a3009;
  --pb-accent-dark:   #a4400f;

  /* Periwinkle · boundary tint (heritage) ──────────────────────────── */
  --pb-peri:          #4d63a3;
  --pb-peri-band:     #e2e7f4;
  --pb-peri-soft:     #eef1fa;
  --pb-peri-ink:      #2b3a6e;

  /* Semantic ───────────────────────────────────────────────────────── */
  --pb-green:         #147a3c;
  --pb-green-soft:    #e2f1e3;
  --pb-orange:        #ad5500;
  --pb-orange-soft:   #fff6e8;
  --pb-red:           #b91d3a;
  --pb-red-soft:      #fdecef;
  --pb-yellow:        #865800;
  --pb-yellow-soft:   #fcf3da;
  --pb-amber:         #b45309;

  /* Syntax ─────────────────────────────────────────────────────────── */
  --pb-tok-keyword:   #a1009b;
  --pb-tok-string:    #0a7f4a;
  --pb-tok-number:    #8a5800;
  --pb-tok-comment:   var(--pb-mute);
  --pb-tok-function:  #a4400f;
  --pb-tok-type:      #8a5800;
  --pb-tok-tag:       #a4400f;
  --pb-tok-attr:      var(--pb-peri);

  /* Shape ──────────────────────────────────────────────────────────── */
  --pb-radius-sm:  4px;
  --pb-radius:     7px;
  --pb-radius-md: 10px;
  --pb-radius-lg: 14px;

  /* Spacing (multiples of 4) ───────────────────────────────────────── */
  --pb-space-1:  4px;
  --pb-space-2:  8px;
  --pb-space-3: 12px;
  --pb-space-4: 16px;
  --pb-space-5: 24px;
  --pb-space-6: 36px;
  --pb-space-7: 48px;

  /* Typography ─────────────────────────────────────────────────────── */
  --pb-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pb-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  /* Type scale ─────────────────────────────────────────────────────── */
  --pb-text-h1: 600 30px/1.1   var(--pb-font-sans);
  --pb-text-h2: 600 22px/1.2   var(--pb-font-sans);
  --pb-text-h3: 600 16px/1.3   var(--pb-font-sans);
  --pb-text-body: 400 14px/1.55 var(--pb-font-sans);
  --pb-text-ui:   500 12.5px/1.45 var(--pb-font-sans);
  --pb-text-mono: 500 13px/1.65 var(--pb-font-mono);

  /* Shadow ─────────────────────────────────────────────────────────── */
  --pb-shadow-2: 0 12px 30px rgba(0, 0, 0, .12);
  --pb-shadow-pop:
    0 1px 2px rgba(15, 15, 16, .04),
    0 8px 24px rgba(15, 15, 16, .08),
    0 24px 64px rgba(15, 15, 16, .10);

  /* Boundary accents (the heritage flair) ──────────────────────────── */
  --pb-stripe-peri:   var(--pb-peri);
  --pb-stripe-accent: var(--pb-accent);
  --pb-stripe-id:     linear-gradient(90deg, var(--pb-peri), var(--pb-accent));

  /* Paper surface — engineer's pad dot grid.
   * Codified product position: pastebin.ca is a paper-artifact tool,
   * not flat dark-mode SaaS. Override --pb-texture: none to disable;
   * adjust --pb-texture-size to tune scratchpad density. */
  --pb-texture-dot:    var(--pb-hair-2);
  --pb-texture-size:   24px;
  --pb-texture:        radial-gradient(circle at 1px 1px,
                          var(--pb-texture-dot) .8px, transparent 1.2px);

  /* Layout constants used by chrome ────────────────────────────────── */
  --pb-topbar-h:  52px;
  --pb-navrail-w: 230px;
  --pb-sidebar-w: 340px;
}

/* Dark mode tokens.
 *
 * Two activation paths must work:
 *   1. OS-level `prefers-color-scheme: dark` when the user hasn't made a
 *      manual choice (i.e. `data-theme` is absent or "system").
 *   2. Explicit `<html data-theme="dark">` set by the topbar theme toggle
 *      (overrides system, even when OS is light).
 *
 * `<html data-theme="light">` always forces light, even on a dark OS.
 *
 * We can't merge both activation paths into a single selector list because
 * one lives inside an @media block, so the var block is intentionally
 * declared twice. Keep the two copies in sync. */
:root[data-theme="dark"] {
  --pb-bg:      #131316;
  --pb-surface: #1c1c20;
  --pb-panel:   #18181c;
  --pb-panel-2: #232328;
  --pb-hair:    #2a2a30;
  --pb-hair-2:  #3a3a40;
  --pb-hair-3:  #4c4c54;
  --pb-ink:     #f5f4f0;
  --pb-body:    #d6d4cf;
  /* WCAG AA: --pb-dim and --pb-mute carry small/dim chrome text (eyebrows,
   * pill labels, taglines). Both must clear 4.5:1 against the darkest token
   * surfaces — --pb-bg #131316 and --pb-panel #18181c. */
  --pb-dim:     #c1bfba;
  --pb-mute:    #a8a6a1;
  --pb-faint:   #4b4a47;
  /* Accent / peri "ink" variants are calibrated for *light* backgrounds.
   * In dark mode we lift them so they keep clearing 4.5:1 on --pb-bg.
   * --pb-accent-fg is the on-accent text colour: white passes on the
   * darker light-mode accent but fails on the lifted dark-mode one, so we
   * flip to near-black (~5.2:1 on #e0794a). */
  --pb-accent:        #f28d60;
  --pb-accent-ink:    #f3a07a;
  --pb-accent-dark:   #e0794a;
  --pb-accent-fg:     #000000;
  /* Primary button uses --pb-ink as background; in dark mode that's
   * near-white so on-ink text must be near-black. Hover keeps the dark
   * bias by lifting toward off-white. */
  --pb-ink-fg:        #11111a;
  --pb-ink-hover:     #e8e6e0;
  --pb-peri:          #8aa3e8;
  --pb-peri-ink:      #bccaf2;
  --pb-accent-soft: #3a2618;
  --pb-peri-soft:   #1e2640;
  --pb-peri-band:   #1e2640;
  --pb-green-soft:  #163022;
  --pb-red-soft:    #2c1820;
  --pb-yellow-soft: #2f2517;
  --pb-orange-soft: #2e2114;
  /* Semantic ink variants — lifted so the chip text reads against the
   * dark-soft backgrounds above. Light-mode variants (defined in
   * :root) are dark and would render near-invisible on these tints. */
  --pb-green:       #65d089;
  --pb-orange:      #f0a972;
  --pb-red:         #f08b9a;
  --pb-yellow:      #e9ce6e;
  --pb-amber:       #f0a972;
  --pb-tok-keyword:  #ff7ae5;
  --pb-tok-string:   #7ee2a8;
  --pb-tok-number:   #f4c16e;
  --pb-tok-comment:  var(--pb-mute);
  --pb-tok-function: var(--pb-accent);
  --pb-tok-type:     #f4c16e;
  --pb-tok-tag:      var(--pb-accent);
  --pb-tok-attr:     var(--pb-peri);
  --pb-shadow-2:     0 14px 34px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --pb-bg:      #131316;
    --pb-surface: #1c1c20;
    --pb-panel:   #18181c;
    --pb-panel-2: #232328;
    --pb-hair:    #2a2a30;
    --pb-hair-2:  #3a3a40;
    --pb-hair-3:  #4c4c54;
    --pb-ink:     #f5f4f0;
    --pb-body:    #d6d4cf;
    --pb-dim:     #c1bfba;
    --pb-mute:    #a8a6a1;
    --pb-faint:   #4b4a47;
    --pb-accent:        #f28d60;
    --pb-accent-ink:    #f3a07a;
    --pb-accent-dark:   #e0794a;
    --pb-accent-fg:     #000000;
    --pb-ink-fg:        #11111a;
    --pb-ink-hover:     #e8e6e0;
    --pb-peri:          #8aa3e8;
    --pb-peri-ink:      #bccaf2;
    --pb-accent-soft: #3a2618;
    --pb-peri-soft:   #1e2640;
    --pb-peri-band:   #1e2640;
    --pb-green-soft:  #163022;
    --pb-red-soft:    #2c1820;
    --pb-yellow-soft: #2f2517;
    --pb-orange-soft: #2e2114;
    /* Lifted semantic inks for dark-soft chip backgrounds. */
    --pb-green:       #65d089;
    --pb-orange:      #f0a972;
    --pb-red:         #f08b9a;
    --pb-yellow:      #e9ce6e;
    --pb-amber:       #f0a972;
    --pb-tok-keyword:  #ff7ae5;
    --pb-tok-string:   #7ee2a8;
    --pb-tok-number:   #f4c16e;
    --pb-tok-comment:  var(--pb-mute);
    --pb-tok-function: var(--pb-accent);
    --pb-tok-type:     #f4c16e;
    --pb-tok-tag:      var(--pb-accent);
    --pb-tok-attr:     var(--pb-peri);
    --pb-shadow-2:     0 14px 34px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-theme="light"] { color-scheme: light; }
/* pastebin-ui · base reset and global type
 * ──────────────────────────────────────────────────────────────────────
 * Drop AFTER tokens.css. Provides:
 *   • A minimal modern reset (no destructive defaults removed)
 *   • Body type defaults
 *   • Reusable layout / utility primitives
 *   • Code token colours (.pb-tok-*)
 */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--pb-bg);
  color: var(--pb-ink);
  font-family: var(--pb-font-sans);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font: var(--pb-text-body); color: var(--pb-body);
  min-height: 100vh;
  background-color: var(--pb-bg);
  /* Engineer's-pad dot grid — the paper-artifact surface treatment
   * that distinguishes pastebin.ca from flat dark-mode SaaS. The
   * texture is a token (--pb-texture) so individual pages or themes
   * can replace or remove it. */
  background-image: var(--pb-texture);
  background-size: var(--pb-texture-size) var(--pb-texture-size);
  background-position: 0 0;
}

::selection { background: var(--pb-accent-soft); color: var(--pb-accent); }

a { color: var(--pb-accent-ink); text-decoration: none; }
/* WCAG 1.4.1 — links inside prose blocks must be distinguishable without color.
   Underline anywhere a link sits inside text; chrome links opt out via .pb-*. */
p a, li a, dt a, dd a, blockquote a, .pb-prose a { text-decoration: underline; text-decoration-color: var(--pb-hair-2); text-underline-offset: 2px; }
p a:hover, li a:hover, dt a:hover, dd a:hover, blockquote a:hover, .pb-prose a:hover { text-decoration-color: var(--pb-accent); }
/* chrome / list / chip links opt back out */
.pb-topbar a, .pb-navrail a, .pb-side-list a, .pb-chip a, .pb-button, .pb-paste-header__crumbs a { text-decoration: none; }
.pb-side-list li { display: flex; flex-direction: column; gap: 1px; }
.pb-side-list a { display: block; font-weight: 500; }
a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }

h1, h2, h3, h4, p { margin: 0; }

input, textarea, select, button { font: inherit; }

img, svg { display: block; max-width: 100%; }

button { cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }

/* Mono helper ──────────────────────────────────────────────────────── */
.pb-mono { font-family: var(--pb-font-mono); font-feature-settings: "ss02","calt"; }
.pb-num  { font-variant-numeric: tabular-nums; }

/* Section eyebrow (used above grouped settings, lists, panels) ─────── */
.pb-eyebrow {
  font: 600 10.5px/1.4 var(--pb-font-sans);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pb-mute);
}

/* Hairlines ────────────────────────────────────────────────────────── */
.pb-rule       { border: 0; border-top: 1px solid var(--pb-hair); margin: 0; }
.pb-rule-dash  { border: 0; border-top: 1px dashed var(--pb-hair-2); margin: 0; }

/* Boundary accent stripes (heritage flair) ────────────────────────── */
/* Apply to a parent element with position:relative; the stripe sits
 * across the top edge inside the parent's border. */
.pb-stripe       { position: relative; }
.pb-stripe::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--pb-stripe-peri); opacity: .55;
  pointer-events: none;
}
.pb-stripe--accent::before { background: var(--pb-stripe-accent); opacity: .6; }
.pb-stripe--id::before     { background: var(--pb-stripe-id); height: 4px; opacity: 1; }

/* Cards ────────────────────────────────────────────────────────────── */
.pb-card {
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair);
  border-radius: var(--pb-radius-md);
}

/* Banners ─────────────────────────────────────────────────────────── */
.pb-banner {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius);
  background: var(--pb-panel);
  font-size: 12.5px; color: var(--pb-body); line-height: 1.5;
}
.pb-banner--accent { background: var(--pb-accent-soft); border-color: transparent; }
.pb-banner--peri   { background: var(--pb-peri-soft);   border-color: transparent; color: var(--pb-peri-ink); }
.pb-banner--yellow { background: var(--pb-yellow-soft); border-color: transparent; color: var(--pb-yellow); }
.pb-banner--green  { background: var(--pb-green-soft);  border-color: transparent; color: var(--pb-green); }
.pb-banner--red    { background: var(--pb-red-soft);    border-color: transparent; color: var(--pb-red); }

/* Code token colours (.pb-tok-*) ───────────────────────────────────── */
/* Used inside a <pre class="pb-code"> or wherever code is rendered.
 * Pair with Shiki / Prism's token classnames in your renderer. */
.pb-code           { font: var(--pb-text-mono); color: var(--pb-body); }
.pb-tok-keyword    { color: var(--pb-tok-keyword); }
.pb-tok-string     { color: var(--pb-tok-string); }
.pb-tok-number     { color: var(--pb-tok-number); }
.pb-tok-comment    { color: var(--pb-tok-comment); font-style: italic; }
.pb-tok-function   { color: var(--pb-tok-function); }
.pb-tok-type       { color: var(--pb-tok-type); }
.pb-tok-tag        { color: var(--pb-tok-tag); }
.pb-tok-attr       { color: var(--pb-tok-attr); }

.pb-code-line-no {
  color: var(--pb-mute); user-select: none; text-align: right;
  padding-right: 18px; font-variant-numeric: tabular-nums;
  font-size: 11.5px;
}
/* pastebin-ui · component styles
 * ──────────────────────────────────────────────────────────────────────
 * Drop AFTER tokens.css and base.css. Every Astro and HTML component
 * in this library renders into classes defined here. Web components
 * have their own internal styles (Shadow DOM) that read the same
 * tokens — see web-components/pb-elements.js.
 */

/* ── Button ─────────────────────────────────────────────────────────── */
.pb-button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: var(--pb-radius);
  border: 1px solid var(--pb-hair-2);
  background: var(--pb-surface); color: var(--pb-ink);
  font: var(--pb-text-ui); white-space: nowrap;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.pb-button:hover { background: var(--pb-panel); }
.pb-button:disabled { cursor: not-allowed; }

.pb-button--primary { background: var(--pb-ink); color: var(--pb-ink-fg, #fff); border-color: var(--pb-ink); }
.pb-button--primary:hover { background: var(--pb-ink-hover, #222); }

.pb-button--accent  { background: var(--pb-accent); color: var(--pb-accent-fg, #fff); border-color: var(--pb-accent); font-weight: 600; }
.pb-button--accent:hover { background: var(--pb-accent-dark); }

.pb-button--ghost   { background: transparent; border-color: transparent; color: var(--pb-dim); }
.pb-button--ghost:hover { color: var(--pb-ink); background: var(--pb-panel); }

.pb-button--danger  { color: var(--pb-red); border-color: var(--pb-red); background: transparent; }
.pb-button--danger:hover { background: var(--pb-red-soft); }

.pb-button--sm { padding: 5px 10px; font-size: 11.5px; }
.pb-button--lg { padding: 10px 16px; font-size: 13.5px; }
.pb-button--block { width: 100%; justify-content: center; }

/* Theme toggle — ghost-button styled, dropped into .pb-topbar__right. */
.theme-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px;
  border-radius: var(--pb-radius);
  border: 1px solid transparent;
  background: transparent; color: var(--pb-dim);
  font: var(--pb-text-ui); font-size: 11.5px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.theme-toggle:hover { color: var(--pb-ink); background: var(--pb-panel); }
.theme-toggle:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.theme-toggle svg { flex: 0 0 auto; }
.theme-toggle__label { text-transform: capitalize; letter-spacing: -0.005em; }
@media (max-width: 720px) {
  .theme-toggle__label { display: none; }
}

/* ── Locale toggle ──────────────────────────────────────────────────────
 * Compact pill in the TopBar right rail. Mirrors the theme-toggle
 * styling so they read as a matched pair.
 */
.pb-locale-toggle { position: relative; display: inline-flex; }
.pb-locale-toggle__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 8px;
  border-radius: var(--pb-radius);
  border: 1px solid transparent;
  background: transparent; color: var(--pb-dim);
  font: var(--pb-text-ui); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pb-locale-toggle__btn:hover { color: var(--pb-ink); background: var(--pb-panel); }
.pb-locale-toggle__btn:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: 2px; }
.pb-locale-toggle__caret {
  margin-left: 1px;
  font-size: 9px; opacity: .8;
}
.pb-locale-toggle__menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 160px;
  padding: 4px;
  background: var(--pb-bg);
  border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  z-index: 60;
  display: flex; flex-direction: column; gap: 2px;
}
.pb-locale-toggle__opt {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 6px 10px;
  border: 0;
  background: transparent;
  border-radius: calc(var(--pb-radius) - 2px);
  color: var(--pb-ink);
  font: var(--pb-text-ui); font-size: 12px;
  text-align: left;
  cursor: pointer;
}
.pb-locale-toggle__opt:hover { background: var(--pb-panel); }
.pb-locale-toggle__opt:focus-visible { outline: 2px solid var(--pb-accent); outline-offset: -2px; }
.pb-locale-toggle__opt--active { color: var(--pb-accent); font-weight: 600; }
.pb-locale-toggle__opt-code {
  font-family: var(--pb-font-mono);
  font-size: 10.5px;
  color: var(--pb-mute);
  letter-spacing: 0.04em;
}

/* Inverted kbd inside a coloured button (so the chord sits well on a dark fill) */
.pb-button--accent .pb-kbd,
.pb-button--primary .pb-kbd {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border-color: rgba(255, 255, 255, .3);
}

/* ── Chip ───────────────────────────────────────────────────────────── */
.pb-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: 999px;
  font: 500 11.5px/1.3 var(--pb-font-sans);
  background: var(--pb-panel-2); color: var(--pb-body);
}
.pb-chip.pb-mono { font-family: var(--pb-font-mono); font-feature-settings: "ss02","calt"; }
.pb-chip--accent { background: var(--pb-accent-soft); color: var(--pb-accent-ink); }
.pb-chip--green  { background: var(--pb-green-soft);  color: var(--pb-green); }
.pb-chip--orange { background: var(--pb-orange-soft); color: var(--pb-orange); }
.pb-chip--red    { background: var(--pb-red-soft);    color: var(--pb-red); }
.pb-chip--yellow { background: var(--pb-yellow-soft); color: var(--pb-yellow); }
.pb-chip--peri   { background: var(--pb-peri-soft);   color: var(--pb-peri-ink); }
.pb-chip--outline {
  background: transparent; color: var(--pb-dim);
  border: 1px solid var(--pb-hair-2);
}
.pb-chip__dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ── Keyboard hint ──────────────────────────────────────────────────── */
.pb-kbd {
  font-family: var(--pb-font-mono);
  font-size: 10.5px;
  padding: 1.5px 5px;
  border: 1px solid var(--pb-hair-2);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--pb-dim);
  background: var(--pb-surface);
  font-feature-settings: "tnum";
  display: inline-block;
}

/* ── Field (labelled input wrapper) ─────────────────────────────────── */
.pb-field {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--pb-font-sans);
}
.pb-field__label {
  display: flex; align-items: baseline; gap: 8px;
  font: 600 12px/1.4 var(--pb-font-sans);
  color: var(--pb-ink);
}
.pb-field__optional { font-size: 11px; color: var(--pb-mute); font-weight: 400; }
.pb-field__hint     { margin-left: auto; font-size: 11px; color: var(--pb-dim); font-weight: 400; }
.pb-field__control {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.pb-field__control:focus-within {
  border-color: var(--pb-accent);
  box-shadow: 0 0 0 3px var(--pb-accent-soft);
}
.pb-field__control input,
.pb-field__control textarea {
  flex: 1; border: 0; outline: 0; background: transparent;
  color: var(--pb-ink); padding: 0;
}
.pb-field__control input::placeholder,
.pb-field__control textarea::placeholder { color: var(--pb-mute); }
.pb-field__error {
  font-size: 11.5px; color: var(--pb-red);
  display: flex; gap: 6px; align-items: center;
}
.pb-field__error[hidden] { display: none; }
.pb-field__control input[aria-invalid="true"],
.pb-field__control textarea[aria-invalid="true"] {
  outline: 1px solid var(--pb-red);
  outline-offset: -1px;
}

/* ── Segmented control ──────────────────────────────────────────────── */
.pb-segmented {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--pb-hair-2);
  border-radius: 8px;
  background: var(--pb-surface);
  overflow: hidden;
}
.pb-segmented button {
  padding: 7px 12px;
  font: 500 12.5px/1 var(--pb-font-sans);
  background: transparent; color: var(--pb-body);
  border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.pb-segmented button + button { border-left: 1px solid var(--pb-hair-2); }
.pb-segmented button[aria-selected='true'] {
  background: var(--pb-ink); color: var(--pb-ink-fg, #fff); font-weight: 600;
}
.pb-segmented button[aria-selected='true'] + button,
.pb-segmented button + button[aria-selected='true'] { border-left-color: var(--pb-ink); }
.pb-segmented--sm button { padding: 5px 9px; font-size: 11.5px; }

/* ── Toggle (switch) ────────────────────────────────────────────────── */
.pb-toggle {
  position: relative; display: inline-block;
  width: 30px; height: 17px;
  background: var(--pb-hair-2); border-radius: 999px;
  transition: background .15s ease;
  cursor: pointer; flex-shrink: 0;
  border: 0;
}
.pb-toggle::after {
  content: ''; position: absolute; top: 1.5px; left: 1.5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  transition: transform .15s ease;
}
.pb-toggle[aria-checked='true'] { background: var(--pb-accent); }
.pb-toggle[aria-checked='true']::after { transform: translateX(13px); }

/* ── Avatar ─────────────────────────────────────────────────────────── */
.pb-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  font: 700 11px/1 var(--pb-font-sans);
  letter-spacing: .02em;
  border-radius: 5px;
  width: 22px; height: 22px;
  user-select: none; flex-shrink: 0;
}
.pb-avatar--lg  { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
.pb-avatar--xl  { width: 72px; height: 72px; font-size: 28px; border-radius: 16px; }
.pb-avatar--sm  { width: 16px; height: 16px; font-size: 9px; border-radius: 4px; }
.pb-avatar--xs  { width: 14px; height: 14px; font-size: 8px; border-radius: 3px; }
.pb-avatar--anon {
  background: transparent; color: var(--pb-dim);
  border: 1.5px dashed var(--pb-mute); border-radius: 50%;
  font-weight: 600;
}
.pb-avatar--hue-0 { background: oklch(0.82 0.10 222); color: oklch(0.32 0.12 222); }
.pb-avatar--hue-1 { background: oklch(0.82 0.10 28);  color: oklch(0.32 0.12 28); }
.pb-avatar--hue-2 { background: oklch(0.82 0.10 142); color: oklch(0.32 0.12 142); }
.pb-avatar--hue-3 { background: oklch(0.82 0.10 280); color: oklch(0.32 0.12 280); }
.pb-avatar--hue-4 { background: oklch(0.82 0.10 12);  color: oklch(0.32 0.12 12); }
.pb-avatar--hue-5 { background: oklch(0.82 0.10 192); color: oklch(0.32 0.12 192); }

/* ── Top bar ────────────────────────────────────────────────────────── */
.pb-topbar {
  display: flex; align-items: center; gap: 14px;
  height: var(--pb-topbar-h);
  padding: 0 18px;
  border-bottom: 1px solid var(--pb-hair);
  background: var(--pb-surface);
  box-shadow: inset 0 -2px 0 var(--pb-peri-band);
  flex-shrink: 0;
}
.pb-topbar__search {
  display: flex; align-items: center; gap: 10px;
  width: 380px; max-width: 50%;
  padding: 7px 12px;
  background: var(--pb-panel);
  border: 1px solid var(--pb-hair-2);
  border-radius: 8px;
  font: 500 12.5px/1 var(--pb-font-sans);
  color: var(--pb-dim);
  margin-inline: auto;
}

/* Brand lockup: mark + (wordmark / tagline column).
   Tagline echoes historic pastebin.ca trade dress ("type. paste. share."). */
.pb-topbar__brand {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--pb-ink); text-decoration: none;
  font: 600 13px/1 var(--pb-font-sans);
}
.pb-topbar__brand:hover { text-decoration: none; }
.pb-topbar__lockup {
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px;
  line-height: 1;
}
.pb-topbar__tagline {
  font: 400 10px/1 var(--pb-font-sans);
  letter-spacing: 0.08em;
  text-transform: lowercase;
  color: var(--pb-dim);
  white-space: nowrap;
}

/* Right slot: single identity rep — avatar + name in a pill that links to /u/<handle>/. */
.pb-topbar__right {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
}
.pb-topbar__user {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  text-decoration: none;
  color: var(--pb-ink);
  font: 500 12.5px/1 var(--pb-font-sans);
  border: 1px solid transparent;
  transition: background 80ms ease, border-color 80ms ease;
}
.pb-topbar__user:hover {
  background: var(--pb-panel);
  border-color: var(--pb-hair-2);
  text-decoration: none;
}
.pb-topbar__user .pb-avatar { flex: 0 0 auto; }
.pb-topbar__user-name {
  max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── Nav rail ───────────────────────────────────────────────────────── */
.pb-navrail {
  width: var(--pb-navrail-w);
  border-right: 1px solid var(--pb-hair);
  background: var(--pb-panel);
  display: flex; flex-direction: column; flex-shrink: 0;
}
.pb-navrail__sections { padding: 14px; display: flex; flex-direction: column; gap: 18px; flex: 1; overflow: auto; }
.pb-navrail__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px;
  border-radius: 6px;
  font: 500 12.5px/1.2 var(--pb-font-sans);
  color: var(--pb-body); cursor: pointer;
  text-decoration: none;
}
.pb-navrail__item:hover { background: var(--pb-panel-2); }
.pb-navrail__item[aria-current='page'],
.pb-navrail__item--active {
  background: var(--pb-accent-soft);
  color: var(--pb-accent-ink);
  font-weight: 600;
}
.pb-navrail__item-count { margin-left: auto; font-size: 11px; color: var(--pb-mute); font-variant-numeric: tabular-nums; }
.pb-navrail__dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

/* Auth-gated nav items: hidden on anon load, revealed by shared/auth-chip
 * once /whoami confirms a session by toggling body[data-pb-authed='true']. */
body:not([data-pb-authed='true']) .pb-navrail [data-pb-auth] { display: none !important; }

/* ── Setting pill (Create page settings bar) ────────────────────────── */
.pb-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px; min-height: 30px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair-2);
  border-radius: 8px;
  color: var(--pb-ink);
  font: 500 12.5px/1.2 var(--pb-font-sans);
  white-space: nowrap; cursor: pointer;
}
.pb-pill:hover { border-color: var(--pb-hair-3); }
.pb-pill[aria-pressed='true'] { background: var(--pb-accent-soft); border-color: var(--pb-accent); color: var(--pb-accent); }
.pb-pill__label {
  font: 600 10px/1 var(--pb-font-sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pb-mute);
}
.pb-pill[aria-pressed='true'] .pb-pill__label { color: var(--pb-accent); }
.pb-pill__icon { color: var(--pb-dim); display: flex; }
.pb-pill__icon--orange { color: var(--pb-orange); }
.pb-pill__icon--accent { color: var(--pb-accent); }
.pb-pill__icon--green  { color: var(--pb-green); }

.pb-pill--more {
  background: transparent;
  border: 1px dashed var(--pb-hair-2);
  color: var(--pb-dim);
}

/* The bar itself ── a single horizontal row, gap-driven ────────────── */
.pb-settings-bar {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}

/* +More disclosure panel — secondary settings revealed by the +More button.
 * Lives directly under the settings bar; keeps a hairline divider on top so
 * the relationship to the bar is obvious. */
.pb-settings-more {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 0 0; margin-top: 6px;
  border-top: 1px dashed var(--pb-hair-2);
  font-size: 12px; color: var(--pb-dim); flex-wrap: wrap;
}
.pb-settings-more__opt {
  display: inline-flex; align-items: center; gap: 6px;
}
.pb-settings-more__row {
  display: inline-flex; align-items: center; gap: 8px;
}
.pb-settings-more__row-label {
  display: inline-flex; align-items: center; gap: 4px; color: var(--pb-dim);
}
.pb-settings-more__row select {
  appearance: none; background: var(--pb-surface);
  border: 1px solid var(--pb-hair-2); border-radius: 6px;
  color: var(--pb-ink); padding: 3px 8px;
  font: 500 12px/1.2 var(--pb-font-sans); cursor: pointer;
}
.pb-settings-more__row select:focus {
  outline: 0; border-color: var(--pb-accent);
  box-shadow: 0 0 0 3px var(--pb-accent-soft);
}

/* Inline disclosure bubble — a <details> with an info-icon summary that
 * pops a small tooltip-style panel on click.  Keeps the row terse while
 * surfacing the explanation on demand (better than a hover-only tooltip
 * for touch input + screen readers). */
.pb-info-disclosure { display: inline-block; position: relative; }
.pb-info-disclosure summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  color: var(--pb-mute); border: 0; padding: 0; background: transparent;
}
.pb-info-disclosure summary::-webkit-details-marker { display: none; }
.pb-info-disclosure summary::marker { content: ''; }
.pb-info-disclosure summary:hover { color: var(--pb-ink); }
.pb-info-disclosure summary:focus-visible {
  outline: 2px solid var(--pb-accent); outline-offset: 2px; border-radius: 50%;
}
.pb-info-disclosure[open] > p {
  position: absolute; top: calc(100% + 6px); left: -8px;
  width: 260px; padding: 8px 10px; margin: 0;
  background: var(--pb-panel); border: 1px solid var(--pb-hair-2);
  border-radius: 8px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
  color: var(--pb-body); font: 400 12px/1.5 var(--pb-font-sans);
  z-index: 30;
}

/* Encryption expansion row — single thin row below the bar ─────────── */
.pb-encrypt-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; margin-top: 8px;
  background: var(--pb-accent-soft);
  border: 1px solid color-mix(in oklab, var(--pb-accent) 40%, transparent);
  border-radius: 8px;
  flex-wrap: wrap;
}
.pb-encrypt-row__label {
  display: flex; align-items: center; gap: 6px;
  font: 600 10.5px/1 var(--pb-font-sans);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--pb-accent-ink);
  flex-shrink: 0;
}

/* ── Strength meter ─────────────────────────────────────────────────── */
.pb-strength { display: flex; gap: 3px; height: 4px; min-width: 80px; }
.pb-strength > span { flex: 1; background: var(--pb-hair-2); border-radius: 999px; }
.pb-strength[data-level='1'] > span:nth-child(-n+1) { background: var(--pb-red); }
.pb-strength[data-level='2'] > span:nth-child(-n+2) { background: var(--pb-orange); }
.pb-strength[data-level='3'] > span:nth-child(-n+3) { background: var(--pb-yellow); }
.pb-strength[data-level='4'] > span:nth-child(-n+4) { background: var(--pb-green); }

/* ── Lineage rail ───────────────────────────────────────────────────── */
.pb-lineage { display: flex; flex-direction: column; }
.pb-lineage__node { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: flex-start; }
.pb-lineage__gutter {
  display: flex; flex-direction: column; align-items: center;
  width: 18px; padding-top: 4px;
}
.pb-lineage__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pb-body); }
.pb-lineage__dot--self {
  width: 11px; height: 11px;
  background: var(--pb-accent);
  box-shadow: 0 0 0 2px var(--pb-accent-soft);
}
.pb-lineage__dot--sibling {
  background: var(--pb-surface);
  border: 1.5px solid var(--pb-body);
}
.pb-lineage__line {
  flex: 1; min-height: 18px; width: 1.5px;
  background: var(--pb-hair-2);
}
.pb-lineage__line--sibling { background: transparent; border-left: 1.5px dashed var(--pb-hair-2); }
.pb-lineage__body { padding-bottom: 12px; display: flex; align-items: flex-start; gap: 8px; }
.pb-lineage__id { font-family: var(--pb-font-mono); font-weight: 500; color: var(--pb-ink); }
.pb-lineage__id--self { color: var(--pb-accent-ink); font-weight: 600; }
.pb-lineage__meta { font-size: 11.5px; color: var(--pb-dim); margin-top: 2px; }
.pb-lineage__diff { font-family: var(--pb-font-mono); font-size: 11px; color: var(--pb-green); white-space: nowrap; }
.pb-lineage__diff--created { color: var(--pb-dim); }

/* ── Modal ──────────────────────────────────────────────────────────── */
.pb-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(15, 15, 16, 0.32);
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  padding: 24px;
}
.pb-modal-backdrop[data-open="true"] { display: flex; }
.pb-modal {
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair);
  border-radius: var(--pb-radius-md);
  box-shadow: var(--pb-shadow-pop);
  width: 540px; max-width: 92vw;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.pb-modal__stripe { height: 4px; background: var(--pb-accent); flex-shrink: 0; }
.pb-modal__stripe--red    { background: var(--pb-red); }
.pb-modal__stripe--yellow { background: var(--pb-yellow); }
.pb-modal__stripe--green  { background: var(--pb-green); }
.pb-modal__stripe--orange { background: var(--pb-orange); }
.pb-modal__stripe--peri   { background: var(--pb-peri); }

.pb-modal__head {
  padding: 22px 24px 14px;
  display: flex; gap: 14px; align-items: flex-start;
}
.pb-modal__icon {
  width: 36px; height: 36px; border-radius: 9px;
  background: color-mix(in oklab, var(--pb-accent) 14%, var(--pb-surface));
  color: var(--pb-accent);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pb-modal__head--red    .pb-modal__icon { background: color-mix(in oklab, var(--pb-red) 14%, var(--pb-surface));    color: var(--pb-red); }
.pb-modal__head--yellow .pb-modal__icon { background: color-mix(in oklab, var(--pb-yellow) 14%, var(--pb-surface)); color: var(--pb-yellow); }
.pb-modal__head--green  .pb-modal__icon { background: color-mix(in oklab, var(--pb-green) 14%, var(--pb-surface));  color: var(--pb-green); }
.pb-modal__head--orange .pb-modal__icon { background: color-mix(in oklab, var(--pb-orange) 14%, var(--pb-surface)); color: var(--pb-orange); }
.pb-modal__head--peri   .pb-modal__icon { background: color-mix(in oklab, var(--pb-peri) 14%, var(--pb-surface));   color: var(--pb-peri); }

.pb-modal__title  { font: 600 18px/1.25 var(--pb-font-sans); letter-spacing: -.02em; color: var(--pb-ink); }
.pb-modal__body   { padding: 0 24px 18px; font: 400 13.5px/1.55 var(--pb-font-sans); color: var(--pb-dim); }
.pb-modal__footer {
  padding: 14px 22px;
  background: var(--pb-panel);
  border-top: 1px solid var(--pb-hair);
  display: flex; align-items: center; gap: 10px;
}
.pb-modal__close {
  width: 26px; height: 26px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pb-mute);
}
.pb-modal__close:hover { background: var(--pb-panel); color: var(--pb-ink); }
.pb-modal__spacer { flex: 1; }

/* ── Paste header ───────────────────────────────────────────────────── */
.pb-paste-header {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--pb-hair);
  background: var(--pb-surface);
}
.pb-paste-header__crumbs {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
  font-size: 12px; color: var(--pb-dim);
  flex-wrap: wrap;
  min-height: 30px;
}
.pb-paste-header__crumbs > a { color: var(--pb-dim); font-weight: 500; }
.pb-paste-header__crumbs > a:hover { color: var(--pb-ink); }
.pb-paste-header__actions {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  flex-wrap: wrap; justify-content: flex-end;
}
.pb-paste-header__actions .pb-button { min-height: 28px; }
/* Icon-only buttons (download): square, same height as text buttons. */
.pb-button--icon { padding: 5px 7px; aspect-ratio: 1; justify-content: center; }
.pb-paste-header__title-row {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap;
}
.pb-paste-header__title {
  font: 600 26px/1.15 var(--pb-font-sans);
  letter-spacing: -.025em;
  color: var(--pb-ink);
}
.pb-paste-header__meta {
  display: flex; align-items: center; gap: 14px;
  margin-top: 10px;
  font-size: 12px; color: var(--pb-dim);
  flex-wrap: wrap;
}

/* ── Code block ─────────────────────────────────────────────────────── */
.pb-code-block {
  padding: 16px 4px 16px 0;
  position: relative; overflow: hidden;
}
.pb-code-block pre {
  margin: 0;
  font: var(--pb-text-mono);
  color: var(--pb-body);
}
.pb-code-block .pb-code-line {
  display: flex; align-items: baseline;
}
.pb-code-block .pb-code-line__content {
  flex: 1; white-space: pre; overflow: hidden;
}

/* ── Use chip (auto-detect confirm) ─────────────────────────────────── */
.pb-use-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--pb-accent);
  background: var(--pb-accent-soft);
  color: var(--pb-accent);
  font: 600 11px/1.2 var(--pb-font-sans);
  letter-spacing: .02em;
}

/* ── App shell layout ───────────────────────────────────────────────── */
.pb-app {
  display: flex; flex-direction: column;
  min-height: 100vh; background: var(--pb-bg);
}
.pb-app__body {
  display: flex; flex: 1; min-height: 0;
}
.pb-app__main {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background: var(--pb-bg);
}
.pb-app__sidebar {
  width: var(--pb-sidebar-w);
  border-left: 1px solid var(--pb-hair);
  background: var(--pb-panel);
  display: flex; flex-direction: column;
  flex-shrink: 0;
}

/* Site footer ─────────────────────────────────────────────────────────── */
.pb-site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--pb-hair);
  background: var(--pb-surface);
  color: var(--pb-dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.pb-site-footer a { color: inherit; text-decoration: underline; text-decoration-color: var(--pb-hair); }
.pb-site-footer a:hover { color: var(--pb-ink); text-decoration-color: currentColor; }
.pb-site-footer__sep { opacity: 0.6; }

/* Anonymous notice band ────────────────────────────────────────────── */
.pb-anon-band {
  padding: 10px 28px;
  background: var(--pb-peri-soft);
  border-bottom: 1px solid var(--pb-hair);
  display: flex; align-items: center; gap: 12px;
  font-size: 12.5px; color: var(--pb-peri-ink); line-height: 1.5;
}
.pb-anon-band strong { font-weight: 600; }

/* ── Responsive: collapse rails below 1024px ────────────────────────── */
@media (max-width: 1024px) {
  .pb-navrail { display: none; }
  .pb-app__sidebar { display: none; }
  .pb-topbar__search { display: none; }
}
@media (max-width: 640px) {
  .pb-paste-header { padding: 16px 16px 12px; }
  .pb-paste-header__title { font-size: 22px; }
}

/* ── pastebin.ca compat & extras ───────────────────────────────────── */

/* Accessibility: keep the skip link reachable but visually hidden until focused */
.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.skip-link:focus {
  position: fixed; left: 12px; top: 12px; width: auto; height: auto;
  padding: 8px 12px; background: var(--pb-ink); color: var(--pb-ink-fg, #fff); border-radius: var(--pb-radius); z-index: 2000;
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Generic helper: a settings drawer row used by the Create page below the bar */
.pb-create-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; margin-top: 8px;
  background: var(--pb-panel);
  border: 1px dashed var(--pb-hair-2);
  border-radius: var(--pb-radius);
  font-size: 12.5px; color: var(--pb-body);
}
.pb-create-row label { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-dim); font-weight: 500; }
.pb-create-row input[type=text], .pb-create-row input[type=password] {
  flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius); background: var(--pb-surface); color: var(--pb-ink);
}
.pb-create-row .field-error { color: var(--pb-red); font-size: 11.5px; }
.pb-create-row[hidden], [hidden].pb-policy, [hidden] { display: none !important; }

/* Live-validation states applied by paste-editor — outline inputs in the
 * error/warn colour so the user sees the problem alongside the message. */
.pb-create-row.field--error input,
.pb-create-row.field--error select,
.pb-create-row.field--error textarea { border-color: var(--pb-red); }
.pb-create-row.field--warn input,
.pb-create-row.field--warn select,
.pb-create-row.field--warn textarea { border-color: var(--pb-amber, #d97706); }
.pb-pill.field--error { border-color: var(--pb-red); }
.pb-pill.field--warn  { border-color: var(--pb-amber, #d97706); }
.pb-pill .field-error { color: var(--pb-red); font-size: 11px; margin-left: 4px; }

/* Create-page header layout: borrowed from pastebin-ui index.astro so the
 * title input and publish button align like the design. */
.pb-saved-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pb-green); display: inline-block; margin-right: 4px; vertical-align: middle; }
.pb-paste-header__autosave { margin-left: auto; font-size: 11px; color: var(--pb-mute); }
.pb-create-title-row { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin-top: 4px; }
@media (max-width: 720px) {
  .pb-create-title-row { grid-template-columns: 1fr; gap: 10px; }
  .pb-create-title-row .pb-button { width: 100%; justify-content: center; }
}
.pb-create-title { font: 600 26px/1.15 var(--pb-font-sans); letter-spacing: -.025em; color: var(--pb-ink); background: transparent; border: 0; outline: 0; padding: 0; width: 100%; }
.pb-create-title::placeholder { color: var(--pb-mute); }

/* Tabular lists shared by /drafts, /pastes, /forks, /revoked, /inbox.
   Card-wrapped on desktop; on mobile each row collapses into a stacked card. */
.table-scroll { border: 1px solid var(--pb-hair); border-radius: var(--pb-radius); overflow: hidden; background: var(--pb-surface); }
.table-scroll table.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.data-table thead th { background: var(--pb-panel); color: var(--pb-dim); text-align: left; font-weight: 500; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 9px 14px; border-bottom: 1px solid var(--pb-hair); }
.data-table tbody td { padding: 11px 14px; border-bottom: 1px solid var(--pb-hair); vertical-align: top; color: var(--pb-body); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--pb-panel); }
.data-table td.num, .data-table td.date { color: var(--pb-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table td.actions { white-space: nowrap; }
.data-table td.actions a, .data-table td.actions button { margin-right: 8px; font-size: 12px; }
.data-table td.actions a:last-child, .data-table td.actions button:last-child { margin-right: 0; }
.data-table .pill { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 500; background: var(--pb-panel-2); color: var(--pb-dim); border: 1px solid var(--pb-hair); margin-left: 4px; }
.data-table .pill.enc { background: var(--pb-peri-band); color: var(--pb-ink); }
.data-table .pill.ver { background: transparent; }
.data-table .muted { color: var(--pb-mute); }
.data-table tr.exp-hot td.date { color: var(--pb-red); }
.data-table tr.exp-soon td.date { color: var(--pb-amber); }

@media (max-width: 720px) {
  .table-scroll { border: 0; border-radius: 0; background: transparent; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { background: var(--pb-surface); border: 1px solid var(--pb-hair); border-radius: var(--pb-radius); margin-bottom: 10px; padding: 4px 0; }
  .data-table tbody tr:hover { background: var(--pb-surface); }
  .data-table tbody td { border-bottom: 1px dashed var(--pb-hair); padding: 8px 14px; }
  .data-table tbody td:last-child { border-bottom: 0; }
  .data-table tbody td::before { content: attr(data-label); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--pb-dim); margin-bottom: 2px; }
  .data-table td.actions { padding-top: 10px; }
}
.pb-create-settings { padding: 12px 28px 0; }
.pb-create-editor { flex: 1; padding: 12px 28px 18px; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.pb-create-aside { padding: 18px 18px 12px; }
.pb-create-aside__preview-head { padding: 12px 14px; border-bottom: 1px solid var(--pb-hair); display: flex; align-items: center; gap: 8px; }
.pb-create-aside__preview-body { padding: 14px; }
.pb-create-aside__preview-title { font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; margin-bottom: 4px; }
.pb-create-aside__preview-meta { font-size: 11.5px; color: var(--pb-dim); }
.pb-create-aside__link { padding: 10px 12px; display: flex; align-items: center; gap: 8px; font-size: 12px; }
.pb-create-aside__link-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pb-ink); }
.pb-create-aside__note { margin-top: auto; padding: 14px 18px; border-top: 1px solid var(--pb-hair); background: var(--pb-surface); display: flex; gap: 10px; align-items: flex-start; font-size: 11.5px; color: var(--pb-dim); line-height: 1.6; }

/* Setting pill containing a real <select>/<input> — used by Create page so the
 * dense one-row bar works without a JS rewrite. */
.pb-pill--field { padding: 4px 10px; position: relative; }
.pb-pill--field > svg { pointer-events: none; }
.pb-pill--field select,
.pb-pill--field input[type=text] {
  appearance: none; background: transparent; border: 0; outline: 0;
  color: var(--pb-ink); font: 500 12.5px/1.2 var(--pb-font-sans);
  padding: 2px 0; min-width: 0;
}
.pb-pill--field input[type=text] { width: 12ch; }
.pb-pill--field select { padding-right: 2px; cursor: pointer; }
.pb-pill--field:has(select:focus), .pb-pill--field:has(input:focus) {
  border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft);
}
.pb-pill--field:has(.pb-pill__trigger[aria-expanded='true']) {
  border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft);
}
.pb-pill__trigger {
  appearance: none; background: transparent; border: 0; padding: 0; margin: 0;
  color: inherit; font: inherit; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0;
}
.pb-pill__trigger:focus { outline: 0; }
.pb-pill__value {
  color: var(--pb-ink); font: 500 12.5px/1.2 var(--pb-font-sans);
  max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pb-pill__value:empty::before {
  content: '—'; color: var(--pb-mute);
}
.pb-pill__popup {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0;
  background: var(--pb-surface); border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius-md); box-shadow: var(--pb-shadow-2, 0 12px 30px rgba(0,0,0,.12));
  cursor: default;
}
.pb-pill__combobox {
  min-width: 280px; max-width: min(360px, calc(100vw - 24px));
  padding: 8px; flex-direction: column; gap: 8px;
}
.pb-pill__combobox:not([hidden]) { display: flex; }
.pb-pill__combobox input[type=text] {
  appearance: none; width: 100%; box-sizing: border-box;
  background: var(--pb-bg); border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius-sm); padding: 7px 9px;
  font: 500 12.5px/1.2 var(--pb-font-sans);
}
.pb-pill__combobox input[type=text]:focus {
  border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft);
}
.pb-pill__options { display: block; max-height: 260px; overflow-y: auto; padding: 2px; }
.pb-pill__section { padding: 7px 8px 4px; font: 700 9.5px/1 var(--pb-font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--pb-mute); }
.pb-pill__option { display: block; width: 100%; text-align: left; padding: 7px 8px; border: 0; border-radius: var(--pb-radius-sm); background: transparent; color: var(--pb-ink); font: 500 12.5px/1.2 var(--pb-font-sans); cursor: pointer; }
.pb-pill__option:hover, .pb-pill__option[aria-selected='true'] { background: var(--pb-accent-soft); color: var(--pb-accent-ink); }
.pb-pill__empty { padding: 10px 8px; color: var(--pb-mute); font-size: 12px; }

/* Body textarea on the Create page */
.pb-editor-textarea {
  flex: 1; min-height: 360px; width: 100%;
  font: var(--pb-text-mono); color: var(--pb-ink);
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius-md);
  padding: 14px 16px; resize: vertical;
  outline: 0;
}
.pb-editor-textarea:focus { border-color: var(--pb-accent); box-shadow: 0 0 0 3px var(--pb-accent-soft); }

/* Result block (paste URL panel) */
.pb-result {
  margin-top: 14px; padding: 14px 16px;
  background: var(--pb-green-soft); border: 1px solid color-mix(in oklab, var(--pb-green) 30%, transparent);
  border-radius: var(--pb-radius-md);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 13px;
}
.pb-result a { color: var(--pb-accent); font-weight: 600; }
.pb-result code { font-family: var(--pb-font-mono); }
.pb-rtok-reveal {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 2px;
}
.pb-rtok-reveal .pb-rtok-value {
  flex: 1 1 auto; min-width: 0;
  padding: 6px 10px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius-sm);
  font-family: var(--pb-font-mono);
  font-size: 12px;
  word-break: break-all;
  user-select: all;
}
.pb-rtok-reveal .pb-rtok-value[data-revealed="false"] {
  letter-spacing: 0.04em;
  color: var(--pb-dim);
}
.pb-rtok-reveal button { white-space: nowrap; }
/* Cloudflare Turnstile widget placement inside the create header.
 * data-appearance="interaction-only" keeps it invisible until a
 * challenge is needed; when it pops in it lands directly under the
 * publish button so the user sees what they need to interact with. */
.pb-create-turnstile { margin: 8px 0 0; min-height: 0; }
.pb-create-turnstile:not(:empty) { margin: 10px 0 4px; }

.pb-warn { color: var(--pb-red); font-size: 12.5px; line-height: 1.45; }
.pb-warn--orange {
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--pb-orange);
  background: var(--pb-orange-soft);
  border: 1px solid color-mix(in oklab, var(--pb-orange) 24%, transparent);
  border-left: 3px solid var(--pb-orange);
  border-radius: var(--pb-radius);
}
.pb-warn__head {
  display: flex; align-items: center; gap: 6px;
  color: var(--pb-orange);
  font: 600 12.5px/1.35 var(--pb-font-sans);
}
.pb-warn__list {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.pb-warn__list li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 7px;
  background: var(--pb-surface);
  border: 1px solid color-mix(in oklab, var(--pb-orange) 22%, var(--pb-hair));
  border-radius: 999px;
  color: var(--pb-body);
}
.pb-warn__list code {
  font: 500 11px/1.35 var(--pb-font-mono);
  color: var(--pb-orange);
}
.pb-warn__note {
  margin-top: 8px;
  color: var(--pb-dim);
  font-size: 12px;
}
.pb-policy { color: var(--pb-peri-ink); background: var(--pb-peri-soft); border-radius: var(--pb-radius); padding: 8px 12px; font-size: 12.5px; }

/* Prose page wrapper (account/feed/help/login/privacy stub bodies) */
.pb-prose {
  padding: 28px 28px 48px; max-width: 760px;
  font: var(--pb-text-body); color: var(--pb-body);
}
.pb-prose h1 { font: var(--pb-text-h1); color: var(--pb-ink); margin-bottom: 8px; letter-spacing: -.02em; }
.pb-prose h2 { font: var(--pb-text-h2); color: var(--pb-ink); margin: 22px 0 8px; }
.pb-prose h3 { font: var(--pb-text-h3); color: var(--pb-ink); margin: 16px 0 6px; }
.pb-prose p { margin: 10px 0; line-height: 1.6; }
.pb-prose ul, .pb-prose ol { margin: 10px 0 10px 22px; line-height: 1.6; }
.pb-prose code { font-family: var(--pb-font-mono); background: var(--pb-panel); padding: 1px 4px; border-radius: 4px; }
.pb-prose pre { overflow-x: auto; max-width: 100%; background: var(--pb-panel); padding: 12px 14px; border-radius: var(--pb-radius); border: 1px solid var(--pb-hair); margin: 12px 0; }
.pb-prose pre code { background: transparent; padding: 0; }
.pb-prose .pb-eyebrow { margin-bottom: 6px; }
.pb-prose hr { border: 0; border-top: 1px solid var(--pb-hair); margin: 22px 0; }

/* Translation-convenience notice on translated legal documents. */
.pb-translation-notice {
  display: block; margin: 14px 0 18px; padding: 12px 14px;
  border: 1px solid var(--pb-hair-2); border-left-width: 3px;
  border-left-color: var(--pb-accent);
  border-radius: var(--pb-radius);
  background: var(--pb-panel);
  color: var(--pb-body);
  font-size: 13px; line-height: 1.5;
}
.pb-translation-notice strong { display: block; color: var(--pb-ink); margin-bottom: 4px; font-weight: 600; }
.pb-translation-notice p { margin: 0; }

/* Compose layout */
.pb-create-page { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.pb-create-page .pb-paste-header { background: var(--pb-surface); }

/* Sidebar typography helpers */
.pb-side-h { font-size: 13.5px; font-weight: 600; color: var(--pb-ink); margin-bottom: 8px; }
.pb-side-muted { color: var(--pb-dim); font-size: 12px; line-height: 1.5; }
.pb-side-list { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.pb-side-list ul { list-style: none; margin: 0; padding: 0; }
.pb-side-list li { padding: 6px 0; border-bottom: 1px dashed var(--pb-hair); }
.pb-side-list li:last-child { border-bottom: 0; }

/* Read view enhancements for Worker SSR */
.pb-read-shiki {
  padding: 18px 28px 28px; overflow: auto; flex: 1;
}
.pb-read-shiki pre {
  margin: 0; padding: 16px; border: 1px solid var(--pb-hair-2);
  border-radius: var(--pb-radius-md); background: var(--pb-surface);
  overflow: auto;
  font: var(--pb-text-mono);
  /* Per-paste view preferences (set by pb-view-prefs as inline custom
   * properties on the <pb-paste-view> host). Falls back to sensible
   * defaults when the user hasn't tweaked anything. */
  font-family: var(--pb-paste-font-family, var(--pb-font-mono));
  font-size: var(--pb-paste-font-size, 13px);
  tab-size: var(--pb-paste-tab-size, 4);
  -moz-tab-size: var(--pb-paste-tab-size, 4);
  white-space: var(--pb-paste-soft-wrap, pre);
}
.pb-read-shiki pre.shiki { line-height: 1.55; }

/* Per-line scaffolding: Shiki emits <span class="line"> per source
 * line. We use CSS counters on those to inject line numbers via
 * ::before, and :nth-child for row striping. */
.pb-read-shiki pre.shiki code {
  display: block; counter-reset: pbline;
}
.pb-read-shiki pre.shiki .line {
  counter-increment: pbline;
  display: block;
  padding-left: 4ch;
  position: relative;
  background: transparent;
}
.pb-read-shiki pre.shiki .line::before {
  content: counter(pbline);
  display: var(--pb-paste-show-line-numbers, inline-block);
  position: absolute;
  left: 0;
  width: 3ch;
  text-align: right;
  color: var(--pb-mute);
  opacity: 0.65;
  user-select: none;
  -webkit-user-select: none;
}
.pb-read-shiki pre.shiki .line:nth-child(2n)::after {
  content: ''; display: block;
  position: absolute; inset: 0 -16px;
  background: var(--pb-paste-stripe-color, transparent);
  pointer-events: none;
  z-index: -1;
}

/* Syntax-off: keep the structural <pre>/<span class="line"> scaffolding
 * (line numbers + striping still work) but desaturate the per-token
 * colour spans Shiki emits with inline styles. */
.pb-read-shiki pre[data-no-highlight] span[style*="color"] {
  color: inherit !important;
}

/* Default theme swap — uses :root[data-theme] for the topbar global
 * toggle. The pb-paste-view scoped toggle below overrides these
 * inside its own subtree only. */
.pb-read-shiki pre.shiki.shiki-dark { display: none; }
.pb-read-shiki pre.shiki.pbca-paper-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pb-read-shiki pre.shiki.shiki-light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pb-read-shiki pre.shiki.shiki-dark  { display: block; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pb-read-shiki pre.shiki.pbca-paper-light { display: none; }
  :root:not([data-theme="light"]):not([data-theme="dark"]) .pb-read-shiki pre.shiki.pbca-paper-dark  { display: block; }
}
:root[data-theme="dark"] .pb-read-shiki pre.shiki.shiki-light { display: none; }
:root[data-theme="dark"] .pb-read-shiki pre.shiki.shiki-dark  { display: block; }
:root[data-theme="dark"] .pb-read-shiki pre.shiki.pbca-paper-light { display: none; }
:root[data-theme="dark"] .pb-read-shiki pre.shiki.pbca-paper-dark  { display: block; }

/* Per-paste theme scope: the pb-view-prefs Theme select sets
 * data-paste-theme on the <pb-paste-view> element so users can flip
 * the code box light/dark independently of the site chrome. The
 * <pre> elements are LIGHT-DOM descendants of <pb-paste-view> so the
 * selector reads `pb-paste-view[...] pre.shiki...` directly; the
 * earlier form looked for `.pb-read-shiki` inside <pb-paste-view>
 * but that's the wrapping parent, not a descendant, so the rules
 * never matched and Theme always tracked the page chrome. */
pb-paste-view[data-paste-theme="light"] pre.shiki.shiki-light { display: block !important; }
pb-paste-view[data-paste-theme="light"] pre.shiki.shiki-dark  { display: none !important; }
pb-paste-view[data-paste-theme="light"] pre.shiki.pbca-paper-light { display: block !important; }
pb-paste-view[data-paste-theme="light"] pre.shiki.pbca-paper-dark  { display: none !important; }
pb-paste-view[data-paste-theme="dark"] pre.shiki.shiki-light { display: none !important; }
pb-paste-view[data-paste-theme="dark"] pre.shiki.shiki-dark  { display: block !important; }
pb-paste-view[data-paste-theme="dark"] pre.shiki.pbca-paper-light { display: none !important; }
pb-paste-view[data-paste-theme="dark"] pre.shiki.pbca-paper-dark  { display: block !important; }

/* Read sidebar (pb-read-side) — mirrors prototype src/pages/[id].astro scoped styles */
.pb-read-side { padding: 18px 18px 14px; border-bottom: 1px solid var(--pb-hair); }
.pb-read-side:last-child { border-bottom: 0; }
.pb-read-side__eyebrow { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.pb-read-side__eyebrow-sub { color: var(--pb-mute); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 11px; }
.pb-read-side__more { margin-left: auto; color: var(--pb-accent); font-weight: 500; font-size: 11px; letter-spacing: 0; text-transform: none; }
.pb-read-side__link { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pb-ink); font-size: 12px; }
.pb-read-side__formats, .pb-read-side__chips { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.pb-read-side__meta { margin: 0; }
.pb-read-side__meta dt { font-size: 12.5px; color: var(--pb-dim); float: left; clear: left; padding: 5px 0; }
.pb-read-side__meta dd { font-size: 12.5px; color: var(--pb-ink); font-weight: 500; text-align: right; padding: 5px 0; margin: 0; }
.pb-side-url {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 10px; border: 1px solid var(--pb-hair-2); border-radius: var(--pb-radius-md);
  background: var(--pb-surface); width: 100%;
  font-size: 12px; color: var(--pb-ink);
}
.pb-side-url code { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }

/* Paste stats card (Create page sidebar) ----------------------------- */
.pb-paste-stats__grid { margin: 0; display: grid; gap: 4px; }
.pb-paste-stats__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pb-paste-stats__row dt { margin: 0; font-size: 11.5px; color: var(--pb-dim); letter-spacing: .02em; }
.pb-paste-stats__row dd { margin: 0; font-size: 13px; font-weight: 500; color: var(--pb-ink); font-variant-numeric: tabular-nums; }
.pb-paste-stats__bar {
  margin-top: 10px; height: 4px; background: var(--pb-hair);
  border-radius: 2px; overflow: hidden;
}
.pb-paste-stats__bar-fill {
  height: 100%; background: var(--pb-accent);
  transition: width .2s ease, background-color .2s ease;
}
.pb-paste-stats--warn .pb-paste-stats__bar-fill { background: var(--pb-orange); }
.pb-paste-stats--over .pb-paste-stats__bar-fill { background: var(--pb-red); }
.pb-paste-stats__limit { margin-top: 6px; font-size: 11px; }
.pb-paste-stats--over .pb-paste-stats__limit { color: var(--pb-red); }

/* Hide nav rail when shell is in anonymous-only mode */
.pb-app--anon .pb-navrail { display: none; }

/* Auth bar in top-right (legacy hook for client-side hydration) */
.auth-bar { display: inline-flex; align-items: center; gap: 6px; color: var(--pb-dim); font-size: 12px; }
.auth-bar a { color: var(--pb-ink); font-weight: 500; }

/* Account dashboard */
.pb-muted-separator { color: var(--pb-mute); }
.pb-crumb-current { color: var(--pb-ink); font-weight: 500; }
.pb-account-dashboard { max-width: 1040px; display: grid; gap: 18px; }
.pb-account-section { scroll-margin-top: 16px; padding: 18px; }
.pb-account-section__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.pb-account-section__head h2 { margin: 4px 0 0; }
.pb-account-card { padding: 16px; }
.pb-account-profile { display: flex; align-items: center; gap: 14px; }
.pb-account-profile .pb-button { margin-left: auto; }
.pb-account-avatar { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: var(--pb-accent-soft); color: var(--pb-accent); font: 700 20px/1 var(--pb-font-sans); }
.pb-account-name { font: 600 18px/1.25 var(--pb-font-sans); color: var(--pb-ink); }
.pb-account-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
.pb-account-stats .pb-card { padding: 12px; display: flex; flex-direction: column; gap: 3px; }
.pb-account-stats strong { color: var(--pb-ink); font-size: 18px; }
.pb-account-stats span { color: var(--pb-dim); font-size: 12px; }
.pb-account-form { display: grid; gap: 12px; }
.pb-account-check { display: flex; gap: 8px; align-items: center; color: var(--pb-body); font-size: 13px; }
.pb-account-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.pb-account-table-wrap { overflow: auto; }
.pb-account-table { width: 100%; border-collapse: collapse; font: var(--pb-text-ui); }
.pb-account-table th, .pb-account-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--pb-hair); vertical-align: middle; }
.pb-account-table th { color: var(--pb-dim); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pb-account-table tr:last-child td { border-bottom: 0; }
.pb-account-table code, .pb-account-flash code, .pb-account-key-card code { font-family: var(--pb-font-mono); word-break: break-all; }
.pb-account-empty { color: var(--pb-dim); text-align: center; padding: 18px 12px !important; }
.pb-account-flash { margin: 10px 0; }
.pb-account-key-card { padding: 16px; }
@media (max-width: 760px) {
  .pb-account-section__head, .pb-account-profile { align-items: flex-start; flex-direction: column; }
  .pb-account-profile .pb-button { margin-left: 0; }
  .pb-account-stats { grid-template-columns: 1fr; }
}

/* Password strength meter on Create page (Stage 3). */
.pb-pw-strength { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 11.5px; }
.pb-pw-strength__bar { flex: 1; height: 4px; background: var(--pb-hair); border-radius: 2px; overflow: hidden; max-width: 220px; }
.pb-pw-strength__fill { height: 100%; width: 0%; background: var(--pb-red); transition: width .15s ease, background-color .15s ease; }
.pb-pw-strength__fill[data-level="1"] { background: var(--pb-red); }
.pb-pw-strength__fill[data-level="2"] { background: var(--pb-orange); }
.pb-pw-strength__fill[data-level="3"] { background: var(--pb-yellow); }
.pb-pw-strength__fill[data-level="4"] { background: var(--pb-green); }
.pb-pw-strength__label { color: var(--pb-dim); font-family: var(--pb-font-mono); letter-spacing: .02em; }
.pb-pw-match { display: inline-block; margin-top: 4px; font-size: 11.5px; font-family: var(--pb-font-mono); }
.pb-pw-match[data-state="match"] { color: var(--pb-green); }
.pb-pw-match[data-state="mismatch"] { color: var(--pb-red); }

.pb-recipient-status { display: inline-block; margin-top: 4px; font-size: 11.5px; font-family: var(--pb-font-mono); }
.pb-recipient-status[data-state="ok"]   { color: var(--pb-green); }
.pb-recipient-status[data-state="warn"] { color: var(--pb-orange); }
.pb-recipient-status[data-state="bad"]  { color: var(--pb-red); }

/* ── Full lineage chain ───────────────────────────────────────────────── */
.pb-chain-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pb-chain-node { padding: 12px 14px; border: 1px solid var(--pb-hair); border-radius: var(--pb-radius-md); background: var(--pb-surface); }
.pb-chain-node--current { border-color: var(--pb-accent); box-shadow: inset 3px 0 0 var(--pb-accent); }
.pb-chain-node__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pb-chain-node__id { color: var(--pb-ink); font-weight: 600; }
.pb-chain-node__meta, .pb-chain-note { margin-top: 6px; font-size: 12px; color: var(--pb-dim); }
.pb-chain-current { color: var(--pb-accent); font-size: 12px; font-weight: 600; }

.pb-rendered {
  max-width: 76ch;
  padding: var(--pb-space-5);
  color: var(--pb-body);
  line-height: 1.65;
}
.pb-rendered > * + * { margin-top: var(--pb-space-4); }
.pb-rendered h1 { font: var(--pb-text-h1); color: var(--pb-ink); }
.pb-rendered h2 { font: var(--pb-text-h2); color: var(--pb-ink); }
.pb-rendered h3,
.pb-rendered h4,
.pb-rendered h5,
.pb-rendered h6 { font: var(--pb-text-h3); color: var(--pb-ink); }
.pb-rendered ul,
.pb-rendered ol { padding-left: var(--pb-space-5); }
.pb-rendered blockquote { margin-left: 0; padding-left: var(--pb-space-4); border-left: 3px solid var(--pb-peri); color: var(--pb-dim); }
.pb-rendered pre,
.pb-rendered code { font-family: var(--pb-font-mono); }
.pb-rendered pre { overflow:auto; padding: var(--pb-space-4); background: var(--pb-panel); border-radius: var(--pb-radius); }
.pb-rendered :not(pre) > code { padding: 1px 4px; background: var(--pb-panel); border-radius: var(--pb-radius-sm); }
.pb-rendered table { border-collapse: collapse; width: 100%; }
.pb-rendered th,
.pb-rendered td { border: 1px solid var(--pb-hair-2); padding: 6px 8px; }