/* ========================================================================== 
   v3 · Neutral Cupertino Liquid Glass
   Goals: no blue/purple gradient language, safe responsive grids, glass across
   the whole information hierarchy, and visible but restrained interaction feedback.
   ========================================================================== */

/* --- neutral / warm titanium palette ------------------------------------- */
:root,
html[data-theme="light"] {
  --bg: #e9e7e2;
  --bg-2: #f4f2ee;
  --canvas: rgba(245,243,238,.62);
  --surface: #f8f7f4;
  --surface-raised: rgba(252,251,248,.58);
  --surface-soft: rgba(249,248,244,.42);
  --surface-inset: rgba(78,72,64,.07);
  --text: #191816;
  --text-secondary: #47433e;
  --text-tertiary: #74706a;
  --text-quaternary: #99948d;
  --separator: rgba(63,58,52,.18);
  --separator-soft: rgba(63,58,52,.10);
  --accent: #a65d22;
  --accent-soft: rgba(166,93,34,.12);
  --accent-strong: #874914;
  --blue: #b76b28;
  --cyan: #658b78;
  --indigo: #917662;
  --purple: #648274;
  --pink: #b9675d;
  --green: #4d875d;
  --orange: #c47a2d;
  --red: #b9554d;
  --teal: #56867e;
  --mint: #76a591;
  --brown: #8f735b;
  --gray: #8c8881;
  --shadow-1: 0 1px 2px rgba(53,47,40,.035), 0 10px 28px rgba(53,47,40,.055);
  --shadow-2: 0 2px 8px rgba(53,47,40,.055), 0 24px 64px rgba(53,47,40,.11);
  --shadow-float: 0 10px 24px rgba(53,47,40,.08), 0 34px 90px rgba(53,47,40,.16);
  --glass-rgb: 251,250,247;
  --glass-alpha: .46;
  --glass-alpha-strong: .62;
  --glass-border: rgba(255,255,255,.72);
  --glass-rim: rgba(255,255,255,.96);
  --glass-rim-low: rgba(255,255,255,.13);
  --glass-occlusion: rgba(73,64,54,.11);
  --content-w: 1120px;
  --spring-ease: cubic-bezier(.16,1,.30,1);
}

html[data-theme="dark"] {
  --bg: #0d0e0e;
  --bg-2: #151616;
  --canvas: rgba(18,19,18,.58);
  --surface: #1d1f1e;
  --surface-raised: rgba(36,38,36,.52);
  --surface-soft: rgba(31,33,31,.42);
  --surface-inset: rgba(235,229,217,.075);
  --text: #f4f2ed;
  --text-secondary: #d4d0c8;
  --text-tertiary: #9c978f;
  --text-quaternary: #747169;
  --separator: rgba(255,255,255,.14);
  --separator-soft: rgba(255,255,255,.075);
  --accent: #e7a15f;
  --accent-soft: rgba(231,161,95,.15);
  --accent-strong: #ffc183;
  --blue: #dc9858;
  --cyan: #79a992;
  --indigo: #aa8c73;
  --purple: #78a08c;
  --pink: #d98276;
  --green: #72b27f;
  --orange: #e4a05f;
  --red: #e0766d;
  --teal: #74aaa0;
  --mint: #89b9a4;
  --brown: #b3977b;
  --gray: #9b9891;
  --shadow-1: 0 2px 10px rgba(0,0,0,.18), 0 12px 34px rgba(0,0,0,.20);
  --shadow-2: 0 4px 16px rgba(0,0,0,.24), 0 28px 76px rgba(0,0,0,.36);
  --shadow-float: 0 10px 28px rgba(0,0,0,.30), 0 38px 100px rgba(0,0,0,.46);
  --glass-rgb: 31,33,31;
  --glass-alpha: .42;
  --glass-alpha-strong: .58;
  --glass-border: rgba(255,255,255,.17);
  --glass-rim: rgba(255,255,255,.43);
  --glass-rim-low: rgba(255,255,255,.032);
  --glass-occlusion: rgba(0,0,0,.30);
}

@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --bg:#0d0e0e; --bg-2:#151616; --canvas:rgba(18,19,18,.58); --surface:#1d1f1e;
    --surface-raised:rgba(36,38,36,.52); --surface-soft:rgba(31,33,31,.42); --surface-inset:rgba(235,229,217,.075);
    --text:#f4f2ed; --text-secondary:#d4d0c8; --text-tertiary:#9c978f; --text-quaternary:#747169;
    --separator:rgba(255,255,255,.14); --separator-soft:rgba(255,255,255,.075);
    --accent:#e7a15f; --accent-soft:rgba(231,161,95,.15); --accent-strong:#ffc183;
    --blue:#dc9858; --cyan:#79a992; --indigo:#aa8c73; --purple:#78a08c; --pink:#d98276;
    --green:#72b27f; --orange:#e4a05f; --red:#e0766d; --teal:#74aaa0; --mint:#89b9a4; --brown:#b3977b; --gray:#9b9891;
    --shadow-1:0 2px 10px rgba(0,0,0,.18),0 12px 34px rgba(0,0,0,.20);
    --shadow-2:0 4px 16px rgba(0,0,0,.24),0 28px 76px rgba(0,0,0,.36);
    --shadow-float:0 10px 28px rgba(0,0,0,.30),0 38px 100px rgba(0,0,0,.46);
    --glass-rgb:31,33,31; --glass-alpha:.42; --glass-alpha-strong:.58;
    --glass-border:rgba(255,255,255,.17); --glass-rim:rgba(255,255,255,.43);
    --glass-rim-low:rgba(255,255,255,.032); --glass-occlusion:rgba(0,0,0,.30);
  }
}

/* --- wallpaper: neutral content behind glass, no blue/purple blobs -------- */
.ambient {
  background:
    radial-gradient(58rem 44rem at 8% -8%, rgba(255,255,255,.17), transparent 66%),
    radial-gradient(48rem 36rem at 94% 2%, rgba(191,155,112,.085), transparent 72%),
    radial-gradient(42rem 34rem at 80% 96%, rgba(102,137,116,.07), transparent 74%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
.orb { display:none !important; }
#pageProgress { height:2px; background:var(--accent); box-shadow:0 0 12px color-mix(in srgb,var(--accent) 44%,transparent); }

/* --- window / workspace -------------------------------------------------- */
.app-shell {
  width:min(1580px,calc(100% - 28px));
  grid-template-columns:272px minmax(0,1fr);
  background:color-mix(in srgb,var(--canvas) 72%,transparent);
  border-color:color-mix(in srgb,var(--separator) 66%,rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(20px) saturate(112%);
  backdrop-filter:blur(20px) saturate(112%);
}
.workspace { background:color-mix(in srgb,var(--canvas) 38%,transparent); }
.wrap { width:min(calc(100% - 64px),var(--content-w)); }

/* --- brand & navigation: one tint, no rainbow / blue-purple gradient ----- */
.app-icon {
  color:var(--text);
  background:rgba(var(--glass-rgb),.40);
  border:1px solid var(--glass-border);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.42),0 9px 26px rgba(53,47,40,.10);
  -webkit-backdrop-filter:blur(18px) saturate(130%);
  backdrop-filter:blur(18px) saturate(130%);
}
.nav-icon {
  color:var(--text-tertiary) !important;
  background:color-mix(in srgb,var(--surface-inset) 86%,transparent) !important;
  border:1px solid var(--separator-soft);
  box-shadow:inset 0 1px rgba(255,255,255,.13);
}
.nav a.active { background:var(--accent-soft); color:var(--accent-strong); }
.nav a.active .nav-icon {
  color:var(--accent-strong) !important;
  background:color-mix(in srgb,var(--accent-soft) 84%,transparent) !important;
  border-color:color-mix(in srgb,var(--accent) 24%,var(--separator-soft));
}
.sidebar-controls { background:linear-gradient(180deg,transparent,color-mix(in srgb,rgba(var(--glass-rgb),.76) 92%,transparent) 32%); }

/* --- global liquid material --------------------------------------------- */
.glass,
details,
.evidence,
.revision {
  --spot-x:50%; --spot-y:0%; --spot-opacity:0;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(156deg,
      rgba(var(--glass-rgb),.52) 0%,
      rgba(var(--glass-rgb),.34) 48%,
      rgba(var(--glass-rgb),.26) 100%);
  border:1px solid color-mix(in srgb,var(--glass-border) 70%,var(--separator) 30%);
  box-shadow:var(--shadow-1), inset 0 1px 1px rgba(255,255,255,.24), inset 0 -1px rgba(0,0,0,.035);
  -webkit-backdrop-filter:blur(22px) saturate(132%) brightness(102%);
  backdrop-filter:blur(22px) saturate(132%) brightness(102%);
}
.glass::before,
details::before,
.evidence::before,
.revision::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(58% 78% at var(--spot-x) var(--spot-y), rgba(255,255,255,calc(.15 * var(--spot-opacity))), transparent 58%),
    linear-gradient(180deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,.04) 18%,transparent 43%);
}
.glass::after,
details::after,
.evidence::after,
.revision::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg,var(--glass-rim),var(--glass-rim-low) 34%,transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.64;
}
.glass > *, details > *, .evidence > *, .revision > * { position:relative; z-index:1; }

/* Nested glass is thinner so the hierarchy remains readable. */
.trait,.signal,.segmented,.sidebar-search,.search-field,.track {
  background:rgba(var(--glass-rgb),.17);
  border:1px solid color-mix(in srgb,var(--separator-soft) 86%,var(--glass-border) 14%);
  -webkit-backdrop-filter:blur(10px) saturate(116%);
  backdrop-filter:blur(10px) saturate(116%);
}
.hero-stats {
  background:rgba(var(--glass-rgb),.26);
  border-color:color-mix(in srgb,var(--glass-border) 58%,var(--separator) 42%);
  -webkit-backdrop-filter:blur(20px) saturate(124%);
  backdrop-filter:blur(20px) saturate(124%);
  box-shadow:var(--shadow-1),inset 0 1px rgba(255,255,255,.18);
}

/* Structural glass stays thicker. */
.sidebar.liquid-surface { --glass-strength:.56; }
.topbar.liquid-surface,.tabbar.liquid-surface,.search-sheet.liquid-surface { --glass-strength:.50; }
.liquid-surface {
  background:linear-gradient(156deg,rgba(var(--glass-rgb),.58),rgba(var(--glass-rgb),.36));
  border-color:color-mix(in srgb,var(--glass-border) 78%,var(--separator) 22%);
  -webkit-backdrop-filter:blur(28px) saturate(145%) brightness(102%);
  backdrop-filter:blur(28px) saturate(145%) brightness(102%);
}

/* --- typography / editorial rhythm ------------------------------------- */
h1 { font-size:clamp(1.82rem,2.6vw,2.24rem); font-weight:680; }
.section-head h2 { font-size:clamp(1.48rem,2vw,1.82rem); }
.hero { padding:32px 4px 28px; }
.hero > p { font-size:14px; }
section { margin-bottom:82px; }

/* --- color accents without blue-purple pairing -------------------------- */
blockquote { border-left-color:var(--accent); }
.bar-a { fill:color-mix(in srgb,var(--green) 68%,transparent); }
.bar-b { fill:color-mix(in srgb,var(--accent) 82%,transparent); }
.dot { background:var(--green); }
.dot.b { background:var(--accent); }
.fill { background:var(--accent) !important; }
.person::before { background:var(--accent); }
.person.person-b::before { background:var(--green); }
.text-chapter.person-b { border-top-color:color-mix(in srgb,var(--green) 62%,transparent); }
.dot-blue{background:var(--accent);color:var(--accent)}
.dot-purple{background:var(--green);color:var(--green)}

/* --- critical layout fix: action cards no longer collapse to 34px ------- */
.action-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:stretch;
}
.action-card {
  min-width:0;
  min-height:154px;
  width:auto !important;
  height:auto !important;
  display:block !important;
  padding:20px 21px;
  counter-increment:action-step;
}
.action-grid { counter-reset:action-step; }
.action-card::marker { content:""; }
.action-card h4 {
  margin:0 0 9px;
  padding-right:42px;
  font-size:15px;
  font-weight:660;
  line-height:1.4;
}
.action-card p { margin:0; font-size:12.5px; line-height:1.72; overflow-wrap:anywhere; word-break:normal; }
.action-card::before {
  content:counter(action-step,decimal-leading-zero);
  position:absolute;
  z-index:2;
  inset:17px 18px auto auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:var(--accent-strong);
  background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 20%,transparent);
  font:650 10px/1 var(--font-ui);
}

/* --- critical layout fix: evidence can never become vertical text -------- */
.evidence-grid,.revision-grid {
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:14px;
  align-items:stretch;
}
.evidence,.revision {
  min-width:0;
  min-height:190px;
  padding:19px 20px;
  border-radius:17px;
  overflow:hidden;
}
.evidence h3,.evidence h4,.revision h3,.revision h4 {
  margin:8px 0 8px;
  font-size:15px;
  font-weight:660;
  line-height:1.42;
  overflow-wrap:normal;
  word-break:normal;
}
.evidence p,.revision p,.evidence small,.revision small {
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:normal;
}
.evidence small { display:block; margin-top:12px; color:var(--text-quaternary); font-size:10.5px; line-height:1.5; }

/* Safety against any future min-content collapse. */
.grid2,.grid3,.compare,.metric-grid,.traits,.timeline,.verbatim-flow,.action-grid,.evidence-grid,.revision-grid { min-width:0; }
.grid2 > *, .grid3 > *, .compare > *, .metric-grid > *, .traits > *, .action-grid > *, .evidence-grid > *, .revision-grid > * { min-width:0; }
.card,.chart,.person,.metric,.phase,.text-chapter { overflow-wrap:anywhere; }

/* --- tactile / pointer feedback ----------------------------------------- */
.feedback-surface {
  --feedback-y:0px;
  --feedback-scale:1;
  transform:translate3d(0,var(--feedback-y),0) scale(var(--feedback-scale));
  transform-origin:center;
  will-change:transform;
}
@media (hover:hover) and (pointer:fine) {
  .feedback-surface { transition:border-color 180ms var(--spring-ease),box-shadow 220ms var(--spring-ease); }
  .feedback-surface.is-hovered {
    border-color:color-mix(in srgb,var(--glass-border) 78%,var(--accent) 22%);
    box-shadow:var(--shadow-2),inset 0 1px 1px rgba(255,255,255,.28);
  }
}
.cu-press {
  position:relative;
  overflow:hidden;
  transition:background-color 160ms var(--spring-ease),color 160ms var(--spring-ease),border-color 160ms var(--spring-ease);
}
.cu-press::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  background:rgba(255,255,255,.10);
  opacity:0;
  transform:scale(.92);
  transition:opacity 120ms ease-out,transform 320ms var(--spring-ease);
}
.cu-press.is-pressing::after { opacity:1; transform:scale(1); }
.cu-press > * { position:relative; z-index:1; }

/* Search result target feedback. */
.flash-target { animation:targetFlash 760ms var(--spring-ease); }
@keyframes targetFlash {
  0% { box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 0%,transparent); }
  32% { box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent),var(--shadow-2); }
  100% { box-shadow:var(--shadow-1); }
}

details[open] .archive,details[open] .prose-archive { animation:disclosureIn 360ms var(--spring-ease) both; }
@keyframes disclosureIn { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:none; } }

/* Sidebar / sheet transitions feel springy without overshooting layout. */
@media (max-width:940px) {
  .sidebar { transition:transform 420ms var(--spring-ease),box-shadow 220ms var(--spring-ease); }
  .sidebar-backdrop { transition:opacity 220ms var(--spring-ease); }
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width:1220px) {
  .app-shell { grid-template-columns:244px minmax(0,1fr); }
  .wrap { width:min(calc(100% - 44px),var(--content-w)); }
  .action-grid { grid-template-columns:1fr 1fr; }
  .evidence-grid,.revision-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:940px) {
  .wrap { width:min(calc(100% - 30px),var(--content-w)); }
  .action-grid { grid-template-columns:1fr; }
  .action-card { min-height:0; }
}
@media (max-width:650px) {
  .evidence-grid,.revision-grid { grid-template-columns:1fr; }
  .evidence,.revision { min-height:0; }
  .action-card { padding:18px; }
  .action-card h4 { padding-right:38px; }
  .hero-stats { grid-template-columns:1fr 1fr; }
}
@media (max-width:430px) {
  .hero-stats { grid-template-columns:1fr; }
  .hero-stat { border-right:0 !important; border-bottom:1px solid var(--separator-soft); }
  .hero-stat:last-child { border-bottom:0; }
}

@media (prefers-reduced-motion:reduce) {
  .feedback-surface { transform:none !important; }
  .flash-target,details[open] .archive,details[open] .prose-archive { animation:none !important; }
}