/* GraySwan Document Builder — dashboard chrome aligned to the house style (Document Anonymizer /
   shared gs-style.css): editorial monochrome greys + a single gold accent, Fraunces headings,
   Manrope labels, Crimson-Pro prose. The document PREVIEW pages keep the Market Overview's own
   gold/Baskerville identity (they are renders of the actual Word document). */
:root{
  /* monochrome (house tokens) */
  --black:#0D0D0D; --near-black:#1A1A1A; --dark:#2C2C2C; --mid:#555555; --muted:#888888;
  --light-muted:#BBBBBB; --rule:#DDDDDD; --rule-light:#EFEFEF; --bg-soft:#F6F6F6; --white:#FFFFFF;
  /* gold — this tool's single accent (where the Anonymizer uses terracotta) */
  --gold:#BAA786; --gold-dk:#8A7645;
  /* document ink tones (used by the preview minis) */
  --ink:#231F20; --navy:#1F2837;
  /* type — chrome */
  --font-display:"Fraunces","Georgia",serif;
  --font-serif:"Crimson Pro","Georgia",serif;
  --font-sans:"Manrope",-apple-system,system-ui,sans-serif;
  --font-figures:"Outfit","Manrope",sans-serif;
  /* type — the document's own faces (preview minis only) */
  --doc-serif:"Libre Baskerville", Georgia, serif;
  --doc-sans:"Avenir Next","Segoe UI",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0; height:100%}
body{
  font-family:var(--font-serif); color:var(--dark); background:var(--white);
  display:flex; flex-direction:column; min-height:100vh;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

/* ── header — house dashboard bar (logo left · title centre · template right) ── */
.site-header{
  background:var(--near-black); color:#fff; padding:1.2rem 2.5rem; min-height:92px;
  border-bottom:3px solid var(--gold); position:sticky; top:0; z-index:100;
}
.header-content{
  max-width:1400px; margin:0 auto; display:grid;
  grid-template-columns:auto 1fr auto; align-items:center; gap:2rem;
}
.header-logo-img{height:46px; width:auto; display:block}
.header-title{text-align:center}
.header-title h1{
  font-family:var(--font-display); font-size:1.7rem; font-weight:350;
  font-variation-settings:"opsz" 96,"SOFT" 40; letter-spacing:-.015em; line-height:1.1; color:#fff;
}
.header-title p{
  font-family:var(--font-serif); font-style:italic; font-weight:300;
  font-size:.92rem; color:rgba(255,255,255,.52); margin-top:.25rem;
}
.header-right{display:flex; justify-content:flex-end}
.date-snapshot{
  font-family:var(--font-sans); font-size:.66rem; letter-spacing:.09em; line-height:1.7;
  color:rgba(255,255,255,.45); text-transform:uppercase; text-align:right;
}
.date-snapshot strong{font-weight:600; color:rgba(255,255,255,.8); font-size:.8rem; letter-spacing:.03em}

/* ── layout ── */
.layout{flex:1; display:grid; grid-template-columns:360px 1fr; min-height:0}
.panel{background:var(--white); border-right:1px solid var(--rule); padding:2rem 1.75rem; overflow:auto}
.panel h2{
  font-family:var(--font-display); font-weight:400; font-size:1.3rem;
  letter-spacing:-.01em; color:var(--near-black); margin:0 0 .35rem;
}
.panel .muted{color:var(--muted); font-family:var(--font-serif); font-size:.95rem; line-height:1.5; margin:0 0 1.6rem}

/* ── toggle cards ── */
.toggles{display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.5rem}
.comp{
  display:flex; flex-direction:column; gap:.7rem;
  border:1px solid var(--rule); border-radius:3px; padding:.85rem 1rem;
  background:var(--white); transition:border-color .15s, opacity .15s;
}
.comp.off{opacity:.55}
.comp.on{border-color:var(--gold)}
.comp-top{display:flex; gap:.75rem; align-items:center}
.comp .thumb{
  width:38px; height:54px; border-radius:2px; flex:0 0 auto;
  background:var(--bg-soft) center/cover no-repeat; border:1px solid var(--rule);
}
.comp .thumb.wide{width:64px; height:36px}   /* 16:9 slide thumbnail */
.comp .meta{flex:1; min-width:0}
.comp .name{display:block; font-family:var(--font-sans); font-weight:600; font-size:.9rem; color:var(--near-black)}
.comp .name .cnt{font-weight:400; color:var(--muted); font-size:.72rem; letter-spacing:.02em}
.comp .hint{display:block; font-family:var(--font-serif); color:var(--muted); font-size:.86rem; line-height:1.4; margin-top:.2rem}

/* ── reorder controls ── */
.reorder{display:flex; flex-direction:column; gap:2px; flex:0 0 auto}
.rbtn{
  width:20px; height:15px; line-height:1; padding:0; border:1px solid var(--rule);
  background:var(--white); color:var(--mid); border-radius:2px; cursor:pointer; font-size:9px;
}
.rbtn:hover:not(:disabled){border-color:var(--gold-dk); color:var(--gold-dk); background:var(--bg-soft)}
.rbtn:disabled{opacity:.3; cursor:default}

/* ── edit fields ── */
.fields{display:flex; flex-direction:column; gap:.6rem; border-top:1px solid var(--rule-light); padding-top:.8rem}
.field{display:flex; flex-direction:column; gap:.3rem}
.field-label{
  font-family:var(--font-sans); font-size:.62rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.field input, .field textarea{
  width:100%; font-family:var(--font-sans); font-size:.9rem; color:var(--dark);
  border:1px solid var(--rule); border-radius:3px; padding:.55rem .7rem; background:var(--white);
  transition:border-color .2s;
}
.field textarea{line-height:1.5; resize:vertical}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--gold-dk)}
.fields-note{font-family:var(--font-serif); font-size:.82rem; color:var(--muted); margin:.1rem 0 0; font-style:italic}

/* ── switch (gold = the single accent) ── */
.switch{flex:0 0 auto; position:relative; width:42px; height:24px; cursor:pointer}
.switch input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer}
.track{position:absolute; inset:0; background:var(--light-muted); border-radius:99px; transition:background .18s}
.knob{position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff;
  border-radius:50%; transition:transform .18s; box-shadow:0 1px 3px rgba(0,0,0,.25)}
.switch input:checked + .track{background:var(--gold-dk)}
.switch input:checked + .track + .knob{transform:translateX(18px)}
.switch input:focus-visible + .track{outline:2px solid var(--near-black); outline-offset:2px}

/* ── build button (house primary) ── */
.build{
  width:100%; padding:.8rem 1rem; border:1px solid var(--near-black); border-radius:3px; cursor:pointer;
  background:var(--near-black); color:#fff; font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; transition:background .15s;
}
.build:hover:not(:disabled){background:var(--dark)}
.build:disabled{background:var(--light-muted); border-color:var(--light-muted); cursor:not-allowed}
.status{font-family:var(--font-sans); font-size:.78rem; color:var(--muted); margin:.8rem .15rem 0; min-height:1.2em}
.status.err{color:#8f4034}
.status.ok{color:var(--gold-dk)}

/* ── stage / preview ── */
.stage{display:flex; flex-direction:column; min-height:0; padding:1.5rem 1.75rem; background:var(--bg-soft)}
.stage-head{display:flex; align-items:center; gap:.75rem; margin-bottom:1rem}
.stage-title{font-family:var(--font-display); font-weight:400; font-size:1.15rem; color:var(--near-black)}
.pagecount{font-family:var(--font-sans); color:var(--muted); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase}
/* view controls — columns (1/2/3) + fine zoom */
.viewctl{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.vlabel{font-family:var(--font-sans); font-size:.6rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.cols{display:inline-flex; border:1px solid var(--rule); border-radius:2px; overflow:hidden}
.colbtn{
  border:none; border-right:1px solid var(--rule); background:var(--white); color:var(--mid);
  font-family:var(--font-figures); font-size:.78rem; font-weight:600; width:28px; height:26px;
  line-height:1; cursor:pointer; transition:background .15s, color .15s;
}
.colbtn:last-child{border-right:none}
.colbtn:hover{background:var(--bg-soft); color:var(--dark)}
.colbtn.is-active{background:var(--gold-dk); color:#fff}
.zoom{display:inline-flex; gap:.3rem}
.zoom button{
  font-family:var(--font-sans); font-size:.9rem; font-weight:600; color:var(--mid);
  border:1px solid var(--rule); background:var(--white); border-radius:2px;
  width:26px; height:26px; line-height:1; cursor:pointer; transition:all .15s;
}
.zoom button:hover{border-color:var(--gold-dk); color:var(--gold-dk); background:var(--bg-soft)}
.preview{
  flex:1; overflow:auto; display:grid; --doc-w:300; --cols:1;
  grid-template-columns:repeat(var(--cols,1), calc(var(--doc-w,300) * 1px));
  justify-content:safe center; align-content:start; gap:1.5rem 1.6rem; padding:.4rem .4rem 2rem;
}
.page-item{display:flex; flex-direction:column; align-items:center; gap:.5rem; animation:pop .22s ease; min-width:0}
.page-cap{font-family:var(--font-sans); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); max-width:100%; text-align:center}
.slide{
  width:calc(var(--doc-w, 300) * 1px); aspect-ratio:16/9; background:var(--white) center/cover no-repeat;
  border-radius:2px; box-shadow:0 6px 24px rgba(0,0,0,.12); border:1px solid var(--rule); position:relative;
}
.slide.loading{opacity:.55; transition:opacity .12s}
/* a faint section band above each section's first slide */
.sec-start{grid-column:1 / -1; justify-self:stretch; display:flex; align-items:center; gap:.6rem; margin:.6rem .2rem -.4rem}
.sec-start::before,.sec-start::after{content:""; height:1px; flex:1; background:var(--rule)}
.sec-start span{font-family:var(--font-sans); font-size:.6rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.98)} to{opacity:1; transform:none}}
.empty{font-family:var(--font-serif); color:var(--muted); text-align:center; margin-top:2.5rem; font-size:1rem}

@media (max-width:760px){
  .site-header{padding:1rem 1.25rem}
  .header-content{grid-template-columns:auto 1fr; gap:1rem}
  .header-right{display:none}
  .layout{grid-template-columns:1fr}
  .panel{border-right:0; border-bottom:1px solid var(--rule)}
}