/* ── XPS Oasis design refresh ─────────────────────────────────────────
   Bold visual refresh layered over the legacy Tooplate chrome. Loaded LAST
   in App.headW so it wins ties without rewriting layout.css. Carries the
   shared "Spectra" design tokens (deep instrument navy + spectral teal /
   electron blue + Space Grotesk / IBM Plex), refines the chrome, cards and
   forms, and makes page content fluid on phones and tablets.
   (layout.css already had its two signature hexes shifted to this palette:
   #474559 -> --sp-ink, #4187f6 -> --sp-electron.)                        */

:root {
  --sp-ink:      #0C1526;
  --sp-ink-2:    #131F35;
  --sp-ink-3:    #1C2B49;
  --sp-paper:    #F4F6FB;
  --sp-card:     #FFFFFF;
  --sp-glow:     #16B79C;
  --sp-glow-lite:#2FD8BD;
  --sp-electron: #4C7DF0;
  --sp-signal:   #F0553F;
  --sp-text:     #0E1726;
  --sp-muted:    #566887;
  --sp-line:     #DCE3EF;
  --sp-on-ink:       #E7ECF7;
  --sp-on-ink-muted: #92A4C6;
  --sp-display: 'Space Grotesk','IBM Plex Sans',system-ui,sans-serif;
  --sp-body:    'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --sp-mono:    'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

body { background: var(--sp-paper); color: var(--sp-text); }

/* ── typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { font-family: var(--sp-display); letter-spacing: -.01em; }
.page-content h1, .page-content h2 { font-weight: 700; }
/* A link dressed as a BUTTON keeps the button's own ink — `:not(.btn)` is why.
   `.page-content a` is (0,1,1) and every Bootstrap button class is (0,1,0), so
   without the exclusion this rule beat all of them and painted `<a class="btn">`
   electron blue: "Take a look" (`.btn-info`, cyan ground) was barely readable
   and the wiki's "Edit page" (`.button-edit`, #3653DA ground) was blue on blue.
   Excluding rather than forcing #fff is deliberate: each class then applies the
   ink it already declares — #fff on info/primary/success and `.button-edit`,
   #5b5b5b on `.custom-btn`'s pale ground, the border colour on `btn-outline-*`,
   and `.btn-link` keeps the electron of its own rule below. Ten links across
   seven pages are dressed this way. */
.page-content a:not(.btn) { color: var(--sp-electron); }
.page-content a:not(.btn):hover { color: var(--sp-glow); }

/* ── top nav (brand) ────────────────────────────────────────────────── */
nav .brand-name,
nav .brand,
nav a.logo,
.brand-text { font-family: var(--sp-display); font-weight: 700; letter-spacing: -.01em; }

/* ── left icon rail ─────────────────────────────────────────────────── */
/* signature: a spectral-teal glow on the rail's right edge */
.navigation {
  box-shadow: 4px 0 22px -6px rgba(12,21,38,.55), 6px 0 0 -3px var(--sp-glow);
}
/* active/hover rail item gets a teal indicator + tinted ground.
   Every selector here is DOUBLED for button.sidebar-item-control, because a
   rail item that only opens its flyout is a <button> and not an <a> (Admin,
   Profile, Courses, Posting Software, and Spectra while anonymous). layout.css
   already doubles four selectors the same way; these three were missed, so
   exactly those items took no hover ground while every navigating item did. */
nav ul.items li a:hover,
.navigation ul li a:hover,
.navigation ul li button.sidebar-item-control:hover { background-color: var(--sp-electron); }
.navigation ul li.list a,
.navigation ul li.list button.sidebar-item-control { border-left: 3px solid transparent; transition: border-color .15s ease, background-color .15s ease; }
.navigation ul li.list a:hover,
.navigation ul li.list button.sidebar-item-control:hover { border-left-color: var(--sp-glow-lite); }
/* An <a> with NO href keeps the rail's white text. Bootstrap's reboot claims
   `a:not([href]):not([tabindex]) { color: inherit }` at specificity (0,2,1),
   which BEATS layout.css's `.navigation ul li a { color:#fff }` at (0,1,3), so
   such an anchor inherited the body's #212529 onto the #0C1526 rail and was
   effectively unreadable. Logout is the item that hit it: it POSTs over XHR, so
   it is an action carrying no href. The selector below is (0,2,3) — Bootstrap's
   class/attribute count, more type selectors.
   Submenu entries share the missing href but were never affected: their own
   `.navigation .submenu .list_submenu a` rule below is (0,3,1) and still wins,
   which is why they read --sp-on-ink and not this white. Measured, both. */
.navigation ul li a:not([href]) { color: #fff; }
/* Give the footer's links back exactly what layout.css asks for — legacy's
   own `color: inherit` (the footer's white) at `opacity: 0.8`, full opacity on
   hover. This rule changes no colour; it only lets the footer's own rule win.
   It has to exist because the SPA mounts the footer INSIDE `.page-content`
   (App.bodyW, so it survives navigation), which legacy never did: that puts it
   in reach of `.page-content a:not(.btn)` at (0,2,3), beating
   `.footer-basic ul a` at (0,1,2) and painting the links electron blue on the
   footer's own blue. This is (0,3,3). */
.page-content .footer-basic ul a { color: inherit; opacity: .8; }
.page-content .footer-basic ul a:hover { color: inherit; opacity: 1; }

/* Rail labels stay in the BODY face: the display face is wider and pushed the
   longest label past the 270px rail. Ellipsis is the safety net. */
.navigation .title {
  font-family: var(--sp-body);
  font-weight: 500;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Submenu flyout. Legacy renders it as a full-height, saturated-blue slab
   sitting beside the rail — with two items in it, that reads as a broken
   blue column. Make it an extension of the rail instead: same dark surface
   family, a spectral-teal seam, and only as tall as its contents.          */
.navigation .submenu {
  background: var(--sp-ink-2);
  height: auto;
  top: 60px;
  max-height: calc(100vh - 72px);
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 0 14px 14px 0;
}
.navigation .submenu.showsubmenu {
  border-left: 2px solid var(--sp-glow);
  box-shadow: 22px 0 48px -26px rgba(0, 0, 0, .75);
  padding: 10px 0;
}
/* Reflex (Widgets.Sidebar) is the ONLY owner of the flyout's open state,
   through the showsubmenu class. layout.css carries two legacy pure-CSS
   latches — `.navigation:hover .submenu` slides the panel out whenever the
   rail is hovered, and `div.submenu:hover` keeps an already-EMPTIED panel
   expanded as a click-swallowing fixed slab as long as the pointer rests
   on it. Neutralize both (same selectors, later sheet, so the !importants
   here win), and transition only the sliding properties so the measured
   inline `top` anchor is applied instantly instead of animating.         */
.navigation:hover .submenu,
.navigation div.submenu:hover {
  width: 0 !important;
  margin-left: 70px !important;
}
.navigation .submenu.showsubmenu,
.navigation:hover .submenu.showsubmenu,
.navigation div.submenu.showsubmenu:hover {
  width: 270px !important;
  margin-left: 270px !important;
}
.navigation .submenu { transition: width .25s, margin-left .25s; }
.navigation .submenu .list_submenu a { color: var(--sp-on-ink); }
.navigation .submenu .list_submenu a:hover { color: #fff; }

/* ── buttons ────────────────────────────────────────────────────────── */
.btn { font-family: var(--sp-display); font-weight: 600; border-radius: 9px; }
.btn-primary {
  background: linear-gradient(94deg, var(--sp-electron), #6f9bff);
  border: none; box-shadow: 0 10px 24px -12px rgba(76,125,240,.7);
}
.btn-primary:hover { background: linear-gradient(94deg, #3d6ee6, var(--sp-electron)); }
.btn-link { color: var(--sp-electron); font-family: var(--sp-display); font-weight: 600; text-decoration: none; }
.btn-link:hover { color: var(--sp-glow); }

/* ── cards & accordions (manual, FAQs, listings) ────────────────────── */
.page-content .card {
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  box-shadow: 0 14px 34px -26px rgba(20,40,80,.45);
  overflow: hidden;
}
.page-content .card + .card { margin-top: 12px; }
.page-content .card-header { background: #fff; border-bottom: 1px solid var(--sp-line); }
.page-content .card-header .btn-link { font-size: 1.02rem; color: var(--sp-text); }
.page-content .card-header .btn-link:hover { color: var(--sp-glow); }
.accordion > .card { border-radius: 14px; }

/* ── section headings on the AAnalyzer manual / static pages ─────────── */
#products h3, #about h2, #manual h2 { font-family: var(--sp-display); }
.timeline-info h3 a { color: var(--sp-electron); }
.timeline-info h3 a:hover { color: var(--sp-glow); }

/* ── forms & focus ──────────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--sp-glow); outline-offset: 2px; }
.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--sp-electron);
  box-shadow: 0 0 0 3px rgba(76,125,240,.18);
}

/* ── content responsiveness (phones + tablets) ──────────────────────── */
/* Legacy manual/pages set fixed pixel widths on images and iframes; make
   every piece of page media fluid so nothing overflows a narrow screen.   */
.page-content img { max-width: 100%; height: auto; }
.page-content iframe { max-width: 100%; }
/* AAnalyzer manual specifics */
.image_manual { width: 100% !important; height: auto !important; }
.pop, .col-md-3.pop { max-width: 100%; }
.modal-body iframe,
.modal-body img { max-width: 100%; }
.modal-body iframe { width: 100%; }
/* keep wide tables from blowing out the layout */
.page-content .table-responsive,
.page-content table { max-width: 100%; }

/* The periodic table is ~810px of fixed 45px cells, so `max-width: 100%`
   above cannot shrink it — it just overflows. Give it a scroller of its own
   so a phone scrolls the TABLE instead of the whole page, and so the
   right-hand elements stay reachable rather than being clipped away. */
.periodic_table_scroll {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* The expansion row's level buttons must not be squeezed by the scroller. */
.periodic_table_scroll > table { max-width: none; }

/* Home's "How to select a forum" cards overflow the page sideways, and the
   cause is the flexbox default rather than either declared width. element.css
   asks for a 30% image beside a 70% text column, which adds to exactly 100% —
   but both are flex items, and a flex item's default `min-width: auto` forbids
   shrinking below its own content. step1.png is 1919px wide intrinsically, so
   the image holds itself far past 30% (measured at 76% of the card) and the
   text column still claims its 70% floor underneath. 146% cannot fit at any
   viewport width.

   Letting both shrink is the whole fix: the image keeps element.css's 30% cap
   and the text takes whatever is left, which IS 70% on a wide screen — the
   layout legacy asked for, now able to survive a narrow one. Same specificity
   as element.css's rules, winning on load order, so the vendored sheet stays
   untouched. */
ul.list_home li.item_home > img,
ul.list_home li.item_home > div { min-width: 0; }
ul.list_home li.item_home > img { flex: 0 1 auto; }
ul.list_home li.item_home > div { flex: 1 1 auto; }

/* Same page, second cause. Home's display-by bar carries THREE segments in a
   33% flex row (the navigators carry two, which is why only Home showed this),
   and Bootstrap gives `.btn` `white-space: nowrap`. "Display by trendings
   of ... " therefore holds a 227px intrinsic width inside a 125px column on a
   phone, and drags the document out with it. Letting the labels wrap costs
   nothing on a wide screen, where they never reach two lines. */
.buttons_display_by .btn { white-space: normal; }

/* The chat's contact panel and its docked window occupy the SAME corner —
   layout.css puts `.chats_container` and `.chat_window_dock` both at
   bottom:14px right:74px — and the dock is later in the DOM, so it painted over
   the panel: with a conversation docked, the launcher opened a contact list that
   could not be clicked (its rows sat under the window's composer). Legacy had no
   such collision because `#chats_container` was ONE flex row holding the contact
   list and every window side by side (`row-reverse`); this SPA docks its single
   window in a fixed layer of its own so the launcher keeps the corner, which is
   what separated them. The panel wins the top layer rather than being moved
   beside the window: it is an explicit toggle that closes on the first pick,
   where a hard-coded offset would have to guess the window's width. */
.chats_container { z-index: 1041; }

/* ── Software versions chooser ──────────────────────────────────────── */
/* The card used to BE the link and these rules sat on the anchor. It holds two
   destinations now — the version console, and the manual console under it — so
   the card is a plain `.card` div and the anchor rules moved onto
   `.software_version_open`, the title-and-blurb link. The card keeps the lift,
   because the whole box is still what the pointer aims at.

   `.card` is already `display:flex; flex-direction:column` in Bootstrap, which
   is what lets the button's `mt-auto` push it to a shared baseline; do not put
   `display:block` back on this class. */
.page-content .software_version_card {
  transition: transform .12s ease, box-shadow .12s ease;
}
.page-content .software_version_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -6px rgba(12, 21, 38, .35);
}
/* Without this the title link falls to `.page-content a:not(.btn)` and reads as
   ordinary blue body text, which is the affordance the card is trying to be. */
.page-content .software_version_card .software_version_open,
.page-content .software_version_card .software_version_open:hover {
  display: block;
  color: inherit;
  text-decoration: none;
}
.page-content .software_version_card .card-title {
  color: var(--sp-electron);
}
/* Full width so the three manual buttons are the same size whatever their
   program is named — "AAnalyzer Manual" and "AAMultiLayer Manual" differ by
   four characters, which is enough to make three shrink-to-fit buttons look
   misaligned across the row. */
.page-content .software_manual_btn {
  width: 100%;
}

/* ── post card: legacy's layout ─────────────────────────────────────── */
/* The card's markup is legacy's class for class, but the sheet that LAYS IT
   OUT is `newCards.css`, which `App.headW` deliberately does not load: applied
   to this simplified DOM it hides the vote arrows and clips the drawers (see
   section 5). So the layout rules are copied here, with legacy's own values,
   and nothing else from that sheet comes with them.
   Every rule is scoped under `.post_card` — the card's own root — so none of
   these generic names (`.post_title`, `.information_left`) can reach a page
   that happens to reuse one. */

/* header: author on the left, share on the right */
.post_card .post_header { display: flex; }
/* The author's picture, legacy's newCards.css rule — which this SPA does not
   load, so it is restated here SCOPED to the card. `flex: none` is the part
   that is not legacy's: the header is a flex row here, so without it a long
   author name squeezes the avatar into an ellipse. */
.post_card .img_profile {
  flex: none; width: 60px; margin: 5px 10px; padding-top: 5px;
}
.post_card .img_profile img {
  width: 50px; height: 50px; border-radius: 50%; object-fit: cover;
}
/* The privacy badge, legacy's newCards.css rule, restated for the same
   reason and scoped the same way. */
.post_card .post_privacy_badge {
  font-weight: bold; padding: .25rem .5rem; border-radius: 6px;
  font-size: .75rem; white-space: nowrap; align-self: center;
  margin-right: 8px;
}
.post_card .post_privacy_badge.badge_public {
  background-color: #d4edda; color: #155724;
}
.post_card .post_privacy_badge.badge_private {
  background-color: #f8d7da; color: #721c24;
}
.post_card .post_information {
  display: flex; flex-direction: row; justify-content: space-between;
  width: 100%;
}
.post_card .information_left { display: block; width: inherit; }
.post_card .post_owner p {
  /* legacy: 2.8rem. The card leads with WHO posted. */
  font-size: 2.8rem; line-height: 1.15; width: fit-content; cursor: pointer;
  margin-bottom: 0;
}
.post_card .post_owner p a { color: inherit; }
/* Date left, post code right — one row, which is the whole job of this div. */
.post_card .information_down {
  display: flex; width: 100%; justify-content: space-between;
  font-size: .9rem; align-items: center;
}
.post_card .information_down p { font-size: inherit; margin-bottom: 0; }
.post_card .information_right {
  min-width: 30px; width: fit-content; height: fit-content;
  text-align: center; cursor: pointer; display: flex; align-items: flex-start;
  gap: 8px;
}
/* The three dots and the menu behind them. Legacy's `.dropdown-content1`
   (teamOverview.css) is `position:absolute; right:0; background:#f9f9f9;
   min-width:160px` with that box-shadow; the width is raised because our
   controls open their panels INSIDE the menu — legacy's each opened a modal,
   and there are no modals for them here. */
.post_card .icon_show_buttons_div { position: relative; display: inline-block; }
.post_card .icon_show_buttons { cursor: pointer; display: inline-flex; }
.post_card .dropdown-content1 {
  position: absolute; right: 0; z-index: 20;
  background-color: #f9f9f9; border-radius: 6px;
  min-width: 200px; width: max-content; max-width: min(380px, 80vw);
  box-shadow: 0 8px 16px 0 rgba(0,0,0,.2);
  text-align: left;
}
/* Legacy stacks them with `width: -webkit-fill-available`; one act per row is
   what makes a menu read as a menu. */
.post_card .dropdown-content1 > div { margin-bottom: 6px; }
.post_card .dropdown-content1 .btn { width: 100%; margin-right: 0 !important; }
.post_card .dropdown-content1 .post-author-controls {
  border-top: 1px solid rgba(0,0,0,.1); padding-top: 8px;
}

/* content: the title row, then the body */
.post_card .post_content { display: block; margin-top: 15px; position: relative; }
.post_card .post_title { display: flex; justify-content: space-between; align-items: flex-start; }
.post_card .post_title_text { font-size: 1.5rem; color: #757575; margin-bottom: 0; }
.post_card .icons_verif { margin-top: 6px; }
.post_card .post_tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }

/* the comment, in legacy's grey box with Read more in its corner */
.post_card .post_question {
  padding: 10px; border-radius: 10px; position: relative;
  background-color: #f5f5f5; margin-top: 10px;
}
.post_card .read_more {
  position: absolute; right: 12px; bottom: 7px; font-size: 15px;
  cursor: pointer; color: var(--sp-electron);
}

/* THE change that was visible: these are COLUMNS, not a stack. */
.post_card .post_extra_information {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 12px; margin-top: 10px; flex-wrap: wrap;
}
.post_card .post_aditional_info { display: flex; align-items: flex-start; gap: 12px; }
.post_card .post_aditional_info > div { padding: 0 5px; }
.post_card .extra_info_list {
  display: flex; flex-direction: column; padding-left: 5px;
  border-left: 1px solid #58B5FA; list-style: none; margin-bottom: 0;
}
/* Label on the left, value on the right, which is how legacy reads a
   parameter row. */
.post_card .extra_info_list p { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; }

.post_card .post_footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(0,0,0,.2); margin-top: 30px; padding-top: 10px;
}

/* Below the rail's breakpoint the columns stop being columns: four of them on
   a phone leave each about 80px wide. */
@media (max-width: 1066px) {
  .post_card .post_extra_information,
  .post_card .post_aditional_info { display: block; }
  .post_card .post_owner p { font-size: 1.8rem; }
}

/* ── post card: the collapsible labels ──────────────────────────────── */
/* "Files :", "References :" and the three parameter headings are the only
   controls on a card that carry no button dress at all: legacy leans on
   `newCards.css` for that, and this SPA deliberately does not load it (applied
   to the simplified DOM here it hides the vote arrows). Left plain they read as
   inert captions, so nobody clicks them and the drawer under each one is never
   found. Bold, the link colour and a pointer are the smallest thing that says
   "this opens".

   The caret already rotates via `.toorotate`; this only dresses the label. */
.page-content .extra_info_label,
.page-content .post_files > p,
.page-content .post_references > p {
  color: var(--sp-electron);
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}
/* Underline only on hover: a hue change would read as a different control,
   and there is no darker blue token to step to. */
.page-content .extra_info_label:hover,
.page-content .post_files > p:hover,
.page-content .post_references > p:hover {
  text-decoration: underline;
}
/* The chevron is part of the control, so it takes the same ink. */
.page-content .extra_info_label_icon ion-icon {
  color: inherit;
  vertical-align: middle;
}

/* ── navbar search box ──────────────────────────────────────────────── */
/* One rounded field with a glyph at each end, which is legacy's shape: the
   magnifier on the left, the advanced-search options on the right, both ON the
   input. Legacy leaned on `.icon_search_right { right: 30px }` to slide the
   glyph back over the field, and that only worked because its form ended
   there; this navbar has a Search button after the box, so in flow the glyph
   overlapped the input AND left a hole. Absolute against this wrapper puts it
   where legacy drew it and costs the row nothing.

   The offsets in search.css are cancelled HERE rather than edited there: that
   sheet is global and the search RESULTS page uses `.icon_search_right` too,
   for the filters icon beside its heading. */
.navbar-search-box {
  position: relative;
  display: inline-block;
}
.navbar-search-box #navbar-search-input {
  width: min(62vw, 260px);
  padding-left: 34px;
  padding-right: 34px;
}
.navbar-search-box .icon_search {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: auto;
  color: #212529;
  line-height: 1;
  display: flex;
  align-items: center;
}
.navbar-search-box .icon_search_left {
  left: 9px;
  pointer-events: none;   /* decorative: never steals a click from the field */
}
.navbar-search-box .icon_search_right {
  right: 9px;
  padding: 2px;
}

@media (max-width: 600px) {
  body { min-width: 0; }
  .page-content { padding-left: 0 !important; }
  #products .about-text ol,
  .page-content ol { padding-left: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .navigation ul li.list a,
  .navigation ul li.list button.sidebar-item-control,
  .btn { transition: none; }
}

/* ── the feed resort bar ──────────────────────────────────────────────
   Legacy dresses `.buttons_resort` / `.btn_resort` in `newCards.css`
   (`:14-35`), which this SPA deliberately does NOT load: that sheet is 923
   lines and among them redefines `.btn-outline-primary` with `!important`,
   so linking it to reach five rules would repaint Bootstrap buttons across
   every page that draws a post. These are those five rules, in this file's
   own tokens — same shape as legacy's (a full-width row of three, the
   pressed one held down), not its grey.                                  */
.buttons_resort {
  display: flex;
  gap: .75rem;
  margin: .9rem 0;
}
.btn_resort {
  flex: 1 1 0;
  padding: .45rem .75rem;
  border-radius: 10px;
  border: 1px solid var(--sp-line, #D7DDEA);
  background: var(--sp-card, #fff);
  color: var(--sp-text, #0E1726);
  font: inherit;
  cursor: pointer;
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.btn_resort:focus { outline: none; }
.btn_resort:focus-visible {
  outline: 2px solid var(--sp-electron, #4C7DF0);
  outline-offset: 2px;
}
.btn_resort:hover {
  border-color: var(--sp-electron, #4C7DF0);
  box-shadow: 0 .3rem .7rem rgba(12, 21, 38, .12);
}
/* Pressed is a STATE, not a hover: it has to read as chosen with the
   pointer somewhere else entirely. */
.btn_resort.active {
  background: var(--sp-electron, #4C7DF0);
  border-color: var(--sp-electron, #4C7DF0);
  color: #fff;
}

@media (max-width: 600px) {
  .buttons_resort { flex-wrap: wrap; }
  .btn_resort { flex: 1 1 45%; }
}

/* ── a link dressed as a solid button keeps its own ink ───────────────
   `bootstrap.min.css` reboots `a:not([href]):not([tabindex]) { color: inherit }`
   at (0,2,1), which BEATS `.custom-btn.custom-btn-bg`'s white at (0,2,0). Any
   anchor wearing that class without an href — the forum's "New Post" is one —
   therefore inherited the body ink and drew #0E1726 on the #474559 ground:
   dark on dark, and measured as such before this rule existed.

   Fixed here rather than at each call site because the hazard belongs to the
   CLASS: every future anchor dressed this way would have hit it too. The
   selector clears Bootstrap's at (0,3,1). Buttons and href-bearing anchors
   already resolve correctly and are left alone.                          */
a.custom-btn.custom-btn-bg:not([href]) { color: #fff; }
a.custom-btn.custom-btn-bg:not([href]):hover { color: #fff; }

/* ── a moderator's Spicer points ──────────────────────────────────────
   New function (issue #11): legacy's moderators template drew a name and an
   email and no number, so there is no legacy rule to restate. Dressed as a
   quiet figure beside the name rather than a badge, because it is NOT a
   moderation rank — badging it would say the opposite.

   It lives here rather than in forum.css because the standalone
   /forum/moderators/:e/:l page never loads that sheet, and these rows are
   half of what that page is. */
.forum_moderator .moderator_prestige {
  align-self: center;
  margin-left: .25rem;
  white-space: nowrap;
  font-size: .8rem;
  color: #6c757d;
}

/* ── the support issue a deep link named ──────────────────────────────
   Legacy's page is a master/detail: the issue in the URL gets the whole
   right-hand column and the others are a column of summaries. This port
   stacks full cards, so the nearest honest thing is to SAY which card was
   asked for — a left edge and a lift, no colour of its own, because the
   state badge already owns colour on this card. */
.support-issue-focused {
  border-left: 4px solid var(--sp-electron, #4C7DF0);
  box-shadow: 0 .3rem .7rem rgba(12, 21, 38, .12);
}