/* studkz-net — plain, mobile-first CSS in the studkz-com / studkz-ai look.

   Flat UI (flat-ui/flat-ui.css, loaded first) owns buttons, circle buttons
   and badges and the --ui-* tokens. This file holds only site layout and
   content styles: it may position Flat UI components but must not restyle
   them.

   The look is an academic notebook for students: warm paper, ink text,
   Literata (a book serif) for titles and reading, Onest (a friendly
   grotesk) for everything else, the brand green with a highlighter yellow
   as accents. Cards are two nested surfaces (a tinted rim around a white
   core). Motion animates transform, opacity and shadows, eases out with a
   spring-like curve, and stops under prefers-reduced-motion. */

/* Fonts: self-hosted variable subsets (the CSP allows fonts only from
   'self'); the unicode ranges load a subset only when the page uses it.
   Both families cover Kazakh. Licences: fonts/OFL-*.txt. */
@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/literata-v40-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/literata-v40-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/literata-v40-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Literata";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/literata-v40-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-v11-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-v11-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-v11-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/onest-v11-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Paper and ink, as on studkz-com and studkz-ai */
  --background: #f8f5ec;
  --surface: #ffffff;
  --text: #17221a;
  --muted: #5a6457;
  --faint: #8b9286;
  --link: #3d7a12;
  --highlight: #fbe27a;
  --mint: #ebf5df;
  --notice: #fff6dc;
  --field: #fcfaf4;
  --danger-soft: #fdecea;
  --hairline: rgba(23, 34, 26, 0.08);
  --hairline-strong: rgba(23, 34, 26, 0.16);
  --rim: rgba(23, 34, 26, 0.045);
  --rim-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Shape: the rim is the outer surface of a card, the core sits inside
     it with a radius smaller by the rim, so the curves stay concentric. */
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;
  --rim-width: 6px;

  --shadow-soft: 0 1px 2px rgba(23, 34, 26, 0.04), 0 14px 32px -18px rgba(23, 34, 26, 0.16);
  --shadow-lift: 0 2px 6px rgba(23, 34, 26, 0.05), 0 28px 48px -22px rgba(23, 34, 26, 0.24);
  --shadow-float: 0 1px 2px rgba(23, 34, 26, 0.05), 0 24px 64px -20px rgba(23, 34, 26, 0.28);
  --card-shadow: 0 0 0 1px var(--hairline), var(--rim-highlight), var(--shadow-soft);
  --card-shadow-lift: 0 0 0 1px var(--hairline), var(--rim-highlight), var(--shadow-lift);

  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Literata", "Iowan Old Style", "PT Serif", Georgia, serif;

  --gutter: 16px;
  --page: 1160px;
  --measure: 46rem;
  --section-space: 3rem;

  /* Site names, mapped onto the palette above. */
  --bg: var(--background);
  --line: var(--hairline-strong);
  --line-strong: rgba(23, 34, 26, 0.26);
  --surface-soft: var(--field);
  --soft: var(--field);
  --ink: var(--text);
  --primary: var(--ui-brand);
  --primary-dark: var(--ui-brand-active);
  --accent: var(--link);
  --accent-soft: var(--mint);
  --accent-strong: var(--text);
  --success: #3d7a12;
  --warn: var(--ui-warning);
  --danger: var(--ui-danger);
  --page-pad: var(--gutter);
  --content-max: var(--page);
  --reading-max: var(--measure);
  --radius: var(--radius-sm);
  --shadow: var(--card-shadow);
  --focus-ring: 0 0 0 1px var(--ui-brand), 0 0 0 4px rgba(114, 192, 44, 0.18);
}

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

html {
  overflow-x: clip;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

/* The body's background spreads to the whole canvas, so the paper layers
   below (fixed, z-index -1) paint over it and under all content. */
body {
  display: flex;
  flex-direction: column;
  min-width: 320px;
  min-height: 100dvh;
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--text);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Paper: two soft washes of brand green and highlighter yellow, then a
   faint grain. Both layers are fixed and never take clicks. */
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

body::before {
  background:
    radial-gradient(42rem 28rem at 8% -6%, rgba(114, 192, 44, 0.13), transparent 70%),
    radial-gradient(36rem 24rem at 100% 0%, rgba(251, 226, 122, 0.22), transparent 72%);
}

body::after {
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.3s var(--ease-out), text-decoration-color 0.3s var(--ease-out);
}

a:hover {
  color: var(--ui-brand-active);
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--ui-brand);
  outline-offset: 2px;
}

::selection {
  background: var(--highlight);
  color: var(--text);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.container,
.narrow-container,
.test-container {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.narrow-container,
.test-container {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: var(--gutter);
  z-index: 40;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  font-weight: 600;
}

.skip-link:focus {
  top: 0.5rem;
}

/* Header: a floating island detached from the top edge, with the logo on
   the left; the section links (from 640px), search and the menu button on
   the right. It scrolls with the page. The menu panel is a dropdown that
   floats over the page under the island's right edge, so opening it moves
   nothing. */
.site-header {
  position: relative;
  z-index: 30;
  padding: calc(0.75rem + env(safe-area-inset-top)) var(--gutter) 0;
}

.site-header > .container {
  max-width: calc(var(--page) - 2 * var(--gutter));
  padding-inline: 0;
}

/* The logo and the menu button are end circles of one size, each concentric
   with the island's rounded cap: one inset on top, bottom and the outer
   side, wide enough to hold a focus ring (3px + 2px offset). */
.header-row {
  --header-inset: 6px;
  --header-end-size: 44px; /* flat-ui's default .button height */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  border-radius: calc(var(--header-end-size) / 2 + var(--header-inset));
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 0 0 1px var(--hairline), var(--rim-highlight), var(--shadow-soft);
}

/* As specific as `.site-header > .container` and after it, so its
   padding-inline: 0 does not cancel the inset. */
.site-header > .header-row {
  padding: var(--header-inset);
}

/* The brand gives way first, so the controls never leave the screen. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  color: var(--text);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand:hover {
  color: var(--text);
}

.brand-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--header-end-size);
  height: var(--header-end-size);
  border-radius: 50%;
  background: var(--ui-brand);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(23, 34, 26, 0.12);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
}

.brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.brand-tld {
  color: var(--faint);
  font-weight: 500;
}

.header-controls {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.125rem;
  margin-left: auto;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-right: 0.25rem;
}

.header-nav a {
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.header-nav a:hover {
  background: var(--mint);
  color: var(--ui-brand-active);
}

.header-nav a[aria-current="page"] {
  color: var(--ui-brand-active);
}

@media (max-width: 639.98px) {
  .header-nav {
    display: none;
  }
}

/* The menu icon's three lines fold into a cross while the panel is open:
   the outer lines meet in the middle and turn, the middle one fades. */
[data-menu-toggle] [data-line] {
  transform-box: view-box;
  transform-origin: 12px 12px;
}

[data-menu-toggle][aria-expanded="true"] [data-line="top"] {
  transform: rotate(45deg) translateY(5px);
}

[data-menu-toggle][aria-expanded="true"] [data-line="middle"] {
  opacity: 0;
  transform: scaleX(0.2);
}

[data-menu-toggle][aria-expanded="true"] [data-line="bottom"] {
  transform: rotate(-45deg) translateY(-5px);
}

/* Menu panel: the sections, then the account, then the AI chat link, top
   to bottom in DOM and tab order. It is a card under the island, out of
   the page flow: the nav spans the island's width 8px below it and lets
   clicks through, the card inside it takes them. A long menu scrolls
   inside the card. */
.site-menu {
  position: absolute;
  top: 100%;
  right: var(--gutter);
  left: var(--gutter);
  width: auto;
  max-width: calc(var(--page) - 2 * var(--gutter));
  margin: 0 auto;
  padding: 0.5rem 0 0;
  pointer-events: none;
}

.site-menu[hidden] {
  display: none;
}

.site-menu-inner {
  display: grid;
  gap: 0.5rem;
  max-height: calc(100vh - 6rem);
  max-height: calc(100dvh - 6rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.5rem;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: var(--surface) padding-box;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-float);
  pointer-events: auto;
  transform-origin: top right;
}

.menu-links {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-links a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.menu-links a[hidden] {
  display: none;
}

.menu-links a:hover {
  background: var(--mint);
  color: var(--ui-brand-active);
}

.menu-main a[aria-current="page"] {
  color: var(--ui-brand-active);
}

.menu-group {
  display: grid;
  gap: 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--hairline-strong);
}

.menu-label {
  margin: 0;
  padding: 0 0.75rem;
  color: var(--faint);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account-user {
  display: grid;
}

.account-login[hidden],
.account-user[hidden] {
  display: none;
}

@media (min-width: 640px) {
  .site-menu-inner {
    max-width: 22rem;
    margin-left: auto;
  }
}

#main {
  flex: 1 0 auto;
  min-height: 60vh;
  padding-bottom: var(--section-space);
}

/* Page heading: the eyebrow pill, the serif title with a hand-drawn green
   stroke under it, and the lead. */
.hero,
.page-hero {
  background: transparent;
}

.hero-inner,
.page-hero > .container {
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}

.hero-inner > *,
.page-hero > .container > * {
  max-width: 48rem;
}

/* Eyebrow: a small pill over a page heading that names the section of
   the site the page belongs to. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  margin: 0;
  padding: 0.3rem 0.75rem 0.3rem 0.6rem;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-soft);
  color: var(--muted);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--ui-brand);
  box-shadow: 0 0 0 3px rgba(114, 192, 44, 0.18);
}

.card-kicker {
  display: block;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start;
  margin: 0 0 10px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.unavailable .eyebrow::before {
  background: var(--ui-attention);
  box-shadow: 0 0 0 3px rgba(246, 196, 83, 0.25);
}

.hero h1,
.page-hero h1,
.article-card h1,
.test-card h1,
.article-submit-card h1,
.status-card h1,
.profile-head h1,
.content-questions-head h1 {
  margin: 1rem 0 0.75rem;
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.025em;
}

.hero h1::after,
.page-hero h1::after,
.article-submit-card h1::after,
.profile-head h1::after,
.content-questions-head h1::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 0.6rem;
  margin-top: 0.6rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 10'%3E%3Cpath d='M2 6.5c8-4 14-4 22-1s14 3 22-1 14-3.5 24 0' fill='none' stroke='%2372c02c' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center / contain;
}

.hero p,
.page-hero p,
.article-submit-intro,
.status-card p {
  color: var(--muted);
}

.hero p,
.page-hero p {
  max-width: 38rem;
  margin: 0;
  font-size: 1.05rem;
}

/* Search form: the field and its button sit together in one island, its
   core rounded 5px wider than the 10px Flat UI button inside so the
   corners stay concentric. */
.search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.25rem;
  max-width: 720px;
  margin: 1.5rem 0 0;
  padding: 0 5px 0 0;
  border: var(--rim-width) solid var(--rim);
  border-radius: calc(15px + var(--rim-width));
  background: var(--surface) padding-box;
  box-shadow: var(--card-shadow);
  transition: box-shadow 0.4s var(--ease-out);
}

.search-box:focus-within {
  box-shadow: 0 0 0 1px var(--ui-brand), 0 0 0 5px rgba(114, 192, 44, 0.16), var(--shadow-lift);
}

.search-box input {
  width: 100%;
  min-width: 0;
  height: 56px;
  padding: 0 0.5rem 0 1rem;
  border: 0;
  border-radius: 15px;
  background: transparent;
  color: var(--text);
  font-size: 1.05rem;
}

.search-box input::placeholder {
  color: var(--faint);
}

.search-box input:focus,
.search-box input:focus-visible {
  outline: none;
}

.form-field input,
.form-field textarea {
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--text);
  transition: box-shadow 0.3s var(--ease-out), background-color 0.3s var(--ease-out);
}

.form-field input:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.section {
  padding: 1.5rem 0 2.5rem;
}

.section-soft {
  background: transparent;
}

/* A dashed rule over the section, lined up with the content. */
.section-soft > .container::before {
  content: "";
  display: block;
  margin-bottom: 1.75rem;
  border-top: 1px dashed var(--hairline-strong);
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px 20px;
  margin-bottom: 18px;
}

.section-heading > :first-child,
.section-heading > h2 {
  margin-right: auto;
}

.section-heading h2 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: clamp(1.35rem, 5vw, 1.8rem);
}

.text-link,
.card-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 40px;
  color: var(--link);
  font-weight: 600;
  text-align: right;
}

.card-grid,
.category-grid,
.category-list-grid,
.listing,
.question-list,
.user-article-list,
.search-results {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.875rem;
}

/* Cards: a tinted rim (the border) around a white core (the padding box),
   with a hairline ring and a soft shadow; on hover a card lifts and its
   stronger shadow comes in. */
.content-card,
.list-card,
.category-detail-card,
.category-card,
.user-article-card,
.question-card,
.aside-box,
.sidebar,
.stack-list,
.quiz-panel,
.test-card,
.article-submit-card,
.status-card {
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: var(--surface) padding-box;
  box-shadow: var(--card-shadow);
}

.content-card,
.list-card,
.category-detail-card,
.user-article-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.1rem 1.25rem;
  transition: box-shadow 0.35s var(--ease-out), transform 0.6s var(--ease-spring);
}

a.content-card,
a.list-card,
a.content-card:hover,
a.list-card:hover {
  color: var(--text);
  text-decoration: none;
}

.content-card:hover,
.list-card:hover,
.category-detail-card:hover,
.user-article-card:hover {
  box-shadow: var(--card-shadow-lift);
  transform: translateY(-3px);
}

.content-card:focus-visible,
.list-card:focus-visible {
  box-shadow: var(--card-shadow-lift);
}

.content-card h3,
.list-card h2,
.category-detail-card h2,
.user-article-card h2 {
  margin: 0 0 0.75rem;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.3;
}

.content-card h3 a,
.list-card h2 a,
.category-detail-card h2 a {
  color: var(--text);
  text-decoration: none;
}

.content-card .card-link,
.list-card .card-link,
.category-detail-card .card-link {
  align-self: flex-end;
  margin-top: auto;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.content-card:hover .card-link,
.list-card:hover .card-link {
  color: var(--ui-brand-active);
}

.category-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 0.9rem 1.25rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease-out), transform 0.6s var(--ease-spring);
}

.category-card:hover {
  box-shadow: var(--card-shadow-lift);
  color: var(--ui-brand-active);
  transform: translateY(-3px);
}

.category-card small,
.sidebar small,
.user-article-card time {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 500;
}

.count-badge {
  display: inline-flex;
  min-width: 32px;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  padding: 4px 8px;
  border: 1px solid var(--ui-taupe);
  border-radius: 999px;
  background: var(--surface);
  color: #111111;
  font-size: 12px;
  font-weight: 700;
}

.category-description,
.user-article-card p {
  color: var(--muted);
}

.split-grid,
.content-layout,
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.stack-list {
  overflow: hidden;
}

.stack-list > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 12px 1rem;
  border-bottom: 1px dashed var(--hairline-strong);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.stack-list > a:last-child {
  border-bottom: 0;
}

.stack-list > a:hover,
.stack-list > a:focus-visible {
  background: var(--mint);
  color: var(--ui-brand-active);
}

.quiz-panel {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 1.25rem 1.4rem;
}

.quiz-panel h2,
.quiz-panel p {
  align-self: stretch;
}

.quiz-panel h2 {
  margin: 0;
}

.quiz-panel p {
  color: var(--muted);
}

.content-layout > div,
.article-layout > * {
  min-width: 0;
}

.sidebar {
  overflow: hidden;
}

.sidebar h2,
.aside-box h2 {
  margin: 0;
  font-size: 1.15rem;
}

.sidebar h2 {
  padding: 1rem 1.1rem;
  border-bottom: 1px dashed var(--hairline-strong);
}

.sidebar nav a,
.related-list a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 10px 1.1rem;
  border-bottom: 1px dashed var(--hairline-strong);
  color: var(--text);
  text-decoration: none;
}

.sidebar nav a:last-child,
.related-list a:last-child {
  border-bottom: 0;
}

.sidebar nav a:hover,
.related-list a:hover {
  background: var(--mint);
  color: var(--ui-brand-active);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.pagination .current {
  pointer-events: none;
}

.pagination-gap {
  display: inline-flex;
  min-width: 24px;
  justify-content: center;
  color: var(--muted);
}

.article-shell,
.article-submit-shell,
.status-page {
  padding: 28px 0 56px;
}

.article-card {
  --document-export-bottom: calc(12px + env(safe-area-inset-bottom));
  min-width: 0;
  max-width: var(--reading-max);
  margin-inline: auto;
}

.article-layout .article-card {
  margin-inline: 0;
}

.article-card h1,
.test-card h1 {
  margin-bottom: 28px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  color: var(--muted);
  font-size: 0.86rem;
  scrollbar-width: none;
  white-space: nowrap;
}

.breadcrumbs::-webkit-scrollbar {
  display: none;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  color: var(--muted);
  text-decoration: none;
}

.breadcrumbs a:hover {
  color: var(--ui-brand-active);
}

.article-body,
.plan-body {
  color: var(--text);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* The reading surface is a card: a tinted rim around a white sheet. */
.article-reading-surface {
  padding: clamp(18px, 4vw, 36px);
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: #ffffff;
  background-clip: padding-box;
  box-shadow: var(--shadow);
}

.article-body.article-reading-surface {
  padding-bottom: calc(clamp(18px, 4vw, 36px) + var(--document-export-height, 66px) + var(--document-export-bottom));
}

.article-copy-status {
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: right;
}

.article-copy-status[hidden] {
  display: none;
}

.article-body--text,
.plan-body {
  white-space: pre-wrap;
}

.article-body h2,
.article-body h3,
.article-body h4 {
  margin: 1.6em 0 0.6em;
  line-height: 1.25;
}

.article-body h2 {
  font-size: 1.35em;
}

.article-body h3 {
  font-size: 1.15em;
}

.article-body p {
  margin: 0 0 1.2em;
}

.article-body a {
  color: var(--accent);
}

.article-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.article-body th,
.article-body td {
  padding: 10px;
  border: 1px solid var(--line);
  font-family: var(--font);
  font-size: 0.95rem;
  line-height: 1.5;
}

.article-body blockquote {
  margin: 1.4em 0;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--ui-brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--mint);
}

.content-metadata {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px 20px;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--hairline-strong);
  color: var(--muted);
  font-size: 0.86rem;
  text-align: right;
}

.content-metadata p {
  margin: 0;
}

.content-metadata-divider {
  margin: 28px 0 0;
  border: 0;
  border-top: 1px dashed var(--hairline-strong);
}

.content-metadata-divider + .content-metadata {
  margin-top: 0;
  border-top: 0;
}

.document-export {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 24px;
}

.document-export--fixed {
  --document-export-boundary-offset: 0px;
  --document-export-inline-center: 50%;
  --document-export-inline-max: calc(100vw - 24px);
  position: fixed;
  left: var(--document-export-inline-center);
  bottom: calc(var(--document-export-bottom) + var(--document-export-boundary-offset));
  z-index: 30;
  max-width: min(calc(100vw - 24px), var(--document-export-inline-max));
  margin: 0;
  transform: translateX(-50%);
}

.document-export-status {
  max-width: min(420px, calc(100vw - 48px));
  margin: 10px 0 0;
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

/* The docked button floats without a panel, so the status carries its own surface over the text. */
.document-export--fixed .document-export-status {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-float);
}

/* The download button and "AI арқылы жасау" side by side, same height, one row even on a phone. */
.document-export-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.document-ai-button .button-label {
  white-space: nowrap;
}

/* Dimmed while idle so the docked buttons sit lighter over the text; full strength when used. */
.document-export-button:not(:disabled),
.document-ai-button:not(:disabled) {
  opacity: 0.8;
}

.document-export-button:not(:disabled):is(:hover, :focus-visible, :active),
.document-ai-button:not(:disabled):is(:hover, :focus-visible, :active) {
  opacity: 1;
}

.document-export-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.document-export-links[hidden] {
  display: none;
}

.document-subscription-dialog {
  width: min(calc(100% - 32px), 460px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  overflow-y: auto;
  padding: 1.5rem;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: var(--surface) padding-box;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-float);
}

.document-subscription-dialog::backdrop {
  background: rgba(23, 34, 26, 0.42);
}

.document-subscription-dialog-close {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0.4;
}

.document-subscription-dialog-close:hover,
.document-subscription-dialog-close:focus-visible {
  opacity: 0.8;
}

.document-subscription-dialog p {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.document-subscription-dialog-close + p {
  margin-top: 12px;
}

.document-subscription-dialog-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.article-aside {
  display: grid;
  gap: 14px;
}

.aside-box {
  padding: 1.1rem 1.25rem;
}

.aside-box .eyebrow + h2 {
  margin-top: 0.75rem;
}

.related-list {
  display: grid;
  margin-top: 8px;
}

.related-list a {
  padding-inline: 0;
}

.question-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 0.75rem 1.1rem;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.35s var(--ease-out), transform 0.6s var(--ease-spring);
}

.question-card:hover {
  box-shadow: var(--card-shadow-lift);
  color: var(--ui-brand-active);
  transform: translateY(-3px);
}

.question-number {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  background: var(--mint);
  color: var(--link);
  font-weight: 700;
}

.test-card,
.article-submit-card,
.status-card {
  padding: 1.25rem 1.4rem;
}

.answer-form fieldset {
  display: grid;
  gap: 10px;
  padding: 0;
  border: 0;
}

.answer-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 0.85rem 1rem;
  border-radius: var(--radius-md);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  cursor: pointer;
  transition: background-color 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.answer-option:hover {
  background: var(--surface);
}

.answer-option:has(input:checked) {
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(114, 192, 44, 0.55);
}

.answer-option.correct,
.answer-option.correct:has(input:checked) {
  background: var(--mint);
  box-shadow: inset 0 0 0 2px var(--ui-brand);
}

.answer-option.incorrect,
.answer-option.incorrect:has(input:checked) {
  background: var(--danger-soft);
  box-shadow: inset 0 0 0 2px var(--ui-danger);
}

.answer-option input {
  margin-top: 5px;
  accent-color: var(--ui-brand);
}

.answer-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.answer-indicator,
.form-error,
.field-error {
  font-size: 0.88rem;
  font-weight: 700;
}

.answer-indicator.correct { color: var(--success); }
.answer-indicator.incorrect,
.form-error,
.field-error { color: var(--danger); }

.answer-result {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
}

.answer-result[hidden] {
  display: none;
}

.answer-result.loading {
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline);
  color: var(--muted);
}

.answer-form[aria-busy="true"] .answer-option {
  cursor: progress;
  opacity: 0.7;
}

.test-actions,
.article-submit-actions,
.status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.article-submit-card {
  max-width: var(--reading-max);
  margin-inline: auto;
}

.article-submit-intro {
  margin: 12px 0 24px;
}

.article-submit-form {
  display: grid;
  gap: 20px;
}

.form-field {
  display: grid;
  gap: 7px;
}

.form-field label {
  font-weight: 600;
}

.form-field input,
.form-field textarea {
  padding: 11px 13px;
}

.form-field textarea {
  min-height: 240px;
  line-height: 1.6;
  resize: vertical;
}

.form-field [aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--ui-danger);
}

.field-error {
  margin: 0;
}

/* Notices: alerts and empty states, on a sheet of graph paper. */
.form-alert,
.form-success,
.empty-state {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-lg);
}

.form-alert {
  background: var(--danger-soft);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.22);
}

.form-success {
  background: var(--mint);
  box-shadow: 0 0 0 1px rgba(114, 192, 44, 0.35);
  color: var(--success);
  font-weight: 600;
}

.form-success p {
  margin: 0;
}

.empty-state {
  margin: 0;
  background:
    linear-gradient(var(--notice), rgba(255, 246, 220, 0.7)),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(23, 34, 26, 0.05) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(23, 34, 26, 0.05) 23px 24px);
  background-blend-mode: multiply;
  box-shadow: 0 0 0 1px rgba(214, 170, 52, 0.22);
  color: var(--muted);
}

.user-article-card time {
  display: block;
  margin-bottom: 6px;
}

.user-article-card p {
  margin: 0;
  overflow-wrap: anywhere;
}

.profile-page {
  padding-block: 28px 56px;
}

.profile-head {
  max-width: 720px;
  margin-bottom: 24px;
}

.profile-head .card-kicker {
  margin-bottom: 0;
}

.profile-head p,
.profile-muted {
  color: var(--muted);
}

.profile-head p {
  margin: 0;
}

.profile-layout {
  display: grid;
  gap: 16px;
}

.profile-card {
  display: grid;
  align-content: start;
  gap: 24px;
  min-width: 0;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: var(--surface) padding-box;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--card-shadow);
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.profile-avatar {
  display: grid;
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  overflow: hidden;
  place-items: center;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
}

.profile-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-avatar img[hidden],
.profile-avatar [hidden],
.profile-inline-value[hidden],
.profile-inline-form[hidden] {
  display: none;
}

.profile-summary-text {
  min-width: 0;
}

.profile-summary-text h2 {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 1.45rem;
  line-height: 1.2;
}

.profile-summary-text p {
  margin: 5px 0 0;
  overflow-wrap: anywhere;
  color: var(--muted);
}

.profile-balance-section {
  display: grid;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px dashed var(--hairline-strong);
}

.profile-balance-section h2 {
  margin: 4px 0 0;
  font-size: 1.2rem;
}

.profile-balances {
  display: grid;
  gap: 12px;
  margin: 0;
}

.profile-balances > div {
  display: grid;
  gap: 5px;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline);
}

.profile-balances dt {
  color: var(--muted);
  font-weight: 700;
}

.profile-balances dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.profile-balances dd strong {
  color: var(--primary-dark);
  font-size: 1.35rem;
}

.profile-details {
  display: grid;
  margin: 0;
  border-top: 1px dashed var(--hairline-strong);
}

.profile-detail-row {
  display: grid;
  gap: 6px;
  padding-block: 14px;
  border-bottom: 1px dashed var(--hairline-strong);
}

.profile-detail-row dt {
  color: var(--muted);
  font-weight: 700;
}

.profile-detail-row dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

.profile-inline-value {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
}

.profile-edit-button {
  margin-left: auto;
}

.profile-inline-form {
  display: grid;
  gap: 10px;
}

.profile-inline-input {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--text);
  padding: 9px 12px;
  font: inherit;
  font-weight: 500;
}

.profile-inline-input:focus-visible {
  outline: none;
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.profile-inline-input[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px var(--ui-danger);
}

.profile-inline-actions,
.profile-actions,
.profile-subscription-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.profile-field-status {
  margin: 7px 0 0;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.4;
}

.profile-field-status.is-success {
  color: var(--primary-dark);
}

.profile-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 28px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline-strong);
  padding: 4px 10px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
}

.profile-status-badge > span {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--muted);
}

.profile-status-badge.is-active {
  background: var(--mint);
  box-shadow: 0 0 0 1px rgba(114, 192, 44, 0.35);
  color: var(--primary-dark);
}

.profile-status-badge.is-active > span {
  background: var(--primary);
}

.profile-subscription-card h2 {
  margin: 6px 0 0;
  font-size: 1.35rem;
}

.profile-subscriptions {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.profile-subscriptions li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--radius-md);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline);
  padding: 0.75rem 1rem;
}

.profile-muted {
  margin: 0;
}

.profile-subscription-actions {
  align-self: end;
  margin-top: auto;
}

.profile-noscript {
  margin: 16px 0 0;
  border-radius: var(--radius-lg);
  background: var(--notice);
  box-shadow: 0 0 0 1px rgba(214, 170, 52, 0.22);
  padding: 0.75rem 1rem;
  color: var(--muted);
}

@media (min-width: 768px) {
  .profile-page {
    padding-block: 40px 72px;
  }

  .profile-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr);
    align-items: start;
    gap: 20px;
  }

  .profile-card {
    padding: 1.4rem 1.6rem;
  }

  .profile-detail-row {
    grid-template-columns: minmax(145px, 0.36fr) minmax(0, 1fr);
    align-items: start;
    gap: 16px;
  }

  .profile-balances {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profile-inline-form {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }
}

.status-page {
  display: grid;
  min-height: 65vh;
  place-items: center;
  padding-inline: var(--page-pad);
}

.status-card {
  width: min(100%, 660px);
}

.status-code {
  display: block;
  color: var(--ui-brand);
  font-family: var(--font-serif);
  font-size: 4rem;
  font-weight: 700;
  line-height: 1;
}

.status-card h1 {
  margin-top: 16px;
}


/* Footer: a dashed rule lined up with the content, like the header
   island; the brand, the sections and the legal links over the copyright. */
.site-footer {
  padding: 0 var(--gutter);
  color: var(--muted);
  font-size: 0.9rem;
}

.site-footer > .container {
  max-width: calc(var(--page) - 2 * var(--gutter));
  padding-inline: 0;
}

.footer-row {
  padding-top: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
  border-top: 1px dashed var(--hairline-strong);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
}

.footer-group {
  min-width: 0;
}

.footer-brand-group {
  max-width: 36rem;
}

.footer-brand {
  font-size: 1.1rem;
}

.footer-description {
  max-width: 32rem;
  margin: 0.4rem 0 0;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

.footer-heading {
  margin: 0 0 0.4rem;
  color: var(--faint);
  font-family: var(--font);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0 0 0 -0.5rem;
  padding: 0;
  list-style: none;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 0.5rem;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}

.footer-links a:hover {
  background: var(--mint);
  color: var(--ui-brand-active);
}

.copyright {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
}

/* The net extras next to Flat UI: the export button's own icon. */
.document-export-icon {
  display: block;
  width: var(--button-icon-size, 18px);
  height: var(--button-icon-size, 18px);
  max-width: none;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (min-width: 560px) {
  .search-box {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .card-grid,
  .category-grid,
  .category-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: 24px;
    --section-space: 5rem;
  }

  .hero-inner,
  .page-hero > .container {
    padding-top: 3rem;
    padding-bottom: 1rem;
  }

  .section {
    padding: 2rem 0 3.5rem;
  }

  .split-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.8fr);
  }

  .content-layout,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: 30px;
  }

  .sidebar,
  .article-aside {
    position: sticky;
    top: 1.5rem;
  }

  .article-shell,
  .article-submit-shell,
  .status-page {
    padding-top: 40px;
    padding-bottom: 72px;
  }

  .test-card,
  .article-submit-card,
  .status-card {
    padding: 1.6rem 2rem;
  }

  .article-card {
    --document-export-bottom: calc(20px + env(safe-area-inset-bottom));
  }

  .footer-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 2rem;
  }
}

.content-question-teaser {
  display: grid;
  gap: 16px;
  margin: 24px 0 32px;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--mint), rgba(251, 226, 122, 0.35));
  box-shadow: 0 0 0 1px var(--hairline);
}

.content-question-teaser h2,
.content-question-teaser p {
  margin: 0;
}

.content-question-teaser h2 {
  margin-bottom: 6px;
  font-size: 1.25rem;
}

.content-question-teaser p,
.content-questions-head p,
.content-question-help,
.content-question-panel-head p,
.content-question-answer-meta {
  color: var(--muted);
}

.content-question-teaser-actions,
.content-question-form-actions,
.content-question-archive-actions,
.content-question-login > div {
  display: flex;
  justify-content: flex-end;
}

.content-questions-page {
  display: grid;
  gap: 28px;
}

.content-questions-back {
  justify-self: start;
}

.content-questions-head h1,
.content-questions-head p,
.content-question-panel h2,
.content-question-panel-head p,
.content-question-archive h2 {
  margin-top: 0;
}

.content-questions-head p,
.content-question-panel-head p {
  margin-bottom: 0;
}

.content-question-panel,
.content-question-answer {
  padding: 1.25rem 1.4rem;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-xl);
  background: var(--surface) padding-box;
  box-shadow: var(--card-shadow);
}

.content-question-panel-head {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}

.content-question-panel-head h2 {
  margin-bottom: 0;
}

.content-question-form {
  display: grid;
  gap: 10px;
}

.content-question-form label {
  font-weight: 700;
}

.content-question-form select,
.content-question-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  color: var(--text);
  font: inherit;
}

.content-question-form textarea {
  min-height: 112px;
  resize: vertical;
}

.content-question-form select:focus-visible,
.content-question-form textarea:focus-visible {
  outline: none;
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.content-question-help,
.content-question-status {
  margin: 0;
  font-size: 0.9rem;
}

.content-question-status:not(:empty) {
  padding-top: 4px;
  color: var(--danger);
  font-weight: 700;
}

.content-question-status[data-tone="success"],
.content-question-form[aria-busy="true"] .content-question-status:not(:empty) {
  color: var(--success);
}

.content-question-live-answer {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--hairline-strong);
}

.content-question-live-answer h3 {
  margin-top: 0;
}

.content-question-loading {
  display: flex;
  gap: 5px;
  margin-top: 14px;
}

.content-question-loading[hidden] {
  display: none;
}

.content-question-loading span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}

.content-question-answer-list {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.content-question-answer-list[hidden] {
  display: none;
}

.content-question-answer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  margin-bottom: 12px;
  font-size: 0.85rem;
}

.content-question-answer-question {
  margin-bottom: 12px;
}

.content-question-answer-question summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
  overflow-wrap: anywhere;
}

.content-question-answer-question summary::-webkit-details-marker {
  display: none;
}

.content-question-answer-text {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.65;
}

.content-question-answer-text > :first-child {
  margin-top: 0;
}

.content-question-answer-text > :last-child {
  margin-bottom: 0;
}

.content-question-answer-text table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

.content-question-archive {
  display: grid;
  gap: 14px;
}

.content-question-archive h2 {
  margin-bottom: 0;
}

.content-question-private-archive {
  padding-top: 24px;
  border-top: 1px dashed var(--hairline-strong);
}

.content-question-login {
  display: grid;
  gap: 14px;
}

.content-question-login > div {
  justify-content: center;
}

.content-question-login p {
  margin: 0;
}

@media (min-width: 640px) {
  .content-question-teaser {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 20px;
  }

  .content-question-panel-head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
  }
}

/* Detail-page engagement */
.content-engagement {
  position: relative;
  display: grid;
  justify-items: end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--hairline-strong);
}

.content-engagement-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.content-engagement-status,
.engagement-feedback-status,
.comments-status,
.comment-composer-status,
.comment-item-status {
  min-height: 1.35em;
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

.content-engagement-status[data-tone="success"],
.engagement-feedback-status[data-tone="success"],
.comments-status[data-tone="success"] {
  color: var(--success);
}

.content-engagement-status[data-tone="error"],
.engagement-feedback-status[data-tone="error"],
.comments-status[data-tone="error"],
.comment-item-status[data-tone="error"] {
  color: var(--danger);
}

.engagement-share-menu {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 66px;
  display: grid;
  width: min(260px, calc(100vw - 40px));
  overflow: hidden;
  padding: 0.4rem;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-lg);
  background: var(--surface) padding-box;
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-float);
}

.engagement-share-menu[hidden],
.engagement-feedback-sheet[hidden],
.engagement-comments [hidden] {
  display: none;
}

.engagement-share-option {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 11px 0.75rem;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: transparent;
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.engagement-share-option:hover,
.engagement-share-option:focus-visible {
  background: var(--mint);
  color: var(--ui-brand-active);
  outline: none;
}

.has-engagement-dialog {
  overflow: hidden;
}

.engagement-feedback-sheet {
  position: fixed;
  z-index: 100;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}

.engagement-feedback-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(23, 34, 26, 0.42);
}

.engagement-feedback-dialog {
  position: relative;
  width: 100%;
  max-height: 92dvh;
  overflow-y: auto;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--surface);
  padding: 1.25rem 1.4rem calc(1.25rem + env(safe-area-inset-bottom));
  box-shadow: 0 0 0 1px var(--hairline), var(--shadow-float);
}

.engagement-feedback-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.engagement-feedback-head h2 {
  margin: 0;
  font-size: 1.2rem;
}

.engagement-feedback-form {
  display: grid;
  gap: 16px;
}

.engagement-feedback-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.engagement-feedback-form legend,
.engagement-feedback-comment span {
  display: block;
  margin-bottom: 8px;
  font-weight: 700;
}

.engagement-feedback-reasons {
  display: grid;
  gap: 8px;
}

.engagement-feedback-reason {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  cursor: pointer;
}

.engagement-feedback-reason:has(input:checked) {
  background: var(--mint);
  box-shadow: inset 0 0 0 1px rgba(114, 192, 44, 0.55);
}

.engagement-feedback-reason input {
  width: 18px;
  height: 18px;
  accent-color: var(--ui-brand);
}

.engagement-feedback-comment textarea,
.comment-composer textarea,
.comment-inline-form textarea {
  width: 100%;
  resize: vertical;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text);
  background: var(--field);
  box-shadow: inset 0 0 0 1px var(--hairline-strong);
  padding: 10px 12px;
  font: inherit;
  line-height: 1.5;
  box-sizing: border-box;
}

.engagement-feedback-comment textarea:focus,
.comment-composer textarea:focus,
.comment-inline-form textarea:focus {
  outline: none;
  background: var(--surface);
  box-shadow: var(--focus-ring);
}

.engagement-feedback-submit,
.comment-inline-actions,
.comments-more-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.engagement-comments {
  display: grid;
  gap: 16px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px dashed var(--hairline-strong);
  text-align: left;
}

.comments-placeholder {
  justify-items: end;
}

.comments-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.comments-head h2 {
  margin: 0;
  font-size: 1.35rem;
}

.comments-auth-prompt {
  display: grid;
  justify-items: end;
  gap: 12px;
  border-radius: var(--radius-lg);
  background: var(--mint);
  box-shadow: 0 0 0 1px rgba(114, 192, 44, 0.3);
  padding: 1rem 1.25rem;
  text-align: right;
}

.comments-auth-prompt p {
  margin: 0;
}

.comment-composer {
  display: grid;
  gap: 7px;
}

.comment-composer-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 8px;
  border: var(--rim-width) solid var(--rim);
  border-radius: calc(15px + var(--rim-width));
  background: var(--surface) padding-box;
  box-shadow: var(--card-shadow);
  padding: 4px 5px 4px 4px;
  transition: box-shadow 0.4s var(--ease-out);
}

.comment-composer-input:focus-within {
  box-shadow: 0 0 0 1px var(--ui-brand), 0 0 0 5px rgba(114, 192, 44, 0.16), var(--shadow-lift);
}

.comment-composer textarea {
  min-height: 42px;
  max-height: 160px;
  resize: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 9px 8px;
  outline: 0;
}

.comment-composer textarea:focus {
  border: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
}

.comments-list {
  display: grid;
  gap: 14px;
}

.comment-item {
  display: grid;
  min-width: 0;
  gap: 9px;
  border: var(--rim-width) solid var(--rim);
  border-radius: var(--radius-lg);
  background: var(--surface) padding-box;
  box-shadow: 0 0 0 1px var(--hairline);
  padding: 0.75rem 1rem;
}

.comment-item.is-deleted {
  background: var(--field) padding-box;
}

.comment-head {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  align-items: center;
  gap: 2px 9px;
}

.comment-head time {
  grid-column: 2;
  color: var(--muted);
  font-size: 0.76rem;
}

.comment-avatar {
  display: grid;
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 999px;
  color: var(--link);
  background: var(--mint);
  font-family: var(--font-serif);
  font-weight: 700;
}

.comment-body {
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  line-height: 1.55;
}

.comment-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.comment-action {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 32px;
  border: 0;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
  padding: 5px 10px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}

.comment-action:hover,
.comment-action:focus-visible,
.comment-action[aria-pressed="true"] {
  color: var(--ui-brand-active);
  background: var(--mint);
  outline: none;
}

.comment-action.is-primary {
  color: #fff;
  background: var(--ui-brand);
}

.comment-action:disabled {
  cursor: wait;
  opacity: 0.55;
}

.comment-reaction-count {
  min-width: 1ch;
}

.comment-delete-action {
  color: var(--danger);
}

.comment-inline-form {
  display: grid;
  gap: 8px;
}

.comment-replies {
  display: grid;
  gap: 10px;
  margin-left: 16px;
  padding-left: 12px;
  border-left: 2px dashed var(--hairline-strong);
}

.comment-replies .comment-item {
  border-radius: var(--radius-md);
  padding: 0.65rem 0.9rem;
}

.comment-load-replies {
  justify-self: end;
}

@media (min-width: 640px) {
  .engagement-feedback-sheet {
    align-items: center;
    padding: 24px;
  }

  .engagement-feedback-dialog {
    width: min(560px, 100%);
    border-radius: var(--radius-xl);
    padding: 1.5rem;
  }

  .comment-item {
    padding: 0.9rem 1.1rem;
  }

  .comment-replies {
    margin-left: 30px;
    padding-left: 16px;
  }
}

/* Motion, only for readers who have not asked to reduce it: the menu card
   opens with a spring and its groups rise in one after another, the icon
   lines fold, the brand mark tilts on hover. */
@media (prefers-reduced-motion: no-preference) {
  .site-menu:not([hidden]) .site-menu-inner {
    animation: menu-open 0.5s var(--ease-spring) backwards;
  }

  .site-menu:not([hidden]) .site-menu-inner > * {
    animation: rise-small 0.6s var(--ease-out) backwards;
  }

  .site-menu:not([hidden]) .site-menu-inner > :nth-child(2) {
    animation-delay: 0.06s;
  }

  .site-menu:not([hidden]) .site-menu-inner > :nth-child(3) {
    animation-delay: 0.12s;
  }

  [data-menu-toggle] [data-line] {
    transition: transform 0.55s var(--ease-spring), opacity 0.3s var(--ease-out);
  }

  .brand-mark {
    transition: transform 0.6s var(--ease-spring);
  }

  @media (hover: hover) {
    .brand:hover .brand-mark {
      transform: rotate(-8deg) scale(1.04);
    }
  }
}

@keyframes rise-small {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes menu-open {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a,
  .content-card,
  .list-card,
  .category-detail-card,
  .category-card,
  .user-article-card,
  .question-card,
  .answer-option,
  .search-box,
  .comment-composer-input {
    transition: none;
  }

  .content-card:hover,
  .list-card:hover,
  .category-detail-card:hover,
  .category-card:hover,
  .user-article-card:hover,
  .question-card:hover {
    transform: none;
  }
}

/* Without JavaScript the menu toggle cannot work, so it is hidden and the
   menu stays open, back in the page flow so it covers nothing. */
@media (scripting: none) {
  .header-controls [data-menu-toggle] {
    display: none;
  }

  .site-menu[hidden] {
    display: block;
  }

  .site-menu {
    position: static;
    pointer-events: auto;
  }
}