/* The map in the mock window (site/map.js), in the look of the app's (src/renderer/style.css, the
   `.map` rules). Every rule is under `.idkw` and every class starts `w-mp`, so nothing else on the
   page or in the window can catch them.

   The app's cards are HTML; these are SVG, so the same look is said differently in places: a
   border is a stroke, a box-shadow a drop-shadow filter, the glow round a lit card a second
   rectangle, and the frosted glass is only the translucent fill, because SVG has no backdrop to
   blur. The ground, the card face and the two greys the outside parts wear are the flow's, which
   the window's other surfaces do not use, so they are kept here with their dark values beside them,
   under the same three selectors kit.css turns the window dark with. */

.idkw .w-mp {
  --w-mp-g:#EAF0F5; --w-mp-s:#FFFFFF; --w-mp-u:#DDE5ED; --w-mp-r:#C5D0DB;
  --w-mp-card:color-mix(in oklab, var(--w-mp-s) 86%, transparent);
  --w-mp-edge:color-mix(in oklab, var(--ink) 11%, transparent);
  --w-mp-glow:color-mix(in oklab, var(--accent) 22%, transparent);
  --w-mp-shadow:0 1px 2px color-mix(in oklab, var(--chrome) 10%, transparent),
                0 12px 30px -14px color-mix(in oklab, var(--chrome) 34%, transparent);
  --w-mp-lift:drop-shadow(0 1px 1px color-mix(in oklab, var(--chrome) 10%, transparent))
              drop-shadow(0 6px 9px color-mix(in oklab, var(--chrome) 13%, transparent));
  position:relative; display:flex; flex:1 1 auto; width:100%; min-width:0; overflow:hidden;
  font-family:var(--sans); color:var(--ink); background:var(--w-mp-g);
}
.idkw.is-dark .w-mp, :root[data-theme="dark"] .idkw.is-auto .w-mp {
  --w-mp-g:#11171E; --w-mp-s:#171E26; --w-mp-u:#1F2831; --w-mp-r:#30404E;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .idkw.is-auto .w-mp {
    --w-mp-g:#11171E; --w-mp-s:#171E26; --w-mp-u:#1F2831; --w-mp-r:#30404E;
  }
}

/* The lanes, a class a colour, as the cutaway's tints give them. */
.idkw .w-mp .l0 { --lane:var(--accent); --lane-soft:var(--accent-soft); --lane-line:var(--accent-line); }
.idkw .w-mp .l1 { --lane:var(--flag); --lane-soft:var(--flag-soft); --lane-line:var(--flag-line); }
.idkw .w-mp .l2 { --lane:var(--revised); --lane-soft:var(--revised-soft); --lane-line:var(--revised-line); }
.idkw .w-mp .l3 { --lane:var(--ink-soft); --lane-soft:var(--w-mp-u); --lane-line:var(--w-mp-r); }
.idkw .w-mp .l4 { --lane:var(--violet); --lane-soft:var(--violet-soft); --lane-line:var(--violet-line); }
.idkw .w-mp .l5 { --lane:var(--plum); --lane-soft:var(--plum-soft); --lane-line:var(--plum-line); }

/* ── the box ── */
/* Across the pane it fills it; in the reading it is a strip of a fixed height. Either scrolls both
   ways rather than panning, and the dots scroll with the drawing. */
.idkw .w-mp.full { height:100%; }
.idkw .w-mp.embed { height:380px; margin:6px 0 14px; border:1px solid var(--w-mp-r); border-radius:10px; }
.idkw .w-mp-stage { position:relative; flex:1 1 auto; min-width:0; container-type:inline-size; }
.idkw .w-mp-scroll { position:absolute; inset:0; overflow:auto; scrollbar-width:thin;
                     background-image:radial-gradient(circle, color-mix(in oklab, var(--ink) 16%, transparent) .7px, transparent 1.1px);
                     background-size:17.6px 17.6px; background-attachment:local; }
.idkw .w-mp.full .w-mp-scroll { overscroll-behavior:contain; }
.idkw .w-mp-pad { display:flex; align-items:center; width:max-content; min-width:100%; min-height:100%;
                  padding:72px 44px 64px; }
.idkw .w-mp.embed .w-mp-pad { padding:50px 18px 58px; }
.idkw .w-mp-svg { display:block; flex:none; overflow:visible; }

/* ── stations ── */
.idkw .w-mp-card { fill:var(--w-mp-card); stroke:var(--w-mp-edge); stroke-width:1; filter:var(--w-mp-lift);
                   transition:stroke .25s, filter .25s; }
.idkw .w-mp-tile { fill:var(--lane-soft); }
.idkw .w-mp-gl path { fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.idkw .w-mp-st .w-mp-gl, .idkw .w-mp-room .w-mp-gl { color:var(--lane); }
.idkw .w-mp-name { fill:var(--ink); font-size:13px; font-weight:600; letter-spacing:-.005em; }
.idkw .w-mp-word { fill:var(--ink-faint); font-size:11px; font-weight:400; }
.idkw .w-mp-st { transition:opacity .25s; }
.idkw .w-mp-st.go { cursor:pointer; }
.idkw .w-mp-st.go:hover .w-mp-card { stroke:var(--accent-line); }
/* A part at the foot is on the drawing because it is a part, and smaller because nothing runs through it. */
.idkw .w-mp-st.foot .w-mp-card { fill:color-mix(in oklab, var(--w-mp-s) 60%, transparent); filter:none; }
.idkw .w-mp-st.foot .w-mp-name { font-size:12px; font-weight:550; }
.idkw .w-mp-st.off, .idkw .w-mp-person.off { opacity:.42; }
.idkw .w-mp-room.off { opacity:.5; }
.idkw .w-mp-st.on .w-mp-card { stroke:var(--accent);
                               filter:drop-shadow(0 0 9px color-mix(in oklab, var(--accent) 55%, transparent)) var(--w-mp-lift); }
.idkw .w-mp-halo { fill:none; stroke:var(--w-mp-glow); stroke-width:3; }
.idkw .w-mp-badge { transform-box:fill-box; transform-origin:center; animation:w-mp-pop .3s ease-out;
                    filter:drop-shadow(0 2px 4px color-mix(in oklab, var(--chrome) 30%, transparent)); }
.idkw .w-mp-badge rect { fill:var(--accent); }
.idkw .w-mp-badge text { fill:var(--w-mp-s); font-size:11px; font-weight:700; text-anchor:middle; font-variant-numeric:tabular-nums; }
@keyframes w-mp-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }

/* In the reading, the compact cards the layout was made for. */
.idkw .w-mp.embed .w-mp-name { font-size:12px; }
.idkw .w-mp.embed .w-mp-word { font-size:10.5px; }
.idkw .w-mp.embed .w-mp-st.foot .w-mp-name { font-size:11.5px; }
.idkw .w-mp.embed .w-mp-pname { font-size:12px; }

/* The person. */
.idkw .w-mp-person { transition:opacity .25s; }
.idkw .w-mp-ring { fill:color-mix(in oklab, var(--ink) 7%, var(--w-mp-s)); stroke:var(--w-mp-edge); filter:var(--w-mp-lift); }
.idkw .w-mp-person .w-mp-gl { color:var(--ink); }
.idkw .w-mp-person.on .w-mp-ring { filter:drop-shadow(0 0 8px color-mix(in oklab, var(--accent) 55%, transparent)) var(--w-mp-lift); }
.idkw .w-mp-pname { fill:var(--ink); font-size:12.5px; font-weight:600; }

/* A room: a part with parts inside it, as a soft region in its lane's colour. */
.idkw .w-mp-room > rect { fill:color-mix(in oklab, var(--lane-soft) 55%, transparent);
                          stroke:color-mix(in oklab, var(--lane-line) 55%, transparent); }
.idkw .w-mp-room .w-mp-name { font-size:12px; }
.idkw .w-mp-room.go { cursor:pointer; }

/* ── edges ── */
.idkw .w-mp-e { fill:none; }
.idkw .w-mp-hop { stroke:var(--ink-faint); stroke-width:1.6; }
.idkw .w-mp-hop.lit { stroke:var(--accent); stroke-width:2.2; }
.idkw .w-mp-call { stroke:var(--ink-faint); stroke-width:1.5; stroke-dasharray:5 5; }
.idkw .w-mp-call.lit { stroke:var(--accent); stroke-width:1.7; }
.idkw .w-mp-write, .idkw .w-mp-read { stroke:var(--ink-faint); stroke-width:1.4; stroke-dasharray:2 5; stroke-linecap:round; }
.idkw .w-mp-write.lit, .idkw .w-mp-read.lit { stroke:color-mix(in oklab, var(--accent) 70%, var(--ink-faint)); }
.idkw .w-mp-bus { stroke:color-mix(in oklab, var(--ink) 16%, transparent); stroke-width:1.6; }
.idkw .w-mp-e.faint { opacity:.22; }
.idkw .w-mp-arrow.lit { fill:var(--accent); }
.idkw .w-mp-arrow.ink { fill:var(--ink-faint); }
/* A wide invisible stroke under each edge that leads to a step, so it can be hit. */
.idkw .w-mp-eg { pointer-events:none; }
.idkw .w-mp-eg.go { pointer-events:auto; cursor:pointer; }
.idkw .w-mp-hit { fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; }
.idkw .w-mp-eg.go:hover .w-mp-hop.lit, .idkw .w-mp-eg.go:hover .w-mp-call.lit { stroke-width:3; }
/* The line in motion: sparse sparks drifting along the lit hops, in the chrome's pale ink, so they
   read as light running on the line rather than gaps in it. */
.idkw .w-mp-drift { fill:none; stroke:color-mix(in oklab, var(--accent) 45%, var(--chrome-ink)); stroke-width:1;
                    stroke-dasharray:1.5 16; stroke-linecap:round; animation:w-mp-drift 1.3s linear infinite; pointer-events:none; }
@keyframes w-mp-drift { to { stroke-dashoffset:-17.5; } }
/* The beam riding a leg: a short bright dash sliding from one end to the other, and a blurred copy
   under it for the glow. Still, it is the whole leg lit. Its run is the app's `beamSeconds`, which
   maps.js writes in tenths of a second, a class each, because a style attribute will be refused. */
.idkw .w-mp-beam { fill:none; stroke:var(--accent); stroke-width:3; stroke-linecap:round; pointer-events:none;
                   stroke-dasharray:.18 1; stroke-dashoffset:1.18;
                   animation:w-mp-beam 1.3s cubic-bezier(.4, 0, .2, 1) forwards;
                   filter:drop-shadow(0 0 5px var(--accent)); }
.idkw .w-mp-beam.tail { stroke:var(--accent-line); stroke-width:9; opacity:.5; filter:blur(3px); }
.idkw .w-mp-beam.still { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
.idkw .w-mp-beam.still.tail { opacity:.35; }
@keyframes w-mp-beam { to { stroke-dashoffset:0; } }
.idkw .w-mp-beam.d7 { animation-duration:.7s; }   .idkw .w-mp-beam.d8 { animation-duration:.8s; }
.idkw .w-mp-beam.d9 { animation-duration:.9s; }   .idkw .w-mp-beam.d10 { animation-duration:1s; }
.idkw .w-mp-beam.d11 { animation-duration:1.1s; } .idkw .w-mp-beam.d12 { animation-duration:1.2s; }
.idkw .w-mp-beam.d13 { animation-duration:1.3s; } .idkw .w-mp-beam.d14 { animation-duration:1.4s; }
.idkw .w-mp-beam.d15 { animation-duration:1.5s; } .idkw .w-mp-beam.d16 { animation-duration:1.6s; }
.idkw .w-mp-beam.d17 { animation-duration:1.7s; } .idkw .w-mp-beam.d18 { animation-duration:1.8s; }
.idkw .w-mp-beam.d19 { animation-duration:1.9s; } .idkw .w-mp-beam.d20 { animation-duration:2s; }
.idkw .w-mp-beam.d21 { animation-duration:2.1s; } .idkw .w-mp-beam.d22 { animation-duration:2.2s; }
/* A hop's step numbers, on a flow's own map. */
.idkw .w-mp-pill rect { fill:var(--w-mp-s); stroke:var(--ink-faint); stroke-width:1; }
.idkw .w-mp-pill text { font-size:11px; font-weight:650; fill:var(--ink-soft); font-variant-numeric:tabular-nums; }
.idkw .w-mp-pill.lit rect { stroke:var(--accent); }
.idkw .w-mp-pill.lit text { fill:var(--accent); }

/* ── what stands over the drawing ── */
.idkw .w-mp-tools { position:absolute; z-index:5; top:10px; right:10px; display:flex; gap:1px; padding:3px;
                    background:var(--w-mp-card); border:1px solid var(--w-mp-edge); border-radius:10px;
                    backdrop-filter:blur(10px); box-shadow:var(--w-mp-shadow); }
.idkw .w-mp-tool { display:grid; place-items:center; width:28px; height:26px; border-radius:7px; color:var(--ink-soft); }
.idkw .w-mp-tool svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2;
                       stroke-linecap:round; stroke-linejoin:round; }
.idkw .w-mp-tool.t-play svg { fill:currentColor; stroke-width:1.5; }
.idkw .w-mp-tool:hover { background:var(--w-mp-glow); color:var(--ink); }
.idkw .w-mp-tool.t-motion.on { color:var(--accent); }
.idkw .w-mp-tool:focus-visible, .idkw .w-mp-ticker:focus-visible,
.idkw .w-mp-x:focus-visible, .idkw .w-mp-read:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
/* The ride's sentence: at the foot of a strip in the reading, and at the top left across the pane. */
.idkw .w-mp-ticker { position:absolute; z-index:5; left:50%; bottom:12px; transform:translateX(-50%);
                     max-width:min(720px, calc(100% - 40px)); display:flex; align-items:center; gap:11px;
                     font-family:var(--sans); font-size:13px; line-height:1.35; text-align:start; color:var(--ink);
                     background:var(--w-mp-card); border:1px solid var(--w-mp-edge); border-radius:999px;
                     padding:6px 16px 6px 6px; backdrop-filter:blur(14px); box-shadow:var(--w-mp-shadow); }
.idkw .w-mp-ticker:hover .t { text-decoration:underline; }
.idkw .w-mp-ticker .n { flex:none; min-width:26px; height:26px; padding:0 6px; border-radius:13px; display:grid; place-items:center;
                        background:var(--accent); color:var(--w-mp-s); font-weight:700; font-size:12px; font-variant-numeric:tabular-nums; }
.idkw .w-mp-ticker .t { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.idkw .w-mp.full .w-mp-ticker { top:10px; bottom:auto; left:10px; transform:none; max-width:calc(100% - 180px); }
.idkw .w-mp-legend { position:absolute; z-index:5; left:12px; bottom:14px; display:flex; gap:14px;
                     font-size:11.5px; color:var(--ink-faint); background:var(--w-mp-card); border:1px solid var(--w-mp-edge);
                     border-radius:999px; padding:6px 14px; backdrop-filter:blur(10px); white-space:nowrap; }
.idkw .w-mp-legend i { display:inline-block; width:18px; height:0; margin-right:6px; vertical-align:middle;
                       border-top:2px solid var(--accent); }
.idkw .w-mp-legend i.call { border-top-style:dashed; }
.idkw .w-mp-legend i.drop { border-top:2px dotted var(--ink-faint); }
@container (max-width:700px) { .idkw .w-mp-legend { display:none; } }

/* ── the sheet: one part or one step, in the document's own words ── */
.idkw .w-mp-sheet { position:relative; flex:0 0 min(360px, 42%); display:flex; flex-direction:column; overflow:auto;
                    padding:20px 20px 18px; background:var(--surface); border-inline-start:1px solid var(--rule); }
.idkw .w-mp-x { position:absolute; top:8px; right:8px; width:26px; height:26px; display:grid; place-items:center;
                border-radius:6px; color:var(--ink-faint); font-size:17px; line-height:1; }
.idkw .w-mp-x:hover { background:var(--surface-2); color:var(--ink); }
.idkw .w-mp-eyebrow { margin:0 0 6px; font-family:var(--sans); font-size:10.5px; letter-spacing:.12em;
                      text-transform:uppercase; color:var(--ink-faint); }
.idkw .w-mp-sheet h2 { margin:0 0 8px; padding-right:24px; font-family:var(--sans); font-size:18.4px; line-height:1.25;
                       font-weight:620; color:var(--ink); text-wrap:balance; }
.idkw .w-mp-call { display:inline-block; align-self:flex-start; margin:0 0 10px; padding:1px 6px; border-radius:4px;
                   font-family:var(--mono); font-size:11.5px; color:var(--ink-soft); background:var(--surface-2); }
.idkw .w-mp-sbody p { margin:0 0 9px; font-family:var(--serif); font-size:15.2px; line-height:1.55; color:var(--ink-soft); }
.idkw .w-mp-sbody p.w-mp-stitle { color:var(--ink); font-size:16px; }
.idkw .w-mp-sbody p.w-mp-eyebrow { font-family:var(--sans); font-size:10.5px; line-height:1.4; color:var(--ink-faint); }
.idkw .w-mp-holds { display:grid; grid-template-columns:auto 1fr; gap:5px 12px; margin:10px 0 0; padding:0;
                    font-family:var(--sans); font-size:12px; }
.idkw .w-mp-holds dt { font-family:var(--mono); font-weight:600; font-size:11.5px; color:var(--ink); }
.idkw .w-mp-holds dd { margin:0; color:var(--ink-soft); }
.idkw .w-mp-sview { margin:4px 0 10px; padding:10px 12px; border-radius:8px; background:var(--surface-2);
                    border-inline-start:3px solid var(--k-work); }
.idkw .w-mp-sview.call { border-inline-start-color:var(--k-call); }
.idkw .w-mp-sview.rally { border-inline-start-color:var(--k-rally); }
.idkw .w-mp-sbody .w-mp-sview p.w-mp-sline { color:var(--ink); font-family:var(--sans); font-size:15.2px; margin-bottom:0; }
.idkw .w-mp-read { align-self:flex-start; margin-top:12px; padding:6px 12px; border:1px solid var(--accent-line);
                   border-radius:6px; background:var(--accent-soft); color:var(--accent); font-family:var(--sans);
                   font-size:12px; font-weight:600; }
.idkw .w-mp-read:hover { border-color:var(--accent); }

/* Nothing moves with the toggle off, nor where the reader or the system asks for less motion,
   whatever the toggle says: the beam, the drift, the number popping in and the easing between lit
   and not. The same list three times, because a media query cannot be joined to a class. */
.idkw .w-mp.still .w-mp-drift { display:none; }
.idkw .w-mp.still .w-mp-beam { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
.idkw .w-mp.still .w-mp-badge { animation:none; }
.idkw .w-mp.still :is(.w-mp-st, .w-mp-person, .w-mp-card) { transition:none; }
html.idk-still .idkw .w-mp-drift { display:none; }
html.idk-still .idkw .w-mp-beam { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
html.idk-still .idkw .w-mp-badge { animation:none; }
html.idk-still .idkw :is(.w-mp-st, .w-mp-person, .w-mp-card) { transition:none; }
@media (prefers-reduced-motion: reduce) {
  .idkw .w-mp-drift { display:none; }
  .idkw .w-mp-beam { stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
  .idkw .w-mp-badge { animation:none; }
  .idkw :is(.w-mp-st, .w-mp-person, .w-mp-card) { transition:none; }
}