/* FLUX Studio — editor styles. FLUX language: Courier, monochrome, hairlines, square. */
:root { --black:#000; --white:#fff; --dim:#888; --faint:#ccc; --desk:#e9e9e7; --font:'Courier New',Courier,monospace;
        --lib:268px; --insp:292px; --top:52px; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--white); color:var(--black); font-family:var(--font); -webkit-font-smoothing:antialiased; }
body { display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden; }
button { font-family:var(--font); color:var(--black); }

/* top bar */
.st-top { height:var(--top); flex:0 0 auto; display:flex; align-items:center; gap:14px; padding:0 16px; border-bottom:2px solid var(--black); }
.st-mark { font-weight:bold; letter-spacing:.14em; font-size:13px; text-decoration:none; color:var(--black); }
.st-mark .flux-wordmark { display:inline-block; height:11px; width:auto; vertical-align:-1px; }   /* FLUX wordmark */
.st-name { font-size:13px; letter-spacing:.14em; margin-left:-6px; }
.st-mode { display:flex; margin-left:auto; border:1px solid var(--black); }
.st-mode[hidden] { display:none; } .st-mode[hidden] + .st-rnd { margin-left:auto; }   /* Studio is Manual only (2026-11-05) */
.st-mode button { background:var(--white); border:0; padding:7px 12px; font-size:10px; letter-spacing:.12em; cursor:pointer; }
.st-mode button[aria-selected="true"] { background:var(--black); color:var(--white); }
.st-sheets { display:flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.08em; }
.st-sheets button { width:26px; height:26px; border:1px solid var(--faint); background:var(--white); cursor:pointer; font-size:14px; line-height:1; }
.st-sheets button:hover { border-color:var(--black); }

/* three columns */
.st-body { flex:1 1 auto; min-height:0; display:grid; grid-template-columns:var(--lib) 1fr var(--insp); }
.st-panel-head { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-bottom:1px solid var(--black); font-size:10px; letter-spacing:.14em; }
.st-x { display:none; border:0; background:none; font-size:18px; cursor:pointer; }

/* library */
.st-lib { border-right:1px solid var(--black); display:flex; flex-direction:column; min-height:0; background:var(--white); }
.st-add { display:flex; flex-direction:column; gap:3px; margin:12px; padding:14px; border:1px dashed var(--black); cursor:pointer; text-align:center; font-size:9.5px; letter-spacing:.08em; color:var(--dim); }
.st-add strong { color:var(--black); font-size:11px; letter-spacing:.12em; }
.st-add.over { background:#f2f2f2; }
.st-armed { margin:0 12px 8px; padding:8px 10px; background:var(--black); color:var(--white); font-size:9.5px; letter-spacing:.06em; }
.st-armed button { background:none; border:0; color:var(--white); text-decoration:underline; cursor:pointer; font-size:9.5px; padding:0; }
.st-lib-grid { flex:1 1 auto; overflow-y:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:0 12px 12px; align-content:start; }
.st-th { position:relative; aspect-ratio:1; background:#f4f4f4; border:1px solid transparent; cursor:grab; touch-action:manipulation; user-select:none; -webkit-user-select:none; }
.st-th img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.st-th.armed { border-color:var(--black); outline:2px solid var(--black); outline-offset:1px; }
.st-th .used { position:absolute; right:2px; bottom:2px; background:var(--black); color:var(--white); font-size:8px; padding:1px 3px; letter-spacing:.04em; }
.st-th:focus-visible { outline:2px solid var(--black); }
.st-del { position:absolute; top:2px; right:2px; width:24px; height:24px; padding:0; border:1px solid var(--black); background:rgba(255,255,255,.94); color:var(--black);
  font:bold 11px/22px "Courier New",monospace; text-align:center; cursor:pointer; z-index:2; touch-action:manipulation; }
.st-del:hover { background:var(--black); color:var(--white); }
@media (hover:hover) and (pointer:fine) { .st-th .st-del { opacity:0; transition:opacity .12s; } .st-th:hover .st-del, .st-th:focus-within .st-del { opacity:1; } }
.st-lib-note { padding:10px 14px; border-top:1px solid var(--faint); font-size:9.5px; color:var(--dim); line-height:1.5; }

/* stage */
.st-main { display:flex; flex-direction:column; min-width:0; min-height:0; background:var(--desk); }
.st-stage { flex:1 1 auto; min-height:0; position:relative; display:flex; align-items:center; justify-content:center; }
.st-spread { display:flex; filter:drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
.st-flip { position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:40px; height:64px; border:1px solid var(--faint); background:rgba(255,255,255,.85); font-size:26px; cursor:pointer; }
.st-flip:hover { border-color:var(--black); }
.st-flip:disabled { opacity:.25; cursor:default; }
.st-flip.prev { left:12px; } .st-flip.next { right:12px; }
.st-pageinfo { text-align:center; font-size:9.5px; letter-spacing:.14em; color:#555; padding:4px 0 8px; }
/* always-visible, minimal scrub bar through the spreads */
.st-scrub { padding:0 24px 10px; }
#scrub { -webkit-appearance:none; appearance:none; display:block; width:100%; height:18px; margin:0; background:transparent; cursor:pointer; }
#scrub::-webkit-slider-runnable-track { height:1px; background:#888; }
#scrub::-moz-range-track { height:1px; background:#888; }
#scrub::-webkit-slider-thumb { -webkit-appearance:none; width:22px; height:9px; margin-top:-4px; background:#000; border:0; border-radius:0; }
#scrub::-moz-range-thumb { width:22px; height:9px; background:#000; border:0; border-radius:0; }
#scrub:focus-visible { outline:1px dashed #000; outline-offset:2px; }
.st-strip { scrollbar-width:thin; scrollbar-color:#999 transparent; }
.st-strip::-webkit-scrollbar { height:5px; }
.st-strip::-webkit-scrollbar-thumb { background:#9a9a9a; }
.st-strip::-webkit-scrollbar-track { background:transparent; }
.st-strip { flex:0 0 auto; display:flex; gap:10px; overflow-x:scroll; padding:10px 16px 14px; border-top:1px solid #d6d6d2; background:#f3f3f1; }
.st-strip button { flex:0 0 auto; border:1px solid transparent; background:none; padding:3px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8px; letter-spacing:.1em; color:#555; }
.st-strip button[aria-current="true"] { border-color:var(--black); color:var(--black); }
.st-strip .mini { display:flex; box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* a physical page */
.pg { position:relative; background:var(--white); overflow:hidden; flex:0 0 auto; }
.pg.blankside { background:transparent; box-shadow:none; }
.pg.left::after, .pg.right::after { content:""; position:absolute; top:0; bottom:0; width:6%; pointer-events:none; z-index:3; }
.pg.left::after  { right:0; background:linear-gradient(to left, rgba(0,0,0,.16), rgba(0,0,0,0)); }   /* the gutter */
.pg.right::after { left:0;  background:linear-gradient(to right, rgba(0,0,0,.13), rgba(0,0,0,0)); }
.pg.sel { outline:2px solid var(--black); outline-offset:-2px; }
.pg.dropok { box-shadow:inset 0 0 0 3px var(--black); }
.slot { position:absolute; overflow:hidden; background:#f5f5f5; }
.slot.filled { background:transparent; }
.slot img { position:absolute; display:block; max-width:none; user-select:none; -webkit-user-drag:none; }
.slot .hint { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:#aaa; letter-spacing:.12em; text-align:center; padding:4px; }
.slot.sel { outline:2px solid var(--black); outline-offset:1px; z-index:2; }
.slot.dropok { outline:3px solid var(--black); outline-offset:-3px; background:#e8e8e8; z-index:2; }
.slot:focus-visible { outline:2px dashed var(--black); }
.pg .txt { position:absolute; white-space:pre-wrap; overflow:hidden; line-height:1.45; font-family:var(--font); color:#111; }
.pg .folio { position:absolute; bottom:0; font-family:var(--font); color:#888; }
.pg .staple { position:absolute; background:#bbb; }
.cover-title { position:absolute; line-height:.92; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.cover-meta { position:absolute; font-family:var(--font); color:#222; text-align:right; line-height:1.4; }
.title-page { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; text-align:center; }
.contact-cell { position:absolute; background:#f3f3f3; }
.contact-cell img { width:100%; height:100%; object-fit:contain; display:block; }
.contact-num { position:absolute; font-family:var(--font); color:#a0a0a0; text-align:center; }
.qr { position:absolute; line-height:0; }
.mrow { position:absolute; font-family:var(--font); color:#000; white-space:pre; overflow:hidden; }   /* the FLUX index row: "001  date time  gps    p.04" */
.closing-h { font-weight:bold; color:#000; letter-spacing:0; }

/* inspector */
/* the panel: its header (BOOK | EDIT tabs + ×) never scrolls — only the body below it does */
.st-insp { border-left:1px solid var(--black); background:var(--white); display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.st-insp .insp-head { flex:0 0 auto; gap:8px; padding:0 8px 0 0; position:relative; z-index:2; background:var(--white); }
.insp-tabs { display:flex; align-self:stretch; }
.insp-tabs button { border:0; border-right:1px solid var(--black); background:var(--white); padding:11px 12px; font-size:10px; letter-spacing:.14em; cursor:pointer; white-space:nowrap; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.insp-tabs button[aria-selected="true"] { background:var(--black); color:var(--white); }
.insp-tabs button:disabled { color:var(--faint); cursor:default; }
.insp-sub { flex:1 1 auto; font-size:9px; letter-spacing:.12em; color:#666; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#insp-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
             padding:12px 14px calc(30px + env(safe-area-inset-bottom, 0px)); display:flex; flex-direction:column; gap:12px; font-size:10px; }
.f { display:flex; flex-direction:column; gap:4px; }
.f > span { font-size:9px; letter-spacing:.14em; color:#555; }
.f input[type=text], .f textarea, .f select { font-family:var(--font); font-size:12px; padding:7px 8px; border:1px solid var(--faint); background:var(--white); width:100%; }
.f input:focus, .f textarea:focus, .f select:focus { outline:none; border-color:var(--black); }
.f textarea { min-height:90px; resize:vertical; line-height:1.45; }
.f input[type=range] { width:100%; accent-color:#000; }
.row { display:flex; gap:6px; flex-wrap:wrap; }
.btn { border:1px solid var(--faint); background:var(--white); padding:7px 9px; font-size:9.5px; letter-spacing:.08em; cursor:pointer; }
.btn:hover { border-color:var(--black); }
.btn.on, .btn.primary { background:var(--black); color:var(--white); border-color:var(--black); }
.btn:disabled { color:var(--faint); border-color:#eee; cursor:default; }
.layouts { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.lay { border:1px solid var(--faint); background:var(--white); padding:6px 4px 5px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:7.5px; letter-spacing:.06em; text-align:center; line-height:1.2; }
.lay svg { width:30px; height:39px; display:block; }
.lay.on { border-color:var(--black); box-shadow:inset 0 0 0 1px var(--black); }
.lay:disabled { opacity:.3; cursor:default; }
.note { color:var(--dim); font-size:9.5px; line-height:1.55; }
.hr { border-top:1px solid var(--faint); }
.check { display:flex; gap:8px; align-items:center; font-size:10px; }
/* toasts sit just under the toolbar (top set by editor.js), away from the stage and the page strip; taps go through them
   except on their action button (UNDO…) */
.st-toast { position:fixed; left:50%; top:64px; bottom:auto; transform:translateX(-50%); background:var(--black); color:var(--white); padding:9px 14px; font-size:10px; letter-spacing:.08em; z-index:50; max-width:90vw; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.18); }

/* drag ghost */
.ghost { position:fixed; z-index:100; width:84px; pointer-events:none; opacity:.85; box-shadow:0 6px 18px rgba(0,0,0,.3); transform:translate(-50%,-50%); }

/* mobile bar */
.st-mbar { display:none; }

@media (max-width: 900px) {
  :root { --top:46px; }
  .st-top { gap:8px; padding:0 10px; }
  .st-name { display:none; }
  .st-mode button { padding:6px 7px; font-size:8.5px; letter-spacing:.06em; }
  .st-sheets span { font-size:8.5px; max-width:64px; text-align:center; line-height:1.2; }
  .st-body { display:block; position:relative; }
  .st-main { position:absolute; inset:0; }
  .st-lib, .st-insp { position:fixed; left:0; right:0; bottom:0; z-index:30; max-height:62vh; max-height:62dvh; border:0; border-top:2px solid var(--black);
                      transform:translateY(105%); transition:transform .2s ease; box-shadow:0 -8px 24px rgba(0,0,0,.15); }
  .st-insp { height:72vh; height:72dvh; max-height:calc(100dvh - var(--navh, 0px) - 60px); }
  .st-lib { overflow:hidden; } .st-lib .st-lib-grid { min-height:0; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }
  .st-lib.open, .st-insp.open { transform:translateY(0); }
  .st-x { display:block; min-width:44px; min-height:40px; }
  .insp-tabs button { padding:12px 12px; }
  .st-rnd, .st-rnd-undo { display:none !important; }
  .st-mbar button { font-size:9.5px; letter-spacing:.08em; }
  .st-lib-grid { grid-template-columns:repeat(4,1fr); }
  .st-flip { width:30px; height:52px; font-size:20px; }
  .st-flip.prev { left:2px; } .st-flip.next { right:2px; }
  .st-mbar { display:flex; flex:0 0 auto; border-top:2px solid var(--black); padding-bottom:env(safe-area-inset-bottom, 0); }
  .st-mbar button { flex:1; padding:13px 0; border:0; background:var(--white); font-size:10px; letter-spacing:.12em; cursor:pointer; }
  .st-mbar button + button { border-left:1px solid var(--black); }
  .st-mbar button { flex:1 1 0; min-width:0; padding:13px 2px; font-size:9px; letter-spacing:.05em; white-space:nowrap; }
  .st-strip { padding:8px 10px 10px; }
  .st-scrub { padding:0 14px 8px; }
  .st-toast { padding:8px 12px; font-size:9.5px; }
}
@media (prefers-reduced-motion: reduce) { .st-lib, .st-insp { transition:none; } }

/* in-place text editing on the spread */
#spread [data-edit] { cursor:text; }
#spread [data-edit]:hover { outline:1px dashed #999; outline-offset:2px; }
#spread [data-edit].editing { outline:1px solid #000; outline-offset:2px; background:rgba(255,255,255,.6); }
#spread [data-edit]:empty::before { content:attr(data-ph); color:#bbb; }
.cover-meta .sep { color:#999; }
.layouts.covers { grid-template-columns:repeat(5,1fr); }
.layouts.covers svg { width:26px; height:34px; }
.axis-note { font-size:8.5px; }

/* format chooser */
.st-format { border:1px solid var(--faint); background:var(--white); font-size:9.5px; line-height:14px; letter-spacing:.12em; padding:5px 8px; cursor:pointer; white-space:nowrap; }   /* PROJECTS (gate.css .pj-btn) is the same box */
.st-format:hover { border-color:var(--black); }
.st-start { position:fixed; inset:0; z-index:60; background:var(--white); overflow-y:auto; }
.st-start[hidden] { display:none; }
.st-start-in { max-width:880px; margin:0 auto; padding:34px 16px 50px; }   /* same column as /generators/ and /contact-sheets/ */
.st-start-head { border-bottom:2px solid var(--black); padding-bottom:18px; }   /* same header as /generators/ and /contact-sheets/ */
.st-start-head .st-lbl { font-size:10px; color:var(--dim, #888); letter-spacing:.18em; text-transform:uppercase; }
.st-start-head h1 { font-size:30px; letter-spacing:.1em; margin:4px 0 6px; }   /* Courier fallback; /flux-type.css sets Inter Display */
.st-start-sub { font-size:12px; color:var(--dim, #888); max-width:620px; margin:0; line-height:1.6; }
.st-start-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin:24px 0; }
.fmt-card { border:1px solid var(--black); display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--white); text-align:left; font-family:var(--font); color:var(--black); }
.fmt-card.planned { border-color:var(--faint); }
.fmt-card .fig { height:120px; display:flex; align-items:center; justify-content:center; background:var(--desk); }
.fmt-card h3 { margin:0; font-size:12px; letter-spacing:.12em; }
.fmt-card .tag { font-size:10px; color:#444; line-height:1.5; min-height:4.5em; }
.fmt-card .spec { font-size:8.5px; color:#777; line-height:1.55; letter-spacing:.03em; }
.fmt-card .go { margin-top:auto; border:1px solid var(--black); background:var(--black); color:var(--white); font-family:var(--font); font-size:10px; letter-spacing:.12em; padding:10px; cursor:pointer; }
.fmt-card .soon { margin-top:auto; font-size:9px; letter-spacing:.12em; color:#888; border:1px dashed var(--faint); padding:9px; text-align:center; }
.fmt-card .soon a { color:#555; }
.st-start-foot { font-size:9.5px; color:#777; letter-spacing:.04em; }
@media (max-width: 900px) { .st-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .st-start-in { padding:34px 16px 40px; } .fmt-card .tag { min-height:0; } .st-format { padding:4px 6px; font-size:8.5px; line-height:12px; } }
@media (max-width: 480px) { .st-start-grid { grid-template-columns:1fr; } }

/* captions under photographs */
.pg .cap { position:absolute; font-family:var(--font); color:#444; white-space:pre-wrap; overflow:hidden; word-break:break-word; letter-spacing:.02em; z-index:2; }
.st-insp .row.wrap { flex-wrap:wrap; }
.st-insp .btn.chip { flex:0 0 auto; padding:5px 7px; font-size:9px; }

/* spread strip: delete (×) and drag to rearrange */
.st-strip .sp-wrap { position:relative; flex:0 0 auto; }
.st-strip .sp-wrap.movable .sp { cursor:grab; touch-action:pan-x; }
.st-strip .sp-x { position:absolute; top:-4px; right:-4px; width:17px; height:17px; padding:0; border:1px solid var(--black); border-radius:50%; background:var(--white); color:var(--black); font-size:12px; line-height:14px; text-align:center; cursor:pointer; opacity:.55; display:block; }
.st-strip .sp-wrap:hover .sp-x, .st-strip .sp-x:focus-visible { opacity:1; }
.st-strip .sp-x:hover { background:var(--black); color:var(--white); }
.st-strip { position:relative; }
.st-strip .sp-wrap { transition:transform .18s cubic-bezier(.2,.8,.2,1); }
.st-strip .sp-wrap.lifting { opacity:.18; outline:1px dashed #999; outline-offset:2px; }
.st-strip .sp-wrap.lifting .mini { box-shadow:none; }
/* the spread in your hand */
.sp-ghost { position:fixed; z-index:80; margin:0; pointer-events:none; --tilt:0deg; --lift:1;
  transform:rotate(var(--tilt)) scale(var(--lift)); transform-origin:50% 60%;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), box-shadow .16s, left 0s, top 0s; will-change:left, top, transform; }
.sp-ghost .sp { border-color:transparent !important; }
.sp-ghost .mini { box-shadow:0 2px 4px rgba(0,0,0,.18); transition:box-shadow .16s; }
.sp-ghost.up { --lift:1.12; }
.sp-ghost.up .mini { box-shadow:0 14px 26px rgba(0,0,0,.28), 0 4px 8px rgba(0,0,0,.18); }
.sp-ghost.settle { transition:transform .18s cubic-bezier(.2,.8,.2,1), left .18s cubic-bezier(.2,.8,.2,1), top .18s cubic-bezier(.2,.8,.2,1); }
@media (prefers-reduced-motion: reduce) { .sp-ghost, .sp-ghost.settle, .st-strip .sp-wrap { transition:none; } .sp-ghost.up { --lift:1.04; } }
body.sp-dragging, body.sp-dragging * { cursor:grabbing !important; user-select:none; }
.st-toast .toast-act { pointer-events:auto; margin-left:10px; border:1px solid currentColor; background:transparent; color:inherit; font:inherit; letter-spacing:.12em; padding:3px 8px; cursor:pointer; }
@media (hover:none) { .st-strip .sp-x { opacity:.9; } }

/* GENERATE PDF */
.st-pdf { margin-left:10px; border:1px solid var(--black); background:var(--black); color:var(--white); font-size:9.5px; letter-spacing:.12em; padding:6px 10px; cursor:pointer; white-space:nowrap; }
.st-pdf:disabled { opacity:.6; cursor:progress; }
@media (max-width: 900px) { .st-pdf { display:none; } }
.st-sub-top { margin-left:6px; border:1px solid var(--black); background:var(--white); color:var(--black); font-size:9.5px; letter-spacing:.12em; padding:6px 10px; cursor:pointer; white-space:nowrap; }
.st-sub-top:hover { background:var(--black); color:var(--white); }
@media (max-width: 900px) { .st-sub-top { display:none; } }
@media (max-width: 900px) { .st-mbar #pdf-btn-m { background:var(--black); color:var(--white); flex:1 1 0; } .st-mbar button[data-open="lib"] { flex:1.45 1 0; } }
.pg .cap.foot { white-space:nowrap; text-overflow:ellipsis; }
.pg .cap-n { position:absolute; font-family:var(--font); color:#888; }
/* the ghost lives outside the strip: give it the strip's own item styling */
.sp-ghost .sp { display:flex; flex-direction:column; align-items:center; gap:3px; border:1px solid transparent; background:none; padding:3px; font-size:8px; letter-spacing:.1em; color:var(--black); }
.sp-ghost .mini { display:flex; }

/* + between spreads: insert a blank spread */
.st-strip { gap:0; }
.st-strip .sp-add { flex:0 0 14px; align-self:stretch; position:relative; border:0; background:none; padding:0; margin:0; cursor:pointer; color:var(--black); }
.st-strip .sp-add::before { content:""; position:absolute; left:50%; top:4px; bottom:18px; width:1px; background:var(--black); opacity:0; transition:opacity .12s; }
.st-strip .sp-add span { position:absolute; left:50%; top:calc(50% - 8px); transform:translate(-50%,-50%) scale(.6); width:17px; height:17px; border-radius:50%; border:1px solid var(--black); background:var(--white);
  font-size:13px; line-height:15px; text-align:center; opacity:0; transition:opacity .12s, transform .12s; }
.st-strip .sp-add:hover::before, .st-strip .sp-add:focus-visible::before { opacity:.5; }
.st-strip .sp-add:hover span, .st-strip .sp-add:focus-visible span { opacity:1; transform:translate(-50%,-50%) scale(1); }
.st-strip .sp-add:hover span { background:var(--black); color:var(--white); }
.st-strip > .sp-wrap + .sp-wrap { margin-left:14px; }
@media (hover:none) { .st-strip .sp-add span { opacity:.55; transform:translate(-50%,-50%) scale(.85); } }
body.sp-dragging .st-strip .sp-add { pointer-events:none; }

/* FLUX 24 / FLUX 36 / FLUX Mini (fixed-formats.js) */
/* (FLUX Generated shows its fixed sheet count; the − / + buttons hide — see body.gen-mode) */
.pg.fx { position:relative; overflow:hidden; background:#fff; }
.pg.fx canvas { display:block; }
.pg.fx.sel { outline:2px solid var(--black); outline-offset:-2px; }
#spread .pg.fx { cursor:pointer; }
body.fx-pdfonly .st-scrub, body.fx-pdfonly .st-flip { visibility:hidden; }
body.fx-pdfonly #spread { width:100%; height:100%; align-items:stretch; }
.fx-pdf { flex:1; width:100%; height:100%; border:1px solid var(--faint); background:#fff; }
.fx-msg { margin:auto; max-width:440px; text-align:center; font-size:11px; line-height:1.6; letter-spacing:.04em; color:#333; background:#fff; padding:22px; border:1px solid var(--faint); }
.fx-msg.err, .note.err, .fx-msg .err { color:#a12a2a; }
.fx-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); gap:6px; }
.fx-chip { position:relative; background:#f3f3f1; }
.fx-chip img { width:100%; aspect-ratio:1; object-fit:cover; display:block; }
.fx-chip span { position:absolute; left:2px; bottom:1px; font-size:8px; color:#fff; text-shadow:0 0 2px #000; }
.fx-chip button { position:absolute; top:1px; right:1px; width:15px; height:15px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.9); font-size:11px; line-height:14px; cursor:pointer; }
.fx-chip button:hover { background:#000; color:#fff; }
.fx-row { display:flex; align-items:center; gap:8px; font-size:9.5px; margin-bottom:6px; }
.fx-row img { width:40px; height:40px; object-fit:cover; } .fx-row span { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fx-sheet { width:100%; height:auto; border:1px solid var(--faint); background:#fff; display:block; }
.fx-seq { flex:0 0 auto; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:8px; color:#555; margin-right:8px; }
.fx-seq img { height:46px; width:auto; max-width:70px; object-fit:contain; box-shadow:0 1px 3px rgba(0,0,0,.18); background:#fff; }
.fmt-card .classic { font-size:8.5px; color:#777; text-align:center; margin-top:6px; }

/* FLUX Mini (canonical look) */
.pg .hair { position:absolute; height:0; border-top:0.5px solid #e0e0e0; }
.pg .mini-mark { position:absolute; font-family:var(--font); color:#c0c0c0; line-height:1; white-space:nowrap; }
.pg .mini-url { position:absolute; font-family:var(--font); color:#444; text-align:center; line-height:1; white-space:nowrap; }
.pg .pdf-fill { position:absolute; }
.pg .mini-numt { position:absolute; font-family:var(--font); color:#fff; text-align:right; line-height:1; z-index:3; }
.pg .mini-num { z-index:2; }
.pg.bw .slot img { filter:grayscale(1) contrast(1.05); }
.pg .qr { z-index:1; }
.mini-sheet { position:relative; width:100%; border:1px solid var(--faint); background:#fff; overflow:hidden; }
.mini-sheet .pg { box-shadow:none !important; outline:0.5px dashed rgba(90,90,90,.35); }

/* the site navigation is always on top of Studio (editor and format screen) */
#flux-nav { flex:0 0 auto; position:relative; z-index:70; }
.st-start { top:var(--navh, 0px); }

/* ── refinement round: three ways of making, on-page editing, page turns ── */
.st-rnd { border:1px solid var(--black); background:var(--white); padding:7px 12px; font-size:10px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.st-rnd:hover { background:var(--black); color:var(--white); }
.st-rnd-undo { border:1px solid var(--faint); background:var(--white); padding:7px 9px; font-size:9.5px; letter-spacing:.1em; cursor:pointer; margin-left:-8px; }
body.gen-mode .st-sheets button { visibility:hidden; }
.st-th.out img { opacity:.45; }
.st-th .used.unused { background:#fff; color:#777; border:1px solid #bbb; }
.seed { letter-spacing:.12em; color:#000; }

/* the stage: a closed cover is centred; page-turn layers sit inside the spread */
.st-spread { position:relative; }
.st-spread .turn-layer { pointer-events:none; backface-visibility:hidden; will-change:transform; box-shadow:0 2px 14px rgba(0,0,0,.18); }
.pg .slot.void { background:transparent; }
.slot.adj { outline:2px solid #000; outline-offset:0; z-index:3; cursor:move; }
body.adjusting .st-stage { touch-action:none; cursor:move; }
body.adjusting .st-flip, body.adjusting .st-strip, body.adjusting .st-scrub { pointer-events:none; opacity:.35; }
body.adjusting #spread .slot:not(.adj), body.adjusting #spread .cap, body.adjusting #spread .txt { opacity:.35; }
/* the whole photograph shows faintly around its frame while adjusting, so you can see what the crop leaves out */
.pg .adj-ghost { position:absolute; overflow:visible; pointer-events:none; z-index:2; }
.pg .adj-ghost img { position:absolute; max-width:none; opacity:.28; }
body.adjusting #spread .slot.adj { z-index:3; }
body.adjusting .st-mbar { visibility:hidden; }

/* on-page menu */
.st-ctx { position:fixed; z-index:60; background:var(--white); border:1px solid var(--black); box-shadow:0 8px 24px rgba(0,0,0,.18); display:flex; flex-direction:column; min-width:170px; }
.st-ctx[hidden] { display:none; }
.st-ctx > button { border:0; border-bottom:1px solid #e5e5e5; background:var(--white); text-align:left; padding:12px 14px; font-size:10.5px; letter-spacing:.12em; cursor:pointer; min-height:44px; }
.st-ctx > button:last-child { border-bottom:0; }
.st-ctx > button:hover, .st-ctx > button:focus-visible { background:var(--black); color:var(--white); outline:none; }
.st-ctx > button.dim { color:#777; }
.st-ctx.wide { width:min(420px, calc(100vw - 16px)); max-height:min(70vh, 560px); }
.ctx-head { display:flex; justify-content:space-between; align-items:center; padding:6px 6px 6px 12px; border-bottom:1px solid var(--black); font-size:9.5px; letter-spacing:.14em; flex:0 0 auto; }
.ctx-head button { border:0; background:none; font-size:20px; min-width:40px; min-height:36px; cursor:pointer; }
.ctx-lay { overflow-y:auto; padding:8px 10px 12px; display:flex; flex-direction:column; gap:8px; overscroll-behavior:contain; }

/* the grouped layout picker */
.lay-group { display:flex; flex-direction:column; gap:4px; }
.lay-gl { font-size:8px; letter-spacing:.14em; color:#777; }
.layouts .lay { min-height:64px; }
.layouts .lay span { display:block; max-width:100%; }
.lay .lay-svg { width:34px; height:46px; display:block; }
.lay .lay-svg.wide { width:58px; }
.layouts.compact { grid-template-columns:repeat(auto-fill, minmax(70px, 1fr)); }

/* the photograph picker */
.st-pick { position:fixed; inset:0; z-index:65; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; }
.st-pick[hidden] { display:none; }
.pick-box { background:var(--white); border:1px solid var(--black); width:min(560px, 94vw); max-height:min(80vh, 720px); display:flex; flex-direction:column; }
.pick-head { display:flex; justify-content:space-between; align-items:center; padding:0 6px 0 14px; border-bottom:1px solid var(--black); font-size:10px; letter-spacing:.14em; flex:0 0 auto; min-height:44px; }
.pick-head button { border:0; background:none; font-size:22px; min-width:44px; min-height:44px; cursor:pointer; }
.pick-grid { overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:6px; padding:10px; overscroll-behavior:contain; }
.pk-th { position:relative; aspect-ratio:1; border:1px solid transparent; background:#f4f4f4; padding:0; cursor:pointer; }
.pk-th img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.pk-th:hover, .pk-th:focus-visible { border-color:var(--black); outline:none; }
.pk-th.cur { outline:2px solid var(--black); outline-offset:-2px; }
.pk-th .used { position:absolute; right:2px; bottom:2px; background:var(--black); color:var(--white); font-size:8px; padding:1px 3px; letter-spacing:.04em; }
.pick-add { margin:0 10px 6px; padding:12px; border:1px dashed var(--black); text-align:center; font-size:9.5px; letter-spacing:.12em; cursor:pointer; flex:0 0 auto; }
.pick-box > .note { padding:0 12px 10px; }

/* ADJUST PHOTO — the controls sit under the book, the book stays visible */
.st-adj { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:40; background:var(--white); border:1px solid var(--black); box-shadow:0 8px 24px rgba(0,0,0,.18);
          display:flex; flex-direction:column; gap:6px; padding:8px 10px 10px; width:min(560px, calc(100% - 16px)); }
.st-adj[hidden] { display:none; }
@media (min-width: 901px) { .st-main { position:relative; } }
.adj-hint { font-size:8.5px; letter-spacing:.12em; color:#666; text-align:center; }
.adj-row { display:flex; gap:4px; flex-wrap:wrap; }
.adj-row button { flex:1 1 auto; border:1px solid var(--faint); background:var(--white); padding:9px 6px; font-size:9.5px; letter-spacing:.08em; cursor:pointer; min-height:40px; }
.adj-row button.on { border-color:var(--black); box-shadow:inset 0 0 0 1px var(--black); }
.adj-row button.primary { background:var(--black); color:var(--white); border-color:var(--black); }
.adj-zoom { display:flex; align-items:center; gap:8px; font-size:9px; letter-spacing:.12em; }
.adj-zoom input { flex:1; accent-color:#000; height:28px; }
@media (max-width: 900px) { .st-adj { bottom:calc(8px + env(safe-area-inset-bottom, 0px)); } }

/* FLUX Magazine default: the FLUX protocol page (protocol.js) */
.pg .proto-t { position:absolute; white-space:pre; line-height:1; font-family:'Courier New', Courier, monospace; letter-spacing:0; }
.pg .proto-r { border-top-color:#000; }
.pg .qr svg { display:block; }
@media (prefers-reduced-motion: reduce) { .st-spread .turn-layer { display:none; } }

/* paper (US Letter / A4) — one setting for all of Studio */
.st-start-paper { display:flex; align-items:center; gap:8px; margin:18px 0 0; font-size:9.5px; letter-spacing:.14em; }
.st-start-paper span { color:#777; margin-right:4px; }
.st-start-paper button { border:1px solid var(--faint); background:var(--white); font:inherit; letter-spacing:.12em; padding:7px 12px; cursor:pointer; min-height:34px; }
.st-start-paper button[aria-pressed="true"] { background:var(--black); color:var(--white); border-color:var(--black); }
.fx-badge { position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); white-space:nowrap; font-size:9px; letter-spacing:.12em; background:#000; color:#fff; padding:5px 9px; }
@media (max-width: 900px) { .fx-badge { font-size:8px; white-space:normal; width:90%; text-align:center; } }
/* FROM THE ARCHIVE — the archive's [+ ZINE] selection, loaded into the library */
.st-arch { display:flex; flex-direction:column; gap:3px; margin:-4px 12px 12px; padding:11px 12px; border:1px solid var(--black); background:var(--black); color:var(--white); cursor:pointer; text-align:center; font:inherit; font-size:11px; letter-spacing:.12em; }
.st-arch[hidden] { display:none; }
.st-arch span { font-size:9px; letter-spacing:.08em; color:#bbb; }
.st-arch:disabled { opacity:.6; cursor:progress; }
/* SUBMIT TO FLUX */
.st-sub { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; padding:16px; }
.st-sub[hidden] { display:none; }
.sub-box { background:var(--white); border:2px solid var(--black); width:min(520px, 100%); max-height:calc(100dvh - 32px); overflow:auto; }
.sub-body { padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; }
.sub-body[hidden] { display:none; }
.sub-body input[type=text], .sub-body input[type=email], .sub-body textarea { width:100%; font:inherit; font-size:12px; border:1px solid var(--faint); padding:8px; background:var(--white); color:var(--black); }
.sub-ok { display:flex; gap:8px; align-items:flex-start; font-size:10.5px; line-height:1.5; cursor:pointer; }
.sub-ok input { margin-top:2px; flex:none; }
.sub-err { border:1px solid #c00; color:#c00; font-size:10.5px; padding:8px; line-height:1.5; }
.sub-err[hidden] { display:none; }
.sub-bar { height:6px; border:1px solid var(--black); } .sub-bar i { display:block; height:100%; width:0; background:var(--black); transition:width .2s; }
@media (max-width: 900px) { .st-sub { align-items:flex-end; padding:0; } .sub-box { width:100%; max-height:92dvh; border-width:2px 0 0; } }
/* the spread strip: holding a thumbnail lifts it (no iOS image callout / text selection in the way) */
.st-strip, .st-strip img { -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }

/* ── the start screen (one tool, four formats) ── */
.st-step { margin:22px 0 10px; } .st-step > span { display:block; font-size:9.5px; letter-spacing:.2em; color:#777; margin-bottom:8px; }
.st-togs { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:640px; }
.st-tog { text-align:left; font-family:var(--font); border:1.5px solid var(--black); background:var(--white); color:var(--black); padding:12px 14px; cursor:pointer; }
.st-tog b { display:block; font-size:12px; letter-spacing:.12em; } .st-tog span { display:block; font-size:9.5px; color:#777; letter-spacing:.04em; margin-top:4px; }
.st-tog.on { background:var(--black); color:var(--white); } .st-tog.on span { color:#bbb; }
.st-tog { transition:background .12s,color .12s; } .st-tog:hover { background:var(--black); color:var(--white); } .st-tog:hover span { color:#bbb; }   /* black on hover, as every FLUX button */
.st-start-grid { display:block; }
.st-cards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
button.fmt-card { cursor:pointer; border:1.5px solid var(--black); padding:18px 16px 16px; min-height:300px; transition:background .12s,color .12s; }
button.fmt-card .fig { height:auto; background:none; justify-content:flex-start; } button.fmt-card .fig svg { width:96px; height:96px; }
button.fmt-card h3 { font-size:17px; letter-spacing:.1em; margin-top:8px; } button.fmt-card .tag { font-size:10.5px; color:#555; min-height:0; }
button.fmt-card .go { margin-top:auto; align-self:flex-start; background:none; color:inherit; border:1.5px solid currentColor; padding:8px 12px; }
button.fmt-card:hover { background:var(--black); color:var(--white); } button.fmt-card:hover .tag, button.fmt-card:hover .spec { color:#bbb; }
button.fmt-card:hover svg [stroke="#000"] { stroke:#fff; } button.fmt-card:hover svg [fill="#000"] { fill:#fff; }
@media (max-width: 900px) { .st-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } button.fmt-card { min-height:230px; padding:14px 12px; } button.fmt-card .fig svg { width:64px; height:64px; } button.fmt-card h3 { font-size:14px; } }
@media (max-width: 480px) { .st-togs { grid-template-columns:1fr 1fr; gap:8px; } .st-tog { padding:10px; } .st-tog b { font-size:10.5px; } }