/* CONTROLS-REFRESH-01 (seat A3, board order of 21 Oct 2026; the design Anwar approved at 7:00 pm): THE SHARED CONTROLS KIT.
   One set of parts for every page. Loaded on every page by base.html, and OPT-IN: there is no element selector in this file
   (no `button`, `select`, `input` or `summary` rule), so a page that uses none of the .ctl-* classes looks exactly as before.
   NATIVE FIRST. Every part is a native element that works with scripting off: segmented = radios in a fieldset, switch = a
   checkbox with role=switch, expander = details/summary, search = a plain form. Only the picker card needs script
   (static/controls.js); without it the native <select> shows, drawn as the card. docs/CONTROLS-KIT.md says how to use each part.
   44 px. Every part's measured box is at least 44 x 44. Where the design draws a smaller pill (34-38 px), a transparent border
   makes up the difference and the background is clipped to the padding box, so the pill looks as drawn and the target is 44.
   COLOURS. The page ground, the surfaces, ink and lines are the site's own tokens (style.css), the sage ground among them
   (board ruling 1, 21 Oct). The one new hue is the controls' green, --ctl-accent, for controls only (ruling 2: verd stays where
   it is used today). Every edge a reader must see is --ink-faint (rulings 3 and 4: 3:1 or better against its ground). */

:root{
  --ctl-accent:#2E5A44;          /* deep green: filled buttons, Play, the chosen chip, a switch that is on, focus. 6.97:1 on sage */
  --ctl-accent-hover:#244A37;
  --ctl-accent-soft:#E3EADF;     /* the chosen row of a list; the picker's icon tile */
  --ctl-on-accent:#FFFFFF;       /* 7.89:1 on --ctl-accent */
  --ctl-field:#FFFFFF;           /* fields, pickers, chips, icon buttons */
  --ctl-edge:var(--ink-faint);   /* the 3:1 edge (rulings 3, 4): 5.54:1 on white, 4.89:1 on sage */
  --ctl-hair:var(--line);        /* decorative dividers only; never the only cue */
  --ctl-track:var(--paper-inset);
  --ctl-muted:var(--ink-soft);
  --ctl-font:var(--rd-sans, ui-sans-serif, system-ui, -apple-system, sans-serif);
  --ctl-r-card:20px; --ctl-r-picker:16px; --ctl-r-field:12px; --ctl-r-pill:999px;
  --ctl-shadow-panel:0 18px 40px rgba(31,42,34,.10);
  --ctl-shadow-play:0 6px 18px rgba(46,90,68,.30);
  --ctl-shadow-pill:0 1px 3px rgba(31,42,34,.18);
  --ctl-ring:var(--ctl-accent);
  --ctl-hit:44px;
}

/* ── focus: one green ring, 2px, offset 2px, on every kit part ─────────────────────────────────────────────────────────── */
.ctl-btn:focus-visible, .ctl-play:focus-visible, .ctl-chip:focus-visible, .ctl-picker-btn:focus-visible,
.ctl-picker-sel:focus-visible, .ctl-field:focus-visible, .ctl-search-in:focus-visible, .ctl-exp > summary:focus-visible,
.ctl-exp--quiet > summary:focus-visible,
.ctl-switch:focus-visible, .ctl-seg-opt:focus-visible{
  outline:2px solid var(--ctl-ring); outline-offset:2px;
}
/* A radio's ring goes on its pill: the input itself is visually hidden. The pill is drawn inside a 3px transparent border, so an offset
   of -1px puts the ring 2px outside the DRAWN pill, as everywhere else (the chip below: -3px on its 5px border). */
.ctl-seg-in:focus-visible + .ctl-seg-opt{ outline:2px solid var(--ctl-ring); outline-offset:-1px; }
/* On the dark footer the green would be lost; the footer's own gold-light reads 7.36:1 there. */
.rd-dark .ctl-btn:focus-visible, .rd-foot .ctl-btn:focus-visible{ outline-color:var(--rd-gold-light, #c7a24e); }

/* HIDDEN MEANS HIDDEN: the kit's display rules must not beat the hidden attribute (the trap audio-player.css records for .va-btn). */
.ctl-btn[hidden], .ctl-play[hidden], .ctl-chip[hidden], .ctl-picker[hidden], .ctl-seg[hidden], .ctl-switch-row[hidden]{ display:none; }
/* A switch shipped hidden (its script reveals it) takes its label row with it. */
.ctl-switch[hidden], .ctl-switch-row:has(> .ctl-switch[hidden]){ display:none; }

/* The installed app's back control (_shell_header.html): a 44 px circle at the start of the header row, before the wordmark. */
.rd-back{ flex:none; margin-inline-end:.25rem; }
/* THE INSTALLED APP'S HEADER AT PHONE WIDTH (the board, 22 Oct 2026). With Back at its start the row must stay ONE line: in the app only
   (html.ctl-app, set before first paint by base.html), below 640 px, Search and More are 44 px icon buttons - More's word is kept as its
   name (visually hidden) and a menu glyph shows - and the row's gaps tighten. The wordmark is not touched; a browser tab is unchanged. */
@media (max-width:639.98px){
  html.ctl-app .rd-header .rd-wrap{ width:calc(100% - 1rem); gap:.5rem; }
  html.ctl-app .rd-header .rd-back{ margin-inline-end:0; }
  html.ctl-app .rd-header .rd-top{ gap:0; }
  html.ctl-app .rd-header .rd-search, html.ctl-app .rd-header .rd-more-btn{ width:44px; min-width:44px; padding:0; justify-content:center; }
  html.ctl-app .rd-header .rd-more-btn > span{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  html.ctl-app .rd-header .rd-more-btn .rd-chev{ display:none; }
  html.ctl-app .rd-header .rd-more-btn::before{ content:""; flex:none; width:22px; height:22px; background-color:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E") center/contain no-repeat; }
}

/* Visually hidden, still read and still focusable where it is a control. */
.ctl-vh{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0; }

/* ── 1 · buttons ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
.ctl-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem; box-sizing:border-box;
  min-height:var(--ctl-hit); min-width:var(--ctl-hit); padding:0 18px; margin:0;
  border:1px solid transparent; border-radius:var(--ctl-r-pill);
  font:600 .9375rem/1.2 var(--ctl-font); text-decoration:none; cursor:pointer;
  background-color:transparent; color:var(--ink); -webkit-tap-highlight-color:transparent;
}
.ctl-btn--primary{ background-color:var(--ctl-accent); color:var(--ctl-on-accent); }
.ctl-btn--primary:hover{ background-color:var(--ctl-accent-hover); }
.ctl-btn--outline{ border-color:var(--ctl-accent); color:var(--ctl-accent); }
.ctl-btn--outline:hover{ background-color:var(--ctl-accent-soft); }
.ctl-btn--quiet{ padding:0 14px; font-weight:400; }
.ctl-btn--quiet:hover{ background-color:var(--ctl-track); }
.ctl-btn--icon{ width:var(--ctl-hit); padding:0; background-color:var(--ctl-field); border-color:var(--ctl-edge); color:var(--ink); }
.ctl-btn--icon:hover{ background-color:var(--ctl-accent-soft); }
.ctl-btn--bare{ width:var(--ctl-hit); padding:0; color:var(--ink); }              /* the player's prev / next / stop */
.ctl-btn--bare:hover{ background-color:var(--ctl-track); }
.ctl-btn--field{ background-color:var(--ctl-field); border-color:var(--ctl-edge); color:var(--ink); }
/* SMALL: a 36 px pill drawn inside a 44 px box. The 4px border is transparent and the fill stops at it; the visible edge is an
   inset shadow, which sits inside the border, so it outlines the drawn pill. */
.ctl-btn--sm{ border:4px solid transparent; background-clip:padding-box; padding:0 12px; font-size:.875rem; font-weight:500; }
.ctl-btn--sm.ctl-btn--outline{ box-shadow:inset 0 0 0 1px var(--ctl-accent); }
.ctl-btn--sm.ctl-btn--field, .ctl-btn--sm.ctl-btn--icon{ box-shadow:inset 0 0 0 1px var(--ctl-edge); }
.ctl-btn[disabled], .ctl-btn[aria-disabled="true"]{ opacity:.45; cursor:default; }
.ctl-btn svg, .ctl-play svg, .ctl-picker svg, .ctl-exp svg, .ctl-search svg{ flex:none; }
.ctl-ico{ width:18px; height:18px; }

/* ── 2 · Play: a filled green circle, 56 px (72 px with --lg) ─────────────────────────────────────────────────────────── */
.ctl-play{
  display:inline-flex; align-items:center; justify-content:center; flex:none; box-sizing:border-box;
  width:56px; height:56px; padding:0; margin:0; border:0; border-radius:50%;
  background-color:var(--ctl-accent); color:var(--ctl-on-accent); box-shadow:var(--ctl-shadow-play); cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ctl-play:hover{ background-color:var(--ctl-accent-hover); }
.ctl-play--lg{ width:72px; height:72px; }
.ctl-play svg{ width:22px; height:22px; }
.ctl-play--lg svg{ width:28px; height:28px; }
/* The script sets data-state; with no state (idle or paused) the play glyph shows. */
.ctl-play .ctl-i-pause, .ctl-play[data-state="playing"] .ctl-i-play{ display:none; }
.ctl-play[data-state="playing"] .ctl-i-pause{ display:block; }

/* ── 3 · segmented choice: a real radio group ─────────────────────────────────────────────────────────────────────────── */
/* A fieldset does not lay its legend out as a flex item, so the group is a plain block: the legend floats left on the track's
   44 px line and the track follows it. */
.ctl-seg{ display:inline-block; vertical-align:middle; margin:0; padding:0; border:0; min-width:0; }
.ctl-seg-k{ float:left; padding:0; margin:0 .625rem 0 0; font:400 .8125rem/44px var(--ctl-font); color:var(--ctl-muted); }
.ctl-seg-track{ display:inline-flex; vertical-align:top; flex-wrap:wrap; gap:0; padding:0; border-radius:var(--ctl-r-pill);
  background-color:var(--ctl-track); box-shadow:inset 0 0 0 1px var(--ctl-edge); }   /* the group's edge is a control edge: 3:1 (board, 22 Oct 2026) */
.ctl-seg-in{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; }
.ctl-seg-opt{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:var(--ctl-hit); min-width:var(--ctl-hit); padding:0 14px; border-radius:var(--ctl-r-pill);
  border:3px solid transparent; background-clip:padding-box;
  font:400 .875rem/1.2 var(--ctl-font); color:var(--ctl-muted); cursor:pointer; white-space:nowrap; user-select:none;
}
.ctl-seg-opt:hover{ color:var(--ink); }
/* Each pill is drawn 38 px tall inside its own 44 px target: a 3px transparent border all round that the fill stops at (pills sit
   6px apart as drawn; the focus ring needs the even border to sit 2px out on every side). A tap anywhere on the row lands on an option. */
.ctl-seg-in:checked + .ctl-seg-opt, .ctl-seg-opt[aria-current]{
  background-color:var(--ctl-field); color:var(--ink); font-weight:600;
  box-shadow:var(--ctl-shadow-pill), inset 0 0 0 1px var(--ctl-edge);      /* ruling 4: the chosen pill's 3:1 edge */
}
.ctl-seg-in:disabled + .ctl-seg-opt{ opacity:.45; cursor:default; }
/* Segmented LINKS (page changes, not choices): the same look on <a>, the current one with aria-current. */
a.ctl-seg-opt{ text-decoration:none; }

/* ── 4 · switch: a checkbox with role=switch, drawn as a 46 x 28 track ────────────────────────────────────────────────── */
.ctl-switch-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--ctl-hit);
  font:400 .9375rem/1.3 var(--ctl-font); color:var(--ink); cursor:pointer; }
.ctl-switch{
  -webkit-appearance:none; appearance:none; flex:none; position:relative; box-sizing:border-box;
  width:46px; height:28px; margin:8px 0; border-radius:var(--ctl-r-pill); cursor:pointer;
  background-color:var(--line-strong); box-shadow:inset 0 0 0 1px var(--ctl-edge);    /* off: 3:1 edge (switch off alone is 1.5:1) */
  transition:background-color .15s;
}
.ctl-switch::before{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background-color:#FFFFFF; box-shadow:0 1px 2px rgba(31,42,34,.25); transition:transform .15s; }
.ctl-switch:checked{ background-color:var(--ctl-accent); box-shadow:none; }
.ctl-switch:checked::before{ transform:translateX(18px); }
.ctl-switch:disabled{ opacity:.45; cursor:default; }
@media (prefers-reduced-motion:reduce){ .ctl-switch, .ctl-switch::before{ transition:none; } }
@media (forced-colors:active){ .ctl-switch{ border:1px solid CanvasText; } .ctl-switch::before{ background-color:CanvasText; }
  .ctl-switch:checked{ background-color:Highlight; } }

/* ── 5 · picker card ──────────────────────────────────────────────────────────────────────────────────────────────────── */
.ctl-picker{ position:relative; min-width:0; font-family:var(--ctl-font); }
/* WITHOUT SCRIPT (and before it runs): the native select, drawn as the card - a white rounded box, the chevron, 56 px tall. */
.ctl-picker-sel{
  -webkit-appearance:none; appearance:none; display:block; box-sizing:border-box; width:100%; min-height:56px; margin:0;
  padding:.5rem 2.5rem .5rem 1rem; border:1px solid var(--ctl-edge); border-radius:var(--ctl-r-picker);
  background:var(--ctl-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23585F5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
  font:600 .9375rem/1.3 var(--ctl-font); color:var(--ink); white-space:normal; text-overflow:clip;
}
.ctl-picker-k{ display:block; margin:0 0 .25rem; font:400 .75rem/1.2 var(--ctl-font); color:var(--ctl-muted); }
/* WITH SCRIPT: the select stays in the page and in its form (visually hidden), and the card stands in for it. */
.ctl-picker[data-ctl-on] > .ctl-picker-k{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.ctl-picker[data-ctl-on] > .ctl-picker-sel{ position:absolute; width:1px; height:1px; min-height:0; padding:0; border:0;
  opacity:0; pointer-events:none; }
.ctl-picker-btn{
  display:flex; align-items:center; gap:12px; box-sizing:border-box; width:100%; min-height:56px; margin:0;
  padding:8px 14px 8px 8px; border:1px solid var(--ctl-edge); border-radius:var(--ctl-r-picker);
  background-color:var(--ctl-field); color:var(--ink); font:inherit; text-align:start; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ctl-picker-btn:hover{ background-color:#FCFCF7; }
.ctl-picker-tile{ flex:none; display:flex; align-items:center; justify-content:center; width:40px; height:40px;
  border-radius:12px; background-color:var(--ctl-accent-soft); color:var(--ctl-accent); font:500 .9375rem/1 var(--f-mono, monospace); }
.ctl-picker-tile svg{ width:20px; height:20px; }
.ctl-picker-tile:empty{ display:none; }   /* CONTROLS-REFRESH-02: a picker with no glyph and no tile text shows no tile (never an empty square) */
.ctl-picker-txt{ display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0; }
.ctl-picker-lab{ font-size:.75rem; line-height:1.2; color:var(--ctl-muted); }
/* THE VALUE NEVER TRUNCATES (Anwar, 21 Oct 2026): a name that carries an honorific - "Sheikh Muhammad Ayyub (may God have mercy
   on him)" - wraps to a second line; there is no ellipsis anywhere in the picker. */
.ctl-picker-val{ font-size:.9375rem; line-height:1.3; font-weight:600; white-space:normal; overflow-wrap:break-word; }
.ctl-picker-chev{ flex:none; width:16px; height:16px; color:var(--ctl-muted); transition:transform .15s; }
.ctl-picker-btn[aria-expanded="true"] .ctl-picker-chev{ transform:rotate(180deg); }
.ctl-picker--compact .ctl-picker-btn{ min-height:var(--ctl-hit); padding:4px 12px 4px 4px; gap:10px; border-radius:22px; }
.ctl-picker--compact .ctl-picker-tile{ width:32px; height:32px; border-radius:50%; }
.ctl-picker--compact .ctl-picker-val{ font-size:.875rem; font-weight:500; }
.ctl-picker--compact .ctl-picker-sel{ min-height:var(--ctl-hit); border-radius:22px; font-weight:500; font-size:.875rem; }
/* the list */
.ctl-list{
  position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px); box-sizing:border-box;
  max-height:min(60vh, 420px); overflow:auto; overscroll-behavior:contain; margin:0; padding:4px 0; list-style:none;
  background-color:var(--ctl-field); border:1px solid var(--ctl-edge); border-radius:14px; box-shadow:var(--ctl-shadow-panel);
  font:400 .875rem/1.35 var(--ctl-font); color:var(--ink);
}
.ctl-list[data-up]{ top:auto; bottom:calc(100% + 6px); }
.ctl-list[hidden]{ display:none; }
.ctl-list-grp{ margin:0; padding:0; list-style:none; }
.ctl-list-h{ padding:8px 14px; font:500 .6875rem/1.2 var(--f-mono, monospace); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ctl-muted); background-color:#F7F7EC; }
.ctl-opt{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:var(--ctl-hit);
  padding:6px 14px; cursor:pointer; white-space:normal; overflow-wrap:break-word; }
.ctl-opt[aria-selected="true"]{ background-color:var(--ctl-accent-soft); font-weight:600; }
.ctl-opt-tick{ flex:none; width:16px; height:16px; color:var(--ctl-accent); visibility:hidden; }
.ctl-opt[aria-selected="true"] .ctl-opt-tick{ visibility:visible; }
.ctl-opt[data-active]{ outline:2px solid var(--ctl-ring); outline-offset:-2px; }
.ctl-opt[aria-disabled="true"]{ color:var(--ctl-muted); cursor:default; }

/* ── 6 · chips: a 34 px pill in a 44 px box ───────────────────────────────────────────────────────────────────────────── */
.ctl-chip{
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-height:var(--ctl-hit); min-width:var(--ctl-hit); padding:0 14px; margin:0;
  border:5px solid transparent; background-clip:padding-box; border-radius:var(--ctl-r-pill);
  background-color:var(--ctl-field); box-shadow:inset 0 0 0 1px var(--ctl-edge);
  font:400 .875rem/1.2 var(--ctl-font); color:var(--ink); text-decoration:none; white-space:nowrap; cursor:pointer;
}
.ctl-chip:hover{ background-color:var(--ctl-accent-soft); }
.ctl-chip[aria-pressed="true"], .ctl-chip[aria-current]:not([aria-current="false"]){
  background-color:var(--ctl-accent); color:var(--ctl-on-accent); font-weight:600; box-shadow:none;
}
.ctl-chip:focus-visible{ outline-offset:-3px; }     /* the ring sits on the drawn pill, not on the transparent border */
.ctl-chips{ display:flex; flex-wrap:wrap; gap:3px; }

/* ── 7 · search: one rounded field, the action inside it ──────────────────────────────────────────────────────────────── */
.ctl-search{ display:flex; align-items:center; gap:10px; box-sizing:border-box; min-height:52px; padding:4px 4px 4px 18px;
  border:1px solid var(--ctl-edge); border-radius:var(--ctl-r-pill); background-color:var(--ctl-field); color:var(--ctl-muted); }
.ctl-search:focus-within{ outline:2px solid var(--ctl-ring); outline-offset:2px; }   /* the spec's ring, 2px out */
.ctl-search-in{ flex:1 1 auto; min-width:0; min-height:var(--ctl-hit); margin:0; padding:0; border:0; background-color:transparent;
  font:400 1rem/1.3 var(--ctl-font); color:var(--ink); }
.ctl-search-in:focus-visible{ outline:none; }        /* the field's own ring is the whole pill (:focus-within above) */
.ctl-search .ctl-btn{ flex:none; }

/* ── fields: small number or text fields (the player's From / to) ─────────────────────────────────────────────────────── */
.ctl-field{ box-sizing:border-box; min-height:var(--ctl-hit); width:4.75rem; margin:0; padding:0 10px;
  border:1px solid var(--ctl-edge); border-radius:10px; background-color:var(--ctl-field);
  font:400 .875rem/1.2 var(--ctl-font); color:var(--ink); -moz-appearance:textfield; }
.ctl-field::-webkit-outer-spin-button, .ctl-field::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* ── 8 · expanders: details/summary, each with a chevron that turns when open ─────────────────────────────────────────── */
.ctl-exp{ border:1px solid var(--ctl-edge); border-radius:14px; background-color:var(--ctl-field); }
.ctl-exp > summary{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:48px;
  padding:0 16px; list-style:none; cursor:pointer; font:600 .9375rem/1.3 var(--ctl-font); color:var(--ink); border-radius:13px; }
.ctl-exp > summary::-webkit-details-marker{ display:none; }
.ctl-exp > summary::after, .ctl-exp--quiet > summary::after{
  content:""; flex:none; width:16px; height:16px; background-color:currentColor; transition:transform .15s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ctl-exp > summary::after{ color:var(--ctl-muted); }
.ctl-exp[open] > summary::after, .ctl-exp--quiet[open] > summary::after{ transform:rotate(180deg); }
.ctl-exp-body{ padding:0 16px 16px; }
/* Sources: quiet text, the 5 Oct rule (sources sit behind an expander); a 44 px hit row even where the text is small. */
.ctl-exp--quiet{ border:0; background-color:transparent; }
.ctl-exp--quiet > summary{ display:inline-flex; align-items:center; gap:6px; min-height:var(--ctl-hit); padding:0 4px;
  list-style:none; cursor:pointer; font:400 .8125rem/1.2 var(--ctl-font); color:var(--ctl-muted); }
.ctl-exp--quiet > summary::-webkit-details-marker{ display:none; }
.ctl-exp--quiet > summary::after{ width:12px; height:12px; }
@media (prefers-reduced-motion:reduce){ .ctl-exp > summary::after, .ctl-exp--quiet > summary::after, .ctl-picker-chev{ transition:none; } }
@media (forced-colors:active){ .ctl-exp > summary::after, .ctl-exp--quiet > summary::after{ background-color:CanvasText; } }

/* ── 9 · link: the one in-text link style for a control that reads as a link (CONTROLS-REFRESH-02 item 5: "Compare translations (N)" and
   "Translators differ here: compare" on the reading pages and the verse page). The controls' green, underlined, the sans at 15 px;
   on a <summary> or an <a>. Doubled class: it must beat the older per-page link rules (style.css lapis, mono labels) it replaces. ──── */
.ctl-link.ctl-link{ color:var(--ctl-accent); font-family:var(--ctl-font); font-size:.9375rem; font-weight:600; font-style:normal;
  letter-spacing:normal; text-transform:none; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.2em;
  cursor:pointer; }
.ctl-link.ctl-link:hover{ color:var(--ctl-accent-hover); text-decoration-thickness:2px; }
.ctl-link.ctl-link:focus-visible{ outline:2px solid var(--ctl-ring); outline-offset:2px; border-radius:2px; }

/* ── cards and panels ─────────────────────────────────────────────────────────────────────────────────────────────────── */
.ctl-card{ background-color:var(--paper-raised); border:1px solid var(--ctl-edge); border-radius:var(--ctl-r-card); }   /* ruling 3 */
.ctl-panel{ background-color:var(--paper-raised); border:1px solid var(--ctl-edge); border-radius:var(--ctl-r-card);
  box-shadow:var(--ctl-shadow-panel); }

/* ── the installed app on iPhone: keep every fixed part clear of the notch, the status bar and the home indicator ───────── */
.ctl-safe-b{ padding-bottom:max(var(--ctl-pad-b, 0px), env(safe-area-inset-bottom, 0px)); }
.ctl-safe-x{ padding-left:max(var(--ctl-pad-x, 0px), env(safe-area-inset-left, 0px));
  padding-right:max(var(--ctl-pad-x, 0px), env(safe-area-inset-right, 0px)); }