/* UVU Review: the minute-by-minute app (#minutesApp). Behaviour lives in js/minutes.js.
   Colour tokens come from css/base.css. Phone layout first; the wide layout starts at 900 px. */

/* ============ TOKENS ============ */
.mn{
  --mn-top:64px;                 /* height of the page's fixed top bar; minutes.js writes the measured value */
  --mn-bar-h:96px;               /* height of the clock bar; minutes.js writes the measured value */
  --mn-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mn-sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mn-head:'Oswald','Arial Narrow',Impact,sans-serif;
  --mn-plot:var(--bg-2);         /* surface of the parallel strip */
  --mn-label-w:0px;              /* width of the row-label column of the strip (wide layout only) */
  --mn-pad-x:22px;               /* air left and right of the strip's time scale */
  --mn-mark:24px;
  --lane:var(--muted);
  position:relative;
  font-family:var(--mn-sans);
}
.mn *,.mn *::before,.mn *::after{box-sizing:border-box}
.mn button{font-family:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
/* hidden="until-found" (a card's folded exact words) keeps its box so find-in-page can reach it */
.mn [hidden]:not([hidden='until-found']){display:none !important}
.mn-ico{display:inline-flex;flex:none;line-height:0}
.mn-ico svg{display:block}
.mn-empty{margin:0;padding:22px 24px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:16px}

/* ============ CLOCK BAR ============ */
.mn-bar{
  /* edge to edge, but its content stays clear of a landscape phone's notch and rounded corners */
  --mn-pl:max(var(--gutter),env(safe-area-inset-left,0px));
  --mn-pr:max(var(--gutter),env(safe-area-inset-right,0px));
  position:sticky;top:var(--mn-top);z-index:40;
  margin:0 calc(-1 * var(--mn-pr)) 0 calc(-1 * var(--mn-pl));padding:0 var(--mn-pr) 0 var(--mn-pl);
  background:var(--bg);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  transition:box-shadow .2s ease,border-color .2s ease;
}
.mn-bar.is-stuck{box-shadow:0 18px 30px -18px rgba(0,0,0,.9)}
.mn-bar.in-band{border-bottom-color:rgba(226,59,59,.7)}
/* phones: one row (clock, chip, Filter, Skip); the track is a progress line on the lower edge */
.mn-bar-in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;
  grid-template-areas:"clock chip filter skip";
  align-items:center;column-gap:10px;row-gap:0;padding:6px 0;
}

.mn-clock{
  grid-area:clock;display:flex;align-items:baseline;gap:6px;min-height:32px;
  font-family:var(--mn-mono);color:var(--white);white-space:nowrap;line-height:1;
}
.mn-clock-t{font-size:30px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mn-clock-ap{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.mn-clock-about{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mn-clock-none{font:600 15px/1.2 var(--mn-sans);color:var(--amber);white-space:nowrap}
.mn-clock-none.is-empty{font-weight:500;color:var(--muted)}
.mn-bar.is-empty .mn-rail-pos,.mn-bar.is-empty .mn-rail-fill{visibility:hidden}
.mn-clock.is-tick .mn-clock-t{animation:mnTick .32s ease-out 1}
/* the clock and the chip share their cell with an invisible copy of their widest text, so the
   track beside them keeps one width while the reader scrolls */
.mn-clockbox{grid-area:clock;display:grid;align-items:center;min-width:0}
.mn-clockbox>.mn-clock{grid-area:1/1}
.mn-chipbox{grid-area:chip;display:grid;justify-items:start;align-items:center;min-width:0}
.mn-chipbox>.mn-elapsed{grid-area:1/1}
.mn-clock-size,.mn-elapsed-size{visibility:hidden;pointer-events:none}
/* on narrow screens the chip has the flexible column, so only the clock's width needs reserving */
@media(max-width:699px){
  .mn-elapsed-size{display:none}
  .mn-clock{min-height:0}
  .mn-clock-t{font-size:26px}
  .mn-clock-about{font-size:12px}
}
/* under 400 px "about" sits above the digits, so the row still fits beside Filter and Skip */
@media(max-width:399px){
  .mn-bar-in{column-gap:8px}
  .mn-clock{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:4px;row-gap:1px}
  .mn-clock-about,.mn-clock-none{grid-column:1 / -1}
}
@keyframes mnTick{0%{transform:translateY(-5px);opacity:.35}100%{transform:none;opacity:1}}

.mn-elapsed{
  grid-area:chip;justify-self:start;max-width:100%;
  padding:5px 11px;border:1px solid var(--line);border-radius:999px;
  font:600 12.5px/1.25 var(--mn-sans);color:var(--ink);background:var(--panel);
}
.mn-elapsed:empty,.mn-elapsed.is-blank{display:none}
.mn-elapsed-short{display:none}
@media(max-width:699px){
  .mn-elapsed{white-space:nowrap;font-size:13px}
  .mn-bar.is-short .mn-elapsed-long{display:none}
  .mn-bar.is-short .mn-elapsed-short{display:inline}
}
@media(max-width:399px){
  .mn-elapsed{padding:5px 9px}
  .mn-elapsed-long{display:none}
  .mn-elapsed-short{display:inline}
}
.mn-elapsed.is-shot{background:#d12f2f;border-color:#d12f2f;color:#fff}
.mn-elapsed.is-after{background:rgba(226,59,59,.16);border-color:rgba(226,59,59,.65);color:#ffe3df}

/* progress track: label above the rail, the two ends below it */
.mn-track{
  grid-area:track;position:relative;display:grid;grid-template-columns:1fr 1fr;
  grid-template-areas:"rail rail" "from to";row-gap:9px;align-content:center;
  min-height:58px;padding:24px 9px 0;border-radius:8px;cursor:pointer;
  touch-action:pan-y;-webkit-user-select:none;user-select:none;
}
.mn-rail{grid-area:rail;position:relative;height:8px}
.mn-rail-bg,.mn-rail-fill{position:absolute;left:0;right:0;top:0;bottom:0;border-radius:4px}
.mn-rail-bg{background:#2a3644}
.mn-rail-fill{background:#8794a6;transform-origin:0 50%;transform:scaleX(0)}
.mn-rail-band{position:absolute;top:-3px;bottom:-3px;min-width:6px;border-radius:3px;background:var(--red);box-shadow:0 0 0 2px var(--bg)}
.mn-rail-label{
  position:absolute;bottom:calc(100% + 7px);transform:translateX(-50%);white-space:nowrap;
  font:600 12.5px/1 var(--mn-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-soft);
}
.mn-rail-pos{position:absolute;left:0;top:0;bottom:0;width:0;pointer-events:none}
.mn-thumb{
  position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;
  background:#fff;border:3px solid #0a0d13;box-shadow:0 0 0 1.5px #fff,0 2px 8px rgba(0,0,0,.6);
  transition:transform .12s ease;
}
.mn-track:focus-visible{outline-offset:-2px}
.mn-track.is-pointer:focus,.mn-track.is-pointer:focus-visible{outline:none}
.mn-track.is-drag .mn-thumb{transform:scale(1.2)}
@media(hover:hover){.mn-track:hover .mn-thumb{transform:scale(1.15)}}
.mn-track-end{font:400 12px/1 var(--mn-mono);color:var(--muted);white-space:nowrap}
.mn-track-end:first-child{grid-area:from;justify-self:start;margin-left:-9px}
.mn-track-end:last-child{grid-area:to;justify-self:end;margin-right:-9px}
/* fold layout (phones, short screens): the track is only a progress line on the bar's lower edge;
   the fill and the red 18-minute band stay, the ends, the label and the thumb go */
.mn.is-fold .mn-track{
  grid-area:auto;position:absolute;left:0;right:0;bottom:-1px;display:block;height:4px;min-height:0;
  margin:0;padding:0;border-radius:0;pointer-events:none;cursor:default;
}
.mn.is-fold .mn-rail{height:4px}
.mn.is-fold .mn-rail-bg,.mn.is-fold .mn-rail-fill{border-radius:0}
.mn.is-fold .mn-rail-band{top:0;bottom:0;border-radius:0;box-shadow:none}
.mn.is-fold .mn-track-end,.mn.is-fold .mn-rail-label,.mn.is-fold .mn-thumb{display:none}

.mn-filterbtn,.mn-filters-open{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);
  font:600 14px/1 var(--mn-sans);cursor:pointer;white-space:nowrap;
  transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.mn-filterbtn{grid-area:filter;position:relative}
/* phones: Filter is an icon button; its label stays for screen readers, and an amber dot shows an active filter */
@media(max-width:699px){
  .mn-filterbtn{width:44px;padding:0}
  .mn-filterbtn .mn-btn-t,.mn.is-filtered .mn-filterbtn .mn-filterbtn-n{
    display:block;position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0;
  }
  .mn-filterbtn .mn-ico{position:relative}
  .mn.is-filtered .mn-filterbtn .mn-ico::after{
    content:"";position:absolute;top:-4px;right:-6px;width:8px;height:8px;border-radius:50%;
    background:var(--amber);box-shadow:0 0 0 2px var(--panel);
  }
}
/* Skip: straight to the next section */
.mn-skip{
  grid-area:skip;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;
  border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);cursor:pointer;
  transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.mn-skip:active{transform:scale(.97)}
@media(hover:hover){.mn-skip:hover{border-color:var(--muted);background:var(--panel-2)}}
.mn-filterbtn:active,.mn-filters-open:active{transform:scale(.97)}
.mn-filterbtn[aria-expanded="true"],.mn-filters-open[aria-expanded="true"]{border-color:var(--ink);background:var(--panel-2)}
.mn-filterbtn-n{font:400 11.5px/1 var(--mn-mono);color:var(--muted)}
.mn-filterbtn .mn-filterbtn-n{display:none}
.mn.is-filtered .mn-filterbtn,.mn.is-filtered .mn-filters-open{border-color:var(--amber)}
.mn.is-filtered .mn-filterbtn .mn-filterbtn-n{display:inline;color:var(--amber)}
.mn.is-filtered .mn-filters-open .mn-filterbtn-n{color:var(--amber)}
@media(hover:hover){
  .mn-filterbtn:hover,.mn-filters-open:hover{border-color:var(--muted);background:var(--panel-2)}
}

/* scroll hint: a chip at the bottom of the screen, out of the reading area */
.mn-hint{
  position:fixed;left:50%;bottom:22px;bottom:calc(22px + env(safe-area-inset-bottom,0px));z-index:2;
  display:flex;align-items:center;gap:10px;width:max-content;max-width:calc(100vw - 32px);padding:9px 20px 9px 12px;
  border:1px solid rgba(255,255,255,.2);border-radius:16px;background:#1d2734;color:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,.7);font:600 16px/1.3 var(--mn-sans);
  pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,10px);
  transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.mn-hint.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
.mn-hint.is-done{display:none}
.mn-hint-finger{display:none}
.mn.is-touch .mn-hint-finger{display:inline-flex}
.mn.is-touch .mn-hint-mouse{display:none}
.mn-hint-up,.mn-hint-down{stroke:var(--amber)}
.mn.is-motion .mn-hint-wheel{animation:mnWheel 1.7s ease-in-out infinite}
.mn.is-motion .mn-hint-down{animation:mnLitA 1.7s linear infinite}
.mn.is-motion .mn-hint-up{animation:mnLitB 1.7s linear infinite}
@keyframes mnWheel{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
@keyframes mnLitA{0%,45%{opacity:1}55%,100%{opacity:.25}}
@keyframes mnLitB{0%,45%{opacity:.25}55%,100%{opacity:1}}

/* filter panel: opens under the bar */
.mn-panel{
  position:absolute;left:0;right:0;top:100%;z-index:3;
  max-height:calc(100vh - var(--mn-top) - var(--mn-bar-h) - 12px);overflow:auto;overscroll-behavior:contain;
  padding:14px var(--mn-pr) 18px var(--mn-pl);background:#121924;border-bottom:1px solid var(--line);
  box-shadow:0 26px 50px rgba(0,0,0,.7);
}
@supports(height:1svh){.mn-panel{max-height:calc(100svh - var(--mn-top) - var(--mn-bar-h) - 12px)}}
/* the heading row with "Done" stays at the top while the panel scrolls (Chrome sticks inside the
   panel's padding, so the offsets are minus the padding) */
.mn-panel-h{
  position:sticky;top:-14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:-14px calc(-1 * var(--mn-pr)) 10px calc(-1 * var(--mn-pl));padding:14px var(--mn-pr) 10px var(--mn-pl);background:#121924;
  transition:box-shadow .2s ease;
}
.mn-panel.is-scrolled .mn-panel-h{box-shadow:0 10px 18px -10px rgba(0,0,0,.9)}
/* fade and "More below" at the lower edge while more of the panel is hidden below */
.mn-panel-more{
  position:sticky;bottom:-18px;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:6px;
  height:58px;margin:-58px calc(-1 * var(--mn-pr)) 0 calc(-1 * var(--mn-pl));padding:0 0 8px;
  background:linear-gradient(180deg,rgba(18,25,36,0) 0,rgba(18,25,36,.94) 55%,#121924 100%);
  font:600 13px/1.2 var(--mn-sans);color:var(--ink);pointer-events:none;
  opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s;
}
.mn-panel-more .mn-ico{color:var(--amber)}
.mn-panel.has-more .mn-panel-more{opacity:1;visibility:visible}
.mn-panel-t,.mn-filters-t{
  margin:0;font:600 11.5px/1 var(--mn-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
}
.mn-panel-x{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:10px;
  background:var(--ink);color:#0a0d13;font:700 14px/1 var(--mn-sans);cursor:pointer;
}
.mn-panel-range{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.mn-panel-range .mn-panel-t{margin-bottom:10px}

/* ============ PARALLEL STRIP ============ */
.mn-strip{margin:28px 0 0}
.mn-strip-h{margin:0 0 14px}
.mn-strip-title{margin:0;font:600 24px/1.1 var(--mn-head);letter-spacing:.01em;text-transform:uppercase;color:var(--white)}
.mn-strip-sub{margin:6px 0 0;max-width:760px;font-size:14.5px;line-height:1.5;color:var(--muted)}
/* the toggle exists only in the fold layout; wider screens show the plain heading */
.mn-strip-toggle{display:none}
.mn.is-fold .mn-strip-plain{display:none}
.mn.is-fold .mn-strip-toggle{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"ico name chev" "ico state chev";
  align-items:center;column-gap:12px;row-gap:3px;width:100%;min-height:62px;padding:10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--white);
  text-align:left;cursor:pointer;transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.mn-strip-toggle .mn-strip-ico{grid-area:ico;color:var(--amber)}
.mn-strip-toggle .mn-strip-name{grid-area:name;font:600 19px/1.1 var(--mn-head);letter-spacing:.01em;text-transform:uppercase;color:var(--white)}
.mn-strip-state{grid-area:state;font:500 13.5px/1.25 var(--mn-sans);letter-spacing:0;text-transform:none;color:var(--muted)}
.mn-strip-chev{grid-area:chev;color:var(--amber)}
.mn-strip-chev svg{transition:transform .2s ease}
.mn-strip-toggle[aria-expanded="true"] .mn-strip-chev svg{transform:rotate(180deg)}
.mn-strip-toggle:active{transform:scale(.985)}
.mn-strip-toggle[aria-expanded="true"]{border-color:#3a4859}
@media(hover:hover){.mn-strip-toggle:hover{border-color:var(--muted);background:var(--panel-2)}}
.mn.is-fold .mn-strip{margin-top:22px}
.mn.is-fold .mn-strip-h{margin:0}
.mn.is-fold .mn-strip.is-open .mn-strip-h{margin-bottom:14px}
.mn.is-fold .mn-strip:not(.is-open) .mn-strip-sub{display:none}
.mn.is-fold .mn-strip-sub{margin-top:12px}
.mn.is-fold .mn-filters{display:none}
.mn.is-fold .mn-bar{margin-top:16px}
.mn.is-fold .mn-list{margin-top:18px}
.mn-strip-frame{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--mn-plot);overflow:hidden}
.mn-strip-scroll{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#3a4859 transparent}
.mn-strip-plot{position:relative;min-width:calc(var(--mn-plot-min,864px) + var(--mn-label-w) + 2 * var(--mn-pad-x))}
.mn-sarea{position:relative;min-width:0}
.mn-sarea-in{position:absolute;left:var(--mn-pad-x);right:var(--mn-pad-x);top:0;bottom:0}

/* header: the two rules with their labels, the gap between them, the time scale */
.mn-shead{border-bottom:1px solid var(--line)}
.mn-slabel.mn-slabel-head{display:none}
.mn-saxis{height:84px}
.mn-rule-label{
  position:absolute;top:10px;bottom:0;display:flex;flex-direction:column;gap:3px;
  white-space:nowrap;font:500 12px/1.15 var(--mn-sans);color:var(--ink);
}
.mn-rule-label strong{font:600 12.5px/1.15 var(--mn-mono);color:var(--white)}
.mn-rule-label::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:var(--red)}
.mn-rule-label.is-left{transform:translateX(-100%);padding-right:9px;align-items:flex-end;text-align:right}
.mn-rule-label.is-left::after{right:-1px}
.mn-rule-label.is-right{right:0;padding-left:9px;white-space:normal}
.mn-rule-label.is-right::after{left:-1px}
.mn-rule-t{display:block;max-width:34ch;overflow-wrap:anywhere}
.mn-gap{position:absolute;top:14px;height:20px;display:flex;align-items:center;justify-content:center}
.mn-gap::before{content:"";position:absolute;left:6px;right:6px;top:50%;height:1px;background:rgba(255,107,94,.6)}
.mn-gap-t{
  position:sticky;left:10px;right:10px;padding:0 9px;background:var(--mn-plot);white-space:nowrap;
  font:600 12.5px/1 var(--mn-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--red-soft);
}
.mn-tick{position:absolute;bottom:7px;transform:translateX(-50%);font:400 11.5px/1 var(--mn-mono);color:var(--muted);font-variant-numeric:tabular-nums}

/* body: one row per group */
.mn-sbody{position:relative}
.mn-slines{position:absolute;left:var(--mn-label-w);right:0;top:0;bottom:0;pointer-events:none}
.mn-wash{position:absolute;top:0;bottom:0;background:rgba(226,59,59,.07)}
.mn-grid{position:absolute;top:0;bottom:0;width:1px;background:rgba(147,161,179,.13)}
.mn-rule{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--red)}
.mn-srow{
  position:relative;border-top:1px solid rgba(38,49,63,.75);transition:opacity .2s ease;
  background:linear-gradient(180deg,#151d29 0,#151d29 32px,rgba(21,29,41,0) 32px);
}
.mn-srow:first-of-type{border-top:0}
.mn-srow.is-dim{opacity:.32}
.mn-slabel{
  position:sticky;left:0;z-index:3;display:flex;align-items:center;gap:8px;
  width:max-content;max-width:calc(100vw - 2 * var(--gutter) - 24px);height:32px;
  margin:0;padding:0 12px;font:600 13px/1.2 var(--mn-sans);color:var(--ink);
}
.mn-lane-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--lane)}
.mn-sempty{position:absolute;left:0;top:50%;transform:translateY(-50%);white-space:nowrap;font:italic 400 12px/1 var(--mn-sans);color:var(--muted)}

/* marks: a filled dot is a time as printed, a ring is a time the source hedges, a bar is a span */
.mn-mark{
  position:absolute;z-index:2;width:var(--mn-mark);height:var(--mn-mark);margin-left:calc(var(--mn-mark) / -2);
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;
}
.mn-dot{
  display:block;width:12px;height:12px;border-radius:50%;background:var(--lane);
  box-shadow:0 0 0 2px var(--mn-plot);transition:transform .12s ease;
}
.mn-mark.is-approx .mn-dot{background:var(--mn-plot);border:3px solid var(--lane)}
.mn-mark.is-from-before .mn-dot{
  width:0;height:0;border-radius:0;background:transparent;box-shadow:none;
  border-style:solid;border-width:6px 9px 6px 0;border-color:transparent var(--lane) transparent transparent;
}
.mn-mark:focus{outline:none}
.mn-mark:focus-visible{outline:3px solid var(--amber);outline-offset:-1px}
.mn-mark:focus-visible .mn-dot{transform:scale(1.3)}
@media(hover:hover){.mn-mark:hover .mn-dot{transform:scale(1.3)}}
.mn-span{
  position:absolute;z-index:1;height:calc(var(--mn-mark) - 6px);margin-top:3px;min-width:6px;
  border-radius:999px;overflow:visible;pointer-events:none;
}
.mn-span::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-radius:inherit;background:var(--lane);opacity:.24}
.mn-span.is-approx::before{opacity:.13}
.mn-span.is-open-end{border-radius:999px 0 0 999px}
.mn-span.is-open-end::after{
  content:"";position:absolute;right:-7px;top:50%;margin-top:-6px;
  border-style:solid;border-width:6px 0 6px 8px;border-color:transparent transparent transparent var(--lane);opacity:.6;
}
.mn-span-t{
  position:relative;display:block;padding:0 10px 0 calc(var(--mn-mark) / 2 + 9px);white-space:nowrap;
  font:500 11px/calc(var(--mn-mark) - 6px) var(--mn-sans);color:var(--ink);
}

/* sideways scrolling affordance */
.mn-strip-frame::before,.mn-strip-frame::after{
  content:"";position:absolute;top:0;bottom:0;z-index:4;width:44px;pointer-events:none;opacity:0;transition:opacity .2s ease;
}
.mn-strip-frame::before{left:0;background:linear-gradient(90deg,rgba(10,13,19,.95),rgba(10,13,19,0))}
.mn-strip-frame::after{right:0;background:linear-gradient(270deg,rgba(10,13,19,.95),rgba(10,13,19,0))}
.mn-strip-frame.more-left::before,.mn-strip-frame.more-right::after{opacity:1}
.mn-swipe{
  display:none;align-items:center;gap:8px;margin:0 0 10px;
  font:600 14px/1.3 var(--mn-sans);color:var(--ink);transition:opacity .3s ease;
}
.mn-swipe .mn-ico{color:var(--amber)}
.mn-strip.can-scroll .mn-swipe{display:flex}
.mn-strip.was-scrolled .mn-swipe{opacity:.55}
.mn.is-motion .mn-strip.can-scroll:not(.was-scrolled) .mn-swipe .mn-ico{animation:mnSwipe 1.6s ease-in-out infinite}
@keyframes mnSwipe{0%,100%{transform:translateX(3px)}50%{transform:translateX(-4px)}}

.mn-tip{
  position:absolute;z-index:6;width:max-content;max-width:min(280px,calc(100% - 16px));padding:10px 12px;border-radius:10px;
  background:#1d2734;border:1px solid rgba(255,255,255,.18);box-shadow:0 14px 34px rgba(0,0,0,.65);pointer-events:none;
}
.mn-tip p{margin:0}
.mn-tip-time{font:600 12px/1.3 var(--mn-mono);color:var(--white)}
.mn-tip-title{margin-top:3px !important;font:500 13.5px/1.35 var(--mn-sans);color:var(--ink)}
.mn-tip-lane{display:flex;align-items:center;gap:7px;margin-top:6px !important;font:400 11.5px/1.3 var(--mn-sans);color:var(--muted)}

.mn-key{display:flex;flex-wrap:wrap;gap:6px 20px;margin:12px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.mn-key-i{display:inline-flex;align-items:center;gap:8px}
.mn-key-s{display:inline-grid;place-items:center;width:26px;height:18px;--lane:#c3ccd8;--mn-plot:var(--bg)}
.mn-key-s .mn-dot{box-shadow:none}
.mn-key-s.is-approx .mn-dot{background:transparent;border:3px solid var(--lane)}
.mn-key-s.is-range .mn-dot{width:26px;height:12px;border-radius:6px;opacity:.4}
.mn-strip-foot{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}

/* ============ FILTERS ============ */
.mn-filters{margin:30px 0 0}
.mn-filters-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.mn-filters-t{display:none}
.mn-filters-open{width:100%;min-height:52px;justify-content:flex-start;font-size:15px}
.mn-filters-open .mn-filterbtn-n{margin-left:auto;font-size:12px}
.mn-filters-chips{display:none}
.mn-chips{display:flex;flex-wrap:wrap;gap:8px}
.mn-chip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:0 14px;
  border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);
  font:500 14px/1.2 var(--mn-sans);text-align:left;cursor:pointer;
  transition:transform .12s ease,background-color .15s ease,border-color .15s ease,color .15s ease;
}
.mn-chip:active{transform:scale(.97)}
.mn-chip-n{font:400 12px/1 var(--mn-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.mn-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#0a0d13;font-weight:600}
.mn-chip[aria-pressed="true"] .mn-chip-n{color:#3b4757}
.mn-chip[aria-pressed="true"] .mn-lane-dot{box-shadow:0 0 0 2px #0a0d13}
.mn-chip[aria-pressed="true"]::before{
  content:"";flex:none;width:13px;height:7px;margin:-4px 1px 0 0;transform:rotate(-45deg);
  border-left:2.5px solid #0a0d13;border-bottom:2.5px solid #0a0d13;
}
@media(hover:hover){.mn-chip[aria-pressed="false"]:hover{border-color:var(--muted);background:rgba(255,255,255,.04)}}

/* ============ LIST ============ */
.mn-list{position:relative;margin:22px 0 0}
.mn-range{display:flex;flex-wrap:wrap;gap:10px}
.mn-range-top{margin:0 0 26px}
.mn-range-bottom{margin:2px 0 0}
.mn-range-bottom.is-open{margin-bottom:26px}
.mn-more{
  flex:1 1 250px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:8px 18px;
  border:1px dashed #4a5a6d;border-radius:12px;background:transparent;color:var(--ink);
  font:600 15px/1.25 var(--mn-sans);text-align:left;cursor:pointer;
  transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.mn-more .mn-ico{color:var(--amber)}
.mn-more:active{transform:scale(.985)}
.mn-more[aria-expanded="true"] .mn-ico svg{transform:rotate(180deg)}
.mn-more-day[aria-expanded="true"] .mn-ico svg{transform:none}
.mn-more-day{border-style:solid;border-color:var(--line);background:var(--panel)}
.mn-more:disabled{opacity:.45;cursor:default}
@media(hover:hover){.mn-more:not(:disabled):hover{border-color:var(--ink);background:rgba(255,255,255,.04)}}
.mn-none{margin:0 0 22px;padding:18px 20px;border:1px dashed var(--line);border-radius:12px;color:var(--muted);font-size:15px}

/* one minute */
.mn-group{position:relative;scroll-margin-top:calc(var(--mn-top) + var(--mn-bar-h) - 56px)}
.mn-ghead{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:0 0 12px 24px}
.mn-ghead::before{
  content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border-radius:50%;
  background:var(--panel);border:2px solid var(--faint);
}
.mn-gtime{
  margin:0;font-family:var(--mn-mono);font-weight:600;font-size:24px;line-height:1.15;letter-spacing:-.02em;
  color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums;
}
.mn-gtime-ap{font-size:13px;letter-spacing:.06em;color:var(--muted)}
.mn-gtime-about{font-size:11px;font-weight:400;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mn-gtime-none{font-family:var(--mn-sans);font-size:15px;font-weight:600;letter-spacing:0;color:var(--amber)}
.mn-gsub{margin:0;font:500 13px/1.3 var(--mn-sans);color:var(--muted)}
.mn-gsub.is-shot,.mn-gsub.is-after{color:#ffb4ac}
.mn-gcount{margin:0;font:400 11.5px/1.3 var(--mn-mono);color:var(--amber)}
.mn-group.is-now .mn-gtime{color:var(--white)}
.mn-group.is-now .mn-ghead::before{border-color:var(--white);background:var(--white)}
.mn-group.in-band .mn-ghead::before,.mn-group.is-roof .mn-ghead::before{border-color:var(--red)}
.mn-group.is-shot .mn-ghead::before,.mn-group.is-roof .mn-ghead::before{background:var(--red);box-shadow:0 0 0 4px rgba(226,59,59,.22)}
.mn-mapbtn{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:4px 0 0;padding:0 14px;
  border:1px solid rgba(61,139,255,.55);border-radius:10px;background:rgba(61,139,255,.12);color:#dbe9ff;
  font:600 13.5px/1.2 var(--mn-sans);cursor:pointer;transition:transform .12s ease,background-color .15s ease;
}
.mn-mapbtn:active{transform:scale(.97)}
@media(hover:hover){.mn-mapbtn:hover{background:rgba(61,139,255,.24)}}
.mn-cards{display:flex;flex-direction:column;gap:12px;margin-left:6px;padding:0 0 30px 17px;border-left:2px solid var(--line)}
.mn-group.in-band .mn-cards{border-left-color:var(--red)}

/* one entry */
.mn-card{
  position:relative;min-width:0;padding:16px 16px 8px;border:1px solid var(--line);border-left:3px solid var(--lane);
  border-radius:12px;background:var(--panel);scroll-margin-top:calc(var(--mn-top) + var(--mn-bar-h) + 16px);
}
.mn-card:focus,.mn-card:focus-visible{outline:none}
.mn-card.is-target{animation:mnTarget 2.2s ease-out 1}
@keyframes mnTarget{0%{box-shadow:0 0 0 3px rgba(244,183,64,.95)}70%{box-shadow:0 0 0 3px rgba(244,183,64,.6)}100%{box-shadow:0 0 0 3px rgba(244,183,64,0)}}
.mn-card-main,.mn-card-src{min-width:0}
.mn-card-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;margin:0 0 10px;min-width:0}
.mn-lane{
  display:inline-flex;align-items:center;gap:8px;max-width:100%;min-width:0;padding:4px 10px 4px 8px;border:1px solid var(--line);border-radius:999px;
  font:600 11px/1.25 var(--mn-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ink);background:rgba(255,255,255,.025);
  overflow-wrap:anywhere;
}
.mn-lane-t{min-width:0}
.mn-time{min-width:0;max-width:100%;font:600 12.5px/1.3 var(--mn-mono);color:var(--ink);overflow-wrap:anywhere}
.mn-flag{
  display:inline-block;max-width:100%;margin:0 0 10px;padding:4px 9px;border:1px dashed rgba(244,183,64,.6);border-radius:6px;
  font:600 12.5px/1.3 var(--mn-mono);letter-spacing:.03em;text-transform:uppercase;color:var(--amber);
}
.mn-title{margin:0 0 8px;font:600 20px/1.22 var(--mn-head);letter-spacing:.01em;color:var(--white);overflow-wrap:anywhere}
.mn-text{margin:0 0 12px;font-size:15.5px;line-height:1.6;color:var(--ink);overflow-wrap:anywhere}
.mn-place{display:flex;align-items:flex-start;gap:7px;min-width:0;margin:0 0 12px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.mn-place .mn-ico{margin-top:3px}
.mn-place-t{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.mn-quote{
  position:relative;margin:0 0 4px;padding:12px 14px 12px 40px;border-left:3px solid #55647a;border-radius:0 10px 10px 0;
  background:rgba(255,255,255,.035) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6d7e' d='M4 17v-5.200C4 8.300 5.900 6 9.500 5.500v2.300C7.800 8.200 7 9.300 7 11h3v6H4zm10 0v-5.200c0-3.500 1.900-5.800 5.500-6.300v2.300C17.800 8.200 17 9.300 17 11h3v6h-6z'/%3E%3C/svg%3E") no-repeat 11px 11px/22px 22px;
}
.mn-quote-t{margin:0;font-size:15px;line-height:1.55;color:var(--white);overflow-wrap:anywhere}
.mn-cite{min-width:0;margin:0;font:400 12.5px/1.4 var(--mn-mono);color:var(--muted);overflow-wrap:anywhere}
.mn-cite-t{display:inline-block;max-width:100%;padding:13px 0;overflow-wrap:anywhere}
.mn-cite-link{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-height:44px;color:var(--blue-soft);text-decoration:underline;text-decoration-color:rgba(127,178,255,.45);text-underline-offset:3px}
.mn-cite-link .mn-cite-t{min-width:0;padding:0}
.mn-cite-arrow{text-decoration:none;display:inline-block}
@media(hover:hover){.mn-cite-link:hover{color:#fff;text-decoration-color:#fff}}
/* the citation row: page link, and on phones one toggle for the exact words and the note */
.mn-src-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:12px}
.mn-src-toggle{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);
  font:600 14px/1.2 var(--mn-sans);text-align:left;cursor:pointer;
  transition:transform .12s ease,border-color .15s ease,background-color .15s ease;
}
.mn-src-toggle:active{transform:scale(.97)}
.mn-src-chev svg{transition:transform .2s ease}
.mn-src-toggle[aria-expanded="true"] .mn-src-chev svg{transform:rotate(180deg)}
@media(hover:hover){.mn-src-toggle:hover{border-color:var(--muted);background:rgba(255,255,255,.04)}}
/* the fold has no box of its own, so a closed fold takes 0 px */
.mn-src-more{margin:0;padding:0;border:0}
.mn-src-more .mn-quote{margin:4px 0 10px}
.mn-note{margin:0 0 10px;padding:10px 0 0;border-top:1px solid var(--line);font-size:13.5px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.mn-note-h{margin-right:8px;font:600 11.5px/1 var(--mn-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.mn-conflict-h strong{overflow-wrap:anywhere}
.mn-tip-title,.mn-tip-time{overflow-wrap:anywhere}
.mn-chip{overflow-wrap:anywhere}

/* a control reached with Tab or Shift+Tab is never left under the sticky clock bar (minutes.js
   checks again after the browser's own scrolling) */
.mn-list a,.mn-list button,.mn-filters button,.mn:not(.is-fold) .mn-strip button{
  scroll-margin-top:calc(var(--mn-top) + var(--mn-bar-h) + 12px);scroll-margin-bottom:12px;
}
.mn.is-fold .mn-strip button{scroll-margin-top:calc(var(--mn-top) + 12px);scroll-margin-bottom:12px}
.mn-conflict{margin:2px 0 10px;padding:12px 14px;border:1px solid rgba(244,183,64,.55);border-radius:10px;background:rgba(244,183,64,.08)}
.mn-conflict-h{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:700 13.5px/1.3 var(--mn-sans);color:var(--amber)}
.mn-conflict-t{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink);overflow-wrap:anywhere}

/* ============ WIDE LAYOUT ============ */
@media(min-width:700px){
  /* the clock bar fits on one line */
  .mn{--mn-bar-h:70px}
  .mn-bar-in{
    grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"clock chip track filter skip";
    column-gap:18px;padding:8px 0;
  }
  .mn-skip{margin-left:-8px}
  .mn-elapsed{font-size:13px;padding:6px 13px}
  .mn-track{margin-left:8px}
  .mn-panel{left:var(--mn-pl);right:var(--mn-pr);border:1px solid var(--line);border-top:0;border-radius:0 0 14px 14px;padding:16px 20px 20px}
  .mn-panel-h{top:-16px;margin:-16px -20px 10px;padding:16px 20px 10px}
  .mn-panel-more{bottom:-20px;margin-left:-20px;margin-right:-20px}
  .mn-rail-label{font-size:13px}
}
@media(min-width:900px){
  .mn{--mn-label-w:232px}
  .mn-clock-t{font-size:34px}
  .mn-clock-ap{font-size:14px}
  .mn-filterbtn .mn-filterbtn-n{display:inline}

  .mn-strip{margin-top:36px}
  .mn-strip-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px}
  .mn-strip-sub{margin:0}
  .mn-shead,.mn-srow{display:grid;grid-template-columns:var(--mn-label-w) minmax(0,1fr)}
  .mn-srow{background:none}
  .mn-slabel.mn-slabel-head{display:block}
  .mn-slabel{width:auto;max-width:none;height:auto;padding:6px 12px 6px 18px;background:var(--mn-plot);border-right:1px solid rgba(38,49,63,.75)}

  .mn-filters{margin-top:34px}
  .mn-filters-t{display:block}
  .mn-filters-open{display:none}
  .mn-filters-chips{display:block;margin-top:12px}

  .mn-list{margin-top:30px}
  .mn-more-day{flex:0 1 auto}
  .mn-group{display:grid;grid-template-columns:188px minmax(0,1fr);column-gap:30px;align-items:start}
  .mn-ghead{
    position:sticky;top:calc(var(--mn-top) + var(--mn-bar-h) + 18px);z-index:1;
    flex-direction:column;align-items:flex-end;gap:4px;padding:0 0 30px;text-align:right;
  }
  .mn-ghead::before{left:auto;right:-38px;top:8px}
  .mn-gtime{font-size:26px}
  .mn-mapbtn{margin-top:8px;padding:0 12px;font-size:13px;white-space:nowrap}
  .mn-cards{margin-left:0;padding:0 0 34px 30px;gap:14px}
  .mn-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:30px;padding:20px 22px 12px}
  .mn-title{font-size:22px}
}

/* large screens (the livestream): the band label and the track ends read from a distance */
@media(min-width:1600px){
  .mn-rail-label{font-size:15px}
  .mn-track-end{font-size:13px}
  .mn-track{padding-top:27px}
}

/* ============ SMALL PHONES: TYPE FLOOR ============ */
@media(max-width:520px){
  .mn-lane,.mn-gcount,.mn-note-h,.mn-filterbtn-n,.mn-clock-about,.mn-gtime-about,
  .mn-tick,.mn-span-t,.mn-panel-t,.mn-filters-t,.mn-tip-lane{font-size:12px}
  .mn-span-t.is-tight{display:none}
}

/* ============ SHORT SCREENS ============ */
/* landscape phones: while the clock bar is stuck the page's top bar gives way (minutes.js sets the flag) */
@media(max-height:480px){
  html[data-mn-cover] .topbar{transform:translateY(-100%)}
}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
  .mn:not(.is-motion) *,.mn:not(.is-motion) *::before,.mn:not(.is-motion) *::after{animation:none !important;transition:none !important}
  .mn:not(.is-motion) .mn-card.is-target{outline:3px solid var(--amber);outline-offset:2px}
}