@font-face { font-family:"Moscow Sans W"; src:url("./assets/fonts/MoscowSansW-Regular.otf") format("opentype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Moscow Sans W"; src:url("./assets/fonts/MoscowSansW-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Moscow Sans W"; src:url("./assets/fonts/MoscowSansW-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Moscow Sans W"; src:url("./assets/fonts/MoscowSansW-Extrabold.otf") format("opentype"); font-weight:800; font-display:swap; }
:root { --ink:#131820; --muted:#657080; --line:#d8dde3; --surface:#ffffff; --shell:#eef1f5; --yellow:rgb(99.293518% 86.508179% 1.411438%); --red:#da2032; --blue:#172b56; --purple:#d397cc; --orange:#ffbf00; font-family:"Moscow Sans W", "Arial", sans-serif; color:var(--ink); background:var(--shell); }
* { box-sizing:border-box; }
.paragraph-heading { margin-top:22px; }
.paragraph-card { margin-bottom:12px; padding:9px; border:1px solid #d8dde3; border-radius:6px; background:#fff; }
.paragraph-controls { display:flex; gap:5px; align-items:center; margin-bottom:7px; }
.marker-select { min-width:0; flex:1; padding:6px; font-size:14px; border:1px solid #cbd3de; border-radius:4px; background:#fff; }
.marker-input { min-width:0; width:72px; padding:6px; font-size:14px; border:1px solid #cbd3de; border-radius:4px; }
.paragraph-remove { border:0; background:transparent; color:#657080; font-size:22px; padding:0 5px; }
.notice-list { margin-top:14px; }
.notice-list .paragraph.marked { display:flex; align-items:baseline; gap:8px; }
.paragraph-marker { flex:0 0 44px; overflow-wrap:normal; text-align:center; }
.paragraph-text { min-width:0; overflow-wrap:normal; }
.unmarked { overflow-wrap:normal; }
body { margin:0; min-width:320px; background:var(--shell); }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; flex-direction:column; }
.topbar { height:64px; background:#f8fafc; color:var(--ink); display:flex; align-items:center; gap:14px; padding:0 20px; border-bottom:1px solid var(--line); }
.document-name { min-width:0; width:min(330px,38vw); margin-right:auto; padding:7px 8px; border:1px solid transparent; border-radius:5px; background:transparent; color:var(--ink); font-size:14px; font-weight:700; text-overflow:ellipsis; }.document-name:hover,.document-name:focus { border-color:var(--line); background:#fff; outline:none; }
.top-actions { display:flex; gap:8px; }
.button { border:1px solid transparent; padding:9px 13px; border-radius:6px; font-size:14px; font-weight:700; }.button-quiet { color:#353e49; background:#fff; border-color:var(--line); }.button-primary { color:#171717; background:var(--yellow); border-color:#d5c64b; }
.workbench { flex:1; display:grid; grid-template-columns:300px minmax(0,1fr); min-height:0; }.panel { background:#f8fafc; padding:20px; border-right:1px solid var(--line); overflow:auto; }.panel-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; font-weight:800; font-size:14px; }.status { color:#16824a; font-size:12px; font-weight:500; white-space:nowrap; }.insert-button { display:block; width:100%; text-align:left; border:1px solid var(--line); padding:10px 11px; margin:2px 0; border-radius:5px; background:#fff; color:#353e49; font-size:14px; font-weight:700; }.insert-button:hover { background:#edf2f7; }.source-note { font-size:13px; line-height:1.45; color:var(--muted); margin:0; }
.property-section[hidden] { display:none!important; }
.insert-controls { display:flex; gap:5px; margin-top:12px; }.insert-controls .insert-button { flex:1; text-align:center; padding:8px 5px; font-size:12px; }
.canvas-stage { position:relative; overflow:auto; display:grid; grid-template-rows:auto max-content; align-content:start; place-items:start center; padding:48px 36px 72px; background:linear-gradient(135deg,#e7ebf0 0,#f3f5f8 100%); }.ruler-label { position:sticky; top:0; align-self:start; z-index:2; justify-self:center; color:#687383; background:rgba(248,250,252,.9); border:1px solid var(--line); border-radius:50px; padding:6px 12px; font-size:12px; margin-bottom:-31px; }
.page { position:relative; width:min(540px,100%); aspect-ratio:297/420; margin-top:24px; background:var(--yellow); box-shadow:0 18px 40px rgba(29,36,48,.23); overflow:hidden; }.left-stripe { position:absolute; inset:0 auto 0 0; width:31px; background:var(--red); }.page-content { position:relative; height:100%; padding:36px 34px 26px 65px; display:flex; flex-direction:column; }.route-row { display:flex; gap:4px; min-height:39px; }.badge { display:inline-flex; align-items:center; justify-content:center; min-width:55px; padding:3px 9px; height:34px; font-size:21px; font-weight:800; letter-spacing:-.04em; }.badge-metro { color:#fff; background:var(--purple); }.badge-bus { background:var(--orange); }.badge-route { background:#e6f4ff; }.badge-route.pink { background:#f6c8e3; }
.date-chip { display:flex; align-items:center; gap:7px; width:max-content; max-width:100%; margin:35px 0 15px; padding:6px 9px; border:2px solid #9d8328; border-radius:8px; font-weight:700; font-size:15px; }.calendar-icon { font-size:20px; line-height:1; }h1 { margin:0; max-width:100%; font-size:31px; line-height:1.14; letter-spacing:-.035em; font-weight:800; outline:none; }.lead { margin:14px 0 12px; font-size:13px; font-weight:600; }.notice-list { font-size:14px; line-height:1.3; }.notice-list p { margin:6px 0; }.list-icon,.inline-icon { color:#e02531; font-weight:800; }.inline-route { display:inline-block; padding:0 3px; background:#f3c4df; line-height:1.05; font-weight:800; }.inline-route.small { font-size:.82em; background:#d9edf9; }.closing { font-size:14px; line-height:1.28; margin:12px 0; }.footer { margin-top:auto; border-top:1px solid rgba(19,24,32,.35); padding-top:9px; display:grid; grid-template-columns:1.05fr 35px 1.25fr 1fr; align-items:center; gap:7px; font-size:7px; line-height:1.15; }.footer-logo { color:#c8282f; font-weight:600; }.footer-logo strong { font-size:8px; }.footer-qr { display:grid; place-items:center; width:31px; height:31px; color:#fff; background:#111; font-size:8px; font-weight:700; }.footer-contact { text-align:right; }
.field-label { display:block; margin:15px 0 6px; font-size:12px; font-weight:800; color:#535e6d; }.text-input,.text-area { width:100%; padding:8px 9px; color:#17202b; background:#fff; border:1px solid #cbd3de; border-radius:5px; outline:none; font-size:14px; line-height:1.3; }.text-area { resize:vertical; }.text-area-title { font-weight:700; }.text-input:focus,.text-area:focus { border-color:#417fc4; box-shadow:0 0 0 3px rgba(65,127,196,.15); }
@media (max-width:900px) { .workbench { grid-template-columns:220px minmax(0,1fr); }.panel { padding:16px; }.canvas-stage { padding:30px 14px 40px; } }
@media (max-width:560px) { .topbar { height:auto; flex-wrap:wrap; padding:10px; gap:6px; }.document-name { width:100%; flex:1; }.top-actions { width:100%; }.top-actions .button { flex:1; padding:8px 5px; font-size:12px; }.workbench { display:flex; flex-direction:column; }.canvas-stage { order:0; padding:20px 14px 35px; }.left-panel { order:1; max-height:none; border-right:0; border-top:1px solid var(--line); }.page { width:min(100%,540px); margin-top:18px; } }
@media print { @page { size:A3 portrait; margin:0; } body { background:#fff; }.topbar,.panel,.ruler-label { display:none!important; }.workbench { display:block; }.canvas-stage { display:block; padding:0; background:#fff; overflow:visible; }.page { width:297mm; height:420mm; margin:0; box-shadow:none; page-break-after:always; }.artboard-element { box-shadow:none!important; outline:none!important; } }

/* Source page coordinates are points on an 841.889764 × 1190.551181 page.
   Container units scale the same geometry for preview and A3 printing. */
.page { container-type:inline-size; color:#000; font-synthesis:none; font-variant-ligatures:common-ligatures contextual; font-feature-settings:"liga" 1; }
.left-stripe { width:5%; }
.page-content { position:absolute; inset:0; padding:0; display:block; }
.route-row { position:absolute; left:10%; top:3.570575%; width:69.62029%; min-height:0; display:block; }
.route-row img,.footer img { display:block; width:100%; height:auto; }
.date-chip { position:absolute; left:10%; top:22.959625%; width:32.525248%; max-width:none; margin:0; padding:0; border:0; border-radius:0; display:block; }
.date-chip > svg { display:block; width:100%; height:auto; overflow:visible; }
.date-chip text { font-family:"Moscow Sans W"; fill:#000; font-variant-ligatures:common-ligatures contextual; font-feature-settings:"liga" 1; }
#headlinePreview { position:absolute; left:10%; top:29.35%; width:82.5%; max-width:none; font-size:7.126823cqw; line-height:1.15; letter-spacing:0; font-weight:800; }
.notice-list { position:absolute; left:10%; top:48.05%; width:82.5%; margin:0; font-size:2.96951cqw; line-height:1.36; font-weight:400; }
.notice-list p { margin:0 0 1.42536cqw; }
.notice-list .paragraph.marked { gap:1.1878cqw; }
.paragraph-marker { flex-basis:5.22571cqw; }
.paragraph-marker-small { align-self:flex-start; display:flex; align-items:center; justify-content:center; height:1.36em; }
.paragraph-marker-glyph { font-family:inherit; font-weight:inherit; font-size:70%; line-height:1; color:var(--secondary-text, #977e34); }
.source-route { display:inline-block; height:.9524em; width:auto; vertical-align:-.03em; object-fit:contain; }
.source-icon { display:inline-block; height:.71em; width:auto; vertical-align:0; }
.footer { position:absolute; left:10%; bottom:0; top:auto; height:14.053872cqw; width:82.5%; margin:0; padding:0; border:0; display:block; }
.footer-artwork { position:absolute; left:0; top:4.248409cqw; width:100%; }
.footer-source { position:relative; z-index:0; }
.footer-editable { position:absolute; z-index:1; left:36.119%; top:0; width:33.9%; height:100%; background:var(--yellow); }
.footer-qr-live { position:absolute; left:0; top:1.53%; width:21.19%; aspect-ratio:1; }
.footer-qr-live svg { display:block; width:100%; height:100%; }
.footer-copy { position:absolute; left:25.1%; top:15.3%; width:71%; color:rgb(3.910828% 4.008484% 3.547668%); font-size:1.36597cqw; line-height:1.2; font-weight:400; letter-spacing:-.006em; white-space:pre-line; }
.footer-link { color:var(--footer-link-color,#00adef); text-decoration-line:var(--footer-link-decoration,underline); text-decoration-thickness:.07125cqw; text-underline-offset:.28503cqw; }
.inline-route { background:none; padding:0; }

.route-row { width:82.5%; }
.route-row > svg { display:block; width:100%; height:auto; overflow:visible; font-family:"Moscow Sans W"; font-feature-settings:"liga" 1; }
.date-chip { top:calc(22.959625% + var(--content-shift,0cqw)); }
#headlinePreview { top:calc(29.35% + var(--content-shift,0cqw) + var(--date-shift,0cqw)); }
.notice-list { top:calc(29.35% + var(--content-shift,0cqw) + var(--date-shift,0cqw) + var(--heading-height,24.587539cqw) + 1.856905cqw); }
.route-card { display:grid; gap:7px; margin-top:10px; }
.route-card .marker-select { width:100%; }
.route-actions { display:flex; gap:4px; }
.route-actions .insert-button { text-align:center; padding:5px; }
.route-actions button:disabled { opacity:.35; cursor:default; }
#routeEditor { max-height:390px; overflow:auto; margin-top:10px; }

.route-fit { color:#64748b; font-size:12px; }
.route-fit.overset { color:#b42318; }
.artboard-element { cursor:pointer; border-radius:1px; transition:box-shadow .12s ease; }
.artboard-element:hover { box-shadow:0 0 0 1px rgba(48,113,223,.65); }
.artboard-element.is-selected,.artboard-element.is-selected:hover,.artboard-element:focus-visible { box-shadow:0 0 0 2px #3071df; outline:none; }
.footer-section-title { margin:0 0 16px; font-size:14px; font-weight:700; }
.footer-text-editor { position:relative; background:#fff; border-radius:5px; }
.footer-text-styling { position:absolute; inset:0; overflow:hidden; pointer-events:none; border:1px solid transparent; padding:8px 9px; font:inherit; font-size:14px; line-height:1.3; white-space:pre-wrap; overflow-wrap:break-word; color:#0a0a09; }
.footer-text-editor .text-area { position:relative; display:block; background:transparent; color:transparent; caret-color:#17202b; font:inherit; font-size:14px; line-height:1.3; }
.footer-text-editor .text-area::selection { background:rgba(0,173,239,.22); color:transparent; }
.footer-text-styling .footer-link { text-decoration-thickness:1px; text-underline-offset:2px; }
.footer-link-toolbar { display:flex; margin-top:10px; }
.footer-underline-toggle { width:36px; height:36px; padding:0; border:1px solid #cbd3de; border-radius:5px; background:#fff; color:#303946; font-size:17px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.footer-underline-toggle[aria-pressed="true"] { color:#00adef; border-color:#00adef; background:#eaf9ff; }
.footer-underline-toggle:disabled { opacity:.4; cursor:default; }

/* The route inspector is a full-height, independently scrolling workspace. */
.app-shell { height:100vh; height:100dvh; min-height:0; overflow:hidden; }
.topbar { flex:0 0 64px; }
.workbench { min-height:0; overflow:hidden; }
.left-panel { height:100%; min-height:0; display:flex; flex-direction:column; }
.property-section[data-properties="routes"]:not([hidden]) { display:flex; flex:1; min-height:0; flex-direction:column; }
#routeEditor { flex:1; min-height:0; max-height:none; overflow:auto; margin:10px -5px 8px; padding:0 5px; }
.route-card { display:grid; gap:6px; margin-top:8px; padding:7px; }
.route-identity { display:flex; align-items:center; gap:6px; min-width:0; }
.route-identity .text-input { flex:1; min-width:0; height:38px; padding:6px 8px; font-weight:700; }
.route-transport { position:relative; display:grid; place-items:center; flex:0 0 44px; height:38px; border:1px solid #cbd3de; border-radius:5px; background:#fff; }
.route-transport img { display:block; width:34px; height:28px; object-fit:contain; }
.route-transport::after { content:"⌄"; position:absolute; right:2px; bottom:1px; color:#475569; font:12px/1 sans-serif; pointer-events:none; }
.route-transport-select { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.route-transport:focus-within { outline:2px solid #3071df; outline-offset:1px; }
.route-color-picker { min-width:0; }
.route-color-current { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; padding:5px 8px; border:1px solid rgba(0,0,0,.2); border-radius:4px; font-size:12px; font-weight:700; cursor:pointer; list-style:none; }
.route-color-current::-webkit-details-marker { display:none; }
.route-color-current::after { content:"⌄"; flex:none; font:14px/1 sans-serif; }
.route-color-options { display:grid; gap:2px; max-height:200px; overflow:auto; padding:4px 0 0; }
.route-color-option { width:100%; min-height:27px; padding:4px 8px; border:0; border-radius:3px; text-align:left; font-size:12px; font-weight:700; }
.route-color-option[aria-selected="true"] { outline:2px solid #3071df; outline-offset:-2px; }
.route-selectors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }
.route-select { min-width:0; width:100%; padding:5px 6px; border:1px solid #cbd3de; border-radius:4px; background:#fff; color:#303946; font-size:12px; }
.route-actions .insert-button { flex:1; width:auto; text-align:center; padding:4px; font-size:12px; }
@media (max-width:560px) {
  .app-shell { height:auto; min-height:100dvh; overflow:visible; }
  .workbench { overflow:visible; }
  .left-panel { flex:0 0 55dvh; }
}
@media print {
  .app-shell { height:auto; min-height:0; overflow:visible; }
  .workbench { overflow:visible; }
}
.route-identity { align-items:stretch; }
.route-identity .text-input { height:36px; }
.route-transport-select { position:static; inset:auto; flex:0 0 132px; width:132px; height:36px; opacity:1; cursor:pointer; padding:5px 23px 5px 7px; border:1px solid #cbd3de; border-radius:4px; background:#fff; color:#303946; font-size:12px; }
.route-color-select { width:100%; height:32px; font-weight:700; cursor:pointer; }
.route-free-toggle { display:flex; align-items:center; gap:6px; min-height:30px; padding:4px 6px; border:0; border-radius:0; background:#fff; color:#303946; font-size:12px; font-weight:400; line-height:1; }
.route-free-toggle input { display:block; flex:none; margin:0; accent-color:#2675c8; }
@media (max-width:900px) { .route-transport-select { flex-basis:118px; width:118px; } }

/* Reference footer: QR x=335.0681, y=1108.7826, size=49.9 pt.
   Text origin x=390.3695, baselines y=1126.2369 and 1140.0369 pt. */
.footer-qr-live { top:.092957cqw; width:5.927149cqw; }
.footer-copy { left:6.568742cqw; top:0; width:21.38047cqw; height:6.057801cqw; }
.footer-copy > svg { display:block; width:100%; height:100%; overflow:visible; }

.heading-inline-route { display:inline-block; font-size:1.01em; vertical-align:-.19em; line-height:0; }
.heading-route-run { display:inline; white-space:normal; }
.heading-inline-route > svg { display:block; overflow:visible; font-family:"Moscow Sans W"; }
.heading-inline-exit { display:inline-block; font-size:70%; line-height:1; border:.06em solid currentColor; border-radius:.15em; padding:.05em .2em; vertical-align:.05em; }

/* Shared route list: one selected item owns the visible inspector. */
.route-card { display:block; margin:0; padding:0; border:1px solid #e5e9ee; border-radius:0; overflow:hidden; }
.route-card + .route-card { border-top:0; }
.route-card.is-active { background:#eaf1fa; }
.route-card.is-active .route-free-toggle { background:transparent; }
.route-item-summary { display:flex; align-items:center; gap:10px; width:100%; min-height:46px; padding:9px 10px; border:0; background:#fff; color:#303946; text-align:left; cursor:pointer; }
.route-card.is-active > .route-item-summary { background:#eaf1fa; }
.route-item-preview { flex:none; display:inline-block; font-size:24px; line-height:1; }
.route-item-preview > svg { display:block; overflow:visible; font-family:"Moscow Sans W"; }
.route-item-exit { min-width:24px; padding:2px 5px; border:1px solid currentColor; border-radius:3px; font-size:17px; text-align:center; }
.route-item-label { flex:1; min-width:0; font-size:12px; }
.route-item-chevron { flex:none; color:#657080; }
.route-item-summary[aria-expanded="true"] .route-item-chevron { transform:rotate(180deg); }
.route-item-summary:focus-visible { outline:2px solid #3071df; outline-offset:-2px; }
.route-item-inspector { display:grid; gap:6px; padding:0 10px 10px; border:0; }
.route-item-inspector[hidden] { display:none; }
.route-item-unknown { padding:2px 5px; border:1px dashed #b42318; color:#303946; font-size:20px; font-weight:700; }
.route-card.is-active > .route-item-summary { display:none; }
.route-card > .route-identity { padding:9px 10px; background:#eaf1fa; }
.route-card > .route-identity[hidden] { display:none; }
.route-card > .route-identity .route-number-input { flex:0 1 86px; font-size:20px; font-weight:800; }
.route-card > .route-identity .route-transport-select { flex:1; width:auto; }
.route-exit-inspector { display:none; }
.route-text-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.route-text-heading .field-label { margin:0; }
.route-sort-button { border:1px solid #b9cce4; border-radius:4px; background:#eaf1fa; color:#1e4d89; padding:4px 7px; font-size:12px; cursor:pointer; }
.route-sort-button:disabled { border-color:#d8dde3; background:transparent; color:#8a93a0; cursor:default; }
.rebus-sizing { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.rebus-sizing .text-input { margin-top:5px; }
#headlinePreview { font-size:calc(7.126823cqw * var(--heading-factor,1)); }
.notice-list { font-size:calc(3.5634115cqw * var(--main-factor,1)); top:calc(29.35% + var(--content-shift,0cqw) + var(--date-shift,0cqw) + var(--heading-height,24.587539cqw) + 1.856905cqw * var(--heading-factor,1)); }
.notice-list p { margin-bottom:.48em; }
.notice-list .paragraph.marked { gap:.4em; }
.paragraph-marker { flex-basis:1.76em; }
.block-scale-toolbar { margin-bottom:16px; display:grid; gap:7px; }
.block-scale-toolbar .field-label, .rebus-sizing .field-label { display:flex; flex-wrap:wrap; align-items:center; gap:5px; }
.block-scale-toolbar .text-input { width:calc(100% - 38px); margin-top:5px; }
.rebus-sizing #rebusScale { width:calc(100% - 32px); }
.scale-reset-button { flex:none; padding:5px 7px; min-height:32px; border:1px solid #cbd3de; border-radius:4px; background:#fff; color:#303946; cursor:pointer; }

/* Compact, consistent route-card controls. */
.route-card .route-select, .route-card .route-identity .text-input, .route-card .route-color-current { height:28px; min-height:28px; padding:3px 6px; line-height:20px; }
.route-card .route-identity .route-transport-select { padding-right:23px; }
.route-card .route-free-toggle { height:20px; min-height:20px; padding:0 6px; }
.route-free-toggle input { width:13px; height:13px; padding:0; }
/* Center the visible Moscow Sans glyphs within the checkbox row. */
.route-free-toggle span { line-height:16px; transform:translateY(.9px); }

/* Number scale: thin track, vertical handle, editable percentage, auto mode. */
.route-scale-slider { display:flex; align-items:center; gap:8px; min-height:28px; }
.route-scale-slider input[type="range"] { appearance:none; -webkit-appearance:none; flex:1; min-width:0; height:20px; margin:0; padding:0; background:transparent; cursor:pointer; }
.route-scale-slider input[type="range"]::-webkit-slider-runnable-track { height:2px; border-radius:1px; background:#aab8c9; }
.route-scale-slider input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:6px; height:16px; margin-top:-7px; border:0; border-radius:3px; background:#657b96; }
.route-scale-slider input[type="range"]::-moz-range-track { height:2px; border-radius:1px; background:#aab8c9; }
.route-scale-slider input[type="range"]::-moz-range-thumb { width:6px; height:16px; border:0; border-radius:3px; background:#657b96; }
.route-scale-value { width:54px; height:28px; padding:3px 6px; border:1px solid #cbd3de; border-radius:4px; background:#fff; color:#303946; text-align:right; font:400 12px/20px "Moscow Sans W",sans-serif; font-variant-numeric:tabular-nums; }
/* iOS-style automatic-scale switch. */
.route-scale-auto { position:relative; flex:none; width:34px; height:20px; padding:0; border:0; border-radius:10px; background:#c8ced6; cursor:pointer; transition:background .15s; }
.route-scale-auto::after { content:""; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #0002; transition:transform .15s; }
.route-scale-auto[aria-checked="true"] { background:#34c759; }
.route-scale-auto[aria-checked="true"]::after { transform:translateX(14px); }
.route-scale-auto:focus-visible { outline:2px solid #3071df; outline-offset:2px; }
.route-status-segments { display:flex; min-width:0; height:28px; padding:2px; gap:2px; border:1px solid #cbd3de; border-radius:5px; background:#dfe7f1; }
.route-status-segments button { flex:1 1 auto; min-width:max-content; padding:0 6px; border:0; border-radius:3px; background:transparent; color:#535e6d; font:400 11px/20px "Moscow Sans W",sans-serif; }
.route-status-segments button[aria-pressed="true"] { background:#fff; color:#17202b; box-shadow:0 1px 2px #0001; }
/* Let inspectors shrink with their panel instead of clipping their controls. */
.route-item-inspector { min-width:0; grid-template-columns:minmax(0,1fr); }
.route-item-inspector > *, .route-scale-slider { min-width:0; }
.route-scale-slider input[type="range"] { width:0; flex:1 1 0; }
.route-scale-value, .route-scale-auto { flex:none; }
@media screen and (min-width:701px) and (max-width:900px) {
  .workbench { grid-template-columns:280px minmax(0,1fr); }
}
@media screen and (max-width:700px) {
  .app-shell { height:auto; min-height:100dvh; overflow:visible; }
  .topbar { height:auto; flex:none; flex-wrap:wrap; padding:10px; gap:8px; }
  .document-name { width:100%; flex:1 1 100%; }
  .top-actions { width:100%; min-width:0; flex-wrap:wrap; }
  .top-actions .button { flex:1; padding:8px 5px; font-size:12px; }
  .workbench { display:flex; flex-direction:column; overflow:visible; }
  .canvas-stage { order:0; min-width:0; padding:20px 14px 35px; }
  .left-panel { order:1; height:auto; flex:none; min-width:0; border-right:0; border-top:1px solid var(--line); }
  .property-section[data-properties="routes"]:not([hidden]) { flex:none; }
  #routeEditor { flex:none; overflow:visible; }
  .page { width:min(100%,540px); margin-top:18px; }
}

#dateBorder { mix-blend-mode:normal; opacity:.6; }

.route-scale-auto-label { display:flex; flex:none; align-items:center; gap:5px; color:#535e6d; font-size:12px; font-weight:400; white-space:nowrap; }
#noticeRouteEditor { margin-top:10px; }
.notice-route-run { display:inline; white-space:normal; }
.notice-inline-route { display:inline-block; height:.9524em; vertical-align:-.13em; }
.notice-inline-route > svg { display:block; width:auto; height:100%; overflow:visible; font-family:"Moscow Sans W"; }
.paragraph-marker-routes { flex:0 0 auto; align-self:flex-start; display:flex; align-items:center; height:1.36em; line-height:1; }
.paragraph-marker-routes .notice-route-run { transform:translateY(-.074em); }
.paragraph-text { min-width:0; }

/* The map reserves page height without changing the artwork's width-based scale. */
.page-content { height:auto; top:var(--map-top,0%); bottom:var(--map-bottom,0%); }
.left-stripe { top:0; bottom:0; }
.map-section { position:absolute; left:5%; width:95%; height:var(--map-height,0%); overflow:hidden; background:#fff; touch-action:none; cursor:grab; }
.map-section[hidden] { display:none; }
.map-section.is-dragging { cursor:grabbing; }
.map-section img { position:absolute; display:block; width:100%; height:100%; object-fit:cover; transform-origin:center; }
.footer-editable { background:transparent; }
.page.is-artboard-selected { outline:1px solid #007aff; outline-offset:3px; }
#mapControls { margin-top:12px; }
#mapControls[hidden] { display:none; }

/* Short text hugs its content while long lines retain the artwork's wrap limit. */
#headlinePreview, #noticePreview { width:fit-content; max-width:82.5%; }
#noticePreview > p:last-child { margin-bottom:0; }

/* Anchor the heading to the measured date height, including with a map present. */
#headlinePreview { top:calc(22.959625% + var(--content-shift,0cqw) + var(--date-height,7.5cqw) + 1.537049cqw); }
.notice-list { top:calc(22.959625% + var(--content-shift,0cqw) + var(--date-height,7.5cqw) + 1.537049cqw + var(--heading-height,24.587539cqw) + 1.856905cqw * var(--heading-factor,1)); }

/* A3 top inset: 3.570575% of the full 420 mm height, independent of map reservation. */
.route-row { top:5.049298cqw; }

.text-input.scale-does-not-fit { border-color:#e73c43; background:#fff0f0; color:#b52228; }
.text-input.scale-does-not-fit:focus { box-shadow:0 0 0 3px #e73c4326; }

.date-chip[hidden] { display:none!important; }
.date-show-control { display:flex; align-items:center; gap:6px; font-size:14px; margin-bottom:12px; }

/* Custom markers share the numbered/dash marker column, expanding for longer groups. */
.paragraph-marker-routes { min-width:1.76em; justify-content:center; }

.page[data-background="red"] { color:#fff; }
.page[data-background="red"] .date-chip text { fill:#fff; }
.page[data-background="red"] .dot-strike { text-decoration-color:#fff; }
.page[data-background="red"] .footer-copy, .page[data-background="red"] .footer-link { color:#fff; }

#footerQrPreview[hidden], #footerTextPreview[hidden] { display:none!important; }

.map-height-control { display:flex; align-items:center; gap:8px; }
.map-height-control .text-input { width:0; min-width:8ch; flex:1 1 auto; }
.map-height-control .insert-button { width:auto; flex:0 0 auto; margin:0; }

.symbol-alias-highlight { background:#e9ddfa; border-radius:2px; color:#362b48; }