/* Window seat (/gifts/window-seat/): on top of the shared maker look (/gifts/globes/maker.css). */

.ws .ws-label { display: block; font-size: 0.8rem; color: var(--muted); margin: 14px 0 6px; }
.ws .wm-sec .ws-label:first-of-type { margin-top: 2px; }
.ws .wm-seg button { padding: 6px 8px; }
.ws .ws-mapwrap { max-width: none; margin-top: 10px; }
.ws .ws-mapwrap .wm-map { aspect-ratio: 16 / 10; }

/* from, stops, to */
.ws-ends { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ws-end { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.ws-end::before {
    content: ''; position: absolute; left: 12px; top: 26px; bottom: -14px; width: 2px;
    background: repeating-linear-gradient(to bottom, var(--muted) 0 3px, transparent 3px 7px); opacity: 0.45;
}
.ws-end:last-child::before { display: none; }
.ws-tag {
    width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; z-index: 1;
    background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700;
}
.ws-end.is-via .ws-tag { background: var(--field); color: var(--ink); box-shadow: inset 0 0 0 2px var(--accent); width: 20px; height: 20px; margin: 3px; font-size: 0.66rem; }
.ws-end input {
    width: 100%; min-width: 0; background: var(--field); color: var(--ink); border: 1px solid transparent; border-radius: 9px;
    padding: 9px 11px; font: inherit; font-size: 0.92rem;
}
.ws-end input:focus { outline: none; border-color: var(--accent); }
.ws-end input.is-set { font-weight: 600; }
.ws-end .ws-x {
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
    display: grid; place-items: center; cursor: pointer; font-size: 1.1rem; padding: 0;
}
.ws-end .ws-x:hover { color: var(--ink); background: #262b29; }
.ws-end .ws-x[hidden] { display: grid; visibility: hidden; }
.ws-sugg {
    position: absolute; left: 34px; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0;
    background: #1f2422; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); padding: 4px; max-height: 320px; overflow: auto;
}
.ws-sugg:empty { display: none; }
.ws-sugg button { width: 100%; }
.ws-sugg .ws-code { display: inline-block; min-width: 2.7em; font-weight: 700; color: var(--accent); margin-right: 6px; font-variant-numeric: tabular-nums; }
.ws-sugg li.is-hi button { background: #2a302e; }
.ws-endtools { display: flex; gap: 14px; flex-wrap: wrap; margin: 10px 0 2px 34px; }
.ws-endtools .wm-linkbtn { font-size: 0.82rem; }
.ws-endtools .bx { vertical-align: -2px; }
.ws-facts { margin: 10px 0 0; font-size: 0.9rem; color: var(--ink); line-height: 1.5; }
.ws-facts:empty { display: none; }
.ws-facts b { font-weight: 650; }
.ws-facts span { color: var(--muted); }

/* map markers */
.ws-pin {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: #2fa596; color: #fff; font: 700 11px/1 'Schibsted Grotesk', system-ui, sans-serif;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 2px rgba(255, 255, 255, 0.9);
}
.ws-pin.is-via { width: 16px; height: 16px; font-size: 9px; background: #fff; color: #1d2b28; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #2fa596; }

.ws #wsFly[aria-pressed="true"] { background: var(--accent); color: #fff; }
.ws .wm-colors { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 560px) {
    .ws .wm-seg button { padding: 6px 5px; font-size: 0.76rem; }
    .ws .wm-colors { grid-template-columns: minmax(0, 1fr); }
    .ws-sugg { left: 0; }
}