@font-face{font-family:Heebo;src:url(/fonts/Heebo.ttf) format("truetype");font-weight:100 900;font-display:swap}
:root{
  --green:#3A5941;--green-ink:#2C4532;--sand:#D9CBB0;--paper:#F5F3EE;--card:#FDFCF9;
  --ink:#26302A;--muted:#5F665F;--line:#DDD8CC;--graphite:#2F302E;--warn:#9A4A2E;
  --main:.46;--thumb:.075;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper)}
body{font-family:Heebo,Arial,sans-serif;color:var(--ink);background:var(--paper);min-height:100vh;overflow-x:hidden}
button{font:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}

/* top bar */
.bar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:14px 32px;background:rgba(245,243,238,.94);backdrop-filter:blur(6px);border-bottom:1px solid var(--line)}
.bar-logo{height:44px}
.bar-title{flex:1}
.bar-title h1{font-size:22px;font-weight:800;line-height:1.2}
.bar-title p{font-size:14px;color:var(--muted)}
.bar-status{font-size:14px;font-weight:600;padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);min-width:110px;text-align:center}
.bar-status.saving{color:var(--muted)}
.bar-status.saved{color:var(--green)}
.bar-status.error{color:#fff;background:var(--warn);border-color:var(--warn)}

.intro{max-width:760px;margin:22px 32px 0;font-size:16px;line-height:1.6;color:var(--muted)}

/* board */
main{padding:12px 0 80px}
.month{margin:36px 32px 8px;font-size:15px;font-weight:700;color:var(--green);border-bottom:2px solid var(--green);padding-bottom:6px;max-width:220px}
.post{margin:18px 0 0;padding:22px 0 26px;border-bottom:1px solid var(--line)}
.post-head{display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px 24px;padding:0 32px 16px}
.date{flex:none;width:78px;text-align:center;border-left:2px solid var(--green);padding-left:16px}
.date b{display:block;font-size:30px;font-weight:800;line-height:1;color:var(--green)}
.date span{font-size:14px;color:var(--muted)}
.post-meta{flex:1;min-width:260px}
.post-title{font-size:24px;font-weight:800;line-height:1.25;border-radius:6px;padding:2px 4px;margin:-2px -4px}
.post-sub{font-size:14px;color:var(--muted);margin-top:4px}
.approve{display:flex;flex-direction:column;gap:8px;min-width:280px}
.approve-btns{display:flex;gap:8px}
.chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:7px 16px;font-size:15px;font-weight:600}
.chip[aria-pressed="true"].ok{background:var(--green);border-color:var(--green);color:#fff}
.chip[aria-pressed="true"].fix{background:var(--warn);border-color:var(--warn);color:#fff}
.comment{width:100%;min-height:44px;resize:vertical;border:1.5px solid var(--line);border-radius:10px;background:var(--card);padding:8px 12px;font:inherit;font-size:15px;color:var(--ink)}
.dl{align-self:flex-start;border:none;background:none;color:var(--green);font-weight:700;font-size:15px;text-decoration:underline;text-underline-offset:3px;padding:2px 0}

/* post body: viewer + caption */
.post-body{display:grid;grid-template-columns:auto minmax(280px,1fr);gap:28px 40px;align-items:start;padding:0 32px}
.viewer{display:flex;flex-direction:column;align-items:center;gap:12px;outline:none;min-width:0;max-width:100%}
.post-body>*{min-width:0}
.stage{display:flex;align-items:center;gap:14px}
.main{width:calc(1080px*var(--main));height:calc(1350px*var(--main));position:relative;overflow:hidden;border-radius:12px;box-shadow:0 1px 0 var(--line),0 14px 34px rgba(38,48,42,.16);touch-action:pan-y}
.main>.slide{transform:scale(var(--main));transform-origin:top right;position:absolute;top:0;right:0}
.nav{width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--green);display:flex;align-items:center;justify-content:center;flex:none}
.nav svg{width:26px;height:26px}
.nav:hover:not(:disabled){background:var(--green);color:#fff;border-color:var(--green)}
.nav:disabled{opacity:.3;cursor:default}
.counter{font-size:15px;font-weight:700;color:var(--muted)}
.thumbs{display:flex;gap:8px;max-width:calc(1080px*var(--main) + 132px);overflow-x:auto;padding:4px 2px 8px}
.thumb{flex:none;position:relative;border:2px solid transparent;border-radius:8px;background:none;padding:0;opacity:.7}
.thumb:hover{opacity:1}
.thumb.on{border-color:var(--green);opacity:1}
.mini{width:calc(1080px*var(--thumb));height:calc(1350px*var(--thumb));position:relative;overflow:hidden;border-radius:6px}
.mini>.slide{transform:scale(var(--thumb));transform-origin:top right;position:absolute;top:0;right:0;pointer-events:none}
.tn{position:absolute;bottom:4px;left:4px;background:rgba(38,48,42,.8);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:1px 7px}
.thumb.add{width:calc(1080px*var(--thumb));height:calc(1350px*var(--thumb));border:2px dashed var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--muted);font-size:12px;font-weight:700;opacity:1}
.thumb.add svg{width:22px;height:22px}
.thumb.add:hover{border-color:var(--green);color:var(--green)}
.toolbar{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.grp{display:flex;align-items:center;gap:6px}
.grp+.grp{border-right:1px solid var(--line);padding-right:10px}
.grp-l{font-size:12px;color:var(--muted);font-weight:600;margin-left:2px}
.tb{display:flex;align-items:center;gap:6px;border:1px solid var(--line);background:#fff;border-radius:9px;padding:6px 10px;font-size:14px;font-weight:600;color:var(--ink)}
.tb svg{width:18px;height:18px}
.tb:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.tb.on{background:var(--green);border-color:var(--green);color:#fff}
.tb.danger{color:var(--warn)}
.tb.danger:hover:not(:disabled){border-color:var(--warn);color:var(--warn)}
.tb:disabled{opacity:.35;cursor:default}
.tool{border:1px solid var(--line);background:var(--card);border-radius:8px;padding:5px 10px;font-size:13px;color:var(--ink)}
.tool:hover{border-color:var(--green)}

/* undo / redo + toast */
.history{display:flex;gap:6px}
.hbtn{display:flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:6px 14px;font-size:14px;font-weight:700;color:var(--ink)}
.hbtn svg{width:18px;height:18px}
.hbtn:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.hbtn:disabled{opacity:.35;cursor:default}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--graphite);color:#fff;padding:10px 20px;border-radius:999px;font-size:15px;font-weight:600;z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.2)}

/* ===== slide frame (1080x1350) ===== */
.slide{width:1080px;height:1350px;background:var(--paper);position:relative;overflow:hidden;font-family:Heebo,Arial,sans-serif;direction:rtl}
.s-area{position:absolute;left:44px;top:44px;width:992px;height:1000px;border-radius:30px;overflow:hidden;display:flex;gap:12px;background:var(--paper);box-shadow:0 18px 40px rgba(38,48,42,.18)}
.slide.cover .s-area{height:960px}
.slide.cover.two .s-area{flex-direction:column}
.s-ph{flex:1;position:relative;overflow:hidden;background-size:cover;background-repeat:no-repeat;background-color:#CFCBC1}
.slide.two .s-ph{border-radius:22px}
.s-lab{position:absolute;bottom:22px;right:22px;background:var(--green);color:#fff;font-weight:700;font-size:30px;padding:8px 22px;border-radius:999px;min-width:40px;min-height:52px}
.s-lab:empty{display:none}
.editing .s-lab:empty{display:block;opacity:.0}
.editing .s-ph:hover .s-lab:empty{opacity:.6}
.s-tag{position:absolute;top:70px;right:70px;background:rgba(245,243,238,.92);color:var(--ink);font-weight:700;font-size:26px;padding:8px 20px;border-radius:999px;z-index:5}
.s-bottom{position:absolute;left:44px;right:44px;top:1070px;bottom:44px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.slide.cover .s-bottom{top:1030px}
.s-txt{flex:1;min-width:0}
.s-bar{width:90px;height:8px;background:var(--green);margin-bottom:14px;border-radius:4px}
.s-title{font-size:46px;font-weight:800;color:var(--ink);line-height:1.12}
.slide.cover .s-title{font-size:58px}
.s-sub{font-size:28px;color:var(--muted);margin-top:8px;line-height:1.3;min-height:36px}
.s-side{display:flex;flex-direction:column;align-items:center;gap:8px}
.s-side img{width:200px}
.s-cnt{font-size:22px;color:#8A8F8A;font-weight:600;direction:ltr}
.s-nxt{position:absolute;left:70px;bottom:332px;display:flex;align-items:center;gap:14px;background:var(--green);color:#fff;font-weight:800;font-size:30px;padding:14px 22px 14px 26px;border-radius:999px;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:6}
.slide.cover .s-nxt{bottom:372px}
.s-nxt svg,.s-peek svg{flex:none}
.s-peek{position:absolute;left:14px;top:496px;width:96px;height:96px;border-radius:50%;background:rgba(58,89,65,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.25);z-index:6}
.slide.cover .s-peek{top:476px}
.s-strip{position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--green)}

/* edit affordances (never exported) */
.editing [contenteditable]{cursor:text;border-radius:8px;outline:none}
.editing [contenteditable]:hover{box-shadow:0 0 0 4px rgba(58,89,65,.25)}
.editing [contenteditable]:focus{box-shadow:0 0 0 5px var(--green)}
.ph-tools{position:absolute;top:16px;left:16px;display:none;gap:10px;z-index:8;align-items:center}
.editing .s-ph.clickable{cursor:pointer}
.editing .s-ph.clickable:hover::before,.editing .s-ph.clickable:focus-visible::before{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 8px var(--green);z-index:7;pointer-events:none}
.ph-hint{background:rgba(38,48,42,.85);color:#fff;border-radius:14px;padding:14px 22px;font-size:30px;font-weight:700}
.caption{max-width:620px}
.caption-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.caption-head label{font-size:14px;font-weight:700;color:var(--green)}
.caption-text{width:100%;min-height:120px;resize:vertical;border:1.5px solid var(--line);border-radius:10px;background:var(--card);padding:12px 14px;font:inherit;font-size:16px;line-height:1.6;color:var(--ink);overflow:hidden}
.caption-text:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(58,89,65,.2)}
.editing .s-ph:hover .ph-tools,.editing .s-ph:focus-within .ph-tools{display:flex}
.ph-btn{background:rgba(38,48,42,.85);color:#fff;border:none;border-radius:14px;padding:14px 22px;font-size:30px;font-weight:700}
.s-ph.uploading::after{content:"מעלה תמונה…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(245,243,238,.8);font-size:40px;font-weight:700;color:var(--green)}
.nxt-empty{opacity:.35}

#export-stage{position:fixed;left:-20000px;top:0}

@media (max-width:720px){
  .bar{padding:10px 16px;gap:12px}
  .bar-logo{height:34px}
  .bar-title h1{font-size:18px}
  .post-head{padding-left:16px;padding-right:16px}
  .post-body{grid-template-columns:1fr;padding:0 12px}
  :root{--main:.26;--thumb:.06}
  .nav{width:34px;height:34px}
  .nav svg{width:20px;height:20px}
  .stage{gap:4px}
  .bar{flex-wrap:wrap;row-gap:8px}
  .bar-title{flex:1 1 60%}
  .bar-title p{display:none}
  .history{order:3;flex:1}
  .bar-status{order:4;min-width:0;font-size:13px;padding:5px 10px}
  .thumbs{max-width:100%}
  .toolbar{gap:6px;padding:8px}
  .tb{padding:6px 8px;font-size:13px}
  .history .hbtn span{display:none}
  .grp-l{display:none}
  .month,.intro{margin-left:16px;margin-right:16px}
  .approve{min-width:0;width:100%}
  .editing .ph-tools{display:flex}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.key-warn{margin:18px 32px 0;padding:12px 16px;border-radius:10px;background:#F6E7E1;color:var(--warn);font-weight:600;max-width:760px}
.summary{display:flex;flex-wrap:wrap;gap:10px;margin:18px 32px 0}
.sum{padding:6px 14px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:14px;font-weight:700}
.sum.ok{color:var(--green);border-color:var(--green)}
.sum.fix{color:var(--warn);border-color:var(--warn)}
.sum.muted{font-weight:500;color:var(--muted)}
.post-upd{font-size:13px;color:var(--muted);margin-top:2px}
.post-upd.by-client{color:var(--warn);font-weight:700}