/* Long distance map maker: live poster preview (canvas) next to compact controls; print shows only the poster. */
.tool .ldm { --ldm-muted: rgb(var(--ink) / .7); display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.tool .ldm-layout { display: flex; flex-direction: column; gap: 16px; }
.tool .ldm-out { display: flex; flex-direction: column; gap: 10px; }
.tool .ldm-out .tool-note { text-align: center; }
.tool .ldm-preview { display: grid; place-items: center; padding: 16px; border-radius: 24px; background: rgb(var(--ink) / .05); }
.tool .ldm-canvas { display: block; width: auto; max-width: 100%; max-height: 62vh; height: auto; border-radius: 6px; box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 12px 40px rgb(38 8 64 / .18); }
/* Phones: the preview stays in view while you edit below it. */
@media (max-width: 759px) {
  .tool .ldm-preview { position: sticky; top: calc(var(--nav-h, 80px) - 8px); z-index: 5; padding: 10px; background: var(--surface-2); box-shadow: 0 8px 24px rgb(38 8 64 / .12); }
  .tool .ldm-canvas { max-height: 34vh; }
  .tool .ldm-layout { display: grid; grid-template-columns: minmax(0, 1fr); }
  .tool .ldm-out { order: 3; }
}
.tool .ldm-actions .btn { flex: 1 1 auto; white-space: nowrap; }
.tool .ldm-size { text-align: center; }
.tool .ldm-controls { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow); }
.tool .ldm-group { display: flex; flex-direction: column; gap: 8px; }
.tool .ldm-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.tool .ldm-controls .tool-chips { gap: 6px; }
.tool .ldm-controls .tool-chips button { min-height: 40px; padding: 0 12px; font-size: 13px; }
.tool .ldm-controls input { min-height: 44px; }
.tool .ldm-print { display: none; }
@media (min-width: 760px) {
  .tool .ldm-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 16px 20px; align-items: start; }
  .tool .ldm-preview { grid-column: 1; grid-row: 1; }
  .tool .ldm-out { grid-column: 1; grid-row: 2; }
  .tool .ldm-controls { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 599px) { .tool .ldm-actions { display: grid; grid-template-columns: 1fr 1fr; } .tool .ldm-actions .btn-primary { grid-column: 1 / -1; } .tool .ldm-pair { grid-template-columns: 1fr; } }
@media print {
  html.ldm-printing body > * { display: none !important; }
  html.ldm-printing body > main, html.ldm-printing main * { display: none !important; }
  html.ldm-printing .tool .ldm-print, html.ldm-printing .tool .ldm-print img, html.ldm-printing main .tool, html.ldm-printing main .ldm { display: block !important; }
  html.ldm-printing body > main { display: block !important; padding: 0 !important; margin: 0 !important; }
  html.ldm-printing main .tool { padding: 0 !important; margin: 0 !important; background: none !important; }
  html.ldm-printing .tool .ldm-print img { width: 100%; height: auto; }
}
@media (min-width: 1120px) {
  .tool[data-tool="long-distance-map"] { width: 1060px; margin-left: calc((100% - 1060px) / 2); }
  .tool .ldm-canvas { max-width: 460px; }
}
.tool .ldm-looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool .ldm-look { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 12px 6px 6px; border-radius: 16px; background: rgb(var(--accent) / .06); font-size: 14px; font-weight: 800; color: rgb(var(--ink) / .85); text-align: left; transition: transform .16s var(--ease-out), background-color .15s ease; }
.tool .ldm-look:active { transform: scale(.97); }
@media (hover: hover) { .tool .ldm-look:hover { background: rgb(var(--accent) / .12); } }
.tool .ldm-swatch { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; position: relative; }
.tool .ldm-swatch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: currentColor; }
/* Round 3: more options, color dots, tap to zoom, sticky download on phones */
.tool details.ldm-more { border-radius: 16px; background: rgb(var(--accent) / .05); }
.tool details.ldm-more summary { min-height: 44px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 850; color: var(--link); list-style: none; }
.tool details.ldm-more summary::-webkit-details-marker { display: none; }
.tool .ldm-more-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 14px 14px; }
.tool .ldm-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; margin: 0 6px 0 -4px; vertical-align: -3px; }
.tool .ldm-canvas { cursor: zoom-in; }
.tool .ldm-preview.is-zoom { position: fixed; inset: 0; z-index: 100; border-radius: 0; padding: 16px; background: rgb(18 6 31 / .92); display: grid; place-items: center; }
.tool .ldm-preview.is-zoom .ldm-canvas { max-height: calc(100vh - 32px); max-width: calc(100vw - 32px); cursor: zoom-out; }
@media (max-width: 759px) {
  .tool .ldm-out { position: sticky; bottom: 0; z-index: 4; margin: 0 -16px -16px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: 0 -8px 24px rgb(38 8 64 / .1); border-radius: 20px 20px 0 0; }
  .tool .ldm-out .tool-note { display: none; }
  .tool .ldm-actions { grid-template-columns: 1fr 1fr 1fr; }
  .tool .ldm-actions .btn-primary { grid-column: auto; }
  .tool .ldm-actions .btn { min-height: 48px; font-size: 14px; padding: 0 6px; }
}
/* Poster serif: Playfair Display (SIL Open Font License 1.1), latin subset, self-hosted so the tool stays offline-ready. */
@font-face { font-family: 'Cupie Poster Serif'; src: url(/assets/tools/long-distance-map.woff2) format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cupie Poster Serif'; src: url(/assets/tools/long-distance-map.italic.woff2) format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; }
@media (max-width: 759px) { .tool .ldm-preview.is-small .ldm-canvas { max-height: 16vh; } .tool .ldm-preview .ldm-canvas { transition: max-height .2s var(--ease-out); } }
/* Round 6: same-day print steps, a frame around the print preview */
.tool details.ldm-today { border-radius: 16px; background: rgb(var(--accent) / .06); }
.tool details.ldm-today summary { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 14px; cursor: pointer; font-size: 14px; font-weight: 850; color: var(--link); list-style: none; }
.tool details.ldm-today summary::-webkit-details-marker { display: none; }
.tool .ldm-today-steps { margin: 0; padding: 0 16px 14px 36px; font-size: 14px; line-height: 20px; color: rgb(var(--ink) / .85); text-align: left; }
.tool .ldm-today-steps li + li { margin-top: 6px; }
.tool .ldm-preview.is-print:not(.is-zoom) .ldm-canvas { border-radius: 0; box-shadow: 0 0 0 10px var(--surface), 0 0 0 22px rgb(var(--ink) / .82), 0 18px 40px 22px rgb(38 8 64 / .22); margin: 22px; }
@media (max-width: 759px) { .tool .ldm-preview.is-print:not(.is-zoom) .ldm-canvas { box-shadow: 0 0 0 5px var(--surface), 0 0 0 11px rgb(var(--ink) / .82), 0 10px 24px 11px rgb(38 8 64 / .2); margin: 11px; } }
@media (prefers-color-scheme: dark) {
  .tool .ldm-preview.is-print:not(.is-zoom) .ldm-canvas { box-shadow: 0 0 0 10px rgb(var(--ink) / .94), 0 0 0 22px rgb(18 6 31), 0 18px 40px 22px rgb(0 0 0 / .35); }
}
@media (prefers-color-scheme: dark) and (max-width: 759px) {
  .tool .ldm-preview.is-print:not(.is-zoom) .ldm-canvas { box-shadow: 0 0 0 5px rgb(var(--ink) / .94), 0 0 0 11px rgb(18 6 31), 0 10px 24px 11px rgb(0 0 0 / .35); }
}

/* Reflow at 320 px (WCAG 1.4.10): rows wrap instead of pushing past the screen edge. Wider screens are unchanged. */
@media (max-width: 374px) {
  .tool .ldm-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tool .ldm-actions .btn { white-space: normal; line-height: 20px; text-align: center; }
}