/* ZNACHIT Public UI System — shared shell/tokens/layout */
:root{
  --header-height:72px;
  --anchor-clearance:32px;
  --container-max:1600px;
  --grid-gap:24px;
  --gutter:32px;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  --public-a:#edf4f7;
  --public-b:#c7d4da;
  --public-c:#8699a3;
  --public-d:rgba(188,214,225,.11);
}

html{
  scroll-padding-top:calc(var(--header-height) + var(--anchor-clearance));
}

body{
  min-width:0;
}

:focus-visible{
  outline:3px solid var(--blue,#8ecde8);
  outline-offset:4px;
}

.topbar,
.public-header{
  position:sticky !important;
  inset:auto !important;
  top:0 !important;
  z-index:100;
  height:var(--header-height) !important;
  display:grid !important;
  grid-template-columns:minmax(130px,1fr) auto minmax(0,1fr) !important;
  align-items:center;
  gap:var(--space-5);
  padding-inline:max(var(--gutter),calc((100vw - var(--container-max))/2)) !important;
  border-bottom:1px solid var(--hair,rgba(188,214,225,.12));
  background:rgba(6,17,23,.92) !important;
  backdrop-filter:blur(14px);
}

.brand{
  justify-self:start;
  font-size:13px !important;
  font-weight:750 !important;
  letter-spacing:.34em !important;
  white-space:nowrap;
}

.topnote{
  position:static !important;
  transform:none !important;
  justify-self:center;
  font-size:9px !important;
  letter-spacing:.17em !important;
  color:var(--public-c) !important;
  text-transform:uppercase;
  white-space:nowrap;
}

.top-actions,
.topright{
  justify-self:end;
  display:flex !important;
  align-items:center;
  gap:var(--space-3) !important;
  min-width:0;
}

.top-nav{
  display:flex;
  align-items:center;
  gap:var(--space-2);
}

.lang{
  display:flex;
  align-items:center;
  gap:var(--space-1) !important;
}

.lang button,
.tone-toggle{
  min-width:32px;
  min-height:44px;
  border:0;
  background:transparent;
  padding:0 var(--space-2) !important;
  color:var(--public-c) !important;
  cursor:pointer;
  font-size:10px !important;
}

.lang button:hover,
.lang button.on,
.tone-toggle:hover{
  color:var(--public-a) !important;
}

.top-link,
.platform-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 var(--space-3) !important;
  border:1px solid rgba(188,214,225,.18) !important;
  color:var(--public-b) !important;
  font-size:10px !important;
  white-space:nowrap;
}

.top-link:hover,
.platform-link:hover{
  border-color:rgba(188,214,225,.38) !important;
  color:var(--public-a) !important;
}

.top-link[aria-current]::after,
.platform-link[aria-current]::after{
  content:"";
  position:absolute;
  left:var(--space-3);
  right:var(--space-3);
  bottom:5px;
  height:1px;
  background:var(--blue,#8ecde8);
}

.pilot-top,
.nav-cta{
  background:rgba(237,243,245,.08) !important;
  color:var(--public-a) !important;
  border-color:rgba(237,243,245,.36) !important;
}
.pilot-top:hover,
.nav-cta:hover{
  background:rgba(237,243,245,.14) !important;
  border-color:rgba(237,243,245,.58) !important;
}

/* Shared document container / editorial grid */
.wrap,
.causal-page .inner{
  width:min(var(--container-max),calc(100% - (2 * var(--gutter)))) !important;
  max-width:none !important;
  margin-inline:auto !important;
}

.section{
  min-height:0 !important;
  height:auto !important;
  padding-block:var(--space-9) var(--space-10) !important;
  border-top:1px solid var(--hair,rgba(188,214,225,.12));
}

.section-grid{
  display:grid !important;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:var(--grid-gap) !important;
}

.section-grid > .eyebrow{
  grid-column:1 / span 2;
  align-self:start;
}

.section-grid > :not(.eyebrow){
  grid-column:4 / span 7;
  min-width:0;
}

.eyebrow{
  margin:0 !important;
  font-size:12px !important;
  line-height:1.4;
  letter-spacing:.16em !important;
  color:var(--blue,#8ecde8) !important;
  text-transform:uppercase;
}

.section h2,
.causal-page main h2{
  margin:0 0 var(--space-5) !important;
  max-width:1100px;
  font-size:clamp(56px,4.1vw,72px) !important;
  line-height:.99 !important;
  letter-spacing:-.045em !important;
  font-weight:500 !important;
  overflow:visible;
}

.section .lead,
.causal-page main .copy p{
  max-width:860px;
  color:var(--public-b) !important;
  font-size:18px !important;
  line-height:1.56 !important;
}

.proof-grid{
  margin-top:var(--space-7) !important;
}
.proof small,
.panel .tag,
.criterion span,
.lex-row span{
  color:var(--public-c) !important;
}
.proof p,
.panel p{
  color:var(--public-b) !important;
  font-size:13px !important;
  line-height:1.6 !important;
}

.final-links{
  gap:var(--space-3) !important;
  margin-top:var(--space-6) !important;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 var(--space-4) !important;
  border:1px solid rgba(188,214,225,.28) !important;
  background:transparent;
  color:var(--public-b);
  font-size:11px;
  cursor:pointer;
}
.btn:hover:not(:disabled){
  border-color:rgba(188,214,225,.52) !important;
  color:var(--public-a);
}
.btn.primary{
  background:var(--public-a) !important;
  color:#07151b !important;
  border-color:var(--public-a) !important;
}
.btn:disabled{
  cursor:not-allowed;
  color:rgba(199,212,218,.42) !important;
  background:rgba(237,244,247,.04) !important;
  border-color:rgba(188,214,225,.12) !important;
}
.btn:disabled:hover{
  border-color:rgba(188,214,225,.12) !important;
}

/* Home scrollytelling hero */
.home-page .story{
  position:relative;
  height:300vh;
}

.home-page .scene{
  position:sticky !important;
  top:var(--header-height) !important;
  height:calc(100svh - var(--header-height)) !important;
  min-height:620px;
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:var(--grid-gap);
  align-items:center;
  padding-inline:max(var(--gutter),calc((100vw - var(--container-max))/2));
}

.home-page .intro-copy{
  position:relative !important;
  inset:auto !important;
  grid-column:1 / span 4;
  grid-row:1;
  width:auto !important;
  max-width:none !important;
  align-self:center;
  z-index:25;
}

.home-page .intro-copy .eyebrow{
  margin-bottom:var(--space-5) !important;
}

.home-page .intro-copy h1{
  margin:0;
  max-width:100%;
  font-size:clamp(80px,5.4vw,104px) !important;
  line-height:.91 !important;
  letter-spacing:-.06em !important;
  font-weight:500;
  height:auto !important;
}

.home-page .intro-copy p{
  margin:var(--space-6) 0 0 !important;
  max-width:520px !important;
  color:var(--public-b) !important;
  font-size:18px !important;
  line-height:1.56 !important;
}

.home-page .intro-actions{
  margin-top:var(--space-6) !important;
  gap:var(--space-4) !important;
}

.home-page .stage{
  position:relative !important;
  inset:auto !important;
  grid-column:1 / -1;
  grid-row:1;
  align-self:stretch;
  min-height:calc(100svh - var(--header-height));
  perspective:1500px;
  transform-style:preserve-3d;
  z-index:10;
  pointer-events:none;
}

.home-page .stage .simple,
.home-page .stage .depth-layer{
  pointer-events:auto;
}

.home-page .simple{
  left:72% !important;
  top:54% !important;
  width:min(50%,800px) !important;
  max-width:800px;
}

.home-page .depth-layer{
  left:50% !important;
  top:52% !important;
  width:100% !important;
  height:min(690px,72vh) !important;
  max-width:var(--container-max);
}

.home-page .field-kicker{
  font-size:12px !important;
  color:var(--public-c) !important;
}
.home-page .node b,
.home-page .branch b{
  font-size:13px !important;
}
.home-page .node span,
.home-page .branch span,
.home-page .rules,
.home-page .rules b{
  font-size:12px !important;
  line-height:1.45;
}
.home-page .node span,
.home-page .branch span,
.home-page .rules{
  color:var(--public-c) !important;
}
.home-page .rules b{
  color:var(--public-b) !important;
}
.home-page .gr-label b{font-size:13px !important}
.home-page .gr-label span{font-size:12px !important}
.home-page .depth-label,
.home-page .hud{
  bottom:var(--space-5) !important;
  font-size:12px !important;
}

/* Request forms — one component system */
#requests{
  padding-bottom:calc(var(--space-10) + var(--space-11) + var(--space-7) + var(--space-10)) !important;
}
.request-pane[hidden]{
  display:none !important;
}
.request-pane .section-grid{
  min-height:0;
}
.public-form{
  width:min(960px,100%);
  margin-top:var(--space-7);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-5);
}
.form-field{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.form-field.full{
  grid-column:1 / -1;
}
.form-label{
  margin-bottom:var(--space-2);
  color:var(--public-b);
  font-size:13px;
  line-height:1.4;
}
.public-form input,
.public-form textarea{
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:var(--space-3) var(--space-4);
  border:1px solid #34454d;
  border-radius:0;
  background:#0b171c;
  color:var(--public-a);
  font:inherit;
  outline:none;
}
.public-form textarea{
  min-height:176px;
  resize:vertical;
}
.public-form input:hover,
.public-form textarea:hover{
  border-color:#526872;
}
.public-form input:focus,
.public-form textarea:focus{
  border-color:#8aa0aa;
}
.public-form [aria-invalid="true"]{
  border-color:var(--stop,#d39a82) !important;
}
.form-meta{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--space-4);
  margin-top:var(--space-2);
  color:var(--public-c);
  font-size:12px;
  line-height:1.45;
}
.field-error{
  margin-top:var(--space-2);
  color:#e3ad96;
  font-size:12px;
  line-height:1.45;
}
.form-actions{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  gap:var(--space-4);
}
.form-status{
  grid-column:1 / -1;
  margin:0 !important;
  font-size:14px !important;
  line-height:1.5 !important;
}
.request-minimum{
  color:var(--public-c);
}

/* Causal Field: same public shell, sticky stage only for interactive field */
.causal-page{
  filter:brightness(var(--brightness));
}
.causal-page .topbar{
  filter:none;
}
.causal-page .palette{
  top:calc(var(--header-height) + var(--space-2)) !important;
}
.causal-story{
  position:relative;
  height:300vh;
}
.causal-story .hero{
  position:sticky;
  top:var(--header-height);
  height:calc(100svh - var(--header-height));
  min-height:560px !important;
  overflow:hidden;
}
.causal-story .mode,
.causal-story .state{
  top:var(--space-5) !important;
}
.causal-story .mode{
  left:max(var(--gutter),calc((100vw - var(--container-max))/2)) !important;
}
.causal-story .state{
  right:max(var(--gutter),calc((100vw - var(--container-max))/2)) !important;
}
.causal-story .truth-caption{
  right:max(var(--gutter),calc((100vw - var(--container-max))/2)) !important;
}
.causal-progress-state{
  position:absolute;
  z-index:30;
  left:max(var(--gutter),calc((100vw - var(--container-max))/2));
  bottom:var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-3);
  color:var(--public-c);
  font-size:12px;
  letter-spacing:.08em;
}
.causal-progress-state strong{
  color:var(--public-a);
  font-weight:500;
}
.causal-progress-state::after{
  content:"↓";
  color:var(--public-c);
  margin-left:var(--space-1);
}
.causal-page .manual{
  left:auto !important;
  right:max(var(--gutter),calc((100vw - var(--container-max))/2)) !important;
  bottom:var(--space-6) !important;
  max-width:55vw !important;
  justify-content:flex-end;
  font-size:12px !important;
}
.causal-page .manual button{
  min-height:44px;
  color:var(--public-c) !important;
}
.causal-page .manual button:hover,
.causal-page .manual button.on{
  color:var(--public-a) !important;
}
.causal-page .hint,
.causal-page .depth{
  bottom:var(--space-2) !important;
}
.causal-page .node-label{
  font-size:13px !important;
}
.causal-page .node-sub,
.causal-page .event-text,
.causal-page .process-name .kind,
.causal-page .process-name .desc,
.causal-page .granitsa-line text{
  font-size:12px !important;
}
.causal-page .node-sub,
.causal-page .event-text,
.causal-page .process-name .desc,
.causal-page .granitsa-line text{
  fill:rgba(199,212,218,.72) !important;
}
.causal-page .process-name .kind{
  fill:rgba(134,153,163,.82) !important;
}
.causal-page .truth-kicker{
  font-size:12px !important;
  color:var(--public-c) !important;
}
.causal-page .truth-title{
  font-size:24px !important;
}
.causal-page .truth-body{
  font-size:13px !important;
  line-height:1.55 !important;
  color:var(--public-b) !important;
}
.causal-page main .section{
  min-height:0 !important;
  height:auto !important;
}
.causal-page main .inner{
  min-height:0 !important;
  padding:var(--space-9) 0 var(--space-10) !important;
}
.causal-page main .grid2{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr)) !important;
  gap:var(--grid-gap) !important;
}
.causal-page main .grid2 > h2{
  grid-column:1 / span 7;
}
.causal-page main .grid2 > .copy{
  grid-column:9 / span 4;
  padding-top:0 !important;
}
.causal-page main .compare{
  margin-top:var(--space-8) !important;
  gap:var(--space-5) !important;
}
.causal-page main .panel h3{
  font-size:28px !important;
}
.causal-page main .panel p,
.causal-page main .warning,
.causal-page main .lex-row span{
  font-size:16px !important;
  line-height:1.55 !important;
  color:var(--public-b) !important;
}
.causal-page main .criterion b,
.causal-page main .lex-row strong{
  font-size:13px !important;
}
.causal-page main .closing .inner{
  min-height:0 !important;
  display:block !important;
}
.causal-page main .closing p{
  margin:var(--space-6) 0 !important;
  color:var(--public-b) !important;
  font-size:18px !important;
  line-height:1.56 !important;
}


@media (max-width:1599px){
  .causal-page .topnote{display:none}
}

/* 1200–1439 */
@media (max-width:1439px){
  :root{--gutter:32px}
  .topnote{display:none}
  .home-page .intro-copy h1{font-size:clamp(72px,6.5vw,96px) !important}
  .home-page .simple{left:72% !important;width:min(50%,800px) !important;max-width:800px}
}

/* 1024–1199: hero becomes content-driven text → diagram */
@media (max-width:1199px){
  :root{--gutter:28px}
  .topbar,.public-header{
    grid-template-columns:auto 1fr !important;
  }
  .top-actions,.topright{justify-self:end}
  .top-nav{gap:var(--space-1)}
  .top-link,.platform-link{padding-inline:var(--space-2) !important}

  .home-page .story{height:auto}
  .home-page .scene{
    position:relative !important;
    top:auto !important;
    height:auto !important;
    min-height:0;
    padding-top:var(--space-9);
    padding-bottom:var(--space-8);
    grid-template-columns:repeat(8,minmax(0,1fr));
    overflow:visible;
  }
  .home-page .intro-copy{
    grid-column:1 / -1;
    grid-row:1;
    max-width:760px !important;
  }
  .home-page .stage{
    grid-column:1 / -1;
    grid-row:2;
    min-height:560px;
    margin-top:var(--space-7);
  }
  .home-page .intro-copy,
  .home-page .simple{
    opacity:1 !important;
    filter:none !important;
  }
  .home-page .intro-copy{
    transform:none !important;
  }
  .home-page .simple{
    left:50% !important;
    top:50% !important;
    width:100% !important;
    transform:translate(-50%,-50%) !important;
  }
  .home-page .depth-layer,
  .home-page .hud,
  .home-page .depth-label,
  .home-page .progress{
    display:none !important;
  }

  .section-grid{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  }
  .section-grid > .eyebrow{grid-column:1 / span 2}
  .section-grid > :not(.eyebrow){grid-column:3 / span 6}

  .causal-page main .grid2{
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
  }
  .causal-page main .grid2 > h2{grid-column:1 / span 5}
  .causal-page main .grid2 > .copy{grid-column:6 / span 3}
}

/* 768–1023 */
@media (max-width:1023px){
  :root{--gutter:24px}
  .top-link.causal{display:none}
  .section-grid > .eyebrow,
  .section-grid > :not(.eyebrow){
    grid-column:1 / -1;
  }
  .section-grid > .eyebrow{
    margin-bottom:var(--space-5) !important;
  }
  .section h2,
  .causal-page main h2{
    font-size:clamp(48px,7vw,64px) !important;
  }
  .public-form{
    grid-template-columns:1fr;
  }
  .form-field.full,
  .form-actions,
  .form-status{
    grid-column:1;
  }

  .causal-page main .grid2{
    display:block !important;
  }
  .causal-page main .grid2 > .copy{
    margin-top:var(--space-6);
  }
  .causal-page main .criteria{
    grid-template-columns:1fr 1fr !important;
  }
  .causal-page main .compare,
  .causal-page main .boundary,
  .causal-page main .lexicon{
    grid-template-columns:1fr !important;
  }
}

/* <768: preserve existing compact shell; no new mobile navigation pattern */
@media (max-width:767px){
  :root{
    --gutter:18px;
    --header-height:64px;
    --anchor-clearance:24px;
  }
  .topbar,.public-header{
    height:var(--header-height) !important;
    padding-inline:var(--gutter) !important;
    gap:var(--space-3);
  }
  .brand{font-size:11px !important}
  .top-nav{display:none}
  .tone-toggle{display:none}
  .lang button{min-width:30px;min-height:44px;padding-inline:6px !important}

  .section{
    padding-block:var(--space-8) var(--space-9) !important;
  }
  .section-grid{
    display:block !important;
  }
  .section-grid > .eyebrow{
    margin-bottom:var(--space-5) !important;
  }
  .section h2,
  .causal-page main h2{
    font-size:clamp(40px,12vw,56px) !important;
    line-height:1 !important;
  }
  .section .lead,
  .causal-page main .copy p{
    font-size:16px !important;
  }

  .home-page .scene{
    display:block;
    padding-top:var(--space-8);
    padding-inline:var(--gutter);
  }
  .home-page .intro-copy{
    max-width:none !important;
  }
  .home-page .intro-copy h1{
    font-size:clamp(50px,16vw,72px) !important;
    line-height:.92 !important;
  }
  .home-page .intro-copy p{
    font-size:16px !important;
  }
  .home-page .stage{
    min-height:0;
    margin-top:var(--space-7);
  }
  .home-page .simple{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:100% !important;
    transform:none !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:var(--space-6) !important;
  }
  .home-page .simple-line{display:none !important}
  .home-page .anchor .dot{margin-bottom:var(--space-2) !important}
  .home-page .anchor .title{font-size:36px !important}
  .home-page .anchor .sub{font-size:12px !important}
  .home-page .intro-actions{display:flex !important}

  .proof-grid{
    grid-template-columns:1fr !important;
  }
  .proof{
    min-height:0 !important;
    border-right:0 !important;
    border-bottom:1px solid var(--hair) !important;
  }
  .proof:last-child{border-bottom:0 !important}

  .public-form{
    margin-top:var(--space-6);
  }
  .form-actions{
    align-items:stretch;
    flex-direction:column;
  }
  .form-actions .btn{width:100%}

  /* existing causal live-field mobile fallback; no invented mobile choreography */
  #requests{
    padding-bottom:var(--space-11) !important;
  }

  .causal-story{
    height:auto;
  }
  .causal-story .mode{
    left:var(--gutter) !important;
    right:var(--gutter) !important;
    top:var(--space-5) !important;
    max-width:80%;
  }
  .causal-story .state{
    left:var(--gutter) !important;
    right:auto !important;
    top:calc(var(--space-5) + var(--space-6)) !important;
  }
  .causal-page #field{
    transform:none !important;
  }
  .causal-story .hero{
    position:relative;
    top:auto;
    height:calc(100svh - var(--header-height));
    min-height:620px !important;
  }
  .causal-progress-state{
    left:var(--gutter);
    bottom:var(--space-4);
    font-size:11px;
  }
  .causal-page .manual{
    left:var(--gutter) !important;
    right:var(--gutter) !important;
    bottom:var(--space-8) !important;
    max-width:none !important;
    justify-content:flex-start;
    gap:var(--space-2) !important;
  }
  .causal-page .manual button{
    font-size:10px;
  }
  .causal-page .depth,
  .causal-page .hint{
    display:none !important;
  }
  .causal-page main .inner{
    padding-block:var(--space-8) var(--space-9) !important;
  }
  .causal-page main .criteria{
    grid-template-columns:1fr !important;
  }
  .causal-page main .panel p,
  .causal-page main .warning,
  .causal-page main .lex-row span{
    font-size:15px !important;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto !important}
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* v4 — low-height and section-settle correction */
main > .section{
  scroll-margin-top:calc(var(--header-height) + var(--anchor-clearance));
}

/* Browser chrome often leaves a much shorter CSS viewport than the screen size.
   Keep the hierarchy, but reduce unused vertical space and fit the semantic
   start of a section into real low-height desktop windows. */
@media (min-width:1024px) and (max-height:820px){
  .section{
    padding-block:48px 64px !important;
  }

  .section h2,
  .causal-page main h2{
    font-size:clamp(44px,min(4.1vw,8.2vh),62px) !important;
    line-height:.98 !important;
    margin-bottom:16px !important;
  }

  .section .lead,
  .causal-page main .copy p{
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .proof-grid{
    margin-top:32px !important;
  }

  .home-page .scene{
    min-height:calc(100svh - var(--header-height)) !important;
  }

  .home-page .intro-copy h1{
    font-size:clamp(64px,min(5.4vw,11vh),84px) !important;
    line-height:.9 !important;
  }

  .home-page .intro-copy p{
    margin-top:16px !important;
    font-size:16px !important;
    line-height:1.5 !important;
  }

  .home-page .intro-actions{
    margin-top:16px !important;
  }

  .home-page .depth-layer{
    height:min(560px,68vh) !important;
  }

  .causal-story .hero{
    min-height:0 !important;
    height:calc(100svh - var(--header-height)) !important;
  }

  .causal-page main .inner{
    padding-block:48px 64px !important;
  }
}

/* Very short desktop windows: content may extend below the fold, but must
   never be clipped by a false minimum viewport height. */
@media (min-width:1024px) and (max-height:700px){
  .home-page .scene{
    overflow-x:clip !important;
    overflow-y:visible !important;
  }
  .home-page .story{
    height:300vh;
  }
  .section{
    padding-block:40px 56px !important;
  }
  .section h2,
  .causal-page main h2{
    font-size:clamp(40px,min(3.8vw,8vh),56px) !important;
  }
}