/* Shared visual language for the private services. Keep this last in service_layout.html. */
:root,
:root[data-theme="light"],
:root body.context-module,
:root[data-theme="light"] body.context-module {
  color-scheme: light;
  --bg: #f4f2f3;
  --surface: #fff;
  --surface-alt: #ece8eb;
  --text: #242026;
  --muted: #625c65;
  --line: #d6d0d7;
  --input-line: #958b97;
  --primary: #302831;
  --on-primary: #fff;
  --accent: #765977;
  --focus: #69456c;
  --shadow: 0 7px 24px #271b2a0b;
  --sidebar: #141216;
  --sidebar-text: #f6f1f5;
  --sidebar-muted: #cbc0c9;
  --active: #39313b;
  --danger: #a5283e;
  --danger-bg: #fff0f2;
  --ambient-glow: #b8a0b01c;
  --chrome-line: #f1e3ee2b;
  --inv-tag: var(--surface-alt);
  --games-highlight: var(--surface-alt);
  --games-art: #c9c0cb;
}

:root[data-theme="dark"],
:root[data-theme="dark"] body.context-module {
  color-scheme: dark;
  --bg: #0e0e10;
  --surface: #19181c;
  --surface-alt: #272329;
  --text: #f4f0f3;
  --muted: #bab1ba;
  --line: #403b43;
  --input-line: #746a76;
  --primary: #dec8db;
  --on-primary: #1a141c;
  --accent: #ddbbd5;
  --focus: #f0d0eb;
  --shadow: 0 9px 29px #00000040;
  --sidebar: #09090b;
  --sidebar-text: #f5eff4;
  --sidebar-muted: #bdb0bc;
  --active: #332b34;
  --danger: #ffb6c0;
  --danger-bg: #40262b;
  --ambient-glow: #e0c2da19;
  --chrome-line: #f1e3ee26;
  --inv-tag: var(--surface-alt);
  --games-highlight: var(--surface-alt);
  --games-art: #605565;
}

body.context-module { background: var(--bg); color: var(--text); }
body.context-module:has(.public-main) {
  background: radial-gradient(ellipse 62% 42% at 86% -3%, var(--ambient-glow), transparent 79%), var(--bg);
}
.context-module .main-content { min-height: 100vh; }
.context-module .context-page-body { position: relative; }

/* The light beam and grain belong to navigation chrome only. */
.context-module .context-sidebar {
  background-color: var(--sidebar);
  background-image:
    radial-gradient(ellipse 125% 36% at 28% -2%, #efdaeb36, transparent 73%),
    linear-gradient(157deg, #ece0e815, transparent 38%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  background-size: auto, auto, 180px 180px;
  border-right: 1px solid var(--chrome-line);
  scrollbar-color: #756875 var(--sidebar);
}
.context-module .context-sidebar .context-app-brand {
  border-bottom: 1px solid var(--chrome-line);
  padding-bottom: 19px;
}
.context-sidebar .brand { color: var(--sidebar-text); font-family: "Segoe UI", Arial, sans-serif; font-weight: 550; }
.context-sidebar .brand-mark { color: #e0cadd; }
.context-sidebar .brand-caption,
.context-sidebar .nav-caption,
.context-sidebar .context-account-caption {
  color: var(--sidebar-muted);
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: .09em;
}
.context-sidebar .nav-caption { font-size: 9px; }
.context-sidebar .nav-item,
.context-module .context-sidebar .context-nav-link { color: var(--sidebar-muted); }
.context-sidebar .nav-item:hover,
.context-module .context-sidebar .context-nav-link:hover {
  background: #342d36;
  color: var(--sidebar-text);
}
.context-sidebar .nav-item.is-active,
.context-module .context-sidebar .context-nav-link[aria-current="page"] {
  background: var(--active);
  box-shadow: inset 2px 0 #dbc3d7;
  color: var(--sidebar-text);
}
.context-sidebar .nav-divider { background: var(--chrome-line); }
.context-sidebar .sidebar-note {
  border-color: var(--chrome-line);
  background: #ffffff07;
  color: var(--sidebar-muted);
}
.context-sidebar .sidebar-note p { color: var(--sidebar-text); }
.context-sidebar .sidebar-note > span { color: var(--sidebar-muted); }
.context-sidebar .sidebar-note .icon,
.context-sidebar .sidebar-note .games-note-symbol { color: #dec8db; }
.context-sidebar .tabletop-sidebar-pips i { background-color: #dec8db; }
.context-sidebar-account .avatar { background: #514451; color: #fff; }
.context-sidebar :focus-visible { outline-color: #f4d6ef; }

.context-module .utility-bar {
  min-height: 40px;
  margin-bottom: 20px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(115deg, transparent 64%, var(--ambient-glow));
}
.context-account-link { color: var(--muted); }
.context-account-link:hover { color: var(--text); }
.context-module #theme-preference {
  background: var(--surface);
  border: 1px solid var(--input-line);
  color: var(--text);
}
.context-module .eyebrow,
.context-module .metadata-label,
.context-module .page-footer,
.context-module .context-readonly {
  font-family: Consolas, "Courier New", monospace;
  letter-spacing: .055em;
}
.context-module .eyebrow { color: var(--accent); font-size: 10px; font-weight: 700; }
.context-module .context-heading h1,
.context-module .page-heading h1 {
  color: var(--text);
  font-size: clamp(27px, 2.7vw, 38px);
  font-weight: 550;
  letter-spacing: -.05em;
  line-height: 1.1;
}
.context-module .page-description { color: var(--muted); line-height: 1.6; }
.context-module .section-heading h2 { color: var(--muted); }

/* Controls and dense catalogue surfaces remain solid and readable. */
.context-module .button { border-radius: 5px; font-weight: 650; }
.context-module .button-primary,
.context-module .button-search {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}
.context-module .button-primary:hover,
.context-module .button-search:hover { filter: brightness(1.08); }
.context-module .button-secondary {
  background: var(--surface);
  border: 1px solid var(--input-line);
  color: var(--text);
}
.context-module input:not([type="checkbox"]):not([type="hidden"]),
.context-module select,
.context-module textarea {
  background: var(--surface);
  border-color: var(--input-line);
  color: var(--text);
}
.context-module input::placeholder,
.context-module textarea::placeholder { color: var(--muted); opacity: 1; }
.context-module input:focus-visible,
.context-module select:focus-visible,
.context-module textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.context-module .surface-panel,
.context-module .editor-form,
.context-module .login-panel,
.context-module .context-card,
.context-module .empty-state,
.context-module .inv-empty,
.context-module .tabletop-empty,
.context-module .games-empty-search {
  background: var(--surface);
  border-color: var(--line);
}
.context-module .context-card:hover { border-color: var(--input-line); }
.context-module .context-card-actions { border-top-color: var(--line); }
.context-module .context-card-actions a { color: var(--text); }
.context-module .context-card-actions a:hover,
.context-module .text-link:hover { color: var(--accent); }
.context-module .filter-chip,
.context-module .access-badge,
.context-module .inv-condition { background: var(--surface-alt); border-color: var(--line); }
.context-module .form-alert,
.context-module .context-panel-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }

.context-module .portal-grid { gap: 12px; }
.context-module .service-card {
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  transition: border-color .18s ease, transform .18s ease;
}
.context-module .service-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.context-module .service-icon,
.context-module .login-symbol,
.context-module .state-icon,
.context-module .account-section-icon {
  background: var(--surface-alt);
  color: var(--accent);
  border-radius: 6px;
}
.context-module .service-card .eyebrow { color: var(--accent); }
.context-module .service-card-bottom { border-top-color: var(--line); color: var(--text); }
.context-module .no-access-state { border: 1px solid var(--line); }

/* Public sign-in uses the same chrome; the form itself has no texture. */
.context-module .public-header {
  background-color: var(--sidebar);
  background-image: radial-gradient(ellipse 65% 155% at 83% -70%, #e5d1e346, transparent 78%);
  border-bottom: 1px solid var(--chrome-line);
  color: var(--sidebar-text);
}
.context-module .public-header .brand { color: var(--sidebar-text); }
.context-module .public-header .brand-mark { color: #dec8db; }
.context-module .public-header .brand-caption { color: var(--sidebar-muted); }
.context-module .public-header #theme-preference {
  background: #211d24;
  border-color: #897b88;
  color: #f6f1f5;
}
.context-module .login-story h1 { color: var(--text); font-weight: 500; letter-spacing: -.055em; }
.context-module .login-story > p:not(.eyebrow) { line-height: 1.7; }
.context-module .login-panel { box-shadow: var(--shadow); }
.context-module .private-note { border-top-color: var(--line); }

/* Context panels and mobile menus are opaque above the catalogue. */
.context-module .context-panel {
  background: var(--surface);
  border-color: var(--input-line);
  box-shadow: 0 18px 60px #0000004a;
}
.context-module .context-panel-header { background: var(--surface); border-bottom-color: var(--line); }
.context-module .context-open-page { color: var(--accent); }
.context-module .context-panel.is-form::backdrop { background: #09070bc0; backdrop-filter: blur(3px); }
.context-module .context-network-status { background: var(--surface); border-color: var(--input-line); color: var(--text); }
.context-module .context-mobile-nav,
.context-module .context-more-menu { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.context-module .context-mobile-nav .context-nav-link[aria-current="page"],
.context-module .context-more[open] > summary { background: var(--surface-alt); color: var(--text); }
.context-module .context-more-menu strong { color: var(--text); }

/* Missing artwork keeps a neutral palette while actual cover images retain color. */
.context-module .context-cover-placeholder,
.context-module .games-cover-art,
.context-module .tabletop-box {
  background: linear-gradient(135deg, #d5cdd5, #aca1af 55%, #b5a9b8);
  color: #262029;
}
.context-module .cover-comics { background: linear-gradient(135deg, #756879, #685c6c 55%, #5b5060); color: #fff; }
.context-module .cover-children { background: linear-gradient(135deg, #d8d2d5, #b4aab8 55%, #958b98); color: #27222a; }
.context-module .games-cover-glyph { color: #29232b; }
:root[data-theme="dark"] body.context-module .context-cover-placeholder,
:root[data-theme="dark"] body.context-module .games-cover-art,
:root[data-theme="dark"] body.context-module .tabletop-box {
  background: linear-gradient(135deg, #625965, #403a44 55%, #716476);
  color: #f8f0f7;
}
:root[data-theme="dark"] body.context-module .cover-comics { background: linear-gradient(135deg, #574d5b, #352f3b 55%, #695d6c); }
:root[data-theme="dark"] body.context-module .cover-children { background: linear-gradient(135deg, #69616c, #46404b 55%, #786b78); }
:root[data-theme="dark"] body.context-module .games-cover-glyph { color: #f8eff7; }
.context-module .games-status,
.context-module .tabletop-status { border: 1px solid var(--line); }
.context-module .inv-status { color: var(--muted); }

@media (max-width: 760px) {
  .context-module .context-sidebar { border-right: 0; border-bottom: 1px solid var(--chrome-line); }
  .context-module .context-sidebar .context-app-brand { padding-bottom: 11px; }
  .context-module .context-section-menu > summary { color: var(--sidebar-text); border-top-color: var(--chrome-line); }
  .context-module .utility-bar { margin-bottom: 17px; }
  .context-module .context-mobile-nav { border-top: 1px solid var(--line); }
  .context-module .service-card:hover { transform: none; }
  .context-module .context-heading h1,
  .context-module .page-heading h1 { font-size: 27px; }
}

@media (forced-colors: active) {
  .context-module .context-sidebar,
  .context-module .public-header,
  .context-module .service-card,
  .context-module .context-panel { border: 1px solid CanvasText; background-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .context-module .service-card { transition: none; }
}