/* Editor chrome. The book's own styles live in book.css. */
*{box-sizing:border-box}
[hidden]{display:none !important}      /* the attribute has to beat display:grid/flex */
html,body{margin:0; height:100%}
body{
  background:#e6e9ed; color:#1d1f22;
  font-family:Futura,"Avenir Next","Century Gothic",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select{font:inherit; color:inherit}

.app{
  display:grid; grid-template-columns:352px 1fr; grid-template-rows:1fr;
  height:100svh; overflow:hidden;
}
.app > *{min-height:0}          /* let the panel scroll instead of stretching the row */
.app[data-mode="preview"]{grid-template-columns:0 1fr}
.app[data-mode="preview"] .panel{transform:translateX(-100%); pointer-events:none}

/* ---------- panel ---------- */
.panel{
  position:relative; z-index:5; display:flex; flex-direction:column; min-height:0;
  width:352px;                       /* keeps its width while sliding out of preview */
  background:#f1f3f6; border-right:1px solid rgba(29,31,34,.09);
  transition:transform .4s cubic-bezier(.23,1,.32,1);
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px 14px; border-bottom:1px solid rgba(29,31,34,.08);
}
.wordmark{font-size:15px; letter-spacing:.16em; text-transform:uppercase}
.head-actions{display:flex; gap:8px; align-items:center}
.panel-body{flex:1; overflow-y:auto; padding:0 20px 18px}
.panel-foot{
  display:flex; flex-direction:column; gap:10px; padding:14px 20px 16px;
  border-top:1px solid rgba(29,31,34,.08); background:#eceff3;
}
.foot-note{margin:0; font-size:10.5px; line-height:1.55; color:rgba(29,31,34,.45)}
.foot-note code{font-family:ui-monospace,Menlo,monospace; font-size:10px; background:rgba(29,31,34,.07); padding:1px 4px; border-radius:3px}

.tabs{
  display:flex; gap:2px; padding:10px 14px 0; background:#f1f3f6;
  border-bottom:1px solid rgba(29,31,34,.09);
}
.tabs button{
  flex:1; border:0; background:transparent; cursor:pointer; padding:9px 4px 11px;
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(29,31,34,.45); border-bottom:2px solid transparent; transition:color .16s, border-color .16s;
}
.tabs button:hover{color:rgba(29,31,34,.72)}
.tabs button[aria-pressed="true"]{color:#1d1f22; border-bottom-color:#2440c8}
.tab{display:none}
.tab.on{display:block}
.group{padding:16px 0; border-bottom:1px solid rgba(29,31,34,.07)}
.group:last-child{border-bottom:0}
.group[hidden]{display:none}

/* one colour control: palette swatches, the page default, and a free picker */
.colour-field{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.colour-field .swatch{width:30px; height:30px}
.colour-field .pick{position:relative; width:30px; height:30px; border-radius:50%; overflow:hidden;
  border:1px solid rgba(29,31,34,.18); cursor:pointer; flex:0 0 auto;
  background:conic-gradient(#ff4d4d,#ffd24d,#4dff88,#4dd2ff,#b84dff,#ff4d4d);
}
.colour-field .pick input{position:absolute; inset:-6px; width:150%; height:150%; border:0; padding:0; cursor:pointer; opacity:0}
.colour-field .pick[data-set="1"]{background:var(--picked)}
.colour-field .pick::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
}
.colour-field .swatch[aria-pressed="true"],.colour-field .pick[aria-pressed="true"]{
  box-shadow:0 0 0 2px #f1f3f6,0 0 0 3.5px #2440c8;
}
.lbl{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(29,31,34,.5); margin-bottom:10px; display:flex; justify-content:space-between;
}
.lbl.sub{margin-top:16px}
.count{letter-spacing:.1em; color:rgba(29,31,34,.38)}

.field{
  width:100%; padding:9px 11px; margin-bottom:8px; border-radius:7px;
  border:1px solid rgba(29,31,34,.14); background:#fff; font-size:13.5px;
  transition:border-color .16s;
}
.field:focus{outline:none; border-color:#3d6ced}
textarea.field{resize:vertical; line-height:1.5; min-height:62px; font-size:13px}

.row{display:flex; gap:8px}
.ghost-btn,.primary-btn,.icon-btn{
  border:1px solid rgba(29,31,34,.16); background:#fff; border-radius:7px;
  padding:8px 12px; font-size:12px; letter-spacing:.06em; cursor:pointer;
  transition:background .16s, border-color .16s, color .16s, transform .12s;
}
.ghost-btn:hover,.icon-btn:hover{background:#fbfcfd; border-color:rgba(29,31,34,.3)}
.ghost-btn:active,.primary-btn:active{transform:scale(.97)}
.ghost-btn.wide{flex:1}
.ghost-btn.danger:hover{color:#b0392b; border-color:rgba(176,57,43,.4)}
.icon-btn{padding:6px 10px; font-size:14px; line-height:1}
.primary-btn{flex:1; background:#2440c8; border-color:#2440c8; color:#fff; letter-spacing:.1em}
.primary-btn:hover{background:#1c33a6}
button:disabled{opacity:.42; cursor:default; transform:none}

.theme-pick{display:flex; align-items:center; gap:9px}
.theme-pick select{flex:1; margin:0; cursor:pointer}
.themes{
  max-height:196px; overflow-y:auto; margin-bottom:4px;
  border:1px solid rgba(29,31,34,.1); border-radius:8px; background:#fff;
}
.theme-row{
  display:flex; align-items:center; gap:9px; width:100%; padding:6px 9px;
  border:0; background:transparent; cursor:pointer; text-align:left;
  border-bottom:1px solid rgba(29,31,34,.05);
}
.theme-row:last-child{border-bottom:0}
.theme-row:hover{background:#f4f7fb}
.theme-row[aria-pressed="true"]{background:#eaefff}
.theme-chips{display:flex; flex:0 0 auto; border-radius:4px; overflow:hidden; box-shadow:0 0 0 1px rgba(29,31,34,.12)}
.theme-chips i{width:16px; height:22px; display:block}
.theme-row span{font-size:11.5px; letter-spacing:.02em; color:rgba(29,31,34,.78); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.swatches{display:flex; gap:8px}
.swatch{
  width:36px; height:36px; border-radius:50%; border:1px solid rgba(29,31,34,.16);
  cursor:pointer; padding:0; transition:transform .14s, box-shadow .14s;
}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px #e6e9ed,0 0 0 3.5px #2440c8; transform:scale(1.04)}

/* photo tray */
.drop{
  display:grid; place-items:center; height:76px; border-radius:9px;
  border:1.5px dashed rgba(29,31,34,.22); background:#fff; cursor:pointer;
  font-size:12.5px; color:rgba(29,31,34,.6); text-align:center; transition:all .16s;
}
.drop:hover,.drop.over{border-color:#3d6ced; color:#2440c8; background:#f7f9ff}
.tray{display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:10px}
.carry-ghost{
  position:fixed; z-index:300; width:110px; height:110px; object-fit:cover;
  margin:-55px 0 0 -55px; border:4px solid #fffdf8; border-radius:2px;
  box-shadow:0 10px 26px rgba(20,22,30,.35); transform:rotate(-4deg);
  pointer-events:none; opacity:.92;
}
.thumb{
  position:relative; aspect-ratio:1; border-radius:6px; overflow:hidden; cursor:grab;
  touch-action:pan-y;
  border:0; padding:0; background:#dfe3e8; transition:transform .14s, box-shadow .14s;
}
.thumb img{width:100%; height:100%; object-fit:cover; display:block; -webkit-user-drag:none; user-select:none}
.thumb:hover{transform:translateY(-2px); box-shadow:0 4px 10px rgba(20,22,30,.18)}
.thumb.used::after{
  content:""; position:absolute; right:4px; bottom:4px; width:7px; height:7px;
  border-radius:50%; background:#2440c8; box-shadow:0 0 0 2px #fff;
}
.thumb-x{
  position:absolute; top:2px; right:2px; width:17px; height:17px; border-radius:50%;
  border:0; background:rgba(20,22,30,.62); color:#fff; font-size:11px; line-height:17px;
  padding:0; cursor:pointer; opacity:0; transition:opacity .14s;
}
.thumb:hover .thumb-x{opacity:1}

/* pages + layouts */
.hint-line{margin:10px 0 0; font-size:11px; line-height:1.5; color:rgba(29,31,34,.42)}
.mini-lbl{font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:rgba(29,31,34,.42); margin:0 0 6px}
.side-colours{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px}
.swatches.tight{gap:5px}
.swatches.tight .swatch{width:26px; height:26px}
.swatch.none{
  background:repeating-linear-gradient(45deg,#fff 0 5px,#e3e6ea 5px 10px);
  position:relative;
}
.pages{display:flex; flex-wrap:wrap; gap:6px}
.page-chip{
  width:34px; height:34px; border-radius:7px; border:1px solid rgba(29,31,34,.16);
  background:#fff; cursor:pointer; font-size:12px; padding:0;
}
.page-chip[aria-pressed="true"]{background:#2440c8; border-color:#2440c8; color:#fff}
.page-chip.add{border-style:dashed; font-size:15px; color:rgba(29,31,34,.5)}
.page-chip.cover{font-size:13px}
.page-chip.cover[aria-pressed="false"]{background:#f6f3ec; border-color:rgba(29,31,34,.28)}
.layouts{display:grid; grid-template-columns:repeat(4,1fr); gap:6px}
.lay{
  aspect-ratio:16/10; border-radius:6px; border:1px solid rgba(29,31,34,.14);
  background:#fff; cursor:pointer; padding:0; position:relative; overflow:hidden;
}
.lay[aria-pressed="true"]{border-color:#2440c8; box-shadow:inset 0 0 0 1px #2440c8}
.lay svg{width:100%; height:100%; display:block}
.lay-name{
  font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  color:rgba(29,31,34,.45); margin-top:6px; grid-column:1/-1;
}

/* inspector */
.inspector{
  border-top:1px solid rgba(29,31,34,.1); background:#eef1f5;
  padding:14px 20px 16px; max-height:44vh; overflow-y:auto;
}
.inspector[hidden]{display:none}
.insp-title{
  font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(29,31,34,.5); margin-bottom:12px;
}
.ctrl{margin-bottom:12px}
.ctrl > span{display:block; font-size:11px; color:rgba(29,31,34,.55); margin-bottom:5px; letter-spacing:.06em}
.ctrl input[type=range]{width:100%; accent-color:#2440c8}
.seg{display:flex; gap:5px; flex-wrap:wrap}
.seg button{
  flex:1; min-width:52px; padding:7px 4px; font-size:11px; letter-spacing:.05em;
  border:1px solid rgba(29,31,34,.14); background:#fff; border-radius:6px; cursor:pointer;
}
.seg button[aria-pressed="true"]{background:#2440c8; border-color:#2440c8; color:#fff}

/* ---------- stage ---------- */
.stage{
  position:relative; display:flex; align-items:center; justify-content:center;
  padding:20px 28px 26px; overflow:hidden; --reserve:205px;
  --device-w:100%; --device-h:100%;
  background:var(--stage-bg,#e6e9ed); transition:background .6s ease;
}
.stage[data-device="tablet"]{--device-w:834px; --device-h:1112px}
.stage[data-device="mobile"]{--device-w:390px; --device-h:844px}
.stage[data-device="mobile"][data-landscape="1"]{--device-w:844px; --device-h:390px}
.device-box{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:min(var(--device-w),100%); height:min(var(--device-h),100%);
  container-type:inline-size; container-name:stagebox;   /* so the book's own
      responsive rules react to the simulated device, not the real window */
}
.stage:not([data-device="desktop"]) .device-box{
  border:1px solid rgba(29,31,34,.16); border-radius:22px; padding:18px;
  box-shadow:0 18px 50px rgba(20,22,30,.13);
}

/* preview: the booklet and nothing else */
.app[data-mode="preview"] .stage{--reserve:70px; padding:0}
.app[data-mode="preview"] .kicker,
.app[data-mode="preview"] .stage-title,
.app[data-mode="preview"] .sb-captions,
.app[data-mode="preview"] .stage-hint{display:none}
.app[data-mode="preview"] .sb-wrap{gap:0}

.preview-bar{
  position:fixed; top:14px; left:16px; z-index:140; display:none; gap:8px; align-items:center;
  opacity:.28; transition:opacity .25s;
}
.preview-bar:hover{opacity:1}
.app[data-mode="preview"] .preview-bar{display:flex}
.pill{
  border:0; border-radius:999px; padding:7px 14px; font-size:11.5px; letter-spacing:.1em;
  background:rgba(20,22,30,.62); color:#fff; cursor:pointer; backdrop-filter:blur(6px);
}
.pill:hover{background:rgba(20,22,30,.85)}
.pill-seg{gap:0; border-radius:999px; overflow:hidden; background:rgba(20,22,30,.62); backdrop-filter:blur(6px)}
.pill-seg button{
  border:0; background:transparent; color:rgba(255,255,255,.66); padding:7px 12px;
  font-size:11px; letter-spacing:.08em; min-width:0; border-radius:0;
}
.pill-seg button[aria-pressed="true"]{background:rgba(255,255,255,.2); color:#fff}
/* the book is sized by whichever runs out first: the column's width or the window's height */
.stage .sb-book{max-width:min(980px,calc((100svh - var(--reserve)) * 1.7778))}
.kicker{
  margin:0 0 12px; font-size:11px; letter-spacing:.24em; color:rgba(29,31,34,.55);
}
.stage-title{
  margin:0 0 14px; font-weight:400; line-height:1; letter-spacing:.05em;
  font-size:clamp(20px,2.3vw,34px); color:#2440c8; position:relative; z-index:0;
  transition:filter .5s, margin .5s, font-size .5s;
}
.app[data-mode="preview"] .stage-title{
  font-size:clamp(30px,5vw,68px); filter:blur(6px); margin-bottom:-.5em;
}
.app[data-mode="preview"] .stage-hint{opacity:0}
.sb-wrap{max-width:min(1080px,100%)}
.stage-hint{
  margin:16px 0 0; font-size:11px; letter-spacing:.1em; color:rgba(29,31,34,.42);
  transition:opacity .3s; text-align:center;
}

/* selection + handles, editor only */
.item.selected{outline:1.5px solid rgba(36,64,200,.9); outline-offset:3px}
.app[data-mode="edit"] .sb-base .item,
.app[data-mode="edit"] .sb-base img{-webkit-user-drag:none; user-select:none}

/* dropping a photo straight onto the page */
.sb-book.drop-ready::after,.sb-book.drop-target::after{
  content:""; position:absolute; inset:11% 21% 6% 21%; border-radius:12px;
  border:2px dashed rgba(36,64,200,.35); pointer-events:none; z-index:70;
  transition:border-color .16s, background .16s;
}
.sb-book.drop-target::after{border-color:#2440c8; background:rgba(36,64,200,.07)}
.app[data-mode="edit"] .sb-base .item{cursor:grab}
.app[data-mode="edit"] .sb-base .item.dragging{cursor:grabbing}
.handle{
  position:absolute; width:18px; height:18px; border-radius:50%;
  background:#fff; border:1.5px solid #2440c8; cursor:pointer; z-index:99;
  box-shadow:0 1px 4px rgba(20,22,30,.3);
}
.handle.rot{top:-26px; left:50%; transform:translateX(-50%); cursor:grab}
.handle.size{right:-11px; bottom:-11px; border-radius:4px; cursor:nwse-resize}
.handle.del{top:-11px; right:-11px; border-color:#b0392b; color:#b0392b;
  font-size:11px; line-height:15px; text-align:center; cursor:pointer}
.app[data-mode="preview"] .handle{display:none}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:rgba(29,31,34,.92); color:#fff; padding:10px 16px; border-radius:8px;
  font-size:12.5px; letter-spacing:.04em; z-index:200; opacity:0; pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.toast.on{opacity:1; transform:translateX(-50%) translateY(-4px)}

@media (max-width:900px){
  .app{grid-template-columns:1fr; grid-template-rows:minmax(0,auto) minmax(0,1fr)}
  .panel{width:auto; border-right:0; border-bottom:1px solid rgba(29,31,34,.09); max-height:46vh}
  .app[data-mode="preview"] .panel{display:none}
  .app[data-mode="preview"]{grid-template-rows:1fr}
}

.empty-note{
  margin:18px 0 0; font-size:12px; line-height:1.6; color:rgba(29,31,34,.5);
}
.empty-note b{color:rgba(29,31,34,.78); font-weight:400}
.themes{max-height:172px}
.tray{grid-template-columns:repeat(5,1fr); gap:6px}