/* Shared visual language, taken from the continuous Rules reader.
   Loaded after page styles; layout, visibility and workflow state stay owned
   by each page. Connect Profile loads this explicitly without the public shell. */
:root {
  --guide-paper: #f6f1e7;
  --guide-panel: #fffcf6;
  --guide-ink: #272723;
  --guide-muted: #655f55;
  --guide-line: #d8d0c3;
  --guide-accent: #933d27;
  --guide-accent-hover: #75301e;
  --guide-tint: #ebe3d6;
  --color-canvas: var(--guide-paper);
  --color-surface: var(--guide-panel);
  --color-surface-muted: var(--guide-tint);
  --color-ink: var(--guide-ink);
  --color-ink-soft: #45413a;
  --color-muted: var(--guide-muted);
  --color-border: var(--guide-line);
  --color-action: var(--guide-accent);
  --color-action-text: var(--guide-accent);
  --color-action-hover: var(--guide-accent-hover);
  --color-progress: #176365;
  --color-progress-soft: #e5eeea;
  --color-danger: #9b3428;
  --bg: var(--guide-paper);
  --bg-soft: var(--guide-tint);
  --card: var(--guide-panel);
  --card-strong: var(--guide-tint);
  --line: var(--guide-line);
  --muted: var(--guide-muted);
  --accent: var(--guide-accent);
  --accent-strong: var(--guide-accent-hover);
  --accent-soft: #f0e1d8;
  --accent-2: var(--color-progress);
  --ok: var(--color-progress);
  --error: var(--color-danger);
  --focus-color: var(--guide-accent);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --shadow: none;
  --shadow-sm: none;
  --shadow-nav: 0 6px 20px rgba(39,39,35,.12);
}

body {
  background: var(--guide-paper);
  color: var(--guide-ink);
  font-family: "Segoe UI", Arial, sans-serif;
  line-height: 1.65;
}
body::before, body::after { display: none; }
.page { gap: 24px; padding: 20px clamp(16px, 3vw, 42px) 28px; grid-template-columns: minmax(0, 1fr); }
.page > *, .reference-page-content, .community-page-section { min-width: 0; }
[hidden] { display: none !important; }
body:not(.rules-book-app) :is(h1, h2, h3, h4, h5, h6) {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  color: var(--guide-ink);
  line-height: 1.3;
  letter-spacing: -.02em;
}
body:not(.rules-book-app) h1 { font-size: clamp(1.95rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -.025em; }
body:not(.rules-book-app) h2 { font-size: clamp(1.35rem, 2vw, 1.6rem); }
body:not(.rules-book-app) h3 { font-size: 1.15rem; }
body p { color: inherit; }
body :is(p, li) { line-height: 1.7; }
:is(.hero-copy, .section-head, .reference-page-content, .card) > p { max-width: 66ch; }
body :is(.meta, .meta-note, .eyebrow, .hero-kicker, .panel-title) { color: var(--guide-muted); }
body :is(.eyebrow, .hero-kicker, .panel-title) { font-size: .75rem; letter-spacing: .08em; line-height: 1.5; }
body a { color: var(--guide-accent); text-underline-offset: .2em; }
body a:not(.button):not(.nav a):not(.brand) { text-decoration-color: currentColor; }

/* Keep the familiar dark navigation, with the reader's compact geometry. */
body .topbar { flex-direction: row; border-radius: 8px; }
.topbar :is(.brand, .nav, .site-nav-toggle) { font-family: "Space Grotesk", "Segoe UI", sans-serif; }
.topbar .nav a, .topbar .site-nav-toggle { border-radius: 4px; }
.community-account-menu summary { background: var(--guide-panel); }
.community-account-popover { border-color: var(--guide-line); border-radius: 8px; background: var(--guide-panel); box-shadow: 0 10px 30px rgba(39,39,35,.18); }
.community-account-popover :is(p, a, strong) { color: var(--guide-ink); }
.site-footer { border-color: var(--guide-line); }
.site-footer, .site-footer p, .footer-nav a { color: var(--guide-muted); }
.skip-link { top: -100px; z-index: 300; }

/* Paper containers retain boundaries for forms and dialogs. Ordinary prose
   uses section rules rather than adding another panel inside every panel. */
body :is(.card, .surface, .panel) { border-color: var(--guide-line); border-radius: 8px; background: var(--guide-panel); box-shadow: none; }
body :is(.hero.card, .community-hero.card, .community-run-review-entry) { background: var(--guide-panel); box-shadow: none; }
body .card { padding: clamp(20px, 3vw, 32px); }
body .table-card { padding: 0; }
body :is(.stat, .hero-stat, .community-profile-stat, .community-stat) { border-color: var(--guide-line); border-radius: 4px; background: var(--guide-paper); }
body .hero-copy > p { font-size: 1.05rem; }
body :is(.community-local-nav, .tools-local-nav) { background: var(--guide-paper); border-color: var(--guide-line); }
body :is(.community-local-nav, .tools-local-nav) a { color: var(--guide-muted); font-weight: 600; }
body :is(.community-local-nav, .tools-local-nav) a[aria-current="page"] { color: var(--guide-accent); border-bottom-color: var(--guide-accent); }

body :is(button, input, select, textarea) { font-family: inherit; }
body .button { min-height: 44px; border-radius: 4px; background: var(--guide-accent); border-color: var(--guide-accent); color: #fff; font-weight: 600; box-shadow: none; }
body .button:hover { background: var(--guide-accent-hover); border-color: var(--guide-accent-hover); }
body .button.secondary { background: var(--guide-panel); border-color: #969084; color: var(--guide-ink); }
body .button.secondary:hover { background: var(--guide-tint); border-color: var(--guide-muted); }
body .button:disabled { cursor: default; }
body :is(.search-input, select, textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="password"]) {
  border: 1px solid #969084;
  border-radius: 4px;
  background: var(--guide-panel);
  color: var(--guide-ink);
  line-height: 1.45;
}
body :is(select, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="password"]) { min-height: 44px; }
body :is(input, textarea)::placeholder { color: var(--guide-muted); opacity: 1; }
body :is(input[type="checkbox"], input[type="radio"], input[type="range"]) { accent-color: var(--guide-accent); }
body :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--guide-accent) !important; outline-offset: 3px; }
body .topbar :is(a, button, summary):focus-visible { outline-color: #ffdfbb !important; }
body :is(.account-tabs button, .moderation-profile-choice, .contribution-choice, .recognition-role-choice) { border-radius: 4px; }
body .account-tabs button[aria-selected="true"] { background: var(--guide-tint); color: var(--guide-accent); border-color: var(--guide-accent); }

/* Readable table heads, consistent with Rules. Wide data stays scrollable. */
body table { background: var(--guide-panel); color: var(--guide-ink); }
body :is(thead, th) { background: var(--guide-tint); color: var(--guide-ink); }
body th { font-size: .8rem; font-weight: 600; text-transform: none; letter-spacing: normal; }
body :is(th, td) { border-bottom-color: var(--guide-line); }
body tbody tr:hover { background: #f1ebdf; }
body :is(.table-wrap, .analytics-table-wrap, .ranking-table-wrap) { max-width: 100%; }
body thead button { color: inherit; }
body details { border-color: var(--guide-line); border-radius: 6px; }
body :is(pre, .callout, .code-block) { border-color: var(--guide-line); border-radius: 4px; background: var(--guide-paper); color: var(--guide-ink); }
body :is(code, pre) { font-family: "JetBrains Mono", Consolas, monospace; }

/* Profiles and operational pages use the same paper, without losing semantic
   success/danger states or clipping pickers, dialogs and role-gated controls. */
body :is(.community-collection-card, .account-form .community-privacy-option, .printing-connection, .printing-option, .run-review-auth,
  .host-ref-console, .host-ref-panel, .rules-source-card, .moderation-access-card, .moderation-run-card, .moderation-audit-card,
  .moderation-run-fact, .moderation-profile-choice, .host-run-summary, .host-participant-stage, .host-community-result) {
  border-radius: 6px;
  border-color: var(--guide-line);
  background: var(--guide-panel);
  box-shadow: none;
}
body .moderation-run-card.is-removed { border-style: dashed; border-color: #b87b71; background: #f7e9e2; }
body .printing-option.is-selected { border-color: var(--color-progress); background: #e5eeea; }
body :is(.host-workflow-steps > div, .host-run-summary > div, .host-player-result, .host-console-empty) { border-radius: 4px; }
body :is(.moderation-profile-choice, .contribution-choice)[aria-current="true"] { background: var(--guide-tint); border-color: var(--guide-accent); }
body .rules-intro h1 { font-size: clamp(1.95rem, 3.2vw, 2.4rem); line-height: 1.2; }
body .host-ref-main-head h2 { font-size: clamp(1.5rem, 2.5vw, 1.9rem); }
body :is(.host-ref-console-links, .host-ref-rule-links) a { border-radius: 4px; color: var(--guide-accent); border-color: var(--guide-line); background: var(--guide-paper); }
body .reference-page-content :is(p, li) { max-width: 66ch; }
body .reference-page-rail { border-color: var(--guide-line); }
body .community-directory-results :is(.community-profile-card, .community-host-card) { border-radius: 0; background: transparent; }
body[data-page="status"] .hero { align-items: start; }
body[data-page="status"] .hero-panel { align-content: start; }
body[data-page="status"] :is(.status, .metric) { border-radius: 4px; }
body[data-page="status"] .metric { border-color: var(--guide-line); background: var(--guide-paper); }
body[data-page="status"] .key-value { border: 0; border-bottom: 1px solid var(--guide-line); border-radius: 0; background: transparent; }
body.privacy-page .hero { display: block; }
body.privacy-page .page > section.card { border: 0; border-bottom: 1px solid var(--guide-line); border-radius: 0; background: transparent; padding: 20px 0 28px; }
body.privacy-page .page > section.card > * { max-width: 66ch; }

@media (max-width: 760px) {
  .page { padding: 12px 12px 24px; gap: 18px; }
  body .card { padding: 20px 16px; }
  body .table-card { padding: 0; }
  body:not(.rules-book-app) h1 { font-size: 1.95rem; }
  body .hero { gap: 20px; }
  body .hero-copy > p { font-size: 1rem; }
  body .community-local-nav, body .tools-local-nav { backdrop-filter: none; }
  body .community-local-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; overflow: visible; mask-image: none; -webkit-mask-image: none; }
  body .tools-local-nav { flex-wrap: wrap; overflow: visible; mask-image: none; -webkit-mask-image: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}