/* FLUX Freeform — the FLUX language: white, black ink, Courier, square hairline controls, photographs first. */
.ff { position:fixed; left:0; right:0; bottom:0; top:var(--navh, 0px); z-index:60; display:flex; flex-direction:column; background:#fff; color:#000; font-family:'Courier New', Courier, monospace; -webkit-font-smoothing:antialiased; }
.ff[hidden] { display:none; }
body.ff-on { overflow:hidden; }
.ff button { font-family:inherit; color:#000; }
.ff [hidden] { display:none !important; }

/* top bar */
.ff-top { flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 14px; border-bottom:2px solid #000; min-height:50px; overflow-x:auto; scrollbar-width:none; }
.ff-top::-webkit-scrollbar { display:none; }
.ff-name { font-size:12px; letter-spacing:.16em; font-weight:bold; margin-right:4px; white-space:nowrap; }
.ff-b { flex:0 0 auto; border:1px solid #000; background:#fff; padding:6px 10px; font-size:9.5px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; line-height:1.2; display:inline-flex; align-items:center; gap:4px; }
.ff-b:hover:not(:disabled) { background:#000; color:#fff; }
.ff-b:disabled { border-color:#ddd; color:#bbb; cursor:default; }
.ff-b.ff-prim { background:#000; color:#fff; }
.ff-b.ff-prim:hover:not(:disabled) { background:#fff; color:#000; }
.ff-back { border-color:#ccc; }
.ff-imp { position:relative; }
.ff-views-x { display:flex; border:1px solid #000; flex:0 0 auto; }
.ff-views-x button { border:0; background:#fff; padding:7px 11px; font-size:9.5px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.ff-views-x button + button { border-left:1px solid #000; }
.ff-views-x button[aria-selected="true"] { background:#000; color:#fff; }
.ff-acts { display:flex; gap:6px; margin-left:auto; }
.ff-ur { display:flex; gap:0; }
.ff-ur .ff-b { padding:5px 9px; font-size:13px; }
.ff-ur .ff-b + .ff-b { border-left:0; }
.ff-more { display:inline-flex; }

.ff-body { flex:1 1 auto; min-height:0; position:relative; display:flex; }
.ff-stage { position:relative; flex:1 1 auto; min-width:0; overflow:hidden; background:#ecece9; cursor:default; user-select:none; -webkit-user-select:none; }
.ff-stage.ff-grab, .ff-stage.ff-panning { cursor:grabbing; }
.ff-world { position:absolute; left:0; top:0; transform-origin:0 0; --ik:1; }
.ff-tiles, .ff-ov { position:absolute; left:0; top:0; }
.ff-ov { pointer-events:none; z-index:1; }
.ff-tiles { z-index:2; }

/* a print on the table */
.ff-tile { position:absolute; background:#d8d8d4; box-shadow:0 calc(1px * var(--ik)) calc(4px * var(--ik)) rgba(0,0,0,.22); cursor:grab; touch-action:none; }
.ff-tile img { display:block; width:100%; height:100%; object-fit:fill; pointer-events:none; -webkit-user-drag:none; }
.ff-tile.sel { outline:calc(2px * var(--ik)) solid #000; outline-offset:calc(2px * var(--ik)); }
.ff-tile.out { opacity:.28; filter:grayscale(1); }
.ff-tile.out.sel { opacity:.6; }
.ff-tile.hide { display:none; }
.ff-tile.keep::after { content:""; position:absolute; right:0; top:0; border-style:solid; border-width:0 calc(14px * var(--ik)) calc(14px * var(--ik)) 0; border-color:transparent #000 transparent transparent; }
.ff-num, .ff-mk, .ff-pv { position:absolute; font-size:calc(10px * var(--ik)); line-height:1; letter-spacing:.06em; background:#000; color:#fff; padding:calc(3px * var(--ik)) calc(4px * var(--ik)); pointer-events:none; }
.ff-num { left:0; top:0; font-weight:bold; }
.ff-num:empty, .ff-mk:empty { display:none; }
.ff-mk { left:0; bottom:0; background:#fff; color:#000; }
.ff-pv { right:0; bottom:0; font-size:calc(14px * var(--ik)); font-weight:bold; background:#fff; color:#000; outline:calc(1px * var(--ik)) solid #000; }
.ff-anim .ff-tile { transition:left .38s cubic-bezier(.3,.7,.2,1), top .38s cubic-bezier(.3,.7,.2,1), width .38s cubic-bezier(.3,.7,.2,1), height .38s cubic-bezier(.3,.7,.2,1); }
.ff-dragging .ff-tile.sel { box-shadow:0 calc(8px * var(--ik)) calc(22px * var(--ik)) rgba(0,0,0,.32); }
.ff-grp { position:absolute; border:calc(1px * var(--ik)) dashed #000; }
.ff-grp.on { border-style:solid; }
.ff-grp span, .ff-pair span { position:absolute; left:0; top:calc(-15px * var(--ik)); font-size:calc(9px * var(--ik)); letter-spacing:.12em; white-space:nowrap; }
.ff-pair { position:absolute; height:calc(6px * var(--ik)); border:calc(1px * var(--ik)) solid #000; border-top:0; }
.ff-pair span { top:calc(8px * var(--ik)); }
.ff-selbox { position:absolute; border:calc(1px * var(--ik)) solid rgba(0,0,0,.55); }
.ff-rs { position:absolute; right:calc(-9px * var(--ik)); bottom:calc(-9px * var(--ik)); width:calc(16px * var(--ik)); height:calc(16px * var(--ik)); background:#fff; border:calc(1.5px * var(--ik)) solid #000; cursor:nwse-resize; pointer-events:auto; touch-action:none; }
@media (pointer:coarse) { .ff-rs { width:calc(28px * var(--ik)); height:calc(28px * var(--ik)); right:calc(-15px * var(--ik)); bottom:calc(-15px * var(--ik)); } }
.ff-marq { position:absolute; border:1px solid #000; background:rgba(0,0,0,.06); pointer-events:none; z-index:5; }
.ff-empty { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:24px; z-index:3; }
.ff-empty > div { max-width:440px; background:#fff; border:1px solid #000; padding:28px 26px; }
.ff-empty h2 { margin:0 0 8px; font-size:40px; letter-spacing:-.01em; }
.ff-empty p { font-size:11px; line-height:1.6; margin:0 0 16px; }
.ff-empty .ff-b { padding:10px 14px; font-size:10.5px; }
.ff-fine { color:#777; margin-top:14px !important; font-size:10px !important; }

/* zoom + context bars */
.ff-zoom { position:absolute; right:14px; bottom:14px; z-index:8; display:flex; align-items:center; background:#fff; border:1px solid #000; }
.ff-zoom button { border:0; background:#fff; padding:7px 9px; font-size:9.5px; letter-spacing:.1em; cursor:pointer; }
.ff-zoom button + button, .ff-zoom span + button { border-left:1px solid #ddd; }
.ff-zoom button:hover { background:#000; color:#fff; }
.ff-zoom button[aria-pressed="true"] { background:#000; color:#fff; }
.ff-zoom span { font-size:9.5px; min-width:46px; text-align:center; border-left:1px solid #ddd; padding:7px 4px; }
.ff-touch-only { display:none; }
@media (pointer:coarse) { .ff-touch-only { display:inline-block; } }
.ff-ctx { position:absolute; left:50%; transform:translateX(-50%); bottom:56px; z-index:9; display:flex; gap:5px; align-items:center; flex-wrap:wrap; justify-content:center; max-width:calc(100% - 28px); background:#fff; border:1px solid #000; padding:6px 7px; }
.ff-ctx:empty { display:none; }
.ff-hint { font-size:9px; letter-spacing:.12em; color:#555; padding:0 4px; white-space:nowrap; }
.ff-sz { display:inline-flex; } .ff-sz .ff-b { padding:6px 7px; } .ff-sz .ff-b + .ff-b { border-left:0; }
.ff-status { position:absolute; left:14px; bottom:14px; z-index:7; font-size:9px; letter-spacing:.12em; color:#555; background:rgba(255,255,255,.88); padding:5px 7px; pointer-events:none; }
.ff-save { margin-left:10px; color:#000; }
.ff-save.error { color:#b00; font-weight:bold; }
[data-view="seq"] .ff-status { display:none; }
.ff-toast { position:absolute; left:50%; transform:translateX(-50%); top:60px; z-index:30; background:#000; color:#fff; font-size:10px; letter-spacing:.06em; padding:9px 12px; max-width:min(560px, 92vw); line-height:1.45; }
.ff-toast button { background:#fff; color:#000; border:0; font:inherit; font-size:9.5px; letter-spacing:.12em; padding:3px 7px; margin-left:8px; cursor:pointer; }
.ff-prog { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:40; background:#fff; border:1px solid #000; padding:14px 16px; width:min(380px, 88vw); font-size:10px; letter-spacing:.12em; }
.ff-prog i { display:block; height:2px; background:#ddd; margin-top:10px; } .ff-prog b { display:block; height:2px; background:#000; width:0; transition:width .15s; }
.ff-drop { position:absolute; inset:10px; z-index:50; border:2px dashed #000; background:rgba(255,255,255,.9); display:flex; align-items:center; justify-content:center; font-size:13px; letter-spacing:.16em; pointer-events:none; }

/* popover menus */
.ff-pop { position:fixed; z-index:70; background:#fff; border:1px solid #000; box-shadow:0 8px 24px rgba(0,0,0,.18); max-height:70vh; overflow:auto; }
.ff-pop button { display:block; width:100%; text-align:left; border:0; border-top:1px solid #eee; background:#fff; padding:9px 12px; cursor:pointer; }
.ff-pop button:hover { background:#000; color:#fff; }
.ff-pop button b { display:block; font-size:10px; letter-spacing:.12em; }
.ff-pop button span { display:block; font-size:9.5px; color:#666; margin-top:3px; line-height:1.4; }
.ff-pop button:hover span { color:#ccc; }
.ff-pop-h { font-size:9px; letter-spacing:.16em; padding:9px 12px 7px; border-bottom:1px solid #000; }
.ff-pop-n { font-size:9px; line-height:1.5; color:#666; padding:8px 12px; border-top:1px solid #eee; }
.ff-chk { display:block; font-size:9.5px; letter-spacing:.1em; padding:9px 12px; border-top:1px solid #eee; }

/* side panel (sort / zine / export) */
.ff-panel { position:absolute; right:0; top:50px; bottom:0; z-index:20; width:min(440px, 100%); background:#fff; border-left:2px solid #000; display:flex; flex-direction:column; }
.ff-ph { display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid #000; font-size:11px; letter-spacing:.16em; }
.ff-x { border:0; background:none; font-size:20px; line-height:1; cursor:pointer; padding:0 4px; }
.ff-pb { overflow:auto; padding:6px 14px 30px; -webkit-overflow-scrolling:touch; }
.ff-f { margin:14px 0; } .ff-f > span { display:block; font-size:9px; letter-spacing:.16em; color:#555; margin-bottom:7px; }
.ff-opts, .ff-row { display:flex; flex-wrap:wrap; gap:5px; margin:6px 0; }
.ff-opt { border:1px solid #ccc; background:#fff; padding:7px 9px; font-size:9.5px; letter-spacing:.1em; cursor:pointer; }
.ff-opt:hover { border-color:#000; }
.ff-opt.on, .ff-opt.ff-prim { background:#000; color:#fff; border-color:#000; }
.ff-note { font-size:10px; line-height:1.55; color:#555; margin:6px 0; }
.ff-note b { color:#000; }
.ff-warn { color:#000; border-left:2px solid #000; padding-left:8px; }
.ff-fmts { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ff-fmt { text-align:left; border:1px solid #ccc; background:#fff; padding:9px; cursor:pointer; }
.ff-fmt b { display:block; font-size:10.5px; letter-spacing:.12em; margin-bottom:4px; }
.ff-fmt span { display:block; font-size:9px; color:#666; line-height:1.45; }
.ff-fmt.on { border:2px solid #000; padding:8px; }
.ff-strip { display:flex; flex-wrap:wrap; gap:4px; margin:8px 0; }
.ff-strip figure { margin:0; width:52px; }
.ff-strip img { width:52px; height:52px; object-fit:contain; background:#f2f2f2; display:block; }
.ff-strip figcaption { font-size:8px; letter-spacing:.06em; text-align:center; }
.ff-zpv { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0; }
.ff-zpv-sp { display:flex; box-shadow:0 1px 4px rgba(0,0,0,.2); background:#fff; }
.ff-zpv-sp .pg.blankside { box-shadow:none; background:transparent; }

/* large view / compare / play */
.ff-over { position:absolute; inset:0; z-index:45; background:#fff; display:flex; flex-direction:column; }
.ff-over-in { flex:1 1 auto; min-height:0; display:flex; gap:18px; align-items:center; justify-content:center; padding:24px; }
.ff-over-in figure { margin:0; flex:1 1 0; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ff-over-in img { max-width:100%; max-height:calc(100% - 26px); object-fit:contain; box-shadow:0 2px 12px rgba(0,0,0,.2); }
.ff-over-in figcaption { font-size:10px; letter-spacing:.12em; margin-top:10px; }
.ff-over-bar { flex:0 0 auto; display:flex; gap:6px; align-items:center; justify-content:center; padding:10px; border-top:1px solid #000; font-size:10px; letter-spacing:.12em; }
.ff-over-bar button { border:1px solid #000; background:#fff; padding:7px 11px; font-size:10px; letter-spacing:.12em; cursor:pointer; }
.ff-over-bar button:hover { background:#000; color:#fff; }

/* Studio entry points */
.st-ff { border:1px solid #000; background:#fff; padding:6px 10px; font-size:9.5px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; font-family:'Courier New', Courier, monospace; color:#000; }
.st-ff:hover { background:#000; color:#fff; }
.st-top .st-ff { margin-left:10px; }
.st-ff-start { display:flex; gap:12px; align-items:center; margin-top:16px; font-size:10px; line-height:1.5; color:#555; }
.st-ff-start .st-ff { padding:9px 14px; font-size:10.5px; background:#000; color:#fff; }
.st-ff-start .st-ff:hover { background:#fff; color:#000; }

@media (prefers-reduced-motion: reduce) { .ff-anim .ff-tile { transition:none; } .ff-prog b { transition:none; } }
body.ff-on .st-toast { z-index:75; }
body.ff-on .ent-dev { display:none; }
.ff-rec-h { font-size:9px; letter-spacing:.14em; color:#555; margin:18px 0 6px; border-top:1px solid #ddd; padding-top:14px; }
.ff-rec { display:block; width:100%; text-align:left; border:1px solid #ccc; background:#fff; padding:8px 10px; margin:4px 0; cursor:pointer; }
.ff-rec:hover { border-color:#000; }
.ff-rec b { display:block; font-size:10px; letter-spacing:.12em; } .ff-rec span { font-size:9px; color:#666; }
@media (max-width: 900px) { .st-top .st-ff { display:none; } }
.st-ff-lib { display:block; margin:0 12px 10px; width:calc(100% - 24px); padding:9px 10px; }
body.ff-on .st-top, body.ff-on .st-start { display:none; }   /* behind Freeform: nothing of Studio may widen a phone's page */
body.ff-on .st-toast { top:auto !important; bottom:72px; }               /* Studio's own messages, clear of Freeform's bars */
.ff-opt:disabled { border-color:#ddd; color:#bbb; background:#fff; cursor:default; }

/* ── FREEFORM: the table (2026-11-10) ── */
.ff-tools { display:flex; border:1px solid #000; flex:0 0 auto; margin-left:6px; }
.ff-tools button { border:0; background:#fff; padding:7px 10px; font-size:9.5px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.ff-tools button + button { border-left:1px solid #000; }
.ff-tools button[aria-pressed="true"] { background:#000; color:#fff; }
.ff-bank-btn[aria-pressed="true"] { background:#000; color:#fff; }   /* [BANK n]: shows and hides the Photo Bank */
.ff[data-tool="pen"] .ff-stage, .ff[data-tool="arrow"] .ff-stage { cursor:crosshair; }
.ff[data-tool="text"] .ff-stage { cursor:text; }
.ff[data-tool="pen"] .ff-tile, .ff[data-tool="arrow"] .ff-tile, .ff[data-tool="text"] .ff-tile { cursor:inherit; }

/* the Photo Bank */
.ff-bank { flex:0 0 232px; display:flex; flex-direction:column; min-height:0; border-right:1px solid #000; background:#fff; transition:background .15s; }
.ff:not(.ff-bank-open) .ff-bank { display:none; }
.ff-bank.ff-take { background:#f0f0ee; box-shadow:inset 0 0 0 3px #000; }
.ff-bank-h { display:flex; align-items:baseline; gap:8px; padding:12px 12px 10px; border-bottom:1px solid #000; font-size:10px; letter-spacing:.14em; }
.ff-bank-h span { color:#666; font-size:9px; letter-spacing:.1em; flex:1; }
.ff-bank-hide { margin-left:auto; flex:0 0 auto; border:1px solid #000; background:#fff; padding:4px 7px; font:inherit; font-size:9px; letter-spacing:.12em; cursor:pointer; white-space:nowrap; }
.ff-bank-hide:hover { background:#000; color:#fff; }
.ff-bank-btn[aria-pressed="false"]:hover { background:#f0f0ee; }
@media (min-width: 901px) { .ff-bank { width:232px; max-width:232px; } }
.ff-bank-h span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ff-bank-imp { display:flex; flex-direction:column; gap:3px; margin:10px; padding:12px; border:1px dashed #000; cursor:pointer; text-align:center; font-size:9px; letter-spacing:.08em; color:#777; }
.ff-bank-imp strong { color:#000; font-size:10.5px; letter-spacing:.12em; }
.ff-bank-all { margin:0 10px 10px; justify-content:center; }
.ff-bank-grid { flex:1 1 auto; overflow-y:auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; padding:0 10px 10px; align-content:start; -webkit-overflow-scrolling:touch; }
.ff-bt { aspect-ratio:1; background:#f2f2f2; cursor:grab; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.ff-bt img { width:100%; height:100%; object-fit:contain; display:block; pointer-events:none; }
.ff-bt:hover, .ff-bt:focus-visible { outline:1px solid #000; }
.ff-bt.ff-lift { outline:2px solid #000; opacity:.6; }
.ff-bank-n { padding:9px 12px; border-top:1px solid #e3e3e3; font-size:9px; line-height:1.5; color:#777; }
.ff-hintcard { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; z-index:3; }
.ff-hintcard > div { pointer-events:auto; display:flex; flex-direction:column; align-items:center; gap:10px; background:#fff; border:1px solid #000; padding:20px 22px; font-size:10px; letter-spacing:.12em; text-align:center; }
.ff-hintcard span { color:#666; letter-spacing:.06em; }
.ff-tag { font-size:10px !important; letter-spacing:.24em; margin:-2px 0 12px !important; }

/* notes: pen · arrow · text */
.ff-notes { position:absolute; left:0; top:0; overflow:visible; pointer-events:none; z-index:3; }
.ff[data-tool="select"] .ff-notes [data-hit] { pointer-events:stroke; cursor:move; }
.ff[data-tool="select"] .ff-notes rect[data-hit] { pointer-events:all; }
.ff-ntext { font-family:'Courier New', Courier, monospace; font-weight:bold; fill:#000; stroke:#fff; stroke-width:.18em; paint-order:stroke; stroke-linejoin:round; }
.ff-nsel { fill:none; stroke:#000; stroke-width:calc(1px * var(--ik)); stroke-dasharray:calc(4px * var(--ik)) calc(3px * var(--ik)); }
.ff-ntedit { position:absolute; z-index:20; min-width:180px; border:1px dashed #000; background:rgba(255,255,255,.92); padding:2px 4px; margin:0; font-family:'Courier New', Courier, monospace; font-weight:bold; line-height:1.25; resize:none; outline:none; color:#000; }

/* export sheet */
.ff-sheets { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ff-lab { display:flex; flex-direction:column; gap:5px; margin-top:8px; font-size:9px; letter-spacing:.14em; color:#555; }
.ff-lab input { font-family:inherit; font-size:12px; padding:7px 8px; border:1px solid #ccc; }
.ff-lab input:focus { border-color:#000; outline:none; }

/* phone and narrow screens */
@media (max-width: 900px) {
  .ff-top { gap:6px; padding:7px 10px; flex-wrap:wrap; overflow:visible; row-gap:7px; }
  .ff-name { display:none; }
  .ff-acts { margin-left:0; }
  .ff-ur { margin-left:auto; }
  .ff-tools { order:9; margin-left:0; flex:1 1 auto; }
  .ff-tools button { flex:1 1 0; padding:8px 4px; font-size:9px; }
  .ff-acts { order:10; }
  .ff-acts .ff-b { padding:8px 8px; font-size:9px; letter-spacing:.08em; }
  .ff-bank { position:absolute; left:0; top:0; bottom:0; z-index:25; width:min(320px, 84vw); box-shadow:6px 0 22px rgba(0,0,0,.18); }
  .ff-bank-hide { padding:7px 10px; }
  .ff-bank-grid { grid-template-columns:repeat(3, 1fr); }
  .ff-ctx { max-width:calc(100% - 16px); bottom:58px; left:8px; right:8px; transform:none; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; }
  .ff-ctx::-webkit-scrollbar { display:none; }
  .ff-ctx .ff-b { padding:9px 10px; }
  .ff-zoom { right:8px; bottom:8px; }
  .ff-status { left:8px; bottom:12px; max-width:40vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .ff-panel { top:auto; height:84%; width:100%; border-left:0; border-top:2px solid #000; }
  .ff-sheets { grid-template-columns:1fr; }
  body.ff-on .st-toast { bottom:120px; }
}
@media (max-width: 560px) {
  .ff-acts { flex:1 1 100%; display:flex; }
  .ff-acts .ff-b { flex:1 1 0; justify-content:center; }
  .ff-back { padding:6px 8px; }
  .ff-zoom #ff-zv { display:none; }
}
@media (min-width: 901px) { .ff-bank-open .ff-status { left:246px; } }
@media (max-width: 900px) { .ff-toast { top:auto; bottom:64px; } }
@media (max-width: 560px) { .ff-status { display:none; } }
.ff-tile .ff-num, .ff-tile .ff-mk, .ff-grp span, .ff-pair span, .ff-ntext { -webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; }