/* ===== site.css — public site chrome (header, nav, boards, drawers, modal) =====
   Layered on top of styles.css, which still owns the artboards + builder. Scoped
   to body.site so the original tool page is untouched. */
:root{
  --navy:#12325a; --sky:#0171a7; --sky-deep:#015e8c; --warm:#f4690e; --red:#f4222e;
  --line2:#dce4ee; --ink2:#1c2a3a; --muted3:#62718589;
}
body.site{
  display:block; height:auto; min-height:100vh; overflow:hidden;
  background:#e9eef5; color:var(--ink2);
  display:flex; flex-direction:column;
}
body.site *{ box-sizing:border-box; }

/* ---------- header ---------- */
.site-head{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:18px; padding:13px 26px; background:#fff; border-bottom:1px solid var(--line2);
  box-shadow:0 1px 0 rgba(18,50,90,.03);
}
.brand{ display:flex; align-items:center; gap:14px; min-width:0; }
.brand-logo{ width:46px; height:46px; object-fit:contain; flex:0 0 auto; }
.brand-text{ min-width:0; }
.brand-name{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:20px; color:var(--navy);
  line-height:1.05; letter-spacing:.005em; white-space:nowrap; }
.brand-sub{ font-size:12.5px; color:#5d6b7a; font-weight:500; margin-top:1px; }
.head-actions{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.hbtn{
  display:inline-flex; align-items:center; gap:7px; border:0; cursor:pointer;
  font:inherit; font-size:13.5px; font-weight:600; padding:9px 15px; border-radius:9px;
  background:var(--sky); color:#fff; transition:.15s; white-space:nowrap;
}
.hbtn svg{ width:15px; height:15px; }
.hbtn:hover{ background:var(--sky-deep); }
.hbtn.ghost{ background:#eef3f8; color:var(--navy); }
.hbtn.ghost:hover{ background:#e2eaf3; }
.hbtn .badge{ display:inline-flex; align-items:center; justify-content:center; min-width:19px; height:19px;
  padding:0 5px; border-radius:999px; background:var(--warm); color:#fff; font-size:11px; font-weight:800; }
.hbtn.ghost.has-pending{ box-shadow:inset 0 0 0 1.5px var(--warm); }
.session-chip{ display:inline-flex; align-items:center; gap:8px; padding:6px 8px 6px 12px;
  border-radius:999px; background:#eef3f8; font-size:13px; font-weight:600; color:var(--navy); }
.session-chip .role-dot{ width:8px; height:8px; border-radius:50%; background:#1f8a5b; }
.session-chip.admin .role-dot{ background:var(--warm); }
.session-chip .logout{ border:0; background:#fff; color:#5d6b7a; font:inherit; font-size:12px; font-weight:600;
  padding:5px 10px; border-radius:999px; cursor:pointer; transition:.15s; }
.session-chip .logout:hover{ color:var(--red); }

/* ---------- month nav ---------- */
.monthnav{ flex:0 0 auto; background:#fff; border-bottom:1px solid var(--line2);
  padding:10px 20px 12px; display:flex; flex-direction:column; align-items:center; gap:9px; }
.nav-center{ display:flex; align-items:center; gap:18px; }
.nav-month{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:27px; color:var(--navy);
  min-width:200px; text-align:center; letter-spacing:.005em; }
.navarrow{ width:38px; height:38px; border-radius:50%; border:1px solid var(--line2); background:#fff;
  color:var(--navy); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:.15s; }
.navarrow svg{ width:19px; height:19px; }
.navarrow:hover{ background:var(--sky); color:#fff; border-color:var(--sky); }
.pills{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; max-width:920px; }
.pill{ position:relative; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line2);
  background:#f6f9fc; color:#7c8a99; font:inherit; font-size:12.5px; font-weight:600; padding:6px 12px;
  border-radius:999px; cursor:pointer; transition:.13s; }
.pill:hover{ border-color:var(--sky); color:var(--sky-deep); }
.pill.has-events{ color:var(--navy); background:#fff; }
.pill.active{ background:var(--sky); border-color:var(--sky); color:#fff; }
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--warm); display:none; }
.pill.has-pending .dot{ display:inline-block; }
.pill.active.has-pending .dot{ background:#ffd9bf; }

/* ---------- demo + preview bars ---------- */
.demo-note{ flex:0 0 auto; background:#fff7e6; color:#8a5a12; border-bottom:1px solid #f3e2bd;
  font-size:12.5px; font-weight:500; text-align:center; padding:7px 16px; }
.preview-bar{ display:none; }
.preview-bar.on{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:16px;
  background:#fff1e6; color:#9a4a13; border-bottom:1px solid #f5d6bb; padding:8px 16px; font-size:13px; }
.preview-bar.on b{ color:#7a3a0e; }
.preview-bar #previewExit{ border:0; background:var(--warm); color:#fff; font:inherit; font-weight:700;
  font-size:12.5px; padding:6px 13px; border-radius:8px; cursor:pointer; }

/* ---------- boards ---------- */
.boards{ flex:1 1 auto; min-height:0; overflow:auto; display:flex; align-items:flex-start;
  justify-content:center; gap:32px; padding:30px 28px 34px;
  background:
    radial-gradient(circle at 1px 1px, rgba(18,50,90,.05) 1px, transparent 0) 0 0/22px 22px,
    #e9eef5; }
.boards.stacked{ flex-direction:column; align-items:center; gap:34px; }
.board-frame{ display:flex; flex-direction:column; align-items:center; gap:9px; }
.board-label{ font-family:'Montserrat',sans-serif; font-weight:700; font-size:12px; letter-spacing:.14em;
  text-transform:uppercase; color:#5d6b7a; }
.board-scale{ position:relative; }
.board-scale > .artboard{ box-shadow:0 18px 50px rgba(18,40,70,.26); }

/* ---------- action bar ---------- */
.actionbar{ flex:0 0 auto; background:#fff; border-top:1px solid var(--line2); padding:12px 20px; }
.ab-inner{ display:flex; gap:11px; flex-wrap:wrap; justify-content:center; }
.actionbar .dl{ width:auto; padding:11px 18px; font-size:13.5px; box-shadow:none; }
.actionbar .dl.secondary{ margin-top:0; }
.actionbar .dl.ics{ margin-top:0; }

/* ---------- modal (login) ---------- */
.modal{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(18,32,46,.5); backdrop-filter:blur(3px); padding:20px; }
.modal.on{ display:flex; }
.modal-card{ width:380px; max-width:100%; background:#fff; border-radius:16px; padding:26px 26px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.32); }
.modal-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:22px; color:var(--navy); }
.modal-sub{ font-size:13px; color:#5d6b7a; line-height:1.5; margin:5px 0 18px; }
.fld{ display:block; margin-bottom:13px; }
.fld span{ display:block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:#5d6b7a; margin-bottom:6px; }
.fld input{ width:100%; font:inherit; font-size:14px; padding:11px 12px; border:1px solid var(--line2);
  border-radius:9px; outline:none; transition:.15s; }
.fld input:focus{ border-color:var(--sky); box-shadow:0 0 0 3px rgba(1,113,167,.14); }
.modal-err{ color:var(--red); font-size:12.5px; font-weight:600; min-height:18px; margin:2px 0 6px; }
.modal-actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:6px; }
.mbtn{ border:0; cursor:pointer; font:inherit; font-size:13.5px; font-weight:700; padding:10px 18px;
  border-radius:9px; transition:.15s; }
.mbtn.ghost{ background:#eef3f8; color:var(--navy); }
.mbtn.ghost:hover{ background:#e2eaf3; }
.mbtn.primary{ background:var(--sky); color:#fff; }
.mbtn.primary:hover{ background:var(--sky-deep); }
.mbtn.primary.admin{ background:var(--warm); }
.mbtn.primary.admin:hover{ background:#d9590a; }
.mbtn:disabled{ opacity:.6; cursor:default; }

/* ---------- drawer (edit + review) ---------- */
.drawer{ position:fixed; top:0; right:0; height:100vh; width:430px; max-width:100%; z-index:160;
  background:#fff; box-shadow:-16px 0 50px rgba(18,40,70,.18); display:flex; flex-direction:column;
  transform:translateX(102%); transition:transform .28s cubic-bezier(.4,0,.2,1); }
.drawer.on{ transform:translateX(0); }
.drawer-head{ flex:0 0 auto; display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:20px 22px 16px; border-bottom:1px solid var(--line2); }
.drawer-title{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:21px; color:var(--navy); }
.drawer-note{ font-size:12.5px; color:#5d6b7a; line-height:1.5; margin-top:4px; }
.drawer-note b{ color:var(--ink2); }
.drawer-x{ flex:0 0 auto; width:32px; height:32px; border:0; background:#eef3f8; color:#5d6b7a;
  border-radius:8px; cursor:pointer; font-size:15px; transition:.15s; }
.drawer-x:hover{ background:#e2eaf3; color:var(--ink2); }
.drawer-body{ flex:1 1 auto; overflow-y:auto; padding:20px 22px 26px; }
.drawer-foot{ flex:0 0 auto; display:flex; gap:10px; justify-content:flex-end; padding:14px 22px;
  border-top:1px solid var(--line2); }
.drawer .ed-input{ width:100%; font:inherit; font-size:14px; padding:10px 12px; border:1px solid var(--line2);
  border-radius:9px; outline:none; }
.drawer .ed-input:focus{ border-color:var(--sky); box-shadow:0 0 0 3px rgba(1,113,167,.12); }
.pending-note{ background:#fff7e6; border:1px solid #f3e2bd; color:#8a5a12; font-size:12.5px;
  border-radius:9px; padding:9px 12px; margin-bottom:16px; line-height:1.45; }

/* ---------- review queue ---------- */
.rv-empty{ text-align:center; color:#8a96a4; padding:50px 16px; }
.rv-empty svg{ width:42px; height:42px; color:#b6c2d0; margin-bottom:12px; }
.rv-empty .muted{ font-size:12.5px; color:#9aa6b3; margin-top:4px; }
.rv-list{ display:flex; flex-direction:column; gap:14px; }
.rv-card{ border:1px solid var(--line2); border-radius:13px; padding:14px 15px; background:#fcfdfe; }
.rv-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:9px; }
.rv-month{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px; color:var(--navy); }
.rv-meta{ font-size:11.5px; color:#8a96a4; font-weight:600; }
.rv-diff{ background:#fff; border:1px solid var(--line2); border-radius:9px; padding:9px 11px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; line-height:1.5; max-height:230px; overflow:auto; }
.dl-line{ white-space:pre-wrap; word-break:break-word; }
.dl-line.add{ color:#13744a; }
.dl-line.del{ color:#b3261e; }
.dl-line.note{ color:#8a5a12; }
.dl-line.muted{ color:#9aa6b3; }
.dl-summary{ margin-top:7px; padding-top:7px; border-top:1px dashed var(--line2); font-size:11px; color:#7c8a99; }
.dl-summary .add{ color:#13744a; }
.dl-summary .del{ color:#b3261e; }
.rv-actions{ display:flex; gap:8px; margin-top:12px; }
.rv-btn{ border:0; cursor:pointer; font:inherit; font-size:12.5px; font-weight:700; padding:8px 12px;
  border-radius:8px; transition:.15s; }
.rv-btn.preview{ background:#eef3f8; color:var(--navy); }
.rv-btn.preview:hover{ background:#e2eaf3; }
.rv-btn.reject{ background:#fdeceb; color:#b3261e; }
.rv-btn.reject:hover{ background:#fbdedc; }
.rv-btn.approve{ background:#1f8a5b; color:#fff; margin-left:auto; }
.rv-btn.approve:hover{ background:#19754d; }

/* ---------- toast ---------- */
.toast{ position:fixed; bottom:22px; left:50%; transform:translate(-50%,16px); z-index:300;
  background:var(--navy); color:#fff; font-size:13.5px; font-weight:600; padding:12px 20px;
  border-radius:11px; box-shadow:0 12px 34px rgba(0,0,0,.3); opacity:0; pointer-events:none;
  transition:opacity .2s, transform .2s; max-width:90vw; text-align:center; }
.toast.on{ opacity:1; transform:translate(-50%,0); }
.toast.ok{ background:#1f8a5b; }
.toast.err{ background:#c2261e; }

/* busy overlay → fixed on the site page */
body.site .busy{ position:fixed; }

/* ---------- responsive ---------- */
@media (max-width:720px){
  .site-head{ flex-wrap:wrap; gap:10px; padding:11px 16px; }
  .brand-name{ font-size:17px; }
  .nav-month{ font-size:22px; min-width:150px; }
  .head-actions{ width:100%; justify-content:flex-end; }
  .drawer{ width:100%; }
  .boards{ padding:20px 14px 26px; }
}