/* =========================================================================
   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);
}

/* 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); }

/* 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; }
.footer-genyleap { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.footer-genyleap:hover { color: #fff; }
.footer-genyleap i { font-size: .65rem; }

/* 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) {
  .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; }
}