/* Vision Board 2027 — digital kit. Phone-first; the board is the product. */

@font-face{font-family:Anton;src:url(fonts/Anton-Regular.ttf)format("truetype");font-display:swap}
@font-face{font-family:"Archivo Black";src:url(fonts/ArchivoBlack-Regular.ttf)format("truetype");font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/Archivo-Regular.ttf)format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Archivo;src:url(fonts/Archivo-Medium.ttf)format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/Cinzel-Regular.ttf)format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Cinzel;src:url(fonts/Cinzel-Bold.ttf)format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-Regular.ttf)format("truetype");font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(fonts/CormorantGaramond-Italic.ttf)format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/Inter-Regular.ttf)format("truetype");font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(fonts/IBMPlexMono-Regular.ttf)format("truetype");font-display:swap}
@font-face{font-family:Jost;src:url(fonts/Jost-Regular.ttf)format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(fonts/Jost-Medium.ttf)format("truetype");font-weight:500;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay-Regular.ttf)format("truetype");font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(fonts/PlayfairDisplay-Italic.ttf)format("truetype");font-style:italic;font-display:swap}
@font-face{font-family:Caveat;src:url(fonts/Caveat-Bold.ttf)format("truetype");font-display:swap}
@font-face{font-family:Parisienne;src:url(fonts/Parisienne-Regular.ttf)format("truetype");font-display:swap}
@font-face{font-family:Yellowtail;src:url(fonts/Yellowtail-Regular.ttf)format("truetype");font-display:swap}

:root{
  --ink:#22262B;--navy:#1C3A5E;--gold:#A9884E;--paper:#FBF8F3;
  --line:#DED8CD;--muted:#7C7568;--bar:60px;--safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font:16px/1.5 ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--paper);overscroll-behavior:none}
button{font:inherit;cursor:pointer}
/* display on a class beats the hidden attribute; without this, panels leak */
[hidden]{display:none!important}
.screen{min-height:100dvh}

input,select{font:inherit;padding:10px 12px;border:1px solid var(--line);
  border-radius:9px;background:#fff;color:inherit;max-width:100%}
input:focus-visible,button:focus-visible,select:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
label{display:block;font-weight:600;font-size:13px;margin:14px 0 6px}
.row{display:flex;gap:8px;align-items:center}
.row.tight{gap:6px;margin-bottom:6px}
.row.end{justify-content:flex-end;margin-top:22px}
.row>input,.row>select{flex:1;min-width:0}
.btn{background:#fff;border:1px solid var(--line);border-radius:9px;padding:9px 13px;
  font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.btn:hover{border-color:#BDB4A5}
.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.btn.lg{padding:12px 20px}
.btn.sq{padding:8px 10px;min-width:38px}
.btn.danger{color:#B3261E;border-color:#E7C9C5}
.btn[aria-pressed=true]{background:#EEF2F6;border-color:var(--navy);color:var(--navy)}
.err{color:#B3261E;font-size:14px;margin-top:8px}
.ok{color:#2F6B52;font-size:14px;margin-top:8px}
.fine{color:var(--muted);font-size:12.5px;margin-top:12px}
.linkish{background:none;border:0;color:var(--navy);text-decoration:underline;margin-top:16px;font-size:14px}

/* ───────────── gate + setup cards ───────────── */
.gate{display:grid;place-items:center;padding:24px 16px calc(24px + var(--safe-b));
  background:radial-gradient(1200px 600px at 20% -10%,#EAF0F4 0,transparent 60%),
             radial-gradient(900px 500px at 100% 110%,#F3E9DE 0,transparent 60%),var(--paper)}
.card{width:min(680px,100%);background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:30px 26px calc(30px + var(--safe-b));box-shadow:0 18px 50px rgba(28,58,94,.10)}
.card.narrow{width:min(560px,100%)}
.kicker{font-weight:700;letter-spacing:.34em;color:var(--gold);font-size:13px}
h1{font-size:clamp(24px,5vw,32px);line-height:1.15;margin:.35em 0 .5em;color:var(--navy)}
.lede{color:#4C525A}
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.pills li{background:#F4F1EA;border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13.5px}
.pills b{color:var(--navy)}

.presets{display:flex;flex-wrap:wrap;gap:6px}
.preset{border:1px solid var(--line);background:#fff;border-radius:9px;padding:7px 11px;
  font-size:13px;font-weight:600;color:var(--muted)}
.preset[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.dims{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.dims.two{grid-template-columns:repeat(2,1fr)}
.dims input,.dims select{width:100%}
.orient{display:flex;align-items:center;gap:8px;margin-top:16px;flex-wrap:wrap}
.pxout{color:var(--muted);font-size:13px;font-family:"IBM Plex Mono",monospace}

/* ───────────── setup ───────────── */
.setup{display:flex;flex-direction:column;height:100dvh;background:var(--paper)}
.setup-wrap{flex:1;min-height:0;overflow:auto;max-width:1100px;width:100%;margin:0 auto;
  padding:20px 18px calc(40px + var(--safe-b))}
.setup-head label{margin-top:0}
.opt{font-weight:500;color:var(--muted);text-transform:none;letter-spacing:0}
.groups{display:flex;gap:8px;overflow-x:auto;margin:22px 0 16px;scrollbar-width:none}
.groups::-webkit-scrollbar{display:none}
.group{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:8px 16px;font-size:14px;font-weight:600;color:var(--muted)}
.group[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.pcard{border:1px solid var(--line);background:#fff;border-radius:14px;padding:14px 12px 12px;
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.pcard:hover{border-color:#BDB4A5}
.pcard[aria-pressed=true]{border-color:var(--navy);box-shadow:0 0 0 2px rgba(28,58,94,.16)}
.pshape{width:100%;height:96px;display:grid;place-items:center}
.pshape i{display:block;background:linear-gradient(160deg,#3D6EA5,#1C3A5E);
  border-radius:3px;box-shadow:0 4px 10px rgba(28,58,94,.24)}
.pcard[aria-pressed=true] .pshape i{background:linear-gradient(160deg,#C6A867,#A9884E)}
.pname{font-size:13.5px;font-weight:600;line-height:1.25}
.psize{font-size:11.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}
.pcard.custom .pshape i{background:none;border:2px dashed #B9B1A3;width:54px;height:66px}
.custom-panel{margin-top:18px;border:1px solid var(--line);background:#fff;
  border-radius:14px;padding:16px 16px 20px}

/* ───────────── gallery ───────────── */
.gal-wrap{max-width:1100px;margin:0 auto;padding:26px 18px calc(40px + var(--safe-b))}
.gal-title{font-size:22px;color:var(--navy);margin-bottom:14px}
.gal-filter{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.gal-filter input{flex:1;min-width:180px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;
  font-size:13px;font-weight:600;color:var(--muted)}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.gal-cat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px}
.gal-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;
  display:flex;flex-direction:column;text-align:left}
.gal-thumb{aspect-ratio:4/3;background:#EFE9DE;display:block;width:100%;object-fit:cover;
  border:0;padding:0;cursor:pointer}
.gal-body{padding:11px 12px;display:flex;align-items:center;gap:8px}
.gal-name{font-weight:600;font-size:14.5px;flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.gal-sub{color:var(--muted);font-size:12px;font-family:"IBM Plex Mono",monospace}
.icon-btn{border:0;background:none;color:var(--muted);padding:4px 6px;border-radius:6px}
.icon-btn:hover{background:#F2EEE7;color:#B3261E}
.empty-note{color:var(--muted);margin-top:14px}

/* ───────────── editor chrome ───────────── */
#app{height:100dvh;display:flex;flex-direction:column}
.bar{height:var(--bar);flex:none;display:flex;align-items:center;gap:10px;
  padding:0 12px;border-bottom:1px solid var(--line);background:#fff}
.brand{font-weight:800;color:var(--navy);white-space:nowrap}
.brand span{color:var(--gold)}
.name-input{border:1px solid transparent;background:none;font-weight:700;
  color:var(--navy);padding:7px 9px;min-width:0;flex:0 1 200px}
.name-input.cat{font-weight:600;color:var(--gold);font-size:13px;flex:0 1 150px}
.name-input:hover{border-color:var(--line)}
.tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.sel{display:flex;align-items:center;gap:6px;font-size:13px;margin:0}
.sel span{color:var(--muted);font-weight:600}
.sel select{padding:8px 10px}

.workspace{flex:1;min-height:0;display:flex}
.library{width:320px;flex:none;display:flex;flex-direction:column;
  border-right:1px solid var(--line);background:#fff;min-height:0}
.lib-head{padding:10px 10px 8px;border-bottom:1px solid var(--line)}
.lib-head select{padding:8px 9px;font-size:13.5px}
.lib-grid{flex:1;min-height:0;overflow:auto;display:grid;align-content:start;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;padding:10px}
.lib-item{border:1px solid var(--line);border-radius:10px;background:#FCFAF6;padding:5px;
  height:90px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:grab}
.lib-item img{width:100%;height:100%;object-fit:contain;pointer-events:none}
.lib-item:active{transform:scale(.97)}

.stage-wrap{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:8px;padding:16px;
  background:repeating-conic-gradient(#F2EEE7 0 25%,#F7F4EE 0 50%) 0 0/22px 22px}
.stage{position:relative;border-radius:10px;overflow:hidden;touch-action:none;
  box-shadow:0 14px 40px rgba(0,0,0,.14);background:#fff}
.stage[data-bg=cork]{background:#C9A06A url(assets/cork.svg)}
.stage[data-bg=linen]{background:#EFE9DE}
.stage[data-bg=white]{background:#fff}
.stage[data-bg=ink]{background:#14171A}
.stage[data-bg=sage]{background:#DCE5D8}
.stage[data-bg=blush]{background:#F3E3DC}
.stage-meta{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
.empty{position:absolute;inset:0;display:grid;place-content:center;gap:6px;
  text-align:center;color:#6B6355;pointer-events:none;padding:20px}
.empty strong{font-size:17px}
.stage.has-items .empty{display:none}

/* ───────────── elements ───────────── */
.el{position:absolute;transform-origin:center;cursor:grab;user-select:none;touch-action:none}
.el img{display:block;width:100%;height:100%;pointer-events:none;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.22))}
.el.txt{display:flex;align-items:center;justify-content:center;text-align:center;
  padding:2px 4px;line-height:1.12;white-space:pre-wrap;word-break:break-word}
.el.txt[data-outline="1"]{-webkit-text-stroke:.2em #fff;paint-order:stroke fill;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.el.sel{outline:1.5px solid var(--navy);outline-offset:3px}
.el[contenteditable=true]{cursor:text;outline:2px solid var(--navy);user-select:text}

/* handles on all four corners, so the board can be resized from whichever
   side is reachable — on a phone the far corner often is not */
.h{position:absolute;width:16px;height:16px;border-radius:50%;background:#fff;
  border:2px solid var(--navy);box-shadow:0 1px 4px rgba(0,0,0,.3);touch-action:none;z-index:2}
.h[data-c=nw]{left:-9px;top:-9px;cursor:nwse-resize}
.h[data-c=ne]{right:-9px;top:-9px;cursor:nesw-resize}
.h[data-c=sw]{left:-9px;bottom:-9px;cursor:nesw-resize}
.h[data-c=se]{right:-9px;bottom:-9px;cursor:nwse-resize}
/* Rotate sits OUTSIDE the top-left corner and delete outside the top-right,
   the way Photoshop and Canva place them — far enough out that neither ever
   fights the corner resize handles. */
.h[data-c=rot]{left:-30px;top:-30px;width:22px;height:22px;background:var(--navy);
  border-color:#fff;cursor:grab;display:flex;align-items:center;justify-content:center}
.h[data-c=rot]::after{content:"⟳";color:#fff;font-size:13px;line-height:1;font-weight:700}
.h[data-c=rot]:active{cursor:grabbing}
.h[data-c=del]{right:-30px;top:-30px;width:22px;height:22px;background:#B3261E;
  border-color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.h[data-c=del]::after{content:"🗑";font-size:11px;line-height:1;filter:grayscale(1) brightness(3)}
.h[data-c=del]:hover{background:#8F1D18}
.el:not(.sel) .h{display:none}

.selbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + var(--safe-b));
  display:flex;gap:12px;align-items:stretch;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:7px 9px;box-shadow:0 10px 28px rgba(0,0,0,.18);z-index:30;
  max-width:calc(100vw - 20px);overflow-x:auto}
.grp{display:flex;gap:8px;align-items:flex-end;padding-right:10px;
  border-right:1px solid var(--line)}
.grp:last-child{border-right:0;padding-right:0}
.grp-label{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);align-self:center;writing-mode:vertical-rl;transform:rotate(180deg);
  padding:2px 0}
.fld{display:flex;flex-direction:column;gap:3px;margin:0}
.fld>span{font-size:10.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.fld>span b{color:var(--navy);font-weight:700}
.btnrow{display:flex;gap:4px}
.grp select{padding:7px 8px;font-size:13px;max-width:130px}
.grp input[type=number]{width:62px;padding:7px 8px}
.grp input[type=color]{width:34px;height:34px;padding:2px;border-radius:8px}
.grp input[type=range]{width:86px}
.swatch{display:flex;align-items:center;gap:4px}
.nonebtn{font-size:15px;line-height:1;padding:8px;min-width:34px}
/* the swatch stays visible under "none" — it's the colour you come back to */
.fld.is-none input[type=color]{opacity:.3}
.mini{display:flex;align-items:center;gap:4px;margin:0;font-size:11.5px;color:var(--muted)}
.shape-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(58px,1fr));gap:6px;
  padding:10px;border-bottom:1px solid var(--line);background:#FCFAF6}
.shape-pick button{border:1px solid var(--line);background:#fff;border-radius:9px;
  padding:6px;height:52px;display:grid;place-items:center}
.shape-pick svg{width:26px;height:26px;fill:var(--navy)}
.el.shape svg{width:100%;height:100%;display:block;overflow:visible}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(78px + var(--safe-b));transform:translateX(-50%);
  background:var(--navy);color:#fff;padding:10px 16px;border-radius:10px;font-size:14px;
  z-index:50;box-shadow:0 8px 24px rgba(0,0,0,.25)}

/* ───────────── phone ───────────── */
@media (max-width:820px){
  .workspace{flex-direction:column-reverse}
  .library{width:100%;height:40dvh;border-right:0;border-top:1px solid var(--line)}
  .stage-wrap{padding:10px}
  .lib-grid{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
  .lib-item{height:76px}
  .dims{grid-template-columns:repeat(2,1fr)}
  .bar{gap:6px;padding:0 8px}
  .tools .sel{display:none}
  .btn{padding:9px 11px;font-size:13px}
  .name-input{flex:1 1 auto}
}

/* ───────────── print ───────────── */
@media print{
  @page{margin:.35in}
  .bar,.library,.selbar,.empty,.stage-meta,.toast{display:none!important}
  body,#app{height:auto;background:#fff}
  .workspace{display:block}
  .stage-wrap{padding:0;background:none;display:block}
  .stage{width:100%!important;height:auto!important;aspect-ratio:var(--ar);
    box-shadow:none;border-radius:0;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .el.sel{outline:none}
  .h{display:none!important}
}

/* ════════════════════ editor shell: rail, panels, rulers ════════════════ */
.workspace{flex:1;min-height:0;display:flex}

.rail{width:74px;flex:none;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px;padding:8px 6px;overflow-y:auto}
.rail-btn{border:0;background:none;border-radius:10px;padding:9px 4px;display:flex;
  flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:600;
  color:var(--muted);line-height:1.1}
.rail-btn .ri{font-size:18px;line-height:1}
.rail-btn:hover{background:#F4F1EA}
.rail-btn[aria-pressed=true]{background:#EEF2F6;color:var(--navy)}
.rail-btn.create{background:var(--navy);color:#fff;margin-bottom:8px}
.rail-btn.create:hover{background:#16304F}

.panel-wrap{width:300px;flex:none;background:#fff;border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-height:0}
.panel{flex:1;min-height:0;display:flex;flex-direction:column}
.panel-head{padding:10px;border-bottom:1px solid var(--line)}
.panel-head h3{font-size:14px;color:var(--navy)}
.describe{position:relative;margin-bottom:8px}
.describe .mag{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  color:var(--muted);font-size:15px}
.describe input{width:100%;padding-left:31px}
.subtabs{display:flex;gap:5px;overflow-x:auto;margin-bottom:7px;scrollbar-width:none}
.subtabs::-webkit-scrollbar{display:none}
.subtab{flex:none;border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:5px 11px;font-size:12.5px;font-weight:600;color:var(--muted)}
.subtab[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.lib-count{padding:8px 10px calc(8px + var(--safe-b));font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);font-family:"IBM Plex Mono",monospace}
.stack{padding:10px;display:flex;flex-direction:column;gap:8px}
.stack .btn{width:100%;text-align:left}
.text-preset[data-font=Anton]{font-family:Anton;font-size:19px}
.text-preset[data-font=Jost]{font-family:Jost;font-weight:500;font-size:15px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
.drop{border:2px dashed var(--line);border-radius:12px;padding:20px 14px;text-align:center;
  display:flex;flex-direction:column;gap:5px;cursor:pointer;margin:0}
.drop:hover,.drop.over{border-color:var(--navy);background:#F6F9FC}
.drop strong{color:var(--navy);font-size:14px}
.drop span{font-size:12px;color:var(--muted);font-weight:400}
.proj{border:1px solid var(--line);border-radius:10px;padding:9px 11px;text-align:left;
  display:flex;flex-direction:column;gap:2px}
.proj b{font-size:13.5px}
.proj span{font-size:11.5px;color:var(--muted);font-family:"IBM Plex Mono",monospace}

/* ── canvas area with rulers ── */
.stage-outer{flex:1;min-width:0;position:relative;display:grid;
  grid-template-columns:22px 1fr;grid-template-rows:22px 1fr 34px;
  background:repeating-conic-gradient(#F2EEE7 0 25%,#F7F4EE 0 50%) 0 0/22px 22px}
.stage-outer.norulers{grid-template-columns:0 1fr;grid-template-rows:0 1fr 34px}
.ruler{background:#fff;border-color:var(--line);position:relative;overflow:hidden;
  font-family:"IBM Plex Mono",monospace;font-size:8px;color:var(--muted);user-select:none}
.ruler-h{grid-area:1/2;border-bottom:1px solid var(--line);cursor:ns-resize}
.ruler-v{grid-area:2/1;border-right:1px solid var(--line);cursor:ew-resize}
.ruler-corner{grid-area:1/1;background:#fff;border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.stage-outer.norulers .ruler,.stage-outer.norulers .ruler-corner{display:none}
.tick{position:absolute;background:#C9C2B4}
.ruler-h .tick{bottom:0;width:1px}
.ruler-v .tick{right:0;height:1px}
.tlab{position:absolute;color:#8C8676}
.ruler-h .tlab{top:1px;transform:translateX(2px)}
.ruler-v .tlab{left:1px;writing-mode:vertical-rl;transform:translateY(2px)}
.stage-wrap{grid-area:2/2;overflow:auto;display:grid;place-items:center;padding:14px}
.stage-foot{grid-area:3/1/4/3;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:0 12px;border-top:1px solid var(--line);background:#fff}
.zoomer{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
  font-family:"IBM Plex Mono",monospace}

/* ── guides ── */
.guides{position:absolute;inset:0;pointer-events:none;z-index:9}
.guide{position:absolute;background:#12B5CB;pointer-events:auto}
.guide.h{left:0;right:0;height:1px;cursor:ns-resize}
.guide.v{top:0;bottom:0;width:1px;cursor:ew-resize}
.guide::after{content:"";position:absolute;inset:-4px}
.guide.drag{background:#F2545B}
.snapline{position:absolute;background:#F2545B;z-index:12;pointer-events:none}
.snapline.h{left:0;right:0;height:1px}
.snapline.v{top:0;bottom:0;width:1px}

/* ── docked toolbar ── */
.selbar.docked{position:static;transform:none;max-width:none;border-radius:0;
  border-left:0;border-right:0;border-bottom:0;box-shadow:none;flex:none;
  padding:8px 42px 8px 12px}
.selbar.floating{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(14px + var(--safe-b));border-radius:12px;border:1px solid var(--line);
  box-shadow:0 10px 28px rgba(0,0,0,.2);max-width:calc(100vw - 20px);padding-right:42px}
.dockbtn{position:absolute;top:5px;right:7px;border:1px solid var(--line);background:#fff;
  border-radius:7px;width:26px;height:26px;font-size:12px;color:var(--muted);line-height:1}
.dockbtn:hover{border-color:var(--navy);color:var(--navy)}

@media (max-width:820px){
  .rail{width:100%;flex-direction:row;order:2;border-right:0;border-top:1px solid var(--line);
    overflow-x:auto;padding:6px}
  .rail-btn{flex:none;min-width:64px}
  .rail-btn.create{margin:0 6px 0 0}
  .workspace{flex-direction:column}
  .panel-wrap{width:100%;height:38dvh;order:3;border-right:0;border-top:1px solid var(--line)}
  .stage-outer{order:1;grid-template-columns:0 1fr;grid-template-rows:0 1fr 34px}
  .stage-outer .ruler,.stage-outer .ruler-corner{display:none}

  /* The bar can't hold brand + both names + units + five actions at phone
     widths, and the overflow was scrolling the whole page sideways. Drop what
     is redundant here (the rulers are hidden, so the unit picker is moot) and
     let the actions scroll inside the bar rather than the document. */
  .bar{padding:0 8px;gap:8px;min-width:0}
  .bar .brand{display:none}
  #rulerBtn,#unitFld{display:none}   /* rulers are hidden here, so both are moot */
  .name-input{flex:0 1 96px}
  .name-input.cat{display:none}   /* set at board setup; not worth the bar space */
  .tools{min-width:0;gap:6px;overflow-x:auto;scrollbar-width:none}
  .tools::-webkit-scrollbar{display:none}
  .tools>*{flex:none}
}
/* Nothing in the editor may scroll the document sideways. */
#app{overflow-x:hidden}
@media print{.rail,.panel-wrap,.ruler,.ruler-corner,.stage-foot{display:none!important}
  .stage-outer{display:block;background:none}}