/* Trifold. Navy shell, cool stage, white paper, orange pins: calm, so the slides are what you look at. */
:root {
  --ink: #20394c; --ink-2: #425f74; --muted: #5d7387; --navy: #203d52; --navy-2: #2c4c63; --navy-deep: #152e40;
  --accent: #df7146; --accent-dark: #a5411e; --accent-light: #fff0e6; --pin: #c9663e;
  --apricot: #ffb58f; --apricot-hover: #ffc6aa; --apricot-active: #f59e77;
  --stage: #e6edf2; --surface: #f7f9fb; --panel: #fbfcfd; --line: #d5dfe6; --line-2: #c9d6e0;
  --hover: #e8eff4; --active: #dbe6ee; --focus: #b9532c; --ok: #4a7a59; --warn: #b4562f; --late: #a3322b;
  --font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --grain: none;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; color: var(--ink); background: var(--stage); font: 13px/1.45 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.is-editing { overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 0; background: none; cursor: pointer; padding: 0;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease), box-shadow 160ms var(--ease); }
button:disabled { opacity: .35; cursor: default; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
input, textarea { caret-color: var(--accent-dark); }
::selection { background: #ffd2b4; color: #17354a; }
[hidden] { display: none !important; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 100; background: #fff; color: var(--ink); padding: 9px 14px; border-radius: 6px; font-weight: 650; text-decoration: none; box-shadow: 0 6px 18px #0003; }
.skip:focus { top: 12px; }

/* ---------- Controls ---------- */
.btn { min-height: 36px; padding: 8px 13px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.btn:hover { background: #eef3f7; }
.btn:active { background: var(--active); }
.btn.primary { background: var(--apricot); border-color: transparent; color: #3b281c; font-weight: 650; }
.btn.primary:hover { background: var(--apricot-hover); }
.btn.primary:active { background: var(--apricot-active); }
.btn.navy { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.navy:hover { background: var(--navy-2); }
.btn.danger { color: #a3322b; }
.btn.primary.danger-fill { background: #a3322b; color: #fff; }
.btn.primary.danger-fill:hover { background: #8e2a24; }
.btn.ghost-dark { background: transparent; border-color: #45637a; color: #e2eaf0; }
.btn.ghost-dark:hover { background: #2c4c63; }
.btn.wide { width: 100%; }
.ib { width: 34px; height: 34px; min-width: 34px; border-radius: 6px; color: #47647a; }
.ib:hover { background: var(--hover); }
.ib:active { background: var(--active); }
.ib[aria-pressed="true"] { background: #e0eaf1; color: #1c4762; }
.field { display: block; margin: 0 0 14px; }
.field > span:first-child { display: block; font-size: 11.5px; font-weight: 620; color: #3d596e; margin-bottom: 6px; }
.field em { font-style: normal; font-weight: 450; color: var(--muted); }
input:not([type]), input[type="text"], input[type="number"], input[type="date"], select, textarea {
  width: 100%; min-height: 36px; padding: 8px 10px; border: 1px solid #cbd8e1; border-radius: 6px; background: #fff; font-size: 13px; line-height: 1.35; }
input:hover, select:hover, textarea:hover { border-color: #b3c5d2; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: #b3c5d2; }
textarea { resize: vertical; min-height: 72px; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; flex-shrink: 0; border: 1.5px solid #98adbc; border-radius: 4px; background: #fff; cursor: pointer;
  display: inline-grid; place-content: center; transition: background-color 140ms var(--ease), border-color 140ms var(--ease); }
input[type="checkbox"]::after { content: ''; width: 10px; height: 6px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform 160ms var(--ease); }
input[type="checkbox"]:checked { background: var(--navy); border-color: var(--navy); }
input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(-45deg) scale(1); }
input[type="range"] { width: 100%; accent-color: #365f7b; margin: 10px 0 4px; }
.unit { position: relative; display: block; }
.unit input { padding-right: 30px; }
.unit i { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 11.5px; color: var(--muted); pointer-events: none; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.count { display: inline-block; min-width: 18px; font-size: 11px; font-weight: 600; line-height: 1.5; background: #e1e8ee; border-radius: 3px; padding: 0 5px; color: #425f74; text-align: center; font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.tack { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: radial-gradient(circle at 32% 26%, #ffc591, #dc7648 56%, #9e4426 84%); box-shadow: 1px 2px 2px #0005; }

/* Due chip: calm, soon, urgent, late, done. */
.due { display: inline-flex; align-items: center; gap: 5px; padding: 3px 7px 3px 6px; border-radius: 4px; font-size: 11.5px; font-weight: 600; white-space: nowrap; background: #e9eff3; color: #3b566b; font-variant-numeric: tabular-nums; }
.due .ic { width: 13px; height: 13px; }
.due.soon { background: #e2eaf1; color: var(--navy); }
.due.urgent { background: var(--accent-light); color: var(--accent-dark); }
.due.late { background: #fbe4df; color: var(--late); }
.due.done { background: #e3efe6; color: var(--ok); }
.due.none { background: transparent; color: var(--muted); padding-left: 0; font-weight: 500; }

/* Progress as a tape measure: inch ticks along the top, navy fill, a pin where you are. */
.meter { position: relative; height: 12px; border: 1px solid #cad6df; border-radius: 3px; background: #f3f6f9; }
.meter-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px 0 0 2px; background: linear-gradient(#2e536c, #203d52); transition: width 400ms var(--ease); }
.meter::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(90deg, #7d93a466 0 1px, transparent 1px 10%) 0 0 / 100% 6px no-repeat,
    repeating-linear-gradient(90deg, #7d93a440 0 1px, transparent 1px 2.5%) 0 0 / 100% 3px no-repeat; }
.meter-pin { position: absolute; top: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; z-index: 1; transform: translateY(-50%);
  background: radial-gradient(circle at 32% 26%, #ffc591, #dc7648 56%, #9e4426 84%); box-shadow: 1px 2px 2px #0005; transition: left 400ms var(--ease); }
.meter.is-done .meter-fill { background: linear-gradient(#5b8a69, #4a7a59); border-radius: 2px; }


.btn.big { min-height: 50px; padding: 12px 26px; gap: 10px; border-radius: 10px; font-size: 15.5px; }
.btn.big .ic { width: 19px; height: 19px; }
.linkbtn { gap: 8px; min-height: 40px; padding: 8px 13px; border-radius: 9px; font-size: 14px; font-weight: 640; color: var(--navy); }
.linkbtn:hover { background: #ffffffc0; }
.linkbtn .ic { color: var(--accent-dark); }
.spin { display: inline-block; width: 16px; height: 16px; flex-shrink: 0; border-radius: 50%; border: 2px solid #d3dee6; border-top-color: var(--accent); animation: spin 900ms linear infinite; }
.spin.big { width: 26px; height: 26px; border-width: 3px; margin-bottom: 10px; }
@keyframes spin { to { transform: rotate(1turn); } }

/* ---------- Home ---------- */
.home { min-height: 100%; background: radial-gradient(120% 60% at 50% 0, #f2f6f9 0, #e6edf2 60%); }
/* Kept inside the 4:3 frame the portfolio's TV shows, clear of the glass's rounded corners. */
.wrap { width: min(1040px, 100% - 48px); margin-inline: auto; }
@media (min-width: 1700px) { .wrap { width: min(1160px, 100% - 64px); } }
.topbar { background: var(--navy); color: #f5f8fa; }
.topbar-in { height: 60px; display: flex; align-items: center; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 21px; font-weight: 760; letter-spacing: -.6px; line-height: 1; border-radius: 4px; }
.brandmark { width: 30px; height: 30px; stroke: #ffbb99; stroke-width: 1.6; stroke-linejoin: round; flex-shrink: 0; }
.brand-tag { padding-left: 16px; border-left: 1px solid #3a5a71; font-size: 13px; color: #c2d5e3; }
.topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.home-main { padding: 30px 0 64px; outline: 0; }

.drop { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 38px 32px 32px; border: 2px dashed #a9bccb; border-radius: 20px;
  background: #ffffffb3; transition: border-color 200ms var(--ease), background-color 200ms var(--ease), box-shadow 200ms var(--ease); }
.drop.is-over { border-color: var(--accent); background: #fffaf6; box-shadow: 0 0 0 6px #ffd9c299; }
.drop-art { width: 236px; height: 92px; margin-bottom: 14px; overflow: visible; fill: none; stroke-linejoin: round; }
.drop-art .da-slides rect { fill: #fff; stroke: #7d93a4; stroke-width: 1.4; }
.drop-art .da-slides .da-top { fill: #fff1e7; stroke: var(--accent); }
.drop-art .da-lines { stroke: #d08a63; stroke-width: 2; stroke-linecap: round; }
.drop-art .da-arrow { stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; }
.drop-art .da-board > path:first-child { fill: #f6f3e9; stroke: #6f8799; stroke-width: 1.4; }
.drop-art .da-pg, .drop-art .da-pg2 { fill: #fff; stroke: #8aa1b2; stroke-width: 1.1; }
.drop-art .da-board .da-pg:first-of-type { fill: #fff1e7; stroke: var(--accent); }
.drop.is-over .drop-art .da-slides { transform: translateX(6px); }
.drop-art .da-slides { transition: transform 300ms var(--ease); }
.drop h1 { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 720; letter-spacing: -1.1px; }
.drop-lead { max-width: 560px; margin: 10px 0 22px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.drop-small { max-width: 520px; margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.drop-job { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 9px 14px; border-radius: 9px; background: #eaf0f5; font-size: 13px; font-weight: 600; color: var(--ink); text-align: left; }
.drop-job .ic { color: var(--late); }
.drop.is-error .drop-job { background: #fbe4df; color: #7d2620; }
.drop.is-busy .btn.big { opacity: .55; pointer-events: none; }
/* With boards to show, the drop area steps back a little so they're in view. */
.home.has-boards .drop { padding: 26px 32px 24px; }
.home.has-boards .drop-art { width: 176px; height: 69px; margin-bottom: 10px; }
.home.has-boards .drop h1 { font-size: 28px; }
.home.has-boards .drop-lead { margin: 8px 0 18px; font-size: 15px; }
.home.has-boards .drop-small { margin-top: 12px; }
.hero-alt { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 14px 0 0; }
.hero-or { font-size: 13px; color: var(--muted); }

.shelf { margin-top: 38px; }
.shelf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.shelf-head h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.4px; }
.home-local { margin: 0; display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.home-local .ic { width: 15px; height: 15px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { position: relative; display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #d2dde5; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px #1d3a500d, 0 14px 30px -20px #1d3a5059; transition: transform 240ms var(--ease), box-shadow 240ms var(--ease); }
.card:hover { transform: translateY(-2px); box-shadow: 0 2px 4px #1d3a5012, 0 22px 40px -22px #1d3a5066; }
.card:focus-within { box-shadow: 0 0 0 2px var(--focus), 0 14px 30px -20px #1d3a5059; }
.card-stage { position: relative; height: 196px; overflow: hidden; perspective: 900px; border-bottom: 1px solid #dae3ea;
  background: radial-gradient(110% 95% at 50% 28%, #f7f5f0 0, #ebe7de 62%, #e0dbd0 100%); }
.card-flag { position: absolute; left: 12px; top: 10px; z-index: 1; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6b6458; border: 1px solid #c9c1b2; border-radius: 3px; padding: 1px 5px; background: #ffffffaa; }
.card-menu { position: absolute; right: 8px; top: 8px; z-index: 3; background: #ffffffb3; }
.card-menu:hover { background: #fff; }
.mini-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; transform: var(--rest); transition: transform 320ms var(--ease); }
.card:hover .mini-world { transform: translateY(-3px) var(--rest); }
.mini-world .piece .paper { box-shadow: .6px 1.2px 2.4px #1d3a5059; }
.mini-world .tf-panel { box-shadow: inset 0 0 0 1px #00000017; background-color: color-mix(in srgb, var(--board) 93%, #5d6b63); }
.mini-floor { position: absolute; left: 50%; bottom: 16px; width: 74%; height: 30px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, #3a2f2030, transparent); }
.fan { position: absolute; inset: 0; display: grid; place-items: center; }
.fan img { grid-area: 1 / 1; width: 46%; border-radius: 3px; background: #fff; box-shadow: 0 2px 4px #0000001f, 0 10px 20px -8px #1d3a5059;
  transform: translateX(calc(var(--i) * 30%)) translateY(calc(var(--i) * var(--i) * 6px)) rotate(calc(var(--i) * 7deg)); }
.card-body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 15px; flex: 1; }
.card-title { margin: 0; font-size: 17px; line-height: 1.25; font-weight: 680; letter-spacing: -.35px; }
.card-title a { text-decoration: none; outline: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-title a::after { content: ''; position: absolute; inset: 0; z-index: 2; }
.card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.card-next { display: flex; align-items: center; gap: 7px; margin: auto 0 0; padding-top: 10px; border-top: 1px dashed #d5dfe6; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.card-next .ic { width: 15px; height: 15px; color: var(--accent-dark); }
.card-next.done .ic { color: var(--ok); }
.card-next .spin { width: 13px; height: 13px; }
.home-foot { margin: 30px auto 0; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 640px; text-align: center; }

/* ---------- Board editor ---------- */
.editor { position: fixed; inset: 0; display: grid; grid-template-rows: 56px minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); background: var(--stage); }
.ed-head { display: flex; align-items: center; gap: 10px; padding: 0 14px 0 8px; background: var(--navy); color: #eef3f7; min-width: 0; }
.ed-back { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 6px; color: #d8e4ec; text-decoration: none; font-size: 12.5px; font-weight: 600; flex-shrink: 0; }
.ed-back:hover { background: #2c4c63; }
.ed-titlebox { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; padding-left: 10px; border-left: 1px solid #3a5a71; }
.ed-head input.ed-name { min-height: 34px; min-width: 60px; max-width: min(460px, 100%); width: auto; field-sizing: content; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent;
  color: #fff; font-size: 16px; font-weight: 680; letter-spacing: -.3px; text-overflow: ellipsis; }
.ed-head input.ed-name:hover { border-color: #4a6880; }
.ed-head input.ed-name:focus { background: #17324a; border-color: #6e8ca2; }
.ed-head input.ed-name:focus-visible { outline: 2px solid var(--apricot); outline-offset: 1px; }
.ed-meta { font-size: 12px; color: #b7cad8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save-state { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #b7cad8; white-space: nowrap; margin-right: 4px; }
.save-state i { width: 6px; height: 6px; border-radius: 50%; background: #86b895; }
.save-state.is-saving i { background: var(--apricot); }
.save-state.is-off i { background: #e7856a; }
.hb { display: inline-block; min-width: 20px; padding: 2px 6px; border-radius: 9px; background: #ffffff1f; font-size: 11px; font-weight: 650; line-height: 1.3; font-variant-numeric: tabular-nums; }
.btn.ghost-dark[aria-pressed="true"] { background: #2c4c63; border-color: #6e8ca2; }

.ed-main { position: relative; display: grid; grid-template-columns: 276px minmax(0, 1fr); min-height: 0; }

/* The page tray */
.tray { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--surface); border-right: 1px solid var(--line); }
.tray-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 18px; flex-shrink: 0; }
.tray-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.tray-add { min-height: 32px; padding: 6px 11px 6px 9px; gap: 5px; font-size: 12px; }
.tray-add .ic { width: 15px; height: 15px; }
.tray-job { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; margin: 0 14px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; flex-shrink: 0; }
.tj-t { display: flex; flex-direction: column; min-width: 0; }
.tj-t b { font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tj-t small { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tj-bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: #e3eaf0; overflow: hidden; }
.tj-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); transition: width 300ms var(--ease); }
.tray-notes { margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px; background: #fdf0e9; border: 1px solid #f2d2c0; flex-shrink: 0; }
.tray-note { display: flex; gap: 8px; margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: #7a3a1d; }
.tray-note .ic { width: 15px; height: 15px; margin-top: 1px; color: var(--accent-dark); }
.tray-notes .linkish { font-size: 12px; color: var(--accent-dark); }
.tray-top { padding: 0 14px; flex-shrink: 0; }
.auto-btn { min-height: 40px; font-size: 13px; }
.auto-btn .ic { width: 18px; height: 18px; }
.tray-hint { margin: 9px 2px 12px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.tray-done { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 7px; margin: 0; padding: 9px 11px; border-radius: 9px; background: #e7f1ea; color: #355f41; font-size: 12.5px; font-weight: 620; }
.tray-done .ic { width: 15px; height: 15px; }
.linkish { margin-left: auto; color: var(--navy); font-weight: 680; text-decoration: underline; text-underline-offset: 2px; }
.tray-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 12px; padding: 22px 14px 18px; border: 1.5px dashed #b4c5d2; border-radius: 12px; background: #fff; text-align: center; }
.tray-empty .te-art .ic { width: 30px; height: 30px; color: #7d93a4; stroke-width: 1.4; }
.tray-empty b { font-size: 14px; }
.tray-empty p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.tray-grid { list-style: none; flex: 1; min-height: 0; margin: 0; padding: 2px 14px 16px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
  scrollbar-width: thin; scrollbar-color: #b4c5d2 transparent; }
.tray.is-empty .tray-grid { display: none; }
.tpage { position: relative; display: block; width: 100%; padding: 0; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1px #cfdbe4, 0 2px 6px #1d3a5014; cursor: grab; touch-action: pan-y;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.tpage:hover { box-shadow: 0 0 0 1.5px #8aa6ba, 0 8px 16px -4px #1d3a5030; transform: translateY(-1px); }
.tpage:active { cursor: grabbing; }
.tp-img { display: grid; place-items: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 7px; background: #eef2f5; }
.tp-img img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.tp-wait { width: 40%; height: 4px; border-radius: 2px; background: #d6e0e7; }
.tp-n { position: absolute; left: 5px; bottom: 5px; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 10px; background: #203d52e8; color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tpage.is-picked { box-shadow: 0 0 0 3px var(--accent), 0 10px 20px -6px #a5411e55; transform: translateY(-1px); }
.tpage.is-picked .tp-n { background: var(--accent-dark); }
.tpage.is-placed { cursor: pointer; background: #f2f5f7; }
.tpage.is-placed .tp-img img { opacity: .35; filter: saturate(.4); }
.tp-on { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 12px; background: #fff;
  color: #355f41; font-size: 11px; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 3px #00000024; }
.tp-on .ic { width: 13px; height: 13px; stroke-width: 2.4; }
.tray.is-dragging .tpage:not(.is-placed):hover { transform: none; }
.tray-own { padding: 11px 14px 14px; border-top: 1px solid var(--line); flex-shrink: 0; }
.own-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.own-btns button { min-height: 36px; gap: 6px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; font-weight: 620; color: var(--ink); }
.own-btns button .ic { width: 16px; height: 16px; color: #3f6079; }
.own-btns button:hover { border-color: #b3c6d4; background: #f5f9fb; }
.tray-ghost { position: fixed; left: 0; top: 0; z-index: 80; width: 132px; margin: -36px 0 0 -66px; pointer-events: none; transition: opacity 140ms var(--ease); }
.tray-ghost img { display: block; width: 100%; border-radius: 4px; background: #fff; box-shadow: 0 16px 34px #1b344959, 0 2px 6px #1b344933; rotate: -3deg; }
.tray-ghost span { position: absolute; left: -7px; top: -8px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-dark); color: #fff; font: 700 11.5px/1 var(--font); }
.tray-ghost.is-over { opacity: 0; }

/* Stage */
.stage { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.toolbar { display: flex; align-items: center; gap: 4px; height: 54px; padding: 0 12px; background: #f6f8fa; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.seg { display: flex; gap: 2px; padding: 3px; border-radius: 8px; background: #e6edf2; }
.seg button { min-height: 30px; padding: 4px 10px; gap: 6px; border-radius: 6px; font-size: 12px; font-weight: 560; color: #46647a; }
.seg button .ic { width: 15px; height: 15px; }
.seg button:hover { color: var(--navy); }
.seg button[aria-pressed="true"] { background: #fff; color: #18394f; font-weight: 680; box-shadow: 0 1px 3px #0000001c; }
.seg-mode button { min-height: 36px; padding: 6px 15px; font-size: 13px; }
.seg-mode #v3d[aria-pressed="false"] { color: var(--accent-dark); }
.seg-mode #v3d[aria-pressed="false"] .ic { color: var(--accent); }
.fit-state { display: flex; align-items: center; gap: 6px; margin-left: 12px; min-width: 0; font-size: 12px; color: #4f7059; white-space: nowrap; }
.fit-state .ic { width: 15px; height: 15px; }
.fit-state .fs-t { overflow: hidden; text-overflow: ellipsis; }
.fit-state.is-warn { color: var(--warn); font-weight: 620; }
.fit-state.is-warn .ic { color: var(--accent); }
.fit-state button { color: inherit; font-weight: 680; text-decoration: underline; text-underline-offset: 2px; padding: 4px 3px; }
.spacer { flex: 1; }
.tb { min-height: 34px; margin-left: 6px; padding: 6px 11px; gap: 6px; border: 1px solid #d0dce5; border-radius: 7px; background: #fff; font-size: 12px; font-weight: 600; }
.tb:hover { background: #eef3f7; }
.viewport { position: relative; flex: 1; min-height: 0; overflow: hidden; perspective: 2400px; cursor: grab; touch-action: none; outline: 0;
  background: radial-gradient(ellipse at 50% 40%, #f2f6f9 0, #e7edf2 64%, #dae4eb 100%); transition: background-color 400ms; }
.viewport.is-grabbing { cursor: grabbing; }
.viewport.is-picking, .viewport.is-receiving { cursor: copy; }
.viewport:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.viewport.is-dropping { box-shadow: inset 0 0 0 3px #d48155; }
/* 3D preview: a warm room, a table, the board standing on it. */
.viewport.is-preview { background: radial-gradient(90% 70% at 50% 28%, #eff2f4 0, #e1e6ea 55%, #d4dbe1 100%); }
.scene { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; transform-style: preserve-3d; }
.table { position: absolute; pointer-events: none; opacity: 0; transition: opacity 450ms var(--ease);
  background: radial-gradient(21% 7% at 50% 11%, #2d221452, transparent), radial-gradient(40% 26% at 50% 10%, #2d22141f, transparent), linear-gradient(#dccdb2, #cdb995 60%, #c2ac85); border-radius: 6px; }
.is-preview .table { opacity: 1; }
.is-turning .world, .is-turning .tf-panel { transition: transform 620ms var(--ease); }
.is-preview .tf-grid, .is-preview .tf-pname, .is-preview .tf-dim, .is-preview .tf-hdim, .is-preview .pin, .is-preview .clip { display: none; }
.drop-hint { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 7; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 8px; background: var(--navy); color: #fff; font-size: 12.5px; font-weight: 600; pointer-events: none; }
.stage-empty { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 20px; pointer-events: none; }
.se-card { display: flex; flex-direction: column; align-items: center; max-width: 380px; padding: 24px 26px 22px; border-radius: 16px; background: #ffffffeb; text-align: center;
  box-shadow: 0 18px 50px #1b344926, 0 1px 3px #1b34491a; }
.se-card b { font-size: 18px; font-weight: 700; letter-spacing: -.35px; }
.se-card p { margin: 8px 0 16px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.se-card small { margin-top: 12px; font-size: 12px; color: var(--muted); }
.se-card .btn { pointer-events: auto; min-height: 42px; padding: 10px 18px; font-size: 13.5px; }
.pickbar { position: absolute; left: 50%; top: 12px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 6px 6px 6px 15px;
  border-radius: 12px; background: var(--navy); color: #fff; box-shadow: 0 12px 30px #1b344940; font-size: 13px; }
.pk-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-t b { color: var(--apricot); margin-right: 3px; }
.pk-btns { display: flex; gap: 4px; }
.pickbar .btn { min-height: 32px; padding: 6px 11px; background: #ffffff17; border-color: #ffffff30; color: #fff; }
.pickbar .btn:hover { background: #ffffff2b; }
.pickbar .ib { color: #c9d8e3; }
.pickbar .ib:hover { background: #ffffff1a; }
.pv-cap { position: absolute; left: 14px; bottom: 12px; z-index: 3; display: flex; align-items: center; gap: 7px; margin: 0; font-size: 12px; color: #6f675a; pointer-events: none; }
.pv-cap .ic { width: 15px; height: 15px; }
.viewport:has(.selbar:not([hidden])) .pv-cap { display: none; }
.selbar { position: absolute; left: 50%; bottom: 14px; z-index: 6; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; max-width: calc(100% - 24px); padding: 6px 6px 6px 14px;
  border-radius: 12px; background: #fff; box-shadow: 0 10px 28px #1b344933, 0 1px 3px #1b34491f; }
.sb-name { display: flex; flex-direction: column; min-width: 0; margin-right: 6px; }
.sb-name b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.sb-name small { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sb-div { width: 1px; height: 24px; margin: 0 2px; background: var(--line); flex-shrink: 0; }
.selbar .seg-size button { padding: 4px 10px; white-space: nowrap; }
.selbar .btn { min-height: 34px; padding: 6px 11px; }
.tog { width: 32px; height: 32px; min-width: 32px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: #8a9daa; }
.tog .ic { width: 16px; height: 16px; }
.tog:hover { border-color: #aebfcc; color: var(--ink-2); }
.tog[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.tog.mount[aria-pressed="true"] { background: var(--pin); border-color: var(--pin); }

/* Drawers: details and checklist slide in over the right of the stage. */
.insp, .side { position: absolute; right: 12px; top: 66px; bottom: 12px; z-index: 20; width: 320px; display: flex; flex-direction: column; min-height: 0;
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 22px 54px #1b344938, 0 2px 6px #1b34491a;
  visibility: hidden; opacity: 0; transform: translateX(14px); transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 0s 240ms; }
.insp.is-open, .side.is-open { visibility: visible; opacity: 1; transform: none; transition: opacity 200ms var(--ease), transform 240ms var(--ease), visibility 0s; }
.sheet-grip { display: none; }
.insp-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 10px 6px 18px; flex-shrink: 0; }
.insp-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 15px; font-weight: 690; letter-spacing: -.3px; }
.insp-head h2 .ic { color: #47647a; }
.insp-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 18px 22px; scrollbar-width: thin; scrollbar-color: #b4c5d2 transparent; }
.insp-sec { padding: 14px 0 4px; border-top: 1px solid var(--line); margin-top: 6px; }
.insp-sec:first-child { border-top: 0; padding-top: 4px; margin-top: 0; }
.insp-sec > .eyebrow { display: block; margin-bottom: 10px; }
.more-sec summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.more-sec summary::-webkit-details-marker { display: none; }
.more-sec summary::after { content: ''; width: 6px; height: 6px; margin-left: 2px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 160ms var(--ease); }
.more-sec[open] summary::after { transform: rotate(45deg); }
.stat-togs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 12px; }
.stat-tog { min-height: 38px; gap: 8px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 620; color: var(--ink-2); }
.stat-tog .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #98adbc; display: grid; place-items: center; }
.stat-tog .box .ic { width: 11px; height: 11px; stroke-width: 2.6; opacity: 0; }
.stat-tog[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.stat-tog[aria-pressed="true"] .box { border-color: #fff; background: #fff; color: var(--navy); }
.stat-tog[aria-pressed="true"] .box .ic { opacity: 1; }
.stat-tog.mount[aria-pressed="true"] { background: var(--pin); border-color: var(--pin); }
.stat-tog.mount[aria-pressed="true"] .box { color: var(--pin); }
.media-prev { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.media-prev .mp { width: 96px; height: 56px; flex-shrink: 0; display: grid; place-items: center; background: #eef3f6; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.media-prev .mp img { max-width: 100%; max-height: 100%; }
.media-prev .mp .ic { width: 22px; height: 22px; color: #8296a6; }
.mp-t { display: flex; flex-direction: column; min-width: 0; }
.mp-t b { font-size: 13.5px; }
.mp-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hint-line { margin: -4px 0 12px; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.media-prev + .hint-line { margin-top: 0; }
.hint-line.warn { color: var(--warn); }
.seg-size { margin-bottom: 12px; }
.seg-size button { flex: 1; }
.swatches { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }
.sw { width: 26px; height: 26px; min-width: 26px; border-radius: 50%; background: var(--c); border: 1px solid #aabbc8; }
.sw:hover { box-shadow: 0 0 0 3px #d3e1ea; }
.sw[aria-pressed="true"] { outline: 2px solid #345f7b; outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: 12.5px; color: var(--ink-2); cursor: pointer; }
.size-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: end; }
.size-row .lockbtn { margin-bottom: 15px; }
.lockbtn.is-fixed { width: 34px; height: 34px; display: grid; place-items: center; color: #8a9daa; }
.range-label { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 620; color: #3d596e; }
.range-label output { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.insp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.insp-actions .btn { justify-content: flex-start; font-size: 12px; }
.insp-actions .btn.danger { grid-column: 1 / -1; }
.board-dims { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 3px; height: 30px; margin: 4px 0 12px; }
.board-dims span { display: grid; place-items: center; font-size: 11px; color: #48647a; background: #e9eff4; border: 1px solid #cbd9e3; border-radius: 2px; font-variant-numeric: tabular-nums; }

/* Checklist drawer */
.prog { padding: 4px 18px 14px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.prog-top { display: flex; align-items: baseline; gap: 9px; }
.prog-pct { font-size: 28px; line-height: 1; font-weight: 720; letter-spacing: -1.1px; font-variant-numeric: tabular-nums; }
.prog-stage { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-2); }
.prog-top .due { margin-left: auto; align-self: center; }
.prog .meter { margin: 12px 0 9px; }
.prog-counts { display: flex; gap: 14px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.prog-counts b { color: var(--ink); font-weight: 650; }
.next-btn { width: 100%; margin-top: 13px; padding: 9px 11px 9px 12px; justify-content: space-between; text-align: left; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; }
.next-btn:hover { border-color: #aabdcb; background: #fdfefe; }
.next-btn span { display: flex; flex-direction: column; gap: 1px; }
.next-btn small { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--accent-dark); }
.next-btn b { font-size: 13px; font-weight: 650; }
.next-btn .ic { color: var(--accent-dark); }
.next-btn.is-done small, .next-btn.is-done .ic { color: var(--ok); }
.tabs { display: flex; gap: 20px; padding: 0 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.tabs button { min-height: 42px; gap: 6px; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; font-size: 12.5px; font-weight: 560; color: var(--ink-2); }
.tabs button:hover { color: var(--navy); }
.tabs button[aria-selected="true"] { color: var(--navy); border-bottom-color: var(--navy); font-weight: 680; }
.pane { flex: 1; min-height: 0; overflow: auto; padding: 14px 18px 22px; scrollbar-width: thin; scrollbar-color: #b4c5d2 transparent; }
.pane-note { margin: 0 0 6px; font-size: 12px; line-height: 1.5; color: var(--muted); }
.pgroup-h { display: flex; justify-content: space-between; margin: 16px 0 6px; }
.pgroup-h span:last-child { font-weight: 600; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.plist ol { list-style: none; margin: 0; padding: 0; }
.prow { display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 0; border-radius: 7px; position: relative; }
.prow:hover { background: #eef3f7; }
.prow.is-sel { background: #e1eaf1; }
.prow-main { flex: 1; min-width: 0; justify-content: flex-start; gap: 10px; padding: 5px 6px; border-radius: 6px; text-align: left; }
.pthumb { position: relative; width: 44px; height: 36px; flex-shrink: 0; display: grid; place-items: center; }
.pthumb .tp { position: relative; overflow: hidden; background: #fff; box-shadow: 0 1px 2px #00000026, 0 2px 5px #0000000f; }
.pthumb .tp.is-bare { background: none; box-shadow: none; }
.prow-text { display: flex; flex-direction: column; min-width: 0; }
.prow-name { font-size: 12.5px; font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-size { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prow-size .warn { color: var(--warn); font-weight: 600; }
.plist-empty { margin: 12px 0 0; padding: 16px; border: 1px dashed var(--line-2); border-radius: 8px; color: var(--ink-2); font-size: 12.5px; line-height: 1.5; text-align: center; }
.due-field { margin-bottom: 6px; }
.due-line { margin: 0 0 4px; font-size: 12px; color: var(--muted); min-height: 22px; }
.pane-h { margin: 18px 0 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); }
.auto-list, .check-list { list-style: none; margin: 0; padding: 0; }
.auto-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 12.5px; }
.auto-list .ok { width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid #a6b8c5; }
.auto-list .ok .ic { width: 12px; height: 12px; stroke-width: 2.4; opacity: 0; }
.auto-list li.is-done .ok { background: var(--ok); border-color: var(--ok); color: #fff; }
.auto-list li.is-done .ok .ic { opacity: 1; }
.auto-list .frac { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.check-list li { display: flex; align-items: center; gap: 6px; border-radius: 6px; }
.check-list li:hover { background: #eef3f7; }
.check-list .ct { flex: 1; min-width: 0; min-height: 32px; padding: 6px; border: 1px solid transparent; background: transparent; font-size: 12.5px; border-radius: 5px; }
.check-list .ct:hover { border-color: transparent; }
.check-list .ct:focus { background: #fff; border-color: #b3c5d2; }
.check-list li.is-done .ct { text-decoration: line-through; text-decoration-color: #9fb0bd; color: var(--muted); }
.check-list .del { width: 28px; height: 28px; min-width: 28px; opacity: 0; color: #8a9daa; }
.check-list li:hover .del, .check-list .del:focus-visible { opacity: 1; }
.check-add { display: flex; gap: 6px; margin: 8px 0 4px; }
.check-add input { min-height: 34px; }
.notes-field { margin-top: 18px; }
.scrim { display: none; }

/* The physical board. Sizes inside are multiples of --u (one inch). */
.tf-board { position: absolute; transform-style: preserve-3d; }
.tf-panel { position: absolute; top: 0; box-sizing: content-box; transform-style: preserve-3d; background-color: var(--board);
  background-image: var(--grain); border-bottom: calc(var(--u) * .28) solid color-mix(in srgb, var(--board) 78%, #6b6f62);
  box-shadow: inset 0 0 0 1px #00000014; }
.tf-panel.left { transform-origin: 100% 50%; }
.tf-panel.center, .tf-panel.right { transform-origin: 0 50%; }
.tf-panel.left::before, .tf-panel.right::before { content: ''; position: absolute; inset: 0; pointer-events: none; }
.tf-panel.left::before { background: linear-gradient(90deg, #00000014, #00000003); }
.tf-panel.right::before { background: linear-gradient(90deg, #00000003, #00000012); }
.tf-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(#52634e12 1px, transparent 1px), linear-gradient(90deg, #52634e12 1px, transparent 1px); background-size: var(--u) var(--u); }
.is-dark .tf-grid { background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px); }
.anchor { position: absolute; width: 0; height: 0; pointer-events: none; }
.tf-pname { position: absolute; left: 0; right: 0; bottom: calc(var(--u) * .55); text-align: center; font-size: calc(var(--u) * .55); letter-spacing: .12em; text-transform: uppercase; color: #5e6d67; pointer-events: none; }
.is-dark .tf-pname { color: #ffffff80; }
.tf-dim { position: absolute; left: 0; right: 0; top: calc(100% + var(--u) * .9); padding-top: calc(var(--u) * .3); border-top: 1px solid #95a7b3; text-align: center; font-size: calc(var(--u) * .62); font-weight: 550; color: #556e7c; pointer-events: none; font-variant-numeric: tabular-nums; }
.tf-dim::before, .tf-dim::after { content: ''; position: absolute; top: -4px; height: 7px; border-left: 1px solid #95a7b3; }
.tf-dim::before { left: 0; } .tf-dim::after { right: 0; }
.tf-hdim { position: absolute; left: calc(var(--u) * -2); top: 0; height: 100%; width: calc(var(--u) * .6); border-left: 1px solid #95a7b3; pointer-events: none; }
.tf-hdim span { position: absolute; top: 50%; left: calc(var(--u) * -1.1); transform: translateY(-50%) rotate(-90deg); font-size: calc(var(--u) * .62); font-weight: 550; color: #556e7c; white-space: nowrap; }
.tf-drop { position: absolute; inset: 0; display: none; background: #ffd2a81f; box-shadow: inset 0 0 0 2px #d4815599; pointer-events: none; transform: translateZ(.5px); }
.tf-panel.is-target .tf-drop { display: block; }
.hide-dims .tf-dim, .hide-dims .tf-hdim { display: none; }

.piece { position: absolute; left: 0; top: 0; transform-origin: center; transform-style: preserve-3d; -webkit-user-select: none; user-select: none; touch-action: none; }
.is-live .piece { cursor: grab; outline: 0; }
.piece .paper { background-color: #fff; background-image: var(--grain); box-shadow: calc(var(--u) * .05) calc(var(--u) * .2) calc(var(--u) * .32) #27351d2e; }
/* Pages look like the printed sheet from the start; printed and glued-on show as a clip and pins. */
.piece.is-bare .paper { background: none; box-shadow: none; }
.viewport:not(.is-preview) .piece.is-bare .paper { outline: max(1px, calc(var(--u) * .05)) dashed #8ea3b380; }
.pin { position: absolute; top: calc(var(--u) * .28); width: calc(var(--u) * .44); height: calc(var(--u) * .44); border-radius: 50%; transform: translateZ(1px); pointer-events: none;
  background: radial-gradient(circle at 32% 26%, #ffc591, #dc7648 56%, #9e4426 84%); box-shadow: calc(var(--u) * .05) calc(var(--u) * .1) calc(var(--u) * .1) #0006; }
.pin-l { left: calc(var(--u) * .28); } .pin-r { right: calc(var(--u) * .28); }
.clip { position: absolute; top: calc(var(--u) * -.22); left: 50%; width: calc(var(--u) * 1.5); height: calc(var(--u) * .55); transform: translateX(-50%) translateZ(1px); pointer-events: none;
  border-radius: calc(var(--u) * .12); background: linear-gradient(#a9b9c5, #dbe3e8 45%, #8fa3b3 48%, #b3c3cf); box-shadow: 0 calc(var(--u) * .08) calc(var(--u) * .08) #0000004d; }
.ptag { position: absolute; left: 50%; bottom: 100%; margin-bottom: calc(var(--u) * .55); display: none; padding: calc(var(--u) * .16) calc(var(--u) * .32); transform: translateX(-50%) translateZ(3px);
  border-radius: 3px; background: var(--navy); color: #fff; font: 650 calc(var(--u) * .56) / 1 var(--font); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; }
.show-sizes .ptag { display: block; left: auto; right: calc(var(--u) * .2); bottom: calc(var(--u) * .2); margin: 0; transform: translateZ(3px); background: #203d52d9; font-size: calc(var(--u) * .5); }
.piece.is-sel .ptag { display: block; left: 50%; right: auto; bottom: 100%; margin-bottom: calc(var(--u) * .55); transform: translateX(-50%) translateZ(3px); background: var(--navy); font-size: calc(var(--u) * .56); }
.piece.is-sel { outline: max(2px, calc(var(--u) * .1)) solid #d2734a; outline-offset: calc(var(--u) * .18); }
.piece:focus-visible { outline: max(2px, calc(var(--u) * .1)) solid var(--focus); outline-offset: calc(var(--u) * .18); }
.handle { position: absolute; right: calc(var(--u) * -.42); bottom: calc(var(--u) * -.42); display: none; width: calc(var(--u) * .74); height: calc(var(--u) * .74); transform: translateZ(3px);
  border: max(2px, calc(var(--u) * .1)) solid #d2734a; border-radius: 2px; background: #fff; cursor: nwse-resize; }
.handle::before { content: ''; position: absolute; inset: -8px; }
.piece.is-sel .handle { display: block; }
.piece.is-dragging { cursor: grabbing; }
.piece.is-dragging .paper { box-shadow: calc(var(--u) * .2) calc(var(--u) * .6) calc(var(--u) * .9) #27351d40; }
.piece.is-bad::after { content: ''; position: absolute; inset: calc(var(--u) * -.12); border: max(2px, calc(var(--u) * .09)) dashed #c4532e; pointer-events: none; transform: translateZ(2px); }
.piece.is-overflow .paper::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--u) * .7); background: linear-gradient(#f4d6c700, #f0c3ad); pointer-events: none; }
.piece.is-new { animation: land 480ms var(--ease) backwards; }   /* no fill afterwards: nothing left running once it lands */
@keyframes land { from { opacity: 0; translate: 0 calc(var(--u) * -.5); } to { opacity: 1; translate: 0 0; } }
/* Where a page from the tray will land, at the size it will print. */
.landing { position: absolute; left: 0; top: 0; pointer-events: none; background: #fff; border-radius: 1px;
  outline: max(2px, calc(var(--u) * .12)) dashed var(--accent); outline-offset: calc(var(--u) * .12); box-shadow: 0 calc(var(--u) * .3) calc(var(--u) * .9) #1d3a5038; }
.landing img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: .82; }
.landing span { position: absolute; left: 50%; top: 100%; transform: translate(-50%, calc(var(--u) * .45)); padding: calc(var(--u) * .18) calc(var(--u) * .35); border-radius: 3px;
  background: var(--accent-dark); color: #fff; font: 650 calc(var(--u) * .6) / 1 var(--font); white-space: nowrap; font-variant-numeric: tabular-nums; }


/* ---------- Dialogs ---------- */
dialog { border: 0; border-radius: 14px; padding: 0; color: var(--ink); background: #fbfcfd; box-shadow: 0 30px 80px #0b1d2b55, 0 2px 8px #0b1d2b22; max-width: calc(100vw - 32px); max-height: calc(100dvh - 32px); }
dialog::backdrop { background: #1b3449a8; }
dialog[open] { animation: rise 260ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.dlg { position: relative; width: 580px; max-width: 100%; padding: 26px 28px 22px; }
.dlg-sm { width: 420px; }
.dlg h2 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 690; letter-spacing: -.6px; }
.dlg-sub { margin: 7px 0 20px; font-size: 13px; line-height: 1.55; color: var(--ink-2); }
.dlg-x { position: absolute; right: 12px; top: 12px; }
.dlg-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 22px; }
.choices { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; min-width: 0; }
.choices.two { grid-template-columns: 1fr 1fr; }
.choices.three { grid-template-columns: repeat(3, 1fr); }
.choices legend { padding: 0; margin-bottom: 7px; font-size: 11.5px; font-weight: 620; color: #3d596e; }
.choice { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.choice:hover { border-color: #a9bccb; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice:has(input:checked) { border-color: var(--navy); background: #f2f6f9; box-shadow: inset 0 0 0 1px var(--navy); }
.choice:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.choice-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-t b { font-size: 13px; font-weight: 680; }
.choice-t small { font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.choice-art { flex-shrink: 0; width: 46px; height: 34px; display: grid; place-items: center; }
.choice-art i { display: block; width: calc(var(--w) * .9px); height: calc(var(--h) * .9px); border: 1.5px solid #6f8799; border-radius: 1px;
  background: linear-gradient(90deg, transparent calc(25% - .75px), #6f8799 calc(25% - .75px) calc(25% + .75px), transparent 0 calc(75% - .75px), #6f8799 calc(75% - .75px) calc(75% + .75px), transparent 0), #f6f3e9; }
.choice:has(input:checked) .choice-art i { border-color: var(--navy); }

.pd { width: min(1060px, calc(100vw - 32px)); height: min(840px, calc(100dvh - 32px)); }
.pd[open] { display: flex; flex-direction: column; }
.pd-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 24px; border-bottom: 1px solid var(--line); }
.pd-head h2 { margin: 0; font-size: 18px; font-weight: 690; letter-spacing: -.4px; }
.pd-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px minmax(0, 1fr); }
.pd-side { overflow: auto; padding: 18px 22px 22px; border-right: 1px solid var(--line); }
.pd-modes { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; }
.pd-mode { display: flex; gap: 10px; padding: 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; cursor: pointer; }
.pd-mode:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: #f2f6f9; }
.pd-mode input { margin-top: 2px; accent-color: var(--navy); }
.pd-mode span { display: flex; flex-direction: column; gap: 3px; }
.pd-mode b { font-size: 13px; }
.pd-mode small { font-size: 11.5px; line-height: 1.45; color: var(--muted); }
.pd-which { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; border: 0; }
.pd-which legend { padding: 0; margin-bottom: 7px; font-size: 11.5px; font-weight: 620; color: #3d596e; }
.pd-which label { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.pd-which input { accent-color: var(--navy); margin: 0; }
.pd-which b { color: var(--muted); font-weight: 550; font-variant-numeric: tabular-nums; }
/* The job and the Print button stay in view at the bottom of the column when the options are taller than the dialog. */
.pd-go { position: sticky; bottom: 0; z-index: 2; margin: 0 -22px -22px; padding: 12px 22px 18px; background: var(--panel); border-top: 1px solid var(--line); }
.pd-go .pd-after { margin-top: 10px; }
.pd-job { display: flex; align-items: center; gap: 11px; margin: 0 0 10px; padding: 8px 12px 8px 9px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; }
.pj-n { flex-shrink: 0; min-width: 32px; height: 32px; padding: 0 7px; display: grid; place-items: center; border-radius: 7px; background: var(--navy); color: #fff; font: 700 16px/1 var(--font); font-variant-numeric: tabular-nums; }
.pj-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pj-t b { font-size: 12.5px; }
.pj-t small { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.pd-note { margin: 0 0 14px; padding: 11px 12px; border-radius: 7px; background: #edf2f6; font-size: 12px; line-height: 1.55; color: #48627a; }
.pd-note b { color: var(--ink); }
.pd-after { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; border-radius: 8px; background: var(--accent-light); font-size: 12.5px; color: var(--accent-dark); font-weight: 600; }
.pd-after .btn { margin-left: auto; min-height: 32px; font-size: 12px; }
.pd-save { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.pd-save h3 { margin: 0 0 10px; font-size: 13px; font-weight: 680; }
.pd-save p { margin: 8px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pd-preview { min-height: 0; background: #d9e2e9; }
.pd-preview iframe { display: block; width: 100%; height: 100%; border: 0; }

/* A grid, not width:100% buttons: percentage-wide buttons make a shrink-to-fit box as wide as the window. */
.menu { position: fixed; z-index: 60; display: grid; max-width: calc(100vw - 16px); min-width: 196px; padding: 5px; background: #fff; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 14px 36px #1b344938; }
.menu button { min-height: 34px; justify-content: flex-start; gap: 10px; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; text-align: left; }
.menu button:hover, .menu button:focus-visible { background: #eef3f7; outline: 0; }
.menu button.danger { color: #a3322b; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }

.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; display: flex; align-items: center; gap: 14px; width: max-content; max-width: calc(100vw - 32px); padding: 11px 16px; border-radius: 9px;
  background: var(--navy); color: #fff; font-size: 13px; box-shadow: 0 12px 30px #0000003d; transform: translate(-50%, calc(100% + 40px)); visibility: hidden; transition: transform 240ms var(--ease), visibility 0s 240ms; pointer-events: none; }
.toast.show { transform: translate(-50%, 0); visibility: visible; transition: transform 240ms var(--ease), visibility 0s; }
.toast.has-action { pointer-events: auto; }
.toast button { padding: 4px 6px; border-radius: 4px; color: var(--apricot); font-weight: 700; }
.toast button:hover { background: #ffffff1a; }
.is-editing .toast { bottom: 84px; }


/* ---------- Mid-size windows (the portfolio's TV frame, small laptops) ---------- */
@media (max-width: 1100px) and (min-width: 761px) {
  .ed-main { grid-template-columns: 236px minmax(0, 1fr); }
  .tray-grid { gap: 8px; }
  .ed-meta, .save-state span { display: none; }
  .fit-state .fs-t { display: none; }
  .fit-state.is-warn .fs-t { display: inline; max-width: 140px; }
  .seg-size button { padding: 4px 8px; }
  .sb-name b { max-width: 120px; }
}

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .hide-sm { display: none !important; }
  .wrap { width: calc(100% - 32px); }
  .topbar-in { height: 54px; }
  .brand { font-size: 19px; gap: 8px; }
  .brandmark { width: 26px; height: 26px; }
  .topbar .btn { padding: 8px 10px; }
  .home-main { padding: 16px 0 48px; }
  .drop { padding: 26px 18px 22px; border-radius: 16px; }
  .drop-art { width: 190px; height: 74px; margin-bottom: 10px; }
  .drop h1 { font-size: 26px; letter-spacing: -.8px; }
  .drop-lead { font-size: 14.5px; margin: 8px 0 18px; }
  .drop .btn.big { width: 100%; }
  .hero-alt { flex-direction: column; gap: 2px; }
  .hero-or { display: none; }
  .shelf { margin-top: 28px; }
  .cards { grid-template-columns: 1fr; gap: 14px; }
  .card-stage { height: 180px; }

  .editor { grid-template-rows: 52px minmax(0, 1fr); }
  .ed-head { gap: 4px; padding: 0 6px 0 2px; }
  .ed-titlebox { padding-left: 2px; border-left: 0; }
  .ed-head input.ed-name { font-size: 15px; max-width: 100%; }
  .ed-meta, .save-state span { display: none; }
  .ed-head .btn { padding: 8px 9px; gap: 5px; }
  .ed-main { display: flex; flex-direction: column; min-width: 0; }
  .stage { flex: 1; min-height: 0; }
  .toolbar { height: 48px; padding: 0 6px; gap: 2px; }
  .seg-mode button { padding: 5px 11px; font-size: 12.5px; }
  .fit-state { margin-left: 6px; }
  .fit-state .fs-t, .fit-state button { display: none; }
  .tb { margin-left: 2px; padding: 6px 9px; }

  /* The tray becomes a strip of pages under the board. */
  .tray { order: 2; flex: 0 0 auto; border-right: 0; border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); box-shadow: 0 -6px 18px #1b34490f; }
  .tray-head { padding: 8px 10px 6px 14px; }
  .tray-head h2 { font-size: 13.5px; }
  .tray-job { margin: 0 10px 6px; padding: 7px 10px; }
  .tray-top { padding: 0 10px; }
  .tray-top .tray-hint { display: none; }
  .tray-top .auto-btn { min-height: 36px; margin-bottom: 8px; }
  .tray-done { margin-bottom: 8px; padding: 6px 10px; }
  .tray-empty { display: none; }
  .tray-grid { flex: 0 0 auto; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 104px; padding: 2px 10px 10px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .tpage { touch-action: pan-x; }
  .tray-own { display: none; }

  .pickbar { left: 8px; right: 8px; top: 8px; transform: none; max-width: none; flex-wrap: wrap; gap: 6px; padding: 8px 8px 8px 12px; }
  .pk-t { flex: 1 1 100%; white-space: normal; order: 0; padding-right: 30px; }
  .pk-btns { flex: 1; }
  .pk-btns .btn { flex: 1; }
  .pickbar .ib { position: absolute; right: 4px; top: 4px; }
  .selbar { left: 8px; right: 8px; bottom: 8px; transform: none; max-width: none; gap: 4px; padding: 6px 6px 6px 12px; }
  .sb-name { flex: 1; }
  .sb-name b { max-width: none; }
  .selbar .ib { width: 34px; min-width: 34px; }
  .sb-div { display: none; }
  .se-card { padding: 18px 18px 16px; }
  .se-card b { font-size: 16px; }
  .pv-cap { display: none !important; }

  .side, .insp { position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 30; width: auto; height: min(78dvh, calc(100dvh - 72px)); border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -12px 40px #1b344933; transform: translateY(calc(100% + 40px)); opacity: 1; padding-bottom: env(safe-area-inset-bottom); }
  .side.is-open, .insp.is-open { transform: none; }
  .insp { z-index: 32; }
  .sheet-grip { display: block; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 2px; background: #c3d0da; flex-shrink: 0; }
  .insp-head { padding: 4px 8px 4px 16px; }
  .insp-body, .pane { padding-left: 16px; padding-right: 16px; }
  .prog { padding: 4px 16px 12px; }
  .tabs { padding: 0 16px; }
  .scrim { display: block; position: fixed; inset: 0; z-index: 25; background: #1b344940; }
  .scrim[hidden] { display: none !important; }
  .choices.two { grid-template-columns: 1fr; }
  .dlg { padding: 22px 18px 18px; }
  .pd-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(220px, 1fr); overflow: auto; }
  .pd-side { border-right: 0; border-bottom: 1px solid var(--line); overflow: visible; }
  .pd { height: calc(100dvh - 24px); }
  .toast { bottom: 18px; }
  /* On a phone the bottom belongs to the page strip and the selection bar, so messages drop in from the top. */
  .is-editing .toast { top: 108px; bottom: auto; transform: translate(-50%, -180px); }
  .is-editing .toast.show { transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Sketch ----------
   The workspace is a sheet of graph paper, and what isn't your board is drawn on it in pencil: the board's outline
   and folds, its inch grid, the dimensions and the labels (hand-lettered: Architects Daughter, SIL OFL). In the 3D
   preview the table is pencil too, its shadow hatched, and the board's edges are inked. The board and the pages on
   it keep their real colours and finish, since that's what you're checking. */
@font-face { font-family: 'Architects Daughter'; src: url(fonts/ArchitectsDaughter-Regular.ttf) format('truetype'); font-display: swap; }
.editor { --paper: #f6f3eb; --graph: rgba(104, 128, 150, .13); --graph-2: rgba(104, 128, 150, .26); --pencil: #383d44; --pencil-2: rgba(56, 61, 68, .5);
  --hand: 'Architects Daughter', 'Bradley Hand', 'Segoe Print', cursive; }
.viewport, .viewport.is-preview {
  background-color: var(--paper);
  background-image: radial-gradient(ellipse at 50% 45%, transparent 55%, #8c7b5a1f 100%),
    linear-gradient(var(--graph-2) 1px, transparent 1px), linear-gradient(90deg, var(--graph-2) 1px, transparent 1px),
    linear-gradient(var(--graph) 1px, transparent 1px), linear-gradient(90deg, var(--graph) 1px, transparent 1px);
  background-size: 100% 100%, 110px 110px, 110px 110px, 22px 22px, 22px 22px; background-position: center;
}
/* the board's outline, inked by hand: a firm line and a lighter second pass just outside it */
.tf-panel::after { content: ''; position: absolute; inset: 0; pointer-events: none; filter: url(#pencil);
  border: max(1.5px, calc(var(--u) * .07)) solid var(--pencil); outline: max(1px, calc(var(--u) * .035)) solid var(--pencil-2); outline-offset: calc(var(--u) * .14); }
.tf-grid, .is-dark .tf-grid { background-image: linear-gradient(rgba(56, 61, 68, .17) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 61, 68, .17) 1px, transparent 1px),
    linear-gradient(rgba(56, 61, 68, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(56, 61, 68, .07) 1px, transparent 1px);
  background-size: calc(var(--u) * 6) calc(var(--u) * 6), calc(var(--u) * 6) calc(var(--u) * 6), var(--u) var(--u), var(--u) var(--u); }
.is-dark .tf-grid { background-image: linear-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .16) 1px, transparent 1px),
    linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px); }
.tf-pname { font-family: var(--hand); font-size: calc(var(--u) * .66); letter-spacing: .08em; color: #4f565c; }
/* dimensions as on a sketch: pencil line, slashes at the ends, the size written by hand */
.tf-dim { border-top: max(1.2px, calc(var(--u) * .05)) solid var(--pencil); color: var(--pencil); font-family: var(--hand); font-weight: 400; font-size: calc(var(--u) * .74); letter-spacing: .03em; }
.tf-dim::before, .tf-dim::after { top: -6px; height: 11px; border-left: 1.5px solid var(--pencil); transform: rotate(45deg); }
.tf-hdim { border-left: max(1.2px, calc(var(--u) * .05)) solid var(--pencil); }
.tf-hdim::before, .tf-hdim::after { content: ''; position: absolute; left: -6px; width: 11px; border-top: 1.5px solid var(--pencil); transform: rotate(-45deg); }
.tf-hdim::before { top: 0; } .tf-hdim::after { bottom: 0; }
.tf-hdim span { color: var(--pencil); font-family: var(--hand); font-weight: 400; font-size: calc(var(--u) * .74); letter-spacing: .03em; }
.piece .paper { box-shadow: 0 0 0 max(1px, calc(var(--u) * .03)) rgba(56, 61, 68, .45), calc(var(--u) * .05) calc(var(--u) * .2) calc(var(--u) * .32) #27351d2e; }
/* the empty board's note, pinned on like a scrap of sketch paper */
.se-card { background: #fffdf6; border: 1.5px solid var(--pencil); border-radius: 4px; transform: rotate(-.6deg); box-shadow: 4px 6px 0 rgba(56, 61, 68, .12), 0 18px 40px #1b344914; }
.se-card b { font-family: var(--hand); font-size: 21px; font-weight: 400; letter-spacing: 0; }
/* 3D: a pencil table on the paper, hatched where the board's shadow falls */
.table { background: repeating-linear-gradient(-32deg, rgba(56, 61, 68, .09) 0 1.4px, transparent 1.4px 18px), #f2eee4;
  border: 1.6px solid var(--pencil); border-radius: 2px; }
.table::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(58deg, rgba(56, 61, 68, .38) 0 1.4px, transparent 1.4px 8px);
  -webkit-mask-image: radial-gradient(42% 16% at 50% 11%, #000 0, #000 55%, transparent 100%); mask-image: radial-gradient(42% 16% at 50% 11%, #000 0, #000 55%, transparent 100%); }
.pv-cap { font-family: var(--hand); font-size: 14px; color: #4f565c; }
.tray { background-image: linear-gradient(rgba(104, 128, 150, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 128, 150, .12) 1px, transparent 1px); background-size: 16px 16px; }

/* ---------- Pinboard ----------
   Pages are pinned up as in Trifold's write-up: each a sheet with its own small pushpin, the same pin in the tray and on
   the board. Picked up, a page comes off its pin, already exactly the size it will be on the board, lifted by its
   shadow and a little swing; on the board the pin goes in and the page swings to rest square, since the board shows
   exactly where it will be glued. Pins are on screen only: a printed page swaps its pin for the clip, a mounted one
   for the two pins, and none is ever printed.
   Round the board, a choice of backdrops (below). */
.editor { --cork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.3' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .28 0 0 0 0 .14 0 0 0 1.9 -1.05'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='1' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .98 0 0 0 0 .92 0 0 0 0 .8 1.9 0 0 0 -1.1'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23d)'/%3E%3Crect width='160' height='160' filter='url(%23l)'/%3E%3C/svg%3E") #d6b78c; }
.tpage { padding: 2px; border-radius: 1px; background: #fffefb; rotate: var(--tilt, 0deg);
  box-shadow: 0 .5px 1px #3d2a1640, 0 3px 7px -2px #3d2a1638;
  transition: box-shadow 160ms var(--ease), translate 160ms var(--ease), rotate 240ms var(--ease); }
.tpage .tp-img { border-radius: 0; background: #fffefb; }
.tpage:hover { transform: none; translate: 0 -2px; rotate: 0deg; box-shadow: 0 1px 1.5px #3d2a1640, 0 9px 16px -6px #3d2a1659; }
.tpage:focus-visible { outline: 2.5px solid var(--navy); outline-offset: 3px; }
.tpage.is-picked { transform: none; translate: 0 -2px; rotate: 0deg; box-shadow: 0 0 0 2.5px var(--accent), 0 10px 18px -6px #3d2a1666; }
.tp-n { width: 18px; min-width: 18px; height: 18px; padding: 0; left: 6px; bottom: 6px; font-size: 10.5px; }
/* the pushpin: a small coloured head catching the light */
.tp-pin { position: absolute; left: 50%; top: -3px; z-index: 2; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 35% 30%, #ffffffb3 0 11%, transparent 30%), radial-gradient(circle at 50% 56%, var(--pin) 0 55%, color-mix(in srgb, var(--pin) 72%, #000) 100%);
  box-shadow: .8px 1.8px 1.6px #2a1a0a66; }
/* gone to the board: the sheet is off, leaving its pin hole and a pencilled outline you can still click */
.tpage.is-placed, .tpage.is-lifted { background: transparent; box-shadow: none; rotate: 0deg; translate: none; }
.tpage.is-placed .tp-img, .tpage.is-lifted .tp-img { background: transparent; }
.tpage.is-placed .tp-img img, .tpage.is-lifted .tp-img img { opacity: .28; filter: grayscale(.6); }
.tpage.is-placed::after, .tpage.is-lifted::after { content: ''; position: absolute; inset: 0; border: 1px dashed #4a3a2a80; border-radius: 1px; pointer-events: none; }
.tpage.is-placed::before, .tpage.is-lifted::before { content: ''; position: absolute; left: 50%; top: 1px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: #3d2a1699; }
.tp-on { padding: 2px 7px 2px 5px; font-size: 10.5px; }
/* the pin coming out (picked up, or sent to the board), and going back in (let go off the board) */
.tpage.is-lifted .tp-pin, .tp-pin.is-off { opacity: 0; animation: tp-unpin 260ms var(--ease) var(--d, 0ms) backwards; }
.tpage.is-repin .tp-pin { animation: tp-pin-in 300ms cubic-bezier(.3, 1.5, .5, 1) backwards; }
.tpage.is-leaving { animation: tp-leave 300ms var(--ease) calc(var(--d, 0ms) + 90ms) backwards; }
.tpage.is-leaving .tp-img img { animation: tp-fade 300ms var(--ease) calc(var(--d, 0ms) + 90ms) backwards; }
.tpage.is-leaving::before, .tpage.is-leaving::after, .tpage.is-leaving .tp-on { animation: tp-show 240ms var(--ease) calc(var(--d, 0ms) + 210ms) backwards; }
@keyframes tp-unpin { from { opacity: 1; } 40% { opacity: 1; translate: 0 -5px; rotate: 10deg; } to { opacity: 0; translate: 3px -11px; rotate: 30deg; } }
@keyframes tp-pin-in { from { opacity: 0; scale: 1.7; translate: 0 -6px; } 60% { opacity: 1; scale: .92; translate: 0 0; } to { scale: 1; } }
@keyframes tp-leave { from { background: #fffefb; rotate: var(--tilt, 0deg); box-shadow: 0 .5px 1px #3d2a1640, 0 3px 7px -2px #3d2a1638; } }
@keyframes tp-fade { from { opacity: 1; filter: none; } }
@keyframes tp-show { from { opacity: 0; } }
/* the page in your hand: its true size on the board (set as you drag), held by its middle, lifted only by its
   shadow and a little swing, never scaled */
.tray-ghost { width: auto; margin: 0; }
.tray-ghost img { width: 100%; height: 100%; object-fit: cover; padding: 0; border-radius: 0; background: #fff; transform-origin: 50% 50%; rotate: var(--tilt, 0deg); scale: none;
  box-shadow: 0 0 0 1px #3d2a1626, 0 22px 36px -8px #1b344966, 0 5px 10px #1b34492e; animation: tg-lift 200ms var(--ease) backwards; }
.tray-ghost span { left: -6px; top: -7px; }
@keyframes tg-lift { from { box-shadow: 0 0 0 1px #3d2a1626, 0 1px 2px #3d2a1640, 0 0 0 transparent; } }
/* on the board: the same pin, and the page swinging in on it as it lands */
.tack { position: absolute; left: 50%; top: calc(var(--u) * .18); width: calc(var(--u) * .36); height: calc(var(--u) * .36); margin-left: calc(var(--u) * -.18); border-radius: 50%; pointer-events: none;
  transform: translateZ(1.5px);
  background: radial-gradient(circle at 35% 30%, #ffffffb3 0 11%, transparent 30%), radial-gradient(circle at 50% 56%, var(--pin) 0 55%, color-mix(in srgb, var(--pin) 72%, #000) 100%);
  box-shadow: calc(var(--u) * .04) calc(var(--u) * .09) calc(var(--u) * .08) #2a1a0a66;
  transition: opacity 160ms var(--ease), scale 260ms cubic-bezier(.3, 1.5, .5, 1), translate 260ms cubic-bezier(.3, 1.5, .5, 1); }
.is-preview .tack { display: none; }
.piece.is-dragging .tack { opacity: 0; scale: 1.5; translate: 0 calc(var(--u) * -.35); }
.piece.is-new { animation-delay: var(--d, 0ms); }
.piece.type-page.is-new { animation-duration: 340ms; }
.piece.type-page.is-new .paper { transform-origin: 50% calc(var(--u) * .36); animation: tack-swing 720ms cubic-bezier(.25, .6, .35, 1) calc(var(--d, 0ms) + 190ms) backwards; }
.piece.type-page.is-new .tack { animation: tack-in 300ms cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0ms) + 150ms) backwards; }
@keyframes tack-swing { from { rotate: var(--wob, 0deg); } 35% { rotate: calc(var(--wob, 0deg) * -.45); } 68% { rotate: calc(var(--wob, 0deg) * .16); } to { rotate: 0deg; } }
@keyframes tack-in { from { opacity: 0; scale: 1.8; translate: 0 calc(var(--u) * -.4); } 60% { opacity: 1; scale: .92; translate: 0 0; } to { scale: 1; } }

/* The cork tray, the same under every backdrop: fine and pale so the pages read first, in a thin neat frame. */
.tray { background-image: none; background-color: #f8f7f3; }
.tray-grid { margin: 0 12px 12px; padding: 14px 12px 14px; gap: 14px 12px; border-radius: 6px;
  background: var(--cork); background-attachment: local; scrollbar-color: #a88560 transparent;
  border: 3px solid #b58c5f; box-shadow: inset 0 0 0 1px #8d6640, inset 0 1px 5px #3d2a1633, 0 1px 2px #3d2a1626; }
@media (max-width: 760px) {
  .tray-grid { margin: 0 8px 8px; padding: 11px 9px 9px; gap: 9px; border-width: 2.5px; }
}

/* ---------- Backdrops ----------
   What's round the board, picked with the swatches in the toolbar (in More on a phone) and remembered on the device:
   Pinboard, quiet graph paper; Chalkboard, the write-up's green board with its ghosted wipes, chalk dust, chalk marks
   and ledge; Blueprint, blueprint blue with a fine white grid and white dimension and extension lines. The board and
   the pages keep their real colours and their folds stay pencil-dark in all three, nothing here changes a size, and
   the top bar takes a tint that sits with each. */
.editor { --graph: rgba(104, 128, 150, .065); --graph-2: rgba(104, 128, 150, .13); }
.viewport, .viewport.is-preview { background-image: radial-gradient(ellipse at 50% 45%, transparent 60%, #8c7b5a12 100%),
    linear-gradient(var(--graph-2) 1px, transparent 1px), linear-gradient(90deg, var(--graph-2) 1px, transparent 1px),
    linear-gradient(var(--graph) 1px, transparent 1px), linear-gradient(90deg, var(--graph) 1px, transparent 1px); }
.seg-bg { margin-right: 6px; }
.seg-bg button { width: 30px; min-height: 28px; padding: 0; justify-content: center; }
.seg-bg .sw { display: block; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000030; }
.seg-bg [data-bg="pinboard"] .sw, .mg-o [data-bg="pinboard"] .sw { background: linear-gradient(#6880964d 1px, transparent 1px) 0 0 / 5px 5px, linear-gradient(90deg, #6880964d 1px, transparent 1px) 0 0 / 5px 5px, #f6f3eb; }
.seg-bg [data-bg="chalk"] .sw, .mg-o [data-bg="chalk"] .sw { background: radial-gradient(circle at 32% 34%, #ffffff36, transparent 58%), #2b3a32; }
.seg-bg [data-bg="blueprint"] .sw, .mg-o [data-bg="blueprint"] .sw { background: linear-gradient(#ffffff47 1px, transparent 1px) 0 0 / 5px 5px, linear-gradient(90deg, #ffffff47 1px, transparent 1px) 0 0 / 5px 5px, #1f4f8a; }
.seg-bg button[aria-pressed="true"] .sw { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--navy); }
/* on the dark backdrops the marks round the board are chalk or white; the board's own outline and folds stay pencil */
[data-backdrop="chalk"] .viewport { --pencil: rgba(240, 240, 232, .86); --pencil-2: rgba(240, 240, 232, .38); }
[data-backdrop="blueprint"] .viewport { --pencil: rgba(255, 255, 255, .92); --pencil-2: rgba(255, 255, 255, .42); }
/* the board's own pencil outline (and its second pass) is part of the board, so it never takes the backdrop's colour */
.tf-panel::after { border-color: #383d44; outline-color: rgba(56, 61, 68, .5); }
/* laid flat, the board is backed in its own colour, so no backdrop shows through the hairline seams at its folds */
.viewport:not(.is-preview) .tf-board { background-color: var(--board); }
[data-backdrop="chalk"] .se-card, [data-backdrop="blueprint"] .se-card { border-color: #383d44; }
[data-backdrop="chalk"] .pv-cap { color: rgba(240, 240, 232, .8); }
[data-backdrop="blueprint"] .pv-cap { color: rgba(255, 255, 255, .85); }
/* Chalkboard */
[data-backdrop="chalk"] .viewport, [data-backdrop="chalk"] .viewport.is-preview { background-color: #26332c; background-size: auto; background-position: 0 0;
  background-image: radial-gradient(38% 9% at 24% 22%, #ffffff12, transparent 72%), radial-gradient(30% 7% at 70% 76%, #ffffff0f, transparent 72%),
    radial-gradient(26% 8% at 84% 28%, #ffffff0b, transparent 72%), radial-gradient(34% 10% at 30% 84%, #ffffff0a, transparent 72%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='1' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 .95 0 0 0 2.4 -1.75'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23c)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 45%, transparent 50%, #00000040 100%); }
/* the chalk ledge along its foot: two sticks and the eraser on a wooden lip */
[data-backdrop="chalk"] .viewport::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 17px; pointer-events: none;
  background: linear-gradient(#f2f0e8, #d9d6cc) calc(50% - 40px) 2px / 26px 5px no-repeat, linear-gradient(#f2f0e8, #d9d6cc) calc(50% - 6px) 3px / 15px 4px no-repeat,
    linear-gradient(#cdb893 0 4px, #3d3d42 4px) right 60px top 0 / 46px 8px no-repeat,
    linear-gradient(transparent 7px, #94612f 7px, #7c4f25 13px, #5c3a1a 17px); }
/* Blueprint */
[data-backdrop="blueprint"] .viewport, [data-backdrop="blueprint"] .viewport.is-preview { background-color: #1f4f8a;
  background-image: radial-gradient(ellipse at 50% 45%, transparent 55%, #05142d59 100%),
    linear-gradient(#ffffff29 1px, transparent 1px), linear-gradient(90deg, #ffffff29 1px, transparent 1px),
    linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 100% 100%, 110px 110px, 110px 110px, 22px 22px, 22px 22px; background-position: center; }
/* extension lines, as on a drawing: the board's edges carried out past its corners, starting a little clear of the
   board and fading as they go, so nothing is drawn on or along the board itself */
[data-backdrop="blueprint"] .tf-board::before { content: ''; position: absolute; inset: calc(var(--u) * -3); pointer-events: none; transform: translateZ(-1px);
  --ln: max(1px, calc(var(--u) * .05)); --ext: calc(var(--u) * 2.4); --c: var(--pencil-2);
  background:
    linear-gradient(90deg, transparent, var(--c)) 0 calc(var(--u) * 3) / var(--ext) var(--ln) no-repeat,
    linear-gradient(270deg, transparent, var(--c)) 100% calc(var(--u) * 3) / var(--ext) var(--ln) no-repeat,
    linear-gradient(90deg, transparent, var(--c)) 0 calc(100% - var(--u) * 3) / var(--ext) var(--ln) no-repeat,
    linear-gradient(270deg, transparent, var(--c)) 100% calc(100% - var(--u) * 3) / var(--ext) var(--ln) no-repeat,
    linear-gradient(180deg, transparent, var(--c)) calc(var(--u) * 3) 0 / var(--ln) var(--ext) no-repeat,
    linear-gradient(0deg, transparent, var(--c)) calc(var(--u) * 3) 100% / var(--ln) var(--ext) no-repeat,
    linear-gradient(180deg, transparent, var(--c)) calc(100% - var(--u) * 3) 0 / var(--ln) var(--ext) no-repeat,
    linear-gradient(0deg, transparent, var(--c)) calc(100% - var(--u) * 3) 100% / var(--ln) var(--ext) no-repeat; }
.is-preview .tf-board::before { display: none; }
/* the top bar, tinted to sit with each */
[data-backdrop="chalk"] .ed-head { background: #22362f; }
[data-backdrop="blueprint"] .ed-head { background: #173a63; }
[data-backdrop="chalk"] .ed-head .btn.ghost-dark, [data-backdrop="blueprint"] .ed-head .btn.ghost-dark { border-color: #ffffff3d; }
[data-backdrop="chalk"] .ed-head .btn.ghost-dark:hover, [data-backdrop="blueprint"] .ed-head .btn.ghost-dark:hover { background: #ffffff17; }

/* ---------- Where the pages tray sits ----------
   Picked with the three little layouts in the toolbar (the tray is always the strip along the bottom on a phone) and
   remembered on the device. On the left it's the cork column; along the top or the bottom it becomes a band: the title,
   the auto-arrange button and the make-your-own buttons at the ends, and the cork between them with the pages side by
   side in one row, each as wide as the row allows (set in JS as --tw), scrolling sideways when there are too many. The
   board takes whatever is left, and the drawers sit inside it. */
.seg-tray { margin-right: 6px; }
.seg-tray button { width: 32px; min-height: 28px; padding: 0; justify-content: center; }
.trayico { position: relative; display: block; width: 18px; height: 13px; border: 1.5px solid currentColor; border-radius: 3px; }
.trayico::after { content: ""; position: absolute; border-radius: 1px; background: currentColor; opacity: .8; }
button[data-tray="left"] > .trayico::after { left: 0; top: 0; bottom: 0; width: 5px; }
button[data-tray="top"] > .trayico::after { left: 0; right: 0; top: 0; height: 4px; }
button[data-tray="bottom"] > .trayico::after { left: 0; right: 0; bottom: 0; height: 4px; }

@media (min-width: 761px) {
  :root[data-tray="top"] .ed-main, :root[data-tray="bottom"] .ed-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  :root[data-tray="bottom"] .ed-main { grid-template-rows: minmax(0, 1fr) auto; }
  :root[data-tray="bottom"] .tray { grid-row: 2; }
  :root[data-tray="bottom"] .stage { grid-row: 1; grid-column: 1; }
  :root[data-tray="top"] .tray { border-right: 0; border-bottom: 1px solid var(--line); }
  :root[data-tray="bottom"] .tray { border-right: 0; border-top: 1px solid var(--line); box-shadow: 0 -6px 18px #1b34490d; }
  :root[data-tray="top"] .insp, :root[data-tray="top"] .side { top: calc(66px + var(--tray-h, 0px)); }
  :root[data-tray="bottom"] .insp, :root[data-tray="bottom"] .side { bottom: calc(12px + var(--tray-h, 0px)); }
  :root[data-tray="bottom"] .is-editing .toast { bottom: calc(84px + var(--tray-h, 0px)); }

  .tray.is-strip { display: grid; grid-template-columns: 214px minmax(0, 1fr) auto; align-content: start; max-height: 44vh; }
  .tray.is-strip .tray-head { grid-column: 1; grid-row: 1; padding: 12px 10px 6px 18px; }
  .tray.is-strip .tray-job { grid-column: 1; grid-row: 2; margin: 0 10px 8px 14px; padding: 8px 10px; }
  .tray.is-strip .tray-notes { grid-column: 1; grid-row: 3; margin: 0 10px 8px 14px; max-height: 84px; overflow: auto; }
  .tray.is-strip .tray-top { grid-column: 1; grid-row: 4; padding: 0 10px 12px 14px; }
  .tray.is-strip .tray-top .tray-hint { display: none; }
  .tray.is-strip .tray-top .auto-btn { min-height: 34px; }
  .tray.is-strip .tray-done { padding: 8px 10px; line-height: 1.35; }
  .tray.is-strip .tray-grid { grid-column: 2; grid-row: 1 / span 4; align-self: stretch; margin: 10px 8px 10px 4px; padding: 15px 14px 12px; flex: none;
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--tw, 144px); gap: 12px; align-content: center; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; }
  .tray.is-strip .tray-own { grid-column: 3; grid-row: 1 / span 4; display: flex; flex-direction: column; justify-content: center; padding: 10px 16px 10px 14px; border-top: 0; border-left: 1px solid var(--line); }
  .tray.is-strip .own-btns { grid-template-columns: minmax(104px, 1fr); gap: 5px; margin-top: 6px; }
  .tray.is-strip .own-btns button { min-height: 30px; justify-content: flex-start; padding: 0 10px; }
  .tray.is-strip.is-empty .tray-top { grid-column: 2; grid-row: 1 / span 4; align-self: center; padding: 10px 8px 10px 4px; }
  .tray.is-strip .tray-empty { flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 14px 20px; text-align: left; }
  .tray.is-strip .tray-empty p { margin: 0; }
  .tray.is-strip .tray-empty .btn { flex-shrink: 0; }
}

/* ---------- Moving about the board ----------
   The hint at the bottom of the stage says how: two-finger swipe slides, pinch zooms, dragging the background turns the
   board in 3D, double-click goes back to the framed view; the Recentre button does the same. */
.pv-cap { flex-wrap: wrap; max-width: calc(100% - 28px); padding: 5px 8px 5px 12px; border-radius: 18px; background: #f6f3ebd1; }
[data-backdrop="chalk"] .pv-cap { background: #2b3a32d9; }
[data-backdrop="blueprint"] .pv-cap { background: #1f4f8ad9; }
.pv-recentre { pointer-events: auto; min-height: 24px; padding: 2px 10px; border: 1px solid #aab3ba; border-radius: 12px; background: #ffffffc7; color: #3b4850; font: 600 12px/1 var(--font); }
.pv-recentre:hover { background: #fff; border-color: #6e8ca2; color: var(--navy); }

/* ---------- Taking a page out of the tray ----------
   A small trash button on each page's corner (it shows on hover or focus; on a touch screen it's always there), the
   Delete key on a focused page, and the right-click or long-press menu. On a phone each page has a ⋯ instead. */
.tray-grid > li { position: relative; }
.tp-del, .tp-more { position: absolute; display: grid; place-items: center; padding: 0; }
.tp-del { right: -6px; top: -6px; z-index: 4; width: 24px; height: 24px; border-radius: 50%; border: 1px solid #0000001a; background: #fffefbf2; color: #6b5a47; box-shadow: 0 1px 3px #3d2a1640;
  opacity: 0; scale: .85; transition: opacity 140ms var(--ease), scale 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease); }
.tp-del .ic { width: 13px; height: 13px; stroke-width: 2.1; }
.tray-grid > li:hover .tp-del, .tray-grid > li:focus-within .tp-del { opacity: 1; scale: 1; }
.tp-del:hover, .tp-del:focus-visible { background: #a3322b; border-color: transparent; color: #fff; }
.tp-del:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tp-more { display: none; }
@media (hover: none) { .tp-del { opacity: 1; scale: 1; width: 30px; height: 30px; right: -9px; top: -9px; } }

/* ---------- The page-size notice ----------
   Shown once after a PDF that isn't printer-paper shaped is added: your page, the same page on a sheet, and three ways forward. */
.ps { width: 540px; }
.ps h2 { padding-right: 38px; }
.ps .dlg-sub { margin-bottom: 14px; font-size: 13.5px; }
.ps-figs { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 0 0 16px; padding: 16px 12px 12px; border-radius: 12px; background: #eef3f6; }
.ps-figs figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.ps-figs figcaption { text-align: center; font-size: 12px; line-height: 1.35; color: var(--ink-2); }
.ps-figs figcaption b { color: var(--ink); font-weight: 650; }
.ps-pg, .ps-sheet { background: #fff; border-radius: 2px; box-shadow: 0 0 0 1px #c3d1dc, 0 8px 16px -8px #1d3a5055; overflow: hidden; }
.ps-sheet { display: grid; place-items: center; }
.ps-fit { box-shadow: 0 0 0 1px #c3d1dc; }
.ps-pg img, .ps-fit img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ps-arr .ic { width: 22px; height: 22px; color: #a5411e; }
.ps-opts { display: grid; gap: 9px; }
.ps-opt { display: grid; gap: 3px; width: 100%; min-height: 44px; padding: 12px 14px; text-align: left; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; cursor: pointer; }
.ps-opt:hover { border-color: #8aa6ba; background: #f7fafc; }
.ps-opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.ps-opt.is-rec { border-color: var(--navy); background: #f1f6fa; }
.po-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-t b { font-size: 14.5px; font-weight: 680; }
.po-t i { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: #355f41; background: #e1f0e6; padding: 2px 8px; border-radius: 9px; }
.po-d { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.ps-foot { margin: 14px 2px 0; font-size: 12px; line-height: 1.5; color: var(--ink-2); }

/* ---------- Phones ----------
   Built for a thumb. The toolbar is a dock along the bottom (Pages, Arrange / 3D, undo, recentre, more), the board has
   the whole middle of the screen (pinch to zoom, two fingers or a drag to move), and the pages tray is a sheet that comes
   up over the board from the Pages button: a grid of pages with Auto-arrange on top. Tap a page and the sheet drops away so
   you can see where it goes; tap the spot, and it comes back for the next one. Everything you tap is 44 px or more, and
   text fields are 16 px so the phone doesn't zoom in on them. Nothing here applies on a wider screen. */
.pages-btn, .tray-close, .tray-grip, .fab-recentre, .fab-turn, .fab-auto { display: none; }
@media (max-width: 760px) {
  :root { --dock: calc(62px + env(safe-area-inset-bottom)); }
  .btn, .ib, .tb, .seg button, .menu button, .tog, select { min-height: 44px; }
  .ib, .tb, .tog { min-width: 44px; }
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  input:not([type=checkbox]):not([type=radio]):not([type=file]), select { min-height: 44px; }
  input[type=checkbox], input[type=radio] { width: 22px; height: 22px; }

  /* the header */
  .editor { grid-template-rows: 56px minmax(0, 1fr); }
  .ed-head { gap: 2px; padding: 0 8px 0 2px; }
  .ed-back { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .ed-head input.ed-name { font-size: 16px; font-weight: 700; min-height: 44px; }
  .ed-head .btn { min-height: 44px; min-width: 44px; padding: 0 12px; }
  .save-state { margin-right: 2px; }

  /* the dock */
  .stage { display: flex; flex-direction: column; }
  .toolbar { order: 2; position: relative; z-index: 27; height: var(--dock); padding: 6px 8px env(safe-area-inset-bottom); gap: 6px; background: #fff; border-top: 1px solid var(--line); border-bottom: 0; box-shadow: 0 -4px 16px #1b34490d; }
  .toolbar .spacer { flex: 1; }
  .fit-state { display: none; }
  .pages-btn { display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 12px 0 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 13px; font-weight: 650; }
  .pages-btn .ic { width: 17px; height: 17px; }
  .pages-btn[aria-expanded="true"] { background: var(--navy-2); box-shadow: inset 0 0 0 2px var(--apricot); }
  .pb-n { min-width: 22px; padding: 3px 6px; border-radius: 11px; background: var(--apricot); color: #3b281c; font-size: 11.5px; font-weight: 760; line-height: 1.1; text-align: center; font-variant-numeric: tabular-nums; }
  .pb-n:empty { display: none; }
  .pb-n.is-done { background: #ffffff2e; color: #fff; }
  .seg { padding: 2px; }
  .seg-mode button { min-height: 44px; min-width: 46px; padding: 0 12px; font-size: 13px; }
  .seg-mode .ic { display: none; }

  /* the pages sheet: a strip of thumbnails above the dock that scrolls sideways with the board still in view over it, or,
     dragged up, the whole sheet of pages. It folds away with a swipe down. */
  .tray { position: fixed; left: 0; right: 0; bottom: var(--dock); z-index: 26; order: 0; height: 176px; padding: 26px 0 0; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-rows: auto auto auto auto auto minmax(0, 1fr);
    grid-template-areas: "title chip add close" "job job job job" "notes notes notes notes" "done done done done" "hint hint hint hint" "grid grid grid grid";
    border: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 34px #1b344930;
    transform: translateY(calc(100% + 12px)); visibility: hidden;
    transition: height 280ms var(--ease), transform 280ms var(--ease), visibility 0s 280ms; }
  .tray.is-peek, .tray.is-full { transform: none; visibility: visible; transition: height 280ms var(--ease), transform 280ms var(--ease), visibility 0s; }
  .tray.no-anim, .tray.is-gripping { transition: none; }
  .tray-grip { position: absolute; left: 0; right: 0; top: 0; z-index: 0; display: block; height: 44px; padding: 0; border-radius: 18px 18px 0 0; touch-action: none; cursor: grab; }
  .tray-grip::before { content: ''; position: absolute; left: 50%; top: 9px; width: 42px; height: 5px; margin-left: -21px; border-radius: 3px; background: #c3b9a8; }
  .tray-grip:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
  .tray-head, .tray-top { display: contents; }
  .tray-head h2 { grid-area: title; position: relative; z-index: 0; align-self: stretch; display: flex; align-items: center; padding: 0 0 0 16px; font-size: 16px; touch-action: none; }
  .tray-add { grid-area: add; position: relative; z-index: 1; width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .tray-add > span:last-child { display: none; }
  .tray-close { grid-area: close; position: relative; z-index: 1; display: inline-flex; margin-right: 4px; }
  .tray-top .auto-btn { grid-area: chip; position: relative; z-index: 1; width: auto; min-height: 44px; margin: 0 6px 0 0; padding: 0 14px 0 11px; border-radius: 22px; font-size: 13px; }
  .tray-job { grid-area: job; margin: 2px 14px 8px; }
  .tray-notes { grid-area: notes; margin: 2px 14px 8px; max-height: 84px; overflow: auto; }
  .tray-done { grid-area: done; margin: 2px 14px 8px; padding: 8px 12px; }
  .tray-done .linkish { min-height: 44px; padding: 0 4px; }
  .tray-hint { grid-area: hint; margin: 0 16px 8px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tray-done ~ .tray-hint { display: none; }
  .tray-empty { grid-area: grid; display: flex; margin: 0 14px 12px; }
  .tray.is-empty .tray-hint { grid-area: grid; margin: 4px 16px 14px; white-space: normal; }
  .tray-grid { grid-area: grid; flex: none; min-height: 0; margin: 0 10px 10px; padding: 14px 10px 10px; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 128px; grid-auto-rows: auto; gap: 0 14px; align-content: start;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; border-width: 3px; }
  .tpage { touch-action: pan-x; }
  .tray.is-full .tray-grid { margin-bottom: 14px; padding: 16px 12px 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 18px 12px; overflow-x: hidden; overflow-y: auto; align-self: start; max-height: calc(100% - 14px); }
  .tray.is-full .tpage { touch-action: pan-y; }
  .tray.is-peek ~ .stage .viewport, .tray.is-full ~ .stage .viewport { margin-bottom: var(--peek-h, 176px); }
  .viewport { transition: margin-bottom 280ms var(--ease); }
  .tray.is-full ~ .stage .selbar, .tray.is-full ~ .stage .pickbar { display: none; }
  /* the ⋯ on each page: a big target with a small round button drawn in it */
  .tp-del { display: none; }
  .tp-more { right: -14px; bottom: -14px; z-index: 4; display: grid; width: 44px; height: 44px; border: 0; background: none; box-shadow: none; color: #5a4a38; touch-action: manipulation; }
  .tp-more::before { content: ''; grid-area: 1 / 1; place-self: center; width: 26px; height: 26px; border-radius: 50%; background: #fffefbf2; border: 1px solid #0000001a; box-shadow: 0 1px 3px #3d2a1640; }
  .tp-more .ic { grid-area: 1 / 1; place-self: center; z-index: 1; width: 16px; height: 16px; }

  /* on the board: what a picked page and a selected piece offer */
  .pickbar { top: 10px; padding: 8px 8px 10px 14px; }
  .pickbar .btn { min-height: 44px; }
  .pickbar .ib { top: 2px; right: 2px; }
  .selbar { left: 8px; right: 8px; bottom: 10px; gap: 2px; padding: 6px 6px 6px 12px; }
  .selbar .ib, .selbar .tog { width: 44px; height: 44px; min-width: 44px; }
  .selbar .btn { min-height: 44px; padding: 0 11px; }
  .is-editing .toast { top: 66px; }

  /* menus and sheets */
  .menu { left: 8px !important; right: 8px; top: auto !important; bottom: calc(var(--dock) + 8px); max-height: calc(100dvh - var(--dock) - 24px); overflow: auto; max-width: none; padding: 6px; border-radius: 16px; }
  .menu button { min-height: 48px; padding: 0 14px; font-size: 15px; gap: 12px; }
  .insp-head .ib { width: 44px; height: 44px; }
  .tabs [role=tab] { min-height: 44px; }
  .pd-head .ib { width: 44px; height: 44px; }
  .pd-mode { align-items: center; min-height: 52px; }
  .pd-mode:not(:has(input:checked)) small { display: none; }
  .pd-which label { min-height: 44px; font-size: 14px; }
  .pd-which { gap: 0; }
  .pd-go .btn.wide { min-height: 48px; }

  /* a Recentre button appears on the board once it's been zoomed, moved or turned */
  .fab-recentre { position: absolute; right: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border-radius: 22px; border: 1px solid var(--line-2);
    background: #fff; box-shadow: 0 6px 18px #1b344933; color: var(--ink); font-size: 13px; font-weight: 650; }
  .fab-turn { position: absolute; left: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border-radius: 22px; border: 1px solid var(--line-2);
    background: #fff; box-shadow: 0 6px 18px #1b344933; color: var(--ink); font-size: 13px; font-weight: 650; }
  .fab-turn .ic { width: 17px; height: 17px; }
  .fab-auto { position: absolute; left: 12px; top: 12px; z-index: 5; display: inline-flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 13px; border-radius: 22px; font-size: 13px; font-weight: 650; box-shadow: 0 6px 18px #1b344933; }
  .fab-auto .ic { width: 18px; height: 18px; }
  .viewport:has(.pickbar:not([hidden])) .fab-auto { display: none; }
  /* the ⋯ menu's rows of round choices: backdrop and board colour */
  .menu-grp { display: grid; gap: 6px; padding: 8px 10px 10px; }
  .mg-l { font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: var(--ink-2); }
  .mg-o { display: flex; flex-wrap: wrap; gap: 8px; }
  .menu .mg-o button { flex: 1 1 0; min-width: 44px; max-width: 58px; height: 52px; min-height: 52px; justify-content: center; padding: 0; border-radius: 14px; border: 0; background: none; }
  /* with the look rows in it the menu stops short, so the top of the board stays in view while you try a backdrop or colour */
  .menu:has(.menu-grp) { max-height: min(56dvh, calc(100dvh - var(--dock) - 24px)); }
  .mg-o .sw { display: block; width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 0 0 1px #00000033; background: var(--c, #fff); }
  .menu .mg-o button[aria-checked="true"] .sw { box-shadow: inset 0 0 0 1px #00000033, 0 0 0 2.5px #fff, 0 0 0 4.5px var(--navy); }
  .fab-turn[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
  .viewport:has(.pickbar:not([hidden])) .fab-recentre { display: none; }

  /* more thumb room */
  .brand { min-height: 44px; }
  .linkbtn, .linkish { min-height: 44px; }
  .toast button { min-height: 44px; padding: 0 12px; }
  .stat-tog { min-height: 44px; }
  .insp-sec summary { min-height: 44px; display: flex; align-items: center; }
  .check-list li { min-height: 48px; gap: 0; }
  .check-list .del { width: 44px; height: 44px; min-width: 44px; opacity: 1; }
  .check-list input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 44px; height: 44px; margin: 0; display: grid; place-items: center; background: transparent; border: 0; cursor: pointer; }
  .check-list input[type=checkbox]::before { content: ''; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #8ea3b3; background: #fff center / 14px no-repeat; }
  .check-list input[type=checkbox]:checked::before { border-color: var(--navy); background-color: var(--navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); }
  .check-list input[type=checkbox]:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 10px; }
  .pd-which input, .pd-mode input { flex: none; }

  /* the home screen */
  .topbar-in { height: 56px; }
  .topbar .btn { min-height: 44px; min-width: 44px; }
  .drop .btn.big { min-height: 52px; }
  .hero-alt .btn { min-height: 48px; }

  /* the page-size notice */
  .ps { width: 100%; }
  .ps h2 { font-size: 20px; }
  .ps .dlg-sub { margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
  .ps-figs { gap: 12px; margin-bottom: 12px; padding: 12px 8px 8px; }
  .ps-figs figcaption { font-size: 11.5px; }
  .ps-opts { gap: 8px; }
  .ps-opt { padding: 10px 12px; }
  .po-d { font-size: 12px; line-height: 1.45; }
  .ps-foot { margin-top: 10px; font-size: 11.5px; }
}
@media (max-width: 760px) and (max-height: 720px) {
  /* a short phone: the picture and the footnote go, the three choices stay */
  .ps-figs, .ps-foot { display: none; }
}