/* =========================================================================
   Shape language, tokens and refined components.
   Loaded last so it settles the pieces the base sheet left rough.
   ========================================================================= */

:root {
  /* Superellipse curvature.
     |x/a|^n + |y/b|^n = 1, and we want the classic squircle at n = 4.
     CSS does NOT take n directly: corner-shape: superellipse(k) uses the
     exponent k where n = 2^k. The spec's own keywords confirm the mapping —
     superellipse(1) computes to `round` (n=2, a circle) and superellipse(2)
     computes to `squircle` (n=4). Passing 4 here would mean n=16, which is
     very nearly a square with sharp corners.
        k = 1  ->  n = 2   circle
        k = 2  ->  n = 4   squircle          <- what we want
        k = 3  ->  n = 8   boxy
        k = 4  ->  n = 16  effectively square */
  --squircle-k: 2;
  --corner: superellipse(var(--squircle-k));

  /* Radius scale. A squircle reads visually tighter than a circular corner of
     the same value, so these run slightly larger than their round equivalents. */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 30px;

  /* One elevation ramp, so surfaces stack predictably. */
  --e-1: 0 1px 2px rgb(4 18 30 / .06), 0 1px 3px rgb(4 18 30 / .08);
  --e-2: 0 4px 10px rgb(4 18 30 / .08), 0 2px 4px rgb(4 18 30 / .06);
  --e-3: 0 14px 32px rgb(4 18 30 / .16), 0 4px 10px rgb(4 18 30 / .10);

  --dur-fast: 140ms;
  --dur: 200ms;
  --ease-out: cubic-bezier(.2, .8, .3, 1);
}

:root[data-theme="dark"] {
  --e-1: 0 1px 2px rgb(0 0 0 / .38), 0 1px 3px rgb(0 0 0 / .30);
  --e-2: 0 4px 12px rgb(0 0 0 / .44), 0 2px 4px rgb(0 0 0 / .32);
  --e-3: 0 16px 38px rgb(0 0 0 / .58), 0 4px 12px rgb(0 0 0 / .40);
}

/* Code surfaces use the product's C++ navy/blue identity instead of an
   unrelated neutral IDE skin. The same palette is gently deepened in dark
   mode, while syntax contrast stays stable in both themes. */
.code-editor {
  --editor-bg: #06243a;
  --editor-gutter: #082d48;
  --editor-toolbar: #0b3b5d;
  --editor-toolbar-end: #082f4b;
  --editor-status: #0a3553;
  --editor-border: #27658d;
  --editor-line: #1c5276;
  --editor-text: #dcecf6;
  --editor-muted: #9bb7c9;
  --editor-soft: #7193aa;
  --editor-active: #72b9e8;
}

:root[data-theme="dark"] .code-editor {
  --editor-bg: #071a29;
  --editor-gutter: #092238;
  --editor-toolbar: #0b2b43;
  --editor-toolbar-end: #082337;
  --editor-status: #0a283d;
  --editor-border: #284f69;
  --editor-line: #21445c;
  --editor-text: #d7e8f3;
  --editor-muted: #9ab3c4;
  --editor-soft: #6f8da1;
  --editor-active: #76bce9;
}

.book-content pre.code-editor,
pre.code-editor {
  overflow: hidden;
  color: var(--editor-text);
  background: var(--editor-bg);
  border-color: var(--editor-border);
  box-shadow: 0 20px 46px color-mix(in srgb,var(--brand-cpp-navy) 24%,transparent), inset 0 1px rgb(255 255 255 / .06);
}

.code-editor-toolbar {
  color: var(--editor-muted);
  background: linear-gradient(180deg,var(--editor-toolbar),var(--editor-toolbar-end));
  border-bottom-color: var(--editor-line);
}

.code-editor-tab {
  color: #eef8ff;
  background: color-mix(in srgb,var(--brand-cpp-navy) 48%,transparent);
  border-top-color: var(--brand-cpp-sky);
}
.code-editor-tab > i { color: var(--editor-active); }
.code-editor-language {
  color: #c8e7fa;
  background: color-mix(in srgb,var(--brand-cpp-navy) 36%,transparent);
  border-color: color-mix(in srgb,var(--brand-cpp-sky) 45%,var(--editor-line));
}
.code-editor-body { max-width: 100%; overflow: auto; background: var(--editor-bg); scrollbar-color: var(--editor-soft) var(--editor-bg); }
.code-editor.is-wrapped .code-editor-body { min-width: 100%; overflow-x: hidden; }
.code-line-numbers { color: var(--editor-soft); background: var(--editor-gutter); border-right-color: var(--editor-line); }
.code-editor code { color: var(--editor-text); background: var(--editor-bg); }
.code-editor.is-wrapped code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal; }
.code-editor-status { color: var(--editor-muted); background: var(--editor-status); border-top-color: var(--editor-line); }
.code-editor-status span:first-child { color: var(--editor-active); }
.code-editor-actions button { color: #d5e9f5; background: rgb(3 26 43 / .34); border-color: var(--editor-line); }
.code-editor-actions button:hover,
.code-editor-actions button:focus-visible,
.code-editor-actions button[aria-pressed="true"] { color: #fff; background: var(--brand-cpp); border-color: var(--brand-cpp-sky); }
.code-editor-message { color: #aed8ef; }
.code-editor ::selection { color: #fff; background: var(--brand-cpp); }
.code-editor .cpp-token.keyword { color: #7fc5f2; font-weight: 650; }
.code-editor .cpp-token.type { color: #badcf1; }
.code-editor .cpp-token.literal { color: #f39caf; }
.code-editor .cpp-token.namespace,
.code-editor .cpp-token.function { color: #ffd27f; }
.code-editor .cpp-token.comment { color: #7597ab; }
.code-editor .cpp-token.preprocessor { color: #e7c86f; }
.code-editor .cpp-token.string,
.code-editor .cpp-token.character { color: #83dfb6; }
.code-editor .cpp-token.number { color: #f2a66f; }
.code-editor .cpp-token.operator { color: #a9ddf6; }

/* Every corner in the product follows the same curve. Elements without a
   border-radius are unaffected, so this is safe to apply broadly. */
*,
*::before,
*::after {
  corner-shape: var(--corner);
}

/* Circles and pills must stay truly round: a squircled avatar or progress dot
   reads as a rendering fault rather than a style. */
.account-avatar,
.moderation-avatar,
.user-avatar,
.store-icon,
.brand-glyph,
.track-count,
.user-badge,
.account-role,
.tag,
.store-formats li,
.toast-progress,
[class$="-pill"],
[class*="badge"],
input[type="checkbox"],
input[type="radio"] {
  corner-shape: round;
}

/* Focus must be visible on every interactive surface, in both themes. */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* =========================================================================
   Account menu
   ========================================================================= */

.account-menu > summary { min-height: 42px; border-radius: var(--r-sm); }

.account-panel {
  min-width: 292px;
  padding: 8px;
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
}

.account-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 11px;
  padding: 11px 12px 13px;
}
.account-avatar-lg { width: 38px; height: 38px; font-size: 1rem; }
.account-avatar { overflow: hidden; }
.account-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.account-avatar-panel { display: flex; align-items: center; gap: 22px; margin-block: 28px 0; padding: 22px; }
.account-avatar-panel h2 { margin: 0 0 6px; }
.account-avatar-panel p { margin: 0 0 14px; color: var(--muted); }
.account-avatar-preview { width: 104px; height: 104px; flex: none; display: grid; place-items: center; overflow: hidden; color: var(--on-action); background: linear-gradient(135deg,var(--action),var(--brand-cpp-deep)); border: 4px solid var(--surface); outline: 1px solid var(--line); border-radius: 50%; font-size: 2.25rem; font-weight: 850; }
.account-avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-upload-form { display: flex; flex-wrap: wrap; gap: 9px; }
.password-input-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.password-generate { min-height: 48px; white-space: nowrap; }
.password-strength { display: grid; grid-template-columns: minmax(80px,150px) 1fr; align-items: center; gap: 10px; margin-top: 7px; color: var(--muted); font-size: .75rem; }
.password-strength i { height: 5px; overflow: hidden; background: var(--line); border-radius: 999px; }
.password-strength i::after { content: ''; display: block; width: calc(var(--password-score,0) * 25%); height: 100%; background: var(--warning); border-radius: inherit; transition: width .2s; }
.password-strength[data-score="1"] { --password-score: 1; }
.password-strength[data-score="2"] { --password-score: 2; }
.password-strength[data-score="3"] { --password-score: 3; }
.password-strength[data-score="4"] { --password-score: 4; }
.password-strength[data-score="4"] i::after,.password-strength[data-score="3"] i::after { background: var(--success); }
.captcha-box { display: grid; gap: 14px; padding: 15px; background: color-mix(in srgb,var(--action) 5%,var(--surface)); border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.captcha-box > div:first-child { display: flex; align-items: center; gap: 10px; }
.captcha-box > div:first-child > i { color: var(--success); font-size: 1.3rem; }
.captcha-box > div:first-child span { display: grid; }
.captcha-box small { color: var(--muted); }
.captcha-local { display: grid; grid-template-columns: 1fr 120px; align-items: center; gap: 12px; }
@media (max-width: 620px) { .password-input-row,.captcha-local { grid-template-columns: 1fr; } .account-avatar-panel { align-items: flex-start; flex-direction: column; } }
.account-panel-identity { display: grid; gap: 3px; min-width: 0; }
.account-panel-identity b { font-size: .9rem; }
.account-panel-identity small { color: var(--soft); font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.account-role {
  padding: 3px 9px;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, transparent);
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 800;
}

.account-panel-links { display: grid; gap: 2px; }
.account-panel-links a,
.account-panel-signout button {
  min-height: 42px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
  font-weight: 650;
  text-align: start;
  width: 100%;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.account-panel-links a > i,
.account-panel-signout button > i { color: var(--soft); font-size: .95rem; justify-self: center; }
.account-panel-links a:hover,
.account-panel-links a:focus-visible { color: var(--action); background: color-mix(in srgb, var(--action) 9%, transparent); }
.account-panel-links a:hover > i,
.account-panel-links a:focus-visible > i { color: var(--action); }

.account-panel-section { padding: 12px 12px 6px; border-top: 1px solid var(--line); margin-top: 7px; }
.account-panel-label { display: block; margin-bottom: 8px; color: var(--soft); font-size: .72rem; font-weight: 800; letter-spacing: .03em; }

/* Segmented control: the current choice stays visible without opening a menu. */
.segmented {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  padding: 3px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.segmented button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-xs);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.segmented button > i { font-size: .82rem; }
.segmented button:hover { color: var(--ink); }
.segmented button.is-active {
  color: var(--action);
  background: var(--surface);
  box-shadow: var(--e-1);
}
.segmented-fonts button { font-size: .74rem; }

.account-panel-signout { margin: 7px 0 0; padding-top: 7px; border-top: 1px solid var(--line); }
.account-panel-signout button:hover,
.account-panel-signout button:focus-visible { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
.account-panel-signout button:hover > i,
.account-panel-signout button:focus-visible > i { color: var(--danger); }

/* =========================================================================
   Toasts
   ========================================================================= */

.toast {
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  padding: 14px 16px 15px;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--success);
  border-inline-end: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--e-3);
}
.toast-icon { margin-top: 2px; font-size: 1.1rem; }
.toast-message { font-size: .875rem; line-height: 1.7; }
.toast-close { width: 30px; height: 30px; border-radius: var(--r-xs); }
.toast-progress { height: 3px; opacity: .38; }
.toast-error { border-inline-start-color: var(--danger); }
.toast-error .toast-icon { color: var(--danger); }
.toast-error .toast-progress { background: var(--danger); }
.toast-info { border-inline-start-color: var(--action); }
.toast-info .toast-icon { color: var(--action); }
.toast-info .toast-progress { background: var(--action); }

/* =========================================================================
   Cards, panels and controls inherit the shape scale
   ========================================================================= */

.panel,
.dashboard-main,
.admin-record,
.moderation-card,
.store-card,
.catalog-card,
.admin-module,
.mirror-storage-note,
.track-empty,
.store-unreleased { border-radius: var(--r-lg); }

.button,
.admin-form input,
.admin-form select,
.admin-form textarea,
.stack-form input,
.stack-form select,
.stack-form textarea,
.check-field,
.admin-nav nav a,
.admin-search input { border-radius: var(--r-sm); }

.button { min-height: 44px; transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.button:active { transform: scale(.985); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================================
   User management
   ========================================================================= */

.admin-search { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* The icon is a flex sibling rather than absolutely positioned, so it sits on
   the correct side in both writing directions and never overlaps the text. */
.search-field {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding-inline: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.search-field > i { color: var(--soft); font-size: .85rem; flex: none; }
.search-field input {
  min-width: 220px;
  flex: 1;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  font: inherit;
  font-size: .875rem;
}
.search-field input:focus { outline: none; }
.search-field:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); }
.search-field:focus-within > i { color: var(--action); }
.search-reset { color: var(--soft); font-size: .82rem; text-decoration: underline; }

.user-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 14px; }
.user-summary span {
  padding: 8px 14px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .82rem;
}
.user-summary b { color: var(--ink); font-size: 1rem; margin-inline-end: 5px; }

.user-list { display: grid; gap: 10px; }

.user-card {
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.user-card:hover { border-color: color-mix(in srgb, var(--action) 26%, var(--line)); }
.user-card[open] { border-color: color-mix(in srgb, var(--action) 34%, var(--line)); box-shadow: var(--e-2); }

.user-card > summary {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 13px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
  transition: background var(--dur-fast) var(--ease-out);
}
.user-card > summary::-webkit-details-marker { display: none; }
.user-card > summary:hover { background: var(--surface-2); }

.user-avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  color: var(--on-action);
  background: var(--action);
  border-radius: 50%;
  font-size: .95rem;
  font-weight: 800;
}
.user-lines { display: grid; gap: 3px; min-width: 0; }
.user-lines b { display: flex; align-items: center; gap: 8px; font-size: .94rem; }
.user-lines small { color: var(--soft); font-size: .79rem; overflow: hidden; text-overflow: ellipsis; }
.user-self {
  padding: 2px 8px;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, transparent);
  border-radius: 999px;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
}

.user-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.user-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 700;
  white-space: nowrap;
}
.user-badge > i { font-size: .72rem; }
.user-badge.role-admin { color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); border-color: color-mix(in srgb, var(--action) 30%, transparent); }
.user-badge.role-editor { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.user-badge.badge-danger { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); border-color: color-mix(in srgb, var(--danger) 32%, transparent); }
.user-badge.badge-warn { color: #b7791f; background: color-mix(in srgb, #b7791f 14%, transparent); border-color: color-mix(in srgb, #b7791f 32%, transparent); }
:root[data-theme="dark"] .user-badge.badge-warn { color: #e9b949; }

.user-caret { color: var(--soft); font-size: .8rem; transition: transform var(--dur) var(--ease-out); }
.user-card[open] .user-caret { transform: rotate(180deg); }

.user-card-body { padding: 4px 16px 18px; border-top: 1px solid var(--line); background: var(--canvas, var(--surface-2)); }
.user-edit fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.user-edit legend {
  padding: 0 0 10px;
  color: var(--soft);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .03em;
}
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: start; }
.field-grid > label { display: grid; gap: 6px; align-content: start; }
.field-grid > label > span { color: var(--muted); font-size: .82rem; font-weight: 700; }
.field-grid input,
.field-grid select {
  min-height: 44px;
  padding-inline: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
  font-size: .875rem;
}
.field-grid input:focus,
.field-grid select:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 18%, transparent); }
.field-hint { color: var(--soft); font-size: .76rem; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.check-field.is-disabled { opacity: .45; cursor: not-allowed; }
.form-actions { display: flex; gap: 10px; margin-top: 20px; }

.verification-actions {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto auto;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  color: var(--muted);
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line));
  border-radius: var(--r-md);
}
.verification-actions > div { display: flex; align-items: center; gap: 11px; min-width: 0; }
.verification-actions > div > i { width: 34px; height: 34px; display: grid; flex: none; place-items: center; color: var(--warning-ink); background: color-mix(in srgb, var(--warning) 16%, var(--surface)); border-radius: 10px; }
.verification-actions b,.verification-actions small { display: block; }
.verification-actions b { color: var(--ink); font-size: .86rem; }
.verification-actions small { margin-top: 2px; font-size: .75rem; }
.verification-actions form { margin: 0; }
.verification-actions .button { min-height: 40px; white-space: nowrap; }

/* Danger zone: separated, collapsed by default, red only once opened. */
.danger-zone { margin-top: 18px; border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--line)); border-radius: var(--r-md); overflow: hidden; }
.danger-zone > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 15px;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
  font-size: .85rem;
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}
.danger-zone > summary::-webkit-details-marker { display: none; }
.danger-zone > form { display: grid; gap: 12px; padding: 16px; border-top: 1px solid color-mix(in srgb, var(--danger) 22%, var(--line)); }
.danger-zone p { margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.8; }
.danger-zone label { display: grid; gap: 6px; }
.danger-zone label > span { color: var(--muted); font-size: .8rem; font-weight: 700; }
.danger-zone input {
  min-height: 44px;
  padding-inline: 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font: inherit;
}
.button-danger { color: #fff; background: var(--danger); border-color: var(--danger); justify-self: start; }
.button-danger:hover { background: color-mix(in srgb, var(--danger) 86%, #000); }

.group-panel { margin-top: 26px; }
.panel-hint { margin: -4px 0 16px; color: var(--muted); font-size: .85rem; }

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

@media (max-width: 720px) {
  .user-card > summary { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 10px; }
  .user-badges { grid-column: 1 / -1; justify-content: flex-start; }
  .verification-actions { grid-template-columns: 1fr; }
  .verification-actions .button { width: 100%; }
}

/* Community support and the homepage book rail share the same calm surfaces. */
html,body { max-width: 100%; overflow-x: clip; }
.home-primary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 24px 0; }
.book-showcase { padding-block: 84px; }
.showcase-controls { display: flex; gap: 7px; }
.showcase-controls button { width: 42px; height: 42px; display: grid; place-items: center; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer; transition: color .18s ease,background .18s ease,border-color .18s ease,transform .18s ease,opacity .18s ease; }
.showcase-controls button:hover:not(:disabled) { color: var(--on-action); background: var(--action); border-color: var(--action); transform: translateY(-1px); }
.showcase-controls button:disabled { opacity: .32; cursor: default; }
.book-showcase-track { display: flex; gap: 18px; padding: 10px 2px 24px; overflow-x: auto; overflow-anchor: none; overscroll-behavior-inline: contain; scroll-snap-type: inline mandatory; scroll-padding-inline: 2px; scrollbar-width: none; opacity: 0; transform: translateY(5px); transition: opacity .22s ease,transform .22s ease; }
.book-showcase-track::-webkit-scrollbar { display: none; }
.book-showcase[data-ready="1"] .book-showcase-track { opacity: 1; transform: none; }
.book-showcase-card { flex: 0 0 calc((100% - 18px)/2); min-width: 0; min-height: 410px; display: grid; grid-template-columns: minmax(210px,.72fr) minmax(0,1.28fr); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-1); scroll-snap-align: start; scroll-snap-stop: always; }
.book-showcase-cover { display: flex; flex-direction: column; padding: 30px; color: #fff; background: linear-gradient(155deg,var(--brand-cpp-deep),var(--action)); }
.book-showcase-cover small { color: #b9dcf1; }.book-showcase-cover h3 { margin: auto 0 8px; color: #fff; }.book-showcase-cover p { color: #d7e8f2; }.book-showcase-cover code { margin-top: auto; color: #8cd8ff; font-size: 1.25rem; }
.book-showcase-copy { display: flex; flex-direction: column; padding: clamp(24px,4vw,44px); }.book-showcase-copy > span { color: var(--action); font-weight: 800; }.book-showcase-copy h3 { margin: 12px 0; }.book-showcase-copy p { color: var(--muted); }.book-showcase-copy > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.showcase-price { display: grid; gap: 3px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }.showcase-price b { color: var(--action); font-size: 1.45rem; }.showcase-price small { color: var(--muted); }
.support-hero { padding-block: clamp(70px,9vw,120px); background: linear-gradient(145deg,color-mix(in srgb,var(--action) 13%,var(--canvas)),var(--canvas)); border-bottom: 1px solid var(--line); }.support-hero-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); align-items: center; gap: clamp(35px,7vw,90px); }.support-hero h1 { margin: 14px 0; }.support-hero aside { padding: 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--e-2); }.support-hero aside > i { color: var(--success); font-size: 2rem; }.support-hero aside ul { display: grid; gap: 10px; padding: 0; list-style: none; }.support-hero aside li::before { content: '✓'; margin-left: 8px; color: var(--success); }
.support-total { display: grid; gap: 4px; margin-top: 30px; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }.support-total small,.support-total span { color: var(--muted); }.support-total b { color: var(--action); font-size: clamp(1.8rem,4vw,3rem); }.support-total em { font-size: .55em; font-style: normal; }
.support-methods,.supporter-wall { padding-block: 74px; }.support-presets { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-top: 28px; }.support-preset { min-height: 180px; display: grid; gap: 10px; padding: 20px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: transform .18s,border-color .18s; }.support-preset:hover { transform: translateY(-3px); border-color: var(--action); }.support-preset span { display: flex; align-items: center; gap: 8px; }.support-preset img { width: 28px; height: 28px; border-radius: 9px; }.support-preset b { font-size: 2rem; direction: ltr; }.support-preset em { margin-top: auto; color: var(--action); font-style: normal; font-weight: 800; }.support-fiat-note { display: flex; align-items: center; gap: 15px; margin-top: 18px; padding: 18px; background: color-mix(in srgb,var(--warning) 10%,var(--surface)); border: 1px solid color-mix(in srgb,var(--warning) 30%,var(--line)); border-radius: var(--r-md); }.support-fiat-note > i { color: var(--warning-ink); font-size: 1.5rem; }.support-fiat-note p { margin: 4px 0 0; color: var(--muted); }
.supporter-wall > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); }.supporter-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 24px; }.supporter-grid article { display: flex; align-items: center; gap: 12px; padding: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }.supporter-grid article > img,.supporter-grid article > span { width: 48px; height: 48px; display: grid; place-items: center; object-fit: cover; color: #fff; background: var(--action); border-radius: 50%; font-weight: 850; }.supporter-grid article div { display: grid; }.supporter-grid small { color: var(--muted); }.support-empty { padding: 60px 20px; text-align: center; color: var(--muted); }.support-empty > i { font-size: 2rem; }.support-admin { margin-top: 30px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-md); }
.era-features { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 0; padding: 0; list-style: none; }.era-features li { padding: 4px 9px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; }.era-features code { color: var(--action); font-size: .7rem; }
.version-navigator { gap: 7px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-1); }.version-navigator a { min-width: 76px; display: grid; place-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 12px; }.version-navigator a.current { color: #fff; background: var(--action); }.version-navigator a.future { color: var(--brand-cpp-deep); background: color-mix(in srgb,var(--future) 28%,var(--surface)); border-color: color-mix(in srgb,var(--future) 45%,var(--line)); }
@media (max-width:1100px){.book-showcase-card{flex-basis:100%}}
@media (max-width:900px){.support-hero-grid,.book-showcase-card{grid-template-columns:1fr}.support-presets{grid-template-columns:repeat(2,minmax(0,1fr))}.supporter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.book-showcase-cover{min-height:240px}}
@media (max-width:600px){.home-primary-actions .button{width:100%}.book-showcase{padding-block:56px}.book-showcase-card{flex-basis:100%;min-height:0}.book-showcase-copy{padding:22px}.book-showcase-cover{min-height:220px;padding:24px}.support-presets,.supporter-grid{grid-template-columns:1fr}.supporter-wall>header{align-items:flex-start;flex-direction:column}}

@media (prefers-reduced-motion:reduce){.book-showcase-track{opacity:1;transform:none;transition:none}.showcase-controls button{transition:none}}

/* A checkbox row should hug its label, not stretch across the grid cell. */
.field-grid > .check-field { align-self: end; min-height: 44px; justify-content: flex-start; }

/* =========================================================================
   Community: reactions and comment compose
   ========================================================================= */

.community-panel { border-radius: var(--r-xl); }

.community-reactions { display: flex; gap: 9px; flex-wrap: wrap; }
.community-reactions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  corner-shape: round;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.community-reactions button:hover { color: var(--action); border-color: color-mix(in srgb, var(--action) 38%, var(--line)); transform: translateY(-1px); }
.community-reactions button:active { transform: scale(.97); }
.community-reactions button[aria-pressed="true"] {
  color: var(--action);
  background: color-mix(in srgb, var(--action) 11%, transparent);
  border-color: color-mix(in srgb, var(--action) 42%, transparent);
}
.community-reactions button > b {
  min-width: 22px;
  padding: 1px 7px;
  color: var(--soft);
  background: var(--surface-2);
  border-radius: 999px;
  corner-shape: round;
  font-size: .74rem;
  font-variant-numeric: tabular-nums;
}
.community-reactions button[aria-pressed="true"] > b { color: var(--on-action); background: var(--action); }

.community-comment-form { display: grid; gap: 14px; margin-top: 18px; }
.comment-compose { display: grid; gap: 8px; }
.comment-label { color: var(--muted); font-size: .84rem; font-weight: 750; }

/* One bordered surface holding the textarea and its counter, so the field
   reads as a single control rather than a box with a number floating below. */
.comment-field {
  display: grid;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.comment-field:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px color-mix(in srgb, var(--action) 16%, transparent); }
.comment-field textarea {
  min-height: 104px;
  padding: 14px 15px 10px;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  font: inherit;
  font-size: .9rem;
  line-height: 1.85;
  resize: vertical;
}
.comment-field textarea:focus { outline: none; }
.comment-field-foot { display: flex; justify-content: flex-end; padding: 0 15px 10px; }
.comment-counter { color: var(--soft); font-size: .74rem; font-variant-numeric: tabular-nums; }
.comment-counter.is-near-limit { color: var(--danger); font-weight: 700; }

.comment-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.comment-actions small { display: inline-flex; align-items: center; gap: 7px; color: var(--soft); font-size: .8rem; }
.comment-actions small > i { color: var(--soft); }
.comment-actions .button { margin-inline-start: auto; }

/* =========================================================================
   Store
   ========================================================================= */

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; align-items: stretch; }

.store-card {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.store-card:hover { border-color: color-mix(in srgb, var(--action) 30%, var(--line)); box-shadow: var(--e-2); transform: translateY(-2px); }
.store-card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.store-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 12%, transparent);
  border-radius: var(--r-sm);
  corner-shape: var(--corner);
  font-size: 1.1rem;
}
.store-status {
  padding: 5px 11px;
  border-radius: 999px;
  corner-shape: round;
  font-size: .72rem;
  font-weight: 800;
  white-space: nowrap;
}
.store-status.available { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); }
.store-status.preview { color: var(--action); background: color-mix(in srgb, var(--action) 13%, transparent); }
.store-status.soon { color: var(--soft); background: var(--surface-2); }

.store-eyebrow { color: var(--action); font-size: .76rem; font-weight: 800; letter-spacing: .02em; }
.store-card h2 { margin: 0; font-size: 1.08rem; line-height: 1.55; }
.store-card > p { margin: 0; color: var(--muted); font-size: .855rem; line-height: 1.85; }

.store-card > footer { display: grid; gap: 14px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }
.store-formats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.store-formats li {
  padding: 4px 10px;
  color: var(--muted);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  corner-shape: round;
  font-size: .72rem;
  font-weight: 700;
}
.store-buy { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.store-price { color: var(--ink); font-size: 1.05rem; font-weight: 850; white-space: nowrap; font-variant-numeric: tabular-nums; }
.store-buy .button { min-height: 44px; }

.store-filters { display: flex; gap: 7px; flex-wrap: wrap; }
.store-filters button {
  min-height: 44px;
  padding: 0 15px;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  corner-shape: round;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.store-filters button:hover { color: var(--action); border-color: color-mix(in srgb, var(--action) 36%, var(--line)); }
.store-filters button.active,
.store-filters button[aria-pressed="true"] { color: var(--on-action); background: var(--action); border-color: var(--action); }

.store-unreleased { padding: 18px 20px; border-style: solid; border-color: var(--line); background: var(--surface-2); }

/* Store administration: compact summaries first, full product fields only
   when the administrator opens a product. */
.store-admin-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; }
.store-admin-summary article { display: grid; gap: 6px; padding: 17px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--e-1); }
.store-admin-summary span { color: var(--muted); font-size: .78rem; font-weight: 750; }
.store-admin-summary b { color: var(--ink); font-size: 1.35rem; }
.store-admin-products { display: grid; gap: 10px; }
.store-admin-product { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.store-admin-product > summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; }
.store-admin-product > summary::-webkit-details-marker { display: none; }
.store-admin-product > summary > span:nth-child(2) { min-width: 0; }
.store-admin-product > summary b,.store-admin-product > summary small { display: block; }
.store-admin-product > summary small { margin-top: 2px; color: var(--muted); font-size: .72rem; }
.store-admin-product > summary > .fa-chevron-down { color: var(--soft); transition: transform var(--dur-fast) var(--ease-out); }
.store-admin-product[open] > summary > .fa-chevron-down { transform: rotate(180deg); }
.store-admin-product-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--action); background: color-mix(in srgb,var(--action) 10%,var(--surface-2)); border-radius: 12px; }
.store-product-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: 18px; border-top: 1px solid var(--line); }
.store-product-form > label { display: grid; align-content: start; gap: 7px; color: var(--muted); font-size: .78rem; font-weight: 750; }
.store-product-form .wide { grid-column: 1/-1; }
.store-product-form input,.store-product-form select,.store-product-form textarea { width: 100%; }
.store-product-form textarea { resize: vertical; }
.store-deliverable-field { padding: 14px; background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--r-sm); }
.store-deliverable-field small { color: var(--soft); font-size: .7rem; font-weight: 500; }
@media (max-width: 760px) {
  .store-admin-summary,.store-product-form { grid-template-columns: 1fr; }
  .store-product-form .wide { grid-column: auto; }
  .store-admin-product > summary { grid-template-columns: auto minmax(0,1fr) auto; }
  .store-admin-product > summary .status-badge { grid-column: 1/-1; width: max-content; }
}

/* cPanel account quotas. These deliberately look different from mirror job
   counters so shared-server filesystem capacity cannot be mistaken for the
   hosting account's quota again. */
.hosting-usage-setup { align-items: flex-start; }
.hosting-usage-setup b,.hosting-usage-setup p { display: block; }
.hosting-usage-setup p { margin: 4px 0 0; }
.hosting-usage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.hosting-usage-grid article { display: grid; gap: 8px; padding: 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.hosting-usage-grid article > span { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.hosting-usage-grid article > span i { color: var(--action); }
.hosting-usage-grid article > b { color: var(--ink); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hosting-usage-grid article > small { min-height: 1.4em; color: var(--soft); font-size: .7rem; }
.usage-meter { height: 5px; overflow: hidden; background: var(--line); border-radius: 999px; }
.usage-meter > i { display: block; width: var(--usage); height: 100%; background: var(--usage-color,var(--success)); border-radius: inherit; }
.hosting-usage-foot { margin: 12px 0 0; color: var(--soft); font-size: .7rem; }
@media (max-width: 920px) { .hosting-usage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 560px) { .hosting-usage-grid { grid-template-columns: 1fr; } }

/* The toast stack sat at a hard-coded 90px while the sticky header is 116px
   tall, so messages landed on top of the navigation. The offset now follows the
   header's real height, which changes with the demo banner and at small widths. */
.toast-stack {
  top: calc(var(--header-height, 116px) + 14px);
  z-index: 120;
}
@media (max-width: 700px) {
  .toast-stack { inset-inline: 12px; width: auto; }
}

/* =========================================================================
   Bidirectional text
   ========================================================================= */

/*
   Latin technical terms inside Persian copy get reordered by the Unicode
   bidirectional algorithm: the plus signs in "C++" are neutral characters, so
   between the Latin "C" and the Persian word that follows they resolve to the
   paragraph's right-to-left direction and are drawn to the left of the letter,
   reading as "++C".

   `unicode-bidi: isolate` makes each run self-contained for layout only. The
   markup and text content are untouched, so what search engines index, what
   screen readers announce and what a reader copies all stay exactly "C++".
   code/pre/kbd/samp already carry this; these are the remaining holders of
   Latin identifiers.
*/
bdi,
.mega-links em,
.tag,
.store-formats li,
.user-lines small,
.moderation-who code,
.shortcut-keycap,
[data-latin] {
  unicode-bidi: isolate;
}

/* Runs that are entirely Latin also read left-to-right inside their box. */
.mega-links em,
.store-formats li,
.user-lines small,
[data-latin] {
  direction: ltr;
}

/* =========================================================================
   Commerce alignment and theme-safe rewards
   ========================================================================= */

/* The GENY artwork includes its own dark plate. Clip the replaced image as
   well as the SVG plate so every use has the same soft token silhouette. */
img[src*="/assets/crypto/geny-dna.svg"] {
  display: block;
  border-radius: 22%;
  clip-path: inset(0 round 22%);
}

/* A compact, neutral reward marker. It inherits the active theme instead of
   introducing a permanent yellow panel in both light and dark appearances. */
.reward-badge {
  width: max-content;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 9px;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 24%, var(--line));
  border-radius: 999px;
  box-shadow: none;
  white-space: nowrap;
}
.reward-badge > span {
  padding-inline-end: 7px;
  border-inline-end: 1px solid color-mix(in srgb, var(--action) 22%, var(--line));
  font: 850 .6rem/1 ui-sans-serif, sans-serif;
  letter-spacing: .03em;
}
.reward-badge > b {
  color: inherit;
  font-size: .7rem;
  font-weight: 850;
  line-height: 1;
}
.price-equivalents.has-reward {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.price-equivalents.has-reward > .price-equivalent {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  padding-inline: 8px;
}
.price-equivalents.has-reward .price-equivalent > b {
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
}
.currency-xp {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 24%, var(--line));
  border-radius: 50%;
  font: 900 .42rem/1 ui-sans-serif, sans-serif;
}
.catalog-card-top > .reward-badge { flex: 0 0 auto; }
.book-commerce-summary > .reward-badge { margin-inline-start: auto; }

/* Payment methods share one status geometry. This keeps the selected state and
   the pending gateway aligned without a detached checkmark or warning pill. */
.checkout-payment-card .pay-method {
  min-height: 82px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 12px;
  padding: 14px;
  border-radius: 16px;
}
.checkout-payment-card .pay-method-icon {
  width: 46px;
  height: 46px;
  overflow: hidden;
  color: var(--muted);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--ink) 6%, transparent);
}
.checkout-payment-card .pay-method-icon img {
  width: 30px;
  height: 30px;
}
.checkout-payment-card .pay-method.is-active .pay-method-icon {
  color: var(--action);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--action) 48%, var(--line));
}
.checkout-payment-card .pay-method-state,
.checkout-payment-card .pay-method-soon {
  min-width: 82px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .61rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}
.checkout-payment-card .pay-method-state {
  color: var(--action);
  background: color-mix(in srgb, var(--action) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 28%, var(--line));
  opacity: 0;
  visibility: hidden;
}
.checkout-payment-card .pay-method.is-active > .pay-method-state {
  opacity: 1;
  visibility: visible;
}
.checkout-payment-card .pay-method-soon {
  color: var(--warning-ink);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line));
}
.checkout-order-icon i { font-size: 1rem; }

.checkout-order-card .checkout-reward {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 22px 18px;
  padding: 10px 12px;
  color: var(--muted);
  background: color-mix(in srgb, var(--action) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 18%, var(--line));
  border-radius: 13px;
}
.checkout-order-card .checkout-reward > .reward-badge {
  width: max-content;
  height: auto;
  display: inline-flex;
  color: var(--action);
  background: color-mix(in srgb, var(--action) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 24%, var(--line));
  border-radius: 999px;
}
.checkout-order-card .checkout-reward > small {
  color: var(--muted);
  font-size: .68rem;
}

/* Product cards keep one stable geometry. The purchase action gets its own
   row, and the compact XP marker can never overlap prices or neighbouring
   cards. */
.store-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr));
  gap: 18px;
  scroll-margin-top: calc(var(--header-height, 116px) + 20px);
}
.store-hero-cta { width: max-content; margin-top: 24px; }
.store-card {
  min-width: 0;
  min-height: 470px;
  overflow: hidden;
  gap: 12px;
  padding: 22px;
}
.store-card > * { min-width: 0; }
.store-card > p {
  min-height: 6.8rem;
  color: var(--muted);
}
.store-card > footer {
  display: grid;
  align-items: stretch;
  gap: 14px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
}
.store-formats { min-height: 32px; align-content: flex-start; }
.store-buy {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 12px;
}
.store-price-stack {
  width: 100%;
  display: block;
}
.store-price-stack > .price-quote {
  width: 100%;
  min-width: 0;
}
.store-price-stack > .reward-badge { align-self: end; }
.store-buy > .button {
  width: 100%;
  min-height: 46px;
  justify-content: center;
  margin: 0;
}

@media (max-width: 760px) {
  .checkout-payment-card .pay-methods { grid-template-columns: 1fr; }
  .store-card { min-height: 0; }
}

@media (max-width: 420px) {
  .price-equivalents.has-reward { grid-template-columns: 1fr 1fr; }
  .price-equivalents.has-reward > .is-xp { grid-column: 1 / -1; }
  .checkout-order-card .checkout-reward { align-items: flex-start; flex-direction: column; }
}

/* =========================================================================
   Release notice, publishing controls and mobile reference portal
   ========================================================================= */
.release-notice {
  position: relative;
  z-index: 91;
  color: var(--ink);
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--warning) 32%, var(--line));
}
.release-notice > div {
  min-height: 46px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding-block: 7px;
}
.release-notice p { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 650; }
.release-notice-icon {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--warning-ink);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  border-radius: 9px;
}
.release-notice-badge {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  color: var(--warning-ink);
  background: color-mix(in srgb, var(--warning) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--line));
  border-radius: 999px;
  font-size: .67rem;
  font-weight: 850;
  white-space: nowrap;
}
.release-settings-form { align-items: end; }
.release-settings-form .release-toggle {
  grid-column: 1 / -1;
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  background: color-mix(in srgb, var(--action) 5%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--action) 17%, var(--line));
  border-radius: 14px;
}
.release-toggle > span { display: grid; gap: 4px; color: var(--ink) !important; }
.release-toggle small { color: var(--muted); font-weight: 500; }
.section-control-form { display: grid; gap: 18px; }
.section-control-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.section-control-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .2s ease, background-color .2s ease;
}
.section-control-card.is-disabled { background: color-mix(in srgb,var(--warning) 5%,var(--surface)); border-color: color-mix(in srgb,var(--warning) 28%,var(--line)); }
.section-control-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.section-control-card > header > div { display: grid; gap: 4px; }
.section-control-card > header b { color: var(--ink); }
.section-control-card > header small,
.section-control-card label > span { color: var(--muted); }
.section-control-card textarea { width: 100%; resize: vertical; }
.section-control-toggle { min-height: 58px; }
.section-control-toggle > span { display: grid; gap: 2px; }
.section-control-toggle small { font-weight: 500; }
.section-control-form > .button { justify-self: start; }
.footer-genyleap { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.footer-genyleap:hover { color: #fff; }
.footer-genyleap i { font-size: .65rem; }

/* Disabled product areas remain visible as roadmap items without behaving
   like links. The same treatment is shared by desktop navigation, mobile
   navigation, mega menus, footer links and recovery navigation. */
.nav-link-unavailable,
.primary-nav a.nav-link-unavailable,
.mega-panel a.nav-link-unavailable,
.footer a.nav-link-unavailable {
  cursor: not-allowed;
  color: var(--muted);
  opacity: 1;
  text-decoration: none;
  pointer-events: none;
  user-select: none;
}
.nav-section-disabled > summary {
  cursor: not-allowed;
  color: var(--muted);
  opacity: 1;
  pointer-events: none;
  user-select: none;
}
.primary-nav > a.nav-link-unavailable > i,
.primary-nav > a.nav-link-unavailable > span:not(.nav-soon-badge),
.nav-section-disabled > summary > i,
.nav-section-disabled > summary > span:not(.nav-soon-badge),
.mega-panel a.nav-link-unavailable > i { opacity: .5; }
.mega-panel a.nav-link-unavailable b,
.mega-panel a.nav-link-unavailable small,
.mega-panel a.nav-link-unavailable em { color: var(--muted); }
.nav-soon-badge,
.primary-nav .nav-soon-badge,
.mega-panel .nav-soon-badge,
.footer .nav-soon-badge {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 0 0 auto;
  width: max-content;
  margin-inline-start: 7px;
  padding: 3px 9px;
  color: var(--warning-ink);
  background: color-mix(in srgb, var(--warning) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--warning) 42%, var(--line));
  border-radius: 999px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
  font-family: inherit;
  font-size: .62rem;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}
.nav-soon-badge::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warning) 13%, transparent);
}
.nav-mega > summary > .nav-soon-badge,
.primary-nav > a > .nav-soon-badge {
  position: relative;
  top: 0;
  margin-inline: 1px 0;
}
.mega-links b > .nav-soon-badge {
  min-height: 21px;
  margin-inline-start: 6px;
  padding: 2px 7px;
  font-size: .56rem;
}
.mega-links b:has(> .nav-soon-badge) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.footer-column > a,
.error-links > span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.footer-pulse.is-paused i { background: var(--warning); box-shadow: 0 0 0 5px color-mix(in srgb, var(--warning) 15%, transparent); }
.error-links > span { display: inline-flex; }

@media (max-width: 720px) {
  .nav-soon-badge,
  .primary-nav .nav-soon-badge { min-height: 22px; padding-inline: 8px; font-size: .59rem; }
  .nav-mega > summary > .nav-soon-badge,
  .primary-nav > a > .nav-soon-badge { margin-inline-start: auto; }
}

/* At tablet widths the three desktop panes became two narrow columns. A
   deliberate single-column dashboard prevents clipping and empty tall cards. */
@media (max-width: 1180px) {
  .reference-portal.section-width { width: min(100% - 32px, 920px); }
  .reference-browser { width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr) !important; }
  .reference-browser > * { min-width: 0; }
  .reference-tree { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reference-tree > header,
  .reference-tree > .tree-action { grid-column: 1 / -1; }
  .reference-brief {
    grid-column: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .reference-brief > header,
  .reference-brief > .source-note { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .section-control-grid { grid-template-columns: minmax(0,1fr); }
  .section-control-card { padding: 15px; }
  .release-notice > div { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .release-notice-badge { grid-column: 2; width: max-content; }
  .release-notice p { font-size: .72rem; line-height: 1.65; }
  .reference-portal.section-width { width: min(100% - 22px, 680px); }
  .reference-portal .product-section-head { gap: 12px; }
  .reference-portal .product-section-head h2 { font-size: clamp(1.65rem, 8vw, 2.3rem); line-height: 1.35; }
  .reference-tree,
  .reference-brief { grid-template-columns: minmax(0, 1fr) !important; }
  .reference-tree > header,
  .reference-tree > .tree-action,
  .reference-brief > header,
  .reference-brief > .source-note { grid-column: auto; }
  .reference-topics > header { align-items: flex-start; flex-direction: column; }
  .topic-grid { grid-template-columns: minmax(0, 1fr); }
  .topic-grid > a { min-width: 0; }
}