:root {
  --bg: #f4f4f1;
  --panel: #ffffff;
  --ink: #1d1d1b;
  --muted: #6b6b66;
  --line: #d8d8d2;
  --accent: #2f5d8a;
  --accent-ink: #ffffff;
  --danger: #a33;
  --ok: #2e7d32;
  --warn: #b26a00;
  --wall: #333;
  --table: #ffffff;
  --table-line: #444;
  --men: #eaf1f8;
  --women: #f8ecf0;
  --fixture: #e9e6dc;
  --select: #ff9800;
  --publish: #1565c0;
  --publish-dark: #0d47a1;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* seats wanted but not confirmed yet */
  --pending: #ffe79b;
  --pending-soft: #fff5cc;
  /* confirmed but not fully seated: blue = men still to seat, pink = ladies, zig-zag of the two = both */
  --short-men: #cbdff7;
  --short-women: #f8d3e2;
  --short-men-soft: #dceaf9;
  --short-women-soft: #fbe4ee;
  --short-both: linear-gradient(135deg, var(--short-men) 25%, transparent 25%) -8px 0 / 16px 16px repeat,
                linear-gradient(225deg, var(--short-men) 25%, transparent 25%) -8px 0 / 16px 16px repeat,
                linear-gradient(315deg, var(--short-men) 25%, transparent 25%) 0 0 / 16px 16px repeat,
                linear-gradient(45deg, var(--short-men) 25%, transparent 25%) 0 0 / 16px 16px repeat,
                var(--short-women);
  --short-both-soft: linear-gradient(135deg, var(--short-men) 25%, transparent 25%) -8px 0 / 16px 16px repeat,
                linear-gradient(225deg, var(--short-men) 25%, transparent 25%) -8px 0 / 16px 16px repeat,
                linear-gradient(315deg, var(--short-men) 25%, transparent 25%) 0 0 / 16px 16px repeat,
                linear-gradient(45deg, var(--short-men) 25%, transparent 25%) 0 0 / 16px 16px repeat,
                var(--short-women-soft);
}
/* ---- the Publish sheet's typefaces: shipped in web/fonts (SIL Open Font License, see OFL.txt there),
   regular + bold, Latin + Hebrew, so a sheet is set the same on every device.  publish.js lists them
   (PUB_FONTS) and puts the same files inside the PDFs it draws. ---- */
@font-face { font-family: "Assistant"; font-weight: 400; font-style: normal; src: url("/static/fonts/assistant-400.woff2") format("woff2"); }
@font-face { font-family: "Assistant"; font-weight: 700; font-style: normal; src: url("/static/fonts/assistant-700.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 400; font-style: normal; src: url("/static/fonts/heebo-400.woff2") format("woff2"); }
@font-face { font-family: "Heebo"; font-weight: 700; font-style: normal; src: url("/static/fonts/heebo-700.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 400; font-style: normal; src: url("/static/fonts/rubik-400.woff2") format("woff2"); }
@font-face { font-family: "Rubik"; font-weight: 700; font-style: normal; src: url("/static/fonts/rubik-700.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-weight: 400; font-style: normal; src: url("/static/fonts/arimo-400.woff2") format("woff2"); }
@font-face { font-family: "Arimo"; font-weight: 700; font-style: normal; src: url("/static/fonts/arimo-700.woff2") format("woff2"); }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 400; font-style: normal; src: url("/static/fonts/frank-ruhl-libre-400.woff2") format("woff2"); }
@font-face { font-family: "Frank Ruhl Libre"; font-weight: 700; font-style: normal; src: url("/static/fonts/frank-ruhl-libre-700.woff2") format("woff2"); }
@font-face { font-family: "Tinos"; font-weight: 400; font-style: normal; src: url("/static/fonts/tinos-400.woff2") format("woff2"); }
@font-face { font-family: "Tinos"; font-weight: 700; font-style: normal; src: url("/static/fonts/tinos-700.woff2") format("woff2"); }
@font-face { font-family: "David Libre"; font-weight: 400; font-style: normal; src: url("/static/fonts/david-libre-400.woff2") format("woff2"); }
@font-face { font-family: "David Libre"; font-weight: 700; font-style: normal; src: url("/static/fonts/david-libre-700.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-weight: 600; font-style: normal; src: url("/static/fonts/caveat-600.woff2") format("woff2"); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; font: 14px/1.4 var(--font); color: var(--ink); background: var(--bg); }
body { display: flex; flex-direction: column; }
button { font: inherit; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
button:hover { border-color: #999; }
button:disabled { opacity: .4; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
button.publish { background: var(--publish); border-color: var(--publish); color: #fff; font-weight: 700; letter-spacing: .04em; padding: 5px 14px; box-shadow: 0 1px 3px rgba(21,101,192,.35); }
button.publish:hover { background: var(--publish-dark); border-color: var(--publish-dark); }
button.danger { color: var(--danger); }
button.mode { border-radius: 0; }
button.mode.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.modes { display: inline-flex; }
.modes button:first-child { border-radius: 6px 0 0 6px; }
.modes button:last-child { border-radius: 0 6px 6px 0; }
input, select { font: inherit; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); }
.grow { flex: 1; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { color: var(--danger); min-height: 1.2em; font-size: 12px; }
.sep { display: inline-block; width: 1px; height: 22px; background: var(--line); margin: 0 4px; vertical-align: middle; }
.only-mobile { display: none; }

/* the top bar, the tabs and the sub-bars are shell.css */
.status { font-size: 12px; color: var(--muted); min-width: 60px; text-align: right; }
.status.dirty { color: var(--warn); }
.status.error { color: var(--danger); font-weight: 600; }

#layoutTools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 5px 10px; background: #fff8e6; border-bottom: 1px solid #f0dca0; font-size: 13px; }
#layoutTools .hint { color: var(--muted); margin-right: 6px; }
#syncBar { position: fixed; top: 6px; left: 50%; translate: -50% 0; z-index: 40; width: min(92vw, 640px); background: #c62828; color: #fff; padding: 6px 12px; font-size: 13px; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.3); transition: opacity .2s ease-out, translate .2s ease-out; }
@starting-style { #syncBar:not([hidden]) { opacity: 0; translate: -50% -12px; } }   /* it drops in; going away is instant */
#syncBar.conflict { background: #6a1b9a; }
#syncBar.offline-only { background: #ef6c00; }
#syncBar.notice { background: var(--accent); }   /* nothing is wrong: a good moment to refresh */
/* nothing can be saved at all (an old page, or a save the server refused): the loudest thing on
   screen — wider, taller, spelled out, and it says what to do about it */
#syncBar.fatal { width: min(96vw, 880px); padding: 12px 18px; font-size: 15px; border: 2px solid rgba(255,255,255,.55); box-shadow: 0 10px 40px rgba(0,0,0,.45); }
#syncBar.fatal #syncTitle { font-size: 19px; letter-spacing: .5px; display: block; }
#syncBar.fatal .sync-head { flex-wrap: wrap; row-gap: 4px; }
#syncBar.fatal .sync-sub { flex-basis: 100%; font-size: 14px; line-height: 1.35; }
#syncBar.fatal button { font-size: 14px; padding: 5px 12px; font-weight: 600; }
#syncBar.fatal #syncReload { background: #fff; color: #4a148c; border-color: #fff; }
.sync-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#syncTitle { font-weight: 800; font-size: 14px; letter-spacing: .3px; }
.sync-sub { opacity: .95; }
#syncBar button { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.5); padding: 2px 8px; font-size: 12px; }
#syncBar button.danger { color: #fff; background: rgba(0,0,0,.25); }
#syncList { margin: 6px 0 0; padding: 0 0 0 18px; max-height: 30vh; overflow: auto; font-size: 12px; column-width: 260px; }
#syncList li { margin: 1px 0; }
#placingBar { display: flex; gap: 10px; align-items: center; padding: 6px 10px; background: #e6f2ff; border-bottom: 1px solid #b7d3f0; font-size: 13px; }

main { flex: 1; display: flex; min-height: 0; }
#canvasWrap { flex: 1; overflow: auto; padding: 8px; }
#chart { width: 100%; height: auto; max-height: calc(100vh - 70px); display: block; background: #fff; border: 1px solid var(--line); touch-action: none; font-family: var(--font); }

/* ---- families panel ---- */
#panel { width: 400px; border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; padding: 8px; gap: 6px; }
.panel-head { display: flex; align-items: center; gap: 8px; }
.filters { display: flex; gap: 8px; font-size: 12px; flex-wrap: wrap; }
.filters label { display: inline-flex; gap: 3px; align-items: center; }
.legend { line-height: 1.2; }
#rosterList { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; border: 1px solid var(--line); border-radius: 6px; user-select: none; -webkit-user-select: none; }
#rosterList li { padding: 2px 4px; border-bottom: 1px solid #eee; }
#rosterList li.pending { background: var(--pending-soft); }
#rosterList li.locked { background: #dcefd9; }
#rosterList li.locked-short.short-men { background: var(--short-men-soft); }
#rosterList li.locked-short.short-women { background: var(--short-women-soft); }
#rosterList li.locked-short.short-both { background: var(--short-both-soft); }
#rosterList li.hl { background: #fff1d6; }
#rosterList li.dragging { opacity: .5; }
.fam-top { display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.fam-top .drag { cursor: grab; color: #aaa; touch-action: none; padding: 0 3px; font-size: 15px; }
.fam-top .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; cursor: pointer; }
.fam-top button { padding: 1px 5px; font-size: 12px; line-height: 1.4; }
.fam-top .grp { display: inline-flex; align-items: center; gap: 1px; font-size: 12px; margin-left: 3px; border-radius: 5px; padding: 0 2px; }
.fam-top .grp.men { background: #e3edf8; }
.fam-top .grp.women { background: #fbe4ec; }
.fam-top .grp .n { font-weight: 600; color: var(--ink); min-width: 2.4em; text-align: center; }
.fam-top .grp button { background: transparent; border-color: transparent; padding: 0 4px; font-size: 12px; }
.fam-top .grp button:hover { border-color: #999; background: #fff; }
.fam-top .assignbtn, li.member .assignbtn { padding: 0 5px; }
.legend .lg { display: inline-block; padding: 0 5px; border-radius: 4px; }
.legend .lg.men { background: #e3edf8; }
.legend .lg.women { background: #fbe4ec; }
.legend .lg.pending { background: var(--pending); }
.legend .lg.short-men { background: var(--short-men); }
.legend .lg.short-women { background: var(--short-women); }
.legend .lg.short-both { background: var(--short-both); }
li.member .mn.men { border-left: 3px solid #9cbbe0; padding-left: 5px; }
li.member .mn.women { border-left: 3px solid #eaa7c0; padding-left: 5px; }
.toggle-btn.active { background: #e3edf8; border-color: var(--accent); }
.fam-top .grp .n.short { color: var(--warn); }
.fam-top .grp .n.over { color: var(--danger); }
.fam-top .grp button.overbtn { color: var(--danger); font-weight: 700; padding: 0 3px; }
.fam-top .grp button.overbtn:hover { border-color: var(--danger); }
.fam-top .grp .n.ok { color: var(--ok); }
.fam-top .x, .member .x { border: 0; padding: 0 4px; color: var(--muted); background: none; }
.fam-top .caret { border: 0; background: none; padding: 0 2px; color: #888; font-size: 12px; width: 16px; }
ul.members { list-style: none; margin: 4px 0 2px 20px; padding: 0 0 0 6px; border-left: 2px solid #e4e4de; }
li.member { display: flex; align-items: center; gap: 4px; padding: 2px 0; font-size: 13px; }
li.member .mn { flex: 1; cursor: pointer; }
li.member .drag { cursor: grab; color: #bbb; touch-action: none; padding: 0 3px; }
li.member button { padding: 1px 6px; font-size: 12px; }
li.member-add { display: flex; gap: 3px; padding: 3px 0; }
li.member-add input { flex: 1; min-width: 0; padding: 2px 6px; font-size: 13px; }
li.member-add select { padding: 2px 4px; font-size: 12px; }
li.member-add button { padding: 1px 6px; font-size: 12px; }
.fam-top .x:hover { color: var(--danger); }
.lockbtn.on { background: #dff0df; border-color: #9c9; }
.add-fam { width: 100%; margin-top: 4px; }
.fam-top .delbtn.off { color: #cfcfcf; cursor: not-allowed; }
/* a row confirmed at 0 seats counts down, then leaves the list: the text says how long, a bar drains under it */
#rosterList li.hiding { background: linear-gradient(#ffd54f, #ffd54f) 0 0 / 100% 100% no-repeat #fff1a8; outline: 2px solid #e0a800; outline-offset: -2px; animation: hide-cd var(--hide-ms, 5s) linear var(--hide-elapsed, 0s) forwards; }
@keyframes hide-cd { to { background-size: 0 100%; } }
.fam-top .hide-cd { font-size: 11px; font-weight: 700; color: #6b4a00; white-space: nowrap; }
#rosterList li.hidden-note { border: 0; padding: 6px 4px; }
/* the family's requests / note under its row (📝 toggles) */
.fam-note { font-size: 12px; color: #6b4a00; padding: 0 4px 2px 42px; white-space: pre-wrap; line-height: 1.3; }
#panel:not(.show-notes) .fam-note { display: none; }
.detail-wrap .rename { font-size: 12px; padding: 1px 6px; margin-left: 6px; vertical-align: middle; }
.fam-top .delbtn.off:hover { color: #cfcfcf; }
/* the hazard box: names on the chart that are not in the roster, with link / add buttons */
.hz { background: #fff1a8; border: 2px solid #e0a800; border-radius: 8px; padding: 6px 8px; margin: 6px 0; font-size: 13px; color: #3d2a00; }
.hz-head { font-weight: 700; color: #6b4a00; margin-bottom: 2px; }
.hz-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 5px 0; border-top: 1px solid #f0d060; }
.hz-row .hz-name b { font-size: 14px; }
.hz-row .hz-name.lines { font-size: 12.5px; line-height: 1.35; }
.hz-row .hz-name.lines b { font-size: 12.5px; }
dialog p.lines { line-height: 1.45; }
.hz-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.hz-btns.hz-wrap { flex-direction: row; flex-wrap: wrap; }
.hz-btns.hz-wrap button { flex: 0 1 auto; text-align: left; }
.hz button b.num { display: inline-block; min-width: 1.1em; margin-right: 4px; color: #6b4a00; }
/* a family's tag (ours only): a small badge after the name */
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; line-height: 1.3; padding: 0 5px; border-radius: 8px; background: #ffe9a8; border: 1px solid #d9b34a; color: #5a4000; margin-left: 4px; vertical-align: 1px; }
/* the tag sits with the name: a badge, and while the row is open ✎ to change it and ✕ to clear it */
.tag-edit { font-size: 11px; line-height: 1.4; padding: 0 5px; margin-left: 4px; white-space: nowrap; border-radius: 8px; border: 1px dashed #d9b34a; background: #fffaf0; color: #7a5c00; vertical-align: 1px; }
.tag-edit:hover { background: #ffe9a8; border-style: solid; }
.tag-edit.tag-clear { color: #9a3c55; border-color: #d9a0b0; }
.tag-edit.tag-clear:hover { background: #ffdde5; border-color: #9a3c55; }
/* the Assignments panel: the tag gets its own line in the opened row (the top row has no space) */
.fam-tag { display: flex; align-items: center; gap: 2px; padding: 2px 6px 2px 22px; font-size: 12px; }
.fam-tag .lbl { color: var(--muted); font-weight: 600; }
.fam-tag .why { margin-left: 6px; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-tag .tag-edit { font-size: 11px; line-height: 1.4; padding: 0 5px; }
.fam-note { cursor: text; }
.fam-note textarea.note-edit { width: 100%; box-sizing: border-box; font-size: 12px; padding: 3px 5px; margin: 2px 0; }
.hz button { font-size: 12px; padding: 2px 8px; background: #fff; border-color: #c48a00; }
.sp-hz { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.room-genders { display: inline-flex; gap: 8px; align-items: center; }
.room-genders .rg select { padding: 1px 4px; }

#dragGhost { position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none; padding: 4px 10px; background: #fff7dc; border: 1px solid var(--select); border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.2); font-weight: 600; transform: translate(-50%, -140%); will-change: translate; white-space: nowrap; }   /* assign.js sets `translate` to the pointer */

/* ---- SVG ---- */
.room-main rect.floor { fill: #fdfdfb; }
.room-side rect.floor { fill: #fbf6f8; }
.room-faint rect.floor { fill: #f5f5f2; }
.room-faint { opacity: .7; }
.wall { stroke: var(--wall); stroke-width: 6; fill: none; stroke-linecap: square; }
.gap { stroke: #fff; stroke-width: 7; }
.door-leaf { stroke: var(--wall); stroke-width: 1.2; fill: none; }
.door-arc { stroke: #777; stroke-width: .8; fill: none; stroke-dasharray: 2 2; }
.window { stroke: #d9d9d9; stroke-width: 1; }
.window-band { stroke: #6a6a6a; stroke-width: 6; stroke-linecap: butt; }
.opening { stroke: #e8e8e8; stroke-width: 1.2; stroke-dasharray: 4 3; }
.opening-band { stroke: #7a7a7a; stroke-width: 6; stroke-linecap: butt; }
.bay { stroke: var(--wall); stroke-width: 6; fill: #fdfdfb; }
.room-name { font-size: 9px; fill: #8a8a84; pointer-events: none; }
/* the publish sheet: the room's name is a heading, and when it had nowhere free to go it is drawn
   bolder still, with a white halo, straight over the plan */
.publish .room-name { font-size: 11px; font-weight: 600; fill: #4a4a45; paint-order: stroke; stroke: #fff; stroke-width: 2.4; }
.publish .room-name.over { font-size: 12px; font-weight: 800; fill: #111; stroke-width: 3.6; }

.fixture rect { fill: var(--fixture); stroke: var(--table-line); stroke-width: 1; }
.fixture.aron rect { fill: #e2d9c3; stroke-width: 1.5; }
.fixture.bimah rect { fill: #e8e2cf; stroke-width: 1.5; }
.fixture.label rect { fill: none; stroke: none; }
.fixture text { font-size: 9px; text-anchor: middle; dominant-baseline: middle; pointer-events: none; }
.fixture.aron text, .fixture.bimah text { font-size: 11px; font-weight: 600; }
.fixture.label text { font-size: 12px; fill: #777; }

.table rect.top { fill: var(--table); stroke: var(--table-line); stroke-width: 1.2; }
.table.men rect.top { fill: var(--men); }
.table.women rect.top { fill: var(--women); }
.seat rect { fill: transparent; stroke: var(--table-line); stroke-width: .7; transition: fill .12s; }
.seat.filled rect { fill: #fff; }
.seat text { text-anchor: middle; dominant-baseline: middle; pointer-events: none; fill: #111; }
.seat text.first { fill: #333; }
.seat.hl rect { fill: #ffe2a8; }
.seat.drop rect { fill: #cfe7ff; stroke: var(--accent); stroke-width: 1.6; }
.seat.drag-src rect { fill: #eee; }
.mode-seat .seat { cursor: pointer; }
.mode-seat.placing .seat { cursor: copy; }
.mode-seat .seat.filled { cursor: grab; }
@media (hover: hover) { .mode-seat .seat:hover rect { fill: #fff6dc; } .mode-seat .seat.unknown:hover rect { fill: #ffe45c; } }   /* not under a finger: a tapped seat would stay lit */
.mode-layout .draggable { cursor: grab; }
.mode-layout .draggable.selected > rect:first-of-type, .mode-layout .draggable.selected rect.top { stroke: var(--select); stroke-width: 2; }
.table-label { font-size: 5px; fill: #888; text-anchor: middle; pointer-events: none; }
/* a name on the chart that matches nobody in the roster: hazard yellow until it is linked or added */
.seat.unknown rect, .table.chairs .seat.unknown rect, .table.shtender .seat.unknown rect { fill: #ffd60a; stroke: #b26a00; stroke-width: 1.6; animation: hz-pulse 1.1s ease-in-out infinite alternate; }
@keyframes hz-pulse { from { fill: #ffd60a; } to { fill: #ffa800; } }
/* the room's gender shows on its floor: a ladies' room is faintly pink */
.room.g-women rect.floor { fill: #fbf2f6; }
.dim line { stroke: #7a7a74; stroke-width: .8; }
.dim text { font-size: 7px; fill: #55554f; }
.gapline line { stroke: #c0392b; stroke-width: .8; stroke-dasharray: 3 2; }
.gapline text { font-size: 6px; fill: #c0392b; font-weight: 600; paint-order: stroke; stroke: #fff; stroke-width: 2; }
.gapline.wall line { stroke: #2f5d8a; }
.gapline.wall text { fill: #2f5d8a; }
.scalebar line { stroke: #999; stroke-width: 1; }
.scalebar text { font-size: 7px; fill: #999; }

/* ---- dialogs ---- */
dialog { border: 1px solid var(--line); border-radius: 10px; padding: 16px; width: min(92vw, 420px); box-shadow: 0 10px 40px rgba(0,0,0,.2); }
dialog h3 { margin: 0 0 10px; }
dialog input { width: 100%; margin-bottom: 8px; font-size: 16px; }
dialog .actions { display: flex; gap: 6px; align-items: center; margin-top: 6px; }
dialog .actions.wrap { flex-wrap: wrap; }
/* a dialog rises in and fades out (its backdrop with it); a browser without @starting-style just pops it, as before */
dialog { opacity: 1; translate: 0 0; scale: 1; transition: opacity .16s ease-out, translate .16s ease-out, scale .16s ease-out, overlay .16s allow-discrete, display .16s allow-discrete; }
dialog:not([open]) { opacity: 0; translate: 0 8px; scale: .98; }
@starting-style { dialog[open] { opacity: 0; translate: 0 8px; scale: .98; } }
dialog::backdrop { background: rgba(0,0,0,0); transition: background-color .16s ease-out, overlay .16s allow-discrete, display .16s allow-discrete; }
dialog[open]::backdrop { background: rgba(0,0,0,.3); }
@starting-style { dialog[open]::backdrop { background: rgba(0,0,0,0); } }
/* history: a big, readable popup with who saved */
#historyDlg { width: min(96vw, 1000px); }
#historyList { list-style: none; padding: 0; margin: 0 0 8px; max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
#historyList li { padding: 6px 10px; border-bottom: 1px solid #eee; display: flex; gap: 10px; align-items: center; cursor: pointer; }
#historyList li .ts { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
#historyList li .ver { color: var(--muted); min-width: 3.2em; }
#historyList li .ip { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: #1f4e83; min-width: 9em; }
#historyList li .note { white-space: normal; }

/* ---- mobile ---- */
@media (max-width: 900px) {
  .only-mobile { display: inline-block; }
  #panel { position: fixed; right: 0; top: 0; bottom: 0; width: min(96vw, 400px); transform: translateX(100%); transition: transform .22s ease-out; z-index: 5; box-shadow: -6px 0 20px rgba(0,0,0,.15); }
  #panel.open { transform: none; }
  #chart { max-height: none; }
}

/* ---- print ---- */
.print-only { display: none; }
@media print {
  @page { size: letter landscape; margin: 0.35in; }
  body { background: #fff; display: block; }
  #topbar, #seatBar, #layoutTools, #placingBar, #syncBar, #panel, dialog, #dragGhost, #tabbar { display: none !important; }
  main { display: block; }
  #canvasWrap { padding: 0; overflow: visible; }
  .print-only { display: block; }
  #printTitle { font-size: 18px; font-weight: 700; text-align: center; margin: 0 0 4px; }
  #chart { border: 0; width: 100%; height: auto; max-height: 7.3in; }
  .mode-seat .seat:hover rect { fill: transparent; }
}

/* ---- publish: the finished seating sheet on one 8½ × 11 page ---- */
#publishOverlay { position: fixed; inset: 0; z-index: 40; background: #4a4a48; display: flex; flex-direction: column; }
.pub-bar { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--panel); border-bottom: 1px solid var(--line); }
.pub-font select { max-width: 13em; padding: 3px 6px; }
.pub-logo-size input[type=range] { width: 96px; padding: 0; vertical-align: middle; }
.pub-logo-size span { min-width: 3.2em; display: inline-block; text-align: right; }
.pub-scroll { flex: 1; overflow: auto; padding: 18px; display: flex; justify-content: center; align-items: flex-start; }
.pub-sheet { position: relative; width: 8.5in; height: 11in; flex: none; background: #fff; box-shadow: 0 6px 26px rgba(0,0,0,.45); padding: .3in .32in; display: flex; flex-direction: column; }
#publishOverlay.landscape .pub-sheet { width: 11in; height: 8.5in; }
/* one line, everything on it, as little of the page as it can take — the plan gets the rest */
.pub-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1.4px solid #222; padding-bottom: 4px; margin-bottom: 5px; }
.pub-head h1 { margin: 0; font-size: 19pt; line-height: 1.1; white-space: nowrap; }
#pubSub { font-size: 11.5pt; color: #444; white-space: nowrap; }
/* the logo sits in the top-right corner on its own, out of the header's flow: it can grow, and
   hang over the rule and the plan, without ever changing the one-line header */
.pub-logo { position: absolute; top: .16in; right: .24in; height: 78pt; width: auto; z-index: 2; }
.pub-chart { flex: 1; min-height: 0; position: relative; }
#pubChart { position: absolute; inset: 0; width: 100%; height: 100%; }

@media print {
  body.publishing > *:not(#publishOverlay) { display: none !important; }
  body.publishing, body.publishing #publishOverlay, body.publishing .pub-scroll { height: 100%; }
  body.publishing #publishOverlay { position: static; display: block; background: none; }
  body.publishing .pub-bar { display: none !important; }
  body.publishing .pub-scroll { overflow: visible; padding: 0; display: block; }
  body.publishing .pub-sheet { width: 100%; height: 100%; box-shadow: none; padding: .3in; }
}

/* ---- sections, todos, picker, toast ---- */
main > section { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#secChart { min-height: 0; }
.fam-top .nm .first { font-weight: 400; color: #333; }
#secTodos h2 { margin: 0; font-size: 20px; }
.roster-head { padding: 0; margin-bottom: 8px; }
.roster-add { display: flex; gap: 6px; margin-bottom: 8px; }
.table-wrap { overflow: auto; }
#secTodos { padding: 10px 14px; overflow: auto; max-width: 900px; }
#todoAdd { display: flex; gap: 6px; margin: 8px 0; }
#todoAdd input { flex: 1; }
ul.todos { list-style: none; padding: 0; margin: 0; }
ul.todos li { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eee; }
ul.todos li .txt { flex: 1; }
ul.todos li.done .txt { text-decoration: line-through; color: var(--muted); }
ul.todos .x { border: 0; background: none; color: var(--muted); padding: 0 4px; }
#uiDlg { width: min(92vw, 440px); }
#uiDlg.wide { width: min(96vw, 720px); }
#uiDlg label { display: block; font-size: 13px; color: var(--muted); }
#uiDlg label input { margin-top: 4px; }
.picklist { list-style: none; margin: 0 0 6px; padding: 0; max-height: 40vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; }
.picklist li { padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #f0f0ec; }
.picklist li.cur { background: #eef3f9; }
.picklist li:hover { background: #f5f7fa; }
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; background: #222; color: #fff; padding: 8px 16px; border-radius: 8px; opacity: 0; transition: opacity .2s ease-out, translate .2s ease-out, background-color .2s; z-index: 60; pointer-events: none; font-size: 14px; }
.toast.show { opacity: 1; translate: -50% 0; }
.toast.warn { background: #b26a00; }
.toast.ok { background: var(--ok); }
.feat-label { font-size: 5px; fill: #5a7aa0; }

/* ---- Seating › Needs (the roster table / cards) ---- */
#secNeeds { display: flex; flex-direction: column; min-height: 0; padding: 10px 14px; overflow: auto; }
.roster-wrap { flex: 1; min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.roster-syncinfo { margin: -4px 0 6px; line-height: 1.3; }
.roster-hint { align-self: center; margin-left: 6px; }
.roster-add input { min-width: 0; }
table.roster { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; }
table.roster th, table.roster td { border-bottom: 1px solid #e8e8e3; padding: 2px 5px; text-align: left; white-space: nowrap; vertical-align: middle; }
table.roster thead th { position: sticky; top: 0; z-index: 2; background: #f4f4f1; font-weight: 600; text-align: center; }
table.roster thead tr.grp th { top: 0; font-size: 12px; letter-spacing: .3px; border-bottom: 0; padding-top: 4px; }
table.roster thead tr:nth-child(2) th { top: 24px; font-weight: 500; font-size: 11px; color: var(--muted); }
table.roster thead th.men { background: #dfeaf6; color: #274a70; }
table.roster thead th.women { background: #f7dfe7; color: #7a2f4a; }
table.roster th.men, table.roster td.men { background: #eef4fb; }
table.roster th.women, table.roster td.women { background: #fcf0f4; }
table.roster td.car { width: 22px; padding: 0 2px; text-align: center; }
table.roster .caret { border: 0; background: none; padding: 0 4px; color: #888; font-size: 13px; line-height: 1.6; }
table.roster td.fam { position: sticky; left: 0; z-index: 1; background: #fff; font-size: 14px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
table.roster td.fam b { font-weight: 700; }
table.roster td.fam .first { font-weight: 400; color: #333; }
table.roster td.fam .mem { margin-left: 2px; }
table.roster td.need-cell { text-align: center; width: 4.6em; }
table.roster input.need { width: 3em; min-width: 3em; text-align: center; padding: 2px 3px; font-size: 13px; }
table.roster input.need:disabled { background: transparent; border-color: transparent; color: var(--ink); font-weight: 600; opacity: 1; }
table.roster .placed { display: inline-block; min-width: 1.3em; margin-left: 2px; font-size: 11px; color: var(--muted); }
table.roster .placed.ok { color: var(--ok); font-weight: 600; }
table.roster .placed.short { color: var(--warn); font-weight: 600; }
table.roster td.lk { text-align: center; width: 4.6em; padding: 1px 3px; }
table.roster td.lk .lockbtn { padding: 1px 6px; font-size: 11px; margin: 0; color: var(--muted); }
table.roster td.lk .lockbtn.on { color: var(--ok); font-weight: 700; font-size: 13px; background: transparent; border-color: transparent; }
table.roster tr.row-pending > td { background: var(--pending-soft); }
table.roster tr.row-ok > td { background: #e4f3e2; }
table.roster tr.row-ok > td.men { background: #dbeee0; }
table.roster tr.row-ok > td.women { background: #e9eedd; }
table.roster tr.row-short.short-men > td { background: var(--short-men-soft); }
table.roster tr.row-short.short-women > td { background: var(--short-women-soft); }
table.roster tr.row-short.short-both > td { background: var(--short-both-soft); }
table.roster tr.row-short.short-both > td.men { background: var(--short-men-soft); }
table.roster tr.row-short.short-both > td.women { background: var(--short-women-soft); }
table.roster tr.open > td { border-bottom: 0; }
/* a family row is ONE line, always: every cell clips to the height of one input; only tr.detail may grow */
table.roster tbody tr[data-fid]:not(.detail) > td { height: 27px; max-height: 27px; padding-top: 1px; padding-bottom: 1px; overflow: hidden; line-height: 22px; }
table.roster tbody tr[data-fid]:not(.detail) > td > * { vertical-align: middle; }
table.roster td input, table.roster td .lockbtn, table.roster td .caret, table.roster td.del .x { height: 22px; line-height: 18px; box-sizing: border-box; }
table.roster td input:not(.need) { width: 100%; min-width: 0; padding: 2px 5px; font-size: 12.5px; border-color: transparent; background: transparent; }
table.roster td input:not(.need):hover, table.roster td input:not(.need):focus { border-color: var(--line); background: #fff; }
table.roster td.paid input { width: 8em; }
table.roster td.req input { width: 16em; }
table.roster td.addr input { width: 15em; }
table.roster td.cell input { width: 9em; }
table.roster td.email input { width: 14em; }
table.roster td.del { width: 44px; padding: 0 2px; white-space: nowrap; }
table.roster td.del .x, table.roster .chip .x { border: 0; background: none; color: var(--muted); padding: 0 3px; }
table.roster td.del .x:hover, table.roster .chip .x:hover { color: var(--danger); }
.picklist.dups li { display: block; padding: 6px 8px; border-bottom: 1px solid var(--line); cursor: default; }
.picklist.dups li:hover { background: none; }
.dup-names .arrow { color: var(--muted); margin: 0 4px; }
.dup-plan { margin: 2px 0 4px; }
.dup-btns { display: flex; gap: 6px; }
#rosterDups.has { border-color: var(--danger); color: var(--danger); font-weight: 600; }
table.roster td.del .mg, .fc-top .mg { border: 0; background: none; color: var(--muted); padding: 0 3px; }
table.roster td.del .mg:hover, .fc-top .mg:hover { color: var(--ink); }
/* ---- the seg switch, and Families › Hebrew names: one line per person — the English name, the
   Hebrew name as it is called up, where it came from; click a line to edit it in place ---- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; background: #fff; padding: 3px 10px; font-size: 13px; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: #2b5797; color: #fff; font-weight: 600; }
.names-wrap { padding-bottom: 12px; }
table.names { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
table.names th, table.names td { border-bottom: 1px solid #ecece7; padding: 3px 8px; text-align: left; vertical-align: middle; }
table.names thead th { position: sticky; top: 0; z-index: 2; background: #f4f4f1; font-weight: 600; font-size: 12px; color: var(--muted); }
table.names thead th .muted { font-weight: 400; }
table.names thead th.he { text-align: right; }
table.names tr.person { cursor: pointer; }
table.names tr.person:hover > td, table.names tr.person:focus-visible > td { background: #f7f7f4; }
table.names tr.person:focus-visible { outline: none; }
table.names tr.person > td { height: 30px; }
table.names tr.husband > td { border-top: 1px solid #e0e0da; }                /* a family starts here */
table.names tbody > tr:first-child > td { border-top: 0; }
table.names td.en { white-space: nowrap; width: 1%; min-width: 12em; }
table.names tr.member td.en { padding-left: 28px; }
table.names tr.women td.en { color: #7a2f4a; }
table.names td.he { width: 22em; font-size: 16px; text-align: right; direction: rtl; white-space: nowrap; }
table.names td.src { color: var(--muted); font-size: 12px; white-space: normal; }
table.names td.src .note { display: inline-block; max-width: 36em; vertical-align: middle; }
table.names tr.todo > td { background: #fff8e1; }
.ocr { width: 300px; height: 44px; object-fit: contain; object-position: right; vertical-align: middle; border: 1px solid #d9d9d3; border-radius: 4px; background: #fff; position: relative; transition: transform .12s; }
.ocr:hover { transform: scale(2.4); transform-origin: right center; z-index: 5; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
table.names tr.srcrow { display: none; }                    /* phones: the cut-out and ✓ on a line of their own, under the person */
.okbtn { margin-left: 6px; vertical-align: middle; padding: 4px 12px; font-size: 16px; font-weight: 700; color: #fff; background: var(--ok); border-color: var(--ok); }
.okbtn:hover { filter: brightness(.92); }
.ocr-box { display: inline-flex; flex-direction: column; align-items: flex-end; vertical-align: middle; gap: 2px; }
.ocr-read { width: 300px; font-size: 14px; text-align: right; line-height: 1.2; }
/* the line open for editing: the name typed in one go, the tribe, Done; the card; ✕, ＋, the family page */
table.names tr.edit { cursor: default; }
table.names tr.edit > td { background: #eef3f9; vertical-align: top; padding-top: 6px; padding-bottom: 8px; }
table.names tr.edit td.en { padding-top: 11px; }
table.names tr.edit td.he { width: auto; font-size: 14px; text-align: left; direction: ltr; white-space: normal; }
.he-who { display: none; }
.he-edit { display: flex; align-items: center; gap: 6px; }
.he-edit input { flex: 1 1 14em; min-width: 8em; max-width: 24em; font-size: 16px; text-align: right; direction: rtl; padding: 4px 8px; }
.he-edit select { font-size: 13px; padding: 3px 4px; }
.he-src { margin-top: 6px; }
.he-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 7px; font-size: 12px; }
.he-acts button { font-size: 12px; padding: 2px 8px; }
.he-acts .x { border: 0; background: none; color: var(--muted); padding: 0; }
.he-acts .x:hover { color: var(--danger); }
.add-person { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 7px; }
.add-person input, .add-person select { padding: 3px 6px; font-size: 13px; }
.add-person input[data-a="n"] { width: 10em; }
.add-person input[dir="rtl"] { width: 12em; font-size: 15px; text-align: right; }
.add-person .add { font-size: 12px; padding: 2px 8px; }
.todo-n { color: #8a5a00; }
/* under the list, each a fold: the readings to settle, the names not in the roster */
details.names-sec { margin: 12px 8px 0; }
details.names-sec > summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0 6px; }
details.names-sec > summary .muted { font-weight: 400; }
.pend-grp { margin: 0 0 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pend-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.pend-top button { font-size: 12px; padding: 2px 8px; }
.pend-top .x { border: 0; background: none; color: var(--muted); }
.pend-top .x:hover { color: var(--danger); }
.pend-p { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0 2px 12px; font-size: 13px; }
.pend-p .who { min-width: 8em; }
.unsure { margin: 0 0 8px; padding: 6px 8px; border: 1px solid #e8c862; border-radius: 8px; background: #fff8e1; }
.unsure .alts { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.unsure .alts button { font-size: 15px; padding: 4px 10px; background: #fff; }
.unsure .alts button.cur { border-color: #2b5797; }
.unsure .alts button:hover { background: #eef3f9; }
.pend-p .hebtxt { font-size: 15px; min-width: 14em; text-align: right; }
@media (max-width: 700px) {
  /* each line a flex row: the English name left, the Hebrew name right — on the same line when it
     fits (most do), else on a line of its own under it, never squeezed into a narrow column */
  table.names, table.names tbody { display: block; }
  table.names thead, table.names td.src { display: none; }
  table.names tr.person { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px; padding: 5px 8px; min-height: 38px; box-sizing: border-box; border-bottom: 1px solid #ecece7; }
  table.names tr.person > td { display: block; border: 0; padding: 0; height: auto; white-space: normal; width: auto; min-width: 0; }
  table.names tr.person > td.src { display: none; }           /* the card is in the open line */
  table.names tr.husband { border-top: 1px solid #e0e0da; }
  table.names tbody > tr:first-child { border-top: 0; }
  table.names tr.member { padding-left: 24px; }
  table.names td.en { flex: 0 1 auto; }
  table.names td.he { flex: 1 1 auto; }
  table.names tr.srcrow { display: block; padding: 0 8px 6px 24px; border-bottom: 1px solid #ecece7; }
  table.names tr.srcrow > td { display: block; border: 0; padding: 0; }
  table.names tr.person:has(+ tr.srcrow) { border-bottom: 0; }
  .ocr, .ocr-read { width: 220px; }
  /* the open line: the name on top, the editor under it at full width */
  table.names tr.edit { display: block; padding: 8px; }
  table.names tr.edit td.en { display: none; }
  table.names tr.edit td.he { display: block; text-align: left; }
  .he-who { display: block; font-size: 15px; margin-bottom: 6px; }
  .he-edit { flex-wrap: wrap; }
  .he-edit input { flex: 1 1 100%; max-width: none; min-height: 38px; }
  .he-edit select, .he-edit button, .he-acts button { min-height: 36px; }
  .add-person input, .add-person select { min-height: 36px; font-size: 16px; }
  .add-person input[data-a="n"], .add-person input[dir="rtl"] { width: 100%; }
  details.names-sec { margin: 8px 0 0; }
}
table.roster tr.detail > td { background: #fafaf7; padding: 6px 8px 8px 30px; white-space: normal; }
.fe-names { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.fe-names label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); flex: 1; min-width: 9em; }
.fe-names input { font-size: 14px; color: var(--ink); }
#uiDlg .detail-wrap { margin-top: 4px; }
.detail-wrap { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.detail-wrap .box { border-radius: 8px; padding: 6px 8px; min-width: 220px; flex: 1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.detail-wrap .box.men { background: #e3edf8; border: 1px solid #b9cfe8; }
.detail-wrap .box.women { background: #fbe4ec; border: 1px solid #ecbfd0; }
.detail-wrap .box.note { background: #fff; border: 1px solid var(--line); flex: 2; }
.detail-wrap .box-h { width: 100%; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.detail-wrap .box textarea { width: 100%; font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; resize: vertical; }
.detail-wrap .chip { display: inline-flex; align-items: center; gap: 2px; padding: 1px 4px 1px 8px; border-radius: 12px; background: #fff; border: 1px solid #c9d7e8; font-size: 13px; }
.detail-wrap .chip.women { border-color: #e8bccb; }
.detail-wrap .chip.husband { font-weight: 600; }
.detail-wrap .chip .x { font-size: 11px; border: 0; background: none; color: var(--muted); padding: 0 3px; }
.detail-wrap .chip .x:hover { color: var(--danger); }
.detail-wrap .box input { width: 11em; min-width: 8em; padding: 2px 6px; font-size: 12.5px; background: rgba(255,255,255,.7); }
.detail-wrap .box.women input { border-color: #e8bccb; }
.detail-wrap .box.men input { border-color: #c9d7e8; }
#uiDlg .conflicts { max-height: 55vh; overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin-bottom: 8px; }
#uiDlg .conflicts table { border-collapse: collapse; width: 100%; font-size: 13px; }
#uiDlg .conflicts th, #uiDlg .conflicts td { padding: 4px 8px; border-bottom: 1px solid #eee; text-align: left; vertical-align: top; }
#uiDlg .conflicts th { background: #f4f4f1; position: sticky; top: 0; }
#uiDlg .conflicts td.sv { background: #eef7ee; }
#uiDlg .conflicts td.av { background: #fff7e6; }
#uiDlg .conflicts select { width: auto; margin: 0; font-size: 13px; padding: 2px 4px; }
#rosterBody { flex: 1; min-height: 0; display: flex; flex-direction: column; }
@media (max-width: 900px) {
  #secNeeds { padding: 6px 6px; }
  .roster-head { gap: 6px; }
  .roster-head h2 { font-size: 17px; }
  #rosterQ { flex: 1; min-width: 120px; }
  .roster-hint { display: none; }
  table.roster td.fam { max-width: 140px; font-size: 13px; }
  table.roster td.req input { width: 11em; }
  table.roster td.addr input { width: 10em; }
  .detail-wrap .box { min-width: 0; width: 100%; }
}
/* phone: cards instead of a sideways-scrolling table; search + sync stay at the top; 36px tap targets */
@media (max-width: 700px) {
  .roster-head { position: sticky; top: 0; z-index: 3; background: var(--bg); padding: 4px 0; margin: 0; }
  .roster-head #rosterSummary { display: none; }
  .roster-head #sheetSync, .roster-head #rosterQ { min-height: 38px; }
  .roster-syncinfo { max-height: 3.6em; overflow: auto; margin: 4px 0; }
  .roster-add { flex-wrap: wrap; }
  .roster-add input { flex: 1; min-width: 40%; min-height: 38px; }
  .roster-add button { min-height: 38px; }
  .roster-cards { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; }
  .fcard { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 6px 8px; display: flex; flex-direction: column; gap: 5px; }
  .fcard.row-ok { background: #e4f3e2; border-color: #b5d9b0; }
  .fcard.row-pending { background: var(--pending-soft); border-color: #ead9a0; }
  .fcard.row-short.short-men { background: var(--short-men-soft); border-color: #9cbbe0; }
  .fcard.row-short.short-women { background: var(--short-women-soft); border-color: #eaa7c0; }
  .fcard.row-short.short-both { background: var(--short-both-soft); border-color: #c0a8c8; }
  .fc-top { display: flex; align-items: center; gap: 4px; }
  .fc-top .caret { min-width: 36px; min-height: 36px; font-size: 16px; }
  .fc-top .x { min-width: 36px; min-height: 36px; border: 0; background: none; color: var(--muted); font-size: 15px; }
  .fc-name { flex: 1; font-size: 16px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fc-line { display: flex; gap: 6px; }
  .fc-line input { flex: 1; min-width: 0; min-height: 36px; font-size: 15px; padding: 4px 8px; }
  .fc-detail .detail-wrap { flex-direction: column; }
  .fc-detail .box input, .fc-detail .box .chip .x, .fc-detail .box .chip { min-height: 36px; font-size: 15px; }
  .fc-detail .box .chip { padding-right: 2px; }
  .fc-empty { padding: 20px; text-align: center; }
  /* conflict dialog stacks per line on a phone */
  #uiDlg.wide { width: 96vw; padding: 12px; }
  #uiDlg .conflicts { max-height: 60vh; }
  #uiDlg .conflicts thead { display: none; }
  #uiDlg .conflicts tr { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
  #uiDlg .conflicts td { display: block; border: 0; padding: 2px 4px; }
  #uiDlg .conflicts td:first-child { grid-column: 1 / -1; font-size: 15px; }
  #uiDlg .conflicts td:nth-child(2) { grid-column: 1 / -1; color: var(--muted); }
  #uiDlg .conflicts td[data-label]::before { content: attr(data-label) ": "; font-size: 11px; color: var(--muted); display: block; }
  #uiDlg .conflicts td:last-child { grid-column: 1 / -1; }
  #uiDlg .conflicts select { width: 100%; min-height: 40px; font-size: 16px; }
  #uiDlg .actions button { min-height: 40px; }
}

/* a family's needs as two rows — RH and YK, men / ladies with − +, the seated count, confirm — on
   the phone cards and on the family page (needsBlock in roster.js) */
.fc-ev { display: flex; align-items: center; gap: 6px; row-gap: 4px; flex-wrap: wrap; border-radius: 8px; padding: 3px 6px; }   /* too narrow for everything: confirm drops to its own line */
.fc-ev + .fc-ev { margin-top: 5px; }
.fc-ev .lockbtn { margin-left: auto; }
.fc-ev.rh { background: #fdf3d0; border: 1.5px solid #d4a72c; }
.fc-ev.yk { background: #dcf3ee; border: 1.5px solid #2a9d84; }
.fc-ev .ev { font-weight: 700; font-size: 12px; width: 2em; color: #444; }
.fc-need { display: inline-flex; align-items: center; gap: 3px; flex: 1; border-radius: 6px; padding: 1px 4px; }
.fc-need.men { background: #dfeaf6; }
.fc-need.women { background: #f7dfe7; }
.fc-need .lbl { font-size: 11px; color: var(--muted); }
.fc-need input.need { width: 3.2em; min-width: 3.2em; min-height: 36px; font-size: 16px; text-align: center; }
.fc-need input.need:disabled { background: transparent; border-color: transparent; font-weight: 700; color: var(--ink); opacity: 1; }
.fc-need .placed { font-size: 12px; color: var(--muted); }
.fc-need .placed.ok { color: var(--ok); font-weight: 700; }
.fc-need .placed.short { color: var(--warn); font-weight: 700; }
.fc-ev .lockbtn { min-height: 36px; padding: 0 10px; font-size: 13px; white-space: nowrap; }
.fc-ev .lockbtn.on { color: var(--ok); font-weight: 700; border-color: #9c9; }
.fc-ev .lockbtn.on.ok { background: #d8edd6; }
.fc-ev .lockbtn.on.short.short-men { background: var(--short-men); }
.fc-ev .lockbtn.on.short.short-women { background: var(--short-women); }
.fc-ev .lockbtn.on.short.short-both { background: var(--short-both); }
/* ---- event colours: Rosh Hashana = gold, Yom Kippur = teal (blue/pink stay men/ladies) ---- */
table.roster th.ev { text-align: center; font-weight: 700; border-radius: 6px 6px 0 0; }
table.roster th.ev.rh { background: #fdf3d0; color: #7a5a00; border: 2px solid #d4a72c; border-bottom: 0; }
table.roster th.ev.yk { background: #dcf3ee; color: #0f5c4a; border: 2px solid #2a9d84; border-bottom: 0; }
table.roster .ev-rh.ev-first { border-left: 2px solid #d4a72c; }
table.roster .ev-rh.ev-last { border-right: 2px solid #d4a72c; }
table.roster .ev-yk.ev-first { border-left: 2px solid #2a9d84; }
table.roster .ev-yk.ev-last { border-right: 2px solid #2a9d84; }
table.roster tbody tr:last-child .ev-rh { border-bottom: 2px solid #d4a72c; }
table.roster tbody tr:last-child .ev-yk { border-bottom: 2px solid #2a9d84; }
.fc-ev.rh .ev { color: #7a5a00; }
.fc-ev.yk .ev { color: #0f5c4a; }
/* ---- layout ---- */
.fdim line { stroke: #8a9ab0; stroke-width: .5; }
.fdim text { font-size: 4px; fill: #5a7aa0; paint-order: stroke; stroke: #fff; stroke-width: 1.5; }
.room-side .window-band { stroke: #7a7a7a; }
.table path.top { fill: var(--table); stroke: var(--table-line); stroke-width: 1.2; stroke-linejoin: round; }
.table.men path.top { fill: var(--men); }
.table.women path.top { fill: var(--women); }
.table.shtender .seat rect, .table.shtender .seat.filled rect { stroke: none; fill: transparent; }   /* the lectern shape shows through */
.table.shtender.has-name path.top { fill: #fff; }
.table.shtender .seat.hl rect { fill: #ffe2a8; }
.table.shtender .seat.drop rect { fill: #cfe7ff; }
.mode-layout .draggable.selected path.top { stroke: var(--select); stroke-width: 2; }
/* Arrange: an inline toolbar section that opens and closes (not a dropdown) */
#layoutTools details.menu { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
#layoutTools details.menu > summary { list-style: none; cursor: pointer; padding: 3px 6px; border-radius: 6px; user-select: none; display: inline-flex; gap: 4px; align-items: center; }
#layoutTools details.menu > summary::-webkit-details-marker { display: none; }
#layoutTools details.menu > summary:hover { background: #fff; }
#layoutTools details.menu[open] .caret-txt { transform: rotate(90deg); display: inline-block; }
#layoutTools .menu-list { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 2px 6px; border: 1px dashed #d8c48a; border-radius: 8px; background: #fffdf3; }
#layoutTools .menu-list button { padding: 3px 8px; font-size: 12px; }
#layoutTools .menu-sep { width: 1px; height: 18px; background: #d8c48a; margin: 0 2px; }
#layoutTools.side details.menu, #layoutTools.side .menu-list { flex-direction: column; align-items: stretch; }
#layoutTools.side .menu-sep { width: auto; height: 1px; margin: 2px 0; }

/* ---- event colour also on the confirm cells/buttons (everything in the RH/YK box that is not men/ladies);
   the confirmed / pending / short tints come after so they win over the event colour ---- */
table.roster td.lk.ev-rh { background: #fdf3d0; }
table.roster td.lk.ev-yk { background: #dcf3ee; }
table.roster td.lk.ev-rh .lockbtn { border-color: #d4a72c; color: #7a5a00; background: #fff9e6; }
table.roster td.lk.ev-yk .lockbtn { border-color: #2a9d84; color: #0f5c4a; background: #eefaf7; }
table.roster td.lk.ok { background: #d8edd6; }
table.roster td.lk.pending { background: var(--pending); }
table.roster td.lk.short.short-men { background: var(--short-men); }
table.roster td.lk.short.short-women { background: var(--short-women); }
table.roster td.lk.short.short-both { background: var(--short-both); }
.fc-ev.rh .lockbtn { border-color: #d4a72c; color: #7a5a00; background: #fff9e6; }
.fc-ev.yk .lockbtn { border-color: #2a9d84; color: #0f5c4a; background: #eefaf7; }
.fc-ev .lockbtn.on { background: #d8edd6; }
.fc-ev .lockbtn.pending { background: var(--pending); }

/* seated counts in the roster are hidden unless the "show seated" toggle is on */
#rosterBody:not(.show-placed) .placed { display: none; }
.fd-box .placed { display: inline-block; }
.toggle-lbl { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

#layoutTools input[type=number] { width: 4.2em; padding: 2px 4px; }
#layoutTools .tool-lbl { font-weight: 700; color: #555; margin-left: 2px; }

/* zoom controls */
.zoom { display: inline-flex; }
.zoom button { border-radius: 0; padding: 5px 9px; min-width: 32px; }
.zoom button:first-child { border-radius: 6px 0 0 6px; }
.zoom button:last-child { border-radius: 0 6px 6px 0; }

.field.chk { gap: 4px; cursor: pointer; }
.lt-viewing { font-size: 12px; color: #8a5a00; background: #fff3d6; border: 1px solid #f0c060; border-radius: 6px; padding: 2px 8px; }
.lt-frozen { font-size: 12px; color: #7a1f1f; background: #fde8e8; border: 1px solid #e8a0a0; border-radius: 6px; padding: 2px 8px; }
/* plain chairs: no table top, each seat is a rounded chair square with a backrest bar */
.table.chairs .seat rect { rx: 3.5px; fill: var(--table); stroke: var(--table-line); stroke-width: .8; }
.table.chairs.men .seat rect { fill: var(--men); }
.table.chairs.women .seat rect { fill: var(--women); }
.table.chairs .seat.filled rect { fill: #fff; }
.table.chairs .seat.hl rect { fill: #ffe2a8; }
.table.chairs .seat.drop rect { fill: #cfe7ff; stroke: var(--accent); stroke-width: 1.6; }
.table.chairs .seat path.back { fill: none; stroke: #555; stroke-width: 1.5; stroke-linecap: round; }
.table.chairs .seat.filled path.back { stroke: #333; }
.mode-layout .table.chairs.selected .seat rect { stroke: var(--select); stroke-width: 2; }
/* shtender: seat square + lectern bar; fixture sizes in the corner */
.table.shtender rect.top { rx: 3px; }
.table.shtender .lectern { fill: #8a7a5a; stroke: #444; stroke-width: .6; }
.fixture text.fx-dim { font-size: 3.6px; fill: #777; text-anchor: end; dominant-baseline: auto; font-weight: 400; }

/* ---- layout tools bar: big counts inside it, hide / dock-to-side ---- */
.lt-counts { display: inline-flex; gap: 6px; margin-right: 6px; }
.lt-count { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 8px; border: 2px solid; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.lt-count b { font-size: 24px; line-height: 1; }
.lt-txt { display: flex; flex-direction: column; gap: 1px; line-height: 1.15; }
/* what those seats sit at: 18 x 8' - 7 x 12' - 9 shtenders - 36 chairs */
.lt-txt i { font-style: normal; font-size: 10px; font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; white-space: nowrap; }
.lt-count.men { background: #dbe8f7; border-color: #7fa6d6; color: #1f4e83; }
.lt-count.women { background: #fadbe6; border-color: #e39ab6; color: #8c2d55; }
.lt-ctl { display: inline-flex; gap: 2px; }
.lt-ctl button, .lt-show { padding: 2px 7px; font-size: 12px; color: var(--muted); }
#layoutTools.collapsed { padding: 2px 10px; }
#layoutTools.collapsed > *:not(.lt-show) { display: none !important; }
#layoutTools.side { flex-direction: column; align-items: stretch; width: 210px; min-width: 210px; overflow: auto; border-bottom: 0; border-right: 1px solid #f0dca0; padding: 8px; gap: 5px; }
#layoutTools.side .lt-counts { flex-direction: column; margin: 0 0 4px; }
#layoutTools.side .lt-count { justify-content: center; }
#layoutTools.side .lt-txt i { white-space: normal; }
#layoutTools.side .field { display: flex; flex-direction: column; align-items: stretch; gap: 2px; }
#layoutTools.side .field select, #layoutTools.side .field input { width: 100%; }
#layoutTools.side .sep { width: auto; height: 1px; margin: 3px 0; }
#layoutTools.side #selTools { display: contents; }
#layoutTools.side .tool-lbl { margin-top: 4px; }
#layoutTools.side.collapsed { width: auto; min-width: 0; padding: 4px; }
#layoutTools.side.collapsed .lt-show { writing-mode: vertical-rl; }

/* roster: − / + beside every need box */
table.roster td.need-cell { white-space: nowrap; }
table.roster .adj, .fc-need .adj { padding: 0 5px; font-size: 13px; line-height: 1.3; border-radius: 4px; color: var(--muted); background: transparent; border-color: transparent; }
table.roster .adj:hover, .fc-need .adj:hover { border-color: #999; background: #fff; }
.fc-need .adj { min-height: 36px; min-width: 32px; }

/* assignments side panel: counters + layout picker at the top */
.panel-counts { display: flex; gap: 6px; }
.pc { flex: 1; border-radius: 10px; padding: 6px 10px; border: 2px solid; line-height: 1.1; }
.pc.men { background: #dbe8f7; border-color: #7fa6d6; color: #1f4e83; }
.pc.women { background: #fadbe6; border-color: #e39ab6; color: #8c2d55; }
.pc.over { border-color: var(--danger); }
.pc-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; }
.pc-big { font-size: 20px; color: var(--ink); }
.pc-big b { font-size: 30px; font-weight: 800; }
.pc-big .of { color: #444; font-size: 16px; margin-left: 2px; }
.pc-sub { font-size: 10px; color: #555; }
.pc-need { font-size: 13px; font-weight: 700; color: #222; margin-top: 2px; }
.pc.over .pc-need { color: var(--danger); }
/* what the seats sit at: 24 x 8' - 14 x 6' - 9 shtenders (joined: 2 x 16') */
.pc-mix { font-size: 10px; font-weight: 600; color: #555; margin-top: 2px; line-height: 1.25; }
.panel-layout { display: flex; align-items: center; gap: 6px; }
.panel-layout select { flex: 1; min-width: 0; font-size: 12px; }
.panel-opt { font-size: 12px; color: var(--muted); cursor: pointer; }
.panel-opt input { cursor: pointer; }

/* seat picker: one row per family */
.picklist.sp li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.picklist.sp .sp-name { min-width: 11em; }
.picklist.sp .sp-need { display: inline-flex; gap: 3px; font-size: 11px; }
.picklist.sp .sp-need .lg { padding: 0 5px; border-radius: 4px; }
.picklist.sp .sp-btns { display: inline-flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.picklist.sp .sp-btns button { padding: 2px 7px; font-size: 12px; }
.picklist.sp .sp-btns button.m { background: #e3edf8; }
.picklist.sp .sp-btns button.w { background: #fbe4ec; }
.picklist.sp .sp-need .lg.men { background: #e3edf8; color: #1f4e83; }
.picklist.sp .sp-need .lg.women { background: #fbe4ec; color: #8c2d55; }

/* assignments panel: resizable width, optional − + buttons */
#panel { position: relative; }
#panelResizer { position: absolute; left: -3px; top: 0; bottom: 0; width: 7px; cursor: col-resize; touch-action: none; z-index: 3; }
#panelResizer:hover { background: rgba(47,93,138,.15); }
#panel.no-adj .fam-top .grp button { display: none; }
#panel.no-adj .fam-top .grp button.overbtn { display: inline-block; }
#panel.no-adj .fam-top .grp { padding: 0 4px; }
#panelAdjToggle { padding: 1px 7px; font-size: 13px; }
@media (max-width: 900px) { #panelResizer { display: none; } }

/* ---- motion: anyone who asked their device for less of it gets none — things appear, hazards stay yellow, the countdown bar simply drains ---- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #rosterList li.hiding { animation-duration: var(--hide-ms, 5s) !important; }
}

/* ---- signs: printable shul signs, one 8½ × 11 portrait page ---- */
#secSigns { flex-direction: row; min-height: 0; }
.sign-side { width: 330px; flex: none; padding: 10px 14px; border-right: 1px solid var(--line); background: var(--panel); overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.sign-side h2 { margin: 0; font-size: 20px; }
.sign-side select { max-width: 100%; }
.sign-weeks { display: flex; flex-direction: column; gap: 4px; }
.sign-editor { display: flex; flex-direction: column; gap: 6px; }
.sg-ed-btns { gap: 4px; }
.sg-f { display: flex; flex-direction: column; gap: 1px; font-size: 12px; min-width: 0; }
.sg-f input, .sg-f select, .sg-f textarea { width: 100%; padding: 4px 6px; font: inherit; font-size: 13px; }
.sg-ed-two { display: flex; gap: 6px; }
.sg-ed-two > * { flex: 1; min-width: 0; }
.sg-ed-rule input { width: 4em; padding: 2px 4px; }
.sg-ed-h { margin: 8px 0 0; font-size: 14px; }
.sg-ed-week { display: flex; flex-direction: column; gap: 3px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 12.5px; }
.sg-ed-week input:not([type=checkbox]) { width: 100%; padding: 3px 6px; font-size: 13px; }
.sg-ed-week.off { opacity: .65; }
.sign-editor:not(.adv) .sg-adv-only { display: none; }
.sg-adv > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); padding: 4px 0; }
.sg-adv > .sign-editor { padding: 4px 0 6px 10px; border-left: 2px solid var(--line); }
.sg-ed-wk { display: flex; align-items: center; gap: 5px; }
.sign-scroll { flex: 1; overflow: auto; padding: 18px; background: #4a4a48; display: flex; justify-content: center; align-items: flex-start; }
.sign-sheet {
  --sg-navy: #2b3350; --sg-ink: #22283d; --sg-gold: #b08d3c; --sg-gold-soft: #d9c38a; --sg-cream: #fbf7ee;
  width: 8.5in; height: 11in; flex: none; background: #fff; box-shadow: 0 6px 26px rgba(0,0,0,.45);
  padding: .32in; color: var(--sg-ink); font-family: "Assistant", var(--font);
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
  /* shrunk to fit a narrow screen by a real scale (the same in Safari), the negative margins give
     back the space the full-size box would take; iOS must not enlarge its text on its own */
  --sg-zoom: 1; transform: scale(var(--sg-zoom)); transform-origin: 0 0;
  margin: 0 calc(8.5in * (var(--sg-zoom) - 1)) calc(11in * (var(--sg-zoom) - 1)) 0;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.sg-frame { position: relative; height: 100%; border: 3px solid var(--sg-navy); outline: 1px solid var(--sg-gold); outline-offset: -9px;
  padding: .34in .42in .38in; display: flex; flex-direction: column;
  background: radial-gradient(ellipse at 50% 0%, #f6efdc 0, #fff 55%); }
.sg-corner { position: absolute; width: .62in; height: .62in; }
.sg-corner svg { width: 100%; height: 100%; stroke: var(--sg-gold); fill: var(--sg-gold); }
.sg-corner.tl { top: 3px; left: 3px; }
.sg-corner.tr { top: 3px; right: 3px; transform: scaleX(-1); }
.sg-corner.bl { bottom: 3px; left: 3px; transform: scaleY(-1); }
.sg-corner.br { bottom: 3px; right: 3px; transform: scale(-1, -1); }
.sg-head { text-align: center; margin-bottom: 12px; }
.sg-logo { height: .82in; width: auto; display: block; margin: 0 auto 2px; }
.sg-kicker { font-family: "Frank Ruhl Libre", serif; font-size: 12.5pt; color: var(--sg-gold); letter-spacing: .04em; }
.sg-kicker span { margin: 0 .3em; }
.sg-title { margin: 0; font-family: "Frank Ruhl Libre", serif; font-weight: 700; font-size: 62pt; line-height: 1.05; color: var(--sg-navy); }
.sg-title.mid { font-size: 46pt; }
.sg-title.long { font-size: 34pt; }
.sg-en { font-size: 11pt; font-weight: 700; letter-spacing: .5em; margin-right: -.5em; color: var(--sg-navy); margin-top: 4px; }
.sg-flourish { display: block; width: 2.6in; height: auto; margin: 6px auto 4px; fill: var(--sg-gold); }
.sg-thanks { font-family: "Frank Ruhl Libre", serif; font-style: italic; font-size: 17pt; color: var(--sg-ink); }
.sg-grid { flex: 1 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: row-reverse; gap: .22in; }
.sg-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 7px; }
.sg-week { flex: 1 1 0; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; column-gap: 8px; align-items: center;
  background: var(--sg-cream); border: 1px solid var(--sg-gold-soft); border-right: 4px solid var(--sg-navy); border-radius: 6px; padding: 5px 10px 6px; }
.sg-parsha { grid-column: 2; grid-row: 1; direction: rtl; text-align: right; display: flex; align-items: baseline; gap: 6px; }
.sg-he { font-family: "Frank Ruhl Libre", serif; font-weight: 700; font-size: 19pt; line-height: 1.05; color: var(--sg-navy); }
.sg-note { direction: ltr; font-size: 7.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--sg-gold); border-radius: 3px; padding: 1px 5px; align-self: center; }
.sg-when { grid-column: 1; grid-row: 1; font-size: 9.5pt; font-weight: 700; color: var(--sg-gold); white-space: nowrap; }
.sg-dot { margin: 0 .35em; }
/* a sponsor's name is "written in" on the line, the way it is by hand on the paper sign: a pen
   script in blue ink, a touch tilted, sitting on the rule (Hebrew falls back to the serif) */
.sg-sponsor { grid-column: 1 / -1; grid-row: 2; align-self: end; min-height: 1.45em; border-bottom: 1.2px solid #8d8778; font-size: 14pt; text-align: center; line-height: 1.3; }
.sg-week.taken .sg-sponsor { font-family: "Caveat", "Frank Ruhl Libre", cursive; font-weight: 600; font-size: 25pt; line-height: 1; color: #1f3f8f; padding-bottom: 1px; }
/* only the writing tilts — the printed rule under it stays straight */
.sg-ink { display: inline-block; transform: rotate(-2deg); }
.sg-break { flex: .55 1 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  border: 1.2px dashed var(--sg-gold); border-radius: 6px; background: repeating-linear-gradient(135deg, #fff 0 6px, #fbf6e9 6px 12px); padding: 4px; }
.sg-break-he { font-family: "Frank Ruhl Libre", serif; font-weight: 700; font-size: 13pt; color: var(--sg-navy); direction: rtl; }
.sg-break-en { font-size: 8pt; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sg-gold); }
.sg-break.chanukah .sg-break-he::before, .sg-break.chanukah .sg-break-he::after { content: "🕎"; font-size: 10pt; margin: 0 .4em; }
.sg-foot { padding-top: 10px; }  /* the cards end above the corner ornaments */
.sg-grid.one { max-width: 4.4in; margin: 0 auto; width: 100%; }
.sg-empty { flex: 1; text-align: center; color: #8d8778; font-style: italic; }
/* flyer: lines of text centred under the title, Hebrew lines right-to-left */
.sg-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2px; padding: 8px 0; color: var(--sg-ink); }
.sg-line { width: 100%; line-height: 1.25; }
.sg-line.lg { font-family: "Frank Ruhl Libre", serif; font-weight: 700; font-size: 30pt; color: var(--sg-navy); }
.sg-line.md { font-weight: 700; font-size: 20pt; color: var(--sg-navy); }
.sg-line.sm { font-size: 16pt; }
.sg-gap { height: 14pt; }
.sg-small { text-align: center; font-size: 10.5pt; color: #5d5a52; padding-top: 4px; }
.sg-foot .sg-flourish { margin: 6px auto 0; }

@media print {
  body.signing main > *:not(#secSigns), body.signing .sign-side { display: none !important; }
  body.signing, body.signing main, body.signing #secSigns, body.signing .sign-scroll { height: 100%; }
  body.signing #secSigns { display: block; }
  body.signing .sign-scroll { overflow: visible; padding: 0; display: block; background: none; }
  body.signing .sign-sheet { width: 100%; height: 100%; box-shadow: none; transform: none; margin: 0; }
}
/* phone / narrow: the preview on top (scaled to the width by signs.js), the editor under it, one scroll */
@media (max-width: 900px) {
  #secSigns { flex-direction: column; overflow: auto; }
  .sign-side { width: auto; overflow: visible; border-right: 0; border-top: 1px solid var(--line); }
  .sign-scroll { order: -1; flex: none; overflow: hidden; padding: 10px; }
}