/* ==========================================================================
   SoftwareCentral Update — customer-facing stylesheet
   Scoped under .swc so it cannot collide with Site.css or the Telerik skin.
   Every customer page wraps its content in <div class="swc"> ... </div>
   Light and dark: every colour is a token below. SwcPublic.Master sets
   data-theme="light|dark" on <html> before the page is drawn.
   ========================================================================== */

.swc {
  --bg: #FFFFFF;
  --card: #FFFFFF;
  --indigo: #2D2E71;
  --indigo-ink: #2D2E71;
  --indigo-hover: #24255E;
  --night: #22234A;
  --ink: #1C1D42;
  --ink-2: #43456E;
  --body: #33355C;
  --muted: #5B5D85;
  --teal: #7ACCCF;
  --teal-dark: #15777B;
  --teal-darker: #0D5457;
  --tint: #EAF4F5;
  --tint-2: #F2F9F9;
  --tint-line: #A9DBDD;
  --surface: #F3F7F9;
  --surface-2: #F7FAFB;
  --border: #DDE6EB;
  --border-soft: #ECF1F4;
  --border-strong: #C9D7DE;
  --amber-bg: #FBEFE3;
  --amber-ink: #8A4B10;
  --fixed-bg: #ECEDF7;
  --fixed-ink: #3A3C7A;
  --danger-bg: #FCEDED;
  --danger-ink: #8A1C1C;
  --danger-line: #F0C4C4;
  --callout-bg: #FDF6EE;
  --callout-line: #E8C9A6;
  --callout-head: #7A4208;
  --callout-ink: #5C3B16;
  --backdrop: rgba(28, 29, 66, 0.55);

  --page: 1440px;
  --radius: 14px;
  --radius-sm: 10px;

  font-family: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
}

/* Same navy and teal as the dark mode in SoftwareCentral and the Shop preview */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #161B33; }
html[data-theme="dark"] .swc {
  --bg: #161B33;
  --card: #1F2542;
  --indigo: #5B60C9;
  --indigo-ink: #AEB2F0;
  --indigo-hover: #6B70D6;
  --night: #10162E;
  --ink: #E8ECF4;
  --ink-2: #C3C9DC;
  --body: #C3C9DC;
  --muted: #9AA1B8;
  --teal-dark: #7ACCCF;
  --teal-darker: #A5DEE0;
  --tint: #1F3A3C;
  --tint-2: #1D3436;
  --tint-line: #2F5E61;
  --surface: #1B2140;
  --surface-2: #222947;
  --border: #333C63;
  --border-soft: #2C3358;
  --border-strong: #46507A;
  --amber-bg: #3A2A12;
  --amber-ink: #F2C185;
  --fixed-bg: #2A2F5A;
  --fixed-ink: #C4C7F2;
  --danger-bg: #3A1C24;
  --danger-ink: #F5B5B5;
  --danger-line: #6B2E38;
  --callout-bg: #2E2414;
  --callout-line: #5E4626;
  --callout-head: #F2C185;
  --callout-ink: #E3CDB0;
  --backdrop: rgba(5, 8, 20, 0.7);
}

.swc *,
.swc *::before,
.swc *::after { box-sizing: border-box; }

.swc h1, .swc h2, .swc h3 {
  font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: 0;
}

.swc p { margin: 0; }

/* :where() keeps these at the weight of one class, so buttons, the logo and cards
   that are links keep their own colours instead of turning teal */
.swc :where(a) { color: var(--teal-dark); }
.swc :where(a:hover) { color: var(--teal-darker); }

.swc :focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 2px;
}

.swc .mono {
  font-family: "IBM Plex Mono", "Cascadia Mono", monospace;
  font-weight: 500;
}

.swc .visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.swc .page { max-width: var(--page); margin: 0 auto; padding-left: 32px; padding-right: 32px; }

/* --- Header ------------------------------------------------------------- */

/* The header stays at the top while scrolling. swc.js sets --swc-header-h to its real height
   and adds .is-scrolled for the shadow. */
.swc-header {
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid var(--border); background: var(--bg);
  transition: box-shadow 0.2s ease;
}
.swc-header.is-scrolled { box-shadow: 0 8px 20px -14px rgba(16, 22, 46, 0.5); }
html[data-theme="dark"] .swc-header.is-scrolled { box-shadow: 0 8px 22px -12px rgba(0, 0, 0, 0.8); }

/* Anchors (#guides, #password, release versions) land below the sticky header */
.swc [id] { scroll-margin-top: calc(var(--swc-header-h, 81px) + 16px); }

.swc-header__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 32px; padding-top: 18px; padding-bottom: 18px;
}

.swc-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }

/* Pictures/Horizontal-Logo.svg is single-colour dark grey, so dark mode turns it white */
.swc-logo__img { display: block; height: 40px; width: auto; }
html[data-theme="dark"] .swc-logo__img { filter: brightness(0) invert(1); }

.swc-logo__product {
  font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 18px;
  color: var(--teal-dark); padding-left: 12px; border-left: 1px solid var(--border-strong); line-height: 28px;
}

.swc-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; flex-grow: 1; order: 1; }

.swc-nav a {
  text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 15px;
  padding: 10px 14px; border-radius: 8px;
}
.swc-nav a:hover { background: var(--surface); color: var(--ink); }
.swc-nav a[aria-current="page"] { background: var(--tint); color: var(--ink); font-weight: 600; }

.swc-header__tools { display: flex; align-items: center; gap: 8px; order: 3; }

/* Profile card (signed in) */
.swc-profile { position: relative; }
.swc-profile__button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px 4px 4px;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); cursor: pointer;
  background: var(--card); border: 1px solid var(--border-strong); border-radius: 999px;
}
.swc-profile__button:hover { background: var(--surface); }
.swc-profile__short { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swc-profile__chevron { color: var(--muted); }
.swc-profile__button[aria-expanded="true"] .swc-profile__chevron { transform: rotate(180deg); }

.swc-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--indigo); color: #FFFFFF; font-size: 13px; font-weight: 700; letter-spacing: 0.5px;
}
.swc-avatar--lg { width: 48px; height: 48px; font-size: 17px; }

.swc-profile__card {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50;
  width: 300px; max-width: calc(100vw - 32px);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 40px -18px rgba(16, 22, 46, 0.45);
}
.swc-profile__head { display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid var(--border); }
.swc-profile__who { display: flex; flex-direction: column; min-width: 0; font-size: 13px; color: var(--muted); }
.swc-profile__who strong { font-size: 16px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.swc-profile__section { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.swc-profile__label { font-size: 12px; font-weight: 600; letter-spacing: 0.6px; color: var(--muted); margin-bottom: 8px; }

.swc-segmented { display: flex; padding: 3px; gap: 3px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.swc-segmented button {
  flex: 1 1 0; min-height: 36px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--ink-2); background: transparent; border: 0; border-radius: 7px;
}
.swc-segmented button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(16, 22, 46, 0.18); }

.swc-profile__links { display: flex; flex-direction: column; padding: 8px; }
.swc-profile__links a {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px;
  font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none;
}
.swc-profile__links a:hover { background: var(--surface); color: var(--ink); }
.swc-profile__links svg { color: var(--muted); }
.swc-profile__links .swc-profile__logout { color: var(--danger-ink); margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 14px; }

.swc-menu-button,
.swc-theme-toggle {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--card); color: var(--ink); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); cursor: pointer; padding: 0;
}
.swc-menu-button { display: none; }
.swc-theme-toggle:hover, .swc-menu-button:hover { background: var(--surface); }

/* The toggle shows what you switch to: a moon in light mode, a sun in dark mode */
.swc-theme-toggle .swc-icon-sun { display: none; }
html[data-theme="dark"] .swc-theme-toggle .swc-icon-sun { display: block; }
html[data-theme="dark"] .swc-theme-toggle .swc-icon-moon { display: none; }

/* --- Buttons ------------------------------------------------------------ */

.swc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit; font-weight: 600; font-size: 17px; line-height: 1;
  padding: 16px 26px; border-radius: var(--radius-sm);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; min-height: 44px;
}

.swc-btn--primary { background: var(--teal); color: #15213F; border-color: var(--teal); }
.swc-btn--primary:hover { background: #63BDC0; color: #15213F; }

.swc-btn--indigo { background: var(--indigo); color: #FFFFFF; border-color: var(--indigo); }
.swc-btn--indigo:hover { background: var(--indigo-hover); color: #FFFFFF; }

.swc-btn--ghost-light { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.4); }
.swc-btn--ghost-light:hover { background: rgba(255,255,255,0.08); color: #FFFFFF; }

.swc-btn--ghost { background: var(--card); color: var(--ink); border-color: var(--border-strong); }
.swc-btn--ghost:hover { background: var(--surface); color: var(--ink); }

.swc-btn--sm { font-size: 15px; padding: 13px 18px; }

/* --- Hero (dark in both themes) ----------------------------------------- */

.swc-hero { background: var(--night); color: #FFFFFF; }
.swc-hero .page { padding-top: 72px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; }
.swc-hero__main { flex: 999 1 460px; min-width: 0; }
.swc-hero h1 {
  font-weight: 700; font-size: 42px; line-height: 1.12; letter-spacing: -0.9px; margin: 24px 0 0;
}
.swc-hero__lead { font-size: 18px; line-height: 1.6; color: #C8CAE8; max-width: 540px; margin-top: 20px; }
.swc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }

.swc-pill {
  display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px;
  background: rgba(122,204,207,0.18); border: 1px solid rgba(122,204,207,0.45);
  font-size: 13px; font-weight: 600; letter-spacing: 0.4px; color: #BDE6E8;
}
.swc-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }

.swc-facts {
  display: flex; flex-wrap: wrap; gap: 32px 44px; margin: 40px 0 0;
  padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.15);
}
.swc-facts dt { font-size: 12px; letter-spacing: 0.8px; color: #9FA2CE; margin-bottom: 6px; }
.swc-facts dd { margin: 0; font-size: 16px; color: #FFFFFF; }
.swc-facts__wide { flex-basis: 100%; }
.swc-facts__wide dd { font-size: 14px; color: #C8CAE8; word-break: break-all; }

/* --- Steps card --------------------------------------------------------- */

.swc-steps {
  flex: 1 1 320px; min-width: 0; align-self: flex-start;
  background: var(--card); color: var(--ink); border-radius: 16px; padding: 32px;
}
.swc-steps h2 { font-size: 20px; margin-bottom: 6px; }
.swc-steps__note { font-size: 14px; color: var(--muted); margin-bottom: 24px; }
.swc-steps ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.swc-steps li { display: flex; gap: 14px; font-size: 15px; line-height: 1.5; }
.swc-steps__num {
  flex: 0 0 28px; height: 28px; border-radius: 50%; background: var(--tint); color: var(--teal-dark);
  font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center;
}
.swc-steps__link { display: inline-block; margin-top: 26px; font-weight: 600; font-size: 15px; }

/* --- Sections ----------------------------------------------------------- */

.swc-section { padding-top: 80px; }
.swc-section--tight { padding-top: 72px; }
.swc-section--last { padding-bottom: 88px; }

.swc-section__head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px;
}
.swc-section__head h2 { font-size: 32px; letter-spacing: -0.6px; }
.swc-section__head a { font-weight: 600; font-size: 15px; }

/* --- Cards -------------------------------------------------------------- */

.swc-grid { display: grid; gap: 24px; margin-top: 32px; }
.swc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.swc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.swc-card {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; background: var(--card);
  display: flex; flex-direction: column; gap: 14px;
}
.swc-card h3 { font-size: 21px; }
.swc-card p { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.swc-card__link { font-weight: 600; font-size: 15px; margin-top: auto; }

.swc-card--link { text-decoration: none; color: var(--ink); padding: 26px; gap: 10px; }
.swc-card--link:hover { border-color: var(--border-strong); background: var(--surface-2); color: var(--ink); }
.swc-card--link svg { color: var(--teal-dark); }
.swc-card--link .swc-card__title { font-family: "Space Grotesk", system-ui, sans-serif; font-weight: 600; font-size: 18px; }
.swc-card--link .swc-card__body { font-size: 14px; line-height: 1.55; color: var(--muted); }

.swc-tag {
  align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: 0.6px;
  padding: 6px 10px; border-radius: 6px; color: var(--teal-dark); background: var(--tint);
}
.swc-tag--warn { color: var(--amber-ink); background: var(--amber-bg); }

/* --- Version list (front page) ------------------------------------------ */

.swc-versions {
  list-style: none; margin: 32px 0 0; padding: 0;
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.swc-versions li {
  display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 22px 26px; border-bottom: 1px solid var(--border);
}
.swc-versions li:last-child { border-bottom: 0; }
.swc-versions li.is-current { background: var(--surface-2); }
.swc-versions__meta { flex: 0 0 180px; display: flex; flex-direction: column; gap: 4px; }
.swc-versions__no { font-size: 17px; color: var(--indigo-ink); }
.swc-versions__date { font-size: 13px; color: var(--muted); }
.swc-versions p { flex: 999 1 420px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

/* --- Release notes page ------------------------------------------------- */

.swc-pagehead { background: var(--surface); border-bottom: 1px solid var(--border); }
.swc-pagehead .page { padding-top: 48px; padding-bottom: 40px; }
.swc-pagehead h1 { font-size: 42px; font-weight: 700; letter-spacing: -1px; }
.swc-pagehead__lead { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 680px; }

.swc-toolbar { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; align-items: center; }
.swc-search {
  flex: 1 1 320px; min-width: 0; font-family: inherit; font-size: 15px; padding: 13px 16px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}

.swc-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.swc-filter {
  font-family: inherit; font-size: 14px; font-weight: 600; padding: 11px 16px; border-radius: 999px;
  cursor: pointer; min-height: 44px; background: var(--card); color: var(--ink-2); border: 1px solid var(--border-strong);
}
.swc-filter:hover { background: var(--surface-2); }
.swc-filter[aria-pressed="true"] { background: var(--indigo); color: #FFFFFF; border-color: var(--indigo); }

.swc-feed { padding-top: 48px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; }
.swc-feed__side { flex: 1 1 220px; min-width: 0; }
.swc-feed__side h2 { font-size: 14px; letter-spacing: 0.8px; color: var(--muted); margin-bottom: 14px; }
.swc-feed__side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.swc-feed__side a {
  display: flex; flex-direction: column; gap: 2px; padding: 11px 14px; border-radius: 9px;
  text-decoration: none; color: var(--ink);
}
.swc-feed__side a:hover { background: var(--surface); color: var(--ink); }
.swc-feed__side a.is-current { background: var(--tint); }
.swc-feed__side .swc-versions__date { color: var(--muted); }

.swc-feed__main { flex: 999 1 620px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.swc-release { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--card); }
.swc-release__head {
  padding: 26px 28px 22px; background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.swc-release.is-current .swc-release__head { background: var(--tint-2); }
.swc-release__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.swc-release__title h2 { font-family: "IBM Plex Mono", monospace; font-weight: 500; font-size: 26px; letter-spacing: 0; }
.swc-release__date { font-size: 15px; color: var(--muted); }
.swc-release__summary { margin-top: 10px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 620px; }
.swc-release__body { padding: 8px 28px 28px; display: flex; flex-direction: column; }

.swc-badge-current {
  font-size: 12px; font-weight: 600; letter-spacing: 0.6px; color: var(--teal-dark);
  background: var(--card); border: 1px solid var(--tint-line); padding: 5px 10px; border-radius: 6px;
}

.swc-module { padding: 20px 0; border-top: 1px solid var(--border-soft); }
.swc-module h3 { font-size: 17px; margin-bottom: 14px; }
.swc-module ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.swc-module li { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.swc-module p { flex: 999 1 420px; min-width: 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); }

.swc-kind {
  flex: 0 0 auto; font-size: 12px; font-weight: 600; letter-spacing: 0.5px;
  padding: 5px 9px; border-radius: 6px; min-width: 74px; text-align: center;
}
.swc-kind--new { color: var(--teal-dark); background: var(--tint); }
.swc-kind--improved { color: var(--amber-ink); background: var(--amber-bg); }
.swc-kind--fixed { color: var(--fixed-ink); background: var(--fixed-bg); }

.swc-empty { font-size: 15px; color: var(--muted); }

/* --- Article (news) ----------------------------------------------------- */

.swc-article__hero { background: var(--night); color: #FFFFFF; }
.swc-article__hero .page { max-width: 820px; padding-top: 68px; padding-bottom: 64px; }
.swc-article__meta {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; color: #BDE6E8;
}
.swc-article__hero h1 { font-weight: 700; font-size: 48px; line-height: 1.1; letter-spacing: -1.1px; margin-top: 24px; }
.swc-article__hero .swc-hero__lead { font-size: 19px; }

.swc-article__body { max-width: 820px; padding-top: 56px; padding-bottom: 24px; }
.swc-article__body h2 { font-size: 28px; letter-spacing: -0.5px; margin-bottom: 16px; }
.swc-article__body p { font-size: 17px; line-height: 1.75; color: var(--body); margin-bottom: 18px; }
.swc-article__body p:last-of-type { margin-bottom: 0; }

.swc-shots { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 32px 0 40px; }
.swc-shot { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.swc-shot img { display: block; width: 100%; height: auto; }
.swc-shot figcaption {
  margin: 0; padding: 12px 18px; font-size: 13px; color: var(--muted);
  border-top: 1px solid var(--border); background: var(--surface-2);
}
.swc-shot__placeholder {
  min-height: 180px; display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: var(--muted); background: var(--surface);
}

.swc-callout {
  border: 1px solid var(--callout-line); background: var(--callout-bg); border-radius: var(--radius);
  padding: 24px 26px; margin: 32px 0 40px;
}
.swc-callout h3 { font-size: 18px; margin-bottom: 10px; color: var(--callout-head); }
.swc-callout p { font-size: 15px; line-height: 1.65; color: var(--callout-ink); margin: 0; }

.swc-article__actions {
  display: flex; flex-wrap: wrap; gap: 14px; padding-top: 28px; margin-top: 40px;
  border-top: 1px solid var(--border);
}
.swc-article__actions .swc-btn { font-size: 16px; padding: 15px 24px; }

/* --- Footer ------------------------------------------------------------- */

.swc-footer { background: var(--surface); border-top: 1px solid var(--border); }
.swc-footer .page {
  padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap;
  gap: 20px 40px; align-items: center; justify-content: space-between;
}
.swc-footer, .swc-footer p { font-size: 14px; color: var(--muted); }
.swc-footer nav { display: flex; flex-wrap: wrap; gap: 24px; }
.swc-footer nav a { color: var(--ink-2); }

/* --- Web Forms integration (SwcPublic.Master) --------------------------- */

.swc { min-height: 100vh; display: flex; flex-direction: column; }
.swc > main { flex: 1 0 auto; }


.swc-hero__link { color: #BDE6E8; }
.swc-hero__link:hover { color: #FFFFFF; }
.swc-hero .swc-facts dd { word-break: break-all; }

.swc-note { margin-top: 28px; font-size: 14px; color: var(--muted); }

.swc-modal {
  position: fixed; inset: 0; z-index: 1000; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--backdrop);
}
.swc-modal__dialog {
  width: 100%; max-width: 720px; max-height: 100%; display: flex; flex-direction: column;
  background: var(--card); border-radius: 16px; padding: 28px;
}
.swc-modal__dialog h2 { font-size: 24px; margin-bottom: 16px; }
.swc-modal__body {
  overflow-y: auto; max-height: 50vh; padding-right: 8px;
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.swc-modal__body h3 { font-size: 16px; margin: 18px 0 6px; color: var(--ink); }
.swc-modal__body p { margin-bottom: 10px; }
.swc-modal__body ul { margin: 0 0 10px; padding-left: 20px; }
.swc-modal__actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);
}
.swc-check { flex-basis: 100%; display: flex; gap: 10px; align-items: center; font-size: 15px; cursor: pointer; }
.swc-check input { width: 18px; height: 18px; margin: 0; }
.swc-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Landing page: second paragraph in the hero */
.swc-hero__lead + .swc-hero__lead { margin-top: 12px; }

/* Landing page: Shop preview teaser */
.swc-promo {
  margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 40px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: 32px;
}
.swc-promo__text { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.swc-promo__text h3 { font-size: 24px; }
.swc-promo__text p { font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 640px; }
.swc-promo__actions { flex: 1 1 260px; display: flex; flex-wrap: wrap; gap: 12px; }

/* News: a screenshot on its own line */
.swc-shot--single { margin: 32px 0 40px; }

/* News: article next to the list of all news */
.swc-article__hero--wide .page { max-width: var(--page); }
.swc-article__hero--wide h1, .swc-article__hero--wide .swc-hero__lead { max-width: 820px; }
/* Screenshots use the full column; the text keeps a readable line length */
.swc-feed .swc-article__body { padding-top: 8px; padding-bottom: 0; max-width: none; }
.swc-feed .swc-article__body > h2, .swc-feed .swc-article__body > p { max-width: 820px; }

/* Click to enlarge (news screenshots) — swc.js wraps each image in .swc-zoom */
.swc-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.swc-zoom img { display: block; width: 100%; height: auto; }
.swc-zoom::after {
  content: 'Click to enlarge'; position: absolute; right: 12px; bottom: 12px;
  background: rgba(16, 22, 46, 0.86); color: #FFFFFF; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 12px; opacity: 0; transition: opacity 0.18s ease; pointer-events: none;
}
.swc-zoom:hover::after, .swc-zoom:focus-visible::after { opacity: 1; }

/* The lightbox is added to <body>, outside .swc, so it does not use the theme tokens */
.swc-lightbox { position: fixed; inset: 0; z-index: 2000; display: none; background: rgba(10, 13, 26, 0.94); }
.swc-lightbox.is-open { display: block; }
.swc-lightbox__scroll { position: absolute; inset: 0; overflow: auto; padding: 24px; display: flex; align-items: center; justify-content: center; }
.swc-lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 48px); border-radius: 6px; cursor: zoom-in; background: #FFFFFF; }
.swc-lightbox.is-zoom .swc-lightbox__scroll { display: block; }
.swc-lightbox.is-zoom .swc-lightbox__img { max-width: none; max-height: none; margin: 0 auto; cursor: zoom-out; }
.swc-lightbox__close {
  position: absolute; top: 14px; right: 16px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  font-size: 22px; line-height: 1; cursor: pointer; color: #FFFFFF;
  background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.3);
}
.swc-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); }
.swc-lightbox__close:focus-visible { outline: 3px solid #7ACCCF; outline-offset: 2px; }
.swc-feed__title { font-weight: 600; font-size: 15px; line-height: 1.35; }

/* Sign in */
.swc-auth { background: var(--surface); padding: 64px 16px 88px; }
.swc-auth__card {
  max-width: 440px; margin: 0 auto; background: var(--card);
  border: 1px solid var(--border); border-radius: 16px; padding: 36px;
}
.swc-auth h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.6px; }
.swc-auth__lead { margin-top: 8px; font-size: 15px; color: var(--ink-2); }
.swc-auth__submit { width: 100%; margin-top: 6px; }

.swc-form { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }
.swc-field { display: flex; flex-direction: column; gap: 6px; }
.swc-field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.swc-input {
  font-family: inherit; font-size: 16px; padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}

.swc-alert, .swc-notice { display: block; margin-top: 20px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.swc-alert { color: var(--danger-ink); background: var(--danger-bg); border: 1px solid var(--danger-line); }
.swc-notice { color: var(--teal-darker); background: var(--tint); border: 1px solid var(--tint-line); }
.swc-alert:empty, .swc-notice:empty { display: none; }

.swc-auth__forgot { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.swc-auth__forgot summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--teal-dark); }
.swc-auth__forgot .swc-form { margin-top: 16px; }
.swc-auth__forgot p { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.swc-auth__forgot .swc-btn { align-self: flex-start; }

/* Account settings */
.swc .swc-settings { max-width: 860px; }
.swc-settings { padding-top: 40px; padding-bottom: 88px; display: flex; flex-direction: column; gap: 24px; }
.swc-settings > .swc-alert, .swc-settings > .swc-notice { margin-top: 0; }
.swc-panel { border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; background: var(--card); }
.swc-panel h2 { font-size: 20px; }
.swc-panel__note { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); }
.swc-panel__note--warn { color: var(--amber-ink); }
.swc-panel__note:empty { display: none; }
.swc-form--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 20px; }
.swc-field__required { font-weight: 400; color: var(--muted); }
.swc-input[readonly] { background: var(--surface); color: var(--ink-2); }
.swc-panel__details { margin-top: 12px; }
.swc-panel__details summary { cursor: pointer; font-weight: 600; color: var(--teal-dark); }
.swc-panel__policy {
  margin-top: 12px; max-height: 320px; overflow-y: auto; padding: 16px 18px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2);
  font-size: 14px; line-height: 1.6; color: var(--ink-2);
}
.swc-panel__policy h3 { font-size: 16px; margin: 16px 0 6px; color: var(--ink); }
.swc-panel__policy p { margin-bottom: 10px; }
.swc-panel__policy ul { margin: 0 0 10px; padding-left: 20px; }
.swc-consent { display: flex; gap: 10px; align-items: center; margin-top: 18px; font-size: 15px; cursor: pointer; }
.swc-consent input { width: 18px; height: 18px; margin: 0; }
.swc-panel .swc-alert { margin-top: 16px; }
.swc-settings__actions { display: flex; justify-content: flex-end; }

/* Release notes: the changelog has 40+ versions, so the version list scrolls on its own */
.swc-feed__side {
  align-self: flex-start; position: sticky; top: calc(var(--swc-header-h, 81px) + 16px);
  max-height: calc(100vh - var(--swc-header-h, 81px) - 32px); overflow-y: auto;
}
.swc [hidden] { display: none !important; }

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1000px) {
  .swc-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .swc .page { padding-left: 18px; padding-right: 18px; }
  .swc-header__inner { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .swc-nav { display: none; order: 2; }
  .swc-header__tools { order: 1; margin-left: auto; }
  .swc-menu-button { display: inline-flex; }
  .swc-nav.is-open {
    display: flex; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - var(--swc-header-h, 73px) - 16px); overflow-y: auto;
  }
  .swc-nav.is-open a { padding: 13px 14px; }
  .swc-profile__short, .swc-profile__chevron { display: none; }
  .swc-profile__button { padding: 4px; }

  .swc-hero .page { padding-top: 28px; padding-bottom: 32px; gap: 28px; }
  .swc-hero h1 { font-size: 28px; letter-spacing: -0.5px; }
  .swc-hero__lead { font-size: 15px; }
  .swc-hero__actions { flex-direction: column; align-items: stretch; margin-top: 22px; }
  .swc-btn { font-size: 16px; padding: 15px 20px; }
  .swc-facts { gap: 14px 28px; margin-top: 28px; padding-top: 20px; }

  .swc-section, .swc-section--tight { padding-top: 44px; }
  .swc-section--last { padding-bottom: 48px; }
  .swc-section__head h2 { font-size: 24px; }
  .swc-grid--3, .swc-grid--4, .swc-shots { grid-template-columns: minmax(0, 1fr); }
  .swc-promo { padding: 22px 18px; }
  .swc-promo__actions .swc-btn { flex: 1 1 100%; }

  .swc-pagehead h1 { font-size: 30px; }
  .swc-feed { gap: 28px; padding-top: 28px; padding-bottom: 48px; }
  .swc-feed__side { flex-basis: 100%; position: static; max-height: 260px; }
  .swc-auth { padding-top: 28px; padding-bottom: 48px; }
  .swc-auth__card { padding: 24px 20px; }
  .swc-settings { padding-top: 24px; padding-bottom: 48px; }
  .swc-panel { padding: 22px 18px; }
  .swc-form--grid { grid-template-columns: minmax(0, 1fr); }
  .swc-form__spacer { display: none; }
  .swc-settings__actions .swc-btn { width: 100%; }
  .swc-release__head, .swc-release__body { padding-left: 18px; padding-right: 18px; }

  .swc-article__hero .page { padding-top: 32px; padding-bottom: 32px; }
  .swc-article__hero h1 { font-size: 30px; letter-spacing: -0.6px; }
  .swc-article__body h2 { font-size: 22px; }
  .swc-article__body p { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .swc * { transition: none !important; animation: none !important; }
}