/* ============================================================
   UMBRAL · INVESTOR COMMAND — V2 "ATELIER"
   Deep-forest luxury: Fraunces display serif, mono instrumentation,
   luminous gold on botanical black. Every surface breathes.
   ============================================================ */

:root {
  --void: #030503;
  --abyss: #050805;
  --obsidian: #0a0f0a;
  --canopy: #0f160f;
  --moss: #182216;

  --cream: #ffffff;
  --soft: rgba(255, 255, 255, .95);
  --muted: rgba(255, 255, 255, .88);
  --ghost: rgba(255, 255, 255, .74);
  --faint: rgba(255, 255, 255, .6);

  --gold: #d8b476;
  --gold-bright: #f5e4b8;
  --gold-deep: #8d6c30;
  --gold-dim: rgba(216, 180, 118, .3);
  --gold-glow: rgba(216, 180, 118, .16);
  --gold-line: rgba(216, 180, 118, .17);

  --emerald: #85b878;
  --emerald-deep: #2e5231;
  --amber: #e3b95f;

  --panel: rgba(10, 15, 10, .66);
  --panel-strong: rgba(7, 11, 7, .93);
  --glass: rgba(255, 255, 255, .03);
  --glass-hover: rgba(255, 255, 255, .055);
  --line: rgba(216, 180, 118, .15);
  --line-strong: rgba(216, 180, 118, .38);
  --hairline: rgba(255, 255, 255, .07);

  --shadow: 0 40px 110px rgba(0, 0, 0, .55);
  --shadow-soft: 0 18px 50px rgba(0, 0, 0, .38);
  --glow-gold: 0 0 42px rgba(216, 180, 118, .18);

  --serif: "Fraunces", "Playfair Display", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: "Spline Sans Mono", "SF Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --topbar: 72px;
}

[data-theme="light"] {
  --void: #f3edda;
  --abyss: #ede6d0;
  --obsidian: #fdf8ea;
  --canopy: #f7f1df;
  --moss: #e6ecd8;

  --cream: #10120c;
  --soft: #10120c;
  --muted: #1b1d16;
  --ghost: #2c3025;
  --faint: #3d4334;

  --gold: #7d5c22;
  --gold-bright: #58400f;
  --gold-deep: #4b3818;
  --gold-dim: rgba(125, 92, 34, .3);
  --gold-glow: rgba(125, 92, 34, .12);
  --gold-line: rgba(96, 72, 30, .2);

  --emerald: #3e6f3a;
  --emerald-deep: #b9ccab;
  --amber: #8b5f12;

  --panel: rgba(253, 248, 234, .74);
  --panel-strong: rgba(255, 252, 242, .95);
  --glass: rgba(20, 22, 12, .035);
  --glass-hover: rgba(20, 22, 12, .06);
  --line: rgba(60, 48, 22, .16);
  --line-strong: rgba(60, 48, 22, .36);
  --hairline: rgba(20, 22, 12, .09);

  --shadow: 0 32px 90px rgba(46, 40, 22, .2);
  --shadow-soft: 0 16px 42px rgba(46, 40, 22, .14);
  --glow-gold: 0 0 42px rgba(125, 92, 34, .1);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100%;
  overflow-x: clip;
  background: var(--void);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--void); }
:focus-visible { outline: 1px solid var(--gold-bright); outline-offset: 4px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Thin luxe scrollbars for inner panes */
.rail-document-list, .reader-contents {
  scrollbar-width: thin;
  scrollbar-color: var(--gold-dim) transparent;
}
.rail-document-list::-webkit-scrollbar,
.reader-contents::-webkit-scrollbar { width: 4px; }
.rail-document-list::-webkit-scrollbar-thumb,
.reader-contents::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 4px; }

/* ---------- Atmosphere layers ---------- */
.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -6;
  background:
    radial-gradient(ellipse 84% 52% at 72% -18%, rgba(216, 180, 118, .1), transparent 62%),
    radial-gradient(ellipse 50% 40% at 96% 74%, rgba(35, 78, 45, .3), transparent 64%),
    radial-gradient(ellipse 52% 38% at 4% 106%, rgba(216, 180, 118, .06), transparent 68%),
    linear-gradient(180deg, #040604 0%, #091009 46%, #050705 100%);
}

[data-theme="light"] .atmosphere {
  background:
    radial-gradient(ellipse 78% 48% at 76% -16%, rgba(125, 92, 34, .16), transparent 64%),
    radial-gradient(ellipse 48% 36% at 2% 104%, rgba(84, 122, 64, .16), transparent 68%),
    linear-gradient(180deg, #fdf8ea 0%, #f3edda 48%, #eae2c9 100%);
}

/* Drifting light — three slow bloom orbs */
.aurora { position: fixed; inset: 0; z-index: -5; pointer-events: none; overflow: clip; }
.aurora span {
  position: absolute;
  width: 56vmax;
  height: 56vmax;
  border-radius: 50%;
  opacity: .55;
}
.aurora span:nth-child(1) {
  top: -24vmax; right: -14vmax;
  background: radial-gradient(circle, rgba(216,180,118,.11) 12%, transparent 62%);
}
.aurora span:nth-child(2) {
  bottom: -28vmax; left: -16vmax;
  background: radial-gradient(circle, rgba(60,118,66,.15) 12%, transparent 60%);
}
.aurora span:nth-child(3) {
  top: 30%; left: 38%;
  width: 42vmax; height: 42vmax;
  background: radial-gradient(circle, rgba(216,180,118,.045) 12%, transparent 66%);
}
[data-theme="light"] .aurora { display: none; }

/* Topographic contour lines, drawn and drifting */
.contour-field {
  position: fixed;
  inset: 0;
  z-index: -4;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: .8;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 34%, black, transparent 88%);
}
.contour {
  stroke: var(--gold);
  stroke-width: 1;
  opacity: .07;
  stroke-dasharray: 8 14;
}
.contour.c2 { opacity: .05; stroke-dashoffset: 60; }
.contour.c3 { opacity: .065; stroke-dashoffset: 26; }
.contour.c4 { opacity: .045; stroke-dashoffset: 84; }
.contour.c5 { opacity: .06; stroke-dashoffset: 42; }
.contour.c6 { opacity: .04; stroke-dashoffset: 108; }
[data-theme="light"] .contour { opacity: .13; }
[data-theme="light"] .contour.c2, [data-theme="light"] .contour.c4, [data-theme="light"] .contour.c6 { opacity: .09; }

.grain {
  position: fixed;
  inset: -40%;
  z-index: -3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
  animation: grain 9s steps(6) infinite;
}
[data-theme="light"] .grain { opacity: .035; mix-blend-mode: multiply; }
@keyframes grain { 50% { transform: translate(2%, 1%); } }

/* Reading progress beam */
.reader-progress {
  position: fixed;
  z-index: 220;
  top: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 55%, var(--gold-bright));
  box-shadow: 0 0 20px rgba(216,180,118,.7), 0 0 4px rgba(245,228,184,.9);
  transition: width .12s linear;
}

/* ============================================================
   THE GATE
   ============================================================ */
.gate {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: 2rem;
  overflow: auto;
  isolation: isolate;
}

.gate-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: url("../Backgrounds/Page01.png") center 46% / cover no-repeat;
  animation: backdrop-settle 2.4s var(--ease) both;
}
@keyframes backdrop-settle {
  from { transform: scale(1.05); opacity: .6; }
  to { transform: scale(1); opacity: 1; }
}

.gate-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 52% 42%, rgba(216,180,118,.13), transparent 28%),
    radial-gradient(circle at 50% 46%, rgba(6,9,6,.32), rgba(4,6,4,.9) 74%),
    linear-gradient(180deg, rgba(4,6,4,.44), rgba(4,6,4,.8));
  backdrop-filter: blur(3px);
}

[data-theme="light"] .gate-shade {
  background:
    radial-gradient(circle at 52% 42%, rgba(125,92,34,.14), transparent 30%),
    radial-gradient(circle at 50% 46%, rgba(253,248,234,.12), rgba(243,237,218,.82) 74%),
    linear-gradient(180deg, rgba(253,248,234,.4), rgba(234,226,201,.78));
}

/* Still god-rays behind the panel */
.gate-rays {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .38;
  background: conic-gradient(from 190deg at 52% 30%,
    transparent 0deg, rgba(216,180,118,.09) 8deg, transparent 17deg,
    transparent 26deg, rgba(216,180,118,.06) 33deg, transparent 42deg,
    transparent 58deg, rgba(216,180,118,.08) 66deg, transparent 76deg,
    transparent 360deg);
  animation: rays-in 2.6s var(--ease) both;
}
[data-theme="light"] .gate-rays { opacity: .2; }
@keyframes rays-in { from { opacity: 0; } }

.gate-panel {
  position: relative;
  width: min(540px, 100%);
  text-align: center;
  padding: clamp(2.2rem, 6vw, 4.4rem);
  border: 1px solid var(--line-strong);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(13,19,13,.8), rgba(5,8,5,.88)),
    var(--panel-strong);
  box-shadow: var(--shadow), var(--glow-gold), inset 0 0 0 1px rgba(255,255,255,.035);
  backdrop-filter: blur(24px);
  animation: gate-arrive 1.1s var(--ease) both;
}

[data-theme="light"] .gate-panel {
  background:
    linear-gradient(180deg, rgba(255,252,242,.86), rgba(247,241,223,.92)),
    var(--panel-strong);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.85);
}

@keyframes gate-arrive {
  from { opacity: 0; transform: translateY(26px) scale(.985); filter: blur(10px); }
}

/* Ornamental corner brackets that draw themselves */
.panel-corner {
  position: absolute;
  width: 26px;
  height: 26px;
  pointer-events: none;
  opacity: 0;
  animation: corner-in 1s var(--ease) .55s both;
}
.panel-corner::before, .panel-corner::after {
  content: "";
  position: absolute;
  background: linear-gradient(90deg, var(--gold), var(--gold-bright));
}
.panel-corner::before { width: 100%; height: 1px; }
.panel-corner::after { width: 1px; height: 100%; }
.panel-corner.tl { top: 12px; left: 12px; }
.panel-corner.tr { top: 12px; right: 12px; transform: rotate(90deg); }
.panel-corner.br { bottom: 12px; right: 12px; transform: rotate(180deg); }
.panel-corner.bl { bottom: 12px; left: 12px; transform: rotate(270deg); }
@keyframes corner-in { from { opacity: 0; scale: .4; } to { opacity: .85; scale: 1; } }

.gate-panel > * { animation: rise-in .9s var(--ease) both; }
.gate-panel > *:nth-child(5) { animation-delay: .12s; }
.gate-panel > *:nth-child(6) { animation-delay: .18s; }
.gate-panel > *:nth-child(7) { animation-delay: .24s; }
.gate-panel > *:nth-child(8) { animation-delay: .3s; }
.gate-panel > *:nth-child(9) { animation-delay: .38s; }
.gate-panel > *:nth-child(10) { animation-delay: .46s; }
.gate-panel > *:nth-child(11) { animation-delay: .54s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(14px); } }

.gate-logo {
  max-height: 210px;
  margin: 0 auto .6rem;
  filter: drop-shadow(0 14px 34px rgba(0,0,0,.5));
}
[data-theme="light"] .gate-logo { filter: drop-shadow(0 10px 26px rgba(46,40,22,.28)) brightness(.32) sepia(.32); }

.gate-rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: min(240px, 70%);
  margin: .4rem auto 1.4rem;
}
.gate-rule span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-dim));
}
.gate-rule span:last-child { background: linear-gradient(90deg, var(--gold-dim), transparent); }
.gate-rule i {
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(216,180,118,.8);
  animation: diamond-pulse 3.4s ease-in-out infinite;
}
@keyframes diamond-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(216,180,118,.5); }
  50% { box-shadow: 0 0 18px rgba(216,180,118,.95); }
}

.gate-kicker {
  margin: 0 0 .8rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .64rem;
  font-weight: 400;
  letter-spacing: .42em;
  text-transform: uppercase;
}

.gate h1 {
  margin: 0 0 .7rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.4rem, 6.4vw, 3.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: .005em;
  background: linear-gradient(120deg, var(--cream) 30%, var(--gold-bright) 52%, var(--cream) 72%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rise-in .9s var(--ease) both, title-shimmer 7s ease-in-out 1.6s infinite;
}
@keyframes title-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.gate-lede { margin: 0 auto 2rem; max-width: 34ch; color: var(--muted); font-size: .95rem; font-weight: 300; }

.gate form { margin: 0 0 1.8rem; }
.gate label {
  display: block;
  margin-bottom: .7rem;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.password-field {
  position: relative;
  display: flex;
  gap: .5rem;
  padding: .45rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.password-field:focus-within {
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px var(--gold-glow), 0 0 36px rgba(216,180,118,.14);
}
[data-theme="light"] .password-field {
  background: rgba(255,255,255,.62);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.password-field input {
  flex: 1;
  min-width: 0;
  padding: .65rem .8rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--cream);
  font-family: var(--mono);
  letter-spacing: .14em;
}
.password-field input:focus { outline: none; }

.password-field button {
  position: relative;
  overflow: hidden;
  padding: .65rem 1.5rem;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(118deg, var(--gold-deep), var(--gold) 55%, var(--gold-deep));
  background-size: 200% 100%;
  color: #120d04;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-position .6s var(--ease), transform .3s var(--ease), box-shadow .4s var(--ease);
}
.password-field button:hover {
  background-position: 100% 0;
  transform: translateY(-1px);
  box-shadow: 0 8px 26px rgba(216,180,118,.32);
}
.password-field button:active { transform: translateY(0); }
.password-field button::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -110% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 50%, transparent 70%);
  transition: translate .7s var(--ease);
}
.password-field button:hover::after { translate: 110% 0; }
[data-theme="light"] .password-field button { color: #fdf8ea; background: linear-gradient(118deg, #55401c, #82602a 55%, #55401c); background-size: 200% 100%; }

.gate-input {
  width: 100%;
  margin: 0 0 1rem;
  padding: .8rem .95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  color: var(--cream);
  font-family: var(--mono);
  font-size: .9rem;
  letter-spacing: .06em;
  transition: border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.gate-input::placeholder { color: var(--faint); letter-spacing: .04em; }
.gate-input:focus {
  outline: none;
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 0 0 4px var(--gold-glow);
}
[data-theme="light"] .gate-input { background: rgba(255,255,255,.62); box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }

.gate-error {
  min-height: 1.2em;
  margin: .85rem 0 0;
  color: #e79c8a;
  font-size: .82rem;
  letter-spacing: .02em;
}
[data-theme="light"] .gate-error { color: #a33d24; }

.gate-panel.shake { animation: shake .5s var(--ease); }
@keyframes shake { 25% { transform: translateX(-8px); } 50% { transform: translateX(7px); } 75% { transform: translateX(-3px); } }

.confidential {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  margin: 0;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}

/* Unlock sequence */
.gate.unlocking { animation: gate-dissolve .75s var(--ease) .18s both; pointer-events: none; }
.gate.unlocking .gate-panel { animation: panel-ascend .7s var(--ease) both; }
@keyframes gate-dissolve { to { opacity: 0; visibility: hidden; } }
@keyframes panel-ascend { to { opacity: 0; transform: translateY(-34px) scale(1.03); filter: blur(14px); } }

/* ============================================================
   DASHBOARD SHELL
   ============================================================ */
.dashboard { min-height: 100vh; }

.dashboard.dashboard-enter .topbar { animation: rise-in .8s var(--ease) both; }
.dashboard.dashboard-enter .document-rail { animation: slide-right .9s var(--ease) .08s both; }
.dashboard.dashboard-enter .content-shell { animation: rise-in .95s var(--ease) .14s both; }
.dashboard.dashboard-enter .command-insights { animation: slide-left .9s var(--ease) .2s both; }
@keyframes slide-right { from { opacity: 0; transform: translateX(-24px); } }
@keyframes slide-left { from { opacity: 0; transform: translateX(24px); } }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 1.2rem;
  height: var(--topbar);
  padding: 0 1.4rem;
  background: color-mix(in srgb, var(--void) 62%, transparent);
  backdrop-filter: blur(26px) saturate(1.3);
}
.topbar::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 18%, var(--gold-line) 82%, transparent);
}

.rail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 11px;
  background: var(--glass);
  color: var(--ghost);
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.rail-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rail-toggle:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
  background: var(--gold-glow);
}
.rail-toggle .rail-toggle-caret { transition: transform .45s var(--ease); transform-origin: 13px 12px; }
.rail-toggle[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-dim); }
.rail-toggle[aria-pressed="true"] .rail-toggle-caret { transform: rotate(180deg); }

.brand-button {
  padding: .3rem 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity .3s var(--ease), filter .3s var(--ease);
}
.brand-button:hover { filter: brightness(1.2); }
.brand-button img { width: 224px; }
[data-theme="light"] .brand-button img { filter: brightness(.26) sepia(.4); }

.search-field {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 42px;
  max-width: 460px;
  padding-inline: 1rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.top-search { margin-left: 2rem; }
.search-field:focus-within {
  border-color: var(--line-strong);
  background: var(--glass-hover);
  box-shadow: 0 0 0 4px var(--gold-glow);
}
.search-field svg {
  width: 15px;
  flex: none;
  fill: none;
  stroke: var(--ghost);
  stroke-width: 1.7;
  stroke-linecap: round;
  transition: stroke .35s var(--ease);
}
.search-field:focus-within svg { stroke: var(--gold); }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-size: .86rem;
}
.search-field input::placeholder { color: var(--ghost); }
.search-field input:focus { outline: none; }
.search-field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-field kbd {
  flex: none;
  padding: .18rem .5rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .1em;
}

.topbar-status {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--muted);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}

.secure-dot {
  position: relative;
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 10px rgba(133,184,120,.8);
}
.secure-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid var(--emerald);
  animation: sonar 2.6s var(--ease-soft) infinite;
}
@keyframes sonar {
  from { opacity: .9; transform: scale(.4); }
  to { opacity: 0; transform: scale(1.7); }
}

.theme-toggle,
.lock-button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .48rem .85rem;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--glass);
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .06em;
  cursor: pointer;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.admin-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .48rem .95rem;
  border: 1px solid var(--gold-dim);
  border-radius: 999px;
  background: var(--gold-glow);
  color: var(--gold-bright);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.admin-link[hidden] { display: none; }
.admin-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.admin-link:hover { border-color: var(--line-strong); background: color-mix(in srgb, var(--gold) 16%, transparent); transform: translateY(-1px); }
.theme-toggle:hover,
.lock-button:hover {
  color: var(--gold-bright);
  border-color: var(--line-strong);
  background: var(--glass-hover);
  box-shadow: 0 0 22px rgba(216,180,118,.1);
}

.theme-toggle-icon {
  position: relative;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.4px solid currentColor;
  overflow: hidden;
  transition: transform .5s var(--ease);
}
.theme-toggle:hover .theme-toggle-icon { transform: rotate(40deg); }
.theme-toggle-icon::before {
  content: "";
  position: absolute;
  inset: 0 50% 0 0;
  background: currentColor;
}

.lock-button svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }

/* ---------- Command shell grid ---------- */
.command-shell {
  --rail-width: 384px;
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr) 332px;
  align-items: start;
  min-height: calc(100vh - var(--topbar));
  transition: grid-template-columns .55s var(--ease);
}

/* Collapsible rail — slides out to the left and pops back. */
.dashboard.rail-collapsed .command-shell { grid-template-columns: 0 minmax(0, 1fr) 332px; }
.dashboard.rail-collapsed .document-rail {
  transform: translateX(-102%);
  opacity: 0;
  pointer-events: none;
}

/* ============================================================
   DOCUMENT RAIL (left)
   ============================================================ */
.document-rail {
  position: sticky;
  top: var(--topbar);
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--topbar));
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--obsidian) 66%, transparent), transparent 40%);
  transition: transform .55s var(--ease), opacity .4s var(--ease);
}
/* Hold an intrinsic width so the rail slides out cleanly instead of squashing. */
.rail-header, .rail-footer { min-width: calc(var(--rail-width, 384px) - 1px); }
.rail-document-list { min-width: calc(var(--rail-width, 384px) - 1px); }

.rail-header {
  display: grid;
  gap: .85rem;
  padding: 1.05rem 1rem .9rem;
}
.rail-library-switch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--obsidian) 78%, transparent);
}
.rail-library-switch button {
  min-height: 44px;
  padding: .65rem .4rem;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ghost);
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .02em;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.rail-library-switch button[aria-pressed="true"] {
  border-color: var(--gold-dim);
  background: var(--gold-glow);
  color: var(--gold-bright);
}
.rail-header-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-inline: .25rem;
}
.rail-header p {
  margin: 0;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.rail-header strong {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gold);
}

.rail-document-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: .75rem .55rem 1rem;
}

.rail-group { margin-bottom: .85rem; }

.rail-group-heading {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .6rem;
  width: 100%;
  padding: .45rem .6rem .35rem;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.rail-group-heading span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .14em;
}
.rail-group-heading strong {
  overflow: hidden;
  color: var(--ghost);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .3s var(--ease);
}
.rail-group-heading em { color: var(--faint); font-family: var(--mono); font-size: .58rem; font-style: normal; }
.rail-group-heading:hover strong, .rail-group-heading.active strong { color: var(--gold); }

.rail-doc-row {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: start;
  gap: .55rem;
  width: 100%;
  padding: .72rem .7rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: row-in .55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 14ms);
  transition: background .28s var(--ease), transform .28s var(--ease);
}
@keyframes row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; } }

.rail-doc-row:hover { background: var(--glass); transform: translateX(2px); }
.rail-doc-row.active { background: linear-gradient(90deg, var(--gold-glow), transparent 85%); }
.rail-doc-row.active::before {
  content: "";
  position: absolute;
  left: -2px;
  top: 18%;
  bottom: 18%;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(216,180,118,.7);
}

.rail-doc-number {
  padding-top: .08rem;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .76rem;
  transition: color .28s var(--ease);
}
.rail-doc-row:hover .rail-doc-number, .rail-doc-row.active .rail-doc-number { color: var(--gold); }

.rail-doc-main { display: grid; min-width: 0; }
.rail-doc-main strong {
  overflow: visible;
  color: var(--soft);
  font-size: .95rem;
  font-weight: 550;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: color .28s var(--ease);
}
.rail-doc-row:hover .rail-doc-main strong { color: var(--soft); }
.rail-doc-row.active .rail-doc-main strong { color: var(--gold-bright); }
.rail-doc-main small { margin-top: .18rem; color: var(--ghost); font-size: .72rem; letter-spacing: .02em; }

.rail-doc-state {
  margin-top: .42rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transition: box-shadow .3s var(--ease);
}
.rail-doc-state.read { background: var(--emerald); box-shadow: 0 0 8px rgba(133,184,120,.55); }
.rail-doc-state.progress { background: var(--amber); box-shadow: 0 0 8px rgba(227,185,95,.55); animation: state-breathe 2.8s ease-in-out infinite; }
.rail-doc-state.unread { background: transparent; border: 1px solid var(--faint); }
@keyframes state-breathe { 50% { box-shadow: 0 0 14px rgba(227,185,95,.85); } }

.rail-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 1.25rem;
  border-top: 1px solid var(--hairline);
}
.rail-footer span {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.rail-footer button {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .3s var(--ease), letter-spacing .3s var(--ease);
}
.rail-footer button:hover { color: var(--gold-bright); letter-spacing: .26em; }

/* ============================================================
   CONTENT SHELL & LIBRARY
   ============================================================ */
.content-shell { min-width: 0; border-right: 1px solid var(--line); }

.library-view.view-enter { animation: view-in .7s var(--ease) both; }
.reader-view.view-enter { animation: view-in .7s var(--ease) both; }
@keyframes view-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Hero ---------- */
.command-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem;
  align-items: center;
  min-height: 420px;
  padding: 3.6rem clamp(1.4rem, 4vw, 3.4rem);
  overflow: clip;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}

.hero-veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(ellipse 70% 90% at 84% 10%, rgba(216,180,118,.1), transparent 56%),
    radial-gradient(ellipse 60% 80% at -6% 108%, rgba(46,82,49,.4), transparent 62%),
    linear-gradient(180deg, color-mix(in srgb, var(--canopy) 68%, transparent), transparent 72%);
}
.hero-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  background: conic-gradient(from 210deg at 82% 18%,
    transparent 0deg, rgba(216,180,118,.05) 12deg, transparent 26deg,
    transparent 40deg, rgba(216,180,118,.035) 52deg, transparent 66deg,
    transparent 360deg);
}
.hero-veil::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, var(--gold-line) 0 1px, transparent 1px 96px);
  opacity: .3;
  mask-image: linear-gradient(180deg, transparent, black 40%, transparent);
}

.hero-copy { max-width: 62ch; }

.command-label {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.5rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 400;
  letter-spacing: .34em;
  text-transform: uppercase;
}
.label-tick {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform-origin: left;
  animation: tick-grow 1.2s var(--ease) .3s both;
}
@keyframes tick-grow { from { transform: scaleX(0); } }

.command-hero h1 {
  margin: 0 0 1.7rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.5rem, 4.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.005em;
  color: var(--cream);
  text-wrap: balance;
}
.command-hero h1 em {
  position: relative;
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(115deg, var(--gold-deep), var(--gold) 38%, var(--gold-bright) 55%, var(--gold) 72%, var(--gold-deep));
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: em-shimmer 8s ease-in-out infinite;
}
@keyframes em-shimmer {
  0%, 100% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.15rem;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.hero-meta span { display: flex; align-items: center; }
.hero-meta span + span::before {
  content: "";
  width: 4px;
  height: 4px;
  margin-right: 1.05rem;
  rotate: 45deg;
  background: var(--gold-dim);
}

/* Hero instrument — living compass dial */
.hero-instrument {
  display: grid;
  justify-items: center;
  gap: .9rem;
}
.hero-instrument svg { width: clamp(150px, 15vw, 208px); overflow: visible; }
.hero-instrument small {
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.dial-halo { fill: none; stroke: var(--gold-line); stroke-width: .6; }
.dial-track { fill: none; stroke: var(--hairline); stroke-width: 1; }
.dial-dash {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  stroke-dasharray: 2 8;
  opacity: .8;
}
.dial-node { fill: var(--gold-bright); filter: drop-shadow(0 0 5px rgba(216,180,118,.9)); }
.dial-dash-fine {
  fill: none;
  stroke: var(--gold-dim);
  stroke-width: .8;
  stroke-dasharray: 1 5;
}
.dial-spin { transform-origin: 100px 100px; animation: spin 30s linear infinite; }
.dial-spin-reverse { transform-origin: 100px 100px; animation: spin 44s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.dial-core {
  fill: rgba(216,180,118,.04);
  stroke: var(--gold-line);
  stroke-width: 1;
  animation: core-breathe 5s ease-in-out infinite;
}
@keyframes core-breathe {
  50% { fill: rgba(216,180,118,.09); }
}
.dial-needle {
  fill: var(--gold);
  opacity: .9;
  transform-origin: 100px 100px;
  animation: needle-sway 7s var(--ease-soft) infinite alternate;
  filter: drop-shadow(0 0 6px rgba(216,180,118,.5));
}
@keyframes needle-sway {
  from { transform: rotate(-24deg); }
  to { transform: rotate(31deg); }
}
.dial-pin { fill: var(--gold-bright); }

/* ---------- Section bars ---------- */
.featured-section, .library-section { padding: 2.4rem clamp(1.4rem, 4vw, 3.4rem); }
.featured-section { border-bottom: 1px solid var(--hairline); }

.section-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.2rem;
  margin-bottom: 1.6rem;
}
.section-bar p {
  margin: 0 0 .5rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.section-bar h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  font-weight: 400;
  letter-spacing: .002em;
  color: var(--soft);
}
.library-bar #results-count {
  margin: 0;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cta-button {
  position: relative;
  overflow: hidden;
  flex: none;
  padding: .72rem 1.45rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: linear-gradient(120deg, rgba(216,180,118,.12), rgba(216,180,118,.04));
  color: var(--gold-bright);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease), transform .3s var(--ease);
}
.cta-button:hover {
  border-color: var(--gold);
  box-shadow: 0 10px 34px rgba(216,180,118,.22);
  transform: translateY(-2px);
}
.cta-button::after {
  content: "";
  position: absolute;
  inset: 0;
  translate: -120% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(245,228,184,.28) 50%, transparent 70%);
  transition: translate .8s var(--ease);
}
.cta-button:hover::after { translate: 120% 0; }

/* ---------- Featured queue ---------- */
.featured-queue {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: .8rem;
}

.featured-card {
  --mx: 50%;
  --my: 0%;
  position: relative;
  display: grid;
  align-content: end;
  gap: .3rem;
  min-height: 176px;
  padding: 1rem 1rem .95rem;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: linear-gradient(170deg, var(--glass), transparent 65%);
  text-align: left;
  cursor: pointer;
  opacity: 0;
  animation: card-in .7s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color .4s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease), background .4s var(--ease);
}
@keyframes card-in { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; } }

.featured-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(216,180,118,.13), transparent 65%);
  transition: opacity .4s var(--ease);
}
.featured-card:hover::before { opacity: 1; }
.featured-card:hover {
  border-color: var(--line-strong);
  background: linear-gradient(170deg, var(--glass-hover), transparent 70%);
  transform: translateY(-5px);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--gold-line);
}

.featured-index {
  position: absolute;
  top: .1rem;
  right: .65rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 4.4rem;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  transition: color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
}
.featured-card:hover .featured-index { color: var(--gold-glow); -webkit-text-stroke-color: var(--gold); }

.featured-card strong {
  position: relative;
  color: var(--soft);
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.32;
  transition: color .35s var(--ease);
}
.featured-card:hover strong { color: var(--gold-bright); }
.featured-card small {
  position: relative;
  color: var(--ghost);
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.featured-card em {
  position: relative;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .6rem;
  font-style: normal;
  letter-spacing: .08em;
}

/* ---------- Document list (diligence matrix) ---------- */
.document-list {
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--obsidian) 44%, transparent);
}

.document-head,
.document-row {
  display: grid;
  grid-template-columns: 52px minmax(0, 2.6fr) 96px minmax(0, 1.1fr) 108px 68px;
  gap: .9rem;
  align-items: center;
  width: 100%;
  padding: .8rem 1.15rem;
  text-align: left;
}

.document-head {
  padding-block: .7rem;
  border-bottom: 1px solid var(--hairline);
  background: var(--glass);
  color: var(--faint);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.document-row {
  position: relative;
  min-height: 62px;
  border: 0;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  animation: row-in .5s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 22ms);
  transition: background .3s var(--ease);
}
.document-row:last-child { border-bottom: 0; }
.document-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 12px rgba(216,180,118,.55);
  transform: scaleY(0);
  transition: transform .35s var(--ease);
}
.document-row:hover { background: linear-gradient(90deg, var(--gold-glow), transparent 55%); }
.document-row:hover::before { transform: scaleY(1); }

.doc-number {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .72rem;
  transition: color .3s var(--ease);
}
.document-row:hover .doc-number { color: var(--gold); }

.doc-title-cell { display: grid; gap: .12rem; min-width: 0; }
.doc-title {
  overflow: visible;
  color: var(--soft);
  font-size: .88rem;
  font-weight: 550;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
  transition: color .3s var(--ease);
}
.document-row:hover .doc-title { color: var(--gold-bright); }
.doc-subtitle {
  overflow: hidden;
  color: var(--ghost);
  font-size: .72rem;
  font-weight: 300;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-section { color: var(--faint); font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; }
.doc-category {
  overflow: hidden;
  color: var(--muted);
  font-size: .7rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.doc-status {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  justify-self: start;
  padding: .26rem .6rem;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.doc-status.read { color: var(--emerald); border-color: rgba(133,184,120,.3); background: rgba(133,184,120,.07); }
.doc-status.read::before { background: var(--emerald); box-shadow: 0 0 8px rgba(133,184,120,.6); }
.doc-status.progress { color: var(--amber); border-color: rgba(227,185,95,.3); background: rgba(227,185,95,.07); }
.doc-status.progress::before { background: var(--amber); box-shadow: 0 0 8px rgba(227,185,95,.6); animation: state-breathe 2.8s ease-in-out infinite; }
.doc-status.unread { color: var(--ghost); }
.doc-status.unread::before { background: transparent; border: 1px solid var(--faint); }

.doc-read-time { color: var(--ghost); font-family: var(--mono); font-size: .64rem; }
.empty-state {
  display: grid;
  justify-items: center;
  gap: .9rem;
  padding: 3.4rem 1rem;
  color: var(--muted);
  text-align: center;
}
.empty-state p { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-style: italic; }
.empty-state button {
  padding: .55rem 1.3rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--gold);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.empty-state button:hover { background: var(--gold-glow); color: var(--gold-bright); }

.mobile-categories { display: none; }

/* ============================================================
   COMMAND INSIGHTS (right)
   ============================================================ */
.command-insights {
  position: sticky;
  top: var(--topbar);
  display: flex;
  flex-direction: column;
  gap: .9rem;
  height: calc(100vh - var(--topbar));
  padding: 1.1rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.command-insights::-webkit-scrollbar { display: none; }

.insight-card {
  position: relative;
  padding: 1.25rem 1.2rem;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  background:
    linear-gradient(165deg, var(--glass), transparent 60%),
    color-mix(in srgb, var(--obsidian) 52%, transparent);
  opacity: 0;
  animation: card-in .8s var(--ease) both;
  transition: border-color .4s var(--ease);
}
.insight-card:nth-child(2) { animation-delay: .1s; }
.insight-card:nth-child(3) { animation-delay: .2s; }
.insight-card:hover { border-color: var(--line); }
.insight-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-line), transparent);
}

.insight-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin-bottom: 1rem;
}
.insight-heading span {
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
}
.insight-heading strong {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--gold);
}

/* Engagement ring — animated SVG gauge */
.engagement-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  margin: .2rem auto .9rem;
}
.engagement-ring svg { width: 100%; transform: rotate(-90deg); overflow: visible; }
.ring-track { fill: none; stroke: var(--hairline); stroke-width: 5; }
.ring-fill {
  fill: none;
  stroke: url(#ring-gradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 326.7;
  stroke-dashoffset: 326.7;
  filter: drop-shadow(0 0 6px rgba(216,180,118,.5));
  transition: stroke-dashoffset 1.6s var(--ease) .3s;
}
.ring-value {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: .1rem;
  text-align: center;
}
.ring-value span {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--gold-bright);
}
.ring-value small {
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .54rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.insight-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
}
.insight-stats p {
  display: grid;
  gap: .1rem;
  margin: 0;
  padding: .6rem .4rem;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--glass);
  text-align: center;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.insight-stats p:hover { border-color: var(--gold-line); background: var(--glass-hover); }
.insight-stats strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--soft); }
.insight-stats span {
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .52rem;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* Progress card */
.sparkline {
  position: relative;
  height: 5px;
  margin-bottom: 1.1rem;
  border-radius: 999px;
  background: var(--hairline);
  overflow: clip;
}
.sparkline span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 24%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  box-shadow: 0 0 14px rgba(216,180,118,.5);
  animation: spark-fill 1.6s var(--ease) .4s both;
}
@keyframes spark-fill { from { width: 0; } }
.sparkline span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  translate: -100% 0;
  animation: spark-sheen 3.2s var(--ease-soft) 2s infinite;
}
@keyframes spark-sheen { 40%, 100% { translate: 100% 0; } }

.milestone-list {
  position: relative;
  display: grid;
  gap: .72rem;
  margin: 0;
  padding: 0 0 0 1.1rem;
  list-style: none;
}
.milestone-list::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(180deg, var(--gold-dim) 0 44%, var(--hairline) 56%);
}
.milestone-list li {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  color: var(--ghost);
  font-size: .76rem;
}
.milestone-list li span {
  position: absolute;
  left: -1.1rem;
  top: .28em;
  width: 9px;
  height: 9px;
  translate: 0 0;
  border-radius: 50%;
  border: 1px solid var(--faint);
  background: var(--void);
}
.milestone-list li.complete { color: var(--muted); }
.milestone-list li.complete span {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: 0 0 9px rgba(216,180,118,.6);
}
.milestone-list li.active { color: var(--gold-bright); font-weight: 550; }
.milestone-list li.active span {
  border-color: var(--gold-bright);
  background: var(--gold-glow);
  animation: milestone-pulse 2.4s ease-in-out infinite;
}
@keyframes milestone-pulse {
  50% { box-shadow: 0 0 0 5px rgba(216,180,118,.14); }
}
.milestone-list em {
  flex: none;
  color: var(--faint);
  font-family: var(--mono);
  font-size: .56rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.milestone-list li.complete em { color: var(--emerald); }
.milestone-list li.active em { color: var(--amber); }

/* Activity card */
.activity-list { display: grid; gap: .2rem; }
.activity-list button {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: .55rem;
  align-items: center;
  width: 100%;
  padding: .5rem .55rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.activity-list button:hover { background: var(--glass-hover); }
.activity-list span { color: var(--faint); font-family: var(--mono); font-size: .64rem; }
.activity-list strong {
  overflow: hidden;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .3s var(--ease);
}
.activity-list button:hover strong { color: var(--gold-bright); }
.activity-list small {
  color: var(--faint);
  font-family: var(--mono);
  font-size: .58rem;
  white-space: nowrap;
}
.activity-list button:first-child small { color: var(--emerald); }

/* Document-specific insight rail */
.reader-insight-category {
  margin: 0 0 .55rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.reader-insight-title {
  margin: 0 0 1rem;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.32rem;
  font-weight: 500;
  line-height: 1.18;
}
.reader-insight-facts {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-top: .85rem;
  border-top: 1px solid var(--hairline);
}
.reader-insight-facts .doc-status,
.reader-insight-time {
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.reader-insight-time { color: var(--ghost); }

.reader-insight-progress {
  height: 5px;
  overflow: clip;
  border-radius: 999px;
  background: var(--hairline);
}
.reader-insight-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  box-shadow: 0 0 14px rgba(216,180,118,.5);
  transition: width .25s var(--ease-soft);
}
.reader-insight-note {
  margin: .75rem 0 0;
  color: var(--ghost);
  font-size: .72rem;
  line-height: 1.5;
}
.reader-related-list button { grid-template-columns: 30px minmax(0, 1fr) auto; }
.reader-related-list small,
.reader-related-list button:first-child small { color: var(--gold); }

/* ============================================================
   READER
   ============================================================ */
.reader-grid {
  display: block;
}

.reader-document { min-width: 0; }

.reader-toolbar {
  position: sticky;
  top: var(--topbar);
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .8rem clamp(1.2rem, 3.4vw, 2.6rem);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--void) 68%, transparent);
  backdrop-filter: blur(22px);
}

.reader-toolbar button {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .42rem .5rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 550;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color .3s var(--ease), transform .3s var(--ease);
}
.reader-toolbar button:hover { color: var(--gold-bright); }
.reader-toolbar button:disabled { opacity: .35; cursor: default; }
#reader-back:hover { transform: translateX(-3px); }
.reader-toolbar svg { width: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.reader-text-controls {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.reader-toolbar .reader-text-controls button {
  justify-content: center;
  min-width: 40px;
  min-height: 36px;
  padding: .35rem .55rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--glass);
  color: var(--soft);
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.reader-toolbar .reader-text-controls button:hover:not(:disabled) {
  border-color: var(--gold-dim);
  background: var(--gold-glow);
}

.document-header {
  position: relative;
  padding: 4rem clamp(1.2rem, 3.4vw, 2.6rem) 2.4rem;
  overflow: clip;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 76% 100% at 82% -12%, rgba(216,180,118,.09), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--canopy) 55%, transparent), transparent 80%);
}

#reader-category {
  margin: 0 0 1rem;
  color: var(--gold);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  animation: rise-in .7s var(--ease) both;
}

.document-number {
  position: absolute;
  top: 2.2rem;
  right: clamp(1.2rem, 3.4vw, 2.6rem);
  font-family: var(--serif);
  font-style: italic;
  font-size: 6.4rem;
  font-weight: 300;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--gold-dim);
  animation: number-in 1s var(--ease) .1s both;
}
@keyframes number-in { from { opacity: 0; transform: translateX(20px); } }

.document-header h1 {
  max-width: 22ch;
  margin: 0 0 .9rem;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(2.2rem, 4.2vw, 3.5rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.004em;
  color: var(--cream);
  text-wrap: balance;
  animation: rise-in .8s var(--ease) .08s both;
}

.document-subtitle {
  max-width: 62ch;
  margin: 0 0 1.9rem;
  color: var(--muted);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.6;
  animation: rise-in .8s var(--ease) .16s both;
}

.document-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: clip;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--hairline);
  animation: rise-in .8s var(--ease) .24s both;
}
.document-meta-grid p {
  margin: 0;
  padding: .68rem .9rem;
  background: color-mix(in srgb, var(--obsidian) 82%, transparent);
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.document-meta-grid p:first-child { color: var(--gold); }

/* ---------- Reader body typography ---------- */
.reader-body {
  max-width: none;
  padding: 2.6rem clamp(1.2rem, 3.4vw, 2.6rem) 3rem;
  color: var(--soft);
  font-size: calc(1rem * var(--reader-scale, 1.15));
  font-weight: 300;
  line-height: 1.78;
  animation: rise-in .9s var(--ease) .2s both;
}

.reader-body > p:first-of-type::first-letter {
  float: left;
  margin: .08em .18em 0 0;
  font-family: var(--serif);
  font-size: 3.3em;
  font-weight: 500;
  line-height: .82;
  color: var(--gold);
}

.reader-body p { margin: 0 0 1.15em; }
.reader-body strong { color: var(--cream); font-weight: 600; }
.reader-body em { color: var(--gold-bright); }
.reader-body .underline { text-decoration: underline; text-decoration-color: var(--gold-dim); text-underline-offset: 3px; }

.reader-body h2 {
  position: relative;
  margin: 2.6em 0 .8em;
  padding-top: 1.3em;
  font-family: var(--serif);
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .002em;
  color: var(--cream);
}
.reader-body > h2:first-child { margin-top: 0; }
.reader-body h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.reader-body h3 {
  margin: 2em 0 .6em;
  font-family: var(--serif);
  font-size: 1.28rem;
  font-weight: 500;
  color: var(--gold-bright);
}

.reader-body h4 {
  margin: 1.7em 0 .5em;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

.reader-body ul, .reader-body ol { margin: 0 0 1.3em; padding-left: 1.35em; }
.reader-body li { margin-bottom: .5em; }
.reader-body li::marker { color: var(--gold); }

.reader-body .related-diligence-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: var(--gold-dim);
  text-decoration-thickness: .06em;
  text-underline-offset: .2em;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.reader-body .related-diligence-link:hover,
.reader-body .related-diligence-link:focus-visible {
  color: var(--gold-bright);
  text-decoration-color: var(--gold);
}

.reader-body blockquote {
  position: relative;
  margin: 1.9em 0;
  padding: 1.1em 1.4em 1.1em 1.7em;
  border-left: 2px solid var(--gold);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, var(--gold-glow), transparent 78%);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--cream);
}

.document-table-wrap {
  margin: 1.9em 0;
  overflow-x: visible;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: color-mix(in srgb, var(--obsidian) 55%, transparent);
}
.reader-body table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .84em; }
.reader-body th {
  padding: .75rem .95rem;
  border-bottom: 1px solid var(--line-strong);
  background: var(--glass);
  color: var(--gold);
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.reader-body td {
  padding: .68rem .95rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
  vertical-align: top;
  white-space: normal;
  overflow-wrap: anywhere;
}
.reader-body tr:last-child td { border-bottom: 0; }
.reader-body tbody tr { transition: background .25s var(--ease); }
.reader-body tbody tr:hover { background: var(--glass); }

.document-callout {
  border-color: var(--gold-dim);
  background: linear-gradient(135deg, var(--gold-glow), color-mix(in srgb, var(--obsidian) 58%, transparent));
}
.document-callout table { table-layout: auto; font-size: inherit; }
.document-callout th {
  padding: clamp(1.35rem, 3vw, 2.25rem);
  border: 0;
  background: transparent;
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.22em;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .01em;
  text-align: left;
  text-transform: none;
  white-space: normal;
  overflow-wrap: anywhere;
}

.research-eyebrow {
  margin: 2.2rem 0 .45rem !important;
  color: var(--gold) !important;
  font-family: var(--mono);
  font-size: .68em;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.research-workbook-sheet + .research-workbook-sheet { margin-top: 3.25rem; }
.research-workbook-table .research-sheet-title th {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.05em;
  letter-spacing: 0;
  text-transform: none;
}

/* Pagination */
.reader-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin: 0 clamp(1.2rem, 3.4vw, 2.6rem) 3rem;
}
.reader-pagination button {
  display: grid;
  gap: .3rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: var(--glass);
  text-align: left;
  cursor: pointer;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.reader-pagination button:last-child { text-align: right; }
.reader-pagination button:hover:not(:disabled) {
  border-color: var(--line-strong);
  background: var(--glass-hover);
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}
.reader-pagination button:disabled { opacity: .38; cursor: default; }
.reader-pagination small {
  color: var(--gold);
  font-family: var(--mono);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.reader-pagination strong {
  overflow: hidden;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .3s var(--ease);
}
.reader-pagination button:hover:not(:disabled) strong { color: var(--gold-bright); }

/* ---------- Reader aside ---------- */
.reader-aside {
  display: none;
}
.reader-aside::-webkit-scrollbar { display: none; }

.reader-aside-card {
  padding: 1.1rem 1.05rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    linear-gradient(165deg, var(--glass), transparent 62%),
    color-mix(in srgb, var(--obsidian) 50%, transparent);
  animation: card-in .7s var(--ease) both;
}
.reader-aside-card:nth-child(2) { animation-delay: .08s; }
.reader-aside-card:nth-child(3) { animation-delay: .16s; }

.aside-label {
  margin: 0 0 .8rem;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .56rem;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.aside-progress {
  height: 4px;
  margin-bottom: .55rem;
  border-radius: 999px;
  background: var(--hairline);
  overflow: clip;
}
.aside-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-bright));
  box-shadow: 0 0 10px rgba(216,180,118,.55);
  transition: width .25s var(--ease-soft);
}
#aside-progress-label {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--gold);
}

.reader-contents { display: grid; gap: .1rem; max-height: 42vh; overflow-y: auto; }
.reader-contents button {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: .45rem;
  align-items: baseline;
  width: 100%;
  padding: .45rem .5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.reader-contents button:hover { background: var(--glass-hover); }
.reader-contents button span { color: var(--faint); font-family: var(--mono); font-size: .58rem; transition: color .3s var(--ease); }
.reader-contents button strong {
  color: var(--muted);
  font-size: .74rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color .3s var(--ease);
}
.reader-contents button:hover strong { color: var(--soft); }
.reader-contents button.active { background: linear-gradient(90deg, var(--gold-glow), transparent 88%); }
.reader-contents button.active span { color: var(--gold); }
.reader-contents button.active strong { color: var(--gold-bright); }
.reader-contents button.active::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 22%;
  bottom: 22%;
  width: 2px;
  border-radius: 2px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(216,180,118,.6);
}
.aside-empty { margin: 0; color: var(--ghost); font-size: .78rem; font-style: italic; }

.related-list { display: grid; gap: .1rem; }
.related-list button {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: .45rem;
  align-items: baseline;
  width: 100%;
  padding: .48rem .5rem;
  border: 0;
  border-radius: 8px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .3s var(--ease);
}
.related-list button:hover { background: var(--glass-hover); }
.related-list button span { color: var(--faint); font-family: var(--mono); font-size: .6rem; }
.related-list button strong {
  overflow: hidden;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 500;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color .3s var(--ease);
}
.related-list button:hover strong { color: var(--gold-bright); }

/* Section jump-links inside the reader's right insight rail. */
.reader-contents-card .insight-contents {
  margin-top: .35rem;
  max-height: 34vh;
  gap: .12rem;
}
.reader-contents-card[hidden] { display: none; }

/* ============================================================
   PROPERTY PAGES (facts, source link, hero, gallery)
   ============================================================ */
.property-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
  margin: 0 0 1.9em;
}
.property-fact {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1 1 170px;
  padding: .95rem 1.1rem;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: color-mix(in srgb, var(--obsidian) 55%, transparent);
}
.property-fact span {
  color: var(--gold);
  font-family: var(--mono);
  font-size: .58rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.property-fact strong {
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.property-fact small {
  margin-top: .1rem;
  color: var(--ghost);
  font-size: .8rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
/* The "existing elements" box carries the full amenity list — give it more room. */
.property-fact--detail { flex: 3 1 340px; }
.property-source-link {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: .5rem;
  flex: 1 1 200px;
  padding: 1rem 1.2rem;
  border: 1px solid var(--gold-dim);
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-glow), transparent 85%);
  color: var(--gold-bright);
  text-decoration: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.property-source-link:hover {
  border-color: var(--line-strong);
  background: linear-gradient(135deg, var(--gold-glow), color-mix(in srgb, var(--gold) 12%, transparent) 90%);
  transform: translateY(-2px);
}
.property-source-link span {
  font-family: var(--mono);
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.property-source-link em {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-style: normal;
  overflow-wrap: anywhere;
}
.property-source-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.property-hero {
  margin: 0 0 2.2em;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}
.property-shot {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--obsidian) 70%, transparent);
  cursor: zoom-in;
  overflow: hidden;
}
.property-shot.is-broken { display: none; }
.property-hero-shot { aspect-ratio: 16 / 10; }
.property-hero-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s var(--ease);
}
.property-hero:hover .property-hero-shot img { transform: scale(1.03); }

.property-gallery-block { margin-top: 2.8em; }
.property-gallery-note {
  margin: -.4em 0 1.3em !important;
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.property-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: .7rem;
}
.property-gallery .property-shot {
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  border: 1px solid var(--hairline);
}
.property-gallery .property-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease), opacity .4s var(--ease);
}
.property-gallery .property-shot:hover img { transform: scale(1.06); }
.property-gallery .property-shot:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .26s var(--ease);
}
.lightbox.is-open { opacity: 1; }
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--void) 88%, #000 12%);
  backdrop-filter: blur(14px) saturate(1.1);
}
.lightbox-stage {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: min(1200px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;
  transform: scale(.97);
  transition: transform .3s var(--ease);
}
.lightbox.is-open .lightbox-stage { transform: scale(1); }
.lightbox-stage img {
  max-width: 100%;
  max-height: 78vh;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  object-fit: contain;
  background: var(--obsidian);
}
.lightbox-stage figcaption {
  color: var(--ghost);
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .22em;
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--hairline);
  border-radius: 50%;
  background: color-mix(in srgb, var(--obsidian) 70%, transparent);
  color: var(--soft);
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.lightbox-close svg,
.lightbox-nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.lightbox-close:hover,
.lightbox-nav:hover {
  color: var(--gold-bright);
  border-color: var(--gold-dim);
  background: var(--gold-glow);
}
.lightbox-close { top: clamp(1rem, 3vw, 1.8rem); right: clamp(1rem, 3vw, 1.8rem); }
.lightbox-prev { left: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-next { right: clamp(.6rem, 3vw, 2rem); top: 50%; transform: translateY(-50%); }
.lightbox-prev:hover { transform: translateY(-50%) scale(1.06); }
.lightbox-next:hover { transform: translateY(-50%) scale(1.06); }
body.lightbox-open { overflow: hidden; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1400px) {
  .command-shell { --rail-width: 340px; grid-template-columns: var(--rail-width) minmax(0, 1fr) 306px; }
  .dashboard.rail-collapsed .command-shell { grid-template-columns: 0 minmax(0, 1fr) 306px; }
  .featured-queue { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
  .command-hero h1 { font-size: clamp(2.2rem, 4.35vw, 3.9rem); }
}

@media (max-width: 1120px) {
  .command-shell { --rail-width: 320px; grid-template-columns: var(--rail-width) minmax(0, 1fr); }
  .dashboard.rail-collapsed .command-shell { grid-template-columns: 0 minmax(0, 1fr); }
  .command-insights { display: none; }
}

@media (max-width: 980px) {
  :root { --topbar: 64px; }
  .topbar { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: .75rem; }
  .topbar-status { display: none; }
  .rail-toggle { display: none; }
  /* Rail stacks on top on small screens — never keep it collapsed there. */
  .dashboard.rail-collapsed .document-rail { transform: none; opacity: 1; pointer-events: auto; }
  .rail-header, .rail-footer, .rail-document-list { min-width: 0; }
  .command-shell,
  .command-shell:has(.reader-view:not([hidden])),
  .dashboard.is-reading .command-shell { display: block; }
  .document-rail {
    position: relative;
    top: 0;
    height: auto;
    max-height: 52vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .dashboard.is-reading .document-rail { max-height: 32vh; }
  .dashboard.is-reading .rail-document-list { max-height: 21vh; }
  .rail-document-list { max-height: 40vh; }
  .content-shell { border-right: 0; }
  .command-hero { grid-template-columns: 1fr; min-height: 360px; }
  .hero-instrument { display: none; }
  .reader-grid { grid-template-columns: 1fr; }
  .reader-document { border-right: 0; }
  .reader-aside {
    position: relative;
    top: 0;
    height: auto;
    border-top: 1px solid var(--line);
  }
  .mobile-categories {
    display: flex;
    gap: .5rem;
    margin: .4rem -1.1rem 1rem;
    padding: 0 1.1rem .45rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .mobile-categories::-webkit-scrollbar { display: none; }
  .mobile-category {
    flex: 0 0 auto;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: .5rem .8rem;
    background: var(--glass);
    color: var(--muted);
    font-size: .64rem;
    letter-spacing: .04em;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease);
  }
  .mobile-category.active {
    border-color: var(--gold);
    background: var(--gold-glow);
    color: var(--gold-bright);
  }
}

@media (max-width: 720px) {
  :root { --topbar: 112px; }
  body { font-size: 15px; }
  .gate { padding: 1rem; }
  .gate-panel { padding: 2.2rem 1.35rem; border-radius: 16px; }
  .gate-logo { max-height: 168px; }
  .topbar {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-rows: 46px 42px;
    align-content: center;
    padding: 0 .9rem;
    gap: .55rem;
  }
  .brand-button { grid-column: 1 / 3; grid-row: 1; }
  .brand-button img { width: 92px; }
  .top-search { grid-column: 1 / -1; grid-row: 2; height: 38px; padding-inline: .8rem; max-width: none; }
  .top-search kbd { display: none; }
  .theme-toggle { grid-column: 3; grid-row: 1; gap: 0; padding: .42rem; justify-self: end; }
  .theme-toggle-text { display: none; }
  .lock-button { grid-column: 4; grid-row: 1; font-size: 0; gap: 0; justify-self: end; padding: .42rem .55rem; }
  .lock-button svg { width: 18px; }
  .document-rail { max-height: 46vh; }
  .rail-header { padding-inline: .85rem; }
  .command-hero { min-height: 330px; padding: 3rem 1.15rem; }
  .command-label { font-size: .56rem; letter-spacing: .2em; }
  .label-tick { width: 32px; }
  .command-hero h1 {
    max-width: 12ch;
    font-size: clamp(1.95rem, 9.2vw, 2.65rem);
    line-height: 1.05;
  }
  .hero-meta { font-size: .55rem; gap: .55rem .85rem; }
  .hero-meta span + span::before { margin-right: .75rem; }
  .featured-section, .library-section { padding: 1.35rem 1.05rem; }
  .section-bar { display: grid; align-items: flex-start; }
  .section-bar .cta-button { justify-self: start; }
  .featured-queue {
    display: flex;
    gap: .6rem;
    margin-inline: -1.05rem;
    padding: 0 1.05rem .5rem;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .featured-queue::-webkit-scrollbar { display: none; }
  .featured-card { flex: 0 0 184px; }
  .document-list { border-radius: 12px; }
  .document-head { display: none; }
  .document-row {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: .65rem;
    min-height: 76px;
    padding: .85rem .75rem;
  }
  .doc-section, .doc-category, .doc-read-time { display: none; }
  .doc-status {
    align-self: start;
    margin-top: .2rem;
    padding: .3rem;
    font-size: 0;
    gap: 0;
  }
  .doc-title { white-space: normal; }
  .doc-subtitle {
    display: -webkit-box;
    white-space: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .reader-toolbar { top: var(--topbar); padding-left: 1rem; padding-right: 1rem; }
  #reader-back { font-size: 0; gap: 0; }
  .reader-toolbar svg { width: 20px; }
  .document-header { padding: 3rem 1rem 2rem; }
  .document-number { top: 2.5rem; right: 1rem; font-size: 4.2rem; }
  .document-header h1 { padding-right: .75rem; font-size: clamp(2rem, 9.5vw, 3rem); }
  .document-meta-grid { grid-template-columns: 1fr; }
  .reader-body { padding-left: 1rem; padding-right: 1rem; }
  .document-table-wrap:not(.document-callout) table,
  .document-table-wrap:not(.document-callout) thead,
  .document-table-wrap:not(.document-callout) tbody,
  .document-table-wrap:not(.document-callout) tr,
  .document-table-wrap:not(.document-callout) td {
    display: block;
    width: 100%;
  }
  .document-table-wrap:not(.document-callout) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
  .document-table-wrap:not(.document-callout) tbody tr {
    padding: .55rem 0;
    border-bottom: 1px solid var(--hairline);
  }
  .document-table-wrap:not(.document-callout) tbody tr:last-child { border-bottom: 0; }
  .document-table-wrap:not(.document-callout) tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, .42fr) minmax(0, 1fr);
    gap: .85rem;
    padding: .7rem .8rem;
    border: 0;
  }
  .document-table-wrap:not(.document-callout) tbody td::before {
    content: attr(data-label);
    color: var(--gold);
    font-family: var(--mono);
    font-size: .68em;
    font-weight: 600;
    letter-spacing: .08em;
    line-height: 1.45;
    text-transform: uppercase;
  }
  .research-workbook-table .research-sheet-columns { display: none !important; }
  .research-workbook-table .research-sheet-title,
  .research-workbook-table .research-sheet-title th {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    clip: auto;
    clip-path: none;
  }
  .document-callout table,
  .document-callout thead,
  .document-callout tr,
  .document-callout th { display: block; width: 100%; }
  .reader-pagination { grid-template-columns: 1fr; margin-left: 1rem; margin-right: 1rem; }
  .reader-pagination button:last-child { text-align: left; }
  .reader-aside { padding: 1rem; }
}

/* ============================================================
   MOTION & PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .grain, .gate-backdrop, .gate-rays, .aurora span, .contour { animation: none; }
  .ring-fill { transition: none; }
}

@media print {
  body { background: #fff; color: #111; }
  .atmosphere, .aurora, .contour-field, .grain, .reader-progress,
  .topbar, .document-rail, .command-insights,
  .reader-toolbar, .reader-aside, .reader-pagination { display: none !important; }
  .command-shell, .reader-grid { display: block; }
  .content-shell, .reader-document { border: 0; }
  .document-header { padding: 1cm 0; border-color: #aaa; background: transparent; }
  .document-header h1, .reader-body h2, .reader-body h3, .reader-body h4 { color: #111; }
  .document-header #reader-category, .document-subtitle, .reader-body em { color: #705625; }
  .document-number { color: #ddd; -webkit-text-stroke: 0; }
  .document-meta-grid { border-color: #aaa; background: #aaa; }
  .document-meta-grid p { color: #333; background: #fff; }
  .reader-body { max-width: none; padding: 0; color: #222; font-size: 11pt; }
  .reader-body > p:first-of-type::first-letter { float: none; margin: 0; font: inherit; color: inherit; }
  .reader-body h2 { border-color: #bbb; break-after: avoid; }
  .document-table-wrap { overflow: visible; break-inside: avoid; border-color: #aaa; }
  .reader-body th, .reader-body td { color: #111; border-color: #aaa; background: transparent; }
}