:root{
  --highland:#1c4233;
  --highland-700:#173729;
  --gold:#a89161;
  --gold-600:#96805200;
  --gold-hi:#b9a279;
  --beige:#e0e0d9;
  --sand:#d1b082;
  --charcoal:#3c3c3c;
  --paper:#f6f5f0;
  --card:#ffffff;
  --line:#e7e6df;
  --ink:#1c4233;
  --muted:#6f746c;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 1px 2px rgba(28,66,51,.04),0 8px 30px rgba(28,66,51,.06);
  --shadow-lg:0 20px 60px rgba(28,66,51,.14);
  --font:"Lexend Deca",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

/* ---------- app shell ---------- */
.app{
  display:grid;
  grid-template-columns:236px minmax(420px,1fr) minmax(360px,520px);
  grid-template-areas:"rail cover preview";
  height:100vh;
  overflow:hidden;
}
.rail{grid-area:rail}
#coverForm{grid-area:cover}
#coverPreview{grid-area:preview}
/* book form overlaps the cover+preview columns; shown only in book mode */
#bookForm{grid-area:cover / cover / preview / preview}

/* book mode: two columns, book form fills the whole content area */
.app.app-book{
  grid-template-columns:236px 1fr;
  grid-template-areas:"rail book";
}
.app.app-book #bookForm{grid-area:book}

/* ---------- left rail ---------- */
.rail{
  background:var(--highland);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:30px 24px;
  position:relative;
}
.rail::after{content:"";position:absolute;top:0;right:0;width:3px;height:100%;background:var(--gold)}
.rail-logo{width:150px;display:block;margin-bottom:22px}
.rail-title{font-weight:700;font-size:16px;letter-spacing:.2px}
.rail-sub{color:var(--gold);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;margin-top:4px}
.rail-steps{margin-top:46px;display:flex;flex-direction:column;gap:2px}

/* tool switcher nav */
.rail-nav{margin-top:44px;display:flex;flex-direction:column;gap:8px}
.rail-tool{
  text-align:left;border:none;cursor:pointer;
  background:rgba(255,255,255,.04);color:#fff;
  border-radius:12px;padding:14px 14px;transition:.18s;
  display:flex;flex-direction:column;gap:2px;
  border:1px solid transparent;
}
.rail-tool:hover{background:rgba(255,255,255,.08)}
.rail-tool.is-active{background:rgba(255,255,255,.1);border-color:rgba(168,145,97,.5)}
.rail-tool-name{font-family:var(--font);font-weight:600;font-size:14px}
.rail-tool-desc{font-size:11.5px;color:rgba(255,255,255,.55)}
.rail-tool.is-active .rail-tool-desc{color:var(--gold)}
.rail-step{
  display:flex;align-items:center;gap:11px;
  font-size:13.5px;color:rgba(255,255,255,.62);
  padding:10px 12px;border-radius:10px;transition:.2s;
}
.rail-step .dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.32);transition:.2s}
.rail-step.is-active{color:#fff;background:rgba(255,255,255,.06)}
.rail-step.is-active .dot{background:var(--gold);box-shadow:0 0 0 4px rgba(168,145,97,.2)}
.rail-foot{margin-top:auto;font-size:11.5px;color:rgba(255,255,255,.42);line-height:1.8}
.rail-foot-ver{color:var(--gold)}

/* combined studio: book form gets a comfortable reading width */
.form-wide{max-width:760px}
[hidden]{display:none!important}

/* collapsible committee editor */
.disclosure{
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--card);
  margin:22px 0;overflow:hidden;
}
.disclosure summary{
  cursor:pointer;padding:14px 16px;font-size:13px;font-weight:600;color:var(--highland);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.disclosure summary::-webkit-details-marker{display:none}
.disclosure summary::before{content:"▸";color:var(--gold);font-size:12px;transition:.15s}
.disclosure[open] summary::before{transform:rotate(90deg)}
.disclosure summary:hover{background:#fafaf7}
.disclosure-body{padding:0 16px 16px}
.field-label.sub{margin-top:14px;font-size:11px}
textarea.text-input.mono{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.7;
  white-space:pre!important;overflow-x:auto!important;overflow-wrap:normal!important;word-break:normal!important;
}
/* belt-and-braces: force no soft-wrap on the inside-page editors by ID */
#committeeInput, #noticeInput, #addressInput{
  white-space:pre!important;
  overflow-wrap:normal!important;
  word-wrap:normal!important;
  word-break:keep-all!important;
  overflow-x:auto!important;
}
.btn-ghost{
  margin-top:10px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--highland);
  background:var(--beige);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;transition:.15s;
}
.btn-ghost:hover{background:#d6d7cf}
.drop-lg{min-height:150px;flex-direction:column;gap:14px}
.drop-lg .drop-icon{width:34px;height:34px;font-size:18px}

.summary{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:6px 16px;margin-bottom:22px;
}
.summary-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 0;font-size:14px;border-bottom:1px solid var(--line);
}
.summary-row:last-child{border-bottom:none}
.summary-row span{color:var(--muted)}
.summary-row b{color:var(--highland);font-weight:700}

code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12.5px;
  background:var(--beige);padding:1px 6px;border-radius:5px;color:var(--highland-700);
}

/* ---------- form column ---------- */
.form{
  overflow-y:auto;
  padding:40px 44px 60px;
}
.form-head{margin-bottom:30px}
.form-head h1{
  font-size:26px;font-weight:800;letter-spacing:-.01em;color:var(--highland);
}
.form-head p{color:var(--muted);font-size:14px;margin-top:7px;max-width:46ch}

.field{margin-bottom:22px;animation:rise .4s ease both}
.field-label{
  display:block;font-size:12.5px;font-weight:700;letter-spacing:.02em;
  color:var(--highland);margin-bottom:8px;text-transform:uppercase;
}
.field-label .opt{
  text-transform:none;letter-spacing:0;font-weight:400;color:var(--muted);
  font-size:11.5px;margin-left:6px;
}
.field-hint{font-size:12.5px;color:var(--muted);margin-top:7px}

.text-input{
  width:100%;font-family:var(--font);font-size:14.5px;color:var(--ink);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;transition:.18s;resize:vertical;
}
.text-input:focus{
  outline:none;border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(168,145,97,.16);
}
textarea.text-input{line-height:1.55}
input[type="date"].text-input{
  font-family:var(--font);color:var(--ink);cursor:pointer;
  min-height:44px;
}
input[type="date"].text-input::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.7;
}
input[type="date"].text-input::-webkit-calendar-picker-indicator:hover{opacity:1}

/* segmented control */
.segmented{
  display:inline-flex;background:var(--beige);border-radius:11px;padding:4px;gap:4px;
}
.seg{
  font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--highland);
  border:none;background:transparent;padding:8px 18px;border-radius:8px;cursor:pointer;transition:.18s;
}
.seg.is-on{background:var(--card);box-shadow:var(--shadow);color:var(--highland)}
.seg:not(.is-on):hover{color:var(--highland-700)}

/* file drop */
.drop{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:96px;cursor:pointer;text-align:center;
  background:var(--card);border:1.5px dashed var(--line);border-radius:var(--radius-sm);
  color:var(--muted);font-size:13.5px;transition:.18s;padding:18px;
}
.drop:hover{border-color:var(--gold);background:#fffdf8;color:var(--highland)}
.drop.is-set{border-style:solid;border-color:var(--gold);color:var(--highland);background:#fffdf8}
.drop.drag{border-color:var(--gold);background:#fdf8ee}
.drop-sm{min-height:56px}
.drop-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--beige);color:var(--highland);
  font-size:15px;font-weight:700;flex:none;
}
.drop u{text-decoration:none;color:var(--gold);font-weight:600}
.clear-file{
  border:none;background:var(--beige);color:var(--highland);cursor:pointer;
  width:20px;height:20px;border-radius:50%;font-size:11px;line-height:1;
  margin-left:8px;vertical-align:middle;transition:.15s;
}
.clear-file:hover{background:#d85a30;color:#fff}

.actions{display:flex;align-items:center;gap:16px;margin-top:32px}
.btn-primary{
  font-family:var(--font);font-size:15px;font-weight:700;color:#fff;
  background:var(--gold);border:none;border-radius:11px;padding:14px 26px;cursor:pointer;
  transition:.18s;box-shadow:0 6px 18px rgba(168,145,97,.28);
}
.btn-primary:hover{background:var(--gold-hi);transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.55;cursor:default;transform:none;box-shadow:none}
.status{font-size:13px;color:var(--muted)}
.status.ok{color:#0f7a4f;font-weight:600}
.status.err{color:#b3261e;font-weight:600}
.fineprint{font-size:12px;color:var(--muted);margin-top:18px;max-width:60ch;line-height:1.6}

/* ---------- preview column ---------- */
.preview{
  background:linear-gradient(160deg,#eceae1,#e4e2d8);
  border-left:1px solid var(--line);
  display:flex;flex-direction:column;
  padding:26px;
}
.preview-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--highland);margin-bottom:20px;flex-wrap:wrap;
}
.preview-tabs{display:inline-flex;gap:3px;background:var(--beige);border-radius:9px;padding:3px}
.ptab{
  font-family:var(--font);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;
  border:none;background:transparent;color:var(--highland);padding:5px 10px;border-radius:6px;cursor:pointer;transition:.15s;
}
.ptab.is-on{background:#fff;box-shadow:var(--shadow)}
.ptab:not(.is-on):hover{color:var(--highland-700)}

.pvpage{position:absolute;inset:0}
.pvpage[hidden]{display:none!important}

/* ad page preview */
.pv-ad{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--beige);color:#8f9188;font-size:11px;line-height:1.6;
}
.pv-ad img{width:100%;height:100%;object-fit:cover}
.pv-ad small{font-size:9px;color:#a9a99f}

/* inside committee preview — logo top, content fills page like the PDF */
.pv-inside{
  display:flex;flex-direction:column;
  padding:6% 8% 5%;
}
.pv-inside-logo{width:30%;margin:1% 0 0 0;flex:none}
.pv-committee{
  font-size:6.3px;line-height:1.5;color:var(--charcoal);width:100%;
  flex:1;display:flex;flex-direction:column;justify-content:center;
}
.pvc-row{display:flex;gap:6px;margin-bottom:0.5px}
.pvc-l{flex:0 0 46%;color:#6f746c}
.pvc-v{flex:1}
.pvc-gap{height:6px}
.pvc-notice{margin-top:8px;font-size:5px;line-height:1.45;color:#6f746c}
.pvc-notice b{display:block;color:var(--charcoal);font-size:5.5px;margin-bottom:1px}
.pvc-addr{margin-top:6px;font-size:5px;line-height:1.45;color:#6f746c}
.pvc-addr b{display:block;color:var(--gold);font-size:5.5px;margin-bottom:1px}
.preview-stage{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.preview-foot{text-align:center;font-size:11.5px;color:var(--muted);margin-top:18px}

/* the A5 preview page (aspect 148:210) */
.a5{
  width:min(100%,320px);
  aspect-ratio:148/210;
  background:#fff;
  border-radius:6px;
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  position:relative;
}
.pv{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:6% 7%}
.pv[hidden]{display:none!important}
.pv-top{width:100%;display:flex;align-items:center;justify-content:space-between;margin-bottom:4%}
.pv-logo{width:34%}
.pv-official{font-size:9px;font-weight:700;color:var(--highland)}
.pv-date{font-size:12px;font-weight:700;color:var(--highland);margin-bottom:5%}
.pv-photo{
  width:88%;aspect-ratio:4/3;background:var(--beige);border-radius:3px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  color:#a9a99f;font-size:10px;
}
.pv-photo img{width:100%;height:100%;object-fit:contain}
.pv-caption{margin-top:3.5%;text-align:center;font-size:8.5px;font-weight:700;color:var(--highland);line-height:1.5}
.pv-featuring{margin-top:4%;font-size:8.5px;font-weight:700;color:var(--highland)}
.pv-feat{text-align:center;font-size:7px;font-weight:700;color:var(--highland);line-height:1.7;margin-top:2%}
.pv-rule{width:80%;height:1px;background:var(--gold);margin-top:auto}
.pv-social{display:flex;align-items:center;gap:6px;font-size:6.5px;font-weight:600;color:var(--charcoal);margin-top:5%;flex-wrap:wrap;justify-content:center}
.pv-social .chip{
  display:inline-flex;align-items:center;justify-content:center;
  width:11px;height:11px;border-radius:50%;background:var(--highland);color:#fff;font-size:6px;font-weight:800;
}
.pv-graphic{padding:0}
.pv-graphic-empty{margin:auto;color:#a9a99f;font-size:12px}
.pv-graphic img{width:100%;height:100%;object-fit:cover}

@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .app{grid-template-columns:200px 1fr;}
  .preview{display:none}
}
@media (max-width:720px){
  .app{grid-template-columns:1fr;height:auto;overflow:auto}
  .rail{flex-direction:row;align-items:center;padding:16px 20px}
  .rail::after{width:100%;height:3px;top:auto;bottom:0}
  .rail-logo{width:110px;margin:0 20px 0 0}
  .rail-steps,.rail-foot{display:none}
  .form{padding:26px 20px 50px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}