/* reset.css */

/* OpenDyslexic font-face disabled (asset missing in repo). */
/* Reset & Base */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  padding-top: var(--navbar-height, 64px); /* space for fixed header */
  font-family: 'OpenDyslexic', sans-serif;
  background: #0a0a0a;
  color: #ffffff;
}
#root {
  width: 100%;
  margin: 0;
  padding: 0;
}
a { text-decoration: none; color: #00ffff; }
ul { list-style: none; }


  

:root {
  /* Dark-mode background with a warm undertone */
  /*--bg-card:   #131313;*/
  
    /* Dark-mode background with a warm undertone */
  --bg-primary:   #29292e;

  /* Secondary background for panels, cards, etc. */

    /*--bg-secondary:   #5f5c58;*/
  --bg-secondary: #1d1d21;

  /* Additional surfaces for depth */
  --bg-tertiary: #151518;
  --bg-elevated: #202026;

  /* Creamy, low-contrast text */
  --text-primary: #e8d8c3;
  --text-secondary: rgba(232, 216, 195, 0.7);
  --selection-bg: #ffffff;
  --selection-text: #000000;

  /* Core accent: a subdued amber */
  --accent:       #ddc7aa;

  /* Lighter accent for hovers or subtle highlights */
  --accent-light: #d79b4e;

  /* Deeper accent for borders or dropdown backgrounds */
  --accent-dark:  #7a4a0f;

  /* Neutral silvers + warm trims */
  --tone-silver: rgba(120, 130, 150, 0.35);
  --tone-silver-soft: rgba(120, 130, 150, 0.22);
  --tone-silver-strong: rgba(160, 170, 190, 0.55);
  --tone-warm: rgba(221, 199, 170, 0.2);
  --tone-warm-faint: rgba(221, 199, 170, 0.15);
  --tone-warm-strong: rgba(221, 199, 170, 0.35);

  /* Status pill palette */
  --status-pill-bg: rgba(12, 14, 18, 0.75);
  --status-pill-border: rgba(255, 255, 255, 0.15);
  --status-pill-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  --status-pill-blue: #7bbaf0;
  --status-pill-blue-border: rgba(123, 186, 240, 0.45);
  --status-pill-green: #7be9ab;
  --status-pill-green-border: rgba(123, 233, 171, 0.45);
  --status-pill-grey: #c4ccd6;
  --status-pill-grey-border: rgba(196, 204, 214, 0.45);
  --status-pill-red: #f3746a;
  --status-pill-red-border: rgba(243, 116, 106, 0.5);
  --status-pill-yellow: #f7d06d;
  --status-pill-yellow-border: rgba(247, 208, 109, 0.5);
  --status-pill-hidden: rgba(232, 216, 195, 0.6);
  --status-pill-hidden-border: rgba(232, 216, 195, 0.25);
  --status-pill-white: #f6f0e5;
  --status-pill-white-border: rgba(246, 240, 229, 0.55);
  --status-pill-private: #f2a4a4;
  --status-pill-private-border: rgba(244, 110, 110, 0.55);

  /* Global gradients */
  --gradient-card-topbar: linear-gradient(180deg, rgba(30, 31, 37, 0.98), rgba(22, 23, 29, 0.96));
  --gradient-card-topbar-legacy: linear-gradient(90deg, rgba(20, 14, 8, 0.85), rgba(10, 8, 5, 0.65));
  --gradient-card-edge: radial-gradient(120% 120% at 50% -20%, rgba(200, 210, 230, 0.25), rgba(15, 16, 20, 0) 60%);
  --gradient-panel: linear-gradient(180deg, rgba(28, 28, 32, 0.95), rgba(16, 16, 20, 0.9));
  --navbar-surface: rgba(15, 15, 15, 0.98);
  --navbar-edge-fade: transparent;

  /* Shadows (use sparingly) */
  --shadow-float-soft: 0 12px 30px rgba(0, 0, 0, 0.35);
  --shadow-float-strong: 0 18px 40px rgba(0, 0, 0, 0.45);
  --shadow-inset-soft: inset 0 0 0 1px rgba(221, 199, 170, 0.15);

  /* Shared media thumbnail aspect ratio (used by grids + cards). */
  --media-thumb-aspect: 16 / 9;

  /* Shared project banner aspect ratio (used by headers + cards). */
  --media-banner-aspect: 300 / 96;

  /* Shared portrait profile surface aspect ratio (used by profile cards + editors).
     Keep this tall enough to mirror a full phone-height portrait. */
  --profile-portrait-aspect: 9 / 16;

  /* Standard desktop navbar height for layout stability. */
  --navbar-height: 48px;
  --browse-server-rail-width: 78px;
  --browse-wide-rail-field-width-min: 160px;
  --browse-wide-rail-field-width-max: 460px;
  --browse-wide-rail-anchor-width: 54px;
  --editor-selection-rail-width: 360px;
  --editor-selection-rail-wide-field-width-min: 360px;
  --editor-selection-rail-wide-field-width-max: 500px;
  --browse-wide-companion-width-min: 320px;
  --browse-wide-companion-width-max: 460px;
  --browse-wide-companion-gap: 24px;
  --browse-wide-workspace-padding-right: clamp(0.75rem, 1vw, 1.35rem);
  --browse-global-backdrop:
    radial-gradient(1080px 560px at 14% 4%, rgba(120, 130, 150, 0.1), transparent 56%),
    radial-gradient(980px 540px at 84% 8%, rgba(221, 199, 170, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(26, 27, 33, 0.78), rgba(11, 12, 17, 0.88));
  --project-hub-scene-surface:
    radial-gradient(68% 44% at 50% 0%, rgba(109, 107, 100, 0.14), transparent 62%),
    linear-gradient(180deg, rgba(39, 38, 37, 0.62), transparent 42%),
    linear-gradient(
      180deg,
      rgba(8, 10, 15, 0.98) 0%,
      rgba(15, 15, 15, 0.9) 100%
    );
  --browse-wide-workspace-surface: var(--browse-global-backdrop);
  --editor-rail-surface: var(--gradient-panel);
  --editor-rail-surface-strong:
    linear-gradient(180deg, rgba(26, 27, 33, 0.98), rgba(15, 16, 20, 0.96));
  --editor-rail-surface-soft: rgba(255, 255, 255, 0.02);
  --editor-rail-surface-muted: rgba(221, 199, 170, 0.05);
  --editor-rail-border: var(--tone-silver, rgba(120, 130, 150, 0.35));
  --editor-rail-border-strong:
    var(--tone-silver-strong, rgba(160, 170, 190, 0.55));
  --editor-rail-border-warm: var(--tone-warm, rgba(221, 199, 170, 0.2));
  --editor-rail-border-warm-strong:
    var(--tone-warm-strong, rgba(221, 199, 170, 0.35));
  --editor-rail-shadow: var(--shadow-float-soft, 0 12px 30px rgba(0, 0, 0, 0.35));

  /* Stat icons (inline SVG for mask usage). */
  --icon-like: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10.2 9.2 12 5.2c.3-.7 1.1-1.1 1.8-.8.6.2 1 .8 1 1.4v3h3.2c1.3 0 2.3 1.1 2.1 2.4l-1.3 7.1c-.2.9-1 1.6-2 1.6H8.4c-.8 0-1.4-.6-1.4-1.4V10c0-.8.6-1.4 1.4-1.4h1.8zM4.8 10.4h1.4v8.8H4.8c-.7 0-1.2-.5-1.2-1.2v-6.4c0-.7.5-1.2 1.2-1.2z' fill='black'/></svg>");
  --icon-download: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 4a1 1 0 0 1 1 1v8.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4 4a1 1 0 0 1-1.4 0l-4-4a1 1 0 1 1 1.4-1.42l2.3 2.3V5a1 1 0 0 1 1-1zM5 19a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1z' fill='black'/></svg>");
  --icon-updated: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 5a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm0-2a9 9 0 1 0 9 9 9 9 0 0 0-9-9zm.75 4a1 1 0 0 0-1 1v4.2l3 1.74a1 1 0 1 0 1-1.73l-2-1.16V8a1 1 0 0 0-1-1z' fill='black'/></svg>");
  --icon-sort: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3l3.5 4h-2.5v10h-2V7H8.5L12 3zm0 18l-3.5-4H11V7h2v10h2.5L12 21z' fill='black'/></svg>");
  --icon-package: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.9 4.5 6.6v10.8L12 21.1l7.5-3.7V6.6L12 2.9zm0 2.2 4.9 2.4L12 9.9 7.1 7.5 12 5.1zm-5.7 4 4.6 2.3v6.8l-4.6-2.3V9.1zm12.4 0v6.8l-4.6 2.3v-6.8l4.6-2.3z' fill='black'/></svg>");
  --icon-file: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 3h7l5 5v13H7V3zm2 2v14h8V9h-4V5H9zm5 0v3h3l-3-3z' fill='black'/></svg>");
}

/* your old .site-container too if you like: */
.site-container {
  max-width: 1800px;
  margin: 3rem auto 0;
  padding: 0 1rem;
}

*::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* For Firefox */

.selection-dark::selection,
.selection-dark ::selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

.selection-dark::-moz-selection,
.selection-dark ::-moz-selection {
  background-color: var(--selection-bg);
  color: var(--selection-text);
}

/* Reusable Steam-inspired scrollbar styling */
.scrollbarSteam {
  scrollbar-width: auto;
  scrollbar-color: rgba(120, 130, 150, 0.45) var(--bg-secondary, #1d1d21);
}

.scrollbarSteam::-webkit-scrollbar {
  width: 16px;
  height: 16px;
}

.scrollbarSteam::-webkit-scrollbar-track {
  background: var(--bg-secondary, #1d1d21);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6);
}

.scrollbarSteam::-webkit-scrollbar-thumb {
  background: rgba(120, 130, 150, 0.55);
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.65);
  box-shadow: inset 0 0 0 1px rgba(221, 199, 170, 0.25);
}

.scrollbarSteam::-webkit-scrollbar-thumb:hover {
  background: rgba(160, 170, 190, 0.6);
}

.scrollbarSteam::-webkit-scrollbar-button:single-button {
  background-color: var(--bg-secondary, #1d1d21);
  border: 1px solid rgba(0, 0, 0, 0.65);
  width: 16px;
  height: 16px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 8px 8px;
}

.scrollbarSteam::-webkit-scrollbar-button:single-button:vertical:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23ddc7aa' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M1.5 5.5 L4 2.5 L6.5 5.5'/></svg>");
}

.scrollbarSteam::-webkit-scrollbar-button:single-button:vertical:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23ddc7aa' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M1.5 2.5 L4 5.5 L6.5 2.5'/></svg>");
}

.scrollbarSteam::-webkit-scrollbar-button:single-button:horizontal:decrement {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23ddc7aa' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M5.5 1.5 L2.5 4 L5.5 6.5'/></svg>");
}

.scrollbarSteam::-webkit-scrollbar-button:single-button:horizontal:increment {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8' fill='none' stroke='%23ddc7aa' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'><path d='M2.5 1.5 L5.5 4 L2.5 6.5'/></svg>");
}

.scrollbarSteam::-webkit-scrollbar-button:single-button:hover {
  background-color: rgba(40, 40, 46, 0.9);
  border-color: rgba(221, 199, 170, 0.35);
}

/* Surface utilities */
.surface-card {
  position: relative;
  isolation: isolate;
  background: var(--bg-secondary, #1d1d21);
  border: 1px solid var(--tone-silver, rgba(120, 130, 150, 0.35));
  border-bottom-color: var(--tone-warm, rgba(221, 199, 170, 0.2));
  border-radius: 10px;
  box-shadow: var(--shadow-float-soft, 0 12px 30px rgba(0, 0, 0, 0.35));
  overflow: hidden;
}

.surface-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: var(--gradient-card-edge);
  opacity: 0.6;
  z-index: 0;
}

.surface-card > * {
  position: relative;
  z-index: 1;
}

.surface-card__topbar {
  background: var(--gradient-card-topbar);
  border-bottom: 1px solid var(--tone-silver-soft, rgba(120, 130, 150, 0.22));
}

/* Legacy warm topbar retained only for older card shells. New panels should
   use the neutral `.surface-card__topbar` utility above. */
.surface-card__topbar--legacy {
  background: var(--gradient-card-topbar-legacy);
  border-bottom: 1px solid var(--tone-warm, rgba(221, 199, 170, 0.2));
}

.stat-icon {
  --stat-icon: none;
  width: 0.85rem;
  height: 0.85rem;
  display: inline-block;
  flex-shrink: 0;
  background-color: currentColor;
  mask: var(--stat-icon) no-repeat center / contain;
  -webkit-mask: var(--stat-icon) no-repeat center / contain;
}

.stat-icon--likes {
  --stat-icon: var(--icon-like);
}

.stat-icon--downloads {
  --stat-icon: var(--icon-download);
}

.stat-icon--updated {
  --stat-icon: var(--icon-updated);
}

.stat-icon--sort {
  --stat-icon: var(--icon-sort);
}

.stat-icon--package {
  --stat-icon: var(--icon-package);
}

.stat-icon--file {
  --stat-icon: var(--icon-file);
}

[data-static-project-hub-page='true'] .tab-navigation.tabNav {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  border-bottom: 2px solid var(--tab-border, var(--accent));
}

[data-static-project-hub-page='true'] .tab-navigation.tabNavWithAdjacentScopes {
  justify-content: center;
}

[data-static-project-hub-page='true'] .tab-navigation .tabTrack {
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  display: flex;
  justify-content: center;
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl {
  flex: 0 0 auto;
  min-width: 7.5rem;
  max-width: 11rem;
  height: 2.2rem;
  padding: 0 0.55rem;
  border: 1px solid color-mix(in srgb, var(--accent, #d6c594) 34%, rgba(255, 255, 255, 0.16));
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--surface-card, rgba(18, 18, 22, 0.92)) 86%, transparent);
  color: var(--text-secondary, #b9b9c2);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl:hover:enabled {
  transform: translateY(-1px);
  color: var(--accent, #d6c594);
  border-color: color-mix(in srgb, var(--accent-light, #f0e3b8) 70%, transparent);
  background: color-mix(in srgb, var(--surface-card, rgba(18, 18, 22, 0.92)) 94%, transparent);
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl:focus-visible {
  outline: 2px solid var(--accent-light, #f0e3b8);
  outline-offset: 2px;
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeGlyph {
  display: inline-block;
  flex: 0 0 auto;
  font-size: 1.45rem;
  line-height: 0.8;
  font-weight: 300;
}

[data-static-project-hub-page='true'] .tab-navigation .adjacentScopeLabel {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

[data-static-project-hub-page='true'] .tab-navigation .list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  min-width: max-content;
}

[data-static-project-hub-page='true'] .tab-navigation .item {
  margin: 0;
  display: flex;
}

[data-static-project-hub-page='true'] .tab-navigation .tabItem {
  background: transparent;
  border: none;
  padding: 0.55rem 1rem 0.65rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--tab-text, var(--text-secondary));
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
}

[data-static-project-hub-page='true'] .tab-navigation .tabItem:hover {
  color: var(--tab-hover, var(--accent-light));
  transform: translateY(-1px);
}

[data-static-project-hub-page='true'] .tab-navigation .active {
  color: var(--tab-active, var(--accent));
  border-color: var(--tab-active, var(--accent));
}

[data-static-project-hub-page='true'] .tab-navigation .tabLabel {
  order: 0;
  white-space: nowrap;
}

[data-static-project-hub-page='true'] .tab-navigation .editIcon {
  order: -1;
  font-size: 0.75rem;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.75);
  color: var(--accent-light, #f0e3b8);
  border: 1px solid rgba(255, 255, 255, 0.35);
  cursor: pointer;
  line-height: 1;
}

[data-static-project-hub-page='true'] .tab-navigation .editIcon:hover {
  background: var(--accent, #d6c594);
  color: #000;
  border-color: var(--accent-light, #f0e3b8);
}

[data-static-project-hub-page='true'] .tab-navigation .addTabButton {
  background: transparent;
  border-radius: 6px;
  border: 1px dashed color-mix(in srgb, var(--accent, #d6c594) 50%, rgba(255, 255, 255, 0.2));
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted, #aaa);
  cursor: pointer;
  white-space: nowrap;
}

[data-static-project-hub-page='true'] .tab-navigation .addTabButton:hover {
  border-color: var(--accent, #d6c594);
  color: var(--accent, #d6c594);
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation.tabNav {
  gap: 0.4rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl {
  min-width: 4.8rem;
  max-width: 6.7rem;
  height: 2rem;
  padding-inline: 0.35rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .list {
  gap: 0.45rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .tabItem {
  padding: 0.5rem 0.7rem 0.6rem;
  font-size: 0.92rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeGlyph {
  font-size: 1.05rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeLabel {
  font-size: 0.69rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='mobile'] [data-static-project-hub-page='true'] .tab-navigation .addTabButton {
  padding: 0.42rem 0.7rem;
  font-size: 0.82rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='tablet'] [data-static-project-hub-page='true'] .tab-navigation.tabNav {
  gap: 0.55rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='tablet'] [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl {
  min-width: 6rem;
  max-width: 8.6rem;
  height: 2.1rem;
  padding-inline: 0.45rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='tablet'] [data-static-project-hub-page='true'] .tab-navigation .list {
  gap: 0.65rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='tablet'] [data-static-project-hub-page='true'] .tab-navigation .tabItem {
  padding: 0.52rem 0.85rem 0.62rem;
  font-size: 0.95rem;
}

[data-project-hub-host='true'][data-page-mode='browse'][data-browse-layout='tablet'] [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeLabel {
  font-size: 0.76rem;
}

@media (max-width: 700px) {
  [data-static-project-hub-page='true'] .tab-navigation.tabNav {
    gap: 0.45rem;
  }

  [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeControl {
    min-width: 5.4rem;
    max-width: 8rem;
    height: 2rem;
    padding-inline: 0.4rem;
  }

  [data-static-project-hub-page='true'] .tab-navigation .list {
    gap: 0.55rem;
  }

  [data-static-project-hub-page='true'] .tab-navigation .tabItem {
    padding-inline: 0.8rem;
    font-size: 0.95rem;
  }

  [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeGlyph {
    font-size: 1.2rem;
  }

  [data-static-project-hub-page='true'] .tab-navigation .adjacentScopeLabel {
    font-size: 0.74rem;
  }
}

.static-page {
  width: 100%;
  margin: 0 auto;
  padding: 0 0 72px;
}

.page-header {
  border-bottom: 1px solid rgba(247, 241, 232, 0.16);
  margin-bottom: 28px;
  padding-bottom: 24px;
}

.page-eyebrow {
  color: #9fbac0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.page-header h1 {
  font-size: clamp(2rem, 6vw, 4.5rem);
  line-height: 0.98;
  margin: 0;
  letter-spacing: 0;
}

.page-summary {
  max-width: 780px;
  color: #d8cfbf;
  margin: 16px 0 0;
  line-height: 1.55;
}

.surface {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.root-surface {
  margin-top: 0;
}

.tab-surface {
  margin-top: 0;
  padding: clamp(14px, 1.8vw, 20px);
  border: 1px solid var(--tone-silver, rgba(120, 130, 150, 0.35));
  border-bottom-color: var(--tone-warm, rgba(221, 199, 170, 0.2));
  border-radius: 6px;
  background: var(--bg-secondary, #1d1d21);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.tab-surface[data-tab-active='false'] {
  display: none;
}

.active-tab-surface {
  display: grid;
}

.tab-surface > h2 {
  margin: 0;
  font-size: 1.7rem;
}

.block {
  border-top: 0;
  padding-top: 0;
}

.block h2,
.block h3 {
  margin: 0 0 12px;
  letter-spacing: 0;
}

.static-live-surface-outlets {
  display: none;
}

.text-block,
.article-body {
  color: #eee5d6;
  line-height: 1.65;
}

.text-block :first-child,
.article-body :first-child {
  margin-top: 0;
}

.text-block img,
.article-body img,
.card-grid-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.tab-navigation {
  margin: 0;
}

.tab-navigation a {
  text-decoration: none;
}

.file-widget {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.file-version,
.file-desc,
.card-grid-meta,
.comment-thread {
  color: #b6aa98;
}

.card-grid {
  display: grid;
  gap: 12px;
}

.card-grid-list {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-grid-card {
  background: #181b1f;
  border: 1px solid rgba(247, 241, 232, 0.12);
  border-radius: 8px;
  overflow: hidden;
}

.card-grid-image {
  aspect-ratio: 16 / 9;
  background: #242a2d;
  display: block;
  object-fit: cover;
  width: 100%;
}

.card-grid-copy {
  padding: 12px;
}

.card-grid-title {
  color: #f7f1e8;
  font-weight: 800;
  text-decoration: none;
}

.card-grid-copy p {
  color: #d8cfbf;
  line-height: 1.45;
  margin: 8px 0 0;
}

.comment-thread {
  border: 1px dashed rgba(247, 241, 232, 0.2);
  border-radius: 6px;
  padding: 16px;
}

@media (max-width: 640px) {
  .static-page {
    width: min(100% - 20px, 1160px);
    padding-top: 24px;
  }

  .tab-surface {
    padding: 12px;
  }
}