/* SIX USE MAPS. Styles only; every one is built from the same twelve weeks in
   dx-data.js and the same engine, so a difference between two of them is a
   difference in what the SHAPE tells you, never in the numbers.

   Loaded after /appts-shell.css, /nx.css and /dx.css. Tokens only, no new
   colour meanings: magenta is an entry that records use, teal is a day got
   through, cyan is the platform's own signals, gold is a soft warning.
*/

/* ---- the shell every map sits in --------------------------------------- */
.mp{display:grid;grid-template-columns:minmax(0,1fr) 286px;gap:22px;align-items:start}
@media(max-width:900px){.mp{grid-template-columns:minmax(0,1fr)}}
.mp.wide{grid-template-columns:minmax(0,1fr)}
.mp-stage{position:relative;width:100%;min-width:0}
/* square stages are bounded by viewport height so the panel below is never
   pushed off, the same rule the orbit map learned the hard way */
.mp-stage.sq{aspect-ratio:1/1;max-width:min(100%,68vh);margin:0 auto}
/* Wide stages are bounded by the viewport too. The constellation is a 1000x520
   drawing, so at full column width it rendered 523px tall and pushed the key
   and the note below the fold. Clamping the height letterboxes the drawing
   rather than cropping it, which is the right trade for a map. */
.mp-stage svg{width:100%;height:auto;max-height:46vh;display:block;overflow:visible}
.mp-stage.sq svg{height:100%;max-height:none}
.mp-side{display:flex;flex-direction:column;gap:14px;min-width:0}
/* In the wide layout the side becomes a row, but the VIEW SWITCHER has to
   keep its own full-width line above the read-out. Sitting beside it, the
   pills read as one option among three panels rather than as the control that
   changes what everything below them says. */
.mp.wide .mp-side{flex-direction:row;flex-wrap:wrap;align-items:flex-start}
.mp.wide .mp-ctl{flex:0 0 100%}
.mp.wide .mp-read{flex:1;min-width:260px}
.mp.wide .mp-key{flex:0 0 220px}

.mp-ctl{display:flex;gap:6px;flex-wrap:wrap}
.mp-ctl button{padding:9px 14px;border-radius:999px;background:var(--raise-2);
  border:1px solid var(--hair);font:inherit;font-size:12.5px;font-weight:650;color:var(--ink-3);
  transition:all .2s var(--bounce)}
.mp-ctl button:hover{background:var(--hair);color:var(--ink-2)}
.mp-ctl button[aria-pressed="true"]{background:var(--secondary);border-color:var(--secondary);color:#fff}

.mp-read{padding:18px;border-radius:var(--r-md);background:var(--raise);
  border:1px solid var(--hair);min-height:170px}
.mp-read .k{display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:9px}
/* .mp-read > b, the DIRECT child. A bare `.mp-read b` styled the title and
   every inline bold inside the paragraph under it, so a sentence with a figure
   in it broke into five lines. Eighth time a selector has been too greedy on
   this project; the fix is always to say which element you mean. */
.mp-read > b{display:block;font-family:var(--display);font-size:19px;font-weight:650;
  letter-spacing:-.02em;line-height:1.25;margin-bottom:8px}
.mp-read p b{font-weight:700;color:var(--ink)}
.mp-read p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin-bottom:10px}
.mp-read .trg{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  background:rgba(185,138,47,.18);color:var(--gold-soft,#E7C476);font-size:11.5px;font-weight:650}
html[data-theme="light"] .mp-read .trg{background:#F8EED8;color:var(--amber)}
.mp-key{display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--ink-3)}
.mp-key span{display:flex;align-items:center;gap:9px}
.mp-key i{width:13px;height:13px;border-radius:50%;display:inline-block;flex-shrink:0}
.mp-key i.use{background:var(--secondary)}
.mp-key i.drug{background:var(--secondary-soft)}
.mp-key i.got{background:var(--teal)}
.mp-key i.none{box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.mp-note{font-size:12.5px;color:var(--ink-3);line-height:1.55}

/* shared svg furniture */
.mp-ax{stroke:var(--hair);stroke-width:1}
.mp-lab{font-size:11px;font-weight:650;fill:var(--ink-3);text-anchor:middle}
.mp-lab.hot{fill:var(--secondary-soft)}
html[data-theme="light"] .mp-lab.hot{fill:var(--secondary)}
.mp-hit{fill:transparent;cursor:pointer}
.mp-el{cursor:pointer;transition:opacity .22s var(--ease)}
.mp-el.dim{opacity:.16}

/* ---- arcs, for the pairing view ---------------------------------------- */
.tg-arc{cursor:pointer;transition:stroke-opacity .22s var(--ease)}
.tg-arc:hover{stroke-opacity:.95}
.ln-cell{cursor:pointer;transition:filter .18s var(--ease)}
.ln-cell:hover{filter:brightness(1.25)}

/* ---- 1. TIDE ------------------------------------------------------------
   Twelve weeks as a waveform. Use rises above the line, urges got through
   fall below it, so a fortnight where somebody turned things round is a
   visible shift of mass from top to bottom. */
.tide-base{stroke:var(--hair-2);stroke-width:1}
.tide-up{fill:var(--secondary);opacity:.92}
.tide-up.drug{fill:var(--secondary-soft)}
.tide-dn{fill:var(--teal);opacity:.92}
.tide-none{fill:var(--teal);opacity:.34}
.tide-avg{fill:none;stroke:rgba(0,119,200,.55);stroke-width:2;stroke-linecap:round}
.tide-scrub{stroke:var(--ink);stroke-width:1;opacity:.5}
.tide-gap{fill:var(--hair);opacity:.5}

/* ---- 2. SPIRAL ----------------------------------------------------------
   One continuous line, one turn per calendar month. A weekly habit smears
   round the turn; a MONTHLY one (payday) lines up at the same angle every
   turn and shows as a radial spoke. That is the thing a week-based view can
   never show. */
.sp-path{fill:none;stroke:var(--hair);stroke-width:1.2}
.sp-month{font-size:11px;font-weight:650;fill:var(--ink-3)}
.sp-pay{stroke:rgba(185,138,47,.5);stroke-width:1;stroke-dasharray:3 4}

/* ---- 3. WEEK RINGS ------------------------------------------------------
   Twelve small multiples, one ring per week. The classic way to compare
   periods: you are not reading values, you are matching shapes. */
.wr-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:16px}
.wr{display:flex;flex-direction:column;align-items:center;gap:9px;padding:12px 8px;
  border-radius:var(--r-md);border:1px solid transparent;background:none;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--bounce)}
.wr:hover{background:var(--raise-2);border-color:var(--hair);transform:translateY(-2px)}
.wr[aria-pressed="true"]{background:var(--raise-2);border-color:var(--secondary)}
.wr svg{width:100%;max-width:96px;height:auto}
.wr-lab{font-size:11px;font-weight:650;color:var(--ink-3)}
.wr-val{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.02em}

/* ---- 4. CONSTELLATION ---------------------------------------------------
   A night field. Runs of consecutive days that share a state are joined, so a
   streak becomes a shape you can point at rather than a number you have to
   trust. */
.cn-sky{fill:url(#cnsky)}
.cn-link{stroke:rgba(255,255,255,.16);stroke-width:1}
.cn-link.got{stroke:rgba(79,209,199,.45)}
.cn-link.use{stroke:rgba(224,86,138,.4)}
.cn-star{cursor:pointer}
.cn-glow{opacity:.34}

/* ---- 5. FLOW ------------------------------------------------------------
   Not a map of time at all. A map of the CHAIN: what came before, what was
   used, and who you were with. The one view that answers "what leads to
   what" rather than "when". */
.fl-band{opacity:.5;cursor:pointer;transition:opacity .22s var(--ease)}
.fl-band:hover,.fl-band.on{opacity:.92}
.fl-band.dim{opacity:.08}
.fl-node{cursor:pointer}
.fl-node rect{rx:4}
.fl-txt{font-size:12px;font-weight:600;fill:var(--ink-2)}
.fl-txt.sm{font-size:10.5px;fill:var(--ink-3);font-weight:500}
.fl-col{font-size:10.5px;font-weight:700;letter-spacing:.08em;fill:var(--ink-3);
  text-transform:uppercase}

/* ---- 6. TERRAIN ---------------------------------------------------------
   Day of the week against time of day, drawn as a surface rather than a
   table. High ground is where use clusters. It answers "when am I at risk"
   as a shape you remember, which a grid of numbers is not. */
.tr-cell{cursor:pointer}
.tr-contour{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1}
.tr-peak{font-size:11.5px;font-weight:700;fill:#fff}
.tr-lab{font-size:11.5px;font-weight:650;fill:var(--ink-3)}

/* ---- the chooser page --------------------------------------------------- */
.mx{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--gutter)}
.mxc{display:flex;flex-direction:column;padding:26px;border-radius:var(--r-lg);
  background:var(--raise);border:1px solid var(--hair);width:100%;text-align:left;
  transition:transform .24s var(--spring),border-color .24s var(--ease),box-shadow .24s var(--ease)}
.mxc:hover{transform:translateY(-3px);border-color:var(--hair-2);box-shadow:var(--shadow)}
.mxc-art{height:150px;margin-bottom:20px;border-radius:var(--r-md);overflow:hidden;
  background:var(--raise-2);display:grid;place-items:center;padding:12px}
.mxc-art svg{width:100%;height:100%;display:block;overflow:visible}
.mxc-k{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--secondary-soft);margin-bottom:10px}
html[data-theme="light"] .mxc-k{color:var(--secondary)}
.mxc-k i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;
  background:rgba(181,37,85,.2);font-size:11px}
html[data-theme="light"] .mxc-k i{background:#F8E4EC}
.mxc h3{font-family:var(--display);font-size:21px;font-weight:650;letter-spacing:-.025em;
  margin-bottom:8px}
.mxc .ans{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--teal-soft);margin-bottom:12px}
html[data-theme="light"] .mxc .ans{color:#0B7A6F}
.mxc p{font-size:14px;line-height:1.6;color:var(--ink-2);margin-bottom:14px}
.mxc .trade{font-size:12.5px;line-height:1.55;color:var(--ink-3);padding:12px 14px;
  border-radius:var(--r-sm);background:var(--raise-2);border:1px solid var(--hair);margin-bottom:18px}
.mxc .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:14px;
  font-weight:650;color:var(--secondary-soft);transition:gap .2s var(--spring)}
html[data-theme="light"] .mxc .go{color:var(--secondary)}
.mxc:hover .go{gap:12px}