/* Reversible compact-density overrides. The original visual language stays in styles.css. */

html[data-density="compact"] {
  --compact-body-size: 16.5px;
  --compact-ui-size: 13px;
  --compact-control-height: 40px;
  --compact-panel-pad: 16px;
  --compact-section-gap: 16px;
}

html[data-density="compact"] body {
  font-size: var(--compact-body-size);
  line-height: 1.5;
}

html[data-density="compact"] button,
html[data-density="compact"] input,
html[data-density="compact"] select,
html[data-density="compact"] textarea {
  font-size: 14px;
}

html[data-density="compact"] input,
html[data-density="compact"] select {
  min-height: var(--compact-control-height);
}

html[data-density="compact"] button {
  min-height: 38px;
}

html[data-density="compact"] .codex-navbar {
  gap: 18px;
  min-height: 70px;
  padding: 0 28px;
}

html[data-density="compact"] .codex-navbar::before {
  inset: 4px 14px;
}

html[data-density="compact"] .brand {
  gap: 9px;
}

html[data-density="compact"] .brand-mark {
  --brand-icon-size: 36px;
}

html[data-density="compact"] .brand-text {
  font-size: clamp(12px, 0.82vw, 14px);
  max-width: 180px;
}

html[data-density="compact"] .codex-navbar .main-nav {
  align-content: center;
  gap: 0;
}

html[data-density="compact"] .codex-navbar .main-nav a {
  font-size: 12.5px;
  min-height: 34px;
  padding: 0 clamp(8px, 0.8vw, 13px);
}

html[data-density="compact"] .codex-navbar .main-nav a::after {
  bottom: 2px;
}

html[data-density="compact"] .codex-navbar .nav-dropdown {
  max-height: min(70vh, 560px);
  min-width: 215px;
  overflow-y: auto;
  padding: 8px;
}

html[data-density="compact"] .codex-navbar .nav-dropdown button {
  font-size: 13.5px;
  min-height: 36px;
  padding: 7px 10px;
}

html[data-density="compact"] .nav-search input {
  font-size: 12px;
  height: 38px;
  padding-left: 36px;
  width: 112px;
}

html[data-density="compact"] .nav-search input:focus {
  width: 220px;
}

html[data-density="compact"] .nav-search::before {
  font-size: 18px;
  left: 12px;
}

html[data-density="compact"] .site-search-group-title {
  font-size: 11px;
}

html[data-density="compact"] .site-search-result {
  gap: 3px;
  padding: 9px 12px;
}

html[data-density="compact"] .site-search-result span {
  font-size: 15px;
}

html[data-density="compact"] .site-search-result small {
  font-size: 12px;
}

html[data-density="compact"] .hero-shell,
html[data-density="compact"] .hero-content {
  min-height: 300px;
}

html[data-density="compact"] .hero-content {
  max-width: 560px;
  padding: 34px clamp(24px, 4vw, 52px);
}

html[data-density="compact"] .hero-content h1 {
  font-size: clamp(2.35rem, 4vw, 3rem);
  letter-spacing: 0.045em;
}

html[data-density="compact"] #heroSubtitle {
  font-size: 18px;
  margin-top: 12px;
}

html[data-density="compact"] .hero-actions {
  gap: 8px;
  margin-top: 23px;
}

html[data-density="compact"] .hero-btn {
  font-size: 13px;
  min-height: 42px;
  min-width: 150px;
  padding: 0 14px;
}

html[data-density="compact"] .page-shell {
  padding: 28px clamp(18px, 3vw, 40px) 44px;
}

html[data-density="compact"] .home-top-panels {
  gap: 11px;
  margin-bottom: 12px;
}

html[data-density="compact"] .home-info-panel,
html[data-density="compact"] .player-lookup-panel,
html[data-density="compact"] .world-status-panel,
html[data-density="compact"] .chaos-status-panel {
  min-height: 90px;
  padding: 5px 8px;
}

html[data-density="compact"] .home-info-panel,
html[data-density="compact"] .player-lookup-panel,
html[data-density="compact"] .world-status-panel,
html[data-density="compact"] .world-status-online,
html[data-density="compact"] .chaos-status-panel {
  gap: 4px;
}

html[data-density="compact"] .home-info-heading,
html[data-density="compact"] .player-lookup-heading,
html[data-density="compact"] .world-status-heading,
html[data-density="compact"] .chaos-status-heading {
  align-items: center;
  min-height: 24px;
  padding-bottom: 3px;
}

html[data-density="compact"] .home-info-panel .eyebrow,
html[data-density="compact"] .player-lookup-panel .eyebrow,
html[data-density="compact"] .world-status-panel .eyebrow,
html[data-density="compact"] .chaos-status-panel .eyebrow {
  font-size: 12px;
}

html[data-density="compact"] .home-info-panel #homeInfoText {
  gap: 2px;
}

html[data-density="compact"] .home-info-panel #homeInfoText span {
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.15;
}

html[data-density="compact"] .player-lookup-form {
  gap: 5px;
}

html[data-density="compact"] .player-lookup-form label span {
  font-size: 11.5px;
}

html[data-density="compact"] .player-lookup-form input,
html[data-density="compact"] .player-lookup-form button {
  font-size: 13px;
  height: 32px;
  min-height: 32px;
}

html[data-density="compact"] .player-lookup-form button {
  padding-inline: 13px;
}

html[data-density="compact"] .player-online-panel {
  min-height: 48px;
  padding: 4px 7px;
}

html[data-density="compact"] .player-online-panel strong {
  font-size: 30px;
}

html[data-density="compact"] .player-online-panel span {
  font-size: 11.5px;
}

html[data-density="compact"] .chaos-tracker {
  min-height: 48px;
  padding: 1px 42px 1px 7px;
}

html[data-density="compact"] .chaos-tracker-emblem {
  height: 32px;
  width: 32px;
}

html[data-density="compact"] .chaos-tracker-copy {
  gap: 1px;
}

html[data-density="compact"] .chaos-tracker-copy small {
  font-size: 14px;
  line-height: 1.12;
}

html[data-density="compact"] .chaos-tracker-schedule,
html[data-density="compact"] .chaos-tracker-summon {
  font-size: 12px;
  line-height: 1.1;
}

html[data-density="compact"] .chaos-tracker-summon {
  padding: 1px 5px 2px;
}

html[data-density="compact"] .chaos-tracker-refresh {
  position: relative;
  font-size: 14px;
  height: 20px;
  min-height: 20px;
  width: 20px;
}

html[data-density="compact"] .chaos-tracker-refresh::before {
  position: absolute;
  inset: -2px;
  content: "";
}

html[data-density="compact"] .codex-category-grid {
  gap: 15px;
  margin-bottom: 26px;
}

html[data-density="compact"] .category-card {
  min-height: 136px;
  padding: 18px 20px;
}

html[data-density="compact"] .category-card-head {
  gap: 10px;
  grid-template-columns: 38px minmax(0, 1fr);
}

html[data-density="compact"] .category-icon {
  height: 38px;
  width: 38px;
}

html[data-density="compact"] .category-card strong {
  font-size: clamp(17px, 1.35vw, 21px);
}

html[data-density="compact"] .category-links {
  gap: 3px;
  margin: 11px 0 0 50px;
}

html[data-density="compact"] .category-links button {
  font-size: clamp(16px, 1.15vw, 18px);
  min-height: 27px;
}

html[data-density="compact"] .content-stage {
  font-size: 16.5px;
}

html[data-density="compact"] .content-stage h1,
html[data-density="compact"] #pageTitle {
  font-size: clamp(32px, 3.4vw, 46px);
}

html[data-density="compact"] .content-stage h2 {
  font-size: clamp(25px, 2.5vw, 32px);
}

html[data-density="compact"] .content-stage h3 {
  font-size: clamp(20px, 2vw, 24px);
}

html[data-density="compact"] .article-body,
html[data-density="compact"] .article-full,
html[data-density="compact"] .guide-layout,
html[data-density="compact"] .map-showcase {
  font-size: 16.5px;
  line-height: 1.55;
}

html[data-density="compact"] .article-full,
html[data-density="compact"] .article-card,
html[data-density="compact"] .guide-card,
html[data-density="compact"] .map-card {
  padding: clamp(14px, 2vw, 24px);
}

html[data-density="compact"] .toolbar,
html[data-density="compact"] .subgroup-tabs,
html[data-density="compact"] .filter-bar,
html[data-density="compact"] .market-toolbar,
html[data-density="compact"] .game-market-controls,
html[data-density="compact"] .rating-controls,
html[data-density="compact"] .online-controls {
  gap: 10px;
}

html[data-density="compact"] .toolbar label,
html[data-density="compact"] .filter-bar label,
html[data-density="compact"] .market-toolbar label,
html[data-density="compact"] .game-market-controls label,
html[data-density="compact"] .rating-controls label,
html[data-density="compact"] .online-controls label {
  font-size: 13px;
}

html[data-density="compact"] .subgroup-tabs button,
html[data-density="compact"] .filter-bar button,
html[data-density="compact"] .market-toolbar button,
html[data-density="compact"] .game-market-controls button,
html[data-density="compact"] .rating-controls button,
html[data-density="compact"] .online-controls button {
  font-size: 13px;
  min-height: 38px;
  padding: 7px 12px;
}

html[data-density="compact"] .market-page,
html[data-density="compact"] .game-market-page,
html[data-density="compact"] .rating-page,
html[data-density="compact"] .online-page,
html[data-density="compact"] .set-compare-page,
html[data-density="compact"] .bugs-page {
  font-size: 16px;
}

html[data-density="compact"] .market-item-card,
html[data-density="compact"] .market-list-item,
html[data-density="compact"] .rating-card,
html[data-density="compact"] .online-player-card {
  padding: 12px 14px;
}

@media (max-width: 1220px) {
  html[data-density="compact"] .codex-navbar {
    gap: 12px;
    padding-inline: 18px;
  }

  html[data-density="compact"] .brand-text {
    max-width: 130px;
  }

  html[data-density="compact"] .codex-navbar .main-nav a {
    font-size: 12px;
    padding-inline: 7px;
  }
}

@media (max-width: 1040px) {
  html[data-density="compact"] .codex-navbar {
    min-height: 64px;
    padding: 7px 12px !important;
  }

  html[data-density="compact"] .codex-navbar .main-nav a {
    font-size: 13px;
    min-height: 44px;
    padding: 8px 11px;
  }

  html[data-density="compact"] .codex-navbar .nav-dropdown button {
    font-size: 13px;
    min-height: 44px;
  }

  html[data-density="compact"] .nav-search input,
  html[data-density="compact"] .nav-search input:focus {
    height: 44px;
    width: 100%;
  }
}

@media (max-width: 720px) {
  html[data-density="compact"] body {
    font-size: 16px;
  }

  html[data-density="compact"] .brand-mark {
    --brand-icon-size: 38px;
  }

  html[data-density="compact"] .brand-text {
    font-size: 11px;
  }

  html[data-density="compact"] .hero-shell,
  html[data-density="compact"] .hero-content {
    min-height: 330px;
  }

  html[data-density="compact"] .hero-content {
    padding: 30px 20px;
  }

  html[data-density="compact"] .hero-content h1 {
    font-size: clamp(2rem, 10vw, 2.45rem);
  }

  html[data-density="compact"] #heroSubtitle {
    font-size: 17px;
  }

  html[data-density="compact"] .hero-actions {
    gap: 7px;
    margin-top: 20px;
  }

  html[data-density="compact"] .hero-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .page-shell {
    padding: 18px 8px 32px;
  }

  html[data-density="compact"] .home-info-panel,
  html[data-density="compact"] .player-lookup-panel,
  html[data-density="compact"] .world-status-panel,
  html[data-density="compact"] .chaos-status-panel,
  html[data-density="compact"] .category-card,
  html[data-density="compact"] .article-full,
  html[data-density="compact"] .article-card,
  html[data-density="compact"] .guide-card,
  html[data-density="compact"] .map-card {
    padding: 12px;
  }

  html[data-density="compact"] .category-card {
    min-height: 132px;
  }

  html[data-density="compact"] .content-stage h1,
  html[data-density="compact"] #pageTitle {
    font-size: clamp(29px, 9vw, 38px);
  }

  html[data-density="compact"] .content-stage h2 {
    font-size: clamp(23px, 7vw, 30px);
  }
}

@media (pointer: coarse), (any-pointer: coarse) {
  html[data-density="compact"] button,
  html[data-density="compact"] input,
  html[data-density="compact"] select,
  html[data-density="compact"] .hero-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .chaos-tracker-refresh {
    height: 44px;
    min-height: 44px;
    width: 44px;
  }
}

/* Administration keeps its current structure while using the same compact rhythm. */
html[data-density="compact"] .admin-content {
  --admin-font: 14px;
  font-size: 14px;
  line-height: 1.4;
  margin-top: -8px;
}

html[data-density="compact"] .admin-workspace {
  background:
    linear-gradient(90deg, rgba(28, 22, 17, 0.96) 0 210px, rgba(237, 221, 184, 0.48) 210px),
    var(--paper);
  font-size: 14px;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: calc(100vh - 82px);
}

html[data-density="compact"] .admin-content.sidebar-collapsed .admin-workspace {
  background: var(--paper);
  grid-template-columns: minmax(0, 1fr);
}

html[data-density="compact"] .admin-sidebar {
  gap: 8px;
  min-height: calc(100vh - 82px);
  padding: 9px 8px;
}

html[data-density="compact"] .admin-sidebar-brand {
  gap: 6px;
  grid-template-columns: 30px minmax(0, 1fr) 26px;
  padding-bottom: 7px;
}

html[data-density="compact"] .admin-sidebar-mark {
  height: 30px;
  width: 30px;
}

html[data-density="compact"] .admin-sidebar-toggle {
  height: 26px;
  min-height: 26px;
  width: 26px;
}

html[data-density="compact"] .admin-sidebar-brand strong {
  font-size: 12.5px;
}

html[data-density="compact"] .admin-sidebar-brand small,
html[data-density="compact"] .admin-session span {
  font-size: 11px;
}

html[data-density="compact"] .admin-sidebar .admin-session {
  gap: 5px;
  padding: 6px;
}

html[data-density="compact"] .admin-sidebar .admin-session .ghost-btn {
  font-size: 12px;
  min-height: 32px;
  padding: 5px 7px;
}

html[data-density="compact"] .admin-tabs {
  gap: 4px;
}

html[data-density="compact"] .admin-tabs button {
  font-size: 12.5px;
  min-height: 32px;
  padding: 6px 8px;
}

html[data-density="compact"] .admin-main {
  padding: 9px;
}

html[data-density="compact"] .admin-topbar {
  gap: 9px;
  margin-bottom: 8px;
  padding: 7px 9px;
}

html[data-density="compact"] .admin-topbar h2 {
  font-size: 16px;
}

html[data-density="compact"] .admin-topbar span {
  font-size: 12px;
}

html[data-density="compact"] .admin-topbar-actions {
  gap: 6px;
}

html[data-density="compact"] .admin-stats {
  padding: 5px 8px;
}

html[data-density="compact"] .admin-sidebar-context {
  gap: 5px;
  padding-top: 6px;
}

html[data-density="compact"] .admin-sidebar-context-details,
html[data-density="compact"] .admin-sidebar-list {
  gap: 4px;
}

html[data-density="compact"] .admin-sidebar-context-title {
  font-size: 10.5px;
}

html[data-density="compact"] .admin-sidebar-search {
  font-size: 12px;
  min-height: 34px;
  padding: 6px 7px;
}

html[data-density="compact"] .admin-sidebar-entry {
  gap: 1px;
  min-height: 0;
  padding: 5px 7px;
}

html[data-density="compact"] .admin-sidebar-entry strong {
  font-size: 12px;
}

html[data-density="compact"] .admin-sidebar-entry span,
html[data-density="compact"] .admin-sidebar-note {
  font-size: 10.5px;
}

html[data-density="compact"] .admin-grid,
html[data-density="compact"] .quest-admin-grid,
html[data-density="compact"] .map-admin-grid,
html[data-density="compact"] .menu-admin-grid {
  gap: 9px;
}

html[data-density="compact"] .admin-form,
html[data-density="compact"] .admin-list,
html[data-density="compact"] .admin-preview,
html[data-density="compact"] .import-panel {
  padding: 9px;
}

html[data-density="compact"] .admin-form {
  gap: 7px;
  font-size: 14px;
}

html[data-density="compact"] .admin-form h1 {
  font-size: clamp(25px, 2.4vw, 30px);
}

html[data-density="compact"] .admin-form h2,
html[data-density="compact"] .admin-list h2,
html[data-density="compact"] .admin-preview h2,
html[data-density="compact"] .import-panel h2 {
  font-size: clamp(20px, 2vw, 25px);
}

html[data-density="compact"] .admin-form h3,
html[data-density="compact"] .admin-list h3,
html[data-density="compact"] .admin-preview h3 {
  font-size: clamp(16px, 1.5vw, 19px);
}

html[data-density="compact"] .admin-form label {
  gap: 4px;
  font-size: 13px;
}

html[data-density="compact"] .admin-form input,
html[data-density="compact"] .admin-form select {
  font-size: 14px;
  min-height: 38px;
  padding: 6px 8px;
}

html[data-density="compact"] .admin-form textarea,
html[data-density="compact"] .rich-field {
  font-size: 14.5px;
  line-height: 1.45;
  padding: 8px 10px;
}

html[data-density="compact"] .rich-field {
  min-height: 112px;
}

html[data-density="compact"] .form-row {
  gap: 9px;
  grid-template-columns: 1fr 165px;
}

html[data-density="compact"] .article-meta-row {
  gap: 6px;
  grid-template-columns: minmax(240px, 1.6fr) minmax(135px, 0.75fr) minmax(135px, 0.75fr) 135px minmax(170px, 0.8fr);
}

html[data-density="compact"] .article-meta-row label {
  font-size: 11.5px;
}

html[data-density="compact"] .form-head,
html[data-density="compact"] .form-actions,
html[data-density="compact"] .form-head-actions {
  gap: 6px;
}

html[data-density="compact"] .action-btn,
html[data-density="compact"] .ghost-btn,
html[data-density="compact"] .tool-btn,
html[data-density="compact"] .map-tools button,
html[data-density="compact"] .guide-tabs button {
  font-size: 12px;
  min-height: 36px;
  padding: 6px 10px;
}

html[data-density="compact"] .editor-toolbar {
  gap: 5px;
  padding: 5px;
}

html[data-density="compact"] .tool-btn,
html[data-density="compact"] .block-controls button {
  font-size: 12px;
  min-height: 30px;
  padding: 4px 7px;
}

html[data-density="compact"] .template-picker,
html[data-density="compact"] .template-picker select,
html[data-density="compact"] .bulk-card-insert,
html[data-density="compact"] .bulk-card-insert summary {
  font-size: 11px;
  min-height: 32px;
}

html[data-density="compact"] .block-editor {
  gap: 6px;
  grid-template-columns: 175px minmax(0, 1fr);
}

html[data-density="compact"] .editor-outline-panel {
  gap: 7px;
  padding: 6px;
}

html[data-density="compact"] .admin-entry,
html[data-density="compact"] .card-catalog-row,
html[data-density="compact"] .quest-catalog-row,
html[data-density="compact"] .bug-admin-summary {
  font-size: 12.5px;
  padding: 6px 7px;
}

html[data-density="compact"] .content-table,
html[data-density="compact"] .database-table,
html[data-density="compact"] .analytics-table {
  font-size: 12.5px;
}

html[data-density="compact"] .content-table th,
html[data-density="compact"] .content-table td,
html[data-density="compact"] .database-table th,
html[data-density="compact"] .database-table td,
html[data-density="compact"] .analytics-table th,
html[data-density="compact"] .analytics-table td {
  padding: 5px 7px;
}

html[data-density="compact"] .quick-actions {
  bottom: 16px;
  gap: 6px;
  right: 16px;
}

html[data-density="compact"] .quick-action-btn {
  font-size: 11px;
  min-height: 38px;
  padding: 0 10px;
}

html[data-density="compact"] .scroll-top-btn {
  width: 38px;
}

@media (max-width: 1120px) {
  html[data-density="compact"] .admin-workspace {
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-density="compact"] .block-editor {
    grid-template-areas:
      "outline"
      "toolbar"
      "blocks";
    grid-template-columns: minmax(0, 1fr);
  }

  html[data-density="compact"] .admin-sidebar {
    min-height: 0;
    position: static;
  }

  html[data-density="compact"] .admin-main {
    padding: 8px;
  }

  html[data-density="compact"] .article-meta-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  html[data-density="compact"] .admin-content {
    font-size: 14px;
  }

  html[data-density="compact"] .admin-main {
    padding: 6px;
  }

  html[data-density="compact"] .admin-topbar {
    align-items: flex-start;
    padding: 7px;
  }

  html[data-density="compact"] .admin-grid,
  html[data-density="compact"] .quest-admin-grid,
  html[data-density="compact"] .map-admin-grid,
  html[data-density="compact"] .menu-admin-grid,
  html[data-density="compact"] .form-row,
  html[data-density="compact"] .article-meta-row,
  html[data-density="compact"] .block-editor,
  html[data-density="compact"] .bug-admin-edit {
    grid-template-columns: 1fr;
  }

  html[data-density="compact"] .editor-outline-panel {
    max-height: 260px;
    position: static;
  }

  html[data-density="compact"] .admin-form,
  html[data-density="compact"] .admin-list,
  html[data-density="compact"] .admin-preview,
  html[data-density="compact"] .import-panel {
    padding: 8px;
  }
}

@media (pointer: coarse) {
  html[data-density="compact"] .admin-sidebar-brand {
    grid-template-columns: 30px minmax(0, 1fr) 44px;
  }

  html[data-density="compact"] .admin-sidebar-toggle {
    height: 44px;
    min-height: 44px;
    width: 44px;
  }

  html[data-density="compact"] .admin-tabs button,
  html[data-density="compact"] .admin-sidebar-search,
  html[data-density="compact"] .admin-sidebar-entry,
  html[data-density="compact"] .admin-form input,
  html[data-density="compact"] .admin-form select,
  html[data-density="compact"] .action-btn,
  html[data-density="compact"] .ghost-btn,
  html[data-density="compact"] .tool-btn,
  html[data-density="compact"] .map-tools button,
  html[data-density="compact"] .guide-tabs button,
  html[data-density="compact"] .block-controls button,
  html[data-density="compact"] .template-picker,
  html[data-density="compact"] .template-picker select,
  html[data-density="compact"] .bulk-card-insert,
  html[data-density="compact"] .bulk-card-insert summary,
  html[data-density="compact"] .quick-action-btn {
    min-height: 44px;
  }

  html[data-density="compact"] .scroll-top-btn {
    width: 44px;
  }
}