/* Printable LineDrive sketch. On screen it's a modal; on paper it's the ONLY
   thing, laid out to fit a single page. */
.pm-overlay {
   position: fixed; inset: 0; z-index: 3000; background: rgba(0, 0, 0, 0.55);
   display: flex; flex-direction: column; align-items: center; overflow: auto; padding: 16px;
}
/* Toolbar + page are one attached "sheet" so the controls read as part of the
   preview. The toolbar sticks to the top of the (tall, scrolling) sheet, so the
   Close button is always in view — you can never scroll away from the exit. */
.pm-sheet { width: 800px; max-width: 100%; margin: 0 auto; }
.pm-toolbar {
   position: sticky; top: 0; z-index: 2;
   display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
   background: var(--hwy-card, #fff); color: var(--hwy-ink, #1b1b1b);
   border-radius: 12px 12px 0 0; padding: 10px 16px; box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.pm-title { font-weight: 800; }
.pm-toolbar label { font-size: 13px; }
.pm-toolbar select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--hwy-line, #ccc); }
.pm-toolbar-spacer { margin-left: auto; }
.pm-btn { border: 1px solid var(--hwy-line, #ccc); background: var(--hwy-subtle, #eee); color: var(--hwy-ink, #1b1b1b); border-radius: 8px; padding: 8px 14px; font-weight: 700; cursor: pointer; }
.pm-btn-go { background: var(--hwy-green, #0b3d2e); color: #fff; border-color: transparent; }
.pm-btn-close { border-color: var(--hwy-error, #c0392b); color: var(--hwy-error, #c0392b); }
.pm-btn-close:hover { background: var(--hwy-error, #c0392b); color: #fff; }

.pm-page {
   background: #fff; color: #1b1b1b; width: 100%; max-width: 100%;
   min-height: 1000px; border-radius: 0 0 6px 6px; box-shadow: 0 10px 40px rgba(0,0,0,0.4);
   display: grid; grid-template-columns: 1.6fr 1fr; gap: 8px; padding: 24px;
}
.pm-sketch { overflow: hidden; }
.pm-svg { width: 100%; height: auto; }
.pm-dirs-wrap h3 { font-size: 15px; margin: 8px 0; border-bottom: 2px solid #1b1b1b; padding-bottom: 4px; }
.pm-directions { margin: 0; padding-left: 20px; font-size: 12.5px; line-height: 1.7; }
.pm-arrive-sub { display: block; font-weight: 400; font-size: 11.5px; color: #555; }

/* SVG text defaults */
.pm-heading { font-size: 20px; font-weight: 800; fill: #1b1b1b; }
.pm-sub { font-size: 11px; fill: #666; }
.pm-city { font-size: 12px; font-weight: 700; fill: #1b1b1b; }
.pm-city-end { font-weight: 800; }
.pm-road { font-size: 12.5px; font-weight: 700; fill: #1b1b1b; }
.pm-miles { font-size: 11px; fill: #555; }
.pm-node { fill: #1b1b1b; }
.pm-node-end { fill: #0b3d2e; }
.pm-line { stroke: #1b1b1b; stroke-width: 3; }

/* ── Sketch styles ─────────────────────────────────────────────────────── */
.pm-napkin .pm-line { stroke: #2b2b2b; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pm-napkin .pm-heading, .pm-napkin .pm-city, .pm-napkin .pm-road { font-family: "Comic Sans MS", "Chalkboard SE", "Bradley Hand", cursive; }
.pm-marker .pm-line { stroke: #14509e; stroke-width: 6; stroke-linecap: round; opacity: 0.85; }
.pm-marker .pm-road, .pm-marker .pm-city { font-family: "Marker Felt", "Comic Sans MS", cursive; }
.pm-clean .pm-line { stroke: #1b1b1b; stroke-width: 2; }
.pm-blueprint .pm-line { stroke: #14509e; stroke-width: 2.5; stroke-dasharray: 1 0; }
.pm-blueprint .pm-heading, .pm-blueprint .pm-city, .pm-blueprint .pm-road { fill: #14509e; }
.pm-blueprint .pm-node { fill: #14509e; }
.pm-blueprint .pm-heading, .pm-blueprint .pm-city, .pm-blueprint .pm-road, .pm-blueprint .pm-sub { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Hover-linking (screen only): point at a map segment and its direction row
   lights up, and vice-versa. */
.pm-hit { cursor: pointer; }
.pm-directions li[data-leg] { cursor: pointer; border-radius: 6px; padding: 0 4px; transition: background 0.12s; }
.pm-directions li.is-hot { background: #ffe6cc; }
.pm-svg .pm-seg.is-hot { stroke: #e6550d; stroke-width: 6; }
.pm-svg .pm-node.is-hot { fill: #e6550d; }

/* Print: only the page, one sheet, no modal chrome. */
@media print {
   .pm-seg.is-hot { stroke: inherit; stroke-width: inherit; }
   .pm-directions li.is-hot { background: transparent; }
   body * { visibility: hidden !important; }
   .pm-overlay, .pm-overlay * { visibility: visible !important; }
   .pm-overlay { position: absolute; inset: 0; background: #fff; padding: 0; display: block; }
   .pm-sheet { width: 100%; max-width: 100%; }
   .pm-toolbar { display: none !important; }
   .pm-page { box-shadow: none; width: 100%; min-height: 0; border-radius: 0; page-break-inside: avoid; }
   @page { margin: 12mm; }
}