/* ChatExtractor — shared stylesheet
   Used by index.html, privacy.html, and terms.html.
   Combines what used to be three separate inline <style> blocks. */

  :root {
    --bg: #0a0c10;
    --panel: #12151b;
    --panel-2: #171b22;
    --border: #262b34;
    --border-soft: #1c2029;
    --text: #e9ebf0;
    --muted: #7c8794;
    --muted-dim: #565f6b;
    --accent: #e8a23d;
    --accent-hover: #f2b658;
    --accent-soft: rgba(232, 162, 61, 0.13);
    --danger: #ff6f6f;
    --success: #4fd1a5;
    --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;

    /* per-platform identity colors, used for badges + parsed transcript speaker tags */
    --pf-chatgpt: #3ddc97;
    --pf-claude: #e8a23d;
    --pf-gemini: #7aa6ff;
    --pf-grok: #d7dbe2;
    --pf-metaai: #5fb0ff;
    --pf-perplexity: #35c2cf;
    --pf-unknown: var(--muted-dim);
  }
  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    margin: 0;
    font-family: var(--sans);
    background:
      radial-gradient(ellipse 900px 500px at 50% -10%, rgba(232,162,61,0.06), transparent 60%),
      var(--bg);
    color: var(--text);
    min-height: 100vh;
  }
  .wrap {
    max-width: 720px;
    margin: 0 auto;
    padding: 56px 20px 80px;
  }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* ---- Nameplate header ---- */
  .nameplate {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
  }
  h1 {
    font-family: var(--mono);
    font-weight: 600;
    font-size: 26px;
    letter-spacing: -0.01em;
    margin: 0;
  }
  h1 span {
    color: var(--accent);
  }
  .cursor {
    display: inline-block;
    width: 9px;
    height: 19px;
    background: var(--accent);
    animation: blinkCursor 1.1s step-end infinite;
    vertical-align: -3px;
  }
  @keyframes blinkCursor { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @media (prefers-reduced-motion: reduce) {
    .cursor { animation: none; opacity: 1; }
  }

  .subtitle {
    color: var(--muted);
    margin: 8px 0 24px;
    font-size: 14.5px;
    line-height: 1.6;
    max-width: 46ch;
  }

  /* ---- Supported formats legend ---- */
  .legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
  }
  .legend-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    background: var(--panel);
    border: 1px solid var(--border-soft);
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .legend-item:hover {
    border-color: var(--border);
    color: var(--text);
    background: var(--panel-2);
  }
  .legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--dot, var(--success));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--success)) 15%, transparent);
  }

  /* ---- Input panel ---- */
  .panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 22px;
    margin-bottom: 24px;
  }
  label {
    display: block;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted-dim);
    margin-bottom: 10px;
  }
  .input-row {
    display: flex;
    gap: 10px;
    position: relative;
  }
  .input-shell {
    flex: 1;
    display: flex;
    align-items: center;
    background: #0d0f14;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0 6px 0 14px;
    overflow: hidden;
    position: relative;
    transition: border-color 0.15s ease;
    min-width: 0;
  }
  .input-shell.active { border-color: var(--accent); }
  .prompt-glyph {
    font-family: var(--mono);
    color: var(--accent);
    font-size: 14px;
    margin-right: 8px;
    flex-shrink: 0;
  }
  input[type="text"] {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 13px 4px;
    font-family: var(--mono);
    font-size: 13.5px;
    outline: none;
    min-width: 0;
  }
  input[type="text"]::placeholder { color: var(--muted-dim); }

  .pf-badge {
    display: none;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text);
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 9px;
    margin-right: 4px;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .pf-badge.show { display: flex; }
  .pf-badge .legend-dot { background: var(--dot, var(--muted-dim)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--muted-dim)) 15%, transparent); }
  .pf-badge.unrecognized { color: var(--muted); }

  .clear-btn {
    background: transparent;
    border: none;
    color: var(--muted-dim);
    font-family: var(--mono);
    font-size: 15px;
    line-height: 1;
    padding: 6px 8px;
    border-radius: 6px;
    flex-shrink: 0;
    display: none;
  }
  .clear-btn.show { display: inline-flex; }
  .clear-btn:hover { color: var(--text); background: var(--panel-2); }

  .scan-line {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    width: 40%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    opacity: 0;
    pointer-events: none;
  }
  .scan-line.on {
    opacity: 1;
    animation: scan 1.1s ease-in-out infinite;
  }
  @keyframes scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .scan-line.on { animation: none; opacity: 0.5; }
  }

  button {
    cursor: pointer;
    border: none;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0 20px;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  }
  #extractBtn {
    background: var(--accent);
    color: #1a1204;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }
  #extractBtn:hover:not(:disabled) { background: var(--accent-hover); }
  #extractBtn:active:not(:disabled) { transform: translateY(1px); }
  #extractBtn:disabled { opacity: 0.6; cursor: default; }

  .spinner {
    display: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(26,18,4,0.35);
    border-top-color: #1a1204;
    animation: spin 0.7s linear infinite;
  }
  #extractBtn.busy .spinner { display: inline-block; }
  #extractBtn.busy .btn-label::after { content: "…"; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .spinner { animation: none; border-top-color: rgba(26,18,4,0.35); }
  }

  .secondary-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    padding: 9px 14px;
    font-size: 12px;
  }
  .secondary-btn:hover { border-color: var(--muted-dim); color: var(--text); }
  .secondary-btn.is-active {
    border-color: var(--accent);
    color: var(--accent);
  }

  /* ---- "Snake" chasing-light border for the AI Summarize button ---- */
  .ai-glow-wrap {
    position: relative;
    display: inline-flex;
    border-radius: 9px;
    padding: 1.5px; /* border thickness — the wrap's own bg peeks through here */
    overflow: hidden;
    isolation: isolate;
  }
  .ai-glow-wrap::before {
    content: "";
    position: absolute;
    inset: -60%;
    z-index: 0;
    background: conic-gradient(
      from 0deg,
      transparent 0deg,
      transparent 268deg,
      var(--accent-hover) 300deg,
      #fff 328deg,
      var(--accent-hover) 344deg,
      transparent 360deg
    );
    animation: ai-glow-spin 2.6s linear infinite;
  }
  .ai-glow-wrap #summarizeBtn {
    position: relative;
    z-index: 1;
    background: var(--panel);
    border-color: var(--border-soft);
  }
  .ai-glow-wrap #summarizeBtn:hover { border-color: var(--border-soft); }
  .ai-glow-wrap #summarizeBtn:disabled {
    color: var(--muted-dim);
    cursor: default;
  }
  @keyframes ai-glow-spin { to { transform: rotate(360deg); } }
  @media (prefers-reduced-motion: reduce) {
    .ai-glow-wrap::before { animation: none; }
  }

  .status {
    margin-top: 14px;
    font-family: var(--mono);
    font-size: 12.5px;
    min-height: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--muted-dim);
    flex-shrink: 0;
  }
  .status:empty::before { content: none; }
  .status.error { color: var(--danger); }
  .status.error::before { background: var(--danger); }
  .status.success { color: var(--success); }
  .status.success::before { background: var(--success); }
  .status.loading { color: var(--muted); }
  .status.loading::before { background: var(--accent); animation: blink 1s ease-in-out infinite; }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

  /* ---- Result: printed ticket ---- */
  .result {
    margin-top: 28px;
    margin-bottom: 24px;
    display: none;
  }
  .ticket {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }
  .ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    flex-wrap: wrap;
  }
  .ticket-meta {
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--muted);
    letter-spacing: 0.03em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .ticket-meta .pf-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dot, var(--muted-dim));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--muted-dim)) 15%, transparent);
    margin-right: 2px;
  }
  .ticket-meta b { color: var(--text); font-weight: 600; }
  .ticket-meta .sep { color: var(--border); }
  .actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }
  .view-toggle {
    display: flex;
    gap: 2px;
    background: #0d0f14;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 2px;
  }
  .view-toggle button {
    background: transparent;
    color: var(--muted);
    border: none;
    padding: 6px 12px;
    font-size: 11.5px;
    border-radius: 6px;
  }
  .view-toggle button.is-active {
    background: var(--accent-soft);
    color: var(--accent);
  }
  .tear {
    height: 11px;
    background-color: var(--border-soft);
    -webkit-mask:
      linear-gradient(135deg, #000 25%, transparent 25%) 0 0 / 12px 12px,
      linear-gradient(225deg, #000 25%, transparent 25%) 0 0 / 12px 12px;
    mask:
      linear-gradient(135deg, #000 25%, transparent 25%) 0 0 / 12px 12px,
      linear-gradient(225deg, #000 25%, transparent 25%) 0 0 / 12px 12px;
  }

  textarea {
    display: block;
    width: 100%;
    height: 420px;
    background: #0d0f14;
    color: var(--text);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    padding: 18px;
    font-family: var(--mono);
    font-size: 12.5px;
    line-height: 1.65;
    resize: vertical;
  }
  textarea:focus { outline: none; }

  /* ---- Parsed transcript view ---- */
  .transcript {
    display: none;
    background: #0d0f14;
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 10px 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 18px;
  }
  .turn {
    padding: 14px 0;
    border-bottom: 1px dashed var(--border-soft);
    opacity: 0;
    animation: turnIn 0.3s ease forwards;
  }
  .turn:last-child { border-bottom: none; }
  @keyframes turnIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .turn { animation: none; opacity: 1; }
  }
  .turn-speaker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--speaker-color, var(--text));
    margin-bottom: 8px;
  }
  .turn-speaker .pf-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--speaker-color, var(--muted-dim));
  }
  .turn-text {
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
  }
  .turn.is-user .turn-text { color: var(--muted); }

  /* ---- Info spec-sheet ---- */
  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 36px;
  }
  @media (max-width: 640px) {
    .info-grid { grid-template-columns: 1fr; }
  }
  .info-panel .eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.04em;
    margin: 0 0 12px;
  }
  .info-panel .eyebrow::before { content: "// "; color: var(--muted-dim); }
  .info-panel p, .info-panel ul {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
    padding: 0;
  }
  .info-panel ul { list-style: none; }
  .info-panel li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 16px;
  }
  .info-panel li::before {
    content: "›";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-family: var(--mono);
    font-weight: bold;
  }
  .info-panel strong { color: var(--text); }

  footer {
    margin-top: 40px;
    color: var(--muted-dim);
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.7;
    border-top: 1px dashed var(--border);
    padding-top: 18px;
  }
  footer a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  footer a:hover {
    color: var(--accent);
    border-color: var(--accent);
  }
  footer .footer-sep {
    margin: 0 8px;
    color: var(--border);
  }

  @media (max-width: 480px) {
    .input-row { flex-wrap: wrap; }
    #extractBtn { width: 100%; justify-content: center; }
    .ticket-header { align-items: flex-start; }
    .actions { width: 100%; }
    .view-toggle { flex: 1; }
    .view-toggle button { flex: 1; }
  }

  /* ---- Share overlay ---- */
  .share-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 10, 0.72);
    backdrop-filter: blur(3px);
    z-index: 1000;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 16px;
    overflow-y: auto;
  }
  .share-overlay.show { display: flex; }

  .share-modal {
    position: relative;
    width: 100%;
    max-width: 460px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: shareIn 0.22s ease;
  }
  @keyframes shareIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .share-modal { animation: none; }
  }

  .share-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    font-size: 19px;
    line-height: 1;
    padding: 0;
  }
  .share-close:hover { color: var(--text); border-color: var(--muted-dim); }

  .share-modal-header h2 {
    font-family: var(--mono);
    font-size: 21px;
    font-weight: 600;
    margin: 0 40px 22px 0;
    letter-spacing: -0.01em;
  }
  .share-modal-header h2 span { color: var(--accent); }

  .share-section-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .share-section-label {
    font-family: var(--mono);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    margin: 0;
  }
  .share-refresh-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--panel-2);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 8px 13px;
    font-size: 11.5px;
  }
  .share-refresh-btn:hover:not(:disabled) { border-color: var(--muted-dim); }
  .share-refresh-btn:disabled { opacity: 0.65; cursor: default; }
  .share-refresh-btn svg { width: 13px; height: 13px; flex-shrink: 0; }
  .share-refresh-btn.spinning svg { animation: spin 0.7s linear infinite; }

  .share-domain-card {
    background: var(--panel-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 22px;
  }
  .share-domain-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--mono);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--text);
    flex-wrap: wrap;
    min-width: 0;
    word-break: break-all;
  }
  .share-domain-name .icon-btn {
    background: transparent;
    border: none;
    padding: 2px;
    color: var(--muted-dim);
    display: inline-flex;
    border-radius: 4px;
    flex-shrink: 0;
  }
  .share-domain-name .icon-btn svg { width: 15px; height: 15px; }
  .share-domain-name .icon-btn:hover { color: var(--text); }
  .share-domain-sub {
    font-size: 12px;
    color: var(--muted-dim);
    margin-top: 4px;
  }
  .share-domain-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
  }
  .share-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--success);
    white-space: nowrap;
  }
  .share-status.offline { color: var(--danger); }
  .share-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 20%, transparent);
  }
  .share-status.offline .share-status-dot {
    background: var(--danger);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 20%, transparent);
  }
  .share-visit-btn {
    display: inline-flex;
    align-items: center;
    background: var(--accent);
    color: #1a1204;
    padding: 9px 18px;
    border-radius: 8px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
  }
  .share-visit-btn:hover { background: var(--accent-hover); }

  .share-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 13px 10px;
    border-radius: 10px;
    font-family: var(--mono);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    transition: filter 0.15s ease, transform 0.1s ease;
  }
  .share-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .share-btn:hover { filter: brightness(1.1); }
  .share-btn:active { transform: translateY(1px); }
  .share-whatsapp { background: #25d366; }
  .share-telegram { background: #2ea6e0; }
  .share-reddit { background: #ff4500; }
  .share-x { background: #16181c; border: 1px solid var(--border); }

  .share-toast {
    margin: 14px 0 0;
    text-align: center;
    font-family: var(--mono);
    font-size: 11.5px;
    color: var(--accent);
    min-height: 14px;
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .share-toast.show { opacity: 1; }

  .footer-share-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--muted);
    font-family: var(--mono);
    font-size: 11.5px;
    text-decoration: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
  }
  .footer-share-btn:hover { color: var(--accent); border-color: var(--accent); }

  @media (max-width: 480px) {
    .share-overlay { padding: 28px 10px; }
    .share-modal { padding: 22px 16px 18px; border-radius: 14px; }
    .share-modal-header h2 { font-size: 18px; margin-right: 34px; }
    .share-domain-card { flex-direction: column; align-items: flex-start; }
    .share-domain-actions { width: 100%; justify-content: space-between; }
    .share-grid { grid-template-columns: 1fr; }
  }


/* ============================================================
   Static doc pages (privacy.html, terms.html)
   Selectors below are only used on those pages — harmless no-ops
   on index.html since no matching elements exist there.
   ============================================================ */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  margin-bottom: 20px;
}
.back-link:hover { color: var(--accent); }

.page-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.updated {
  color: var(--muted);
  font-size: 13px;
  margin: 10px 0 32px;
}

.summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}
.summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 7px 13px;
}
.summary-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(79, 209, 165, 0.12);
  flex-shrink: 0;
}

.doc {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 30px 30px 8px;
}
section { margin-bottom: 30px; }
.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
.eyebrow::before { content: "// "; color: var(--muted-dim); }
h2 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--text);
  margin: 0 0 12px;
}
p, li {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted);
  margin: 0 0 10px;
}
ul { padding-left: 18px; margin: 0 0 10px; }
strong { color: var(--text); }
a.inline { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a.inline:hover { border-color: var(--accent); }

/* privacy.html and terms.html render h1/.nameplate/footer links very
   slightly differently than the index.html app shell (smaller heading,
   tighter spacing, no link-hover transition). Scoped by a body class
   instead of duplicating the base rules, so each page keeps its exact
   original look from a single shared stylesheet. */
body.page-doc h1 { font-size: 24px; }
body.page-doc .nameplate { margin-bottom: 6px; }
body.page-doc footer a { transition: none; }