/* Salmon Run page (/salmon/, templates/salmon.html). Prefix .sr-; colours come from style.css tokens.
   Grades use the tier inks with dark text (contrast 5:1 or more in both themes) and are always written
   out, with pips as a second cue, so nothing depends on colour alone. */
.sr{--sr-dark:#1C1433}

/* the one line at the top: the good shift running now, or the next one */
.sr-next{margin:12px 0 0}
.sr-next-go,.sr-next-none{display:flex;align-items:center;gap:10px;min-height:48px;padding:10px 14px;border-radius:16px;background:var(--surface);
  box-shadow:var(--shadow);font-weight:800;font-size:14.5px;line-height:1.4;text-decoration:none}
.sr-next-go::before,.sr-next-none::before{content:"";flex:none;width:20px;height:20px;background:var(--pop1);border-radius:58% 42% 55% 45% / 50% 60% 40% 50%}
.sr-next-none{color:var(--muted)}
.sr-next-none::before{background:var(--line)}
.sr-next-go::after{content:"";flex:none;margin-left:auto;width:8px;height:8px;border-right:2.5px solid currentColor;border-bottom:2.5px solid currentColor;transform:rotate(-45deg)}

/* Big Run / Eggstra Work banners */
.sr-events{display:grid;gap:8px;margin-top:10px}
.sr-event{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center;min-height:48px;padding:10px 14px;border-radius:16px;
  text-decoration:none;background:var(--pop2-soft);border:2px solid transparent}
.sr-event.sr-k-eggstra{background:var(--pop1-soft)}
.sr-event.is-live{border-color:var(--ink)}
.sr-event-tag{grid-row:1 / span 3;align-self:start;font:800 11px/1 var(--body);padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--ink)}
.sr-event.is-live .sr-event-tag{background:var(--ink);color:var(--ground)}
.sr-event-name{font:400 16px/1.25 var(--display)}
.sr-event-name+.sr-event-stage{font-weight:800;font-size:13px}
.sr-event-when{grid-column:2;font-size:12px;font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.sr-count{grid-column:2;font-size:12.5px;font-weight:800;color:var(--pop1-text)}
.sr-event:not(.sr-k-eggstra) .sr-count{color:var(--pop2-text)}   /* pink on the green fill is below 4.5:1 in dark mode */
.sr-count:empty{display:none}

/* shift cards: every shift is a <details>; the current and the next one start open */
.sr-list{display:grid;gap:10px}
.sr-shift{background:var(--surface);border-radius:18px;box-shadow:var(--shadow);border:2px solid transparent;scroll-margin-top:130px}
.sr-shift.is-live{border-color:var(--pop1)}
.sr-sum{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto 14px;gap:2px 10px;align-items:center;min-height:52px;
  padding:10px 14px;cursor:pointer;border-radius:16px;-webkit-tap-highlight-color:transparent}
.sr-sum::-webkit-details-marker{display:none}
.sr-sum::marker{content:""}
.sr-when{grid-column:1;font-weight:800;font-size:12px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.sr-live{display:inline-block;margin-right:6px;padding:1px 8px;border-radius:999px;background:var(--ink);color:var(--ground);font-size:11px;vertical-align:1px}
.sr-where{grid-column:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
.sr-where b{font:400 16px/1.3 var(--display)}
.sr-rel{font-weight:800;font-size:12.5px;color:var(--pop1-text);white-space:nowrap}
.sr-rel:empty{display:none}
.sr-sum>.sr-mini{grid-column:2;grid-row:1 / span 2}
.sr-shift[open]>.sr-sum>.sr-mini{visibility:hidden}
.sr-shift[open]>.sr-sum .sr-where b{display:none}          /* the stage tile below names it */
.sr-chev{grid-column:3;grid-row:1 / span 2;width:9px;height:9px;border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);
  transform:translateY(-2px) rotate(45deg);transition:transform .15s}
.sr-shift[open] .sr-chev{transform:translateY(2px) rotate(-135deg)}
.sr-body{display:grid;gap:10px;padding:0 14px 14px}

/* stage tile + big grade badge */
.sr-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px}
.sr-tile{min-height:96px}
.sr-tile b{font-size:17px}
/* the names sit on the tile's ink blobs (bright in both themes): a surface backing keeps them at 4.5:1 or more */
.sr-tile>span,.sr-tile>b{align-self:flex-start;max-width:100%;padding:1px 7px;border-radius:8px;background:var(--surface)}
.sr-tile>span{margin-bottom:3px}
.sr-kind{position:absolute;top:8px;left:10px;font:800 10.5px/1 var(--body);font-style:normal;padding:4px 8px;border-radius:999px;background:var(--surface);color:var(--ink)}
.sr-badge{display:grid;align-content:center;justify-items:center;gap:3px;min-width:104px;padding:10px 12px;border-radius:18px;text-align:center}
.sr-badge-h{font:800 11px/1 var(--body)}
.sr-badge b{font:400 20px/1.15 var(--display);white-space:nowrap}
.sr-pips{display:flex;gap:4px}
.sr-pips i{width:8px;height:8px;border-radius:50%;border:1.5px solid currentColor}
.sr-pips i.on{background:currentColor}

/* grade colours (badge, compact-row pill, legend) */
.sr-mini{display:inline-block;padding:4px 10px;border-radius:999px;font-weight:800;font-size:12px;line-height:1.3;white-space:nowrap}
.sr-g-best{background:var(--tS);color:var(--sr-dark)}
.sr-g-good{background:var(--tA);color:var(--sr-dark)}
.sr-g-normal{background:var(--tB);color:var(--sr-dark)}
.sr-g-tough{background:var(--tC);color:var(--sr-dark)}
.sr-g-bad{background:var(--surface2);color:var(--ink);box-shadow:inset 0 0 0 2px var(--muted)}
.sr-nograde{background:var(--surface);color:var(--ink);outline:2px dashed var(--muted);outline-offset:-2px}
.sr-badge.sr-nograde b{font-size:16px;white-space:normal}

/* 編成 / ステージ */
.sr-parts{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.sr-parts li{padding:4px 11px;border-radius:999px;background:var(--surface2);font-size:12.5px;font-weight:800;color:var(--muted)}
.sr-parts b{color:var(--ink)}

/* weapons, 2 x 2 */
.sr-weapons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.sr-w{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 8px;align-items:center;padding:8px;border-radius:14px;background:var(--surface2)}
.sr-w>b{font-weight:800;font-size:13px;line-height:1.3;word-break:keep-all;line-break:strict;overflow-wrap:anywhere}
.sr-w>.chip,.sr-w>.sr-note{grid-column:1 / -1;justify-self:start;white-space:normal}
.sr-w>.chip{background:var(--pop2-soft);border-radius:10px}
.sr-note{font-size:11.5px;font-weight:800;color:var(--muted)}
.sr-w.is-ace{box-shadow:inset 0 0 0 2px var(--pop1)}
.sr-ace{position:absolute;top:-7px;right:6px;padding:2px 8px;border-radius:999px;background:var(--ink);color:var(--ground);font:800 10.5px/1.3 var(--body)}
.sr-wide{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr)}
.sr-qs{display:flex;gap:4px}
.sr-q{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;font:400 22px/1 var(--display);color:var(--sr-dark)}
.sr-q-green{background:radial-gradient(circle at 34% 30%,#B6F7DE 0 14%,#3ED8B6 46%,#12B795 100%)}
.sr-q-gold{background:radial-gradient(circle at 34% 30%,#FFF6C4 0 14%,#FFD447 46%,#E3A600 100%)}
.sr-q-new{background:var(--surface);border:2px dashed var(--muted);color:var(--muted);font:800 12px/1 var(--body)}

/* comments, King Salmonid, source */
.sr-says{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.sr-says li{padding:8px 12px;border-radius:4px 14px 14px 14px;background:var(--pop1-soft);font-size:13.5px;line-height:1.55}
.sr-says li+li{background:var(--pop2-soft)}
.sr-king{margin:0;font-weight:800;font-size:13px}
.sr-src{margin:0;font-size:11.5px;color:var(--muted)}
.sr-src a{color:var(--muted);font-weight:800}
.sr-src .chip{background:var(--surface2)}
.sr-body .share{margin:4px 0 0}

/* page foot */
.sr-foot{margin-top:18px;display:grid;gap:6px}
.sr-foot p{margin:0}
.sr-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.sr-legend-h{font-weight:800;font-size:12.5px;color:var(--muted);margin-right:2px}

@media (max-width:380px){
  .sr-badge{min-width:92px;padding:8px}
  .sr-badge b{font-size:18px}
  .sr-sum,.sr-body{padding-inline:12px}
  .sr-w:not(.sr-wide){grid-template-columns:34px minmax(0,1fr);gap:4px 6px}
  .sr-w .wicon,.sr-q{width:34px;height:34px}
}