/* ───────────────────────────────────────────────────────────────
   My Flow — Flow Festival 2026
   Type and colour are Flow's own: the seven brand faces served by
   flowfestival.com, #fff203 on #e6e6e6, 2px black rules, 10rem pills.
   ─────────────────────────────────────────────────────────────── */

@font-face{font-family:"Flow Foundation";src:url("fonts/flow-foundation.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:"Flow Text";src:url("fonts/flow-text.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:"Flow Text";src:url("fonts/flow-text-bold.otf") format("opentype");font-display:swap;font-weight:700;font-style:normal}
@font-face{font-family:"Flow Text";src:url("fonts/flow-text-italic.woff2") format("woff2");font-display:swap;font-weight:400;font-style:italic}
@font-face{font-family:"Flow Poster";src:url("fonts/flow-poster.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:"Flow Headline";src:url("fonts/flow-headline.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}
@font-face{font-family:"Flow Compressed";src:url("fonts/flow-compressed.woff2") format("woff2");font-display:swap;font-weight:400;font-style:normal}

:root{
  --brand:#fff203;
  --surface:rgb(230,230,230);
  --paper:#fff;
  --ink:#000;
  --rule:#000;
  --overlay:rgba(0,0,0,.05);
  --clash:#ff3b1f;

  --font-primary:"Flow Foundation",Arial,sans-serif;   /* the logo face — headings */
  --font-body:"Flow Text",Arial,sans-serif;
  --font-display:"Flow Compressed",Arial,sans-serif;   /* very tall + narrow */
  --font-poster:"Flow Poster",Arial,sans-serif;
  --font-headline:"Flow Headline",Arial,sans-serif;

  --pill:10rem;
  --bar-h:56px;
  --pad:16px;

  /* Flow's faces declare a 75/25 em split, but their capitals run from 77.8%
     above the baseline to 0.8% below it — so in a line box with no descenders
     to fill it, 25% of the em is dead air UNDER the caps and the ink sits
     0.135em above the box centre. Every all-caps control therefore takes this
     much extra padding on top and that much less underneath. Measured, not
     eyeballed: canvas fontBoundingBox vs actualBoundingBox at 100px. */
  --cap-drop:0.135em;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
/* An author `display` beats the hidden ATTRIBUTE, and .sheet is display:flex —
   so a "closed" sheet still laid its scrim over the whole app and every tap
   landed on nothing. Anything toggled by [hidden] here needs this line. */
[hidden]{display:none!important}
body{
  background:var(--surface);color:var(--ink);
  font-family:var(--font-body);font-size:16px;line-height:1.45;
  overscroll-behavior-y:none;
  padding-top:calc(var(--bar-h) + env(safe-area-inset-top));
}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
::selection{background:var(--brand)}

/* ─────────── top bar ─────────── */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:60;
  height:calc(var(--bar-h) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) var(--pad) 0;
  background:var(--surface);border-bottom:2px solid var(--rule);
  display:flex;align-items:center;gap:14px;
}
.wordmark{
  display:flex;align-items:baseline;gap:2px;text-decoration:none;
  font-family:var(--font-primary);white-space:nowrap;flex:0 0 auto;
}
.wm-flow{font-size:26px;letter-spacing:-.02em}
.wm-fest{font-family:var(--font-display);font-size:26px;letter-spacing:-.01em}
.wm-date{font-family:var(--font-body);font-size:10px;margin-left:5px;opacity:.62;letter-spacing:.02em}

.tabs{margin-left:auto;display:flex;gap:6px;align-items:center}
.tab{
  font-family:var(--font-primary);font-size:15px;text-transform:uppercase;
  padding:calc(8px + var(--cap-drop)) 15px calc(8px - var(--cap-drop));
  border:2px solid var(--rule);border-radius:var(--pill);
  background:var(--paper);line-height:1;white-space:nowrap;
  display:inline-flex;align-items:center;gap:6px;
  transition:background .14s;
}
.tab:hover{background:var(--brand)}
.tab.is-on{background:var(--ink);color:var(--surface)}
.pip{
  font-family:var(--font-body);font-style:normal;font-size:11px;font-weight:700;
  min-width:19px;height:19px;padding:calc(2 * var(--cap-drop)) 4px 0;border-radius:var(--pill);
  background:var(--brand);color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;
}

/* ─────────── screens ─────────── */
.screen{display:none;padding-bottom:64px}
.screen.is-on{display:block}
.controls{padding:14px var(--pad) 10px;display:flex;flex-direction:column;gap:10px}
.h1{font-family:var(--font-primary);font-size:38px;line-height:.95;text-transform:uppercase;letter-spacing:-.01em}
.hint{font-size:13px;line-height:1.4;opacity:.7;max-width:60ch}
.hint b{font-weight:700}

/* segmented day / view control */
.seg{display:flex;border:2px solid var(--rule);border-radius:var(--pill);overflow:hidden;background:var(--paper)}
.seg .segb{
  flex:1 1 0;padding:calc(10px + var(--cap-drop)) 6px calc(10px - var(--cap-drop));
  font-family:var(--font-primary);font-size:17px;
  text-transform:uppercase;line-height:1;text-align:center;white-space:nowrap;
  border-right:2px solid var(--rule);transition:background .14s;
}
.seg .segb:last-child{border-right:0}
.seg .segb:hover{background:var(--brand)}
.seg .segb.is-on{background:var(--ink);color:var(--surface)}
.seg.small{flex:0 1 auto}
.seg.small .segb{font-size:14px;padding:calc(9px + var(--cap-drop)) 16px calc(9px - var(--cap-drop));flex:0 0 auto}
.segb .sub{display:block;font-family:var(--font-body);font-size:10px;text-transform:none;opacity:.55;margin-top:3px}
.seg .segb.is-on .sub{opacity:.75}
/* A two-line day button already carries the sub-line's own dead descent at the
   bottom, so it needs half the correction a single line does. */
.seg .segb:has(.sub){
  padding-top:calc(9px + var(--cap-drop) * .5);
  padding-bottom:calc(9px - var(--cap-drop) * .5);
}

.row2{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.onlymine{
  display:inline-flex;align-items:center;gap:7px;font-size:13px;
  padding:8px 14px;border:2px solid var(--rule);border-radius:var(--pill);
  background:var(--paper);cursor:pointer;user-select:none;white-space:nowrap;
}
.onlymine input{appearance:none;width:15px;height:15px;border:2px solid var(--rule);border-radius:3px;background:var(--paper);cursor:pointer;flex:0 0 auto}
.onlymine input:checked{background:var(--brand)}
.onlymine input:checked::after{content:"";display:block;width:100%;height:100%;background:var(--ink);clip-path:polygon(14% 46%,4% 58%,38% 88%,96% 22%,86% 12%,37% 66%)}

/* stage chips */
.stagefilter{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none}
.stagefilter::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;font-size:12px;padding:6px 13px;line-height:1.2;
  border:2px solid var(--rule);border-radius:var(--pill);background:var(--paper);
  white-space:nowrap;transition:background .14s;
}
.chip:hover{background:var(--brand)}
.chip.is-on{background:var(--ink);color:var(--surface)}

/* ─────────── timetable grid ─────────── */
.gridwrap{overflow-x:auto;padding:4px 0 20px;-webkit-overflow-scrolling:touch}
.tt{--lane:58px;position:relative;min-width:max-content}
/* The stage column and the ruler's left corner both stick at left:0 — anything
   short of that leaves a gutter for events to scroll through and show beside
   the label. The page's own side padding therefore lives INSIDE the cells. */
.tt-head{display:flex;align-items:stretch;border-bottom:2px solid var(--rule);height:26px}
.tt-corner{
  position:sticky;left:0;z-index:8;flex:0 0 var(--stage-w);width:var(--stage-w);
  background:var(--surface);border-right:2px solid var(--rule);
}
.tt-times{display:grid;height:26px;flex:0 0 auto}
.tt-times span{
  font-size:10px;font-family:var(--font-body);opacity:.6;
  border-left:1px solid rgba(0,0,0,.18);padding-left:3px;line-height:26px;
}
.tt-row{display:flex;align-items:stretch;border-bottom:1px solid rgba(0,0,0,.22)}
.tt-row:last-child{border-bottom:0}
.tt-stage{
  position:sticky;left:0;z-index:5;width:var(--stage-w);flex:0 0 var(--stage-w);
  background:var(--surface);border-right:2px solid var(--rule);
  font-family:var(--font-primary);font-size:13px;text-transform:uppercase;
  line-height:1.05;display:flex;align-items:center;padding:10px 8px 10px var(--pad);
}
.tt-lane{position:relative;flex:1 1 auto;min-height:var(--lane);padding:5px 0}
.tt-grid{position:absolute;inset:0;pointer-events:none}
.tt-grid i{position:absolute;top:0;bottom:0;width:1px;background:rgba(0,0,0,.13)}
.tt-grid i.hour{background:rgba(0,0,0,.22)}
.ev{
  position:absolute;top:5px;bottom:5px;
  border:2px solid var(--rule);border-radius:8px;background:var(--paper);
  padding:5px 7px;overflow:hidden;text-align:left;display:block;
  transition:background .12s,transform .12s;
}
.ev:hover{background:var(--brand);z-index:3}
.ev.is-mine{background:var(--brand)}
.ev.is-mine:hover{background:#ffe600}
.ev.is-clash{border-color:var(--clash);box-shadow:inset 0 0 0 2px var(--clash)}
.ev-n{
  font-family:var(--font-primary);font-size:13px;line-height:1.02;text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.ev-t{font-size:10px;opacity:.66;margin-top:2px;white-space:nowrap}
.ev-star{position:absolute;top:2px;right:3px;font-size:11px;line-height:1;opacity:0}
.ev.is-mine .ev-star{opacity:1}

.nowline{position:absolute;top:26px;bottom:0;width:2px;background:var(--clash);z-index:4;pointer-events:none}
.nowline span{
  position:absolute;top:-24px;left:-2px;background:var(--clash);color:#fff;
  font-family:var(--font-primary);font-size:10px;text-transform:uppercase;
  padding:2px 5px;border-radius:3px;line-height:1.2;
}

/* ─────────── chronological list ─────────── */
.listwrap{padding:2px var(--pad) 20px}
.slot-h{
  position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top));z-index:4;
  background:var(--surface);padding:12px 0 5px;
  font-family:var(--font-primary);font-size:24px;line-height:1;
  border-bottom:2px solid var(--rule);margin-bottom:8px;
}
.item{
  display:flex;align-items:stretch;gap:10px;width:100%;text-align:left;
  border:2px solid var(--rule);border-radius:12px;background:var(--paper);
  margin-bottom:8px;overflow:hidden;transition:background .12s;
}
.item:hover{background:var(--brand)}
.item.is-mine{background:var(--brand)}
.item-img{width:62px;flex:0 0 62px;object-fit:cover;background:var(--overlay);border-right:2px solid var(--rule);align-self:stretch}
.item-b{flex:1 1 auto;min-width:0;padding:9px 4px 9px 0;display:flex;flex-direction:column;justify-content:center;
  text-align:left;background:none;border:0;cursor:pointer}
.item-n{font-family:var(--font-primary);font-size:19px;line-height:1.02;text-transform:uppercase}
.item-m{font-size:12px;opacity:.7;margin-top:3px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.item-m .dot{opacity:.4}
.star{
  flex:0 0 44px;width:44px;align-self:stretch;border-left:2px solid var(--rule);
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1;
  background:transparent;transition:background .12s;
}
.star:hover{background:var(--ink);color:var(--brand)}
.star .off{opacity:.28}
.tag{
  font-size:10px;text-transform:uppercase;font-family:var(--font-primary);
  padding:calc(3px + var(--cap-drop)) 7px calc(3px - var(--cap-drop));
  border-radius:var(--pill);border:1.5px solid var(--rule);line-height:1;
}
.tag.clash{background:var(--clash);color:#fff;border-color:var(--clash)}
.tag.now{background:var(--ink);color:var(--brand);border-color:var(--ink)}

/* ─────────── line-up cards ─────────── */
.searchrow input{
  width:100%;padding:11px 16px;border:2px solid var(--rule);border-radius:var(--pill);
  background:var(--paper);font-size:15px;outline:none;
}
.searchrow input:focus{background:var(--brand)}
.cards{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:10px;padding:2px var(--pad) 20px;
}
/* Every card is a column, and the grid stretches them all to the tallest in
   their row. Left top-aligned, a one-line name leaves a hole at the bottom
   while a three-line one has its times jammed against the border — so the
   times are pushed to the FOOT of the card and line up across the row. */
.card{
  border:2px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper);
  text-align:left;position:relative;transition:background .12s;
  display:flex;flex-direction:column;
}
.card:hover{background:var(--brand)}
.card.is-mine{background:var(--brand)}
.card img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 32%;background:var(--overlay);border-bottom:2px solid var(--rule);flex:0 0 auto}
.card-b{
  flex:1 1 auto;display:flex;flex-direction:column;
  padding:9px 10px 11px;
  /* room for two lines of name and one of times, so a short card never
     collapses to a sliver and the row's rhythm holds */
  min-height:calc(2 * 17px * 1.04 + 11px * 1.32 + 20px);
}
.card-n{font-family:var(--font-primary);font-size:17px;line-height:1.04;text-transform:uppercase}
/* pre-line, because an artist with two sets gets one line each */
.card-m{font-size:11px;opacity:.68;margin-top:auto;padding-top:6px;line-height:1.32;white-space:pre-line}
.card-star{position:absolute;top:6px;right:6px;width:28px;height:28px;border-radius:50%;background:var(--brand);border:2px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:13px}

/* ─────────── my flow ─────────── */
.exportrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn{
  font-family:var(--font-primary);font-size:15px;text-transform:uppercase;line-height:1;
  padding:calc(12px + var(--cap-drop)) 20px calc(12px - var(--cap-drop));
  border:2px solid var(--rule);border-radius:var(--pill);background:var(--paper);
  transition:background .14s;
}
.btn:hover{background:var(--brand)}
.btn.solid{background:var(--brand)}
.btn.solid:hover{background:var(--ink);color:var(--brand)}
.btn.ghost{background:transparent}
.minewrap{padding:2px var(--pad) 20px}
.empty{
  border:2px dashed var(--rule);border-radius:14px;padding:26px 20px;text-align:center;
  margin:6px 0;
}
.empty h2{font-family:var(--font-primary);font-size:26px;text-transform:uppercase;line-height:1;margin-bottom:8px}
.empty p{font-size:14px;opacity:.72;max-width:44ch;margin:0 auto}
.mine-day{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  border-bottom:2px solid var(--rule);padding:16px 0 5px;margin-bottom:9px;
  position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top));background:var(--surface);z-index:4;
}
.mine-day h2{font-family:var(--font-primary);font-size:26px;text-transform:uppercase;line-height:1}
.mine-day .day-ics{font-size:11px;text-transform:uppercase;font-family:var(--font-primary);border-bottom:2px solid var(--rule);line-height:1.2}
.gap{font-size:11px;opacity:.5;text-align:center;padding:1px 0 7px;letter-spacing:.04em}
.clashnote{
  border:2px solid var(--clash);border-radius:12px;background:#fff;
  padding:9px 12px;margin-bottom:9px;font-size:13px;
}
.clashnote b{font-family:var(--font-primary);text-transform:uppercase;font-weight:400;color:var(--clash)}

/* ─────────── sync across devices ─────────── */
.sync{
  border:2px solid var(--rule);border-radius:14px;background:var(--paper);
  padding:14px 16px 16px;margin-top:4px;
}
.sync-head{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.sync-head h2{font-family:var(--font-primary);font-size:19px;text-transform:uppercase;line-height:1}
.sync-dot{width:9px;height:9px;border-radius:50%;background:var(--ink);opacity:.22;flex:0 0 auto}
.sync-dot[data-state="ok"]{background:#12a150;opacity:1}
.sync-dot[data-state="pending"],.sync-dot[data-state="syncing"]{background:var(--ink);opacity:.4;animation:blink 1s ease-in-out infinite}
.sync-dot[data-state="offline"]{background:var(--clash);opacity:1}
@keyframes blink{50%{opacity:.12}}
.sync p{font-size:13px;line-height:1.45;opacity:.72;max-width:52ch;margin-bottom:10px}
.sync .exportrow{margin-top:10px}
.sync-off .btn{margin-right:6px}
.sync-state{font-size:13px;opacity:.72;margin-bottom:6px}
.sync-code{
  font-family:var(--font-primary);font-size:30px;letter-spacing:.06em;line-height:1;
  padding:10px 0 4px;user-select:all;
}
.sync-join label{display:block;font-size:13px;opacity:.72;margin:12px 0 8px}
.sync-joinrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sync-joinrow input{
  font-family:var(--font-primary);font-size:22px;letter-spacing:.06em;text-transform:uppercase;
  width:8.2em;padding:calc(9px + var(--cap-drop)) 14px calc(9px - var(--cap-drop));
  border:2px solid var(--rule);border-radius:var(--pill);background:var(--surface);outline:none;
}
.sync-joinrow input:focus{background:var(--brand)}

/* ─────────── artist sheet ─────────── */
.sheet{position:fixed;inset:0;z-index:100;display:flex;align-items:flex-end;justify-content:center}
.sheet-scrim{position:absolute;inset:0;background:rgba(0,0,0,.45);animation:fade .18s ease-out}
.sheet-body{
  position:relative;width:min(560px,100%);max-height:92vh;overflow-y:auto;
  background:var(--surface);border:2px solid var(--rule);border-bottom:0;
  border-radius:18px 18px 0 0;animation:rise .24s cubic-bezier(.22,1,.36,1);
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y;                    /* the drag reads pan-y itself */
  will-change:transform;
}
/* while a finger owns the sheet, nothing eases — the paper tracks the thumb */
.sheet-body.is-dragging{animation:none;transition:none}
.sheet-body.is-settling{transition:transform .26s cubic-bezier(.22,1,.36,1)}
.sheet.is-closing .sheet-body{transition:transform .2s ease-in;transform:translateY(100%)}
.sheet.is-closing .sheet-scrim{transition:opacity .2s ease-in;opacity:0}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{transform:translateY(28px);opacity:0}}
/* A ZERO-HEIGHT sticky rail: it takes no room, so the photo starts at the very
   top of the sheet, but the button it holds rides over the image and stays
   pinned there however far down the bio you scroll. A floated sticky button —
   the first attempt — reserved a band of empty paper above the picture. */
.sheet-rail{
  position:sticky;top:0;height:0;z-index:6;overflow:visible;
  display:flex;justify-content:flex-end;align-items:flex-start;pointer-events:none;
}
/* the affordance for the swipe — a bar you could take hold of */
.sheet-grab{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  width:46px;height:5px;border-radius:99px;
  background:rgba(255,255,255,.85);box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.sheet-close{
  pointer-events:auto;margin:14px 14px 0 0;
  width:40px;height:40px;flex:0 0 40px;
  border:2px solid var(--rule);border-radius:50%;
  background:var(--paper);font-family:var(--font-primary);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 14px rgba(0,0,0,.30);
  transition:background .14s,transform .14s;
}
.sheet-close:hover{background:var(--brand)}
.sheet-close:active{transform:scale(.94)}
.sheet-hero{
  display:block;width:100%;aspect-ratio:4/5;max-height:44vh;object-fit:cover;
  object-position:50% 32%;   /* faces sit high in Flow's portraits */
  background:var(--overlay);border-bottom:2px solid var(--rule);
  border-radius:16px 16px 0 0;
}
.sheet-in{padding:14px var(--pad) 30px}
.sheet-n{font-family:var(--font-primary);font-size:clamp(30px,8vw,46px);line-height:.94;text-transform:uppercase;letter-spacing:-.01em;margin-bottom:12px}
.sheet-sets{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.sheet-set{
  display:flex;align-items:stretch;border:2px solid var(--rule);border-radius:12px;
  background:var(--brand);overflow:hidden;
}
.sheet-set .ss-b{flex:1 1 auto;padding:9px 12px;min-width:0}
.ss-when{font-family:var(--font-primary);font-size:19px;text-transform:uppercase;line-height:1.05}
.ss-where{font-size:12px;opacity:.72;margin-top:1px}
.sheet-set .star{border-left:2px solid var(--rule)}
.sheet-bio p{font-size:14.5px;line-height:1.55;margin-bottom:11px}
.sheet-links{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.sheet-links a{
  font-family:var(--font-primary);font-size:12px;text-transform:uppercase;line-height:1;
  padding:calc(9px + var(--cap-drop)) 13px calc(9px - var(--cap-drop));
  border:2px solid var(--rule);border-radius:var(--pill);
  background:var(--paper);text-decoration:none;transition:background .14s;
}
.sheet-links a:hover{background:var(--brand)}
.sheet-embed{margin-top:14px;border:2px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper)}
.sheet-embed iframe{display:block;width:100%;border:0}
.sheet-embed.yt iframe{aspect-ratio:16/9;height:auto}
.credit{font-size:11px;opacity:.5;margin-top:18px;line-height:1.45}
.credit a{color:inherit}

/* ─────────── toast ─────────── */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;
  background:var(--ink);color:var(--brand);border-radius:var(--pill);
  padding:11px 20px;font-family:var(--font-primary);font-size:14px;text-transform:uppercase;
  line-height:1;animation:pop .2s ease-out;pointer-events:none;max-width:88vw;text-align:center;
}
@keyframes pop{from{transform:translate(-50%,10px);opacity:0}}

/* ─────────── ?cover — the index card ─────────── */
body.cover{padding-top:0;overflow:hidden}
body.cover .bar,body.cover .controls{display:none}
body.cover .gridwrap{padding:0;overflow:hidden}
body.cover .tt-row{border-bottom:1px solid rgba(0,0,0,.22)}
body.cover .tt{--lane:66px}
body.cover .ev-n{font-size:15px}
body.cover .ev-t{font-size:11px}
.cover-cap{
  position:fixed;left:0;right:0;bottom:0;z-index:20;background:var(--brand);
  border-top:2px solid var(--rule);padding:18px 24px 22px;
}
.cover-cap b{display:block;font-family:var(--font-primary);font-size:44px;line-height:.92;text-transform:uppercase;font-weight:400}
.cover-cap span{display:block;font-size:14px;margin-top:5px}

/* ─────────── wide ─────────── */
@media(min-width:900px){
  :root{--pad:28px}
  .controls{max-width:1400px;margin:0 auto}
  .cards{max-width:1400px;margin:0 auto;grid-template-columns:repeat(auto-fill,minmax(178px,1fr))}
  /* A chronological list is a column of reading, not a table — past about
     900px the eye loses the line between the time and the stage. */
  .listwrap,.minewrap{max-width:900px;margin:0 auto}
  /* My Flow's heading has to sit over its own column, not over 1400px of air */
  .screen[data-screen="mine"] .controls{max-width:900px}
  .slot-h{font-size:28px}
}
@media(max-width:560px){
  .wm-fest,.wm-date{display:none}
  /* the cap-drop has to be restated here — a plain `padding` shorthand at this
     breakpoint silently threw the optical centring away */
  .tab{font-size:13px;padding:calc(8px + var(--cap-drop)) 12px calc(8px - var(--cap-drop))}
  :root{--bar-h:52px}
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}