/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }
  .od-nowrap  { white-space: nowrap; }
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; }
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }
  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */

/* =====================================================================
   Upstar — components.css (ds-1.0.0)
   Requires assets/tokens.css first. Fonts (put in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap">

   CLASS INDEX (B = block, E = element, M = modifier, S = state)
   ---------------------------------------------------------------------
   Base / utilities
     .container .container-narrow .container-wide   .sr-only  .skip-link
     .mono .num (mono + tabular) .muted .faint .text-rise .text-danger .gain-text
     .list-reset .divider .kbd .nowrap
     Responsive visibility: .only-mobile (<768) .not-mobile (>=768)
                            .only-desktop (>=1024) .below-desktop (<1024)
                            .hide-sm / .show-sm (alias of not-mobile / only-mobile, inline)
     Page structure: .page-head .page-title .page-sub .page-actions .eyebrow
                     .section .section-head .section-title .section-link
     .prose (README / long text)  .table  .stat-row .stat .stat-value .stat-label
     .list (bordered list) > .list-item (.is-unread) [.list-item__icon __body __title __text __meta __actions] .unread-dot
   Logo:      .logo .logo__mark .logo__word
   Icons:     .icon (svg from Upstar.icon) .icon-trail
   Buttons:   .btn + .btn-primary | .btn-secondary | .btn-outline | .btn-ghost | .btn-danger
              .follow-btn (logged-out "+ Follow", .btn-outline)
              sizes .btn-sm .btn-lg   shape .btn-icon (needs aria-label)  .btn-block
              states :disabled / [aria-disabled=true]  .is-loading (spinner)
              .bookmark-toggle (.when-on/.when-off, aria-pressed)  .subscribe-btn (.is-subscribed, .btn-icon-slot .btn-label)
              .theme-toggle (.theme-toggle__sun/.theme-toggle__moon)
   Forms:     .field > .field-label + (.input|.select|.textarea) + .field-help + .field-error   (.field.is-invalid or [aria-invalid=true])
              .search-input > .search-input__icon + .input + .search-input__kbd
              .switch > input[type=checkbox][role=switch] + .switch__track + .switch__label
              .radio-card > input[type=radio] + .radio-card__body > .radio-card__title + .radio-card__desc
              .check (native checkbox + label)
              .segmented[role=radiogroup] > .segmented__item[role=radio][aria-checked]   M: .segmented-sm
   Chips:     .chip (.chip-sm, .is-active / [aria-current=page]) .chip-count   .lang > .lang-dot(--lang) + .lang-name
   Badges:    .badge .badge-rise (.badge-score) .badge-new .badge-neutral .badge-warning .badge-danger .badge-info
   Tabs:      .tabs[role=tablist] > .tab[role=tab][aria-selected]
   Cards:     .card (.card--flush) .card__head .card__title .card__body
   Repo card: .repo-card (.repo-card--compact | .repo-card--expanded, S: .is-rising .is-leaving .is-entering)
                > .repo-card__inner > .repo-card__lead (.repo-card__rank, .avatar)
                                     .repo-card__body (.repo-card__title-row .repo-card__title .repo-link .repo-owner .repo-name
                                                       .repo-card__desc .repo-card__why .repo-card__meta .meta-item .repo-card__stats .stat-mini)
                                     .repo-card__trend (.repo-card__gain .gain .gain-period .sparkline)
                                     .repo-card__actions
              Layout adapts to the CARD width (container query), so cards work in any column.
              .repo-list (vertical list of cards)
   Topic:     .topic-card .topic-card__head __name __slug __desc __reason __stats __top  .delta-up .delta-down
   Sponsor:   .sponsor (.sponsor--feed | .sponsor--rail) .sponsor__media .sponsor__body .sponsor__label .sponsor__text .sponsor__attr
   Feedback:  .toast-region > .toast (.toast--success|--error|--info, S .is-in .is-out) .toast__icon __msg __action __close
              .empty-state (.empty-state--compact) __icon __title __body __actions
              .error-state __icon __title __body __actions
              .skeleton .skeleton-text(.skeleton-text--sm) .skeleton-avatar .skeleton-pill(--wide) .skeleton-spark .skeleton-block
              .repo-card-skeleton (.repo-card-skeleton--expanded)
   Avatar:    .avatar.avatar--user | .avatar--org   (inline vars --av-size, --av-h)
   Charts:    .sparkline  .star-chart .chart-grid .chart-axis .chart-label .chart-line .chart-area .chart-dot
   App shell: .app-shell > #app-topbar.topbar, #app-chipbar.topic-chipbar, .app-body (> #app-sidebar.sidebar, main.main, aside.rail), #bottom-nav.bottom-nav
              .app-body--no-rail  .rail--hide-md (hide instead of stacking below main at <1024)
              .topbar__inner __search __actions __search-btn __bell __bell-dot __avatar
              .sidebar__nav .nav-item .nav-item__count .sidebar__section .sidebar__heading .sidebar__label .sidebar__more .sidebar__foot
              .topic-list (.topic-list--sheet) .topic-link .topic-link__hash .topic-link__name
              .topic-chipbar__inner __all __rail    .bottom-nav__inner __item
   Overlays:  .sheet-root(.is-open) > .sheet-scrim + .sheet > .sheet__handle .sheet__header .sheet__title .sheet__body .sheet__footer  .sheet-nav
              .modal-root(.is-open) > .modal-scrim + .modal > .modal__title .modal__body .modal__actions
              .modal--signin (logged-out prompt) > .modal__close .signin-prompt__mark .signin-prompt__body
                .signin-prompt__or .signin-prompt__digest .signin-prompt__done
   Public:    .site-header .site-header__inner __nav __actions __cta __menu
              .site-footer .site-footer__inner __brand __cols __title __legal   .newsletter .newsletter__row
   Breakpoints: 375 / 768 / 1024 / 1440.  Hover styles only under (hover: hover).
   ===================================================================== */

/* ---------------------------------------------------------------------
   Base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); }
html.has-overlay { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body[data-shell="site"] { font-size: var(--fs-16); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: var(--fw-semibold); line-height: var(--lh-heading); letter-spacing: -0.01em; }
p, figure, dl, dd, blockquote { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
code, kbd, pre, samp { font-family: var(--font-mono); }
::selection { background: var(--rise-line); color: var(--text); }
:focus { outline: none; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }

.icon { display: inline-block; flex: none; vertical-align: -0.2em; }
.icon * { vector-effect: non-scaling-stroke; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   Utilities
   --------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-6); }
.container-narrow { width: 100%; max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--sp-6); }
.container-wide { width: 100%; max-width: var(--container-wide); margin-inline: auto; padding-inline: var(--sp-6); }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-2); top: -64px; z-index: 100;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-control);
  background: var(--raised); color: var(--text); border: 1px solid var(--border-strong);
  font-weight: var(--fw-medium); text-decoration: none;
}
.skip-link:focus-visible, .skip-link:focus { top: var(--sp-2); }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.text-rise, .gain-text { color: var(--rise-text); }
.text-danger { color: var(--danger); }
.nowrap { white-space: nowrap; }
.list-reset { list-style: none; margin: 0; padding: 0; }
.divider { border: 0; border-top: 1px solid var(--border); margin: var(--sp-4) 0; }
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  font-family: var(--font-mono); font-size: 11px; line-height: 1; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 4px;
}
.eyebrow { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--muted); letter-spacing: 0.02em; }

.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.page-title { font-size: var(--fs-24); line-height: var(--lh-heading); font-weight: var(--fw-semibold); letter-spacing: -0.015em; }
.page-sub { margin-top: var(--sp-1); color: var(--muted); font-size: var(--fs-14); max-width: 60ch; }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.section { margin-top: var(--sp-8); }
.section:first-child { margin-top: 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.section-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.section-link { font-size: var(--fs-13); color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }

.stat-row { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); }
.stat { display: grid; gap: 2px; }
.stat-label { font-size: var(--fs-12); color: var(--muted); }
.stat-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: -0.02em; }

.only-mobile, .show-sm { display: none !important; }
@media (max-width: 767.98px) {
  .only-mobile { display: revert !important; }
  .show-sm { display: inline !important; }
  .not-mobile, .hide-sm { display: none !important; }
  .container, .container-narrow, .container-wide { padding-inline: var(--sp-4); }
}
@media (max-width: 1023.98px) { .only-desktop { display: none !important; } }
@media (min-width: 1024px) { .below-desktop { display: none !important; } }

/* Prose (README) */
.prose { font-size: var(--fs-14); line-height: 1.65; color: var(--text); overflow-wrap: anywhere; }
.prose > * + * { margin-top: var(--sp-3); }
.prose h1 { font-size: var(--fs-24); margin-top: var(--sp-8); }
.prose h2 { font-size: var(--fs-20); margin-top: var(--sp-8); padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border); }
.prose h3 { font-size: var(--fs-16); margin-top: var(--sp-6); }
.prose > :first-child { margin-top: 0; }
.prose ul, .prose ol { padding-left: var(--sp-6); margin: 0; }
.prose li + li { margin-top: var(--sp-1); }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--border-strong); }
.prose code { font-size: 0.92em; background: var(--raised); border: 1px solid var(--border); padding: 1px 5px; border-radius: 4px; }
.prose pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); padding: var(--sp-3) var(--sp-4); overflow-x: auto; font-size: var(--fs-13); line-height: 1.6; }
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.prose blockquote { padding-left: var(--sp-4); border-left: 2px solid var(--border-strong); color: var(--muted); }

/* Table */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-14); }
.table th { text-align: left; font-size: var(--fs-12); font-weight: var(--fw-medium); color: var(--muted); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); }
.table td { padding: var(--sp-3); border-bottom: 1px solid var(--border); vertical-align: middle; }
.table .num, .table td.num, .table th.num { text-align: right; }

/* Bordered list rows (alerts, settings) */
.list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.list-item { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); position: relative; }
.list > .list-item:last-child { border-bottom: 0; }
.list-item__icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--raised); border: 1px solid var(--border); color: var(--muted);
}
.list-item__body { flex: 1 1 0; min-width: 0; display: grid; gap: 2px; }
.list-item__title { font-size: var(--fs-14); font-weight: var(--fw-medium); color: var(--text); }
.list-item__text { font-size: var(--fs-13); color: var(--muted); }
.list-item__meta { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.list-item__actions { flex: none; display: flex; align-items: center; gap: var(--sp-1); }
.list-item.is-unread .list-item__title { font-weight: var(--fw-semibold); }
.unread-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rise); flex: none; }

/* ---------------------------------------------------------------------
   Logo
   --------------------------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--text); flex: none; }
.logo__mark { color: var(--rise); }
.logo__word { font-family: var(--font-mono); font-weight: var(--fw-semibold); font-size: 18px; letter-spacing: -0.04em; line-height: 1; }

/* ---------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------- */
.btn {
  --spin: var(--text);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 36px; padding: 0 14px;
  border: 1px solid transparent; border-radius: var(--r-control);
  background: transparent; color: var(--text);
  font-family: var(--font-sans); font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1;
  text-decoration: none; white-space: nowrap; user-select: none; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.btn:active { transform: scale(0.98); }
.btn-primary { --spin: var(--on-rise); background: var(--rise); color: var(--on-rise); font-weight: var(--fw-semibold); }
.btn-secondary { background: var(--raised); border-color: var(--border-strong); color: var(--text); }
.btn-ghost { background: transparent; color: var(--muted); }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-danger { --spin: var(--on-danger); background: var(--danger); color: var(--on-danger); font-weight: var(--fw-semibold); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-13); gap: 6px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: var(--fs-16); }
.btn-icon { width: 36px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-icon.btn-lg { width: 44px; }
.btn-block { display: flex; width: 100%; }
.btn .icon-trail { color: var(--muted); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
.btn.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; border: 2px solid var(--spin); border-right-color: transparent;
  animation: up-spin 700ms linear infinite;
}
@keyframes up-spin { to { transform: rotate(360deg); } }

.bookmark-toggle .when-on, .bookmark-toggle .when-off { display: inline-flex; }
.bookmark-toggle .when-on { display: none; }
.bookmark-toggle[aria-pressed="true"] .when-on { display: inline-flex; color: var(--rise); }
.bookmark-toggle[aria-pressed="true"] .when-off { display: none; }
.btn-icon-slot { display: inline-flex; }
.subscribe-btn.is-subscribed .btn-icon-slot { color: var(--rise-text); }
.theme-toggle .theme-toggle__moon { display: none; }
[data-theme="light"] .theme-toggle .theme-toggle__moon { display: inline-block; }
[data-theme="light"] .theme-toggle .theme-toggle__sun { display: none; }

/* ---------------------------------------------------------------------
   Forms
   --------------------------------------------------------------------- */
.field { display: grid; gap: 6px; }
.field-label { font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--text); }
.field-help { font-size: var(--fs-13); color: var(--muted); }
.field-error { display: flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--danger); }
.field:not(.is-invalid) .field-error:empty { display: none; }

.input, .select, .textarea {
  width: 100%; height: 36px; padding: 0 12px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--r-control);
  font-size: var(--fs-14); line-height: 1.4;
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--muted); opacity: 1; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--rise); outline: var(--focus-ring); outline-offset: 1px; }
.input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.textarea { height: auto; min-height: 96px; padding: 8px 12px; line-height: var(--lh-body); resize: vertical; }
.select {
  padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239BA3AF' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
}
[data-theme="light"] .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6370' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
.field.is-invalid .input, .field.is-invalid .select, .field.is-invalid .textarea { border-color: var(--danger); }
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface); color: var(--muted); cursor: not-allowed; opacity: 0.7; }

.search-input { position: relative; display: block; }
.search-input__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-input .input { padding-left: 34px; padding-right: 36px; }
.search-input__kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search-input .input:focus ~ .search-input__kbd, .search-input .input:not(:placeholder-shown) ~ .search-input__kbd { opacity: 0; }

.switch { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; position: relative; min-height: 24px; }
.switch input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; cursor: pointer; }
.switch__track {
  position: relative; flex: none; width: 36px; height: 20px; border-radius: var(--r-chip);
  background: var(--border-strong); border: 1px solid var(--border-strong);
}
.switch__track::after {
  content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%;
  background: #FFFFFF; transition: transform var(--dur-base) var(--ease-out);
}
[data-theme="light"] .switch__track { background: #CDD2D8; }
.switch input:checked + .switch__track { background: var(--rise); border-color: var(--rise); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.switch input:disabled + .switch__track { opacity: 0.45; }
.switch__label { font-size: var(--fs-14); color: var(--text); }

.radio-card {
  display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-card); cursor: pointer;
}
.radio-card input { flex: none; margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--rise); }
.radio-card__body { display: grid; gap: 2px; min-width: 0; }
.radio-card__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.radio-card__desc { font-size: var(--fs-13); color: var(--muted); }
.radio-card:has(input:checked) { border-color: var(--rise); box-shadow: inset 0 0 0 1px var(--rise); }
.radio-card:has(input:focus-visible) { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
.radio-card input:focus-visible { outline: none; }

.check { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-14); cursor: pointer; }
.check input { width: 16px; height: 16px; margin: 0; accent-color: var(--rise); }

.segmented {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-control); max-width: 100%;
}
.segmented__item {
  height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent; color: var(--muted);
  font-size: var(--fs-13); font-weight: var(--fw-medium); white-space: nowrap;
}
.segmented__item[aria-checked="true"] {
  background: var(--raised); color: var(--text); font-weight: var(--fw-semibold);
  box-shadow: 0 0 0 1px var(--border-strong);
}
.segmented-sm .segmented__item { height: 24px; padding: 0 8px; font-size: var(--fs-12); }

/* ---------------------------------------------------------------------
   Chips, language dots, badges
   --------------------------------------------------------------------- */
.chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--r-chip);
  background: transparent; color: var(--text);
  font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.chip.is-active, .chip[aria-current="page"], .chip[aria-pressed="true"] {
  background: var(--rise-soft); border-color: var(--rise-line); color: var(--text); font-weight: var(--fw-semibold);
}
.chip-sm { height: 24px; padding: 0 9px; font-size: var(--fs-12); color: var(--muted); border-color: var(--border); }
.chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-chip);
  background: var(--border); color: var(--text);
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-semibold); line-height: 1;
}
.chip.is-active .chip-count, .chip[aria-current="page"] .chip-count { background: var(--rise); color: var(--on-rise); }

.lang { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.lang-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--lang, var(--muted));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
[data-theme="light"] .lang-dot { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px; border-radius: var(--r-chip);
  border: 1px solid var(--border-strong); background: transparent; color: var(--muted);
  font-size: var(--fs-12); font-weight: var(--fw-semibold); line-height: 1; white-space: nowrap;
}
.badge-neutral { background: var(--raised); color: var(--text); }
.badge-rise { background: var(--rise-soft); border-color: var(--rise-line); color: var(--rise-text); }
.badge-score { font-family: var(--font-mono); font-variant-numeric: tabular-nums; padding-left: 6px; margin-left: 2px; border-left: 1px solid var(--rise-line); }
.badge-new { background: var(--info-soft); border-color: transparent; color: var(--info); }
.badge-info { background: var(--info-soft); border-color: transparent; color: var(--info); }
.badge-warning { background: var(--warning-soft); border-color: transparent; color: var(--warning); }
.badge-danger { background: var(--danger-soft); border-color: transparent; color: var(--danger); }

/* ---------------------------------------------------------------------
   Tabs
   --------------------------------------------------------------------- */
.tabs {
  display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 12px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; background: transparent;
  color: var(--muted); font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none; white-space: nowrap;
}
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--text); border-bottom-color: var(--rise); font-weight: var(--fw-semibold); }

/* ---------------------------------------------------------------------
   Cards
   --------------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--sp-4); }
.card--flush { padding: 0; }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card__title { font-size: var(--fs-14); font-weight: var(--fw-semibold); }
.card__body { font-size: var(--fs-14); color: var(--muted); }

/* ---------------------------------------------------------------------
   Repo card
   --------------------------------------------------------------------- */
.repo-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.repo-card {
  container-type: inline-size;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.repo-card.is-leaving { opacity: 0; transform: translateX(12px) scale(0.985); pointer-events: none; transition-timing-function: var(--ease-in); }
.repo-card.is-entering { opacity: 0; transform: translateY(-4px); }
.repo-card__inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "lead body trend" "lead body actions";
  column-gap: var(--sp-3); row-gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
}
.repo-card__lead { grid-area: lead; display: flex; align-items: flex-start; gap: var(--sp-2); padding-top: 2px; }
.repo-card__rank {
  min-width: 22px; padding-top: 7px; text-align: right;
  font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--muted);
}
.repo-card__rank::before { content: "#"; color: var(--faint); font-weight: var(--fw-regular); }
.repo-card__body { grid-area: body; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.repo-card__title-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.repo-card__title { font-family: var(--font-mono); font-size: var(--fs-14); font-weight: var(--fw-regular); line-height: 1.4; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-link { text-decoration: none; color: var(--text); }
.repo-owner { color: var(--muted); }
.repo-name { font-weight: var(--fw-semibold); color: var(--text); }
.repo-card__desc { font-size: var(--fs-14); color: var(--muted); line-height: 1.45; }
.repo-card__why { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-13); color: var(--text); }
.repo-card__why .icon { color: var(--rise); margin-top: 2px; }
.repo-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-3); margin-top: 4px; font-size: var(--fs-12); color: var(--muted); }
.repo-card__meta .chip-sm { margin-left: -4px; }
.repo-card__meta .chip-sm + .chip-sm { margin-left: -6px; }
.meta-item { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.meta-item .num { color: var(--text); }
.repo-card__trend { grid-area: trend; justify-self: end; display: flex; align-items: center; gap: var(--sp-3); }
.repo-card__gain { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.gain { display: inline-flex; align-items: center; gap: 2px; color: var(--rise-text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-14); font-weight: var(--fw-semibold); white-space: nowrap; }
.gain-period { font-size: var(--fs-12); color: var(--muted); white-space: nowrap; }
.repo-card__actions { grid-area: actions; justify-self: end; align-self: end; display: flex; align-items: center; gap: 2px; }

.repo-card--expanded .repo-card__inner { padding: var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-6); row-gap: var(--sp-2); column-gap: var(--sp-4); }
.repo-card--expanded .repo-card__title { font-size: var(--fs-16); }
.repo-card--expanded .repo-card__desc { color: var(--text); font-size: var(--fs-14); }
.repo-card--expanded .repo-card__body { gap: 6px; }
.repo-card--expanded .gain { font-size: var(--fs-16); }
.repo-card--expanded .repo-card__rank { padding-top: 10px; }
.repo-card__stats { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--border); }
.stat-mini { display: grid; gap: 2px; }
.stat-mini dt { font-size: var(--fs-12); color: var(--muted); }
.stat-mini dd { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--fs-14); color: var(--rise-text); }
.stat-mini:last-child dd { color: var(--text); }
.stat-mini.is-current dt { color: var(--text); font-weight: var(--fw-semibold); }
.stat-mini.is-current dd { font-weight: var(--fw-semibold); }

@container (max-width: 560px) {
  .repo-card__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "lead body body" "trend trend actions";
    row-gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-2) var(--sp-2) var(--sp-3);
  }
  .repo-card--expanded .repo-card__inner { padding: var(--sp-4) var(--sp-2) var(--sp-2) var(--sp-4); }
  .repo-card__trend { justify-self: start; align-self: center; flex-direction: row-reverse; gap: var(--sp-2); }
  .repo-card__gain { flex-direction: row; align-items: baseline; gap: 6px; }
  .repo-card__lead { padding-top: 0; }
}
@container (max-width: 360px) {
  .repo-card__rank { display: none; }
  .repo-card__desc.od-truncate { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* ---------------------------------------------------------------------
   Topic card
   --------------------------------------------------------------------- */
.topic-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); min-width: 0;
}
.topic-card__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.topic-card__name { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.topic-card__name a { text-decoration: none; color: var(--text); }
.topic-card__slug { display: block; font-size: var(--fs-12); color: var(--muted); }
.topic-card__desc { font-size: var(--fs-14); color: var(--muted); }
.topic-card__reason { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-13); color: var(--text); }
.topic-card__reason .icon { color: var(--muted); }
.topic-card__stats { display: flex; flex-wrap: wrap; gap: 4px var(--sp-4); font-size: var(--fs-12); color: var(--muted); }
.topic-card__stats .num { color: var(--text); }
.delta-up .num, .delta-up { color: var(--rise-text); }
.delta-down .num, .delta-down { color: var(--muted); }
.topic-card__top {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--border); font-size: var(--fs-13); text-decoration: none; color: var(--text); min-width: 0;
}
.topic-card__top .muted { flex: none; font-size: var(--fs-12); }
.topic-card__top .mono { flex: 1 1 0; min-width: 0; }
.topic-card__top .gain { font-size: var(--fs-13); }

/* ---------------------------------------------------------------------
   Sponsor slot — deliberately unlike repo cards
   --------------------------------------------------------------------- */
.sponsor {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border: 1px dashed var(--border-strong); border-radius: var(--r-card); background: transparent;
}
.sponsor__media {
  flex: none; width: 64px; height: 64px; display: grid; place-items: center;
  border-radius: var(--r-control); background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.sponsor__body { display: grid; gap: 2px; min-width: 0; }
.sponsor__label { font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sponsor__text { font-size: var(--fs-13); color: var(--text); line-height: 1.45; }
.sponsor__text a { text-decoration: none; }
.sponsor__text strong { font-weight: var(--fw-semibold); }
.sponsor__attr { font-size: 11px; color: var(--muted); }
.sponsor--rail { align-items: flex-start; }

/* ---------------------------------------------------------------------
   Toasts
   --------------------------------------------------------------------- */
.toast-region {
  position: fixed; right: var(--sp-6); bottom: var(--sp-6); z-index: var(--z-toast);
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2);
  pointer-events: none; max-width: calc(100vw - 32px);
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--sp-3);
  width: max-content; max-width: 420px; min-height: 48px; padding: 8px 8px 8px 14px;
  background: var(--raised); color: var(--text); border-radius: var(--r-card);
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-14);
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(4px); transition-timing-function: var(--ease-in); transition-duration: var(--dur-fast); }
.toast__icon { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--info-soft); color: var(--info); }
.toast--success .toast__icon { background: var(--rise-soft); color: var(--rise-text); }
.toast--error .toast__icon { background: var(--danger-soft); color: var(--danger); }
.toast__msg { flex: 1 1 auto; min-width: 0; line-height: 1.4; }
.toast__action {
  flex: none; height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-control); background: transparent;
  color: var(--text); font-weight: var(--fw-semibold); font-size: var(--fs-13); text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center;
}
.toast__close {
  flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-control); background: transparent; color: var(--muted);
}

/* ---------------------------------------------------------------------
   Empty / error / skeleton
   --------------------------------------------------------------------- */
.empty-state, .error-state {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--sp-2);
  padding: var(--sp-12) var(--sp-6);
}
.empty-state--compact { padding: var(--sp-6) var(--sp-4); }
.empty-state__icon, .error-state__icon {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: var(--sp-2);
  background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.error-state__icon { background: var(--danger-soft); border-color: transparent; color: var(--danger); }
.empty-state__title, .error-state__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--text); }
.empty-state__body, .error-state__body { font-size: var(--fs-14); color: var(--muted); max-width: 44ch; }
.empty-state__actions, .error-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-3); }

.skeleton {
  display: block; position: relative; overflow: hidden;
  background: var(--skeleton-base); border-radius: 4px;
}
.skeleton::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%;
  background: var(--skeleton-shine); opacity: 0.7;
  transform: translateX(-110%);
  animation: up-shimmer 1.4s var(--ease-out) infinite;
}
@keyframes up-shimmer { to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .skeleton::after { display: none; animation: none; } }
.skeleton-text { height: 12px; width: 60%; }
.skeleton-text--sm { height: 10px; }
.skeleton-avatar { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.skeleton-pill { width: 56px; height: 18px; border-radius: var(--r-chip); }
.skeleton-pill--wide { width: 84px; }
.skeleton-spark { width: 88px; height: 28px; flex: none; border-radius: 4px; }
.skeleton-block { width: 100%; height: 120px; border-radius: var(--r-card); }
.repo-card-skeleton {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card);
}
.repo-card-skeleton__body { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
.repo-card-skeleton__meta { display: flex; gap: var(--sp-2); }
.repo-card-skeleton--expanded { padding: var(--sp-6); }
.repo-card-skeleton--expanded .skeleton-avatar { width: 40px; height: 40px; }
.repo-card-skeleton--expanded .skeleton-spark { width: 160px; height: 48px; }
@media (max-width: 479.98px) { .repo-card-skeleton .skeleton-spark { display: none; } }

/* ---------------------------------------------------------------------
   Avatar (initials, deterministic hue via --av-h)
   --------------------------------------------------------------------- */
.avatar {
  --av-size: 32px; --av-h: 200;
  display: inline-grid; place-items: center; flex: none;
  width: var(--av-size); height: var(--av-size);
  border-radius: 50%;
  background: hsl(var(--av-h) 32% 22%); color: hsl(var(--av-h) 70% 82%);
  font-family: var(--font-sans); font-weight: var(--fw-semibold);
  font-size: calc(var(--av-size) * 0.38); line-height: 1; letter-spacing: 0.02em;
  user-select: none;
  box-shadow: inset 0 0 0 1px hsl(var(--av-h) 40% 30%);
}
.avatar--org { border-radius: 22%; }
[data-theme="light"] .avatar { background: hsl(var(--av-h) 60% 91%); color: hsl(var(--av-h) 55% 26%); box-shadow: inset 0 0 0 1px hsl(var(--av-h) 40% 82%); }

/* ---------------------------------------------------------------------
   Charts
   --------------------------------------------------------------------- */
.sparkline { display: block; flex: none; color: var(--rise); overflow: visible; }
.star-chart { display: block; width: 100%; height: auto; color: var(--rise); overflow: visible; }
.chart-grid { stroke: var(--border); stroke-width: 1; }
.chart-axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-label { fill: var(--muted); font-family: var(--font-mono); font-size: 11px; }

/* ---------------------------------------------------------------------
   App shell
   --------------------------------------------------------------------- */
.app-shell { min-height: 100vh; background: var(--bg); }
.app-shell > *, .app-body > *, body > main, .container { min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: var(--topbar-h); background: var(--bg); border-bottom: 1px solid var(--border);
}
.topbar__inner {
  height: 100%; max-width: var(--container-wide); margin: 0 auto;
  display: flex; align-items: center; gap: var(--sp-4); padding: 0 var(--sp-4);
}
.topbar .logo { width: calc(var(--sidebar-w) - var(--sp-8)); }
.topbar__search { flex: 1 1 auto; max-width: 520px; }
.topbar__search .input { height: 34px; background: var(--surface); border-color: var(--border); }
.topbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-1); }
.topbar__search-btn { display: none; }
.topbar__bell { position: relative; }
.topbar__bell-dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--rise); box-shadow: 0 0 0 2px var(--bg);
}
.topbar__avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; margin-left: var(--sp-1); text-decoration: none; }

.app-body {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w);
  align-items: start;
  max-width: var(--container-wide); margin: 0 auto;
}
.app-body--no-rail { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.app-body:not(:has(> .rail)) { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }

.sidebar {
  grid-row: 1 / span 2;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  border-right: 1px solid var(--border);
}
.sidebar__nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-control);
  color: var(--muted); font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none;
}
.nav-item[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--border); }
.nav-item[aria-current="page"] .icon { color: var(--rise); }
.nav-item__count {
  margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: var(--r-chip);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rise-soft); color: var(--rise-text); font-size: 11px; font-weight: var(--fw-semibold);
}
.sidebar__section { margin-top: var(--sp-6); }
.sidebar__heading { display: flex; align-items: center; justify-content: space-between; padding: 0 var(--sp-1) 0 var(--sp-3); margin-bottom: var(--sp-1); }
.sidebar__label { font-size: var(--fs-12); font-weight: var(--fw-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.sidebar__empty { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-13); color: var(--muted); }
.topic-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.topic-link {
  display: flex; align-items: center; gap: var(--sp-2);
  height: 32px; padding: 0 var(--sp-2) 0 var(--sp-3); border-radius: var(--r-control);
  color: var(--muted); font-size: var(--fs-14); text-decoration: none;
}
.topic-link__hash { font-family: var(--font-mono); color: var(--faint); width: 10px; flex: none; }
.topic-link__name { flex: 1 1 0; min-width: 0; }
.topic-link .chip-count { margin-left: auto; }
.topic-link[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: var(--fw-semibold); box-shadow: inset 0 0 0 1px var(--border); }
.topic-link[aria-current="page"] .topic-link__hash { color: var(--rise); }
.topic-list--sheet .topic-link { height: 48px; font-size: var(--fs-16); padding: 0 var(--sp-3); }
.sidebar__more {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  padding: 6px var(--sp-3); border-radius: var(--r-control);
  font-size: var(--fs-13); color: var(--muted); text-decoration: none;
}
.sidebar__foot { margin-top: auto; padding: var(--sp-4) var(--sp-3) 0; }
.sidebar__foot a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--muted); text-decoration: none; }

.main { min-width: 0; padding: var(--sp-6) var(--sp-8) var(--sp-16); }
.main:focus { outline: none; }
.rail {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6) var(--sp-6) var(--sp-8) 0;
}

.topic-chipbar { display: none; }
.bottom-nav { display: none; }

@media (max-width: 1279.98px) {
  .main { padding: var(--sp-6) var(--sp-6) var(--sp-12); }
}
@media (max-width: 1023.98px) {
  .app-body { grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
  .rail { grid-column: 2; position: static; max-height: none; overflow: visible; padding: 0 var(--sp-6) var(--sp-12); }
  .rail--hide-md { display: none; }
  .main:has(+ .rail) { padding-bottom: var(--sp-8); }
}
@media (max-width: 767.98px) {
  .topbar__inner { padding: 0 var(--sp-2) 0 var(--sp-4); gap: var(--sp-2); }
  .topbar .logo { width: auto; }
  .topbar__search { display: none; }
  .topbar__search-btn { display: inline-flex; }
  .app-body, .app-body--no-rail { display: block; }
  .sidebar { display: none; }
  .main { padding: var(--sp-4) var(--sp-4) var(--sp-6); }
  .rail { padding: 0 var(--sp-4) var(--sp-6); }
  .app-shell { padding-bottom: calc(var(--bottomnav-h) + env(safe-area-inset-bottom)); }

  .topic-chipbar {
    display: block; position: sticky; top: var(--topbar-h); z-index: var(--z-sticky);
    background: var(--bg); border-bottom: 1px solid var(--border);
  }
  .topic-chipbar__inner { display: flex; align-items: center; padding: var(--sp-2) 0; }
  .topic-chipbar__all { flex: none; margin-left: var(--sp-4); background: var(--raised); }
  .topic-chipbar__rail { --od-rail-pad: 8px; flex: 1 1 0; min-width: 0; padding-right: var(--sp-4); contain: inline-size; }
  .topic-chipbar .chip { height: 36px; }
  .topic-chipbar .chip::after { content: ""; position: absolute; inset: -4px 0; }

  .bottom-nav {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
    background: var(--bg); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav__inner { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--bottomnav-h); }
  .bottom-nav__item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    color: var(--muted); font-size: var(--fs-12); font-weight: var(--fw-medium); text-decoration: none; min-height: 44px;
  }
  .bottom-nav__item[aria-current="page"] { color: var(--text); font-weight: var(--fw-semibold); }
  .bottom-nav__item[aria-current="page"] .icon { color: var(--rise); }
  .bottom-nav__item[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 32%; right: 32%; height: 2px; border-radius: 0 0 2px 2px; background: var(--rise);
  }

  /* touch targets */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .btn-icon { width: 44px; height: 44px; }
  .btn-icon.btn-sm { width: 40px; height: 40px; min-height: 40px; }
  .btn-sm::after, .btn-icon.btn-sm::after { content: ""; position: absolute; inset: -4px -2px; }
  .chip-sm { height: 28px; }
  .tab { height: 44px; }
  .segmented__item { height: 38px; }
  .toast__action, .toast__close { height: 40px; min-width: 40px; }
}

/* ---------------------------------------------------------------------
   Sheet (bottom sheet on mobile, centered panel on >=768)
   --------------------------------------------------------------------- */
.sheet-root { position: fixed; inset: 0; z-index: var(--z-sheet); }
.sheet-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-base) var(--ease-in); }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  max-height: 85vh; display: flex; flex-direction: column;
  background: var(--surface); border-top: 1px solid var(--border-strong);
  border-radius: var(--r-card) var(--r-card) 0 0;
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(100%);
  transition: transform var(--dur-base) var(--ease-in);
}
.sheet:focus { outline: none; }
.sheet-root.is-open .sheet-scrim { opacity: 1; transition-timing-function: var(--ease-out); }
.sheet-root.is-open .sheet { transform: translateY(0); transition: transform var(--dur-slow) var(--ease-out); }
.sheet__handle { width: 36px; height: 4px; border-radius: var(--r-chip); background: var(--border-strong); margin: var(--sp-2) auto 0; flex: none; }
.sheet__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-6); flex: none; }
.sheet__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.sheet__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--sp-3) var(--sp-4); }
.sheet__footer { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-3) 0; border-top: 1px solid var(--border); margin-top: var(--sp-3); }
.sheet-nav { display: grid; gap: 2px; }
.sheet-nav a {
  display: flex; align-items: center; gap: var(--sp-3); min-height: 48px; padding: 0 var(--sp-3);
  border-radius: var(--r-control); color: var(--text); font-size: var(--fs-16); text-decoration: none;
}
.sheet-nav a .icon { color: var(--muted); }
@media (min-width: 768px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    width: min(480px, calc(100vw - 32px)); max-height: min(640px, 85vh);
    border: 1px solid var(--border-strong); border-radius: var(--r-card);
    transform: translate(-50%, -47%); opacity: 0;
    transition: transform var(--dur-fast) var(--ease-in), opacity var(--dur-fast) var(--ease-in);
  }
  .sheet-root.is-open .sheet { transform: translate(-50%, -50%); opacity: 1; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
  .sheet__handle { display: none; }
  .sheet__header { padding-top: var(--sp-3); }
}

/* ---------------------------------------------------------------------
   Modal (confirm)
   --------------------------------------------------------------------- */
.modal-root { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--sp-4); }
.modal-scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity var(--dur-fast) var(--ease-in); }
.modal {
  position: relative; width: min(440px, 100%);
  background: var(--raised); border: 1px solid var(--border-strong); border-radius: var(--r-card);
  padding: var(--sp-6);
  opacity: 0; transform: translateY(8px) scale(0.98);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in);
}
.modal-root.is-open .modal-scrim { opacity: 1; transition-timing-function: var(--ease-out); transition-duration: var(--dur-base); }
.modal-root.is-open .modal { opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.modal__title { font-size: var(--fs-20); font-weight: var(--fw-semibold); }
.modal__body { margin: var(--sp-2) 0 var(--sp-6); font-size: var(--fs-14); color: var(--muted); }
.modal__body p + p { margin-top: var(--sp-2); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

/* Logged-out sign-in prompt */
.modal--signin { display: grid; gap: var(--sp-3); padding: var(--sp-8) var(--sp-6) var(--sp-6); max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; }
.modal--signin .modal__title { padding-right: var(--sp-8); font-size: var(--fs-20); line-height: var(--lh-heading); }
.modal__close { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.signin-prompt__mark {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
}
.signin-prompt__body { font-size: var(--fs-14); color: var(--muted); margin-bottom: var(--sp-2); }
.signin-prompt__or { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-12); color: var(--muted); }
.signin-prompt__or::before, .signin-prompt__or::after { content: ""; flex: 1 1 0; height: 1px; background: var(--border); }
.signin-prompt__digest { display: grid; gap: var(--sp-3); padding-top: var(--sp-1); }
.signin-prompt__done {
  display: flex; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-control); background: var(--surface);
  font-size: var(--fs-14); color: var(--text);
}
.signin-prompt__done .icon { color: var(--rise-text); margin-top: 2px; }
.signin-prompt__done:focus { outline: none; }
.modal--signin.is-inline { opacity: 1; transform: none; position: relative; }
@media (max-width: 479.98px) {
  .modal__actions { flex-direction: column-reverse; }
  .modal__actions .btn { width: 100%; height: 44px; }
}

/* ---------------------------------------------------------------------
   Public site header / footer
   --------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-nav);
  height: 64px; background: var(--bg); border-bottom: 1px solid var(--border);
}
.site-header__inner { height: 100%; display: flex; align-items: center; gap: var(--sp-8); }
.site-header__nav { display: flex; align-items: center; gap: var(--sp-1); }
.site-header__nav a {
  display: inline-flex; align-items: center; height: 36px; padding: 0 var(--sp-3); border-radius: var(--r-control);
  color: var(--muted); font-size: var(--fs-14); font-weight: var(--fw-medium); text-decoration: none;
}
.site-header__nav a[aria-current="page"] { color: var(--text); }
.site-header__actions { margin-left: auto; display: flex; align-items: center; gap: var(--sp-2); }
.site-header__menu { display: none; }
.site-header__cta { height: 36px; padding: 0 14px; font-size: var(--fs-14); }
@media (max-width: 767.98px) {
  .site-header { height: 56px; }
  .site-header__inner { gap: var(--sp-3); padding-right: var(--sp-2); }
  .site-header__nav { display: none; }
  .site-header__menu { display: inline-flex; }
  .site-header__actions { gap: 0; }
  .site-header__cta { margin: 0 var(--sp-1); }
}

.site-footer { margin-top: var(--sp-16); padding: var(--sp-12) 0 var(--sp-6); border-top: 1px solid var(--border); font-size: var(--fs-14); }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sp-12); }
.site-footer__brand { display: grid; gap: var(--sp-3); align-content: start; max-width: 380px; }
.site-footer__brand > p { font-size: var(--fs-14); }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6); }
.site-footer__title { font-size: var(--fs-13); font-weight: var(--fw-semibold); margin-bottom: var(--sp-3); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.site-footer ul a { color: var(--muted); text-decoration: none; font-size: var(--fs-14); }
.site-footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-12); padding-top: var(--sp-6); border-top: 1px solid var(--border);
  font-size: var(--fs-13); color: var(--muted);
}
.site-footer__legal a { color: var(--muted); }
.newsletter { display: grid; gap: 6px; margin-top: var(--sp-2); }
.newsletter__row { display: flex; gap: var(--sp-2); }
.newsletter__row .input { flex: 1 1 0; min-width: 0; }
@media (max-width: 1023.98px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
}
@media (max-width: 767.98px) {
  .site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer ul a { display: inline-flex; min-height: 32px; align-items: center; }
}

/* ---------------------------------------------------------------------
   Toast placement on mobile (above bottom nav when present)
   --------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .toast-region { left: var(--sp-4); right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); align-items: center; max-width: none; }
  html:has(.bottom-nav) .toast-region { bottom: calc(var(--bottomnav-h) + var(--sp-3) + env(safe-area-inset-bottom)); }
  .toast { width: 100%; max-width: 480px; }
}

/* ---------------------------------------------------------------------
   Hover (pointer devices only). Hover never makes text grayer.
   --------------------------------------------------------------------- */
@media (hover: hover) {
  .btn-primary:hover { background: var(--rise-strong); }
  .btn-secondary:hover { background: var(--hover); border-color: var(--faint); }
  .btn-outline:hover { background: var(--hover); border-color: var(--faint); }
  .btn-ghost:hover { background: var(--hover); color: var(--text); }
  .btn-danger:hover { filter: brightness(1.08); }
  .chip:hover { background: var(--hover); border-color: var(--faint); }
  .chip-sm:hover { color: var(--text); }
  .chip.is-active:hover, .chip[aria-current="page"]:hover { background: var(--rise-soft); border-color: var(--rise); }
  .tab:hover { color: var(--text); }
  .segmented__item:hover { color: var(--text); }
  .nav-item:hover, .topic-link:hover, .sidebar__more:hover, .sheet-nav a:hover { background: var(--hover); color: var(--text); }
  .sidebar__foot a:hover, .section-link:hover, .site-footer ul a:hover, .site-footer__legal a:hover { color: var(--text); }
  .site-header__nav a:hover { color: var(--text); background: var(--hover); }
  .repo-card:hover { border-color: var(--border-strong); }
  .repo-link:hover .repo-name { text-decoration: underline; text-underline-offset: 3px; }
  .topic-card:hover { border-color: var(--border-strong); }
  .topic-card__name a:hover, .topic-card__top:hover .mono, .sponsor__text a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .input:hover:not(:focus):not(:disabled), .select:hover:not(:focus):not(:disabled), .textarea:hover:not(:focus):not(:disabled) { border-color: var(--faint); }
  .radio-card:hover { border-color: var(--faint); }
  .toast__action:hover, .toast__close:hover { background: var(--hover); color: var(--text); }
  .list-item--link:hover { background: var(--hover); }
  .topbar__avatar:hover .avatar { box-shadow: inset 0 0 0 1px var(--text); }
}