/*
 * Platform Requirements
 */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: var(--sc-font-base, 1rem);
  font-weight: var(--sc-weight-regular, 400);
  line-height: var(--sc-leading-relaxed, 1.5);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color:transparent;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  font-weight: var(--sc-weight-medium, 500);
  line-height: var(--sc-leading-tight, 1.2);
}

.h1, h1 {
  font-size:calc(1.375rem + 1.5vw)
}

@media (min-width: 1200px) {
  .h1, h1 {
    font-size: var(--sc-font-3xl, 2.5rem);
  }
}

.h2, h2 {
  font-size:calc(1.325rem + .9vw);
}

@media (min-width: 1200px) {
  .h2, h2 {
    font-size: var(--sc-font-2xl, 2rem);
  }
}

.h3, h3 {
  font-size:calc(1.3rem + .6vw);
}

@media (min-width: 1200px) {
  .h3, h3 {
    font-size:1.75rem;
  }
}

.h4, h4 {
  font-size:calc(1.275rem + .3vw);
}

@media (min-width: 1200px) {
  .h4, h4 {
    font-size: var(--sc-font-xl, 1.5rem);
  }
}

/* Widget titles (#1511).

   A widget's configured title is a section heading on the page it appears on, so it renders as
   an h2 for document structure -- it used to be h4 in all 213 JSPs, which meant an h1 -> h4 jump
   on every page that had one (WCAG 1.3.1).

   Its appearance is pinned here rather than left to h2's default, and that is the point: an h2
   renders at 2rem, so taking the default would have resized every widget title on every page.
   That is a design change, not the accessibility fix this is. These values are h4's, carried
   over unchanged, so the markup moves and nothing on screen does.

   Styling widget titles by class rather than by tag also means the next level change does not
   silently orphan a stylesheet -- which has now happened twice (see #1502). */
.widget-title {
  font-size:calc(1.275rem + .3vw);
}

/* Admin console typography.

   Foundation styles .help-text italic. That is reasonable for a one-line hint and wrong at the
   volume these settings screens carry: /admin/site-properties alone renders ~4,775 characters of
   it across 32 elements, and /admin/web-pages opens with ~1,700 before the table. Italic body
   text at this length is measurably harder to read, and it is the single largest reason the
   console reads as unfinished rather than considered. Upright, muted, with room to breathe.

   Foundation's heading weight is 500, and .widget-title above sets only a size -- so page titles,
   section labels and body copy all land within one weight step of each other and nothing reads as
   a heading. 700 restores the hierarchy without touching sizes.

   Scoped to body.admin-console so the public site, and the page-editing screens that deliberately
   render in site chrome, are untouched. */
/* Console chrome, sitting on the token retune.

   The tokens gave the rail its navy; these are the parts that are geometry and depth rather
   than colour, and they are what separates "the palette changed" from "this looks designed".

   The header is the one that matters most. It is site chrome, not console chrome, so the admin
   scoping deliberately leaves it alone -- which is how the warm-dark attempt ended up with a
   warm console under a cool header and read as bolted-on. Restyling it here, and only under
   body.admin-console, closes that seam without touching the public site, where the header keeps
   whatever theme.header.* says.

   The gradients are built from the chrome tokens rather than fresh literals, so the header can
   never drift away from the rail it sits above. */
/* nav .sticky, not .sticky. Foundation's Sticky plugin puts the class on ANY element it makes
   sticky, and it adds it at runtime -- so it is not visible by reading the markup. Several admin
   screens use a sticky side panel (the "Add a user group" form on /admin/groups is one), and the
   broader selector painted the chrome gradient onto those panels while their text stayed the
   light-mode ink. Dark on dark, unreadable. Only the header's sticky lives inside nav; the
   content panels are inside main. */
body.admin-console nav .sticky {
  background: linear-gradient(180deg,
    var(--sc-chrome-raised, #1f2a39) 0%,
    var(--sc-chrome, #17202d) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body.admin-console .admin-menu {
  background: linear-gradient(180deg,
    var(--sc-chrome-raised, #1f2a39) 0%,
    var(--sc-chrome, #17202d) 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* 13px in a rail this long is the readability complaint, not the contrast: the labels measured
   7.95:1 before this and the difficulty was size and density. A point larger with room to
   breathe, which costs nothing since the rail scrolls anyway. */
body.admin-console .admin-menu nav a {
  font-size: 0.875rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Tiles as objects on the workspace rather than outlines drawn on it. Now reachable from here:
   until the tile markup stopped shipping its own <style> block, an inline rule outranked this
   stylesheet. */
body.admin-console .platform-dashboard-group > .cell {
  border-radius: var(--sc-radius-md, 4px);
  box-shadow: var(--sc-shadow-raised, 0 1px 2px rgba(23, 25, 30, 0.05), 0 6px 16px -8px rgba(23, 25, 30, 0.16));
}

body.admin-console .statistic-card-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

body.admin-console .help-text {
  font-style: normal;
  color: var(--sc-text-muted, #6c6861);
  line-height: 1.5;
}

/* Dashboard statistic tiles.

   These rules used to be emitted by the tile JSPs themselves, inside a <style> block rendered
   once per tile. The colour rule in there was per-instance and had to be, but the size rules
   were global and identical, so a dashboard with fourteen tiles shipped the same declaration
   fourteen times -- and, being inline, it outranked this stylesheet, so the tiles could not be
   restyled from here at all.

   The per-instance icon colour moved to a style attribute on the icon, which is what a
   one-off value should have been in the first place. */
.statistic-card-value {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
}

body.admin-console h1,
body.admin-console h2,
body.admin-console h3,
body.admin-console h4,
body.admin-console h5,
body.admin-console .widget-title {
  font-weight: 700;
}

@media (min-width: 1200px) {
  .widget-title {
    font-size: var(--sc-font-xl, 1.5rem);
  }
}

.h5, h5 {
  font-size:1.25rem;
}

.h6, h6 {
  font-size: var(--sc-font-base, 1rem);
}

p {
  margin-top: 0;
  margin-bottom:1rem;
}

:focus {
  outline: none;
}

/* Fix for Safari 14 */

.sticky {
  -webkit-transform: none;
  transform: none;
}

/* Site confirmation */

#site-confirmation {
  top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important;
}

.modal-prompt {
  background-color: var(--sc-surface, #f5f3ef);
  padding: 50px;
  text-align: center;
}

/* Top Bar */

.top-logo a, .top-center-logo a {
  font-size: large;
  color: #aaa;
  min-height: 65px;
}
#platform-menu {
  z-index: 1004;
}
#platform-menu li.is-dropdown-submenu-item a {
  width: 100%;
}
.top-bar, .top-bar ul, .top-bar-center, .top-bar-center ul {
  background: transparent;
}
.top-bar-center .top-center-logo img {
  margin: 27px 0;
  height: 70px;
}
.top-bar-center ul a {
  width: 100%;
}
#platform-menu ul.menu li.logo {
  margin: 0 10px;
  padding: 0;
}
#platform-menu ul.menu li.logo a {
  margin: 0;
  padding: 0;
}
#platform-menu ul.menu li a.button {
  margin-left: .5rem;
}

#platform-menu .menu-text {
  padding: 0;
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-medium, 500);
  font-size: var(--sc-font-base, 1rem);
}
#platform-menu ul.menu li.logo a:hover {
  background: transparent !important;
}
#platform-menu .menu-body li.is-dropdown-submenu-item:last-child a {
  padding-bottom: 1rem;
}
/* Topbar nav typography. Selector groups mirror the theme-color rules in
   main.jsp's inline <style> block exactly, so the same elements that pick
   up theme.topbar.* colors pick up this weight/size treatment too. Weight
   500 (not bold) marks the active/hover state, matching the sidebar. */
#platform-menu ul.menu li a,
#platform-small-menu ul.menu li a,
#platform-small-menu .title-bar-title {
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-regular, 400);
  font-size: var(--sc-font-lg, 1.125rem);
}
#platform-menu ul.menu li > a:hover,
#platform-menu ul.menu li.is-active > a,
#platform-menu .is-active .is-dropdown-submenu-item a:hover {
  font-weight: var(--sc-weight-medium, 500);
}
/* Contact Us/Login/My Account/Log Out come from the header's "menu" widget
   (class="float-right header-item"), a separate widget instance from the
   Home/Solutions-style nav tabs above -- kept at 16px rather than the 17.5px
   those get, per request. */
#platform-menu .header-item.float-right ul.menu li a {
  font-size: var(--sc-font-base, 1rem);
}
/* Foundation resets the anchor of an OPEN top-level tab -- `.dropdown.menu > li.is-active > a
   { background: initial }` -- so the <li>'s own colour shows through and the menu stays the
   colour the site painted it. It does nothing equivalent one level down, so a submenu item
   opened by click or keyboard gets `.menu .is-active > a`'s stock #1779ba laid over whatever
   the dropdown is themed to (issue #1787). Hovering the same row looked right, so one row had
   two unrelated open states depending on how it was opened.

   The same reset, one level down. No colour is invented here: with nothing themed the row simply
   shows the dropdown's own background instead of Foundation blue, and when
   theme.topbar.menu.text.hoverBackgroundColor is set, main.jsp's rule for the open row outranks
   this and paints it -- which is what makes hover and open finally agree.

   Specificity (1,2,2) beats Foundation's (0,2,1) without !important, the same way the admin
   shell's active state does below. */
#platform-menu .is-dropdown-submenu li.is-active > a {
  background: initial;
}

#platform-menu ul.is-dropdown-submenu li.is-dropdown-submenu-item a {
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-regular, 400);
  font-size: var(--sc-font-lg, 1.125rem);
}

/* fa-angle-down replaces Foundation's default CSS-triangle dropdown caret
   (a border-color-trick ::after), for a menu that drops downward: the base
   selector and the medium/large-horizontal responsive variants, plus the
   nested-submenu nudge. The two side-opening variants are a separate block
   below, because they need a different glyph and Foundation gives them a
   higher specificity than source order can beat (issue #1775).
   Winning here does rely on source order -- platform.css loads after
   foundation.min.css -- so anything added to Foundation's own selector set
   for these arrows has to be mirrored here or the triangle comes back.
   The theme's arrow-color override in main.jsp sets color rather than
   border-color to match -- see theme.topbar.menu.arrow.color there. */
.dropdown.menu > li.is-dropdown-submenu-parent > a::after,
.dropdown.menu.medium-horizontal > li.is-dropdown-submenu-parent > a::after,
.dropdown.menu.large-horizontal > li.is-dropdown-submenu-parent > a::after,
.is-dropdown-submenu .is-dropdown-submenu-parent > a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f107";
  border: 0;
  width: auto;
  height: auto;
  display: inline-block;
  margin-top: -7px;
}

/* The same replacement for the two side-opening variants (issue #1775). Foundation
   adds .opens-left / .opens-right from JS at runtime, based on the space available,
   so they are absent from the markup and easy to miss when matching its selector set
   by hand -- and they carry a class more than the rule above, so they win the cascade
   and put the stock blue border-triangle back on any submenu that opens sideways.
   That stayed invisible until a third menu level existed to open one.
   The glyph points the way the flyout opens: angle-right / angle-left, not the
   angle-down used for a menu that drops. Positioning is inherited rather than
   restated -- .is-dropdown-submenu-parent a::after already places it, and the
   nested nudge to right:14px comes from the rule above -- except on the left
   variant, where Foundation's own right:auto/left:5px has to be kept. */
.dropdown.menu.vertical > li.opens-right > a::after,
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-right > a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f105";
  border: 0;
  width: auto;
  height: auto;
  display: inline-block;
  margin-top: -7px;
}

.dropdown.menu.vertical > li.opens-left > a::after,
.is-dropdown-submenu .is-dropdown-submenu-parent.opens-left > a::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f104";
  border: 0;
  width: auto;
  height: auto;
  display: inline-block;
  margin-top: -7px;
  right: auto;
  left: 5px;
}

#platform-small-menu .logo { margin-left: auto; margin-right: auto; }
#platform-small-menu .logo img { max-height: 35px; }
#platform-small-menu .utility-icons { margin-left: .25rem; margin-right: .25rem; }
#platform-responsive-menu { border-bottom: 1px solid #000000; }

/* Utility bar */

.utility-bar {
  background-color: #000000;
  color: var(--sc-text-inverse, #ffffff);
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-regular, 400);
  font-size: var(--sc-font-2xs, 0.6875rem);
}
.utility-links {
  float: right;
  position: relative;
  line-height: 1;
  top: 1px;
}
.utility-icons {
  float: right;
  position: relative;
  line-height: 1;
  top: 0;
}
.utility-links a, .utility-links span, .utility-icons {
  margin-left: 10px;
}
.utility-bar a {
  color: var(--sc-text-inverse, #ffffff);
  text-decoration: underline;
}

/* Dashboard stat-tile groupings (siteStats widgets on /admin, grouped by
   category via admin-layout.xml sections). A small tracked-out label with
   a rule running to the right -- quieter than a full heading so five in a
   row read as structure, not five competing headlines. */
.platform-dashboard-section-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
  text-transform: uppercase;
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-medium, 500);
  /* Size held at 1rem rather than reduced. The mockup sets these labels at ~11px and gets a
     lot of its precision from that, but small type is the thing this admin's users have
     specifically asked not to have -- so the label keeps its size and gets its structure
     from tracking instead. The extra letter-spacing is not decoration: uppercase set tight
     runs together, and opening it is as much of the legibility win as size would have been. */
  font-size: var(--sc-font-base, 1rem);
  letter-spacing: 0.1em;
  /* --sc-text-muted, not --sc-chrome-raised, even though the #53575c that was here is that
     token's value exactly. Issue 1590 names this pairing as a trap: the value matches, the ROLE
     does not -- --sc-chrome-raised is a raised surface in the admin rail. Binding a dashboard
     label to it looks right until chrome is re-themed and the label follows it somewhere it was
     never meant to go. */
  color: var(--sc-text-muted, #6c6861);
}
.platform-dashboard-section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--sc-border, #ddd8cf);
}
/* Panel binding each group's tiles into one visible unit -- the label sits
   above it (its own section, so it stays outside the tint), the individual
   white/callout tiles sit inside it. Radius is a step larger than the
   tiles' own ~4px so the nesting reads as deliberate, not accidental. */
/* Horizontal geometry for the section label's own row.

   The label lives in its own section (above) so it stays outside the group's tint. That section
   was a plain .grid-container, which centres itself with margin:auto -- but every content section
   below it also carries Foundation's .grid-margin-x, whose negative gutter margins overwrite that
   auto margin and pin the content flush left. The two therefore disagree by half the leftover
   width, so the label drifts further right the wider the window gets (360px at 2200px wide).

   Matching the group's own -15px/20px horizontal box puts the label back above its tiles at every
   width. Only the horizontal axis is copied: no background, border or vertical padding, so the
   label still reads as sitting outside the panel. */
.platform-dashboard-section {
  padding-left: 20px;
  padding-right: 20px;
}

/* The tinted panel that used to bind each group is gone, and its removal did more for how
   this page reads than any colour change. A group is a full-width tinted box whatever it
   holds, so a section with one tile drew a box that was 75% empty -- measured on
   Deliverability -- and four such boxes stacked made the page read as boxy and dated. The
   section label already groups the row; the tiles do not also need a container.

   The tiles keep their own card treatment, which is what carries the grouping now: they sit
   directly on the canvas with a border and a soft shadow, the way every direction in the
   mockup set does. */
.platform-dashboard-group {
  margin-top: 10px;
  margin-bottom: 16px;
}

/* Cards, not cells. The radius and the two-layer shadow are the difference between a panel
   and a card -- a tight 1px shadow reads as a border, a single wide one reads as a smudge;
   the pair reads as lift. Both are tokenised so a theme can flatten them. */
.platform-dashboard-group > .cell > .callout,
.platform-dashboard-group > .cell.callout {
  border-radius: 10px;
  border: 1px solid var(--sc-border, #ddd8cf);
  box-shadow: var(--sc-shadow-md, 0 1px 3px rgba(23, 25, 30, 0.08));
}

/* The stat icon as a chip rather than a bare glyph. This is what lets the admin keep Font
   Awesome Solid and still read as current: at 14px inside a 34px tinted square the chip
   carries the visual weight, and the difference between a filled glyph and a stroked one
   stops registering. Tested against the alternative -- Font Awesome Free's Regular set
   covers only ~163 icons, and switching to it turned most of this admin's icons into
   missing-glyph boxes. */
.platform-dashboard-group .cell i.fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--sc-info-light, #eaf2fa);
  border: 1px solid var(--sc-border, #ddd8cf);
  color: var(--sc-info, #266eac);
}

/* Body */

.platform-body {
  margin-top: 25px;
  padding-top: 0;
}
.full-page .platform-body  {
  margin-top: 0;
}
.platform-no-margin {
  margin-bottom: 15px;
}
.platform-body .bump-up {
  margin-top: -25px;
}

@media print, screen and (min-width: 40em) {
  .column-container {
    max-width: 75rem;
    margin-left: auto;
    margin-right: auto;
    padding-right: .9375rem;
    padding-left: .9375rem;
  }
}

.platform-indent {
  margin-left: 2rem;
}

/* Dialog */

.platform-dialog .platform-body {
  margin-top: 0;
}

/* Footer */

.platform-footer {
  padding-top: 10px;
}
.platform-footer {
  background-color: #284c64;
  color: #acacac;
}
.platform-footer a {
  color: #cdcdcd;
}
.platform-footer .fa-inverse {
  color: #284c64;
}
.platform-footer .footer-menu-item {
  border-right: 1px solid #999999; padding: 0 8px;
}
.platform-footer .menu-title {
  font-weight: var(--sc-weight-bold, 700);
}

/* Default page adjustments for footer when there is minimal content */

.platform-body {
  min-height: calc(100vh - 107px);
}
.full-page .platform-body, .platform-dialog .platform-body {
  min-height: calc(100vh - 82px);
}
#body-home .platform-body {
  min-height: calc(100vh - 182px);
}

/* Callout */

callout.radius, .callout.radius {
  border-radius: 4px; }
callout.round, .callout.round {
  border-radius: 1000px; }

/* Labels */

label {
  font-size: var(--sc-font-base, 1rem);
}

span.required {
  color: var(--sc-danger, #ba403e);
  font-weight: var(--sc-weight-bold, 700);
}

label.radius, .label.radius {
  border-radius: 8px; }
label.round, .label.round {
  border-radius: 1000px; }

label.button {
  white-space: nowrap;
}

/* Input */

.input-container {
  margin-bottom: 1rem;
}

.input-error {
  color: var(--sc-danger, #ba403e);
}

/* Tables */

table td .input-group {
  margin-bottom: 0;
}

/* Content and Editor */

.web-content {
  overflow-x: hidden;
}
.admin-web-content {
  min-height: 500px;
  overflow-x: auto;
}
/* The admin console draws from the token layer rather than the site's own page colours.
   main.jsp scopes theme.body.* and theme.link.color away from .admin-console for this;
   without these declarations the console would fall through to Foundation's defaults.
   Buttons are excluded from the link rule because they carry their own ink. */
body.admin-console {
  background-color: var(--sc-surface);
  color: var(--sc-text);
}
body.admin-console a:not(.button) {
  color: var(--sc-link);
}
body.admin-console a:not(.button):hover,
body.admin-console a:not(.button):focus {
  color: var(--sc-link-hover);
}
.admin-web-content .platform-body {
  margin-top: 10px;
}
.platform-content-container {
  position: relative;
}
.platform-content-editor {
  position: absolute;
  z-index: 2;
  right: 0;
  top: -10px;
  margin: 0;
  padding: 0;
}
.platform-content-inline-editor {
  float: right;
}
.platform-content-editor a, .platform-content-inline-editor a {
  margin: 2px;
  padding: 2px;
}
.platform-content {
  margin-bottom: 10px;
}
/* The opt-in "Last updated" line under a content block. Muted via the semantic token rather than a
   literal, so it moves with the theme and needs no dark-mode override to keep in parity -- and so
   it stays above the 4.5:1 the token is chosen to hold, since this is body text, not decoration.

   Sized here rather than left to inherit. This is a metadata stamp, and it previously took its size
   from whatever the surrounding site set on `p`, with the inner <small> then taking 80% of that --
   so on a site with large body copy it rendered as body text, and the actual size varied per site
   for what should be a consistent platform component. Setting it on the paragraph and having the
   <small> inherit keeps one predictable size and stops the 80% applying twice.

   Deliberately kept at a single class so a site can still override it: the size is a sane default,
   not a rule the platform needs to win. No inline padding for the same reason -- the line is a
   sibling of .platform-content and should stay flush with it, so padding here would misalign the
   stamp from the content it belongs to on a standard layout. */
.platform-content-last-updated {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.02em;
  color: var(--sc-text-muted, #6c6861);
}

.platform-content-last-updated small {
  font-size: inherit;
}


@media print, screen and (min-width: 40em) {
  .position-absolute .platform-content {
    position: absolute;
    width: calc(41.66667%);
  }
}

/* Pagination */

ul.pagination li.page {
  height: 45px;
  width: 45px;
  border: 1px solid var(--sc-border, #ddd8cf);
  padding: 0;
  vertical-align: middle;
  border-radius: .25rem;
}

ul.pagination li.page:hover {
  border: 1px solid var(--sc-fnd-primary, #2677bc);
}

ul.pagination li.page a {
  padding: 0;
  height: 100%;
  line-height: 40px;
  color: var(--sc-fnd-primary, #2677bc);
}

ul.pagination li.page a:hover {
  background-color: transparent;
  text-decoration: underline;
}

ul.pagination li.current {
  line-height: 40px;
  border: 1px solid var(--sc-fnd-primary, #2677bc);
}

ul.pagination li.pagination-previous a,
ul.pagination li.pagination-next a {
  color: var(--sc-fnd-primary, #2677bc);
}

ul.pagination li.pagination-previous a:hover,
ul.pagination li.pagination-next a:hover {
  background-color: transparent;
  text-decoration: underline;
}

/* Tooltip */

.tooltip h5 {
  color: var(--sc-text-inverse, #ffffff);
}

/* Wiki Content */

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  border-bottom: 1px solid gray;
}

.markdown-body pre {
  background-color: #f6f8fa;
  border-radius: 3px;
  font-size: 85%;
  line-height: 1.45;
  overflow: auto;
  padding: 16px;
  word-wrap: normal;
}

.markdown-body blockquote, .markdown-body dl, .markdown-body ol, .markdown-body p, .markdown-body pre, .markdown-body table, .markdown-body ul {
  margin-bottom: 16px;
  margin-top: 0;
}

.markdown-body pre code, .markdown-body pre tt {
  background-color: transparent;
  border: 0;
  display: inline;
  line-height: inherit;
  margin: 0;
  max-width: auto;
  overflow: visible;
  padding: 0;
  word-wrap: normal;
}

.markdown-body pre>code {
  background: transparent;
  border: 0;
  font-size: 100%;
  margin: 0;
  padding: 0;
  white-space: pre;
  word-break: normal;
}

.markdown-body code, .markdown-body tt {
  background-color: rgba(27,31,35,.05);
  border-radius: 3px;
  font-size: 85%;
  margin: 0;
  padding: .2em .4em;
}

/* Table of Contents */

.platform-toc-container {
  position: relative;
  margin-top: 12px;
  margin-bottom: 24px;
}
.platform-toc-container li {
  margin-bottom: 1px;
  background-color: #f1f1f1;
}
.platform-toc-container .menu .is-active>a {
  border-left: 4px solid #57a1cc;
  padding-left: 28px;
}
.platform-toc-container li:hover {
  background-color: #57a1cc;
}
.platform-toc-container li a {
  color: #005f98;
  text-decoration: none;
  padding-top: 15px;
  padding-bottom: 14px;
  padding-left: 32px;
}
.platform-toc-container li a:hover {
  color: var(--sc-text-inverse, #ffffff);
}
.platform-toc-editor {
  position: absolute;
  right: 0;
  top: -10px;
  margin: 0;
  padding: 0;
  z-index: 1;
}
.platform-toc-editor a {
  margin: 2px;
  padding: 2px;
}

/* Sort options */

.platform-sort-options {
  margin-bottom: 20px;
}

.platform-sort-options .is-dropdown-submenu-parent {
  padding-right: 18px;
}

.platform-sort-options .dropdown.menu>li.is-dropdown-submenu-parent>a {
  padding-left: 0;
}

.platform-sort-options .dropdown.menu > li.is-dropdown-submenu-parent div.platform-sort-option {
  position: relative;
  padding-right: 1.5rem;
  color: var(--sc-fnd-primary, #2677bc);
}

.platform-sort-options .dropdown.menu > li.is-dropdown-submenu-parent div.platform-sort-option::before {
  display: inline-block;
  width: 0;
  height: 0;
  border: inset 6px;
  content: '';
  border-bottom-width: 0;
  border-top-style: solid;
  border-color: var(--sc-fnd-primary, #2677bc) transparent transparent;
  left: 5px;
  right: auto;
  margin-right: 5px;
}

.platform-sort-options a { white-space: nowrap; }

/* File Explorer */

@media print, screen and (min-width: 40em) {
  .platform-folder-entry {
    justify-content: space-between; display: flex;
    padding: 10px 40px;
  }
  .platform-folder-items {
    text-align: right;
  }
}

/* Blog */

.platform-blog-container .platform-blog-title {
  padding-top: 10px;
  padding-bottom: 10px;
}
.platform-blog-container .platform-blog-byline {
  padding-bottom: 20px;
}

.platform-blog-list-container .platform-blog-body {
  padding-top: 10px;
  margin-bottom: 30px;
}
.platform-blog-list-container .platform-blog-list-item {
  margin-bottom: 30px;
}
.platform-blog-list-container .platform-blog-image {
}
.platform-blog-list-container .platform-blog-image img {
  border: 1px solid #cccccc;
}
.platform-blog-list-container hr {
  padding: 6px 0;
}

/* Blog Cards */

.platform-blog-cards-container .card {
  border: 0 solid #eeeeee;
  border-radius: 8px;
  margin-bottom: 50px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 5px 6px 0 rgba(0, 0, 0, 0.1);
}
.platform-blog-cards-container .blog-tags {
  color: #56C4CE;
}

.platform-blog-cards-container .card-section {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.platform-blog-cards-container .card-section.blog-title {
  padding-top: 2rem;
  padding-bottom: 0;
}
.platform-blog-cards-container .card-section.blog-info {
  padding-top: 0;
}

/* This rule already named h2 while blog-post-list-cards.jsp emitted h3, so it matched nothing and
   the card titles rendered at Foundation's default h3 size. Levelling the post-title heading to h2
   (issue 1458) makes it apply for the first time, which is the intent the selector recorded. */
.platform-blog-cards-container .blog-title h2 {
  font-size: 28px;
  padding-bottom: 0;
}

.platform-blog-cards-container img {
  padding-top: 1rem;
  padding-bottom: 2rem;
}

.platform-blog-cards-container .blog-date {
  padding: 8px 15px 8px 2rem;
}

.platform-blog-cards-container .blog-read-more {
  background-color: #efefef;
  padding: 8px 15px;
  margin: 0;
  border-top-left-radius: 8px;
}
.platform-blog-cards-container .blog-read-more a {
  text-decoration: none;
  text-transform: uppercase;
}
.platform-blog-cards-container .blog-intro {
  padding-bottom: 2rem;
}

/* Blog Posts */

.platform-blog-body hr {
  border: none;
}
.platform-blog-body ul {
  margin-left: 1.25rem;
  list-style-type: disc;
}
.platform-blog-body li {
  position: relative;
  left: 1.25rem;
  padding-right: 1.25rem;
}

/* Orbit Hero */
/* The slide and caption paint a dark SURFACE, so they take --sc-fnd-ink-surface rather
   than --sc-fnd-ink, which is the text role. Same colour, but the two move apart the
   moment either is themed -- and they did: pointing light-mode --sc-fnd-ink at the page
   ink would have turned both of these hero backgrounds warm-dark by accident. */

.clean-hero-slider .orbit-caption {
  width: auto;
  height: auto;
  background: var(--sc-fnd-ink-surface, #0a0a0a);
  position: absolute;
  text-align: center;
  right: 0;
  left: 0;
  padding: 0.2rem 2rem;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.6);
    text-align: left;
    width: 70%;
    right: 0;
    padding: 1rem 2rem;
  }
}

@media screen and (min-width: 75em) {
  .clean-hero-slider .orbit-caption {
    padding-right: 10%;
  }
}

@media screen and (min-width: 90em) {
  .clean-hero-slider .orbit-caption {
    padding-right: 20%;
  }
}

.clean-hero-slider .orbit-caption p {
  font-size: var(--sc-font-md, 0.875rem);
  line-height: 1.25;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption p {
    font-size: var(--sc-font-lg, 1.125rem);
  }
}

.clean-hero-slider .orbit-caption h3 {
  color: var(--sc-fnd-warning, #feaf0a);
  font-size: var(--sc-font-xl, 1.5rem);
  font-weight: var(--sc-weight-bold, 700);
  margin-bottom: 0;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-caption h3 {
    font-size: var(--sc-font-3xl, 2.5rem);
    font-weight: var(--sc-weight-regular, 400);
  }
}

.clean-hero-slider .orbit-slide {
  padding-bottom: 40%;
  background: var(--sc-fnd-ink-surface, #0a0a0a);
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-slide {
    padding-bottom: 0;
  }
}

.clean-hero-slider .orbit-controls button {
  background: var(--sc-fnd-warning, #feaf0a);
  padding: 1rem 0.5rem;
}

.clean-hero-slider .orbit-controls button:hover {
  background: var(--sc-fnd-surface, #fefefe);
  color: var(--sc-fnd-ink, #2c2925);
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-controls .orbit-previous {
    left: auto;
    right: 2.4rem;
  }
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-controls .orbit-next {
    right: 0.5rem;
  }
}

.clean-hero-slider .orbit-bullets {
  display: none;
}

@media print, screen and (min-width: 40em) {
  .clean-hero-slider .orbit-bullets {
    display: block;
    margin-bottom: 0;
    margin-top: -3rem;
    background: none;
  }
}

.clean-hero-slider .orbit-bullets button {
  width: 3rem;
  height: 0.4rem;
  border-radius: 0;
  background-color: var(--sc-fnd-surface, #fefefe);
}

.clean-hero-slider .orbit-bullets button.is-active {
  background-color: var(--sc-fnd-warning, #feaf0a);
}

.clean-hero-slider li.orbit-slide {
  max-height: none !important;
}

/* Swiper */

.swiper-outer-container {
  position: relative;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next { left: 0; }
.swiper-button-next, .swiper-rtl .swiper-button-prev { right: 0; }

/* Activity Input */

.status-update-input-box {
  background-color: var(--sc-fnd-surface, #fefefe);
  padding: 0;
  width: 100%;
  border: 1px solid var(--sc-fnd-medium-gray, #cdc9c3);
}

.status-update-input-box .input-box-container textarea {
  margin-bottom: 0;
  border: none;
}

.status-update-input-box .input-box-container textarea:focus {
  /* --sc-border-control, not the #999 that was here: a control's boundary has to clear 3:1
     against what surrounds it (SC 1.4.11), and #999 on the white field fell under that floor -- on
     a focus state, which is the one moment the boundary is doing real work. The token clears it,
     and is already the answer everywhere else in this file. */
  border: 1px solid var(--sc-border-control, #878581);
  box-shadow: none;
}

.status-update-input-box .input-box-container textarea, .status-update-input-box .input-box-container textarea:focus {
  border-bottom: none;
}

@media print, screen and (min-width: 40em) {
  .status-update-input-box .user-action-container {
    margin-right: 0;
    margin-left: 0;
  }
}

.status-update-input-box .user-action-container .user-action-box {
  padding: 0;
  border: 1px solid var(--sc-fnd-medium-gray, #cdc9c3);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.status-update-input-box .user-action-container .user-action-box .action-area {
  width: 20%;
  border-right: 0.0625rem solid var(--sc-fnd-medium-gray, #cdc9c3);
  text-align: center;
  padding-top: 0.275rem;
  padding-bottom: 0.275rem;
}

.status-update-input-box .user-action-container .user-action-box .action-area:last-of-type {
  border-right: none;
}

.status-update-input-box .user-action-container .user-action-box .action-area .action-anchor.has-tip {
  border-bottom: none;
  cursor: pointer;
}

.status-update-input-box .user-action-container .user-action-box .action-area .action-anchor .fa {
  color: var(--sc-fnd-primary, #2677bc);
}

.status-update-input-box .user-action-container .user-submit-box {
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--sc-fnd-medium-gray, #cdc9c3);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: flex-end;
  -ms-flex-pack: end;
  justify-content: flex-end;
}

@media screen and (max-width: 39.9375em) {
  .status-update-input-box .user-action-container .user-submit-box {
    border-top: none;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}

@media print, screen and (min-width: 40em) {
  .status-update-input-box .user-action-container .user-submit-box {
    border-left: none;
  }
}

.status-update-input-box .user-action-container .user-submit-box .button {
  margin-bottom: 0;
}

@media screen and (max-width: 39.9375em) {
  .status-update-input-box .user-action-container .user-submit-box .button {
    display: block;
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
  }
}

/* Menus */

.admin-menu {
  margin: 0;
  padding: 0;
  min-height: 90vh;
  /* Espresso, not black, and not flat: Crema's rail is a slow vertical gradient from
     --sc-chrome down to --sc-chrome-raised (the mockup's --sidebar-bg / --sidebar-bg-2).
     Both are warm -- red channel highest in each -- which is what stops a very dark rail
     reading as grey. background-color stays as the fallback for anything that cannot
     paint the gradient. */
  background-color: var(--sc-chrome, #17202d);
  background-image: linear-gradient(180deg, var(--sc-chrome, #17202d) 0%, var(--sc-chrome-raised, #1f2a39) 100%);
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-regular, 400);
  font-size: var(--sc-font-sm, 0.8125rem);
  line-height: var(--sc-leading-normal, 1.4);
  color: var(--sc-chrome-ink-muted, #aab6c6);
}
.admin-menu .platform-content {
  margin: 0;
}
.admin-menu .app-title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: var(--sc-weight-medium, 500);
  font-size: var(--sc-font-base, 1rem);
  line-height: 1.3;
  padding: 10px 20px;
  background-color: var(--sc-chrome, #17202d);
  color: var(--sc-chrome-ink, #e8eef6);
}
/* Version number: de-emphasized metadata under the product name, not part
   of the product-name treatment above. */
.admin-menu .app-title small {
  display: block;
  margin-top: 2px;
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-regular, 400);
  font-size: var(--sc-font-2xs, 0.6875rem);
  color: var(--sc-text-subtle, #a09b93);
}
/* No fill. It used to take --sc-chrome-raised, which is the same token the ACTIVE nav item
   took, so the signed-in user read as a selected menu entry and the rail appeared to have
   two selections. Crema's sidebar treats the user row the same way: no band, separated
   from the nav by a hairline, with the dove reserved for the one item that is actually
   selected. */
.admin-menu .app-user {
  margin-bottom: 10px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--sc-chrome-border, rgba(232, 238, 246, 0.09));
  font-family: 'Inter', sans-serif;
  font-weight: var(--sc-weight-medium, 500);
  font-size: var(--sc-font-sm, 0.8125rem);
  color: var(--sc-chrome-ink, #e8eef6);
}
.admin-menu .app-user i {
  /* Not --sc-text-subtle: that is calibrated for the rail (6.37:1) and lands at
     2.64:1 on this lighter strip. Issue 1574. */
  color: var(--sc-chrome-ink-muted, #aab6c6);
}
.admin-menu .section-title {
  margin-top: 4px;
  text-transform: uppercase;
  font-weight: var(--sc-weight-medium, 500);
  font-size: var(--sc-font-2xs, 0.6875rem);
  letter-spacing: 0.05em;
  /* Aligned to the pill's text, not the rail edge: the items are inset 12px by the list
     gutter and padded 12px again inside, so their label starts at 24px. */
  padding-left: 24px;
  padding-bottom: 6px;
  color: var(--sc-text-subtle, #a09b93);
}
/* Scoped with body.admin-console and :not(.button) so this outranks the console's blanket
   content-link rule (body.admin-console a:not(.button), specificity 0-2-2), which was silently
   painting this dark rail with --sc-link -- the LIGHT-mode link colour. #276caa on #17191e is
   3.19:1, below the 4.5:1 floor for body text, on the navigation every admin page carries. The
   rail's own colour below was correct all along and simply never applied; only the .is-active
   rule, which happens to sit later in the file, was winning. Raising the rail rather than
   excluding the rail from the blanket rule keeps the failure mode safe: if this selector is ever
   not understood, the rail falls back to today's behaviour instead of every console link losing
   its ink. */
body.admin-console .admin-menu a:not(.button) {
  padding-left: 20px;
  color: var(--sc-chrome-ink-muted, #aab6c6);
  font-weight: var(--sc-weight-regular, 400);
}
/* Icons read one step quieter than their label -- pewter at rest, white
   only once the item is active (see .is-active > a i below). */
.admin-menu a i {
  color: var(--sc-text-subtle, #a09b93);
}
/* Crema's nav is a column of inset pills rather than full-bleed bands: the list carries a
   12px gutter, and each item is a rounded rectangle inside it. The gutter is not decoration
   -- it is what the active marker occupies, sitting at left:-12px against the rail rather
   than on top of the item. */
.admin-menu ul {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 10px;
}
.admin-menu ul li {
  margin-top: 0;
  margin-left: 0;
  padding-left: 12px;
  padding-right: 12px;
}
.admin-menu ul li a {
  position: relative;
  display: block;
  padding: 8px 12px;
  /* The mockup asks for 6px; this takes the platform's own --sc-radius-sm, which is 4px.
     A 2px divergence, taken deliberately: a one-off literal here would put the nav off the
     radius scale, and moving the scale to 6px is a change to every rounded thing in the
     product, not to this nav. Worth revisiting if Crema is adopted wholesale. */
  border-radius: var(--sc-radius-sm, 4px);
}

/* Hover moved from the li to the a. On the li it painted the full width of the rail, which
   is the shape this change is getting rid of -- the wash has to follow the pill. */
.admin-menu li > a:hover {
  background-color: var(--sc-chrome-hover, rgba(232, 238, 246, 0.06));
}
.admin-menu li.section-title:hover {
  background-color: transparent;
}
/* The RESTING state, which this scoping never covered. Only :hover and :focus were given
   the higher-specificity rule below, so at rest the blanket content-link rule still won and
   painted the rail's navigation with --sc-link -- the LIGHT-mode link colour -- at 3.17:1
   on the rail. Under the 4.5:1 floor, on the navigation every admin page carries, in the
   one state the links spend nearly all their time in.

   The comment above describes this defect and the fix for it; the fix was simply only ever
   applied to the two interactive states. Same specificity (0,3,2) as those, which is what
   beats the blanket rule's (0,2,2). */
body.admin-console .admin-menu a:not(.button) {
  color: var(--sc-chrome-ink-muted, #aab6c6);
}
body.admin-console .admin-menu a:not(.button):hover,
body.admin-console .admin-menu a:not(.button):focus {
  color: var(--sc-chrome-ink, #e8eef6);
}
/* The active item overrides both: it carries dark ink on the dove fill, and these two rules
   outrank .admin-menu li.is-active > a on specificity alone. */
body.admin-console .admin-menu li.is-active > a:not(.button),
body.admin-console .admin-menu li.is-active > a:not(.button):hover,
body.admin-console .admin-menu li.is-active > a:not(.button):focus {
  color: var(--sc-chrome-ink-selected, #ffffff);
}
/* Active sidebar item: Anthracite fill + a narrow link-blue indicator.
   Higher specificity than Foundation's .menu .is-active > a (#1779ba) so
   the admin shell's own active state wins without !important. The literal
   indicator blue (#609ACE) is only 2.43:1 on this background -- below the
   3:1 floor for a meaningful-state graphic (WCAG 1.4.11) -- so the inset
   bar uses a 20%-lightened variant; #609ACE is kept as-is wherever it
   appears as body/dark-mode link text instead. Weight 500 (not bold)
   carries the emphasis, matching every other active-state label.

   The bar's colour is --sc-chrome-active-marker, where its ratio is stated
   and re-derived by the contrast gate. It lived here as a literal until
   then, which meant a theme could restyle the whole rail and leave a blue
   stripe behind it. */
.admin-menu li.is-active > a {
  background-color: var(--sc-chrome-selected, #2b3a4e);
  color: var(--sc-chrome-ink-selected, #ffffff);
  font-weight: var(--sc-weight-medium, 500);
}
/* The marker sits in the list gutter, against the rail -- not inset into the pill. That is
   why it is brass again: on the rail it reads at 8.91:1, where the same brass laid over the
   dove fill would have been close enough in luminance to vanish. It was an inset box-shadow
   only because the item used to be a full-bleed band with no gutter to sit in. */
.admin-menu li.is-active > a::before {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 0 3px 3px 0;
  background-color: var(--sc-chrome-active-marker, #f97316);
}
.admin-menu li.is-active > a i {
  color: var(--sc-chrome-ink-selected, #ffffff);
}

/* Cards */

.image-card {
  position: relative;
}
.image-card div {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 97%;
  margin: 0 5px;
}

.admin.card {
  cursor: pointer;
  width: 200px;
  padding: 5px;
}
.admin.card:hover {
  box-shadow: inset 0 0 0 3px var(--sc-focus-ring);
}
.template.card {
  cursor: pointer;
  max-width: 270px;
  padding: 5px;
}
.template.card:hover {
  box-shadow: inset 0 0 0 3px var(--sc-focus-ring);
}
/* Persistent "selected" state, layered on the existing hover-only .admin.card/.template.card
   highlight above -- needed for the logo-color card picker (which replaces a <select>, so the
   current value must stay visible at rest, not just on hover). */
.admin.card.selected,
.template.card.selected {
  box-shadow: inset 0 0 0 3px var(--sc-focus-ring);
}
.admin.card.logo-color-card {
  width: 120px;
  padding: 8px;
}
.admin.card.logo-color-card .card-section {
  min-height: 0;
}
.logo-color-card-thumb {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-color-card-thumb img {
  max-height: 60px;
  max-width: 100%;
}
/* The "All white" thumbnail is a near-white image; without a dark backing it's invisible against
   the card's white background. */
.logo-color-card-thumb-dark {
  background-color: #333333;
  border-radius: 4px;
}
.logo-color-card-empty {
  color: #999999;
}
.stats.card {
  padding: 10px;
}
.size-100.card { width: 100px; }
.size-125.card { width: 125px; }
.size-150.card { width: 150px; }
.size-175.card { width: 175px; }
.size-200.card { width: 200px; }
.clear-float {
  display: inline-block;
  width: 100%;
}

/* Image Widget (issue #772) */

.platform-image-widget {
  max-width: 100%;
  height: auto;
}
.platform-image-widget-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  padding: 1.5rem;
  background: var(--sc-surface-sunken, #ede9e3);
  border: 1px dashed var(--sc-border, #ddd8cf);
  border-radius: var(--sc-radius-md, 4px);
  color: var(--sc-text-muted, #6c6861);
  font-size: var(--sc-font-2xl, 2rem);
}

/* User Card Profile */

.card-profile-stats {
  border: 1px solid var(--sc-fnd-medium-gray, #cdc9c3);
  margin: 0 0 1.25rem;
  padding: 1.25rem;
  background: var(--sc-fnd-surface, #fefefe);
}

.card-profile-stats .card-profile-stats-intro {
  text-align: center;
}

.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
  border-radius: 50%;
  margin: 0 0 1.25rem;
}

.card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-content p:last-child {
  margin: 0;
}

.card-profile-stats .card-profile-stats-container {
  text-align: center;
}

.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic {
  margin: 0 0 1.25rem;
}

.card-profile-stats .card-profile-stats-container .card-profile-stats-statistic p:last-child {
  margin: 0;
}

.card-profile-stats .card-profile-stats-more .card-profile-stats-more-link {
  margin: 0;
  text-align: center;
  font-size: var(--sc-font-xl, 1.5rem);
  color: var(--sc-fnd-ink, #2c2925);
  padding: 0.5rem;
  cursor: pointer;
}

.card-profile-stats .card-profile-stats-more .card-profile-stats-more-content {
  display: none;
}


@media print, screen and (min-width: 64em) {
  .card-profile-stats .card-profile-stats-intro {
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    text-align: left;
  }
  .card-profile-stats .card-profile-stats-intro .card-profile-stats-intro-pic {
    margin: 0 1.25rem 0 0;
    max-width: 250px;
  }
  .card-profile-stats .card-profile-stats-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
  }
}

/* Buttons */

.button-container {
  margin-top: 12px;
}
.button-container button, .button-container .button {
  margin: 0 10px 0 0;
}
.button-container button.expanded, .button-container .button.expanded {
  margin: 0;
}
.button-container .expanded:not(:first-child) {
  margin-top: 10px;
}

button.radius, .button.radius {
  border-radius: 5px;
}

button.round, .button.round {
  border-radius: 1000px;
}

/* An outlined button drawn in the page's own ink, so it follows the theme the way its
   background already did. The ink and border used to be pinned at a fixed near-black
   while the fill followed --sc-surface, which goes dark in dark mode -- near-black on
   near-black, 1.284:1, with the border failing SC 1.4.11 at the same ratio and hover
   inverting into the identical pair (issue 1528). Hover is now a true inversion of the
   base, so both states hold up in either mode:
     base  light 17.585:1   dark 16.120:1
     hover light 17.585:1   dark 16.120:1
   The !important these declarations used to carry is gone (issue 1589). It was there to beat
   Foundation's own .button colour, and it did -- but it also beat the site, which is the half
   nobody wanted: the fill above is overridable at normal specificity while the ink was not, so a
   site that repainted a .box button got the new fill and the old ink. That happened, at 2.89:1 on
   the new fill, and the only way out was matching !important in site CSS -- not a fix an author
   should have to find by measuring contrast.
   Specificity alone is enough. Only three rules set colour on a .button.box: Foundation's `a`
   (0,0,1) and `.button` (0,1,0), and the theme's `a` (0,0,1). These select at (0,2,0) from a later
   stylesheet, so they win on their own, and a site's more specific rule now wins over them. The
   theme's own button-text rule is not a competitor: it excludes .box alongside .clear and .hollow
   -- see main.jsp. */
button.box, .button.box {
  background-color: var(--sc-surface, #f5f3ef);
  border: 1px solid var(--sc-text, #2c2925);
  color: var(--sc-text, #2c2925);
}

button.box:hover, button.box:focus, .button.box:hover, .button.box:focus {
  background-color: var(--sc-text, #2c2925);
  color: var(--sc-surface, #f5f3ef);
}

/* Links */

a.read-more {
  text-decoration: underline;
}

/* Callout */

/* A callout carries its own background, so it must also own the colour of the text on it.

   Without this, any rule that colours text from an outer scope wins over the callout, because a
   descendant selector rooted at an ancestor out-specifies anything the callout says about itself.
   A themed panel doing the ordinary thing --

     .some-panel > .cell p { color: <light ink for the dark panel>; }

   -- at (0,3,2) beats `.callout.warning p` at (0,2,1), so the paragraph keeps the panel's light ink
   while the callout keeps its own light fill. That shipped: the subscribe form's validation and
   success messages rendered light-on-light at 1.12:1, which is not "hard to read", it is invisible.
   The panel rule is not wrong -- it simply cannot know a callout is nested inside it.

   `inherit` rather than a colour, and this is the part that matters: the !important on .button.box's
   ink was removed for good reason (issue 1589) because a fixed ink beat the site, so a repainted
   fill kept the old ink and landed at 2.89:1. That failure cannot happen here. These declarations
   pin no colour at all -- they say "whatever this callout's own colour is". Repaint .callout, or any
   variant of it, and the text follows. The escape hatch is therefore intact and is the correct one:
   style the callout, not its descendants from outside.

   Links, buttons and labels are deliberately excluded -- they carry their own colour by design. */
.callout p,
.callout li,
.callout dt,
.callout dd,
.callout td,
.callout th,
.callout blockquote,
.callout small,
.callout em,
.callout strong,
.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6 {
  color: inherit !important;
}

.callout.box {
  background-color: var(--sc-surface, #f5f3ef);
  color: var(--sc-fnd-ink, #2c2925);
}

.callout.prototype {
  background-color: #E2D1D1;
  background-image: url("../images/widgets/prototype.svg");
  background-position: center center;
  background-repeat: repeat;
  background-size: 16px;
  color: var(--sc-fnd-ink, #2c2925);
}

.callout.header {
  background-color: #353535;
  border: none;
  color: var(--sc-text-inverse, #ffffff);
}

.callout.no-box, table tbody.no-box, table tbody tr.no-box,
.callout.no-border, table tbody.no-border, table tbody tr.no-border,
.callout.border-none, table tbody.border-none, table tbody tr.border-none{
  border: none;
}

/* Labels */

/* Dark text, not inverse text -- see issue 1515. This fill is light in BOTH modes, so
   --sc-text-inverse is the wrong role for it: that token means "text on the inverse of
   the page", and the page's inverse is only dark while the page itself is light. White
   on this green is 2.86:1. --sc-fnd-ink-on-accent is the token for exactly this pairing
   and is deliberately never redefined for dark, so one declaration clears the floor in
   both modes -- and light and dark stop rendering this label differently for no reason. */
.label.success {
  background-color: #43AC6A;
  color: var(--sc-fnd-ink-on-accent, #0a0a0a);
}

/* Cards */

.admin.card {
  border: 1px solid var(--sc-border);
  background-color: var(--sc-surface, #f5f3ef);
  color: var(--sc-text);
}

.admin.card .card-divider {
  background-color: var(--sc-surface-sunken);
  min-height: 84px;
}

.admin.card .card-section {
  min-height: 84px;
}

.admin.card .fa-3x {
  color: var(--sc-text);
}

/* Content Tabs */

.tabs {
  border: none;
  border-bottom: 1px solid var(--sc-fnd-light-gray, #e7e6e3);
}
.tabs li a {
  font-size: var(--sc-font-base, 1rem);
  color: var(--sc-text, #2c2925);
  background: var(--sc-fnd-light-gray, #e7e6e3);
  transition: all 0.35s ease-in-out;
  padding: 0.5rem 1rem;
}
.tabs .tabs-title {
  padding-right: 2px;
  padding-bottom: 2px;
}
.tabs .tabs-title>a:hover {
  color: var(--sc-text, #2c2925);
  background: #cdcdcd;
}
.tabs .tabs-title>a:focus, .tabs .tabs-title>a[aria-selected=true],
.tabs .tabs-title.is-active a {
  color: var(--sc-text-inverse, #ffffff);
  background: var(--sc-fnd-primary, #2677bc);
}

.full-container {
  width: 100%;
}

.no-gap { margin-bottom: 0 !important; }

/* Admin secret fields: input plus its reveal toggle. No colour is named here on purpose --
   the button inherits its surrounding ink, so it stays legible in both themes without adding
   a token pair or a dark-mode override to keep in parity. */
.secret-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.secret-reveal-toggle {
  background: none;
  border: 0;
  padding: 0 4px;
  line-height: 1;
  cursor: pointer;
  color: inherit;
}

/* The same reveal control on a full-width form field (sign in, register, set password), where the
   admin's inline-flex wrapper would shrink the input to its content. Block-level flex instead, with
   the input taking the free space and the button sitting on the end of the row.

   Foundation gives an input a bottom margin; that margin moves to the wrapper so the row keeps the
   spacing the form had before the button was added, and the button stays vertically centred on the
   input rather than on the input-plus-margin. No colour is set for the same reason as the rule
   above -- the button inherits its surrounding ink and needs no dark-mode pair to keep in parity. */
.password-field {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 1rem;
}
.password-field input {
  flex: 1 1 auto;
  margin: 0;
}
.no-gap-all, .no-gap-all .platform-container, .no-gap-all .platform-content, .no-gap-all p, .no-gap-all img, .no-gap-all .button, .no-gap-all input[type="checkbox"], .no-gap-all input[type="text"], .no-gap-all input[type="search"], .no-gap-all select {
  margin: 0;
}

/* Video Background */

.video-background {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 0;
  margin: 0;
}

.video-background video {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  padding: 0;
  margin: 0;
}

/* Scrollable View */

.platform-scrollable-view {
  height: 50vh;
  overflow-y: scroll;
  background-color: var(--sc-surface, #f5f3ef);
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 5px;
  border: 1px solid var(--sc-border, #ddd8cf);
}
.platform-scrollable-view::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
.platform-scrollable-view::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0,0,0,.5);
  -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
.platform-activity-title {
  text-align: center;
  padding: 14px 0 14px 0;
  margin-bottom: 0;
  background-color: #ccc;
}
#no-messages-found {
  padding-top: 14px;
  text-align: center;
}
.platform-activity-ul li {
  margin-bottom: 18px;
}
.platform-activity-date {
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sc-border, #ddd8cf);
  margin: 12px 0 18px 0;
  font-size: 80%;
}
.platform-activity-image {
  float: left;
  margin-top: 6px;
  width: 40px;
  height: 40px;
}
.platform-activity-content {
  margin-left: 50px;
  line-height: var(--sc-leading-normal, 1.4);
}
.platform-activity-content-name {
  font-weight: bolder;
}
.platform-activity-content-date {
  font-size: 80%;
  color: var(--sc-text-muted, #6c6861);
}
.platform-activity-content-other {
  color: var(--sc-text-muted, #6c6861);
}

/* Controls */

.switch-paddle .switch-active {
  color: var(--sc-text-inverse, #ffffff);
}
.switch-paddle .switch-inactive {
  color: #333333;
}

/* Alignment */

@media print, screen and (max-width: 40em) {
  .align-center-small {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
  }
}

/* Utilities */

.clear-both { clear: both; }
.width-full { width: 100%; }
.width-auto { width: auto; }
.width-10p { width: 10%; }
.width-20p { width: 20%; }
.width-30p { width: 30%; }
.width-40p { width: 40%; }
.width-50p { width: 50%; }
.width-60p { width: 60%; }
.width-70p { width: 70%; }
.width-80p { width: 80%; }
.width-90p { width: 90%; }
.width-5 { width: 5px; }
.width-10 { width: 10px; }
.width-15 { width: 15px; }
.width-20 { width: 20px; }
.max-width-100 { max-width: 100px; }
.max-width-200 { max-width: 200px; }
.max-width-250 { max-width: 250px; }
.height-full { height: 100%; }
.height-auto { height: auto; }
.height-5 { height: 5px; }
.height-10 { height: 10px; }
.height-15 { height: 15px; }
.height-20 { height: 20px; }
.text-middle { position: relative; top: 50%; transform: translateY(-50%); }
.text-underline { text-decoration: underline; }
.text-no-underline { text-decoration:none; }
.text-no-wrap { white-space:nowrap; }
.text-strike { text-decoration:line-through; }
.text-no-strike { text-decoration:none; }
.text-bold { font-weight: var(--sc-weight-bold, 700); }
/* For legible text inside a content widget placed on a dark section background -- content-widget
   HTML is sanitized on save and strips inline style= attributes, so a class is the only way to
   set this from page content (see .text-brand above, same restriction). */
/* Doubled on purpose (issue #1784). The .callout ink guard above declares
   `color: inherit !important` at (0,1,1); a plain `.text-white` is (0,1,0) and loses outright,
   so white text an author asked for inside a callout came out as the callout's dark ink -- 1.22:1
   on a dark panel, which is invisible rather than merely low. Adding !important alone does not
   help: both declarations are then !important and specificity still decides. Doubling the class
   takes this to (0,2,0).

   Deliberately not scoped to `.callout .text-white`. A utility says what the author wants and
   should win wherever it is used, so the next guard written at (0,1,1) cannot silently kill it
   the way that one did. */
.text-white.text-white { color: #ffffff !important; }

/* Padding and Margins */

.full .margin-0 .platform-content {margin-bottom: 1px; margin-right: -3px; }
.margin-0 { margin-top: 0; margin-bottom: 0; }
.margin-5 { margin-top: 5px; margin-bottom: 5px; }
.margin-10 { margin-top: 10px; margin-bottom: 10px; }
.margin-20 { margin-top: 20px; margin-bottom: 20px; }
.margin-25 { margin-top: 25px; margin-bottom: 25px; }
.margin-30 { margin-top: 30px; margin-bottom: 30px; }
.margin-50 { margin-top: 50px; margin-bottom: 50px; }
.margin-75 { margin-top: 75px; margin-bottom: 75px; }
.margin-100 { margin-top: 100px; margin-bottom: 100px; }
.margin-top-neg-50, .margin-top--50 { margin-top: -50px; }
.margin-top-neg-40, .margin-top--40 { margin-top: -40px; }
.margin-top-neg-30, .margin-top--30 { margin-top: -30px; }
.margin-top-neg-20, .margin-top--20 { margin-top: -20px; }
.margin-top-neg-10, .margin-top--10 { margin-top: -10px; }
.margin-top-0 { margin-top: 0; }
.margin-top-1 { margin-top: 1px; }
.margin-top-2 { margin-top: 2px; }
.margin-top-3 { margin-top: 3px; }
.margin-top-4 { margin-top: 4px; }
.margin-top-5 { margin-top: 5px; }
.margin-top-10 { margin-top: 10px; }
.margin-top-15 { margin-top: 15px; }
.margin-top-20 { margin-top: 20px; }
.margin-top-25 { margin-top: 25px; }
.margin-top-30 { margin-top: 30px; }
.margin-top-35 { margin-top: 35px; }
.margin-top-40 { margin-top: 40px; }
.margin-top-50 { margin-top: 50px; }
.margin-top-75 { margin-top: 75px; }
.margin-top-100 { margin-top: 100px; }
.margin-top-150 { margin-top: 150px; }
.margin-top-200 { margin-top: 200px; }
.margin-top-240 { margin-top: 240px; }
.margin-top-250 { margin-top: 250px; }
.margin-bottom-neg-50, .margin-bottom--50 { margin-bottom: -50px; }
.margin-bottom-neg-40, .margin-bottom--40 { margin-bottom: -40px; }
.margin-bottom-neg-30, .margin-bottom--30 { margin-bottom: -30px; }
.margin-bottom-neg-20, .margin-bottom--20 { margin-bottom: -20px; }
.margin-bottom-neg-10, .margin-bottom--10 { margin-bottom: -10px; }
.margin-bottom-0 { margin-bottom: 0; }
.margin-bottom-1 { margin-bottom: 1px; }
.margin-bottom-2 { margin-bottom: 2px; }
.margin-bottom-3 { margin-bottom: 3px; }
.margin-bottom-4 { margin-bottom: 4px; }
.margin-bottom-5 { margin-bottom: 5px; }
.margin-bottom-10 { margin-bottom: 10px; }
.margin-bottom-15 { margin-bottom: 15px; }
.margin-bottom-20 { margin-bottom: 20px; }
.margin-bottom-25 { margin-bottom: 25px; }
.margin-bottom-30 { margin-bottom: 30px; }
.margin-bottom-35 { margin-bottom: 35px; }
.margin-bottom-40 { margin-bottom: 40px; }
.margin-bottom-50 { margin-bottom: 50px; }
.margin-bottom-75 { margin-bottom: 75px; }
.margin-bottom-100 { margin-bottom: 100px; }
.margin-bottom-150 { margin-bottom: 150px; }
.margin-bottom-200 { margin-bottom: 200px; }
.margin-bottom-250 { margin-bottom: 250px; }
.margin-bottom-300 { margin-bottom: 300px; }
.margin-bottom-400 { margin-bottom: 400px; }
.margin-left-0 { margin-left: 0; }
.margin-left-5 { margin-left: 5px; }
.margin-left-10 { margin-left: 10px; }
.margin-left-15 { margin-left: 15px; }
.margin-left-20 { margin-left: 20px; }
.margin-left-25 { margin-left: 25px; }
.margin-left-50 { margin-left: 50px; }
.margin-left-75 { margin-left: 75px; }
.margin-left-100 { margin-left: 100px; }
.margin-right-0 { margin-right: 0; }
.margin-right-5 { margin-right: 5px; }
.margin-right-10 { margin-right: 10px; }
.margin-right-15 { margin-right: 15px; }
.margin-right-20 { margin-right: 20px; }
.margin-right-25 { margin-right: 25px; }
.margin-right-50 { margin-right: 50px; }
.margin-right-75 { margin-right: 75px; }
.margin-right-100 { margin-right: 100px; }
.padding-0 { padding-top: 0; padding-bottom: 0; }
.padding-5 { padding-top: 5px; padding-bottom: 5px; }
.padding-10 { padding-top: 10px; padding-bottom: 10px; }
.padding-20 { padding-top: 20px; padding-bottom: 20px; }
.padding-25 { padding-top: 25px; padding-bottom: 25px; }
.padding-30 { padding-top: 30px; padding-bottom: 30px; }
.padding-40 { padding-top: 40px; padding-bottom: 40px; }
.padding-50 { padding-top: 50px; padding-bottom: 50px; }
.padding-60 { padding-top: 60px; padding-bottom: 60px; }
.padding-75 { padding-top: 75px; padding-bottom: 75px; }
.padding-100 { padding-top: 100px; padding-bottom: 100px; }
.padding-150 { padding-top: 150px; padding-bottom: 150px; }
.padding-200 { padding-top: 200px; padding-bottom: 200px; }
.padding-250 { padding-top: 250px; padding-bottom: 250px; }
.padding-300 { padding-top: 300px; padding-bottom: 300px; }
.padding-400 { padding-top: 400px; padding-bottom: 400px; }
.padding-top-5 { padding-top: 5px; }
.padding-top-10 { padding-top: 10px; }
.padding-top-15 { padding-top: 15px; }
.padding-top-20 { padding-top: 20px; }
.padding-top-30 { padding-top: 30px; }
.padding-top-40 { padding-top: 40px; }
.padding-top-50 { padding-top: 50px; }
.padding-top-60 { padding-top: 60px; }
.padding-bottom-0 { padding-bottom: 0; }
.padding-bottom-5 { padding-bottom: 5px; }
.padding-bottom-10 { padding-bottom: 10px; }
.padding-bottom-15 { padding-bottom: 15px; }
.padding-bottom-20 { padding-bottom: 20px; }
.padding-bottom-30 { padding-bottom: 30px; }
.padding-bottom-40 { padding-bottom: 40px; }
.padding-bottom-50 { padding-bottom: 50px; }
.padding-bottom-60 { padding-bottom: 60px; }
.padding-bottom-75 { padding-bottom: 75px; }
.padding-bottom-100 { padding-bottom: 100px; }
.padding-bottom-150 { padding-bottom: 150px; }
.padding-bottom-200 { padding-bottom: 200px; }
.padding-bottom-300 { padding-bottom: 300px; }
.padding-left-0 { padding-left: 0; }
.padding-left-5 { padding-left: 5px; }
.padding-left-10 { padding-left: 10px; }
.padding-left-15 { padding-left: 15px; }
.padding-left-20 { padding-left: 20px; }
.padding-left-30 { padding-left: 30px; }
.padding-left-40 { padding-left: 40px; }
.padding-left-50 { padding-left: 50px; }
.padding-right-5 { padding-right: 5px; }
.padding-right-10 { padding-right: 10px; }
.padding-right-15 { padding-right: 15px; }
.padding-right-20 { padding-right: 20px; }
.padding-right-30 { padding-right: 30px; }
.padding-right-40 { padding-right: 40px; }
.padding-right-50 { padding-right: 50px; }
.padding-width-0 { padding-left: 0 !important; padding-right: 0 !important; }
.padding-width-10 { padding-left: 10px; padding-right: 10px; }
.padding-width-20 { padding-left: 20px; padding-right: 20px; }
.padding-width-25 { padding-left: 25px; padding-right: 25px; }
.padding-width-30 { padding-left: 30px; padding-right: 30px; }
.padding-width-40 { padding-left: 40px; padding-right: 40px; }
.padding-width-50 { padding-left: 50px; padding-right: 50px; }
.padding-width-75 { padding-left: 75px; padding-right: 75px; }
.padding-width-100 { padding-left: 100px; padding-right: 100px; }
.padding-width-200 { padding-left: 200px; padding-right: 200px; }

@media screen and (max-width: 39.9375em) {
  .small-margin-0 { margin-top: 0; margin-bottom: 0; }
  .small-margin-25 { margin-top: 25px; margin-bottom: 25px; }
  .small-margin-50 { margin-top: 50px; margin-bottom: 50px; }
  .small-margin-75 { margin-top: 75px; margin-bottom: 75px; }
  .small-margin-100 { margin-top: 100px; margin-bottom: 100px; }
  .small-margin-top-0 { margin-top: 0; }
  .small-margin-top-10 { margin-top: 10px; }
  .small-margin-top-20 { margin-top: 20px; }
  .small-margin-top-25 { margin-top: 25px; }
  .small-margin-top-30 { margin-top: 30px; }
  .small-margin-top-35 { margin-top: 35px; }
  .small-margin-top-40 { margin-top: 40px; }
  .small-margin-top-50 { margin-top: 50px; }
  .small-margin-top-75 { margin-top: 75px; }
  .small-margin-top-100 { margin-top: 100px; }
  .small-margin-top-150 { margin-top: 150px; }
  .small-margin-top-200 { margin-top: 200px; }
  .small-margin-top-240 { margin-top: 240px; }
  .small-margin-top-250 { margin-top: 250px; }
  .small-margin-bottom-neg-10, .small-margin-bottom--10 { margin-bottom: -10px; }
  .small-margin-bottom-0 { margin-bottom: 0; }
  .small-margin-bottom-10 { margin-bottom: 10px; }
  .small-margin-bottom-20 { margin-bottom: 20px; }
  .small-margin-bottom-25 { margin-bottom: 25px; }
  .small-margin-bottom-50 { margin-bottom: 50px; }
  .small-margin-bottom-75 { margin-bottom: 75px; }
  .small-margin-bottom-100 { margin-bottom: 100px; }
  .small-margin-bottom-150 { margin-bottom: 150px; }
  .small-margin-bottom-200 { margin-bottom: 200px; }
  .small-margin-bottom-250 { margin-bottom: 250px; }
  .small-margin-left-0 { margin-left: 0; }
  .small-margin-left-5 { margin-left: 5px; }
  .small-margin-left-10 { margin-left: 10px; }
  .small-margin-left-25 { margin-left: 25px; }
  .small-margin-left-50 { margin-left: 50px; }
  .small-margin-left-75 { margin-left: 75px; }
  .small-margin-left-100 { margin-left: 100px; }
  .small-margin-right-0 { margin-right: 0; }
  .small-margin-right-5 { margin-right: 5px; }
  .small-margin-right-10 { margin-right: 10px; }
  .small-margin-right-25 { margin-right: 25px; }
  .small-margin-right-50 { margin-right: 50px; }
  .small-margin-right-75 { margin-right: 75px; }
  .small-margin-right-100 { margin-right: 100px; }
  .small-padding-0 { padding-top: 0; padding-bottom: 0; }
  .small-padding-25 { padding-top: 25px; padding-bottom: 25px; }
  .small-padding-50 { padding-top: 50px; padding-bottom: 50px; }
  .small-padding-75 { padding-top: 75px; padding-bottom: 75px; }
  .small-padding-100 { padding-top: 100px; padding-bottom: 100px; }
  .small-padding-200 { padding-top: 200px; padding-bottom: 200px; }
  .small-padding-300 { padding-top: 300px; padding-bottom: 300px; }
  .small-padding-top-5 { padding-top: 5px; }
  .small-padding-top-10 { padding-top: 10px; }
  .small-padding-top-15 { padding-top: 15px; }
  .small-padding-top-20 { padding-top: 20px; }
  .small-padding-top-30 { padding-top: 30px; }
  .small-padding-top-40 { padding-top: 40px; }
  .small-padding-top-50 { padding-top: 50px; }
  .small-padding-top-60 { padding-top: 60px; }
  .small-padding-bottom-0 { padding-bottom: 0; }
  .small-padding-bottom-5 { padding-bottom: 5px; }
  .small-padding-bottom-10 { padding-bottom: 10px; }
  .small-padding-bottom-15 { padding-bottom: 15px; }
  .small-padding-bottom-20 { padding-bottom: 20px; }
  .small-padding-bottom-30 { padding-bottom: 30px; }
  .small-padding-bottom-40 { padding-bottom: 40px; }
  .small-padding-bottom-50 { padding-bottom: 50px; }
  .small-padding-bottom-60 { padding-bottom: 60px; }
  .small-padding-bottom-75 { padding-bottom: 75px; }
  .small-padding-bottom-100 { padding-bottom: 100px; }
  .small-padding-bottom-150 { padding-bottom: 150px; }
  .small-padding-bottom-200 { padding-bottom: 200px; }
  .small-padding-bottom-300 { padding-bottom: 300px; }
  .small-padding-width-0 { padding-left: 0; padding-right: 0; }
  .small-padding-width-25 { padding-left: 25px; padding-right: 25px; }
  .small-padding-width-50 { padding-left: 50px; padding-right: 50px; }
  .small-padding-width-100 { padding-left: 100px; padding-right: 100px; }
  .small-padding-width-200 { padding-left: 200px; padding-right: 200px; }
}


/* Images */

div.preload { display: none; }

.image-wall img {
  padding: 10px 10px 30px 10px;
  width: 200px;
  height: 120px;
  object-fit: scale-down;
}

.image-wall-2x img {
  padding: 10px 10px 30px 10px;
  width: 400px;
  height: 240px;
  object-fit: scale-down;
}

.image-height-100 img {
  object-fit: cover;
  height: 100px;
}
.image-height-max-100 img {
  max-height: 100px;
}

.image-height-200 img {
  object-fit: cover;
  height: 200px;
}
.image-height-max-200 img {
  max-height: 200px;
}

.image-height-300 img {
  object-fit: cover;
  height: 300px;
}
.image-height-max-300 img {
  max-height: 300px;
}

.image-height-350 img {
  object-fit: cover;
  height: 350px;
}
.image-height-max-350 img {
  max-height: 350px;
}

.image-height-400 img {
  object-fit: cover;
  height: 400px;
}
.image-height-max-400 img {
  max-height: 400px;
}

.image-height-500 img {
  object-fit: cover;
  height: 500px;
}
.image-height-max-500 img {
  max-height: 500px;
}

.image-height-600 img {
  object-fit: cover;
  height: 600px;
}
.image-height-max-600 img {
  max-height: 600px;
}

.image-height-700 img {
  object-fit: cover;
  height: 700px;
}
.image-height-max-700 img {
  max-height: 700px;
}

.image-left img, .img-left img {
  float: left;
  margin-top: 6px;
  margin-right: 20px;
  margin-left: unset;
  margin-bottom: 20px;
}

.image-right img, .img-right img {
  float: right;
  margin-top: 6px;
  margin-right: unset;
  margin-left: 20px;
  margin-bottom: 20px;
}

.image-center img, .img-center img {
  margin: 30px auto 30px !important;
  display: block;
}

img.image-left {
  float: left !important;
  margin-top: 6px !important;
  margin-right: 20px !important;
  margin-left: unset !important;
  margin-bottom: 20px !important;
}

img.image-right {
  float: right !important;
  margin-top: 6px !important;
  margin-right: unset !important;
  margin-left: 20px !important;
  margin-bottom: 20px !important;
}
img.image-center {
  float: unset;
  margin: 30px auto 30px !important;
  display: block;
}

@media (max-width: 39.99em) {
  .image-center img, .image-left img, .image-right img,
  img.image-left, img.image-right, img.image-center {
    float: unset !important;
    margin: 6px 0 !important;
    height: unset !important;
    width: 100% !important;
  }
}

.image-pad-right-20 img {
  padding-right: 20px;
}

.image-pad-right-30 img {
  padding-right: 30px;
}

div.item-image {
  display: inline-block;
  width: 25px;
  height: 25px;
}
div.item-image img {
  max-width: 25px;
  max-height: 25px;
}
div.item-image-large {
  display: inline-block;
  max-width: 200px;
  max-height: 52px;
}
div.item-image-large img {
  max-width: 200px;
  max-height: 52px;
}

.image-browser {
  /* Flex centring rather than a top:50%/translateY(-50%) hack, and object-fit on the image rather
     than a percentage max-height. A percentage max-height only resolves when the containing block
     has a definite height; inside the "Browse Images" reveal that chain breaks, max-height stops
     constraining, and the enclosing .card (overflow:hidden) clips the oversized image to its top
     slice -- portrait images lost most of their content (issue #1364). */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  max-width: 100%;
  height: 175px;
  text-align: center;
  /* Deliberately NOT routed to tokens, and the last five literals in this file that are
     not. This is the transparency checkerboard -- the conventional two-tone 10px tile
     that means "there is no image data here", the same idiom every image editor uses.
     Its job is to read as the ABSENCE of a colour; bound to surface tokens it would
     follow the theme and start reading as a deliberate background instead, which is the
     one thing it must not say.

     Whether a dark theme should get a darker checker is a real question and a design
     decision -- left open rather than answered here, because the honest fix is two
     checker-specific tokens, not pointing these at surfaces that mean something else. */
  background-image: linear-gradient(45deg, #F6F6F6 25%, transparent 25%),
  linear-gradient(45deg, transparent 75%, #F6F6F6 75%),
  linear-gradient(45deg, transparent 75%, #F6F6F6 75%),
  linear-gradient(45deg, #F6F6F6 25%, #fff 25%);
  background-size: 10px 10px;
  background-position: 0 0, 0 0, -5px -5px, 5px 5px;
}
/* The picker's thumbnail is wrapped in a <button> (added for keyboard operability, issue #301),
   which sits between the flex container above and the image below. That button has no height of
   its own, so it re-breaks the very chain the rule above exists to repair: a percentage max-height
   resolves against the nearest definite-height containing block, and an auto-height button is not
   one. The image reverts to its natural size, overflows the 175px tile and is clipped -- the same
   symptom #1364 fixed for the reveal, still present wherever the button is in the way.
   Giving the button a definite box makes it transparent to layout rather than an obstacle. The <a>
   is listed alongside it because the admin media library wraps its thumbnails in a link instead. */
.image-browser > button,
.image-browser > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
}
/* 100% rather than 95%: the tile already supplies the breathing room, and a percentage of an
   ancestor that may not resolve is what produced the original bug. */
.image-browser img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Layered badge */

.platform-layered-badge {
  position: relative;
  top: -3px;
  left: -8px;
  padding: 4px;
  min-width: 18px;
  min-height: 18px;
}

/* Reveal */

.reveal-button {
  cursor: pointer;
}
.reveal-button-text {
  cursor: pointer;
  text-align: left;
}

@media print, screen and (min-width: 40em) {
  .reveal.medium {
    width: 75%;
    max-width: 75rem; }
}

/* Search */

.platform-content-page-search-result a {
  border: 1px solid #aaaaaa;
  padding: 4px 8px;
}

/* Calendar List */

.platform-calendar-month-separator {
  border-bottom: 1px solid #000000;
  margin-bottom: 24px;
}
.platform-calendar-month-separator-label {
  color: var(--sc-text-inverse, #ffffff);
  background-color: #000000;
  padding: 2px 10px;
  margin: 0
}
.platform-calendar-event-block {
  border-left: 3px solid #999999;
  padding: 10px 0 10px 10px;
  margin-left: 30px;
  margin-bottom:30px;
}
.platform-calendar-event-block h3, .platform-calendar-event-block h4,
.platform-calendar-event-block p {
  margin: 0;
  padding: 0;
}

.platform-calendar-details-container p {
  margin-bottom: 12px;
}

.platform-calendar-details-container .platform-calendar-event-block {
  padding: 10px 0 10px 30px;
}

.platform-calendar-details-container .platform-calendar-event-summary {
  border: 1px solid #cccccc;
  margin: 20px 0 20px 22px;
  padding: 10px;
}

.platform-calendar-details-container .platform-calendar-event-block h1 {
  line-height: 1.0;
}

.platform-calendar-details-container .platform-calendar-event-return {
  margin-top: 12px;
}

/* Animations and Animation Starting Points */

.animated.doFadeIn, .animated.doFadeInDown, .animated.doFadeInUp, .animated.doFadeInRight, .animated.doFadeInLeft, .animated.doFadeInRightBig {
  opacity: 0;
}
.animated.doSlideInLeft {
  transform: translate3d(-110%, 0, 0);
}
.animated.doSlideInRight {
  transform: translate3d(110%, 0, 0);
}

@keyframes myFadeInUp {
  from {
    opacity: 0;
    transform: translateY(0);
  }
  to {
    opacity: 1;
    transform: translateY(-100%);
  }
}
.myFadeInUp {
  animation-name: myFadeInUp;
}

/* Printing */

@media print {
  a[href]:after {
    content: none !important;
  }
  .position-left.reveal-for-medium~.off-canvas-content {
    margin-left: 0 !important;
  }
  .platform-content-editor, .platform-toc-editor, .platform-useful-links-editor {
    display: none;
  }
}

/* Brand-orange button color, for the new form widget "buttonClass" preference on pages that need
   to match a brand accent color rather than one of Foundation's 5 built-in semantic button colors. */
/* Dark caption, not white. This is a light fill, and white on it measures 2.33:1 --
   under the 4.5:1 AA floor for text at this size, since 17px at weight 600 does not
   reach the large-text allowance. The hover shade is no better at 3.19:1. Dark text
   gives 8.49:1 and 6.21:1 respectively.
   Follows Foundation's own convention rather than inventing one: its warning and
   success buttons are light fills and both carry dark captions.
   Darkening the orange was the alternative and was rejected -- the point of this class
   is a vivid brand accent, and muting it enough to carry white text would change what
   the button is for. The var() keeps a literal fallback so this holds whether or not
   the Foundation token layer is present. */
.button.brand {
  background-color: var(--sc-brand);
  color: var(--sc-fnd-ink-on-accent, #0a0a0a);
}
.button.brand:hover, .button.brand:focus {
  background-color: var(--sc-brand-hover);
  color: var(--sc-fnd-ink-on-accent, #0a0a0a);
}
/* Same brand-orange accent as .button.brand above, for inline text (e.g. a small eyebrow/kicker
   label) rather than a button background. Page content authors can only reach this via a class=
   attribute -- content-widget HTML is sanitized on save and strips inline style= attributes, so
   there is no other way to color a piece of page text without a real CSS class to reference. */
.text-brand {
  color: var(--sc-brand-text);
}

/* Full-bleed hero treatment for a contentSlider: image as a fixed-height cropped background with
   the caption positioned over it, rather than the widget's default stacked (image, then text below
   it) layout. Opt in per-instance via the widget's "carouselClass" preference (set to "hero-banner")
   so this doesn't affect other contentSlider usages -- .swiper-outer-container is the element that
   preference's value lands on (content-card-slider.jsp).
   Content-widget HTML cannot express this itself: <figure>/<figcaption> are not in the sanitizer's
   safelist (Safelist.relaxed() plus HtmlCommand's additions) and get silently unwrapped, and <div>/
   <img> aren't allowed a style= attribute at all, so there is no tag-plus-inline-style combination
   that can position a caption over a background image from saved content alone. */
.hero-banner .swiper-slide {
  position: relative;
  height: 580px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.hero-banner .swiper-slide img.orbit-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
  z-index: 0;
}
.hero-banner .hero-slide-caption {
  position: relative;
  z-index: 1;
  max-width: 560px;
  padding: 0 60px;
}
@media (max-width: 640px) {
  .hero-banner .swiper-slide {
    height: auto;
    min-height: 480px;
    padding: 40px 0;
  }
  .hero-banner .hero-slide-caption {
    max-width: 100%;
    padding: 0 24px;
  }
}

/* ---------------------------------------------------------------------------
   Blog post list -- "showcase" view (blog-post-list-showcase.jsp)

   Every selector here is scoped to .platform-blog-showcase-container. That is
   deliberate and load-bearing: an earlier draft of this styling used a bare
   "nav { display: flex }" for the pagination and flattened the site header,
   because the header is also a <nav>. Scope to the component, never to the
   element type.

   Colour policy: this view takes its accent from the site's own theme
   (--sc-button-primary-background-color) and otherwise inherits colour from the
   surrounding page. It does NOT hardcode a palette. The pagination in
   particular inherits currentColor rather than picking a colour, because the
   platform cannot know what a given site puts behind it -- a fixed colour here
   would be a contrast defect on every site whose background differs from the
   one it was designed against.
   --------------------------------------------------------------------------- */

/* Cards fill their cell so a row ends level and every Read More lands on one
   baseline. Three rules are needed, not one: Foundation gives the cell no
   height of its own, and gives every .card-section flex: 1 0 auto -- which
   splits spare height four ways and opens a gap between each section instead of
   collecting it above the footer. Omitting these was a real defect in the first
   version of this view: with the summary set to flex: 1 1 auto the cards still
   sized to content, and a row measured 710 / 824 / 761. */
.platform-blog-showcase-container .grid-x > .cell {
  display: flex;
}

.platform-blog-showcase-container .cell > .card {
  height: 100%;
}

.platform-blog-showcase-container .card > .card-section {
  flex: 0 0 auto;
}

.platform-blog-showcase-container .card {
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--sc-surface, #f5f3ef);
  box-shadow: var(--sc-shadow-lg, 0 2px 10px rgba(0, 0, 0, 0.10));
  transition: transform var(--sc-motion-base, 200ms) var(--sc-motion-ease, ease),
              box-shadow var(--sc-motion-base, 200ms) var(--sc-motion-ease, ease);
}

/* Thin brand rule along the top edge. Decorative only -- it carries no
   information, so it has no contrast minimum to meet. */
.platform-blog-showcase-container .card::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
              var(--sc-button-primary-background-color, #2c79be),
              rgba(0, 0, 0, 0.15));
}

.platform-blog-showcase-container .card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

/* The image is contained, not cropped. A blog archive's images are whatever
   editors uploaded -- portrait event flyers, square award seals, wide banners --
   and a fixed crop silently destroys whichever of those it did not anticipate.
   The sunken surface token gives the letterboxing a deliberate ground. */
.platform-blog-showcase-container .card-image {
  overflow: hidden;
  background: var(--sc-surface-sunken, #ede9e3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.platform-blog-showcase-container .card-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 450ms var(--sc-motion-ease, ease);
}

.platform-blog-showcase-container .card:hover .card-image img {
  transform: scale(1.045);
}

.platform-blog-showcase-container .card-section.blog-title h2,
.platform-blog-showcase-container .card-section.blog-title h2 a {
  font-weight: 800;
  font-size: var(--sc-font-xl, 1.5rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  margin: 0;
  min-height: 0;
}

/* The summary grows into whatever height the image did not use, so a short
   image buys more prose rather than leaving the card half empty. The cut is a
   mask fade rather than -webkit-line-clamp because the available line count is
   not knowable in CSS -- a fixed clamp would either overflow the short cards or
   waste the tall ones. */
.platform-blog-showcase-container .card > .card-section.blog-intro {
  flex: 1 1 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}

.platform-blog-showcase-container .card-section.blog-intro > p {
  margin-bottom: 0;
}

/* Date and Read More on one row. Foundation gives every .card-section
   flex: 1 0 auto, so the footer needs an explicit auto top margin to sink to
   the bottom and put every Read More on a single baseline across a row. */
.platform-blog-showcase-container .card-section.blog-showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--sc-border, rgba(0, 0, 0, 0.07));
}

.platform-blog-showcase-container .blog-showcase-date {
  font-size: var(--sc-font-xs, 0.75rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: var(--sc-weight-semibold, 600);
  color: var(--sc-text-muted, #6c6861);
}

/* Shape only. The colours stay whatever the site's theme gives .button, so this
   inherits the site's palette and its contrast along with it. */
.platform-blog-showcase-container .card-section.blog-showcase-footer .button {
  border-radius: var(--sc-radius-pill, 999px);
  margin: 0;
  padding: 8px 16px;
  font-size: var(--sc-font-sm, 0.8125rem);
  font-weight: var(--sc-weight-semibold, 600);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- Pagination -------------------------------------------------------------
   Foundation puts the border on the <li>, the ellipsis glyph on ::after with
   its own colour, and sizes the box from the <a> -- so numbered items render
   45px tall while the current page and Next render 38px, and the shorter ones
   visibly sink in the row. All three are corrected here.
   --------------------------------------------------------------------------- */

.platform-blog-showcase-container nav ul.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  margin: var(--sc-space-5, 1.5rem) 0 0;
  list-style: none;
}

.platform-blog-showcase-container nav ul.pagination li {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  list-style: none;
}

.platform-blog-showcase-container nav ul.pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  font-size: var(--sc-font-base, 1rem);
  font-weight: var(--sc-weight-semibold, 600);
  color: inherit;
  opacity: 0.75;
  background: none;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  transition: opacity var(--sc-motion-fast, 120ms) var(--sc-motion-ease, ease);
}

.platform-blog-showcase-container nav ul.pagination li a:hover {
  opacity: 1;
  text-decoration: none;
}

.platform-blog-showcase-container nav ul.pagination li.current {
  position: relative;
  min-width: 38px;
  padding: 0 10px;
  font-size: var(--sc-font-base, 1rem);
  font-weight: 800;
  color: inherit;
  background: none;
}

/* A short bar under the digit rather than a full-width border: the cell is 38px
   wide and a digit is about 8px, so a full-width rule reads as detached from
   the number it is marking. */
.platform-blog-showcase-container nav ul.pagination li.current::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  width: 16px;
  height: 3px;
  border-radius: 2px;
  background: currentColor;
}

/* Foundation colours this glyph explicitly, so it does not inherit and can end
   up near-black on a dark background. */
.platform-blog-showcase-container nav ul.pagination li.ellipsis::after {
  color: inherit;
  opacity: 0.6;
  font-size: var(--sc-font-base, 1rem);
  line-height: 1;
}

.platform-blog-showcase-container nav ul.pagination li a:focus-visible {
  outline: var(--sc-focus-ring-width, 2px) solid var(--sc-focus-ring, #246caa);
  outline-offset: var(--sc-focus-ring-offset, 2px);
  border-radius: 3px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .platform-blog-showcase-container .card,
  .platform-blog-showcase-container .card-image img,
  .platform-blog-showcase-container nav ul.pagination li a {
    transition: none;
  }
  .platform-blog-showcase-container .card:hover {
    transform: none;
  }
  .platform-blog-showcase-container .card:hover .card-image img {
    transform: none;
  }
}

/* Mailing-list end states: subscription confirmed, unsubscribed, an expired confirmation link,
   and the inline signup success message. These are the last thing a subscriber sees, and each was
   a bare Foundation callout -- a stock green box sitting on an otherwise branded page, matching
   neither the site around it nor the branded emails that led the reader here.

   Built from the semantic tokens rather than a fixed palette, so each site's own theme carries
   through and the platform is not imposing one. Deliberately no invented success-green: there is
   no --sc-success token to reach for, and the outcome is already unambiguous from the wording, so
   colour would be decoration rather than information. */
.platform-subscription-result {
  max-width: 34rem;
  margin: var(--sc-space-6, 2rem) auto;
  padding: var(--sc-space-6, 2rem);
  background: var(--sc-surface, #f5f3ef);
  border: 1px solid var(--sc-border, #ddd8cf);
  border-radius: var(--sc-radius-md, 4px);
  box-shadow: var(--sc-shadow-md, 0 1px 3px rgba(23, 25, 30, 0.08));
  text-align: center;
  /* Paired with the fill above, and pinned (issue #1777). The card sets its own light surface but
     sat on the page's inherited ink, so on a dark-themed site the message came out light-on-light
     at 1.10:1 -- invisible, not merely low. A site's page-level paragraph rule routinely carries
     three classes (`body:not(:has(.x)) .sub-page > .cell p` on the site that surfaced this) and
     beats a two-class component rule, and it is not wrong to: it cannot know a component with its
     own fill is nested inside it. Same shape as the .callout ink bug in issue #1757.

     A token is pinned here, never a colour, so this is not the .button.box mistake from issue
     #1589 where a fixed ink outlived a repainted fill and landed at 2.89:1. The escape hatch is
     the designed one: redefine --sc-surface and --sc-text* together and fill and ink move as a
     pair. Style the card's tokens, not its descendants from outside. */
  color: var(--sc-text, #2c2925) !important;
}

.platform-subscription-result > :first-child {
  margin-top: 0;
}

.platform-subscription-result h1,
.platform-subscription-result h2,
.platform-subscription-result h3 {
  margin-bottom: var(--sc-space-2, 0.5rem);
  color: var(--sc-text, #2c2925) !important;
}

.platform-subscription-result p {
  margin-bottom: var(--sc-space-5, 1.5rem);
  /* The one that actually broke: the site rule targets `p`, so the heading above kept its own
     colour at 13.06:1 while the message dropped to 1.10:1. A half-styled card reads as a design
     choice, which is why nobody spotted it until someone subscribed and saw nothing. */
  color: var(--sc-text-muted, #6c6861) !important;
  line-height: var(--sc-leading-relaxed, 1.5);
}

/* The action row is last; without this the card carries a stray gap under its buttons. */
.platform-subscription-result > :last-child {
  margin-bottom: 0;
}

/* Settings hub (issue #1765). A card carries a name AND a line saying what is behind it -- the
   thing the flat menu could not do and the reason this page exists, so the description is styled
   as content rather than as an afterthought.

   Surface and ink are set together. A card that painted its own fill and left the text to whatever
   the page said is exactly how the subscription card ended up at 1.10:1 (issue #1777); every colour
   below comes from the same token set as the fill behind it. */
.platform-settings-group {
  margin-bottom: var(--sc-space-6, 2rem);
}

.platform-settings-group-title {
  font-size: 1.1rem;
  margin-bottom: var(--sc-space-2, 0.5rem);
  color: var(--sc-text, #2c2925);
}

.platform-settings-group-description {
  margin-bottom: var(--sc-space-5, 1.5rem);
  color: var(--sc-text-muted, #6c6861);
}

.platform-settings-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--sc-space-5, 1.5rem);
  background: var(--sc-surface, #f5f3ef);
  color: var(--sc-text, #2c2925);
  border: 1px solid var(--sc-border, #ddd8cf);
  border-radius: var(--sc-radius-md, 4px);
  /* The card is an anchor, so without this it takes the link colour and the description with it */
  text-decoration: none;
}

.platform-settings-card:hover,
.platform-settings-card:focus {
  background: var(--sc-surface-raised, #ffffff);
  border-color: var(--sc-link, #246caa);
  color: var(--sc-text, #2c2925);
  text-decoration: none;
}

/* Matches the platform's existing keyboard-focus treatment (issue #1501) rather than inventing a
   second one, and is an outline so it is not lost against the hover fill. */
.platform-settings-card:focus-visible {
  outline: 3px solid var(--sc-focus-ring);
  outline-offset: 2px;
}

.platform-settings-card-heading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  margin-bottom: var(--sc-space-2, 0.5rem);
  color: var(--sc-text, #2c2925);
}

.platform-settings-card-label {
  flex: 1 1 auto;
}

.platform-settings-card-state {
  flex: 0 0 auto;
}

.platform-settings-card-description {
  color: var(--sc-text-muted, #6c6861);
  line-height: var(--sc-leading-relaxed, 1.5);
}