/* ==========================================================================
   DEEP TRUTH GUIDES — Monochrome Terminal Aesthetic
   Dark mode only. No color. Just light on darkness.
   ========================================================================== */

:root {
  --bg:           #0a0a0a;
  --bg-elev:      #111111;
  --bg-code:      #0d0d0d;
  --fg:           #e8e8e8;
  --fg-dim:       #a0a0a0;
  --fg-faint:     #6a6a6a;
  --border:       #262626;
  --border-soft:  #1a1a1a;
  --accent:       #f5f5f5;
  --selection:    #2a2a2a;

  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;

  --content-width: 760px;
  --wide-width:    900px;
}

/* ---------- Reset ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

::selection {
  background: var(--selection);
  color: var(--fg);
}

/* ---------- CRT / Scanlines Atmosphere ---------- */
.crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(ellipse at center, transparent 0%, transparent 60%, rgba(0,0,0,0.35) 100%);
}

.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.00) 0px,
    rgba(255,255,255,0.00) 2px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.00) 4px
  );
  mix-blend-mode: overlay;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  line-height: 1;
}

.site-title {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
  transition: opacity 0.2s;
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.site-title:hover {
  opacity: 0.7;
}

.site-title .prompt {
  color: var(--fg-dim);
  margin-right: 6px;
}

.site-title .site-subtitle {
  color: var(--fg-faint);
  font-weight: 300;
  margin-left: 10px;
  letter-spacing: 0.08em;
  font-size: 11px;
}

@media (max-width: 540px) {
  .site-title .site-subtitle {
    display: none;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

.site-nav > *:not([hidden]) {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.site-nav > [hidden] { display: none !important; }

.site-nav a {
  color: var(--fg-dim);
  text-decoration: none;
  transition: color 0.15s;
}

.site-nav a:hover {
  color: var(--fg);
}

.site-nav .nav-user {
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
}

.site-nav .nav-logout,
.site-nav .nav-login {
  background: transparent;
  border: none;
  color: var(--fg-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0;
}
.site-nav .nav-logout:hover,
.site-nav .nav-login:hover {
  color: var(--fg);
}

@media (max-width: 540px) {
  .site-nav {
    gap: 14px;
    font-size: 11px;
  }
}

/* ---------- Auth gate variant ---------- */

.gate-form-auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 320px;
}
.gate-form-auth .gate-label {
  font-size: 10px;
  letter-spacing: 0.15em;
}
.gate-form-auth .gate-btn {
  margin-top: 6px;
}
.gate-form-auth .gate-input {
  flex: 0 0 auto;
  width: 100%;
}
.gate-form-auth .gate-textarea {
  height: auto;
}
.gate-help {
  margin-top: 16px;
  color: var(--fg-dim);
  font-size: 12px;
  font-family: var(--font-mono);
  line-height: 1.6;
}

/* ---------- Most-read list ---------- */

.top-guides {
  list-style: none;
  padding: 0;
  margin: 0;
}
.top-guides li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: 13px;
}
.top-guides li:last-child {
  border-bottom: none;
}
.top-guides .top-guides-empty {
  color: var(--fg-dim);
  border-bottom: none;
  font-style: italic;
}
.top-guides .engagement-num {
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  min-width: 3ch;
  text-align: right;
}

/* ---------- Per-guide engagement number ---------- */

.engagement-number {
  margin: 64px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}

/* ---------- Main content ---------- */
.content-wrap {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 64px 32px 96px;
}

.content {
  max-width: var(--content-width);
  margin: 0 auto;
}

/* Typography — headings */
.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: balance;
}

.content h1 {
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.6em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.4em;
}

.content h1:first-child {
  margin-top: 0.2em;
}

.content h2 {
  font-size: 1.5rem;
  margin: 3em 0 0.6em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--fg);
  font-weight: 600;
}

.content h2::before {
  content: "// ";
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-weight: 400;
}

.content h3 {
  font-size: 1.15rem;
  margin: 2.4em 0 0.5em;
  font-weight: 600;
  color: var(--fg);
  letter-spacing: 0;
}

.content h4 {
  font-size: 1rem;
  margin: 2em 0 0.5em;
  font-weight: 600;
  color: var(--fg-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Paragraphs and inline */
.content p {
  margin: 0 0 1.15em;
  color: var(--fg);
  font-size: 1.02rem;
  line-height: 1.75;
}

.content p + p {
  margin-top: 0;
}

.content a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--fg-faint);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s;
}

.content a:hover {
  text-decoration-color: var(--fg);
}

.content strong, .content b {
  font-weight: 700;
  color: var(--accent);
}

.content em, .content i {
  font-style: italic;
  color: var(--fg-dim);
}

/* Horizontal rules */
.content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 3em auto;
  width: 100%;
  max-width: 300px;
  position: relative;
}

.content hr::after {
  content: "◆";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  padding: 0 12px;
  color: var(--fg-faint);
  font-size: 10px;
}

/* Lists */
.content ul, .content ol {
  margin: 0 0 1.2em 0;
  padding-left: 1.6em;
}

.content li {
  margin: 0.35em 0;
  line-height: 1.7;
}

.content ul li::marker {
  color: var(--fg-faint);
  content: "▪ ";
}

/* Blockquotes */
.content blockquote {
  margin: 1.6em 0;
  padding: 0.2em 0 0.2em 1.5em;
  border-left: 2px solid var(--border);
  color: var(--fg-dim);
  font-style: italic;
}

/* ---------- Code & ASCII art ---------- */
.content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-code);
  color: var(--fg);
  padding: 0.12em 0.45em;
  border: 1px solid var(--border-soft);
  border-radius: 2px;
}

.content pre {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.45;
  background: var(--bg-code);
  color: var(--fg);
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-faint);
  padding: 20px 24px;
  margin: 1.8em 0;
  overflow-x: auto;
  white-space: pre;
  tab-size: 4;
  position: relative;
  border-radius: 2px;

  /* Allow ASCII diagrams to break the content column when wider */
  max-width: 100%;
  width: fit-content;
  min-width: 100%;
}

.content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: var(--fg);
  white-space: pre;
}

/* When a pre/code block is wider than the content column, let it overflow the column */
.content .highlight,
.content .highlighter-rouge {
  margin: 1.8em -2rem;
}

.content .highlight pre,
.content .highlighter-rouge pre {
  margin: 0;
  border-radius: 0;
}

@media (min-width: 900px) {
  .content .highlight,
  .content .highlighter-rouge {
    margin-left: calc(-1 * (var(--wide-width) - var(--content-width)) / 2);
    margin-right: calc(-1 * (var(--wide-width) - var(--content-width)) / 2);
  }
}

/* ---------- Tables ---------- */
.content table {
  width: 100%;
  margin: 1.8em 0;
  border-collapse: collapse;
  font-size: 0.92rem;
  font-family: var(--font-sans);
}

.content thead {
  border-bottom: 1px solid var(--border);
}

.content th {
  text-align: left;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  font-family: var(--font-mono);
}

.content td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-soft);
  color: var(--fg);
  vertical-align: top;
  line-height: 1.55;
}

.content tr:last-child td {
  border-bottom: 0;
}

.content tbody tr:hover {
  background: var(--bg-elev);
}

/* ---------- Index page list ---------- */
.content ul.guide-list,
.content > ul:has(> li > a[href$=".md"]) {
  list-style: none;
  padding: 0;
  margin: 2em 0;
}

/* ---------- Access gate ---------- */
.gate {
  margin: 2.4em 0 3em;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-faint);
  background: var(--bg-code);
  font-family: var(--font-mono);
  border-radius: 2px;
  transition: opacity 0.4s ease;
}

.gate.gate-unlocked {
  opacity: 0.35;
  border-left-color: var(--border);
}

.gate-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.gate-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--fg-dim);
  text-transform: uppercase;
}

.gate-input {
  flex: 1 1 180px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  outline: none;
  transition: border-color 0.15s;
}

.gate-input::placeholder {
  color: var(--fg-faint);
  letter-spacing: 0.12em;
}

.gate-input:focus {
  border-color: var(--fg-dim);
}

.gate-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg-faint);
  border-radius: 2px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.gate-btn:hover {
  border-color: var(--fg);
  background: var(--bg-elev);
}

.gate-msg {
  flex-basis: 100%;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  min-height: 14px;
  margin-top: 4px;
}

.guides-gated {
  display: none;
}

.guides-open {
  animation: guides-fade-in 0.5s ease;
}

@keyframes guides-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* noscript fallback: if JS is off, reveal the guides so the page still works */
.no-js .guides-gated {
  display: block;
}
.no-js .gate {
  display: none;
}

/* ---------- Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 64px;
  padding: 24px 0;
}

.footer-inner {
  max-width: var(--wide-width);
  margin: 0 auto;
  padding: 0 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.05em;
  text-align: center;
}

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  body {
    font-size: 17px;
    line-height: 1.72;
  }
  .content-wrap {
    padding: 32px 20px 72px;
  }
  .header-inner {
    padding: 12px 18px;
    gap: 12px;
  }
  .content {
    max-width: 100%;
  }
  .content h1 {
    font-size: 1.55rem;
    line-height: 1.2;
    padding-bottom: 0.35em;
    margin-bottom: 0.7em;
  }
  .content h2 {
    font-size: 1.2rem;
    margin: 2.2em 0 0.5em;
  }
  .content h3 {
    font-size: 1.05rem;
    margin: 1.8em 0 0.4em;
  }
  .content p {
    font-size: 1rem;
    line-height: 1.72;
    margin-bottom: 1.05em;
  }
  .content ul, .content ol {
    padding-left: 1.25em;
  }
  .content li {
    line-height: 1.65;
  }
  .content blockquote {
    padding-left: 1em;
    margin: 1.3em 0;
  }
  .content pre {
    font-size: 0.74rem;
    line-height: 1.5;
    padding: 14px 16px;
  }
  .content .highlight,
  .content .highlighter-rouge {
    margin-left: -20px;
    margin-right: -20px;
  }
  .content table {
    font-size: 0.88rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .content th, .content td {
    padding: 10px 12px;
  }
}

/* Very small screens: single-column, tighter but still readable. */
@media (max-width: 420px) {
  .content-wrap {
    padding: 24px 16px 64px;
  }
  .header-inner {
    padding: 10px 14px;
  }
  .site-title {
    font-size: 12px;
  }
  .content h1 { font-size: 1.4rem; }
  .content h2 { font-size: 1.1rem; }
  .content h3 { font-size: 1rem; }
  .content p  { font-size: 0.98rem; }
}

/* Standalone / home-screen app: drop the sticky blur to save paint, honor safe areas. */
@media (display-mode: standalone) {
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }
  .content-wrap {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
  }
  .site-footer {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* ==========================================================================
   PWA surface: install button + update modal.
   Monochrome, mono, quiet. Matches the terminal aesthetic.
   ========================================================================== */

.nav-install-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--fg-dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 6px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.nav-install-btn:hover,
.nav-install-btn:focus-visible {
  color: var(--fg);
  border-color: var(--fg-faint);
  background: var(--bg-elev);
  outline: none;
}

.nav-install-glyph {
  display: inline-block;
  transform: translateY(-1px);
  font-size: 12px;
  line-height: 1;
}

@media (max-width: 480px) {
  .nav-install-label {
    display: none;
  }
  .nav-install-btn {
    padding: 6px 9px;
  }
  .nav-install-glyph {
    font-size: 13px;
  }
}

/* ---------- Modal ---------- */
.pwa-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.pwa-modal.is-open {
  display: flex;
  animation: pwa-fade-in 0.24s ease-out;
}

@keyframes pwa-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pwa-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-faint);
  border-radius: 2px;
  padding: 22px 24px 18px;
  font-family: var(--font-sans);
  animation: pwa-rise 0.24s ease-out;
}

@keyframes pwa-rise {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pwa-modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 8px;
}

.pwa-modal-body {
  color: var(--fg);
  font-size: 0.98rem;
  line-height: 1.55;
  margin: 0 0 16px;
}

.pwa-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pwa-btn {
  background: transparent;
  color: var(--fg);
  border: 1px solid var(--fg-faint);
  border-radius: 2px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.pwa-btn:hover,
.pwa-btn:focus-visible {
  border-color: var(--fg);
  background: var(--bg);
  outline: none;
}

.pwa-btn-ghost {
  border-color: var(--border);
  color: var(--fg-dim);
}

.pwa-btn-ghost:hover,
.pwa-btn-ghost:focus-visible {
  color: var(--fg);
  border-color: var(--fg-faint);
  background: transparent;
}

@media (min-width: 640px) {
  .pwa-modal {
    align-items: center;
  }
}

/* ---------- Login modal ---------- */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pwa-fade-in 0.18s ease-out;
  overflow-y: auto;
}

.login-modal[hidden] { display: none; }

body.login-modal-open { overflow: hidden; }

.login-modal-card {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-faint);
  border-radius: 2px;
  padding: 28px 28px 22px;
  font-family: var(--font-sans);
  animation: pwa-rise 0.22s ease-out;
  margin: auto;
}

.login-modal-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin-bottom: 14px;
}

.login-modal-close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: transparent;
  border: none;
  color: var(--fg-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 10px;
}
.login-modal-close:hover { color: var(--fg); }

.login-modal .gate-form-auth {
  max-width: none;
}

/* ---------- Page-locked + library-locked notice ---------- */
.page-locked,
.library-locked-hint {
  border: 1px solid var(--border);
  border-left: 2px solid var(--fg-faint);
  padding: 24px 28px 22px;
  margin: 32px 0;
  background: var(--bg-elev);
}
.page-locked { text-align: center; }
.page-locked[hidden],
.library-locked-hint[hidden] { display: none; }
.page-locked-msg {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.12em;
  text-transform: lowercase;
  margin: 0 0 14px;
}
.library-locked-msg {
  font-family: var(--font-sans);
  font-size: 0.98rem;
  line-height: 1.7;
  color: var(--fg);
  margin: 0;
}

/* Highlighted inline link inside gate prose. */
.gate-link {
  color: var(--fg);
  border-bottom: 1px solid var(--fg-faint);
  text-decoration: none;
  padding: 0 2px;
  transition: border-color 0.15s, color 0.15s;
  cursor: pointer;
}
.gate-link:hover,
.gate-link:focus-visible {
  color: var(--fg);
  border-bottom-color: var(--fg);
  outline: none;
}
.gate-link-faint {
  color: var(--fg-dim);
  border-bottom-color: transparent;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
.gate-link-faint:hover,
.gate-link-faint:focus-visible {
  color: var(--fg-dim);
  border-bottom-color: var(--fg-faint);
}

.gate-link-tiny {
  color: var(--fg-faint);
  border-bottom-color: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  padding: 0;
}
.gate-link-tiny:hover,
.gate-link-tiny:focus-visible {
  color: var(--fg-dim);
  border-bottom-color: var(--fg-faint);
}

.gate-forgot {
  margin: 22px 0 0;
  text-align: center;
}
.gate-forgot[hidden] { display: none; }

/* Request-form widgets. */
.gate-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 4px;
}
.gate-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  letter-spacing: 0.08em;
  cursor: pointer;
}
.gate-tag input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  border: 1px solid var(--fg-faint);
  background: transparent;
  cursor: pointer;
  display: inline-block;
}
.gate-tag input[type="checkbox"]:checked {
  background: var(--fg-dim);
  border-color: var(--fg);
}
.gate-tag:hover { color: var(--fg); }
.gate-textarea {
  resize: vertical;
  min-height: 38px;
  max-height: 160px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.gate-input-pin {
  letter-spacing: 0.18em;
  overflow-wrap: anywhere;
  word-break: break-all;
}

/* Plain library list (raw HTML inside gated div). */
.library-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 8px;
}
.library-list li {
  margin: 0;
  padding: 4px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: nowrap;
  border-bottom: 1px solid rgba(120, 118, 111, 0.10);
  line-height: 1.25;
}
.library-list li > a {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.library-date {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.03em;
  opacity: 0.4;
  flex: 0 0 38px;
  text-align: right;
  position: relative;
  top: -0.5em;
}
.library-stat {
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  opacity: 0.55;
  flex: 0 0 auto;
  margin-left: auto;
  white-space: nowrap;
}
.library-note {
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 12px;
  margin: 16px 0 0;
}

/* Tease state: section is visible but its rows are faded and clicks are
   intercepted (logged-out members or member-tier preview of featured). */
.library-tease {
  position: relative;
}
.library-tease .library-list li {
  cursor: pointer;
}
.library-tease .library-list li > a {
  opacity: 0.4;
  pointer-events: none;
}
.library-tease .library-list li > .library-date,
.library-tease .library-list li > .library-stat {
  opacity: 0.25;
}
.library-tease .library-list li:hover > a {
  opacity: 0.6;
}

/* Coming-soon toast (member-tier preview of featured/business). */
.library-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translate(-50%, 12px);
  background: rgba(10, 10, 10, 0.92);
  border: 1px solid rgba(120, 118, 111, 0.35);
  color: var(--fg, #d8d4c8);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 10px 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
  max-width: 90vw;
  text-align: center;
}
.library-toast-show {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* writings page header + overall rank line */
.writings-header {
  margin: 0 0 12px;
}

/* line/gallery view toggle */
.writings-view-toggle {
  display: flex;
  gap: 0;
  margin: 8px 0 16px;
  font-family: var(--font-mono);
}
.writings-view-toggle .wv-btn {
  background: transparent;
  border: 1px solid rgba(120, 118, 111, 0.18);
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  cursor: pointer;
  text-transform: lowercase;
}
.writings-view-toggle .wv-btn[aria-pressed="true"] {
  color: var(--fg);
  border-color: rgba(120, 118, 111, 0.55);
  background: rgba(255, 255, 255, 0.02);
}
.writings-view-toggle .wv-btn:not(:first-child) {
  border-left: none;
}
.writings-view-toggle .wv-btn:hover { color: var(--fg-dim); }

/* Hide cover by default; line view (the default) shows date/title/stat. */
.library-cover { display: none; }
.library-link { display: contents; }
.library-title { display: inline; }

/* Gallery view: the entire library_list root carries data-view=gallery and
   we restyle every list inside the writings page that matches. */
body[data-library-view="gallery"] .library-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
body[data-library-view="gallery"] .library-list li.library-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-bottom: none;
  padding: 0;
  gap: 6px;
}
body[data-library-view="gallery"] .library-list li.library-item > .library-date,
body[data-library-view="gallery"] .library-list li.library-item > .library-stat {
  display: none;
}
body[data-library-view="gallery"] .library-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
}
body[data-library-view="gallery"] .library-cover {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background: #0a0a0a;
  border: 1px solid rgba(120, 118, 111, 0.18);
}
body[data-library-view="gallery"] .library-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--fg-dim);
  line-height: 1.3;
  text-align: left;
  display: block;
  white-space: normal;
}
@media (max-width: 640px) {
  body[data-library-view="gallery"] .library-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  body[data-library-view="gallery"] .library-title {
    font-size: 9px;
  }
}
.writings-h2 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  text-transform: lowercase;
  font-weight: 400;
  margin: 28px 0 8px;
}
.writings-overall {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  margin: 0 0 18px;
}
.writings-overall-rank {
  color: var(--fg-dim);
  letter-spacing: 0.04em;
}
.writings-overall-meta {
  color: var(--fg-faint);
}
.writings-hint-btn {
  background: transparent;
  border: 1px solid var(--fg-faint);
  color: var(--fg-faint);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.writings-hint-btn:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

/* ranks hint modal: quiet card */
.ranks-hint {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 200;
  padding: 24px;
  overflow-y: auto;
}
.ranks-hint[hidden] { display: none !important; }
.ranks-hint-card {
  background: var(--bg);
  border: 1px solid var(--fg-faint);
  padding: 22px 24px 20px;
  max-width: 360px;
  width: 100%;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg);
  position: relative;
  margin: auto;
}
.ranks-hint-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: 0;
  color: var(--fg-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
}
.ranks-hint-close:hover { color: var(--fg); }
.ranks-hint-title {
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  font-weight: 400;
  margin: 0 0 8px;
}
.ranks-hint-title-sub { margin-top: 16px; }
.ranks-hint-lead {
  color: var(--fg-faint);
  font-size: 11px;
  margin: 0 0 12px;
  line-height: 1.5;
}
.ranks-hint-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.ranks-hint-table th {
  text-align: left;
  color: var(--fg-faint);
  font-weight: 400;
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--fg-faint);
  letter-spacing: 0.04em;
}
.ranks-hint-table td {
  padding: 4px 8px 4px 0;
  color: var(--fg-dim);
  border-bottom: 1px dotted rgba(255,255,255,0.05);
}
.ranks-hint-table td:last-child { color: var(--fg-faint); text-align: right; }

/* ---------- Rouge syntax highlighter fallback (monochrome) ---------- */
.highlight .c, .highlight .c1, .highlight .cm, .highlight .cs { color: var(--fg-faint); font-style: italic; }
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt { color: var(--fg); font-weight: 600; }
.highlight .s, .highlight .s1, .highlight .s2 { color: var(--fg-dim); }
.highlight .n, .highlight .nf, .highlight .nv, .highlight .na { color: var(--fg); }
.highlight .o, .highlight .p { color: var(--fg-dim); }
.highlight .mi, .highlight .mf { color: var(--fg); }

/* ==========================================================================
   Distribution surface
   Austere. Quiet. The mark, the walk-in, the pulse.
   ========================================================================== */

/* The share mark appears during an active text selection.
   One glyph "//" in mono, off-white on near-black. No border, no hover shimmer. */
.ew-share-mark {
  position: absolute;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 34px;
  height: 28px;
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--fg-dim);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.ew-share-mark:hover {
  color: var(--fg);
  border-color: var(--fg-faint);
}
.ew-share-mark:active {
  background: var(--selection);
}
.ew-share-mark--flash {
  color: var(--fg);
  border-color: var(--fg);
}

/* The walk-in: when a reader arrives via a shared highlight, surrounding
   paragraphs fade in outward from the matched passage. */
.ew-dim {
  opacity: 0.08;
  transition: opacity 420ms ease;
}
.content p,
.content blockquote,
.content h1, .content h2, .content h3, .content h4, .content h5, .content h6,
.content li,
.content pre {
  transition: opacity 420ms ease;
}

/* The matched passage pulses briefly on arrival. Barely. */
@keyframes ew-pulse-fade {
  0%   { background-color: rgba(245, 245, 245, 0.00); }
  30%  { background-color: rgba(245, 245, 245, 0.06); }
  100% { background-color: rgba(245, 245, 245, 0.00); }
}
.ew-pulse {
  animation: ew-pulse-fade 1400ms ease-out;
  border-radius: 2px;
}

/* Browser-native text fragment highlight: keep it quiet, not yellow. */
::target-text {
  background: rgba(245, 245, 245, 0.10);
  color: var(--fg);
}

/* Respect reduced-motion users. */
@media (prefers-reduced-motion: reduce) {
  .ew-dim { opacity: 1; transition: none; }
  .ew-pulse { animation: none; }
  .content * { transition: none !important; }
}

/* ---------------------------------------------------------------------------
   Arc next-link.
   A single // glyph at the foot of each guide. No label. No preview. The next
   guide is curated by the author, not suggested by an algorithm. Clicking is
   the act of continuing the arc. Not clicking ends it.
   --------------------------------------------------------------------------- */
.arc-next {
  max-width: 760px;
  margin: 96px auto 120px;
  text-align: center;
}
.arc-next a {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  letter-spacing: 0.06em;
  color: #78766f;
  text-decoration: none;
  padding: 14px 22px;
  border-top: 1px solid rgba(120, 118, 111, 0.18);
  border-bottom: 1px solid rgba(120, 118, 111, 0.18);
  transition: color 240ms ease, border-color 240ms ease, letter-spacing 420ms ease;
}
.arc-next a:hover,
.arc-next a:focus-visible {
  color: #e8e4dc;
  border-color: rgba(232, 228, 220, 0.4);
  letter-spacing: 0.12em;
  outline: none;
}
@media (prefers-reduced-motion: reduce) {
  .arc-next a { transition: none; }
  .arc-next a:hover,
  .arc-next a:focus-visible { letter-spacing: 0.06em; }
}

/* ---------- Cover image at top of writings ---------- */
.guide-cover {
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  justify-content: center;
}
.guide-cover-img {
  display: block;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid rgba(120, 118, 111, 0.18);
  background: #0a0a0a;
}
@media (max-width: 640px) {
  .guide-cover { margin: 0 0 28px; }
  .guide-cover-img { max-width: 100%; }
}

/* ---------- Inline audio player + offline save ---------- */
.guide-audio,
.guide-offline {
  margin: 0 0 48px;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(120, 118, 111, 0.14);
}
.guide-offline-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 6px 0;
  font-family: 'JetBrains Mono', monospace;
}
.guide-offline-bar .gap-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #5a5852;
  text-transform: lowercase;
}
.guide-audio-player {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  border: 1px solid rgba(120, 118, 111, 0.22);
  border-radius: 2px;
  background: rgba(18, 17, 15, 0.55);
  font-family: 'JetBrains Mono', monospace;
  user-select: none;
}
.guide-audio-player .gap-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232, 228, 220, 0.28);
  background: transparent;
  color: #e8e4dc;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}
.guide-audio-player .gap-play:hover,
.guide-audio-player .gap-play:focus-visible {
  border-color: rgba(232, 228, 220, 0.55);
  background: rgba(232, 228, 220, 0.06);
  outline: none;
}
.guide-audio-player .gap-play:active { transform: scale(0.96); }

.guide-audio-player .gap-back,
.guide-audio-player .gap-fwd {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232, 228, 220, 0.18);
  background: transparent;
  color: #cfcbc3;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}
.guide-audio-player .gap-back:hover,
.guide-audio-player .gap-back:focus-visible,
.guide-audio-player .gap-fwd:hover,
.guide-audio-player .gap-fwd:focus-visible {
  border-color: rgba(232, 228, 220, 0.45);
  color: #e8e4dc;
  background: rgba(232, 228, 220, 0.05);
  outline: none;
}
.guide-audio-player .gap-back:active,
.guide-audio-player .gap-fwd:active { transform: scale(0.94); }
.guide-audio-player .gap-skip-glyph {
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Proper play triangle rendered as a bordered CSS shape.
   Sized large enough inside the 34px button to read as a triangle,
   not a dot, at phone DPI. */
.guide-audio-player .gap-glyph {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 11px solid currentColor;
  margin-left: 3px;
}
.guide-audio-player.is-playing .gap-glyph {
  width: 10px;
  height: 12px;
  border: 0;
  margin-left: 0;
  background:
    linear-gradient(currentColor, currentColor) left/3px 100% no-repeat,
    linear-gradient(currentColor, currentColor) right/3px 100% no-repeat;
}

.guide-audio-player .gap-track {
  flex: 1 1 auto;
  position: relative;
  height: 6px;
  border-radius: 2px;
  background: rgba(120, 118, 111, 0.2);
  cursor: pointer;
  overflow: hidden;
  min-width: 80px;
}
.guide-audio-player .gap-track:focus-visible {
  outline: 1px solid rgba(232, 228, 220, 0.45);
  outline-offset: 2px;
}
.guide-audio-player .gap-buffer,
.guide-audio-player .gap-fill {
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: 0%;
  pointer-events: none;
}
.guide-audio-player .gap-buffer {
  background: rgba(232, 228, 220, 0.12);
}
.guide-audio-player .gap-fill {
  background: rgba(232, 228, 220, 0.78);
}

.guide-audio-player .gap-time {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #78766f;
  font-variant-numeric: tabular-nums;
}
.guide-audio-player .gap-label {
  flex: 0 0 auto;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #5a5852;
  text-transform: lowercase;
}

.gap-save {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: lowercase;
  color: #78766f;
  background: transparent;
  border: 1px solid rgba(120, 118, 111, 0.35);
  border-radius: 2px;
  padding: 5px 9px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.gap-save:hover,
.gap-save:focus-visible {
  color: #e8e4dc;
  border-color: rgba(232, 228, 220, 0.55);
  background: rgba(232, 228, 220, 0.04);
  outline: none;
}
.gap-save[data-state="saving"] {
  color: #a8a49c;
  border-color: rgba(232, 228, 220, 0.35);
  cursor: default;
}
.gap-save[data-state="saved"] {
  color: #e8e4dc;
  border-color: rgba(232, 228, 220, 0.6);
}
.gap-save-glyph {
  font-size: 11px;
  line-height: 1;
  display: inline-block;
  width: 10px;
  text-align: center;
}

@media (max-width: 520px) {
  .guide-audio-player { gap: 10px; padding: 8px 10px; }
  .guide-audio-player .gap-label { display: none; }
  .guide-audio-player .gap-time { font-size: 10px; }
  .gap-save-text { display: none; }
  .gap-save { padding: 6px 8px; }
}

/* ---- Admin + profile pages ----------------------------------------- */

.admin-shell, .admin-locked {
  max-width: 920px;
  margin: 0 auto;
  padding: 32px 0 80px;
  font-family: var(--font-mono);
  color: var(--fg);
}

.admin-locked .admin-empty {
  color: var(--fg-faint);
  text-align: center;
  font-size: 12px;
  padding: 60px 0;
}

.admin-h1 {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 0 0 24px;
}

.admin-h2 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  margin: 32px 0 12px;
  font-weight: normal;
}

.admin-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid rgba(120, 118, 111, 0.22);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-tab {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  background: transparent;
  border: 0;
  padding: 10px 14px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
}

.admin-tab:hover {
  color: var(--fg-dim);
}

.admin-tab.is-active {
  color: var(--fg);
  border-bottom-color: var(--fg-dim);
}

.admin-tab-panel { padding: 8px 0; }

.admin-toolbar {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.admin-search {
  flex: 1;
  min-width: 200px;
  background: rgba(18, 17, 15, 0.55);
  border: 1px solid rgba(120, 118, 111, 0.35);
  border-radius: 2px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
}
.admin-search:focus {
  border-color: rgba(232, 228, 220, 0.55);
}

.admin-count {
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.08em;
}

.admin-table-wrap { overflow-x: auto; }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.admin-table th {
  text-align: left;
  font-weight: normal;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
  border-bottom: 1px solid rgba(120, 118, 111, 0.22);
  padding: 8px 10px;
}

.admin-table td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(120, 118, 111, 0.10);
  vertical-align: top;
  color: var(--fg);
}

.admin-table .admin-note {
  max-width: 280px;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--fg-dim);
  font-size: 11px;
}

.admin-empty {
  color: var(--fg-faint);
  font-size: 11px;
  letter-spacing: 0.05em;
  padding: 12px 0;
}

.admin-btn {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  background: transparent;
  border: 1px solid rgba(120, 118, 111, 0.35);
  border-radius: 2px;
  padding: 6px 12px;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.admin-btn:hover, .admin-btn:focus-visible {
  color: var(--fg);
  border-color: rgba(232, 228, 220, 0.55);
  background: rgba(232, 228, 220, 0.04);
  outline: none;
}
.admin-btn[disabled] {
  color: var(--fg-faint);
  border-color: rgba(120, 118, 111, 0.18);
  cursor: not-allowed;
}
.admin-btn-grant { color: var(--fg); border-color: rgba(232, 228, 220, 0.45); }
.admin-btn-revoke { color: var(--fg-faint); }
.admin-btn-danger {
  color: #d8b9b0;
  border-color: rgba(216, 185, 176, 0.45);
}
.admin-btn-danger:hover {
  color: #f0d0c5;
  border-color: rgba(216, 185, 176, 0.75);
  background: rgba(216, 185, 176, 0.06);
}
.admin-btn-ghost {
  color: var(--fg-faint);
  border-color: transparent;
}

/* filters row */
.admin-toolbar-filters {
  margin-top: -8px;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.admin-filter-label {
  color: var(--fg-faint);
  letter-spacing: 0.1em;
}
.admin-filter {
  background: transparent;
  border: 1px solid rgba(120, 118, 111, 0.25);
  color: var(--fg-faint);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
  border-radius: 2px;
}
.admin-filter:hover { color: var(--fg-dim); border-color: rgba(232, 228, 220, 0.35); }
.admin-filter.is-active {
  color: var(--fg);
  border-color: rgba(232, 228, 220, 0.55);
  background: rgba(232, 228, 220, 0.04);
}

/* bulk action bar above the table */
.admin-bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 0 0 10px;
  border: 1px dashed rgba(232, 228, 220, 0.35);
  border-radius: 2px;
  background: rgba(232, 228, 220, 0.02);
  flex-wrap: wrap;
}
.admin-bulk-count {
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  margin-right: auto;
}

/* per-row action group + checkbox column */
.admin-th-check { width: 32px; }
.admin-row-check { cursor: pointer; }
.admin-row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
}

/* status dot for forgot-PIN */
.admin-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.admin-dot-warn {
  background: #88c47a;
  box-shadow: 0 0 6px rgba(136, 196, 122, 0.5);
}

.admin-status-pending {
  color: #d4a259;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.admin-status-approved {
  color: #88c47a;
  letter-spacing: 0.04em;
}
.admin-status-admin {
  color: var(--fg);
  letter-spacing: 0.04em;
}
.admin-cell-email {
  font-size: 11px;
  color: var(--fg-dim);
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-help {
  font-size: 11px !important;
  color: var(--fg-faint);
  margin: -8px 0 14px;
}

.admin-vis-toggle {
  cursor: pointer;
  width: 14px;
  height: 14px;
}
.admin-vis-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.admin-vis-public { color: var(--fg); }
.admin-vis-member { color: var(--fg-dim); }
.admin-vis-private { color: var(--fg-faint); }

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  background: rgba(120, 118, 111, 0.18);
  border: 1px solid rgba(120, 118, 111, 0.18);
  margin-bottom: 16px;
}

.admin-stat {
  background: var(--bg);
  padding: 14px 16px;
}

.admin-stat-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  margin-bottom: 6px;
}

.admin-stat-num {
  font-size: 20px;
  color: var(--fg);
}
.admin-stat-small { font-size: 12px; color: var(--fg-dim); }

.admin-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
  font-size: 12px;
}
.admin-profile-grid .admin-stat-label {
  display: block;
  margin-bottom: 4px;
}

/* admin audio panel reuse: rows + log */
.admin-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.admin-row label {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--fg-faint);
}
.admin-row input,
.admin-row select {
  background: rgba(18, 17, 15, 0.55);
  border: 1px solid rgba(120, 118, 111, 0.35);
  border-radius: 2px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
}
.admin-row input:focus, .admin-row select:focus {
  border-color: rgba(232, 228, 220, 0.55);
}
.admin-actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.admin-checkbox-row { flex-direction: row; align-items: center; gap: 10px; }
.admin-checkbox-row label { margin: 0; }
.admin-log {
  margin-top: 24px;
  padding: 12px 14px;
  border: 1px solid rgba(120, 118, 111, 0.22);
  border-radius: 2px;
  background: rgba(18, 17, 15, 0.55);
  color: var(--fg-dim);
  font-size: 12px;
  line-height: 1.6;
  min-height: 80px;
  white-space: pre-wrap;
}

/* profile-specific */
.profile-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
}
.profile-name {
  font-size: 22px;
  letter-spacing: 0.06em;
  color: var(--fg);
}
.profile-rank {
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--fg-dim);
}
.profile-bar {
  height: 4px;
  background: rgba(120, 118, 111, 0.18);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 4px;
}
.profile-bar-fill {
  height: 100%;
  background: var(--fg-dim);
  transition: width 400ms ease;
}
.profile-bar-caption {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  margin-bottom: 16px;
}
/* Live session badge: shows in profile-bar-caption + per-row when a
   writing page is open in another tab and time is accumulating. */
.profile-live {
  color: var(--fg, #d8d4c8);
  opacity: 0.85;
  margin-left: 4px;
}
.profile-row-live td {
  background: rgba(216, 212, 200, 0.04);
  position: relative;
}
.profile-row-live td:first-child::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--fg-dim);
  animation: profile-live-pulse 1.4s ease-in-out infinite;
}
@keyframes profile-live-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* per-guide top-of-page time marker */
.guide-time-marker {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  margin: 8px 0 28px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(120, 118, 111, 0.22);
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.4;
}
.guide-time-marker .gtm-total {
  font-size: 11px;
}
.guide-time-marker .gtm-split {
  font-size: 10px;
  opacity: 0.7;
}
.guide-time-marker .gtm-debug {
  font-size: 9px;
  opacity: 0.55;
  color: var(--accent-warn, #c89c4a);
  word-break: break-all;
}
.guide-time-marker.gtm-bump .gtm-total {
  animation: gtm-bump-pulse 0.7s ease-out;
}
@keyframes gtm-bump-pulse {
  0%   { color: var(--fg-faint); }
  30%  { color: var(--fg, #d8d4c8); }
  100% { color: var(--fg-faint); }
}

#engagement-fx {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  pointer-events: none;
  z-index: 1;
}
#engagement-fx canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.audio-mini {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  max-width: 560px;
  margin: 0 auto;
  background: rgba(20, 19, 17, 0.95);
  border: 1px solid rgba(120, 118, 111, 0.28);
  backdrop-filter: blur(6px);
  z-index: 50;
  font-family: var(--font-mono);
  color: var(--fg, #d8d4c8);
  padding: 8px 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}
.audio-mini .amini-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.audio-mini .amini-play {
  background: transparent;
  border: 1px solid rgba(120, 118, 111, 0.4);
  color: var(--fg, #d8d4c8);
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.audio-mini .amini-glyph::before {
  content: '\25B6';
  font-size: 11px;
}
.audio-mini.is-playing .amini-glyph::before {
  content: '\2759\2009\2759';
  letter-spacing: -2px;
}
.audio-mini .amini-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.audio-mini .amini-title {
  font-size: 12px;
  color: var(--fg, #d8d4c8);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.04em;
}
.audio-mini .amini-title:hover { text-decoration: underline; }
.audio-mini .amini-time {
  font-size: 10px;
  color: var(--fg-faint);
  margin-top: 2px;
}
.audio-mini .amini-close {
  background: transparent;
  border: none;
  color: var(--fg-faint);
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  flex: 0 0 auto;
}
.audio-mini .amini-close:hover { color: var(--fg, #d8d4c8); }
.audio-mini .amini-bar {
  height: 2px;
  background: rgba(120, 118, 111, 0.18);
  margin-top: 6px;
  position: relative;
}
.audio-mini .amini-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: rgba(216, 212, 200, 0.6);
  transition: width 0.2s linear;
}

/* the one card . inline upgrade prompt at article bottom */
.dtg-upgrade-card {
  display: block;
  margin: 56px 0 32px;
  padding: 28px 24px 24px;
  background: var(--bg-elev);
  border: 1px solid rgba(120, 118, 111, 0.22);
  border-left: 2px solid rgba(216, 212, 200, 0.55);
  font-family: var(--font-mono);
  color: var(--fg);
  position: relative;
}
.dtg-upgrade-card .duc-rule {
  display: block;
  height: 1px;
  background: rgba(120, 118, 111, 0.22);
  margin: 0 0 18px;
}
.dtg-upgrade-card .duc-line {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}
.dtg-upgrade-card .duc-lead {
  color: var(--fg-faint);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.dtg-upgrade-card .duc-body {
  color: var(--fg);
  font-size: 14px;
}
.dtg-upgrade-card .duc-price {
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  margin-top: 10px;
  margin-bottom: 18px;
}
.dtg-upgrade-card .duc-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}
.dtg-upgrade-card .duc-cta {
  display: inline-block;
  padding: 8px 18px;
  border: 1px solid rgba(216, 212, 200, 0.55);
  color: var(--fg);
  background: transparent;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.dtg-upgrade-card .duc-cta:hover {
  background: rgba(216, 212, 200, 0.08);
  border-color: var(--fg, #e8e8e8);
}
.dtg-upgrade-card .duc-dismiss {
  background: transparent;
  border: none;
  color: var(--fg-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  padding: 8px 4px;
}
.dtg-upgrade-card .duc-dismiss:hover {
  color: var(--fg-dim);
}
@media (max-width: 600px) {
  .dtg-upgrade-card {
    margin: 40px 0 24px;
    padding: 22px 18px 18px;
  }
  .dtg-upgrade-card .duc-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

/* /private door page */
.private-door {
  font-family: var(--font-mono);
  color: var(--fg);
  max-width: 760px;
  margin: 32px auto 64px;
  padding: 0 8px;
}
.private-door .private-h1 {
  font-size: 22px;
  letter-spacing: 0.02em;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 8px;
}
.private-door .private-lead {
  font-size: 14px;
  color: var(--fg-dim);
  margin: 0 0 36px;
}
.private-status {
  border: 1px solid rgba(120, 118, 111, 0.22);
  border-left: 2px solid rgba(216, 212, 200, 0.55);
  background: var(--bg-elev);
  padding: 22px 20px;
  margin-bottom: 24px;
}
.private-status .ps-line { margin: 0 0 6px; font-size: 13px; }
.private-status .ps-cta {
  color: var(--fg-dim);
  text-decoration: none;
  border-bottom: 1px dashed rgba(120, 118, 111, 0.4);
}
.private-status .ps-cta:hover { color: var(--fg); }
.private-tiers {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.ptier {
  border: 1px solid rgba(120, 118, 111, 0.18);
  background: var(--bg-elev);
  padding: 24px 22px 20px;
}
.ptier-name {
  font-size: 15px;
  font-weight: 500;
  margin: 0 0 4px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.ptier-copy {
  font-size: 12px;
  color: var(--fg-dim);
  margin: 0 0 16px;
  letter-spacing: 0.02em;
}
.ptier-prices {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ptier-prices li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed rgba(120, 118, 111, 0.15);
}
.ptier-prices li:first-child { border-top: none; }
.pp-amount {
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--fg);
  min-width: 64px;
}
.pp-cadence {
  font-size: 12px;
  color: var(--fg-dim);
}
.pp-discount, .pp-cap {
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.06em;
  text-transform: lowercase;
}
.pp-cta {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(216, 212, 200, 0.55);
  color: var(--fg);
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.pp-cta:hover {
  background: rgba(216, 212, 200, 0.08);
  border-color: var(--fg);
}
.pp-cta-life {
  border-color: rgba(216, 212, 200, 0.75);
}
.pp-cta-disabled,
.pp-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.pp-cta-disabled:hover {
  background: transparent;
  border-color: rgba(216, 212, 200, 0.55);
}
.ptier-council {
  border-style: dashed;
}
.ptier-council .pp-cap {
  margin-left: auto;
  font-size: 11px;
}
.private-anon {
  border: 1px solid rgba(120, 118, 111, 0.18);
  padding: 22px;
  background: var(--bg-elev);
  text-align: center;
}
.private-anon .pa-line { margin: 0 0 8px; font-size: 13px; color: var(--fg-dim); }
.private-anon .pa-cta {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(216, 212, 200, 0.55);
  padding-bottom: 1px;
}
.private-error {
  margin: 24px 0 0;
  font-size: 12px;
  color: var(--accent-warn, #c89c4a);
}
@media (max-width: 600px) {
  .ptier-prices li { gap: 6px; }
  .pp-cta { margin-left: 0; }
}