/* Quran Explorer */

/* Palette taken from Output/Weak_Thulathi_Mujarrad_Trainer.html, on the user's
   instruction 22 Aug 2026 — dark teal header band with gold lettering over a
   cool grey-green page, white cards, teal accents. It replaces the warm-paper
   and navy scheme so the reader matches the conjugation trainers. Light-only,
   as the trainer is. */
:root {
  /* dark shell — the header band */
  --bg1: #0f2027;
  --bg2: #203a43;
  --bg3: #2c5364;
  --gold: #f4c95d;
  --gold-soft: #f7dd9a;
  /* The dark gold that ornament is drawn in -- the frame rule, the medallions,
     the ayah markers and the selected-ayah edge. Same value the pressed-toggle
     gradient ends on, so the illumination and the chrome agree. */
  --gold-deep: #b8860b;
  --on-dark: #a9c2cd;         /* labels and secondary text on the band */

  /* light surfaces */
  --paper: #ffffff;           /* the reader itself */
  --paper-edge: #eef2f1;      /* the page behind it */
  --card: #f7faf9;
  --tint: #eaf4f0;

  --ink: #17282c;
  --ink-mid: #3d545a;
  --ink-soft: #7b8f96;
  --rule: #dbe5e4;
  --rule-strong: #c6d6d4;

  --accent: #1f5f66;          /* teal */
  --accent-deep: #14454b;
  --accent-soft: #eaf4f0;

  --green: #1e9e6a;
  --amber: #a8760a;
  --amber-ink: #a8760a;
  /* Root-link hover: the trainer's blue. It has to read as "this is a link" at
     a glance, which the teal accent does not against near-black ink. */
  --link: #2f7fb5;

  --bar: #f7faf9;
  --shadow: 0 6px 22px rgba(20, 60, 70, .09);
  --shadow-sm: 0 4px 16px rgba(20, 60, 70, .07);
  --sans: "Segoe UI", Tahoma, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "AlQalam";
  src: url("../fonts/AlQalamQuranMajeed.ttf") format("truetype");
  font-display: swap;
}

/* Qur'an faces, all of them checked against THIS app's text before being added:
   every one covers all 68 codepoints the Uthmani text uses, including the waqf
   signs, sajdah and alef wasla. That check is not optional -- three Uthman Taha
   fonts already in the project miss 21 of those marks each, and a missing mark
   does not fail loudly. The browser simply drops it and the mushaf quietly
   stops being Uthmani. */

/* The Madinah Mushaf typeface, from the King Fahd Complex. WOFF2 first: it is
   61 KB against the OTF's 158 KB for identical rendering. */
@font-face {
  font-family: "KFGQPCHafs";
  src: url("../fonts/KFGQPCHafs.woff2") format("woff2"),
       url("../fonts/KFGQPCHafs.otf") format("opentype");
  font-display: swap;
}

/* Amiri, Amiri Quran, Scheherazade New, Lateef and me_quran were removed on the
   user's instruction, 4 Sep 2026. All five passed the coverage test; they were
   dropped by choice, not by fault, and their masters are kept in
   Arabic Learning\Fonts\ if any is ever wanted back. */

/* For readers who learned from a subcontinental mushaf. ONE of four candidates
   survived testing -- see FONTS in js/ui.js for what each of the other three
   did wrong. PDMS Saleem is the instructive one: it passed the coverage test
   completely and still fused two words together on al-Fatiha 1:2. */
@font-face {
  font-family: "IndoPakNastaleeq";
  src: url("../fonts/IndoPakNastaleeq.ttf") format("truetype");
  font-display: swap;
}

/* Alvi Nastaleeq for Urdu; Noto Nastaliq is kept only as a fallback. */
@font-face {
  font-family: "NastaliqUrdu";
  src: url("../fonts/AlviNastaleeq.ttf") format("truetype"),
       url("../fonts/NotoNastaliqUrdu.ttf") format("truetype");
  font-display: swap;
}

/* Noto on its own, so the dropdown can offer it as a CHOICE rather than only
   as the thing that appears when Alvi fails to load. */
@font-face {
  font-family: "NotoNastaliqUrdu";
  src: url("../fonts/NotoNastaliqUrdu.ttf") format("truetype");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--paper-edge);
  color: var(--ink);
  font-family: var(--sans);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---------------------------------------------------------------- toolbar */

/* The trainer's dark header band. Controls stay on light pills so they keep
   their contrast against it — a dark band with dark controls reads as murk. */
.toolbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 9px 14px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2), var(--bg3));
  font-size: 13px;
}

.toolbar .brand {
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--gold-soft);
  margin-inline-end: 4px;
}

/* FOUR SECTIONS IN ONE ROW, each wrapping internally.
   The sections themselves never wrap -- nowrap on the toolbar keeps them side
   by side as columns, so the three dividers are three full-height rules
   standing in a single row. It is the CONTROLS that wrap, inside their own
   section, when the bar is too narrow to take them on one line.

   That is the opposite of what this was before: the toolbar wrapped whole
   sections onto new rows, which meant a divider could end up as a stray tick
   at the start of a row with nothing to its left to divide.

   min-width:0 is what makes it work. Without it a flex item refuses to shrink
   below its content's width, so nothing would ever wrap and the bar would
   simply overflow sideways. */
.toolbar {
  flex-wrap: nowrap;
  align-items: stretch;      /* every section as tall as the tallest */
}

.group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;     /* SYMMETRY: a one-line section sits centred
                                against a two-line neighbour, rather than
                                riding at the top of its column */
  justify-content: flex-start;
  gap: 6px 8px;
  min-width: 0;
  flex: 0 1 auto;            /* shrink when tight; never grow into empty space,
                                which would leave Dictionary as a wide, almost
                                empty column */
  padding: 2px 13px;
}

/* A section with nothing to wrap must not shrink: flex will happily squeeze it
   below its own content, and a button does not reflow -- it just hangs over the
   edge of the bar. Measured: Dictionary is 84px wide and was being given 72. */
.group.fixed { flex: 0 0 auto; }

/* The divider is a border on the section, not a fixed-height pseudo-element.
   Because the toolbar stretches every section to the same height, the border
   runs the full height of the bar automatically -- no magic number to keep in
   step with how many lines a section happens to need. */
.group + .group {
  border-inline-start: 1px solid rgba(255, 255, 255, .28);
}

/* nowrap and flex:none together: the brand is a flex item on a nowrap row, so
   without them it is squeezed and breaks to "Quran / Explorer". */
.toolbar .brand {
  align-self: center;
  flex: 0 0 auto;
  white-space: nowrap;
}

/* A run of controls inside a section that hides and shows as one -- the tafsir
   pair. Never gets a divider; it is part of its section, not a section. */
.subgroup {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.subgroup[hidden] { display: none; }

/* Selects may shrink; the label beside one may not, so a narrow window
   truncates the value rather than the name of the control. */
.toolbar select {
  min-width: 0;
  max-width: 100%;
}

.group label {
  color: var(--on-dark);
  white-space: nowrap;
}

/* Pills, as the trainer has them. */
select, button, input[type="number"] {
  font: inherit;
  color: var(--accent-deep);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  padding: 4px 12px;
  transition: background .18s ease, border-color .18s ease;
}

select { max-width: 190px; }

button {
  cursor: pointer;
  user-select: none;
}

button:hover:not(:disabled),
select:hover { background: var(--tint); border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }

select:focus, button:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

/* Pressed toggles go GOLD, not teal: on the dark band a teal fill sinks into
   the background, while gold is what the trainer uses to mark an active
   control and it carries against the gradient. */
button.toggle[aria-pressed="true"] {
  background: linear-gradient(135deg, #d9a72f, #b8860b);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(184, 134, 11, .32);
}

button.toggle[aria-pressed="true"]:hover:not(:disabled) {
  background: linear-gradient(135deg, #e0b23f, #c08f0d);
  border-color: transparent;
}

input[type="range"] { width: 92px; accent-color: var(--gold); }

.page-label {
  font-variant-numeric: tabular-nums;
  color: var(--on-dark);
  min-width: 96px;
  text-align: center;
}

/* How well the ayah matched the OCR of the page it was sent to. Quiet by
   default -- a good placement should not shout -- and amber below 60, which is
   the threshold the Assurance Audit counts against. It is deliberately not red:
   a weak match is an invitation to check the pages either side, not an error. */
.irab-conf {
  font-size: .82em;
  opacity: .72;
  cursor: help;
  white-space: nowrap;
}

.irab-conf.is-weak {
  color: var(--gold);
  opacity: 1;
}

/* ------------------------------------------------------------------ stage */

.stage {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  gap: 14px;
  padding: 14px;
}

/* The frame is a wrapper, not the scroller: the medallions have to stay pinned
   to the middle of each side, and anything inside .reader scrolls away. */
.reader-frame {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  border: 1px solid var(--gold-deep);
  border-radius: 3px;
  box-shadow: var(--shadow);
  background: var(--paper);
}

.reader {
  flex: 1 1 auto;
  min-width: 0;
  background: var(--paper);
  overflow-y: auto;
  padding: 22px clamp(18px, 4vw, 56px) 40px;
}

/* A small solid khatam at the middle of each side of the frame, sitting on the
   rule. The paper background is what makes it read as set INTO the rule. */
.medallion {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  color: var(--gold-deep);
  background: var(--paper-edge);
  pointer-events: none;
}

.medallion svg { display: block; width: 16px; height: 16px; }
.medallion.l { left: -8px; }
.medallion.r { right: -8px; }

.quran {
  direction: rtl;
  text-align: justify;
  text-align-last: center;
  /* --quran-scale rides alongside --quran-font, set together by applyStyle.
     These faces differ enormously in optical size at the same pixel height --
     KFGQPC Hafs sets far smaller than Al Qalam, Scheherazade larger -- so
     without it, switching font would send the reader straight to the size
     slider to undo the change. --quran-leading likewise: naskh with dense
     harakat needs more room between lines than Al Qalam does. */
  font-size: calc(var(--quran-size, 32px) * var(--quran-scale, 1));
  line-height: var(--quran-leading, 2.15);
  font-family: var(--quran-font, "AlQalam"), "Traditional Arabic", serif;
}

/* The unwan: the illuminated panel that opens a sura. A strapwork band of
   interlaced khatams above and below the name, gold on the dark ground -- the
   one place in the reader where ornament is doing real work, because a sura
   opening is a genuine structural event rather than decoration for its own
   sake. The bands frame the name; nothing is drawn over any Arabic. */
.unwan {
  margin: 30px 0 18px;
  border: 1px solid var(--gold-deep);
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  font-family: var(--sans);
}

.unwan:first-child { margin-top: 0; }

.unwan .band { display: block; width: 100%; height: 18px; }

.unwan .name { padding: 12px 10px; text-align: center; }

.unwan .ar {
  direction: rtl;
  font-family: var(--quran-font, "AlQalam"), serif;
  font-size: 27px;
  color: var(--gold);
}

.unwan .meta {
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--on-dark);
  margin-top: 4px;
  direction: ltr;
}

.basmala {
  direction: rtl;
  text-align: center;
  font-family: var(--quran-font, "AlQalam"), serif;
  font-size: calc(var(--quran-size, 32px) * var(--quran-scale, 1) * .8);
  color: var(--accent);
  margin: 6px 0 16px;
}

.ayah {
  cursor: pointer;
  border-radius: 5px;
  /* Vertical padding is not optional here: with 0 the highlight box is only the
     font's em box, and Arabic marks that sit above it -- the shadda/fatha stack,
     the small waqf signs -- get sliced off at the top. In em so it tracks the
     size slider. Extra on the right because that is the start of the line in
     RTL, where the box was crowding the first letter. */
  /* Horizontal padding does double duty: it is the highlight's inset AND half
     the gap to the neighbouring ayah. Right stays .4em -- that is the start of
     the line in RTL, where the box was crowding the first letter -- and left is
     .2em, so this ayah's left plus the next one's right comes to .6em, which is
     what the marker's start margin is set to match. Change one, change both. */
  padding: .24em .4em .16em .2em;
  transition: background .12s;
}

.ayah:hover { background: var(--accent-soft); }

/* Pale tint with a gold edge, not the green selection the app used before the
   muṣḥaf pass: the selected ayah sits inside a gold-ruled page beside gold
   markers, and a green box in the middle of that reads as a UI control rather
   than as part of the page. */
.ayah.selected {
  background: var(--tint);
  box-shadow: inset 0 0 0 1px var(--gold-deep);
}

/* ---------- Lane root words ----------
   Only a word whose root HAS a built Explorer page reacts, because only that one
   leads anywhere. A word whose root is known but not yet written still carries it
   in the tooltip and stays inert, so the page never offers a link it cannot open.

   NOTHING IS DRAWN UNTIL HOVER. The user asked for this on 22 Aug 2026, replacing
   a permanent amber underline: an always-on mark under a large share of the words
   competes with the text, and the muṣḥaf should read as the muṣḥaf. The blue is
   the affordance instead, appearing only under the cursor. */
.word.has-page {
  cursor: pointer;
  transition: color .1s;
}

.word.has-page:hover {
  color: var(--link);
}

/* End-of-ayah marker: an outlined eight-point khatam with the number in its
   hollow. Sized in em so it tracks the reader's size slider instead of
   shrinking into the text; the geometry and the number's placement are in
   js/ornament.js, which explains why neither is fixed. */
.mark {
  display: inline-block;
  /* An inline-block sits on the baseline, so a .95em marker would centre .48em
     ABOVE it -- while Al Qalam's ink centres only .25em above (measured: ink
     ascent ~28px, descent ~13px at 32px). That .23em difference is why the
     marker rode high above the line. Shifting it down by the difference lands
     its centre on the Arabic's own centre. Tied to the .95em below: change one
     and this must change with it. */
  vertical-align: -.23em;
  /* Logical, not physical: the text runs RTL, so inline-start is the marker's
     RIGHT edge, facing the ayah it closes. That side gets the whole gap as
     margin; the other side gets none, because the two paddings already supply
     .6em there. Equal air on both sides -- the physical `margin: 0 .26em` this
     replaces looked symmetrical in the code and was 1:4 on screen. */
  margin-inline-start: .6em;
  margin-inline-end: 0;
  color: var(--gold-deep);
}

.mark svg { display: block; width: .95em; height: .95em; }

.mark text {
  font-family: var(--sans);
  font-weight: 700;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
  /* Latin digits inside RTL text: isolate so "255" can't reorder against
     neighbouring Arabic. */
  direction: ltr;
  unicode-bidi: isolate;
  fill: var(--ink-mid);
}

/* Every translation surface — inline, panel, tooltip — sizes off --tr-size so
   the A- / A+ buttons in the panel header move all three together. Nastaliq
   needs roughly a third more height than the serif to stay legible. */
.inline-tr {
  display: block;
  direction: ltr;
  text-align: left;
  font-family: var(--serif);
  font-size: var(--tr-size, 15.5px);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 2px 0 14px;
  padding-inline-start: 10px;
  border-inline-start: 3px solid var(--amber);
}

/* --urdu-scale and --urdu-leading travel WITH --urdu-font, set together by
   applyStyle. They are not decoration: Nastaliq is unreadable below about 1.3x
   and needs 2.5 leading to keep its steep descenders apart, while Tahoma at
   those numbers looks enormous and half-empty. One size for every face would
   make the dropdown offer choices that each need the size slider adjusting
   afterwards. */
.inline-tr.urdu {
  direction: rtl;
  text-align: right;
  font-family: var(--urdu-font, "NastaliqUrdu"), serif;
  font-size: calc(var(--tr-size, 15.5px) * var(--urdu-scale, 1.3));
  line-height: calc(var(--urdu-leading, 2.5) - .1);
  padding-inline-start: 0;
  padding-inline-end: 10px;
  border-inline-start: 0;
  border-inline-end: 3px solid var(--amber);
}

/* ------------------------------------------------------------------ panel */

.panel {
  /* 408px: 340 + 20%. Widened once the panel started carrying a tafsir under
     the translation -- Mufradat runs to 23,000 characters on a single ayah, and
     a word-by-word edition wants its [Arabic : Urdu] pairs to sit more than two
     to a line. Only applies above 900px; below that the panel stacks
     full-width, so there is nothing to widen. */
  flex: 0 0 408px;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.panel[hidden] { display: none; }

.panel header {
  flex: none;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--tint);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.panel header .ref { color: var(--accent-deep); font-weight: 700; }

.panel header .sizer { display: flex; gap: 4px; }

.panel header .sizer button {
  font: 600 11px var(--sans);
  line-height: 1;
  padding: 3px 9px;
  border-radius: 999px;
}

.panel .body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
}

.panel .tr {
  font-family: var(--serif);
  font-size: var(--tr-size, 15.5px);
  line-height: 1.7;
}

.panel .tr.urdu {
  direction: rtl;
  text-align: right;
  font-family: var(--urdu-font, "NastaliqUrdu"), serif;
  font-size: calc(var(--tr-size, 15.5px) * var(--urdu-scale, 1.3));
  line-height: var(--urdu-leading, 2.5);
}

.panel .tr + .tr { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); }

/* Arabic quoted inside Urdu tafsir prose: set in Al Qalam naskh, not in the
   Nastaliq face around it. Vowelled Arabic in Nastaliq is genuinely hard to
   read -- the harakat collide with the steep descending baseline.

   Sized DOWN from the Urdu around it, not up. Nastaliq needs about 1.3x to be
   legible at all; naskh at that size next to it looks shouted. 1.02x of the
   base keeps the two scripts optically level on the same line.

   line-height is deliberately not set: these are inline spans inside an Urdu
   paragraph, and giving them their own line-height would make the leading jump
   on any line that happens to contain a quotation.

   No unicode-bidi either. Isolating the run would give it its own bidi
   context, which resolves the neutral characters at its edges separately and
   can reorder a comma or bracket sitting on the boundary. Urdu and Arabic are
   both RTL, so there is nothing to isolate and nothing to gain. */
.panel .tr.urdu .ar,
.inline-tr.urdu .ar {
  /* Follows the reader's ARABIC choice, not a font of its own. Picking KFGQPC
     Hafs for the mushaf and then finding quoted Arabic still in Al Qalam would
     be two answers to one question.

     Applies to the inline row as well as the panel: a word-by-word edition
     carries Arabic in every bracket, and showing it in naskh in one place and
     Nastaliq in the other would be one edition with two answers. */
  font-family: var(--quran-font, "AlQalam"), "Traditional Arabic", serif;
  font-size: calc(var(--tr-size, 15.5px) * var(--quran-scale, 1) * 1.02);
}

/* "Still loading" and "this work says nothing here" -- both are the absence of
   text, and both must read as absence rather than as content. Kept in the
   Latin face even inside an Urdu block, since neither is Urdu. */
.panel .tr.muted {
  color: var(--ink-soft);
  font-family: var(--sans);
  font-size: 13px;
  font-style: italic;
  line-height: 1.6;
}
.panel .tr .who { display: block; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 4px; direction: ltr; text-align: start; }

.panel .empty { color: var(--ink-soft); font-size: 14px; line-height: 1.6; }

.panel footer {
  flex: none;
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  background: var(--tint);
}

.panel footer button { width: 100%; }

/* ---------------------------------------------------------------- tooltip */

.tooltip {
  position: fixed;
  z-index: 50;
  max-width: 420px;
  padding: 10px 13px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow: var(--shadow);
  font-family: var(--serif);
  font-size: var(--tr-size, 15.5px);
  line-height: 1.6;
  pointer-events: none;
  opacity: 0;
  transition: opacity .1s;
}

.tooltip.show { opacity: 1; }
.tooltip .who { display: block; font-family: var(--sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); margin-bottom: 3px; }
.tooltip.urdu { direction: rtl; text-align: right; font-family: var(--urdu-font, "NastaliqUrdu"), serif; font-size: calc(var(--tr-size, 15.5px) * var(--urdu-scale, 1.3)); line-height: calc(var(--urdu-leading, 2.5) - .1); }

/* ----------------------------------------------------------------- footer */

.about {
  flex: none;
  padding: 6px 14px;
  background: var(--card);
  border-top: 1px solid var(--rule);
  font-size: 11px;
  color: var(--ink-soft);
}

.about a { color: inherit; }

.hint { color: var(--amber-ink); }

/* ------------------------------------------------------------ airab page */

body.airab { background: var(--bg1); }
body.airab .brand { color: var(--gold-soft); }

.airab-stage {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: auto;
  position: relative;
  padding: 12px 0;
}

.airab-scroll { position: relative; margin: 0 auto; }

.pdf-page {
  position: absolute;
  left: 0;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.pdf-page canvas { display: block; width: 100%; height: 100%; }

.pdf-page .stamp {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 6px;
  font: 11px var(--sans);
  color: #888;
  background: rgba(255, 255, 255, .85);
  border-radius: 4px;
  padding: 1px 6px;
}

.status {
  padding: 40px;
  text-align: center;
  color: var(--rule);
  font-size: 14px;
}

/* The startup report bar. Only ever present when the server had something to
   say — a file Google Drive has not downloaded, a shortcut it re-stamped after
   the folder moved. There is no console behind pythonw.exe, so without this the
   reader would have no way to learn any of it. */
#startup-report {
  padding: 9px 14px;
  background: var(--accent-soft);
  border-bottom: 1px solid var(--rule-strong);
  color: var(--accent-deep);
  font-size: 13px;
  line-height: 1.5;
}
#startup-report b { margin-right: 2px; }
#startup-report button {
  margin-left: 10px;
  padding: 1px 9px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--card);
  color: inherit;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
#startup-report button:hover { border-color: var(--accent); }

@media (max-width: 900px) {
  .stage { flex-direction: column; }
  .panel { flex: 0 0 auto; max-height: 40%; }

  /* Four columns side by side stop being readable once each is a hundred-odd
     pixels wide, so below this the sections go back to stacking. The divider
     follows: a vertical rule between stacked blocks would be nonsense, so it
     becomes a horizontal one above each section. */
  .toolbar { flex-wrap: wrap; align-items: center; }
  .group { flex: 1 1 100%; padding: 4px 0; }
  .group + .group {
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, .18);
  }
}