/* ==========================================================================
   SHARED COMPONENTS
   --------------------------------------------------------------------------
   Copied verbatim from the page-specific stylesheets. The design ships one
   CSS file per page because each page owned its own components; a
   database-backed shop reuses them where the original file is never loaded —
   a <select> in the checkout, an empty state on a 404, a spec table on the
   product page, a comment thread under an article.

   theme.css is the last stylesheet on every page, so a page that also loads
   the original file gets identical declarations twice and looks the same.
   ========================================================================== */

/* ---- from category.css ---- */
.select {
  position: relative;
  display: flex;
  align-items: center;
}
.select__input {
  appearance: none;
  min-block-size: var(--btn-height);
  padding-inline: var(--space-4) var(--space-9);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--btn-radius);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: var(--transition-colors);
}
.select__input:hover {
  border-color: var(--border-brand);
}
.select__caret {
  position: absolute;
  inset-inline-end: var(--space-3);
  color: var(--fg-muted);
  font-size: var(--icon-md);
  pointer-events: none;
}
.product-card--out .product-card__media {
  opacity: 0.45;
  filter: grayscale(0.6);
}
.product-card--out .product-card__cart:disabled {
  background: var(--bg-inset);
  color: var(--fg-subtle);
  cursor: not-allowed;
}
.product-card__flag {
  position: absolute;
  z-index: var(--z-raised);
  inset-block-start: var(--space-4);
  inset-inline-start: var(--space-4);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-pill);
  font-size: var(--text-2xs);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-none);
  pointer-events: none;
}
.product-card__flag .icon {
  font-size: var(--icon-sm);
}
.product-card__flag--new {
  background: var(--bg-accent-subtle);
  color: var(--accent-text);
}
.product-card__flag--best {
  background: var(--brand);
  color: var(--fg-on-brand);
}
.product-card__flag--out {
  background: var(--bg-inset);
  color: var(--fg-muted);
}
.results-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-5);
  padding: var(--space-16) var(--space-6);
  border: var(--border-hairline) dashed var(--border-strong);
  border-radius: var(--card-radius);
  text-align: center;
}
.results-empty[hidden] {
  display: none;
}
.results-empty b {
  color: var(--fg-default);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
}
.results-empty span:not(.icon-tile) {
  max-inline-size: 44ch;
  color: var(--fg-muted);
  font-size: var(--text-md);
}
.results-empty .btn {
  margin-block-start: var(--space-2);
}

/* ---- from account.css ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-14) var(--space-6);
  border: var(--border-hairline) solid var(--card-border);
  border-radius: var(--card-radius);
  background: var(--card-bg);
  text-align: center;
}
.empty-state[hidden] {
  display: none;
}
.empty-state__mark {
  display: grid;
  place-items: center;
  inline-size: var(--space-20);
  block-size: var(--space-20);
  border-radius: var(--radius-circle);
  background: var(--bg-brand-subtle);
  color: var(--brand);
}
.empty-state b {
  color: var(--fg-default);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
}
.empty-state p {
  max-inline-size: 46ch;
  color: var(--fg-muted);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-2);
}
@media (prefers-contrast: more) {
.account-head,
  .account-nav,
  .order-card,
  .order-thumb,
  .addr-card,
  .stat,
  .empty-state,
  .filter-chip,
  .ticket-card,
  .dash-row,
  .dash-action,
  .thread__bubble,
  .profile-fact {
    border-color: var(--fg-muted);
  }
}

/* ---- from product.css ---- */
.tabs__list {
  display: flex;
  gap: var(--gap-inline-sm);
  /* Room for the hover lift and the focus ring, which would otherwise be
     clipped by the horizontal scroll container. */
  padding-block: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__list::-webkit-scrollbar {
  display: none;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  flex: none;
  min-block-size: var(--btn-height);
  padding-inline: var(--space-5);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-muted);
  font-size: var(--btn-font-size);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: var(--transition-colors), var(--transition-transform);
}
.tab:hover {
  border-color: var(--border-brand);
  color: var(--brand-text);
  transform: translateY(-2px);
}
.tab .icon {
  color: var(--fg-subtle);
  transition: var(--transition-colors);
}
.tab:hover .icon {
  color: var(--brand);
}
.tab.is-active,
.tab.is-active:hover {
  border-color: transparent;
  background: var(--gradient-brand-vivid);
  color: var(--fg-on-brand);
  transform: none;
}
.tab.is-active .icon {
  color: inherit;
}
.tabs__panel {
  margin-block-start: var(--space-5);
  padding: var(--space-8);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--card-radius);
  background: var(--bg-surface);
}
.tabs__panel[hidden] {
  display: none;
}
.prose {
  max-inline-size: 62ch;
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.prose > * + * {
  margin-block-start: var(--space-5);
}
.prose h3 {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
}
.prose__quote {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  margin-inline: 0;
  padding: var(--space-5);
  border-inline-start: var(--border-heavy) solid var(--brand);
  border-radius: var(--radius-md);
  background: var(--bg-brand-subtle);
  color: var(--fg-default);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
.prose__quote .icon {
  flex: none;
  margin-block-start: 0.15em;
  color: var(--brand);
}
.prose__list {
  display: grid;
  gap: var(--space-2-5);
  margin: 0;
  padding: 0;
}
.prose__list li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--text-md);
}
.prose__list li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.6em;
  inset-inline-start: 0;
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--brand);
}
.spec-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
}
.spec-table tr + tr {
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}
.spec-table th,
.spec-table td {
  padding: var(--space-3) var(--space-2);
  text-align: start;
  vertical-align: top;
}
.spec-table th {
  inline-size: 32%;
  color: var(--fg-muted);
  font-weight: var(--weight-medium);
}
.spec-table td {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}
@media (max-width: 800px) {
.tabs__panel {
    padding: var(--space-5);
  }
}
@media (max-width: 540px) {
.tabs__panel {
    padding: var(--space-4);
  }
.prose {
    font-size: var(--text-md);
  }
}
@media (prefers-reduced-motion: reduce) {
.gallery__thumb:hover,
  .option:hover,
  .tab:hover {
    transform: none;
  }
}
@media (prefers-contrast: more) {
.gallery__frame,
  .gallery__thumb,
  .tabs__panel,
  .review,
  .review-summary,
  .bundle-item,
  .buybox__inner {
    border-width: var(--border-thick);
  }
}
@media (forced-colors: active) {
.gallery__frame,
  .tabs__panel,
  .review,
  .review-summary,
  .bundle-item,
  .buybox__inner,
  .buybar {
    border: 1px solid CanvasText;
  }
.gallery__thumb.is-active,
  .option.is-selected,
  .chip.is-active,
  .tab.is-active {
    border: var(--border-thick) solid Highlight;
  }
}
@media print {
.buybar,
  .lightbox,
  .gallery__thumbs,
  .tabs__list,
  .buybox__countdown {
    display: none !important;
  }
.tabs__panel[hidden] {
    display: block !important;
  }
}

/* ---- from legal.css ---- */
.doc-table-wrap {
  margin-block-start: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-xl);
  overflow: auto;
  overscroll-behavior-inline: contain;
}
.doc-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-md);
  text-align: start;
}
.doc-table caption {
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  font-size: var(--text-sm);
  text-align: start;
}
.doc-table th,
.doc-table td {
  padding: var(--space-4) var(--space-5);
  border-block-end: var(--border-hairline) solid var(--border-subtle);
  text-align: start;
  vertical-align: top;
}
.doc-table thead th {
  background: var(--bg-inset);
  color: var(--fg-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}
.doc-table tbody th {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}
.doc-table td {
  color: var(--fg-muted);
  line-height: var(--leading-normal);
}
.doc-table tbody tr:last-child th,
.doc-table tbody tr:last-child td {
  border-block-end: 0;
}
.doc-table tbody tr:hover th,
.doc-table tbody tr:hover td {
  background: var(--bg-surface-2);
}
.doc-table .is-key {
  color: var(--brand-text);
  font-weight: var(--weight-extrabold);
  white-space: nowrap;
}
@media (max-width: 540px) {
.doc-table th,
  .doc-table td { padding: var(--space-3) var(--space-4); }
}
@media (prefers-contrast: more) {
.doc-toc,
  .doc-highlight,
  .doc-step,
  .doc-note,
  .doc-check li,
  .doc-related__card,
  .doc-table-wrap {
    border-color: var(--fg-muted);
  }
}

/* ---- from blog.css ---- */
.topic-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  flex: none;
  padding: var(--space-3) var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-body);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  transition: var(--transition-colors), var(--transition-elevate);
}
.topic-chip .icon {
  color: var(--brand);
  font-size: var(--icon-md);
  transition: var(--transition-colors);
}
.topic-chip:hover {
  transform: translateY(-2px);
  border-color: var(--border-brand);
  color: var(--brand-text);
}
.topic-chip.is-active {
  border-color: transparent;
  background: var(--brand);
  color: var(--fg-on-brand);
}
.topic-chip.is-active .icon {
  color: inherit;
}
.topic-chip__count {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-inset);
  color: var(--fg-muted);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.topic-chip.is-active .topic-chip__count {
  background: oklch(0 0 0 / 0.22);
  color: inherit;
}
.post-topic {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.post-topic .icon {
  color: inherit;
  font-size: var(--icon-sm);
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-grid-lg);
  margin-block-start: var(--space-6);
}
.blog-card[hidden] {
  display: none;
}
.blog-card__media {
  position: relative;
}
.blog-card__topic {
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  /* Reads against a photograph of unknown brightness, so it carries its own
     dark plate rather than a tint of the page surface. */
  background: oklch(0 0 0 / 0.62);
  color: var(--fg-on-brand);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.blog-card__topic .icon {
  font-size: var(--icon-sm);
}
.blog-card__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: var(--space-2-5) var(--space-5) 0;
  color: var(--fg-muted);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}
.blog-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-md);
  padding: var(--space-3) var(--space-5) 0;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
}
.blog-card__meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
}
.blog-card__meta .icon {
  font-size: var(--icon-sm);
}
.blog-card__media .ph {
  block-size: 100%;
}
.blog-card__media .ph__frame {
  min-block-size: 100%;
  border-radius: 0;
  padding: var(--space-4);
}
.blog-empty {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  margin-block-start: var(--space-10);
  padding: var(--space-12) var(--space-6);
  border: var(--border-thin) dashed var(--border-strong);
  border-radius: var(--radius-3xl);
  background: var(--bg-surface);
  color: var(--fg-muted);
  text-align: center;
}
.blog-empty[hidden] {
  display: none;
}
.blog-empty b {
  color: var(--fg-default);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
}
.blog-empty span {
  max-inline-size: 46ch;
}
.blog-empty .btn {
  margin-block-start: var(--space-2);
}
.side-card {
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
}
.side-card__title {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  margin-block-end: var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-extrabold);
}
.side-card__title .icon {
  color: var(--brand);
  font-size: var(--icon-md);
}
.topic-list {
  display: grid;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
}
.topic-list a {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-lg);
  color: var(--fg-body);
  font-size: var(--text-md);
  transition: var(--transition-colors);
}
.topic-list a:hover,
.topic-list a.is-active {
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.topic-list a .icon {
  color: var(--brand);
  font-size: var(--icon-md);
}
.topic-list b {
  margin-inline-start: auto;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.topic-list a:hover b,
.topic-list a.is-active b {
  color: inherit;
}
.mini-post {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  padding-block: var(--space-3-5);
}
.mini-post + .mini-post {
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}
.mini-post__rank {
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--space-9);
  block-size: var(--space-9);
  border-radius: var(--radius-md);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}
.mini-post__body {
  min-inline-size: 0;
}
.mini-post__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--fg-default);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  transition: var(--transition-colors);
}
.mini-post__title:hover {
  color: var(--brand-text);
}
.mini-post__meta {
  margin-block-start: var(--space-1-5);
  color: var(--fg-subtle);
  font-size: var(--text-xs);
}
.tag {
  padding: var(--space-1-5) var(--space-3);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface-2);
  color: var(--fg-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  transition: var(--transition-colors);
}
.tag:hover {
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.read-progress {
  position: fixed;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--space-1);
  background: transparent;
  pointer-events: none;
}
.read-progress__fill {
  display: block;
  inline-size: 0;
  block-size: 100%;
  /* Physical transform-origin: the bar grows from the inline-start edge,
     which the writing direction already mirrors for us via `inline-size`. */
  background: var(--gradient-brand-vivid);
  transition: inline-size var(--duration-fast) var(--ease-out);
}
.post-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  margin-block-start: var(--space-8);
}
.post-head__title {
  max-inline-size: 24ch;
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.post-head__lede {
  max-inline-size: 62ch;
  color: var(--fg-muted);
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
}
.post-head__byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-lg);
  inline-size: 100%;
  padding-block: var(--space-5);
  border-block: var(--border-hairline) solid var(--border-subtle);
}
.post-head__author {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-md);
}
.post-head__author .ph--avatar {
  inline-size: var(--space-12);
  block-size: var(--space-12);
}
.post-head__author b {
  display: block;
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.post-head__author span {
  display: block;
  color: var(--fg-subtle);
  font-size: var(--text-xs);
}
.post-head__facts {
  margin-inline-start: auto;
}
.post-cover {
  inline-size: 100%;
  margin-block-start: var(--space-8);
}
.post-cover img,
.post-cover .ph__frame {
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-3xl);
  object-fit: cover;
}
.post-cover figcaption {
  margin-block-start: var(--space-3);
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  text-align: center;
}
.post-body {
  max-inline-size: 70ch;
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}
.post-body > * + * {
  margin-block-start: var(--space-5);
}
.post-body h2 {
  margin-block-start: var(--space-12);
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  /* Clears the sticky header when the contents list jumps here. */
  scroll-margin-block-start: calc(var(--header-height-compact) + var(--space-8));
}
.post-body h3 {
  margin-block-start: var(--space-8);
  font-size: var(--text-2xl);
  font-weight: var(--weight-extrabold);
}
.post-body h2 + p,
.post-body h3 + p {
  margin-block-start: var(--space-4);
}
.post-body > p:first-of-type {
  color: var(--fg-default);
  font-size: var(--text-xl);
  line-height: var(--leading-relaxed);
}
.post-body a:not(.btn) {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: var(--border-thin);
}
.post-body a:not(.btn):hover {
  text-decoration-thickness: var(--border-thick);
}
.post-body strong,
.post-body b {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}
.post-body ul,
.post-body ol {
  display: grid;
  gap: var(--space-3);
  padding: 0;
  list-style: none;
}
.post-body li {
  position: relative;
  padding-inline-start: var(--space-7);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.post-body ul > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: var(--space-1);
  inline-size: var(--space-2);
  block-size: var(--space-2);
  border-radius: var(--radius-circle);
  background: var(--brand);
}
.post-body ol {
  counter-reset: steps;
}
.post-body ol > li::before {
  counter-increment: steps;
  content: counter(steps, persian);
  position: absolute;
  inset-block-start: 0.05em;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  border-radius: var(--radius-circle);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-black);
}
.post-body hr {
  block-size: var(--border-hairline);
  margin-block: var(--space-10);
  border: 0;
  background: var(--border-subtle);
}
.post-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-block-start: var(--space-10);
}
.post-tags > span {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}
.post-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-sm);
}
.post-share > span {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
}
.share-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--space-10);
  block-size: var(--space-10);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-circle);
  background: var(--bg-surface);
  color: var(--fg-body);
  font-size: var(--icon-md);
  transition: var(--transition-colors), var(--transition-elevate);
}
.share-btn:hover {
  transform: translateY(-3px);
  border-color: var(--border-brand);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
}
.comment-list {
  display: grid;
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  list-style: none;
  padding: 0;
}
.comment {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  padding: var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
}
.comment--reply {
  margin-inline-start: var(--space-10);
  border-inline-start: var(--border-thick) solid var(--border-brand);
  background: var(--bg-surface-2);
}
.comment__body {
  min-inline-size: 0;
}
.comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-inline-md);
}
.comment__name {
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.comment__badge {
  padding: var(--space-0-5) var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--bg-brand-subtle);
  color: var(--brand-text);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
}
.comment__date {
  color: var(--fg-subtle);
  font-size: var(--text-xs);
}
.comment__text {
  margin-block-start: var(--space-2);
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
}
.comment-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-2xl);
  background: var(--bg-surface);
}
.comment-form__title {
  grid-column: 1 / -1;
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
}
.comment-form__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
}
.comment-form__note {
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  max-inline-size: 46ch;
}
@media (max-width: 1240px) {
.post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1150px) {
.post-head__title { font-size: var(--text-5xl); }
}
@media (max-width: 800px) {
.post-grid { grid-template-columns: minmax(0, 1fr); }
.post-head__title { font-size: var(--text-4xl); }
.post-head__lede { font-size: var(--text-xl); }
.post-head__facts { margin-inline-start: 0; }
.post-body { font-size: var(--text-md); }
.post-body > p:first-of-type { font-size: var(--text-lg); }
.post-body h2 { font-size: var(--text-2xl); }
.post-body h3 { font-size: var(--text-xl); }
.comment-form { grid-template-columns: minmax(0, 1fr); }
.comment--reply { margin-inline-start: var(--space-5); }
}
@media (max-width: 540px) {
.post-cover img,
  .post-cover .ph__frame { border-radius: var(--radius-2xl); }
.comment { padding: var(--space-4); }
.comment--reply { margin-inline-start: var(--space-3); }
}
@media (prefers-reduced-motion: reduce) {
.read-progress { display: none; }
}
@media (prefers-contrast: more) {
.topic-chip,
  .side-card,
  .post-callout,
  .post-nav__link,
  .comment,
  .post-table {
    border-color: var(--fg-muted);
  }
.blog-card__topic {
    background: oklch(0 0 0 / 0.85);
    backdrop-filter: none;
  }
}
@media print {
.read-progress,
  .blog-search,
  .topic-rail,
  .blog-toolbar__sort,
  .blog-more,
  .blog-side,
  .post-aside,
  .post-share,
  .post-vote,
  .post-nav,
  .comment-form,
  .subscribe {
    display: none;
  }
.post-feature,
  .side-card,
  .post-callout,
  .comment {
    border: 1px solid #000;
  }
.post-body {
    max-inline-size: none;
  }
.blog-card__excerpt,
  .mini-post__title,
  .post-nav__link b {
    -webkit-line-clamp: none;
    line-clamp: none;
    display: block;
    overflow: visible;
  }
}

/* ---- from forms.css ---- */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5) var(--gap-grid);
}
.form-grid[hidden] {
  display: none;
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-inline-size: 0;
}
.field--full {
  grid-column: 1 / -1;
}
.field__label {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--fg-default);
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
}
.field__req {
  color: var(--danger-text);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.field__optional {
  color: var(--fg-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
}
.field__control {
  inline-size: 100%;
  min-block-size: var(--btn-height);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-default);
  font-size: var(--text-lg);
  transition: var(--transition-colors);
}
.field__control::placeholder {
  color: var(--fg-subtle);
}
.field__control:hover {
  border-color: var(--border-strong);
}
.field__control:focus-visible {
  border-color: var(--brand);
}
.field__control--ltr {
  direction: ltr;
  text-align: start;
}
.field__hint {
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.field__error {
  display: none;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--danger-text);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}
.field__error .icon {
  flex: none;
  font-size: var(--icon-sm);
}
.field--check {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--bg-surface-2);
}
.field--check input {
  flex: none;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin-block-start: 0.15em;
  accent-color: var(--brand);
}
.field--check span {
  color: var(--fg-body);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.field--check a {
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hairline) solid var(--border-subtle);
}
.form-foot__note {
  flex: 1 1 16rem;
  color: var(--fg-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}
.field__control[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-subtle);
}
.field__control[aria-invalid="true"] ~ .field__hint {
  display: none;
}
.field__control[aria-invalid="true"] ~ .field__error {
  display: flex;
}
.field--check input[aria-invalid="true"] ~ span .field__error {
  display: flex;
  margin-block-start: var(--space-2);
}
.form-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--gap-inline-md);
  margin-block-end: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border: var(--border-hairline) solid var(--danger);
  border-radius: var(--radius-lg);
  background: var(--danger-subtle);
  color: var(--danger-text);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
}
.form-alert[hidden] {
  display: none;
}
.form-alert .icon {
  flex: none;
  margin-block-start: 0.15em;
  font-size: var(--icon-md);
}
.form-alert b {
  font-weight: var(--weight-bold);
}
.form-alert a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.form-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-12) var(--space-8);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--card-radius);
  background: var(--bg-brand-subtle);
  text-align: center;
}
.form-success[hidden] {
  display: none;
}
.form-success .icon-tile {
  inline-size: var(--space-16);
  block-size: var(--space-16);
  border-radius: var(--radius-circle);
  background: var(--brand);
  color: var(--fg-on-brand);
  font-size: var(--icon-xl);
}
.form-success__title {
  color: var(--fg-default);
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
}
.form-success__text {
  max-inline-size: 48ch;
  color: var(--fg-body);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}
.form-success__ref {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-2) var(--space-5);
  border: var(--border-hairline) solid var(--border-brand);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--brand-text);
  font-size: var(--text-lg);
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
}
.form-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-2);
}
@media (max-width: 800px) {
.form-grid { grid-template-columns: minmax(0, 1fr); }
.form-foot .btn { flex: 1 1 100%; }
.form-success { padding: var(--space-8) var(--space-5); }
}
@media (prefers-contrast: more) {
.field__control,
  .field--check {
    border-color: var(--fg-muted);
  }
}

/* ---- from page.css ---- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-6);
  padding: var(--space-3) var(--space-5);
  border: var(--border-hairline) solid var(--border-subtle);
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  color: var(--fg-muted);
  font-size: var(--text-sm);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-inline-sm);
  list-style: none;
}
.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--gap-inline-sm);
}
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  inline-size: var(--space-1-5);
  block-size: var(--space-1-5);
  border-inline-start: var(--border-thin) solid var(--border-strong);
  border-block-end: var(--border-thin) solid var(--border-strong);
  rotate: 45deg;
}
.breadcrumb__item a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--fg-muted);
  transition: var(--transition-colors);
}
.breadcrumb__item a:hover {
  color: var(--brand-text);
}
.breadcrumb__item [aria-current] {
  color: var(--fg-default);
  font-weight: var(--weight-bold);
}
.breadcrumb__back {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-xs);
  color: var(--brand-text);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}
.breadcrumb__back:hover {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.page-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: var(--space-12);
  margin-block-start: var(--space-6);
  padding: var(--space-14) var(--space-12);
  border-radius: var(--radius-4xl);
  background: var(--gradient-brand);
  color: var(--fg-on-brand);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--glow-brand);
  pointer-events: none;
}
.page-hero > * {
  position: relative;
}
.page-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-inline-size: 0;
}
.page-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-inline-sm);
  padding: var(--space-1-5) var(--space-4);
  border: var(--border-hairline) solid var(--border-inverse);
  border-radius: var(--radius-pill);
  background: oklch(0 0 0 / 0.16);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
}
.page-hero__title {
  color: inherit;
  font-size: var(--text-6xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
}
.page-hero__lede {
  max-inline-size: 46ch;
  color: inherit;
  opacity: 0.92;
  font-size: var(--text-2xl);
  line-height: var(--leading-normal);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-inline-md);
  margin-block-start: var(--space-2);
}
.page-hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  inline-size: 100%;
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-6);
  border-block-start: var(--border-hairline) solid var(--border-inverse);
}
.page-hero__fact b {
  display: block;
  font-size: var(--text-4xl);
  font-weight: var(--weight-black);
  line-height: var(--leading-none);
}
.page-hero__fact span {
  display: block;
  margin-block-start: var(--space-1-5);
  opacity: 0.82;
  font-size: var(--text-sm);
}
.page-hero__media {
  min-inline-size: 0;
}
@media (max-width: 1240px) {
.page-hero {
    padding: var(--space-12) var(--space-8);
    gap: var(--space-8);
  }
}
@media (max-width: 1150px) {
.page-hero { grid-template-columns: minmax(0, 1fr); }
.page-hero__media { order: -1; }
}
@media (max-width: 800px) {
.page-hero {
    padding: var(--space-8) var(--space-6);
    border-radius: var(--radius-3xl);
  }
.page-hero__title { font-size: var(--text-5xl); }
.page-hero__lede { font-size: var(--text-xl); }
.page-hero__actions .btn,
  .cta-band__actions .btn { flex: 1 1 100%; }
}
@media (max-width: 540px) {
.page-hero__facts {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
.page-hero__fact {
    display: flex;
    align-items: baseline;
    gap: var(--gap-inline-md);
  }
.page-hero__fact span { margin-block-start: 0; }
.breadcrumb { border-radius: var(--radius-xl); }
.breadcrumb__back { display: none; }
}
@media print {
.page-nav,
  .page-hero__actions,
  .cta-band__actions,
  .breadcrumb__back {
    display: none;
  }
.page-hero,
  .cta-band {
    background: none;
    color: #000;
    border: 1px solid #000;
  }
}