:root {
  --bg: #070b18;
  --panel: #0f1730;
  --panel2: #16224a;
  --edge: #2e4486;
  --text: #c9d4ff;
  --dim: #9aa6d6;
  --accent: #ffd84a;
  --green: #45ff8f;
  --red: #ff4d4d;
  --fa: #d81920;
  --fb: #ffffff;
  --font: "VT323", "Lucida Console", "Courier New", monospace;   /* retro: scoreboard, headings, buttons */
  --read: "IBM Plex Mono", Consolas, "Courier New", monospace;   /* readable: commentary and panels */
}
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/PlexMono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap; src: url("fonts/PlexMono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/PlexMono-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url("fonts/PlexMono-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+A720-A7FF; }
@font-face { font-family: "VT323"; src: url("fonts/VT323-latin.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; }
@font-face { font-family: "VT323"; src: url("fonts/VT323-latin-ext.woff2") format("woff2"); font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+A720-A7FF; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 22px; }
body::after { /* CRT scanlines */
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.07) 2px 3px);
}
.wrap { max-width: 1180px; margin: 0 auto; padding: 12px 16px 24px; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  border-bottom: 2px solid var(--edge); padding-bottom: 8px; }
.brand { color: var(--accent); font-size: 30px; letter-spacing: 2px; text-decoration: none; }
.navlink { color: var(--text); font-size: 20px; text-decoration: none; border: 2px solid var(--edge); padding: 0 10px; background: var(--panel2); }
.navlink:hover, .navlink:focus-visible { color: #000; background: var(--accent); }
.picker { color: var(--dim); }
select { font-family: var(--read); font-size: 15px; background: var(--panel2); color: var(--text);
  border: 2px solid var(--edge); padding: 2px 6px; max-width: 70vw; }

.compline { color: var(--dim); text-align: center; margin: 8px 0 4px; min-height: 24px; font-family: var(--read); font-size: 14px; }

.scoreboard { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 6px 0 10px; }
.team { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px 10px;
  font-size: 32px; letter-spacing: 1px; border: 3px solid rgba(255,255,255,.25); text-transform: uppercase;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35); min-width: 0; overflow-wrap: anywhere; }
.team .short { display: none; }
.pens { color: var(--accent); font-size: 20px; min-height: 0; }
.agg { color: #8fb3ff; font-size: 20px; line-height: 1; cursor: help; }
.agg:empty { display: none; }
.middle { background: #000; border: 3px solid var(--edge); padding: 4px 18px; text-align: center; min-width: 170px; }
.score { font-size: 56px; line-height: 1; color: #fff; }
.clock { font-size: 24px; color: var(--green); }
.phase { color: var(--dim); font-size: 18px; }

.bar { min-height: 76px; display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--panel2); border: 4px double var(--edge); padding: 10px 16px; font-size: 26px; color: var(--accent);
  font-family: var(--read); font-weight: 600; letter-spacing: -.2px;
  line-height: 1.1; overflow-wrap: anywhere; }
.bar.normal { color: var(--text); }
.barcard .ico.card { width: 1em; height: 1.15em; vertical-align: -.2em; margin-right: .45em; }
/* The side on the ball: strip in their shirt colours, as in the game. */
.bar.onball:not(.flash) { background: var(--fa); color: var(--fb); border-color: rgba(255,255,255,.35); text-shadow: 1px 1px 0 rgba(0,0,0,.25); }
.bar.lead { color: #fff; }
.bar.big { color: var(--accent); }
.bar.goal { color: #fff; font-size: 52px; font-family: var(--font); font-weight: normal; letter-spacing: 3px; }
.bar.goal2 { color: var(--green); }
.bar.red { color: var(--red); }
.bar.pen { color: #fff; }
/* CM: the booking line is a bright yellow box with black text; a sending-off gets the red box. */
.bar.yellow { background: #ffd500; color: #000; border-color: #8a7300; }
.bar.red:not(.flash) { background: #c8102e; color: #fff; border-color: #6d0818; }
/* Quiet minutes: the commentary bar goes blank (the scorers live in their own strip above it). */
.bar.idle { background: #0b1330; }
.bar.idle #barText { display: flex; justify-content: space-between; width: 100%; gap: 16px; }
.bar.idle .sc { font-size: 15px; font-weight: 600; color: var(--accent); line-height: 1.35; min-width: 0; }
.bar.idle .sc-a { text-align: right; }
.bar.woodwork { color: #fff; }
.bar.whistle { color: var(--green); }
.bar.result { color: var(--accent); }
/* Card and penalty flashes stay under 3 per second. */
/* A goal, measured frame by frame from CM 01/02 footage (30 fps, 14 goals in two matches):
   the "GOAL FOR ..." line sits in the scorer's colours and swaps them every 0.1 s:
   swapped, normal, swapped ... 25 steps (13 swapped) in 2.5 s, then it stays in the team's colours.
   Like the game, the blinking stops early if the next line arrives first (Fast and Blaze).
   It runs at the same rate at every speed. Reduced-motion settings turn it off. */
.bar.goal.flash { background: var(--fa); color: var(--fb); border-color: rgba(255,255,255,.35); animation: flashGoal .2s step-end 12.5; }
.bar.red.flash { animation: flashRed .8s steps(1) 3; }
.bar.pen.flash, .bar.woodwork.flash { animation: flashPen .8s steps(1) 2; }
@keyframes flashGoal { 0% { background: var(--fb); color: var(--fa); } 50% { background: var(--fa); color: var(--fb); } 100% { background: var(--fa); color: var(--fb); } }
@keyframes flashRed { 0% { background: var(--red); color: #000; } 50% { background: #000; color: var(--red); } }
@keyframes flashPen { 0% { background: #fff; color: #10205a; } 50% { background: #10205a; color: #fff; } }
@media (prefers-reduced-motion: reduce) { .bar { animation: none !important; } }

.progress { position: relative; height: 10px; background: #000; border: 1px solid var(--edge); border-top: 0; }
#prog { height: 100%; width: 0; background: var(--green); transition: width .2s linear; }
.marks { position: absolute; inset: 0; }
.mk { position: absolute; top: 50%; transform: translate(-50%, -50%); cursor: pointer; outline: none; }
.mk-goal { width: 15px; height: 15px; }
.mk-yc, .mk-rc { width: 12px; height: 15px; }
.mk .ico { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 1px #000); }
.mk-nogl { opacity: .75; }
.tip { position: absolute; z-index: 20; background: #000; color: #fff; border: 1px solid var(--edge); padding: 4px 8px;
  font-family: var(--read); font-size: 13px; pointer-events: none; max-width: calc(100vw - 16px); white-space: nowrap; }
.tip[hidden] { display: none; }
.mk:hover, .mk:focus { transform: translate(-50%, -50%) scale(1.25); z-index: 6; }

.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.progress + .controls { margin-top: 30px; }
.group { display: flex; align-items: center; gap: 4px; }
.lbl { color: var(--dim); margin-right: 4px; }
button { font-family: var(--font); font-size: 22px; color: var(--text); background: #1d2c5f; cursor: pointer;
  border: 2px solid; border-color: #4d67b8 #0b1330 #0b1330 #4d67b8; padding: 4px 12px; }
button:active { border-color: #0b1330 #4d67b8 #4d67b8 #0b1330; }
button.on { background: var(--accent); color: #000; }
button.big { min-width: 120px; background: #1e5b34; color: #fff; }
button.big.playing { background: #6b1e1e; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.grid { display: grid; grid-template-columns: 1fr 370px; gap: 12px; }
.panel { background: var(--panel); border: 2px solid var(--edge); padding: 8px 10px; margin-bottom: 12px; }
h2 { margin: 0 0 6px; font-size: 22px; font-weight: normal; color: var(--accent); letter-spacing: 2px;
  border-bottom: 1px dashed var(--edge); padding-bottom: 4px; }

.log { list-style: none; margin: 0; padding: 0; height: 52vh; min-height: 260px; overflow-y: auto; }
.log li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; padding: 2px 0; color: var(--dim);
  font-family: var(--read); font-size: 15px; line-height: 1.45; }
.log li .m { font-family: var(--font); font-size: 19px; line-height: 1.15; }
.log li .m { color: var(--green); opacity: .8; }
.log li.real { color: var(--text); }
.log li.lead { color: var(--text); }
.log li.goal, .log li.goal2 { color: var(--green); }
.log li.red { color: var(--red); }
.log li.yellow { color: var(--accent); }
.log li.pen, .log li.big, .log li.woodwork { color: #fff; }
.log li.result, .log li.whistle { color: var(--accent); }

.keys { list-style: none; margin: 0; padding: 0; max-height: 30vh; overflow-y: auto; }
.keys li { display: grid; grid-template-columns: 52px 24px 1fr auto; gap: 6px; align-items: start; padding: 2px 0;
  font-family: var(--read); font-size: 14px; line-height: 1.4; }
.keys .m { font-family: var(--font); font-size: 19px; line-height: 1.1; color: var(--green); }
.kic { display: flex; justify-content: center; align-items: center; height: 20px; cursor: help; }
.ico { width: 18px; height: 18px; vertical-align: middle; }
.ico.card { width: 16px; height: 18px; }
.ico.arrow { width: 10px; height: 10px; margin: 0 3px 0 0; vertical-align: 0; }
.keys li.k-GOAL, .keys li.k-PEN, .keys li.k-OG { color: #fff; }
.keys li.k-RC { color: #ff8a8a; }
.keys li.k-NOGL span:nth-child(3) { color: var(--dim); text-decoration: line-through; }
.legend { color: var(--dim); font-size: 12px; margin-top: 4px; font-family: var(--read); }

.lineups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; font-size: 13.5px; font-family: var(--read); line-height: 1.55; }
.lineups h3 { margin: 0 0 2px; font-size: 20px; font-weight: normal; color: #fff; font-family: var(--font); }
/* One row per player whatever happens: the name gives way ("...") before the cards and subs do. */
.lineups .lu { display: flex; align-items: center; gap: 0; min-width: 0; white-space: nowrap; min-height: 1.55em; }
.lineups .lu .nm { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lineups .lu .cap { flex: none; margin-left: 3px; }
.lineups .lu .tags { flex: none; display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.lineups .lu.sep { display: block; overflow: hidden; text-overflow: ellipsis; }
.lineups .lu .p { flex: none; display: inline-block; width: 28px; color: var(--dim); font-size: 11.5px; }
.lineups .lu.off .nm { color: var(--dim); }
.lineups .cap { color: var(--accent); font-size: 11.5px; }
.lineups .ev { display: inline-flex; align-items: center; }
.lineups .ev .ico.card { width: 10px; height: 12px; vertical-align: -1px; }
.lineups .ev .ico.arrow { margin: 0; }
.lineups .tagw { white-space: nowrap; display: inline-flex; align-items: center; gap: 1px; }
.lineups .when { color: var(--dim); font-size: 11px; }
.lineups .lu.sent .nm { color: var(--red); text-decoration: line-through; }
.lineups .lu.bench { color: var(--text); }
.lineups .sep { color: var(--dim); margin-top: 4px; }
.lineups .mgr { border-top: 1px dashed var(--edge); padding-top: 2px; }

.foot { color: var(--dim); font-size: 12.5px; text-align: center; margin-top: 4px; font-family: var(--read); line-height: 1.6; }

@media (max-width: 820px) {
  html, body { font-size: 20px; }
  .grid { grid-template-columns: 1fr; }
  .grid > aside { order: -1; }          /* phones and tablets: key events and teams above the commentary */
  .team { font-size: 22px; padding: 6px 4px; }
  .middle { min-width: 0; padding: 4px 8px; }
  .score { font-size: 38px; }
  .bar { font-size: 17px; min-height: 72px; padding: 8px 10px; }
  .bar.goal { font-size: 40px; }
  .log li { font-size: 14px; }
  .log { height: 42vh; }
  .brand { font-size: 24px; }
}
@media (max-width: 600px) {
  .tip { font-size: 12px; white-space: normal; }
  .phase { font-size: 13px; white-space: normal; }
  .team .full { display: none; }
  .team .short { display: inline; }
  .bar { font-size: 14.5px; min-height: 70px; letter-spacing: -.5px; padding: 8px 6px; }
  .bar.goal { font-size: clamp(22px, 7.5vw, 34px); }
  .bar.idle .sc { font-size: 12.5px; }
  .navlink { font-size: 17px; }
  .team { font-size: clamp(12px, 4.4vw, 20px); overflow-wrap: normal; word-break: keep-all; }
}

/* ---- Match list (index.html) ---- */
.count { color: var(--green); font-size: 22px; }
.intro { color: var(--dim); font-family: var(--read); font-size: 14px; margin: 10px 0 4px; }
.listctl { gap: 12px 18px; }
.search { color: var(--dim); display: flex; align-items: center; gap: 6px; }
.search input { font-family: var(--read); font-size: 15px; background: #000; color: var(--text); border: 2px solid var(--edge);
  padding: 4px 8px; width: min(320px, 70vw); }
.search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.listctl { margin: 8px 0; }
.listctl button { font-size: 19px; padding: 2px 8px; }
.listctl select { max-width: 46vw; }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.cat { display: flex; align-items: center; gap: 8px; font-size: 20px; padding: 4px 10px 4px 6px; }
.cat .cico { width: 28px; height: 28px; }
.cat .n { color: var(--green); font-size: 18px; min-width: 16px; }
.cat.on { background: var(--accent); color: #000; }
.cat.on .n { color: #1e5b34; }
.cat.zero { opacity: .45; }
.cico { width: 24px; height: 24px; display: block; }
.mtable .c-ico { width: 32px; padding: 4px 2px 4px 6px; }
.mtable tr.grp td { background: var(--panel2); border-bottom: 2px solid var(--edge); padding: 6px 8px; cursor: default;
  font-family: var(--font); font-size: 22px; color: var(--accent); letter-spacing: 1px; }
.mtable tr.grp td > * { display: inline-block; vertical-align: middle; }
.mtable tr.grp .cico { width: 26px; height: 26px; margin-right: 8px; }
.mtable tr.grp .gn { color: var(--green); font-size: 18px; margin-left: 10px; }
.mtable tbody tr.grp:hover { background: none; }
.mtable { width: 100%; border-collapse: collapse; font-family: var(--read); font-size: 14px; }
.mtable th { text-align: left; font-weight: normal; border-bottom: 2px solid var(--edge); padding: 0; white-space: nowrap; }
.mtable th button { all: unset; cursor: pointer; font-family: var(--font); font-size: 20px; color: var(--accent); letter-spacing: 1px; padding: 2px 8px 4px; }
.mtable th button:focus-visible { outline: 2px solid var(--accent); }
.mtable th.c-res { font-family: var(--font); font-size: 20px; color: var(--accent); padding: 2px 8px 4px; }
.mtable th[aria-sort="ascending"] button::after { content: " \25B2"; font-size: 12px; }
.mtable th[aria-sort="descending"] button::after { content: " \25BC"; font-size: 12px; }
.mtable td { padding: 5px 8px; border-bottom: 1px solid #1d2a55; vertical-align: top; }
.mtable tbody tr { cursor: pointer; }
.mtable tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
.mtable tbody tr:hover, .mtable tbody tr:focus-visible { background: var(--panel2); outline: none; }
.mtable tbody tr:hover .c-match a, .mtable tbody tr:focus-visible .c-match a { color: var(--accent); }
.mtable tr.last td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.mtable .c-date { white-space: nowrap; color: var(--green); font-family: var(--font); font-size: 19px; }
.mtable .c-match a { color: #fff; text-decoration: none; font-weight: 600; }
.mtable .c-comp, .mtable .c-venue { color: var(--dim); }
.mtable .c-res { white-space: nowrap; color: #fff; font-family: var(--font); font-size: 20px; }
.mtable .c-res .hid { color: #3a4a80; }
.mtable .c-play { width: 36px; text-align: center; }
.mtable .play { display: inline-block; color: #fff; background: #1e5b34; text-decoration: none; width: 28px; height: 24px; line-height: 24px;
  border: 2px solid; border-color: #3c9a5d #0b2e17 #0b2e17 #3c9a5d; font-size: 12px; }
.mtable .play:hover { background: var(--green); color: #000; }
.mtable .sub-comp { display: none; }
.empty { color: var(--dim); font-family: var(--read); padding: 12px 8px; }
@media (max-width: 820px) {
  .mtable .c-venue { display: none; }
}
@media (max-width: 600px) {
  .mtable .c-comp { display: none; }
  .mtable .sub-comp { display: block; color: var(--dim); font-size: 12px; font-weight: normal; }
  .mtable { font-size: 13.5px; }
  .mtable td { padding: 5px 4px; }
  .mtable .c-date { font-size: 16px; white-space: normal; }
  .mtable .c-date .d-day { display: block; }
  .mtable .c-res { font-size: 17px; }
  .search input { width: 100%; }
  .search { width: 100%; }
  .cat { font-size: 17px; padding: 3px 8px 3px 4px; }
  .cat .cico { width: 22px; height: 22px; }
  .mtable .c-ico { width: 26px; padding: 4px 0 4px 2px; }
  .mtable .c-ico .cico { width: 20px; height: 20px; }
}

/* ---- Readability pass: the pixel font stays for the big display pieces (title, team names,
   score, clock, panel headings, GOAL); everything small uses the clear mono face in bold capitals. */
html, body { font-family: var(--read); font-size: 16px; }
.brand, .team, .score, .clock, h2, .bar.goal, .count, .mtable tr.grp td { font-family: var(--font); }
h2 { font-size: 25px; }
.clock { font-size: 26px; }
button, .navlink, .lbl, .picker, .search, .cat, .pens, .agg, .phase,
.log li .m, .keys .m, .lineups h3, .mtable th button, .mtable th.c-res, .mtable .c-date, .mtable .c-res {
  font-family: var(--read); font-weight: 600; letter-spacing: .04em;
}
button { font-size: 14px; padding: 6px 12px; text-transform: uppercase; }
button.big { font-size: 16px; }
.navlink { font-size: 13px; padding: 4px 10px; }
.lbl, .picker, .search { font-size: 13px; text-transform: uppercase; }
.pens, .agg { font-size: 14px; }
.phase { font-size: 11px; }
.log li .m, .keys .m { font-size: 13px; line-height: 1.6; }
.lineups h3 { font-size: 14px; text-transform: uppercase; }
.listctl button { font-size: 13px; padding: 4px 9px; }
.cat { font-size: 13px; }
.cat .n { font-size: 13px; }
.mtable th button, .mtable th.c-res { font-size: 13px; }
.mtable .c-date { font-size: 13px; }
.mtable .c-res { font-size: 14px; }
.mtable tr.grp td { font-size: 24px; }
@media (max-width: 820px) {
  html, body { font-size: 15px; }
}
@media (max-width: 600px) {
  .phase { font-size: 10px; }
  .navlink { font-size: 12px; }
  .cat { font-size: 12px; }
  .mtable .c-date { font-size: 12px; }
  .mtable .c-res { font-size: 13px; }
  button { font-size: 13px; padding: 6px 10px; }
}

/* Goalscorers strip: always on screen, between the scoreboard and the commentary bar. */
.scorers { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 8px; padding: 6px 14px; min-height: 22px;
  background: #0b1330; border: 2px solid var(--edge); font-family: var(--read); font-weight: 600; font-size: 15px;
  line-height: 1.4; color: #fff; }   /* scorers in white, so they are never mistaken for yellow cards; reds stay red */
.scorers .sc-col { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.scorers .sc-away { align-items: flex-end; text-align: right; }
.scorers .sc-red { color: #ff8a8a; display: flex; align-items: center; gap: 5px; }
.scorers .sc-card { display: inline-flex; }
.scorers .sc-card .ico { width: 11px; height: 14px; }
.scorers.none { justify-content: center; }
.scorers.none .sc-col { display: none; }
.scorers.none::before { content: "NO GOALS YET"; color: var(--dim); font-size: 13px; letter-spacing: .06em; }
.bar.idle #barText { display: block; }
/* Score beside each key event, home-away. The number that just changed is yellow. */
.keys .ksc { font-family: var(--read); font-weight: 600; font-size: 13px; color: var(--dim); white-space: nowrap; text-align: right; min-width: 34px; }
.keys .ksc.goal { color: #fff; }
.keys .ksc .hi { color: var(--accent); font-weight: 700; }
@media (max-width: 600px) {
  .scorers { font-size: 12.5px; padding: 5px 8px; gap: 8px; }
}
/* Four speed buttons: on the narrowest phones they wrap instead of running off the screen. */
.group { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 360px) { .group button { padding-left: 8px; padding-right: 8px; } }
/* Report a mistake / suggest a match, under every match. */
.fbpanel { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px;
  font-family: var(--read); font-size: 14px; color: var(--dim); }
.fbpanel .fbbtns { display: flex; gap: 8px; flex-wrap: wrap; }
/* Text for screen readers only. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Share row under every match (copy link, WhatsApp, X, ...). */
.sharepanel { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 12px; }
.sharepanel .sp-lbl { font-family: var(--font); font-size: 22px; letter-spacing: 1px; color: var(--accent); }
.sharepanel .sp-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sharepanel .sp-copy { background: var(--accent); color: #111; border-color: var(--accent); }
.foot a { color: var(--dim); }

/* Little pictures on the share and feedback buttons */
.bi { width: 1.05em; height: 1.05em; vertical-align: -0.16em; margin-right: .4em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sharepanel .sp-btns button, .fbpanel .fbbtns button { display: inline-flex; align-items: center; }
.sharepanel .sp-lbl { display: inline-flex; align-items: center; }