* {
  box-sizing: border-box;
}

body.modal-open {
  overflow: hidden;
}

/* 1. Header Area */
.top-bar {
  grid-area: header;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(20, 19, 23, 0.96);
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  box-shadow: 0 1px 0 rgba(216, 167, 58, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-controls {
  display: flex;
  gap: 2rem;
  flex: 1;
  justify-content: center;
}

.user-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-group {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.control-field {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-width: 0;
}

.control-label {
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}

.search-group {
  align-items: flex-end;
  flex: 1 1 560px;
  max-width: 780px;
}

.search-input-field {
  flex: 1 1 260px;
}

select,
input[type="search"],
input[type="text"] {
  background: rgba(8, 8, 10, 0.74);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.icon-btn {
  background: transparent;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.2s;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
}

.icon-btn:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.icon-btn.icon-add::before {
  content: "+";
  color: currentColor;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
}

.icon-btn.icon-settings::before {
  content: "";
  display: block;
  width: 21px;
  height: 21px;
  background: currentColor;
  mask: var(--button-icon) no-repeat center / contain;
}

/* 2. Left Navigation Sidebar */
.nav-tab {
  background: transparent;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 12px 0;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.2s;
  position: relative;
}

.nav-tab .icon {
  width: 22px;
  height: 22px;
  background: currentColor;
  mask: var(--nav-icon) no-repeat center / contain;
}

/* 3. Main Content Area */
.content-area {
  grid-area: main;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 16rem),
    var(--bg-deep);
  overflow-y: auto;
  padding: 2rem;
  position: relative;
}

.tab-view {
  display: none;
  max-width: 1000px;
  margin: 0 auto;
  animation: fadeIn 0.2s;
}

.home-hero-header,
.home-latest-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.home-hero-header {
  align-items: flex-start;
}

.home-hero-copy {
  margin: 0;
  line-height: 1.6;
}

.home-last-time-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.home-last-time-card.hidden {
  display: none;
}

.home-last-time-card .last-time-header h3 {
  margin: 0;
}

.home-last-time-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
}

.home-player-desk-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-color: rgba(104, 199, 189, 0.28);
  box-shadow:
    inset 4px 0 0 rgba(104, 199, 189, 0.72),
    var(--shadow-card);
}

.home-player-desk-card.hidden {
  display: none;
}

.home-player-desk-card .home-section-header {
  align-items: flex-start;
}

.home-player-desk-card .home-prep-stat strong {
  color: var(--accent-teal);
}

.home-player-desk-card .home-prep-item {
  background: rgba(104, 199, 189, 0.045);
}

.home-player-desk-card .home-prep-item.warning {
  background: rgba(216, 167, 58, 0.07);
}

.home-player-desk-card .home-prep-item.completed {
  background: rgba(104, 199, 189, 0.07);
}

.home-player-desk-card .home-latest-actions {
  justify-content: flex-start;
}

.home-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.home-checklist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}

.home-checklist-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.home-checklist-title {
  font-weight: 600;
  color: var(--text-primary);
}

.home-prep-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0.85rem 0;
}

.home-prep-stat,
.home-prep-item {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.home-prep-stat {
  padding: 0.65rem;
  background: var(--surface-subtle);
}

.home-prep-stat.warning {
  border-color: rgba(216, 167, 58, 0.42);
  background: rgba(216, 167, 58, 0.075);
}

.home-prep-stat strong {
  display: block;
  color: var(--accent-reference);
  font-size: 1rem;
  line-height: 1.1;
  margin-bottom: 0.25rem;
  overflow-wrap: anywhere;
}

.home-prep-stat span {
  display: block;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2;
  text-transform: uppercase;
}

.home-prep-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0.9rem 0;
}

.home-player-desk-columns {
  grid-template-columns: repeat(auto-fit, minmax(9.75rem, 1fr));
}

.home-prep-columns h4 {
  margin: 0 0 0.5rem;
}

.home-prep-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.home-prep-item {
  padding: 0.72rem;
}

.home-prep-item.warning {
  border-color: rgba(216, 167, 58, 0.34);
}

.home-prep-item.completed {
  border-color: rgba(104, 199, 189, 0.3);
}

.home-prep-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.55rem;
  margin-bottom: 0.45rem;
}

.home-prep-item-top > span:first-child {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.home-prep-item h5 {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.88rem;
  line-height: 1.25;
}

.home-prep-item p {
  margin: 0.4rem 0 0;
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.4;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.view-header h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  border-bottom: 2px solid rgba(216, 167, 58, 0.92);
  padding-bottom: 0.5rem;
  color: var(--text-primary);
}

.codex-controls select,
.codex-controls input[type="search"] {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: 0.55rem 0.75rem;
}

.codex-controls input[type="search"] {
  width: 100%;
  min-width: 0;
  min-height: 2.35rem;
  flex: 0 0 auto;
}

.codex-search-field {
  flex: 1 1 260px;
}

.scope-field {
  flex: 0 1 220px;
}

.codex-controls .meta {
  flex-basis: 100%;
}

.quest-filter-group {
  min-width: 0;
}

.quest-workbench-toolbar input[type="search"] {
  width: 100%;
}

.quest-search-field {
  min-width: 0;
}

.quest-journal-meta {
  margin: 0 0 1rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.quest-dashboard-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.quest-dashboard-header h3 {
  margin: 0;
  font-size: 1.04rem;
}

.quest-dashboard-header p {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.45;
}

.quest-dashboard-status {
  flex: 0 0 auto;
  border: 1px solid rgba(104, 199, 189, 0.42);
  border-radius: var(--radius-sm);
  padding: 0.22rem 0.55rem;
  background: rgba(104, 199, 189, 0.1);
  color: var(--accent-teal);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.quest-dashboard-status.review {
  border-color: rgba(216, 167, 58, 0.46);
  background: rgba(216, 167, 58, 0.12);
  color: var(--accent-reference);
}

.quest-dashboard-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.quest-dashboard-metric {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.7rem;
  background: rgba(255, 255, 255, 0.035);
}

.quest-dashboard-metric strong {
  display: block;
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1.1;
}

.quest-dashboard-metric span,
.quest-dashboard-metric small {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-muted);
  font-size: 0.72rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0;
}

.quest-dashboard-metric small {
  color: var(--text-secondary);
  text-transform: none;
}

.quest-dashboard-type-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.85rem;
}

.quest-dashboard-type-label {
  color: var(--text-muted);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0;
}

.quest-dashboard-chip {
  border: 1px solid rgba(104, 199, 189, 0.28);
  border-radius: var(--radius-sm);
  padding: 0.24rem 0.5rem;
  background: rgba(104, 199, 189, 0.055);
  color: var(--text-secondary);
  font-size: 0.78rem;
}

.quest-dashboard-focus {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.75rem;
  background: rgba(53, 75, 71, 0.045);
}

.quest-dashboard-focus h4 {
  margin: 0 0 0.65rem;
  font-size: 0.92rem;
}

.quest-dashboard-focus-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.6rem;
}

.quest-dashboard-focus-card {
  min-width: 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.7rem;
  background: rgba(255, 255, 255, 0.035);
}

.quest-dashboard-focus-card.needs-review {
  border-color: rgba(216, 167, 58, 0.38);
  background: rgba(216, 167, 58, 0.055);
}

.quest-dashboard-focus-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
}

.quest-dashboard-focus-header strong,
.quest-dashboard-focus-card p {
  overflow-wrap: anywhere;
}

.quest-dashboard-focus-header strong {
  color: var(--text-primary);
  font-size: 0.92rem;
  line-height: 1.25;
}

.quest-dashboard-focus-header span {
  flex: 0 0 auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0.18rem 0.44rem;
  color: var(--text-secondary);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

.quest-dashboard-focus-meta {
  display: block;
  margin-top: 0.35rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  line-height: 1.35;
}

.quest-dashboard-focus-card p {
  margin: 0.45rem 0 0;
  color: var(--text-secondary);
  font-size: 0.82rem;
  line-height: 1.45;
}

.quest-dashboard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

/*
 * Chronicle editorial UI
 *
 * This layer deliberately replaces the prototype's dashboard-first presentation
 * while leaving its role-aware data and interaction contracts intact.
 */

:root {
  --bg-deep: #f5f0e5;
  --bg-panel: #ece4d5;
  --bg-card: #fffdf8;
  --bg-hover: #e8dfcf;
  --surface-subtle: rgba(53, 75, 71, 0.055);

  --text-primary: #20211f;
  --text-secondary: #504e48;
  --text-muted: #6b665e;
  --text-main: var(--text-primary);

  --accent-reference: #80602a;
  --accent-teal: #354b47;
  --accent-wax: #7a302d;
  --border-subtle: #d8cfbd;
  --border-active: #80602a;
  --panel-bg: #fffdf8;
  --error-color: #9d3430;
  --success-color: #2f5a38;
  --warning-color: #6b4d15;
  --chronicle-canvas: #f5f0e5;
  --chronicle-paper: #fffdf8;
  --chronicle-paper-raised: #fffefa;
  --chronicle-paper-soft: #f1eadd;
  --chronicle-paper-inset: #ece3d3;
  --chronicle-ink: #20211f;
  --chronicle-ink-soft: #45453f;
  --chronicle-pine: #314943;
  --chronicle-pine-light: #29453f;
  --chronicle-pine-deep: #1f3732;
  --chronicle-pine-black: #172925;
  --chronicle-wax: #7b302f;
  --chronicle-wax-light: #873733;
  --chronicle-wax-deep: #612321;
  --chronicle-bronze: #87652f;
  --chronicle-gold: #c19a55;
  --chronicle-gold-bright: #e0bd78;
  --chronicle-rule: #d9cebb;
  --chronicle-rule-strong: #c6b79f;
  --chronicle-muted: #6b665e;
  --chronicle-inverse: #fffaf0;
  --chronicle-inverse-muted: #c9c8bd;
  --chronicle-shadow: 0 24px 64px rgba(52, 43, 31, 0.13), 0 2px 8px rgba(52, 43, 31, 0.055);
  --chronicle-shadow-soft: 0 12px 32px rgba(52, 43, 31, 0.075), 0 1px 3px rgba(52, 43, 31, 0.045);
  --chronicle-shadow-float: 0 30px 90px rgba(19, 30, 27, 0.24), 0 4px 12px rgba(19, 30, 27, 0.14);
  --chronicle-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  --shell-header-height: 76px;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --shadow-card: var(--chronicle-shadow-soft);
  --shadow-lg: var(--chronicle-shadow);

  --font-sans: "Avenir Next", Avenir, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Iowan Old Style", Baskerville, Charter, "Palatino Linotype", Palatino, Georgia, serif;
  --font-display: "New York", "Iowan Old Style", Baskerville, Charter, Georgia, serif;
}

html {
  background: var(--chronicle-canvas);
  color-scheme: light;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  background:
    radial-gradient(circle at 78% -8%, rgba(193, 154, 85, 0.13), transparent 34rem),
    radial-gradient(circle at 12% 22%, rgba(49, 73, 67, 0.035), transparent 28rem),
    linear-gradient(180deg, #fbf8f0 0, var(--chronicle-canvas) 25rem);
  color: var(--chronicle-ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}

body::after {
  content: "";
  position: fixed;
  z-index: 5000;
  inset: 0;
  pointer-events: none;
  background-image: var(--chronicle-grain);
  background-size: 180px 180px;
  mix-blend-mode: multiply;
  opacity: 0.026;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a,
input,
select,
textarea,
summary {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid rgba(122, 48, 45, 0.72) !important;
  outline-offset: 3px;
}

.hidden {
  display: none !important;
}

.campaign-role-pending #dmAdminBtn,
.campaign-role-pending #settingsView,
.campaign-role-pending #newSessionBtn,
.campaign-role-pending #startRunBtn,
.campaign-role-pending #editSessionBtn,
.campaign-role-pending #exportSessionBtn,
.campaign-role-pending #deleteSessionBtn,
.campaign-role-pending #sessionProductionTools,
.campaign-role-pending #evidenceSections,
.campaign-role-pending #miniRunStatusCard {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  z-index: 3000;
  top: 0.75rem;
  left: 0.75rem;
  transform: translateY(-180%);
  border-radius: var(--radius-md);
  background: var(--chronicle-paper);
  color: var(--chronicle-wax);
  padding: 0.75rem 1rem;
  box-shadow: var(--chronicle-shadow);
  font-weight: 750;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* Shell */

.app-container {
  display: grid;
  grid-template-areas:
    "header header"
    "nav main";
  grid-template-columns: 216px minmax(0, 1fr);
  grid-template-rows: 72px minmax(calc(100vh - 72px), auto);
  width: 100%;
  min-height: 100vh;
  height: auto;
}

.main-layout {
  display: contents;
}

.top-bar {
  position: sticky;
  z-index: 100;
  top: 0;
  grid-area: header;
  display: grid;
  grid-template-columns: 216px minmax(360px, 1fr) auto;
  align-items: center;
  min-height: 72px;
  padding: 0 1.25rem 0 1.5rem;
  border: 0;
  border-bottom: 1px solid rgba(185, 145, 82, 0.28);
  background:
    linear-gradient(90deg, rgba(185, 145, 82, 0.08), transparent 32%),
    rgba(38, 57, 54, 0.98);
  box-shadow: 0 4px 18px rgba(27, 36, 34, 0.16);
}

.sigil-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  background: linear-gradient(145deg, #d7b478, var(--chronicle-gold));
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.brand h1,
.brand-lockup h1 {
  margin: 0;
  color: #fffaf0;
  font-family: var(--font-serif);
  font-size: 1.45rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.brand-lockup > span {
  margin-top: 0.28rem;
  color: #c9c6b9;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.top-controls {
  display: flex;
  min-width: 0;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 2.25rem);
  padding-inline: clamp(1rem, 3vw, 3rem);
}

.top-bar .control-label {
  color: #c9c6b9;
}

.campaign-control {
  min-width: 220px;
}

.search-group {
  max-width: 640px;
}

.top-bar select,
.top-bar input[type="search"],
.top-bar input[type="text"] {
  min-height: 40px;
  border-color: rgba(255, 250, 240, 0.2);
  background: rgba(16, 28, 26, 0.46);
  color: #fffaf0;
  box-shadow: none;
}

.top-bar input::placeholder {
  color: #aaa99f;
}

.top-bar .icon-btn {
  min-width: 42px;
  min-height: 42px;
  color: #ddd6c7;
}

.top-bar .icon-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  color: #fffaf0;
}

.top-bar :focus-visible,
.landing-card :focus-visible {
  outline-color: #f4c257 !important;
}

.user-controls {
  justify-self: end;
}

@media (min-width: 861px) {
  .user-controls {
    align-self: end;
    margin-bottom: 4px;
  }
}

.left-nav {
  position: sticky;
  z-index: 40;
  top: 72px;
  grid-area: nav;
  align-self: start;
  display: flex;
  height: calc(100vh - 72px);
  flex-direction: column;
  align-items: stretch;
  gap: 0.35rem;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  border: 0;
  border-right: 1px solid rgba(185, 145, 82, 0.18);
  background:
    linear-gradient(180deg, rgba(185, 145, 82, 0.075), transparent 16rem),
    var(--chronicle-pine-deep);
}

.nav-tab {
  display: flex;
  width: 100%;
  min-height: 48px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: #bcbeb5;
  font-size: 0.92rem;
  font-weight: 650;
  text-align: left;
}

.nav-tab .icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.nav-tab:hover {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.055);
  color: #fffaf0;
  transform: none;
}

.player-shell .nav-tab.player-primary {
  color: #bcbeb5;
}

.player-shell .nav-tab.player-primary.active,
.player-shell .nav-tab.player-primary[aria-current="page"] {
  color: #fffaf0;
}

.right-sidebar {
  display: none !important;
}

.content-area {
  grid-area: main;
  min-width: 0;
  overflow: visible;
  padding: clamp(1.5rem, 3vw, 3.5rem) clamp(1.25rem, 4vw, 4.5rem) 5rem;
  background: transparent;
}

.tab-view {
  max-width: 1280px;
  margin: 0 auto;
  animation: chronicle-enter 180ms ease-out;
}

.tab-view.active {
  display: block;
}

@keyframes chronicle-enter {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.view-header {
  display: flex;
  min-height: auto;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin: 0 0 1.75rem;
  padding: 0 0 1rem;
  border-bottom: 1px solid var(--chronicle-rule);
}

.view-header h2 {
  margin: 0;
  color: var(--chronicle-ink);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

.view-header h2:focus-visible {
  outline: 0 !important;
  box-shadow: 0 3px 0 rgba(185, 145, 82, 0.72);
}

.view-subtitle {
  max-width: 68ch;
  margin: 0.25rem 0 0;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.eyebrow,
.section-eyebrow {
  margin: 0 0 0.45rem;
  color: var(--chronicle-wax);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.meta {
  color: var(--chronicle-muted);
}

/* Controls */

select,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea {
  min-height: 44px;
  border: 1px solid #cfc4b1;
  border-radius: 7px;
  background: #fffefb;
  color: var(--chronicle-ink);
  box-shadow: inset 0 1px 2px rgba(52, 43, 31, 0.035);
}

textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.55;
  resize: vertical;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--chronicle-wax);
  outline: 3px solid rgba(122, 48, 45, 0.16);
}

.control-label {
  color: var(--chronicle-muted);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.primary-btn,
.btn-secondary,
button.primary-btn,
button.btn-secondary {
  min-height: 44px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 750;
  letter-spacing: 0.005em;
  box-shadow: none;
}

.primary-btn,
button.primary-btn {
  border: 1px solid var(--chronicle-wax);
  background: var(--chronicle-wax);
  color: #fffdf8;
  padding: 0.5rem 1rem;
}

.primary-btn:hover,
button.primary-btn:hover {
  border-color: #662522;
  background: #662522;
  opacity: 1;
}

.btn-secondary,
button.btn-secondary {
  border: 1px solid #bfb29d;
  background: transparent;
  color: var(--chronicle-pine-deep);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  transition: all 0.2s;
}

.btn-secondary:hover,
button.btn-secondary:hover {
  border-color: var(--chronicle-pine);
  background: rgba(53, 75, 71, 0.065);
  color: var(--chronicle-pine-deep);
  transform: translateY(-1px);
}

.primary-btn.small {
  min-height: 36px;
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
}

.btn-secondary.small {
  min-height: 36px;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.tag {
  border: 1px solid rgba(53, 75, 71, 0.14);
  border-radius: 999px;
  background: rgba(53, 75, 71, 0.07);
  color: var(--chronicle-pine-deep);
  font-size: 0.72rem;
  font-weight: 750;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border: 1px solid rgba(38, 57, 54, 0.24);
  border-radius: 12px;
  background: #ece8de;
  color: #263936;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.status-pill.completed,
.status-pill.complete,
.status-pill.ready,
.status-pill.published,
.status-pill.resolved {
  border-color: #a9c3ad;
  background: #e1ece2;
  color: #23482d;
}

.status-pill.warning,
.status-pill.partial,
.status-pill.queued,
.status-pill.running,
.status-pill.processing,
.status-pill.proposed {
  border-color: #d1ba82;
  background: #f3e8cd;
  color: #60450d;
}

.status-pill.active {
  border-color: #b2c2d7;
  background: #e1e9f4;
  color: #263f63;
}

.status-pill.failed,
.status-pill.blocked,
.status-pill.danger {
  border-color: #dab0ad;
  background: #f5dfdd;
  color: #7d2422;
}

.status-pill.abandoned,
.status-pill.idle {
  border-color: #c9c2b7;
  background: #e8e4dc;
  color: #4f4a44;
}

/* Landing */

.landing-screen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow-y: auto;
  padding: clamp(1rem, 5vw, 4rem);
  background:
    radial-gradient(circle at 20% 20%, rgba(185, 145, 82, 0.2), transparent 28rem),
    radial-gradient(circle at 90% 90%, rgba(122, 48, 45, 0.14), transparent 26rem),
    var(--chronicle-pine-deep);
}

.landing-card {
  position: relative;
  display: grid;
  width: min(100%, 1040px);
  max-width: 1040px;
  min-height: 570px;
  grid-template-columns: minmax(240px, 0.72fr) minmax(300px, 1.28fr);
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 6vw, 5.5rem);
  border: 1px solid rgba(185, 145, 82, 0.42);
  border-radius: 3px;
  background:
    linear-gradient(90deg, rgba(27, 43, 40, 0.98), rgba(38, 57, 54, 0.94)),
    var(--chronicle-pine-deep);
  box-shadow: 0 34px 100px rgba(8, 13, 12, 0.38);
  text-align: left;
}

.landing-card::before,
.landing-card::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(185, 145, 82, 0.17);
  border-radius: 50%;
  pointer-events: none;
}

.landing-card::before {
  top: -14rem;
  right: -10rem;
  width: 36rem;
  height: 36rem;
  box-shadow: 0 0 0 4rem rgba(185, 145, 82, 0.025);
}

.landing-card::after {
  right: 5rem;
  bottom: -16rem;
  width: 26rem;
  height: 26rem;
}

.landing-mark {
  position: relative;
  z-index: 1;
  display: grid;
  width: clamp(150px, 20vw, 220px);
  height: clamp(150px, 20vw, 220px);
  place-items: center;
  border: 1px solid rgba(185, 145, 82, 0.38);
  border-radius: 50%;
}

.landing-mark::before,
.landing-mark::after {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(185, 145, 82, 0.22);
  transform: rotate(45deg);
}

.landing-mark::after {
  inset: 28%;
}

.landing-copy {
  position: relative;
  z-index: 1;
}

.landing-card .eyebrow {
  color: #d3b77d;
}

.landing-card h1 {
  max-width: 11ch;
  margin: 0 0 1.25rem;
  color: #fffaf0;
  font-family: var(--font-serif);
  font-size: clamp(2.7rem, 6vw, 5.4rem);
  font-weight: 550;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.landing-card .landing-copy > p:not(.eyebrow) {
  max-width: 54ch;
  margin: 0 0 1.75rem;
  color: #cecbbf;
  font-size: 1.05rem;
  line-height: 1.7;
}

.landing-actions {
  justify-content: flex-start;
}

.landing-card .primary-btn {
  min-height: 48px;
  border-color: #d5b36f;
  background: #d0aa62;
  color: #1f2927;
  padding-inline: 1.35rem;
}

.landing-card .primary-btn:hover,
.landing-card .primary-btn:focus-visible {
  border-color: #e4c987;
  background: #dfbd77;
  color: #1f2927;
  opacity: 1;
}

.landing-details {
  position: absolute;
  z-index: 1;
  right: clamp(2rem, 6vw, 5.5rem);
  bottom: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  color: #aaa99f;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.landing-details span + span::before {
  content: "·";
  margin-right: 1.25rem;
  color: var(--chronicle-gold);
}

/* Premium editorial shell and component finish */

.app-container,
.app-container.session-reading-mode {
  grid-template-columns: 228px minmax(0, 1fr);
  grid-template-rows: var(--shell-header-height) minmax(calc(100vh - var(--shell-header-height)), auto);
}

.top-bar {
  grid-template-columns: 228px minmax(420px, 1fr) auto;
  min-height: var(--shell-header-height);
  padding: 0 1.5rem 0 1.65rem;
  border-bottom-color: rgba(193, 154, 85, 0.34);
  background:
    linear-gradient(90deg, rgba(193, 154, 85, 0.1), transparent 24%),
    linear-gradient(180deg, var(--chronicle-pine), var(--chronicle-pine-deep));
  box-shadow: 0 8px 26px rgba(23, 41, 37, 0.17);
}

.brand {
  gap: 0.82rem;
}

.sigil-icon,
.landing-brand-sigil {
  background: var(--chronicle-gold-bright);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.65'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='m12 4.8 2.25 4.95L19.2 12l-4.95 2.25L12 19.2l-2.25-4.95L4.8 12l4.95-2.25L12 4.8Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.45' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sigil-icon {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}

.brand-lockup h1 {
  color: var(--chronicle-inverse);
  font-family: var(--font-display);
  font-size: 1.58rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.brand-lockup span {
  color: var(--chronicle-inverse-muted);
  font-size: 0.61rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.top-controls {
  align-items: end;
  gap: clamp(1rem, 2.5vw, 2.25rem);
  padding-inline: clamp(1.25rem, 3vw, 3.25rem);
}

.campaign-control {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, auto) 42px;
  grid-template-rows: auto 42px;
  align-items: center;
  gap: 0.28rem 0.8rem;
}

.campaign-control .control-label {
  grid-column: 1;
  grid-row: 1;
}

.campaign-control select {
  grid-column: 1;
  grid-row: 2;
}

.campaign-control .icon-add {
  grid-column: 2;
  grid-row: 2;
}

.top-bar select,
.top-bar input[type="search"],
.top-bar input[type="text"] {
  min-height: 44px;
  border-color: rgba(255, 250, 240, 0.18);
  border-radius: var(--radius-md);
  background-color: rgba(14, 28, 24, 0.48);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.top-bar input[type="search"] {
  padding-left: 2.7rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23d1cfc3' stroke-linecap='round' stroke-width='1.7'%3E%3Ccircle cx='10.8' cy='10.8' r='5.8'/%3E%3Cpath d='m15.1 15.1 4.1 4.1'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0.85rem center;
  background-size: 1.15rem;
}

.campaign-control select {
  width: 100%;
  min-width: min(270px, 25vw);
}

.left-nav {
  top: var(--shell-header-height);
  height: calc(100vh - var(--shell-header-height));
  gap: 0.22rem;
  padding: 1.75rem 1rem;
  border-right-color: rgba(193, 154, 85, 0.2);
  background:
    radial-gradient(circle at 0 0, rgba(193, 154, 85, 0.12), transparent 15rem),
    linear-gradient(180deg, var(--chronicle-pine-deep), var(--chronicle-pine-black));
}

.nav-tab {
  min-height: 50px;
  gap: 0.9rem;
  padding: 0.74rem 0.82rem;
  border-radius: var(--radius-sm);
  color: var(--chronicle-inverse-muted);
  font-weight: 600;
}

.nav-tab .icon {
  width: 22px;
  height: 22px;
  flex-basis: 22px;
}

.nav-tab .label {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-transform: none;
}

.nav-icon-home {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'%3E%3Cpath d='m3.5 10.6 8.5-7 8.5 7'/%3E%3Cpath d='M5.7 9v11h12.6V9M9.4 20v-6h5.2v6'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-icon-sessions {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'%3E%3Cpath d='M3.7 5.3c2.9-.9 5.7-.2 8.3 1.8v12c-2.6-2-5.4-2.6-8.3-1.8v-12Z'/%3E%3Cpath d='M20.3 5.3c-2.9-.9-5.7-.2-8.3 1.8v12c2.6-2 5.4-2.6 8.3-1.8v-12Z'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-icon-world {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m12 5 2.1 4.9L19 12l-4.9 2.1L12 19l-2.1-4.9L5 12l4.9-2.1L12 5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-icon-quests {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.7'%3E%3Cpath d='M5 4.5h12.5a2 2 0 0 1 2 2v11H7a2 2 0 0 0-2 2v-15Z'/%3E%3Cpath d='M8.3 8.2h7.8M8.3 11.8h7.8M8.3 15.4h5.2'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-icon-ask {
  --nav-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-width='1.7'%3E%3Ccircle cx='10.6' cy='10.6' r='6.2'/%3E%3Cpath d='m15.2 15.2 4.4 4.4'/%3E%3C/g%3E%3C/svg%3E");
}

.nav-tab:hover {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.045);
}

.nav-tab.active,
.nav-tab[aria-current="page"] {
  border-color: transparent;
  background: linear-gradient(90deg, rgba(193, 154, 85, 0.17), rgba(193, 154, 85, 0.055));
  color: var(--chronicle-inverse);
  box-shadow: inset 2px 0 0 var(--chronicle-gold-bright);
}

.content-area {
  padding: clamp(2rem, 4vw, 4.25rem) clamp(1.5rem, 5vw, 5.25rem) 6rem;
}

.view-header {
  position: relative;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom-color: rgba(135, 101, 47, 0.23);
}

.view-header h2 {
  font-family: var(--font-display);
  font-size: clamp(2.35rem, 4.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.035em;
}

.view-header h2::after {
  content: "";
  display: block;
  width: clamp(5.5rem, 11vw, 9rem);
  height: 1px;
  margin-top: 0.7rem;
  background: linear-gradient(90deg, var(--chronicle-gold), transparent);
}

.view-subtitle {
  max-width: 62ch;
  margin-top: 0.45rem;
  color: var(--chronicle-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.eyebrow,
.section-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
}

select,
input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="number"],
textarea {
  border-color: var(--chronicle-rule-strong);
  background: var(--chronicle-paper-raised);
  box-shadow: inset 0 1px 2px rgba(52, 43, 31, 0.025);
}

.primary-btn,
.btn-secondary,
button.primary-btn,
button.btn-secondary {
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.primary-btn,
button.primary-btn {
  border-color: var(--chronicle-wax);
  background: linear-gradient(180deg, var(--chronicle-wax-light), var(--chronicle-wax));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 5px 14px rgba(97, 35, 33, 0.14);
}

.primary-btn:hover,
button.primary-btn:hover {
  border-color: var(--chronicle-wax-deep);
  background: var(--chronicle-wax-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 7px 18px rgba(97, 35, 33, 0.19);
  transform: translateY(-1px);
}

.btn-secondary,
button.btn-secondary {
  border-color: var(--chronicle-rule-strong);
  background: rgba(255, 254, 250, 0.46);
}

.btn-secondary:hover,
button.btn-secondary:hover {
  border-color: var(--chronicle-pine);
  background: rgba(49, 73, 67, 0.065);
  box-shadow: 0 4px 12px rgba(52, 43, 31, 0.055);
}

.landing-card {
  min-height: 610px;
  border-color: rgba(193, 154, 85, 0.48);
  background:
    radial-gradient(circle at 84% 20%, rgba(193, 154, 85, 0.13), transparent 20rem),
    linear-gradient(115deg, var(--chronicle-pine-black), var(--chronicle-pine-deep) 64%, var(--chronicle-pine-light));
  box-shadow: var(--chronicle-shadow-float);
}

.landing-brand {
  position: absolute;
  z-index: 2;
  top: clamp(1.4rem, 3vw, 2.35rem);
  left: clamp(1.5rem, 4vw, 3.25rem);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.landing-brand-sigil {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.landing-brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.landing-brand-copy strong {
  color: var(--chronicle-inverse);
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.025em;
}

.landing-brand-copy small {
  margin-top: 0.3rem;
  color: var(--chronicle-inverse-muted);
  font-size: 0.56rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.landing-mark {
  border-color: rgba(193, 154, 85, 0.32);
  box-shadow: inset 0 0 0 1.5rem rgba(193, 154, 85, 0.018);
}

.landing-mark span {
  width: 78px;
  height: 78px;
  background: var(--chronicle-gold-bright);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='8.8'/%3E%3Cpath d='m12 3.6 2.65 5.75L20.4 12l-5.75 2.65L12 20.4l-2.65-5.75L3.6 12l5.75-2.65L12 3.6Z'/%3E%3C/g%3E%3Ccircle cx='12' cy='12' r='1.5' fill='black'/%3E%3C/svg%3E") no-repeat center / contain;
}

.landing-card h1 {
  max-width: 10ch;
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.048em;
}

.landing-card .landing-copy > p:not(.eyebrow) {
  color: var(--chronicle-inverse-muted);
}

.icon-btn.icon-add::before {
  content: "";
  width: 22px;
  height: 22px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-width='1.8'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

.icon-settings {
  --button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.65'%3E%3Ccircle cx='12' cy='12' r='3.1'/%3E%3Cpath d='M19.1 13.4c.1-.5.1-.9 0-1.4l2-1.5-2-3.5-2.5 1a8.2 8.2 0 0 0-2.4-1.4L13.9 4H10l-.4 2.6A8.2 8.2 0 0 0 7.2 8L4.8 7l-2 3.5 2 1.5a7.7 7.7 0 0 0 0 2.8l-2 1.5 2 3.4 2.4-1a8.2 8.2 0 0 0 2.4 1.4l.4 2.6h3.9l.3-2.6a8.2 8.2 0 0 0 2.4-1.4l2.5 1 2-3.4-2-1.5Z'/%3E%3C/g%3E%3C/svg%3E");
}

.icon-btn.icon-settings::before {
  width: 22px;
  height: 22px;
}