/* ------------------------------------------------------------------
   Stage Plan — black and white, but roomy and friendly:
   big tiles, rounded corners, plain language, one obvious button.
------------------------------------------------------------------ */

/* Jam is the house face, used for everything. It has one weight and
   covers plain Latin; anything it lacks (✕, ✓, ⟲) falls through to the
   system fonts behind it. */
@font-face{font-family:"Jam";src:url("Jam.ttf") format("truetype");font-display:swap}

:root{
  --ink:#111;
  --ink-soft:#5b5b5b;
  --muted:#8a8a8a;
  --paper:#fff;
  --wash:#f6f6f6;
  --line:#e4e4e4;
  --line-mid:#cfcfcf;
  /* the accent. Used for anything you press, anything selected, and
     nothing at all on the printed sheet — that stays black on white. */
  --red:#e5322d;
  --red-dark:#c7261f;
  --red-tint:#fdeceb;
  --red-ring:rgba(229,50,45,.18);
  --r:10px;
  --r-lg:14px;
  --shadow:0 1px 2px rgba(0,0,0,.05);
  --shadow-lift:0 6px 20px rgba(0,0,0,.10);
  --placeholder:#b0b0b0;
  --grip:#c8c8c8;
  --backdrop:rgba(20,20,20,.32);
  color-scheme:light;
  --font:"Jam",-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --mono:"Jam",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Day is the default. Dark mode only when the toggle has picked it, which
   it records as data-theme on <html>. Print never sees any of this. */
@media screen{
  :root[data-theme="dark"]{
    --ink:#ececee;
    --ink-soft:#b3b3b8;
    --muted:#8b8b91;
    --paper:#1c1c1f;
    --wash:#26262a;
    --line:#323237;
    --line-mid:#47474d;
    --red-tint:rgba(229,50,45,.18);
    --red-ring:rgba(229,50,45,.30);
    --placeholder:#64646a;
    --grip:#55555b;
    --backdrop:rgba(0,0,0,.6);
    --shadow:0 1px 2px rgba(0,0,0,.4);
    --shadow-lift:0 6px 20px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}

/* view switching */
.view{display:none}
body[data-view="home"] #home{display:block}
body[data-view="editor"] #editor{display:block}
body[data-view="home"] .only-editor{display:none}
body[data-view="editor"] .only-home{display:none}

/* ---------------- buttons & fields ---------------- */
.btn{
  appearance:none;
  border:1px solid var(--line-mid);
  background:var(--paper);
  color:var(--ink);
  padding:9px 16px;
  border-radius:var(--r);
  font-size:13px;
  font-weight:550;
  cursor:pointer;
  white-space:nowrap;
  transition:background .12s, border-color .12s, transform .06s, box-shadow .12s;
}
.btn:hover{border-color:var(--ink);background:var(--wash)}
.btn:active{transform:translateY(1px)}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:600}
.btn.primary:hover{background:var(--red-dark);border-color:var(--red-dark);box-shadow:var(--shadow-lift)}
.btn.danger{color:var(--red)}
.btn.danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn.quiet{border-color:transparent;background:transparent;color:var(--ink-soft)}
.btn.quiet:hover{background:var(--wash);color:var(--ink);border-color:transparent}
.btn.tiny{padding:5px 10px;font-size:12px;border-radius:8px}
.btn.block{width:100%;justify-content:center;padding:12px}
.btn[disabled]{opacity:.4;pointer-events:none}

input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  outline:none;
  transition:border-color .12s, box-shadow .12s;
}
input:focus,select:focus,textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-ring)}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
textarea{resize:vertical;min-height:64px}
input[type=checkbox]{width:auto;accent-color:var(--red);cursor:pointer}

label.field{display:block;margin-bottom:12px}
label.field > span{
  display:block;font-size:12px;color:var(--ink-soft);margin-bottom:4px;font-weight:500;
}
.row{display:flex;gap:10px}
.row > *{flex:1;min-width:0}
.spacer{flex:1}
.hint{font-size:12.5px;color:var(--muted);line-height:1.6}
.tag{
  font-family:var(--mono);font-size:11px;color:var(--muted);
  background:var(--wash);border-radius:20px;padding:1px 8px;
}

/* ---------------- top bar ---------------- */
.topbar{
  display:flex;align-items:center;gap:14px;
  padding:0 22px;height:62px;
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:30;background:var(--paper);
}
.brand{
  display:flex;align-items:center;gap:9px;
  border:none;background:none;cursor:pointer;padding:0;
  font-size:19px;font-weight:400;letter-spacing:-.01em;color:var(--ink);
}
.plan-name input{
  border:none;background:transparent;font-size:15px;font-weight:550;
  max-width:260px;padding:6px 8px;border-radius:8px;
}
.plan-name input:hover{background:var(--wash)}
.plan-name input:focus{background:var(--wash);box-shadow:none}
.top-actions{display:flex;gap:6px;align-items:center}
.theme-toggle{padding:7px 9px;line-height:0}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.theme-toggle .moon{display:none}
.dark .theme-toggle .sun{display:none}
.dark .theme-toggle .moon{display:inline}
.coffee{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  background:#ffdd00;border-color:#ffdd00;color:#111;font-weight:600;
}
.coffee:hover{background:#ffe633;border-color:#ffe633;color:#111;box-shadow:var(--shadow-lift)}
.coffee svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------------- home ---------------- */
#home{max-width:1060px;margin:0 auto;padding:0 22px 80px}
.hero{text-align:center;padding:64px 0 8px}
.hero h1{font-size:40px;line-height:1.12;letter-spacing:-.03em}
.lede{
  max-width:600px;margin:16px auto 0;font-size:16px;color:var(--ink-soft);line-height:1.6;
}
.tiles{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:16px;margin-top:44px;
}
.tile{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  padding:22px 20px;text-align:left;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  cursor:pointer;transition:transform .12s, box-shadow .12s, border-color .12s;
}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:var(--c,var(--red))}
.tile .t-icon{
  display:flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:16px;margin-bottom:4px;
}
.tile svg{width:40px;height:40px}
.tile .t-name{display:block;font-size:15.5px;font-weight:650;letter-spacing:-.01em}
.tile .t-desc{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.tile.blank{background:var(--wash);border-style:dashed}

.how{margin-top:72px;border-top:1px solid var(--line);padding-top:44px}
.how h2{font-size:20px;text-align:center}
.how-steps{
  list-style:none;margin:28px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;
}
.how-steps li{display:flex;flex-direction:column;gap:6px}
.step-n{
  width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:650;margin-bottom:4px;
}
.how-steps b{font-size:15px}
.how-steps span:last-child{font-size:13.5px;color:var(--muted)}
.footnote{text-align:center;margin-top:56px;font-size:12.5px;color:var(--muted)}

/* ---------------- editor ---------------- */
.editor-grid{
  display:grid;grid-template-columns:250px minmax(0,1fr) 300px;
  height:calc(100vh - 62px);
}
.side{
  overflow-y:auto;padding:18px;border-right:1px solid var(--line);background:var(--paper);
}
.side.right{border-right:none;border-left:1px solid var(--line);padding:0}
.side.right .card{padding:18px;border-top:1px solid var(--line)}

/* right-hand accordions */
.acc{border-top:1px solid var(--line)}
.acc:last-child{border-bottom:1px solid var(--line)}
.acc > summary{
  list-style:none;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;font-size:13.5px;font-weight:650;color:var(--ink);
}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::after{
  content:"";width:7px;height:7px;flex:none;margin-right:3px;
  border-right:1.8px solid var(--ink-soft);border-bottom:1.8px solid var(--ink-soft);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s;
}
.acc[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
.acc > summary:hover{background:var(--wash)}
.acc > summary:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--red-ring)}
.acc-body{padding:4px 18px 18px}
.acc-body > .hint{margin:8px 0 0}
.side-title{
  font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--ink-soft);
  margin:22px 0 10px;display:flex;align-items:center;gap:8px;
}
.side > .side-title:first-of-type{margin-top:22px}

.stage-list{list-style:none;margin:0;padding:0}
.stage-list li{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:8px;cursor:pointer;
}
.stage-list li:hover{background:var(--wash)}
.stage-list li.on{background:var(--red);color:#fff}
.stage-list li.on .li-sub{color:rgba(255,255,255,.65)}
.stage-list li.on .li-icon{background:rgba(255,255,255,.22) !important}
.stage-list li.on svg *{stroke:#fff !important}
.stage-list .li-icon{
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:8px;flex:none;
}
.stage-list svg{width:19px;height:19px;flex:none}
.stage-list .li-text{flex:1;min-width:0}
.stage-list .li-name{
  display:block;font-size:13px;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.stage-list .li-sub{display:block;font-size:11px;line-height:1.3;color:var(--muted)}
.stage-list .li-del{
  border:none;background:none;cursor:pointer;color:inherit;opacity:.35;padding:2px 4px;font-size:13px;
}
.stage-list .li-del:hover{opacity:1}
.stage-list li:not(.on) .li-del:hover{color:var(--red)}
.stage-list .empty{display:block;padding:10px 8px;color:var(--muted);font-size:12.5px}

.stage-col{display:flex;flex-direction:column;overflow-y:auto;background:var(--wash)}
.stage-tools{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:11px 20px;background:var(--paper);border-bottom:1px solid var(--line);
}
.stage-tools .grp{display:flex;align-items:center;gap:6px}
.tool-label{font-size:12px;color:var(--muted)}
.times{color:var(--muted)}
.stage-tools input[type=number]{width:64px;padding:5px 8px;text-align:center}
.zoom-val{font-family:var(--mono);font-size:12px;min-width:46px;text-align:center;color:var(--ink-soft)}
.option-bar[hidden]{display:none}
.option-bar{
  display:flex;gap:18px;flex-wrap:wrap;
  padding:10px 20px;background:var(--paper);border-bottom:1px solid var(--line);
}
.inline{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-soft);cursor:pointer}

.place-bar[hidden]{display:none}
.place-bar{
  display:flex;align-items:center;gap:10px;
  padding:7px 20px;background:var(--paper);border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--muted);
}
.place-bar .pb-text{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* what is about to go down, floating just above the preview under the pointer.
   With no pointer over the stage (or on touch) it sits at the top of the stage. */
.place-tip[hidden]{display:none}
.place-tip{
  position:absolute;z-index:5;pointer-events:none;
  display:flex;align-items:center;gap:7px;white-space:nowrap;
  padding:5px 10px 5px 6px;border-radius:9px;
  background:var(--paper);color:var(--ink);border:1px solid var(--line);
  box-shadow:var(--shadow-lift);font-size:12.5px;
  transform:translate(-50%,-100%);
}
.place-tip.pinned{left:50%;top:34px;transform:translateX(-50%)}
.place-tip .pt-icon{display:flex;flex:none}
.place-tip .pt-name{font-weight:700}
.place-tip .pt-count{font-family:var(--mono);font-size:11px;color:var(--muted)}

.stage-wrap{position:relative;padding:24px 20px;overflow:auto;flex:none}
#stage.placing{cursor:crosshair}
/* one thing from the picker: no queue, so nothing to count, skip or hand off */
.place-bar.single #placeUndo,
.place-bar.single [data-act="placeSkip"],
.place-bar.single [data-act="placeRest"],
.place-bar.single .pb-text{display:none}
.place-tip.single .pt-count{display:none}
#stage{
  display:block;margin:0 auto;width:100%;max-width:960px;height:auto;
  background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);
  touch-action:none;user-select:none;
}
#stage .hit{cursor:move}

/* ---------------- lists ---------------- */
.lists{padding:0 20px 56px}
.list-head{display:flex;align-items:center;gap:10px;padding:20px 0 2px}
.list-head h2{font-size:16px}
.list-head .count{font-size:12px;color:var(--muted);font-family:var(--mono)}
.list-note{margin:2px 0 12px;font-size:12.5px;color:var(--muted)}
table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
}
th{
  text-align:left;font-size:11px;font-weight:600;color:var(--ink-soft);
  padding:9px 10px;background:var(--wash);border-bottom:1px solid var(--line);
}
td{padding:0;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
td input[type=text],td input[type=number],td select{
  border:none;border-radius:0;padding:9px 10px;background:transparent;
}
td input:focus,td select:focus{
  background:var(--wash);box-shadow:none;outline:1.5px solid var(--red);outline-offset:-1px;
}
td.ch{font-family:var(--mono);text-align:center;width:38px;font-size:12px;color:var(--ink-soft)}
td.plain{font-size:12.5px;color:var(--ink-soft);padding:0 10px}
.cellrow{display:flex;align-items:center;width:100%}
.cellrow .dot{
  width:7px;height:7px;border-radius:50%;flex:none;margin-left:10px;
}
.cellrow input{flex:1;min-width:0}
td.mid{text-align:center}
td.act{width:70px;white-space:nowrap;text-align:right;padding-right:6px}
td.act button{border:none;background:none;cursor:pointer;color:var(--muted);padding:3px 4px;font-size:12px}
td.act button:hover{color:var(--ink)}
td.act button[data-act="del"]:hover{color:var(--red)}
/* "+ gap": a tab on the line under the row you are over. Hovering the tab
   draws that line across the table, so you can see where the gap lands. */
td.ch{position:relative}
.seam{
  position:absolute;left:3px;bottom:0;transform:translateY(50%);z-index:3;
  display:none;gap:3px;white-space:nowrap;
}
.seam button{
  position:relative;padding:0 6px;height:17px;line-height:15px;border-radius:9px;
  font-size:10.5px;font-family:var(--font);cursor:pointer;
  color:var(--ink-soft);background:var(--paper);border:1px solid var(--line-mid);
}
tr:hover .seam{display:flex}
tr.dragging .seam{display:none}
.seam button:hover{color:#fff;background:var(--red);border-color:var(--red)}
.seam [data-act="gap"]::after{
  content:"";position:absolute;left:100%;top:50%;width:3000px;
  border-top:1.5px dashed var(--red);opacity:0;pointer-events:none;
}
.seam [data-act="gap"]:hover::after{opacity:1}
/* no hover on a touch screen, so the tabs stay faintly visible there */
@media (hover:none){.seam{display:flex;opacity:.55}}
tr.picked td{background:var(--red-tint)}
td .chk{display:flex;justify-content:center}
.grip{cursor:grab;color:var(--grip);padding:0 2px}
.grip:hover{color:var(--ink)}
.table-scroll{overflow-x:auto;border-radius:var(--r)}
tr.dragging{opacity:.35}
/* stereo pairs: a line joins the two dots, from the middle of the top row
   to the middle of the one under it. A half split off gets a dashed tag. */
td.pair-top{position:relative}
td.pair-top::after{
  content:"";position:absolute;left:13px;top:50%;height:100%;width:1.5px;
  background:var(--c);pointer-events:none;
}
.split-tag{
  flex:none;margin-right:8px;padding:0 6px;border-radius:9px;
  font-size:10.5px;line-height:15px;color:var(--muted);
  border:1px dashed var(--line-mid);cursor:help;
}
tr.pair-preview td{background:var(--red-tint)}
tr.pair-preview td.ch{box-shadow:inset 3px 0 0 var(--red)}
/* a channel left empty on purpose */
tr.gap td{background:repeating-linear-gradient(135deg,transparent 0 6px,var(--wash) 6px 12px)}
.gap-label{display:inline-block;padding:6px 10px;font-size:12.5px;color:var(--muted);font-style:italic}
tr.drop-target td{box-shadow:inset 0 2px 0 var(--red)}
.empty-row{padding:16px 12px;color:var(--muted);font-size:13px}
body:not(.show-tech) .tech{display:none}

/* ---------------- inspector ---------------- */
.acc.insp{border:none}
.acc > summary.insp-head{padding:16px 18px 14px 14px}
.insp-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.insp-head h2{font-size:16px;line-height:1.25;margin:0}
.insp-head .type{font-size:12px;line-height:1.3;color:var(--muted)}
.insp-body{padding:14px 18px 18px}
.sub-inputs{margin-top:6px;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sub-input{display:flex;gap:6px;align-items:center;padding:5px 6px;border-bottom:1px solid var(--line)}
.sub-input:last-child{border-bottom:none}
.sub-input .n{font-family:var(--mono);font-size:11px;width:18px;color:var(--muted);text-align:center}
.sub-input input{border:none;padding:4px 5px;border-radius:6px}
.sub-input input:focus{background:var(--wash);box-shadow:none;outline:1.5px solid var(--red);outline-offset:-1px}
.sub-input button:hover{color:var(--red)}
.sub-input button{border:none;background:none;cursor:pointer;color:var(--muted);padding:2px 5px}
.sub-input button:hover{color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
/* power drop: who it is for, and the copy-to-all button, sat between two fields */
.power-extra{margin:-2px 0 14px}
.power-extra .hint{margin:0}
.power-extra .hint + .chips{margin-top:6px}
.power-extra .chips{margin-top:0}
.chip-on{background:var(--red);border-color:var(--red);color:#fff}

/* ---------------- modals ---------------- */
.modal-back{
  position:fixed;inset:0;background:var(--backdrop);
  display:none;align-items:flex-start;justify-content:center;z-index:60;
  overflow-y:auto;padding:40px 16px;
}
.modal-back.open{display:flex}
.modal{
  background:var(--paper);border-radius:var(--r-lg);width:100%;max-width:600px;
  box-shadow:0 20px 60px rgba(0,0,0,.22);overflow:hidden;
}
.modal.wide{max-width:920px}
.modal.narrow{max-width:420px}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px;border-bottom:1px solid var(--line);
}
.modal-head h2{font-size:17px}
.modal-body{padding:22px}
.modal-lede{margin:0 0 20px;color:var(--ink-soft);font-size:13.5px}
.modal-foot{
  display:flex;justify-content:flex-end;gap:8px;align-items:center;
  padding:16px 22px;border-top:1px solid var(--line);background:var(--wash);
}
.modal-foot .hint{margin-right:auto}

.picker-search{padding:16px 22px 0}
.picker-search input{padding:12px 14px;font-size:15px;border-radius:var(--r)}
.picker-cats{
  display:flex;gap:6px;flex-wrap:wrap;padding:14px 22px;
  border-bottom:1px solid var(--line);     /* the list scrolls under this edge, not into the chips */
}
.cat{
  border:1px solid var(--line);background:var(--paper);border-radius:20px;
  padding:5px 13px;font-size:12.5px;cursor:pointer;color:var(--ink-soft);
}
.cat:hover{border-color:var(--red);color:var(--red)}
.cat.on{background:var(--red);border-color:var(--red);color:#fff}
.picker-body{max-height:56vh;overflow-y:auto;padding-top:18px}
.pick-group{margin-bottom:26px}
.pick-group h3{
  display:flex;align-items:center;gap:7px;
  font-size:12px;font-weight:650;margin-bottom:3px;
}
.cat-dot{
  width:8px;height:8px;border-radius:50%;flex:none;display:inline-block;
}
.cat{display:inline-flex;align-items:center;gap:7px}
.cat.on .cat-dot{background:#fff !important}
.pick-group .g-blurb{font-size:12px;color:var(--muted);margin-bottom:12px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:9px}
.pick{
  display:flex;align-items:center;gap:10px;text-align:left;
  padding:10px 11px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);cursor:pointer;
  transition:transform .1s, box-shadow .1s, border-color .1s;
}
.pick:hover{transform:translateY(-2px);box-shadow:var(--shadow-lift);border-color:var(--c,var(--red))}
.pick .p-icon{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:10px;flex:none;
}
.pick svg{width:26px;height:26px}
.pick > span{min-width:0}
.pick .p-name{display:block;font-size:13px;font-weight:600;line-height:1.3}
.pick .p-needs{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.no-hits{padding:30px 4px;color:var(--muted);text-align:center}


/* ---------------- dark ---------------- */
/* The plot and the icons are drawn black on white (or on a family tint),
   so rather than a second set of colours they are flipped on screen.
   The hue-rotate puts each family colour back where it was. The PNG
   export serialises the SVG itself, so it never picks this up. */
@media screen{
  .dark #stage,
  .dark .t-icon,.dark .p-icon,.dark .li-icon{filter:invert(.92) hue-rotate(180deg)}
  .dark #stage{box-shadow:0 0 0 1px var(--line)}
  .dark .stage-list li.on .li-icon{filter:none}
  .dark .cat:not(.on){border-color:var(--line) !important}
}

/* ---------------- the logo field ---------------- */
.logo-prev{
  height:72px;display:flex;align-items:center;justify-content:flex-start;
  padding:8px 10px;margin:6px 0 8px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
}
.logo-prev img,.logo-prev svg{max-height:100%;max-width:100%}
.logo-field .hint{margin:6px 0 0}

/* the free-form lists for the sheet: roomy, and clearly boxes to type in */
.side.right textarea{
  min-height:150px;line-height:1.5;
  background:var(--wash);border-color:var(--line-mid);
}
.side.right textarea:focus{background:var(--paper)}
.side.right .field > span{display:block;font-size:13px;font-weight:650;color:var(--ink);margin-bottom:4px}
.logo-field{margin-bottom:16px}

/* ---------------- the printed sheet ----------------
   Laid out off-screen at its real printed size, so the script can measure
   what fits on each page before anything is printed. Sizes are in mm, so
   on screen and on paper they come out the same. */
#sheet{
  position:absolute;left:-10000px;top:0;visibility:hidden;pointer-events:none;
  width:297mm;
  font:9pt/1.3 var(--font);color:#000;background:#fff;
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.sh-wordmark text{font-family:"Jam",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;font-weight:400;fill:#111}

/* one whole sheet of A4 landscape. The page itself has no margin (so the
   browser has nowhere to print its URL, date and page title) and the
   sheet keeps its own 8mm × 11mm margin as padding instead. A hair under
   210mm tall so rounding never spills onto a blank extra page. */
.sh-page{
  width:297mm;height:209.8mm;padding:8mm 11mm;box-sizing:border-box;
  overflow:hidden;position:relative;z-index:0;
  display:flex;flex-direction:column;gap:4mm;
  break-after:page;page-break-after:always;
}
.sh-page:last-child{break-after:auto;page-break-after:auto}
/* a slim, faint band of StagePlan4U along the top of each page, behind the header */
.sh-watermark{
  position:absolute;left:11mm;right:11mm;top:8mm;height:7mm;z-index:-1;
  display:flex;align-items:center;gap:6mm;overflow:hidden;white-space:nowrap;
  font-size:13pt;color:#111;opacity:.1;pointer-events:none;
}
/* a small credit in the bottom margin, bottom right of every page */
.sh-madewith{position:absolute;right:11mm;bottom:3mm;font-size:7.5pt;color:#777;letter-spacing:.02em}
#sheet h2,.sh-event,.sh-cont-head b{font-family:var(--font);font-weight:700}

.sh-head{display:grid;grid-template-columns:72mm 1fr auto;gap:8mm;align-items:center}
.sh-logo{height:28mm;display:flex;align-items:center}
.sh-logo img,.sh-logo svg{max-height:100%;max-width:100%}
.sh-logo img{object-fit:contain}
.sh-event{font-size:13pt;line-height:1.45}
.sh-contact{align-self:start;text-align:right;font-size:8.5pt;max-width:90mm}
.sh-contact b{font-size:9.5pt}

/* fills the page under the header; the lists column decides when it is full */
.sh-main{flex:1;display:grid;grid-template-columns:1.05fr 1fr;gap:8mm}
.sh-left{display:flex;flex-direction:column;gap:3mm;min-height:0}
/* the plot takes whatever height the sections under it leave, never more
   than it would have on its own */
.sh-plot{flex:1 1 0;min-height:45mm;max-height:118mm}
.sh-plot svg{display:block;width:100%;height:100%}
.sh-left h2{font-size:12pt;margin:0 0 1.5mm}
.sh-pair{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.sh-venue{margin-top:auto}
/* a faint outline round each of the gear and lighting lists */
.sh-framed{border:0.3mm solid #c8c8c8;border-radius:1.5mm;padding:2mm 3mm 2.5mm}

/* pages after the first: just the lists, two columns side by side */
.sh-cont-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:2mm;border-bottom:1.5px solid #000;font-size:9pt;
}
.sh-cont-head b{font-size:11pt}
.sh-colgrid{flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:8mm}
.sh-col{min-height:0;overflow:hidden}
/* the page the gear, lighting and notes move to when they crowd the plot */
/* one column per section, side by side across the page */
.sh-extra{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6mm;align-items:start}
.sh-extra .sh-cols{flex-wrap:wrap;row-gap:2mm}
.sh-extra h2{font-size:12pt;margin:0 0 1.5mm}

.sh-lists h2{font-size:12pt;margin:0 0 1.5mm}
.sh-lists table + h2{margin-top:4mm}
/* fixed columns: a long note wraps inside its own cell instead of
   squeezing every other column and making the whole list taller */
.sh-lists table{width:100%;border-collapse:collapse;font-size:7pt;margin:0;table-layout:fixed}
/* the app's own tables follow the dark theme; paper is always white */
.sh-lists table{background:#fff;border-color:#e4e4e4}
.sh-lists th{white-space:nowrap}
.sh-lists th{
  text-align:left;font-weight:500;color:#444;background:#f4f4f4;
  padding:1.5mm 2mm;border-bottom:1px solid #000;
}
.sh-lists td{padding:.4mm 2mm;border-bottom:1px solid #e3e3e3;overflow-wrap:anywhere}  /* a long unbroken entry wraps in its own column */
.sh-lists .n{width:9mm;padding-left:.5mm;padding-right:.5mm;text-align:center;font-family:var(--mono);color:#444}
.sh-lists .c{width:10mm;text-align:center}
.sh-dash,.sh-none{color:#888}
.sh-box{display:inline-block;width:2.8mm;height:2.8mm;border:1px solid #555;border-radius:.6mm;vertical-align:middle}
.sh-box.on{background:#000;border-color:#000;position:relative}
.sh-box.on::after{
  content:"";position:absolute;left:.85mm;top:.25mm;width:.7mm;height:1.5mm;
  border:solid #fff;border-width:0 .35mm .35mm 0;transform:rotate(45deg);
}
.sh-notes{white-space:pre-wrap;font-size:8.5pt}
.sh-contact .sh-notes:not(:first-child){margin-top:2mm}
.sh-cols{display:flex;gap:6mm;font-size:8.5pt;line-height:1.35}

/* contact and notes moved to the right half of the page line up on the right */
.sh-who{font-size:8.5pt}
.sh-free .sh-right{text-align:right}
.sh-free .sh-lists{overflow:hidden}
.sh-free .sh-plot{max-height:none;min-height:0}
.sh-free .sh-logo{display:flex;align-items:center}
.sh-free .sh-framed{box-sizing:border-box}
.sh-free .sh-framed h2{font-size:12pt;margin:0 0 1.5mm}

/* ---------------- print preview ----------------
   The sheet moves in here while it is open, scaled down to fit. */
.preview:not([hidden]){
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:var(--wash);
}
body.pv-open{overflow:hidden}
.pv-bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 18px;background:var(--paper);border-bottom:1px solid var(--line);
}
.pv-bar .spacer{flex:1}
.pv-bar .hint{margin:0}
.pv-title{font-size:15px}
.pv-scroll{flex:1;overflow:auto;padding:24px}
.pv-wrap{margin:0 auto;position:relative}
#pvWrap #sheet{
  position:absolute;left:0;top:0;visibility:visible;pointer-events:auto;
  transform-origin:0 0;background:transparent;
}
#pvWrap .sh-page{background:#fff;margin-bottom:10mm;box-shadow:0 2mm 8mm rgba(0,0,0,.18)}
#pvWrap [data-block]{cursor:move;touch-action:none;user-select:none;outline:.4mm dashed transparent;outline-offset:1mm}
#pvWrap .sh-head [data-block],#pvWrap .sh-main [data-block]{position:relative}
#pvWrap [data-block]:hover{outline-color:#bbb}
#pvWrap [data-block].pv-active{outline-color:var(--red);z-index:5}
#pvWrap .pv-dragging .sh-page{overflow:visible}
#pvWrap .pv-dragging .sh-page:has(.pv-active){z-index:2}
.pv-grip{
  position:absolute;right:-1.5mm;bottom:-1.5mm;width:3.5mm;height:3.5mm;z-index:3;
  background:#fff;border:.4mm solid var(--red);border-radius:.8mm;cursor:nwse-resize;
  opacity:0;transition:opacity .12s;
}
#pvWrap [data-block]:hover > .pv-grip,#pvWrap .pv-active > .pv-grip{opacity:1}
.sh-free .sh-lists > .pv-grip{right:0;bottom:0}
#pvWrap .sh-empty-extra{background:transparent;box-shadow:none;border:.6mm dashed #b5b5b5}
#pvWrap .sh-empty-extra .sh-cont-head{visibility:hidden}
@media (max-width:1000px){ .pv-bar .hint{display:none} }
.pv-remove{position:absolute;left:11mm;bottom:2mm;z-index:4;font-size:9pt}
.pv-drop{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:14pt;line-height:1.5;color:#999;pointer-events:none;
}

@media print{
  @page{size:A4 landscape;margin:0}
  html,body{background:#fff !important;color:#000}
  body > *:not(#sheet):not(#preview){display:none !important}
  #sheet{position:static;visibility:visible}
  /* printing from the preview: the sheet is inside it, full size */
  .preview:not([hidden]){position:static;display:block;background:none}
  .pv-bar,.pv-grip,.pv-drop,.pv-remove,.sh-empty-extra{display:none !important}
  .pv-scroll{overflow:visible;padding:0}
  .pv-wrap{width:auto !important;height:auto !important}
  #pvWrap #sheet{position:static;transform:none !important}
  #pvWrap .sh-page{margin:0;box-shadow:none}
  #pvWrap [data-block]{outline:none !important}
}

/* ---------------- narrow ---------------- */
@media (max-width:1180px){
  .editor-grid{grid-template-columns:215px minmax(0,1fr) 265px}
}
@media (max-width:900px){
  .editor-grid{grid-template-columns:1fr;height:auto}
  .side{border-right:none;border-top:1px solid var(--line)}
  .side.right{border-left:none}
  .hero h1{font-size:30px}
  .coffee span{display:none}
}