/* ==========================================================================
   Ozillo Social prototype stylesheet. Plain CSS, no library, no build step.

   Table of contents
   -----------------
   Layers (order matters, later wins):  reset, tokens, base, layout, components, utilities
     reset       box model, list/button/input normalisation
     tokens      every colour, space step, font size, radius, border width, duration, size
                 (dark mode only redefines colour tokens, here)
     base        html/body, links, focus ring
     layout      .page, .page__main, .page__aside, .site-footer
     components  site-header, feed-tabs, post-card, post-detail, byline, vote,
                 community-sidebar, comment (recursive tree), discussion, poll, badge,
                 level-tag, button (primary/secondary/ghost), field (input, label, hint,
                 error), notice, avatar
                 plus small supporting blocks: icon, yanki, video-embed, page-head,
                 breadcrumb, panel, settings-list
     utilities   .visually-hidden, .stack, .cluster, [hidden]

   Rules: components use only var(--token) values (plus 0, 1fr, 100%, 50%); naming is
   BEM-lite; state lives in attributes (aria-*, data-state), never in "is-" classes;
   no IDs, no !important, specificity <= one class + one state, no nesting.
   Exception: @media breakpoints cannot read custom properties, so px literals appear there.
   ========================================================================== */

@layer reset, tokens, base, layout, components, utilities;

/* ---------- reset ---------- */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset { margin: 0; padding: 0; }
  ul, ol { list-style: none; }
  fieldset { border: 0; min-width: 0; }
  button, input, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- tokens ---------- */
@layer tokens {
  :root {
    /* Colour, 60-30-10 rule. Burgundy (the Ozillo brand) is the accent.
       60% BASE (the page itself):  --color-bg
       30% SECONDARY (same cool-slate family, subtly lifted): --color-surface (cards, header,
           sidebar panels, comment thread, poll, panel), --color-surface-hover (card hover,
           thumbnails), --color-surface-active (pressed/hover on top of a hovered card, badges)
       10% ACCENT (burgundy #8B3340 in dark, a deeper burgundy in light), used as a FILL only:
           --color-accent-fill  active tab / nav pill, upvote button, level-tag, join button,
                                primary button, play-button hover, checkbox/radio accent-color,
                                always paired with --color-on-accent text/icons.
                                Burgundy is never used as text, icon or outline colour: on the
                                dark base it is only 2.4:1, so no --color-accent text token exists.
       Warm sand --color-accent-secondary is a sparing second note (Yanki numbers, online dot).
       Neutral supporting tokens (not a band): text, text-secondary, border, border-strong.
       --color-ring: focus ring. Burgundy in light (passes 3:1), off-white --color-text in dark.
       Light theme (the :root default) is the same language on a warm off-white base. */
    --color-bg: #FAF5F6;
    --color-surface: #fff;
    --color-surface-hover: #F1E4E7;
    --color-surface-active: #EAD8DC;
    --color-text: #2A2325;
    --color-text-secondary: #5E5155;
    --color-border: #EADDE0;
    --color-border-strong: #85757A;
    --color-accent-fill: oklch(0.35 0.12 15);
    --color-on-accent: #FFFFFF;
    --color-accent-secondary: #7C4F14;
    --color-ring: var(--color-accent-fill);
    /* role badges: the admin check is a burgundy fill, the founder crown a neutral sand fill */
    --color-founder-fill: #D9C7A4;
    --color-on-founder: #2B2622;
    --logo-boost: 1;
    color-scheme: light;

    /* derived from the tokens above, so both themes follow automatically */
    --tint-1: color-mix(in srgb, var(--color-accent-fill) 24%, var(--color-surface-active));
    --tint-2: color-mix(in srgb, var(--color-accent-secondary) 26%, var(--color-surface-active));
    --tint-3: color-mix(in srgb, var(--color-text-secondary) 22%, var(--color-surface-active));
    --tint-4: color-mix(in srgb, var(--color-accent-secondary) 14%, color-mix(in srgb, var(--color-accent-fill) 14%, var(--color-surface-active)));
    --art-a: color-mix(in srgb, var(--color-accent-fill) 70%, var(--color-surface-hover));
    --art-b: color-mix(in srgb, var(--color-accent-secondary) 40%, var(--color-surface-hover));
    --art-c: color-mix(in srgb, var(--color-text-secondary) 35%, var(--color-surface-hover));

    /* space scale, 4px base */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;

    /* type */
    --font-sans: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.9375rem;
    --text-md: 1.125rem;
    --text-lg: 1.5rem;
    --text-xl: 1.875rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.6;
    --tracking-tight: -0.015em;
    --tracking-wide: 0.08em;

    /* shape, motion */
    --radius: 8px;
    --radius-card: 16px;
    --radius-media: 12px;
    --radius-tile: 10px;
    --radius-pill: 999px;
    --radius-round: 50%;
    --border-width: 1px;
    --border-width-strong: 2px;
    --duration: 160ms;
    --duration-fast: 120ms;
    --duration-pop: 280ms;
    --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
    --scale-press: 0.92;
    --flip: 180deg;
    --opacity-disabled: 0.45;
    --opacity-hover: 0.9;
    --opacity-soft: 0.88;
    --z-header: 5;
    --z-skip: 10;
    --z-lightbox: 20;
    --color-lightbox: rgb(0 0 0 / 0.92);
    --color-on-lightbox: #fff;
    --color-lightbox-control: rgb(255 255 255 / 0.16);
    --color-lightbox-control-hover: rgb(255 255 255 / 0.28);
    --ratio-video: 16 / 9;
    --stroke-icon: 1.75;
    --clamp-lines: 2;

    /* sizes */
    --size-icon: 1.125em;
    --size-icon-sm: 0.9em;
    --size-icon-lg: 1.5rem;
    --size-control: 2.25rem;
    --size-field: 2.75rem;
    --size-tap: 2rem;
    --size-tap-min: 2.75rem;
    --size-avatar: 2rem;
    --size-avatar-md: 2.5rem;
    --size-avatar-lg: 4.5rem;
    --size-badge: 1rem;
    --size-header: 4rem;
    --size-header-control: 2.5rem;
    --size-menu: 13rem;
    --size-user-name: 9rem;
    --size-dot: 0.5rem;
    --size-vote: 2.5rem;
    --size-vote-column: 3rem;
    --size-play: 3.75rem;
    --size-play-sm: 3rem;
    --size-rank: 1.25rem;
    --size-check: 1.25rem;
    --size-field-area: 6rem;
    --size-status: 1.5rem;
    --size-page: 72rem;
    --size-aside: 19rem;
    --size-narrow: 40rem;
    --size-readable: 38rem;
    --size-search: 24rem;
    --size-field-min: 14rem;
    --size-logo: 2.25rem;
    --text-brand: 1.375rem;
    --tracking-brand: -0.02em;
    --leading-none: 1;
    --size-login: 26rem;
    --size-login-logo: 4rem;
    --size-provider: 3rem;
    --size-provider-mark: 1.5rem;
    --size-provider-logo: 1.75rem;
    --logo-on-accent: 2.2;
    /* Google's required brand colours (light theme default; dark below) */
    --brand-google-bg: #FFFFFF;
    --brand-google-border: #747775;
    --brand-google-text: #1F1F1F;
    --brand-google-hover: color-mix(in srgb, #303030 8%, #FFFFFF);
    --brand-google-active: color-mix(in srgb, #303030 12%, #FFFFFF);
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: #0E0F11;
      --color-surface: #16171A;
      --color-surface-hover: #1E1F23;
      --color-surface-active: #26282C;
      --color-text: #E6E3DE;
      --color-text-secondary: #A3A6AC;
      --color-border: #232529;
      --color-border-strong: #6A6E77;
      --color-accent-fill: #8B3340;
      --color-on-accent: #E6E3DE;
      --color-accent-secondary: #E9B982;
      --color-ring: var(--color-text);
      --color-founder-fill: #E9B982;
      --color-on-founder: #0E0F11;
      --logo-boost: 1.75;
      --brand-google-bg: #131314;
      --brand-google-border: #8E918F;
      --brand-google-text: #E3E3E3;
      --brand-google-hover: color-mix(in srgb, #E3E3E3 8%, #131314);
      --brand-google-active: color-mix(in srgb, #E3E3E3 12%, #131314);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
      --color-bg: #0E0F11;
      --color-surface: #16171A;
      --color-surface-hover: #1E1F23;
      --color-surface-active: #26282C;
      --color-text: #E6E3DE;
      --color-text-secondary: #A3A6AC;
      --color-border: #232529;
      --color-border-strong: #6A6E77;
      --color-accent-fill: #8B3340;
      --color-on-accent: #E6E3DE;
      --color-accent-secondary: #E9B982;
      --color-ring: var(--color-text);
      --color-founder-fill: #E9B982;
      --color-on-founder: #0E0F11;
      --logo-boost: 1.75;
      --brand-google-bg: #131314;
      --brand-google-border: #8E918F;
      --brand-google-text: #E3E3E3;
      --brand-google-hover: color-mix(in srgb, #E3E3E3 8%, #131314);
      --brand-google-active: color-mix(in srgb, #E3E3E3 12%, #131314);
      color-scheme: dark;
  }

  /* respect prefers-reduced-motion: durations collapse to zero */
  @media (prefers-reduced-motion: reduce) {
    :root { --duration: 0s; --duration-fast: 0s; --duration-pop: 0s; --scale-press: 1; }
  }
}

/* ---------- base ---------- */
@layer base {
  html { -webkit-text-size-adjust: 100%; }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0s; animation-iteration-count: 1; transition-duration: 0s; scroll-behavior: auto; }
  }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-regular);
    line-height: var(--leading-normal);
    overflow-wrap: anywhere;
  }
  a:hover { color: var(--color-text); text-decoration: underline; }
  :focus-visible {
    outline: var(--border-width-strong) solid var(--color-ring);
    outline-offset: var(--space-1);
    border-radius: var(--space-1);
  }
}

/* ---------- layout ---------- */
@layer layout {
  .page {
    max-width: var(--size-page);
    margin: 0 auto;
    padding: var(--space-7) var(--space-4) var(--space-10);
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--size-aside);
    gap: var(--space-8);
    align-items: start;
  }
  .page[data-width="narrow"] { grid-template-columns: minmax(0, var(--size-narrow)); justify-content: center; }
  .page__main { min-width: 0; }
  .page__aside { min-width: 0; display: grid; gap: var(--space-4); }
  @media (max-width: 860px) {
    .page { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  }
}

/* ---------- components ---------- */
@layer components {

  /* icon */
  .icon {
    width: var(--size-icon);
    height: var(--size-icon);
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: var(--stroke-icon);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .icon--sm { width: var(--size-icon-sm); height: var(--size-icon-sm); }
  .icon--lg { width: var(--size-icon-lg); height: var(--size-icon-lg); }
  .icon--fill { fill: currentColor; stroke: none; }

  /* avatar: the generated Gaze image (see src/avatar.rs); the backdrop colour shows while it loads */
  .avatar {
    display: block;
    width: var(--size-avatar);
    height: var(--size-avatar);
    flex: none;
    border-radius: var(--radius-round);
    background: var(--tint-1);
    object-fit: cover;
  }
  .avatar--unknown { display: block; }
  .avatar--sm { width: var(--size-avatar); height: var(--size-avatar); }
  .avatar--md { width: var(--size-avatar-md); height: var(--size-avatar-md); }
  .avatar--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }
  .avatar-picture { display: contents; }
  .avatar-link { display: inline-flex; flex: none; border-radius: var(--radius-round); }
  .avatar-link:hover { text-decoration: none; }

  /* community icon: the generated planets or the founder's image (see src/planets.rs); the tint shows while it loads */
  .community-icon {
    display: block;
    width: var(--size-avatar);
    height: var(--size-avatar);
    flex: none;
    border-radius: var(--radius-tile);
    background: var(--tint-1);
    object-fit: cover;
  }
  .community-icon--sm { width: var(--size-avatar); height: var(--size-avatar); }
  .community-icon--md { width: var(--size-avatar-md); height: var(--size-avatar-md); }
  .community-icon--lg { width: var(--size-avatar-lg); height: var(--size-avatar-lg); }

  /* button */
  .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    background: transparent;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-snug);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), opacity var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .button:hover { text-decoration: none; background: var(--color-surface-hover); border-color: var(--color-text-secondary); color: var(--color-text); }
  .button:active { transform: scale(var(--scale-press)); }
  .button:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
  .button--primary { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
  .button--primary:hover { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); opacity: var(--opacity-hover); }
  .button--secondary { background: var(--color-bg); }
  .button--ghost { border-color: transparent; color: var(--color-text-secondary); }
  .button--ghost:hover { background: var(--color-surface-active); border-color: transparent; color: var(--color-text); }
  .button--icon { width: var(--size-control); height: var(--size-control); padding: 0; }
  .button--block { width: 100%; }
  .button[aria-pressed="true"] { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }

  /* site-header: three zones in the page column. Brand | nav + search | tools (pushed to the right edge). */
  .site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
  }
  .site-header__inner {
    max-width: var(--size-page);
    min-height: var(--size-header);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-5);
  }

  /* brand: the logo and the wordmark are one link */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    border-radius: var(--radius);
    color: var(--color-text);
    font-size: var(--text-brand);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-brand);
    white-space: nowrap;
  }
  .brand:hover { color: var(--color-text); text-decoration: none; }
  .brand__logo { display: block; width: var(--size-logo); height: var(--size-logo); flex: none; filter: brightness(var(--logo-boost)); }
  .brand__name { display: block; padding-bottom: var(--space-1); }

  .site-header__nav { display: flex; gap: var(--space-1); flex: none; font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .site-header__link { display: inline-flex; align-items: center; height: var(--size-header-control); padding: 0 var(--space-3); border-radius: var(--radius-pill); color: var(--color-text-secondary); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
  .site-header__link:hover { text-decoration: none; background: var(--color-surface-hover); color: var(--color-text); }
  .site-header__link[aria-current="page"] { background: var(--color-accent-fill); color: var(--color-on-accent); }
  .site-header__search { position: relative; flex: 1; min-width: 0; max-width: var(--size-search); }
  .site-header__search-icon { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; }
  .site-header__search-input {
    width: 100%;
    height: var(--size-header-control);
    padding: 0 var(--space-4) 0 var(--space-9);
    background: var(--color-bg);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    transition: border-color var(--duration) var(--ease);
  }
  .site-header__search-input:hover { border-color: var(--color-text-secondary); }
  .site-header__tools { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; }
  .site-header__tool { width: var(--size-header-control); height: var(--size-header-control); }
  .site-header__cta { height: var(--size-header-control); padding-inline: var(--space-5); }

  /* user menu: the avatar + username pill that opens the account menu */
  .user-menu { position: relative; }
  .user-menu__button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--size-header-control);
    padding: 0 var(--space-3) 0 var(--space-1);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }
  .user-menu__button:hover { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
  .user-menu__button[aria-expanded="true"] { background: var(--color-surface-hover); border-color: var(--color-border-strong); }
  .user-menu__chevron { color: var(--color-text-secondary); }
  .user-menu__name { max-width: var(--size-user-name); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .user-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-header);
    display: grid;
    gap: var(--space-1);
    min-width: var(--size-menu);
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-media);
    background: var(--color-surface);
  }
  .user-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
  }
  .user-menu__item:hover, .user-menu__item:focus-visible { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
  .user-menu__item:focus-visible { outline-offset: calc(var(--border-width-strong) * -1); }
  .user-menu__rule { width: 100%; margin: var(--space-1) 0; border: 0; border-top: var(--border-width) solid var(--color-border); }
  .user-menu__form { margin: 0; }
  @media (max-width: 860px) {
    .site-header { position: static; }
    .site-header__inner { flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding-block: var(--space-2); }
    .site-header__tools { order: 1; flex-wrap: wrap; justify-content: flex-end; }
    .site-header__nav { order: 2; flex: 1 1 100%; overflow-x: auto; }
    .site-header__search { order: 3; flex: 1 1 100%; max-width: none; }
    .site-header__link { white-space: nowrap; }
  }
  @media (max-width: 520px) {
    .user-menu__button { padding-right: var(--space-2); }
    .user-menu__name { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip: rect(0 0 0 0); }
  }

  /* a username link and its badges, one unit */
  .who { display: inline-flex; align-items: center; gap: var(--space-1); min-width: 0; }

  /* role badges after a username: a small filled disc with an icon. Names come from aria-label. */
  .role-badge {
    display: inline-grid;
    place-items: center;
    width: var(--size-badge);
    height: var(--size-badge);
    flex: none;
    border-radius: var(--radius-round);
    vertical-align: middle;
  }
  .role-badge[data-role="admin"] { background: var(--color-accent-fill); color: var(--color-on-accent); }
  .role-badge[data-role="founder"] { background: var(--color-founder-fill); color: var(--color-on-founder); }
  .role-badge__icon { width: 70%; height: 70%; stroke-width: var(--border-width-strong); }
  .page-head__title { --size-badge: 1.5rem; }

  /* feed-tabs (rounded pill tabs; also profile tabs and comment sort) */
  .feed-tabs { display: flex; gap: var(--space-2); padding: var(--space-1) 0; overflow-x: auto; }
  .feed-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: transparent;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .feed-tabs__tab:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .feed-tabs__tab[aria-selected="true"] { background: var(--color-accent-fill); color: var(--color-on-accent); }

  /* badge (small pill) */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface-active);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    white-space: nowrap;
  }

  /* level-tag */
  .level-tag {
    display: inline-block;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-accent-fill);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    white-space: nowrap;
  }

  /* yanki (points) */
  .yanki { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-accent-secondary); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }

  /* vote (unchanged shape and behaviour: up arrow, score, down arrow) */
  .vote {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    min-width: var(--size-vote);
    padding: var(--space-1);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-text);
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .vote[data-state="up"] { border-color: var(--color-accent-fill); color: var(--color-text); }
  .vote__btn {
    display: grid;
    place-items: center;
    width: var(--size-control);
    height: var(--size-tap);
    background: none;
    border: 0;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    transition: color var(--duration) var(--ease), background var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .vote__btn:hover { color: var(--color-text); background: var(--color-surface-active); }
  .vote__btn:active { transform: scale(var(--scale-press)); }
  .vote__btn[data-dir="up"][aria-pressed="true"] { color: var(--color-on-accent); background: var(--color-accent-fill); }
  .vote__btn[data-dir="down"][aria-pressed="true"] { color: var(--color-text-secondary); background: var(--color-surface-active); }
  /* Pressed: filled thumb, with the stroke in the button's own colour so the cuff line stays visible as a gap. */
  .vote__btn[aria-pressed="true"] svg { fill: currentColor; stroke-width: calc(var(--stroke-icon) + 0.25px); }
  .vote__btn[data-dir="up"][aria-pressed="true"] svg { stroke: var(--color-accent-fill); }
  .vote__btn[data-dir="down"][aria-pressed="true"] svg { stroke: var(--color-surface-active); }
  .vote__btn.is-popping svg { animation: vote-pop var(--duration-pop) var(--ease); }
  .vote__btn[data-dir="down"].is-popping svg { animation-name: vote-pop-down; }
  @keyframes vote-pop {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.35) rotate(-12deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  @keyframes vote-pop-down {
    0% { transform: scale(1) rotate(0deg); }
    40% { transform: scale(1.35) rotate(12deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .vote__btn.is-popping svg { animation: none; }
  }
  .vote__count { padding: var(--space-1) 0; font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--leading-tight); color: inherit; white-space: nowrap; }
  .vote--inline { flex-direction: row; padding: 0 var(--space-1); }
  .vote__btn--sm { width: var(--size-tap); }
  .vote__count--large { font-size: var(--text-base); }
  @media (max-width: 520px) {
    .vote { flex-direction: row; padding: 0 var(--space-1); }
    .vote__btn { width: var(--size-tap); }
    .vote__count { padding: 0 var(--space-1); }
  }

  /* byline (avatar, name + role on line one, community + time on line two) */
  .byline { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .byline__text { display: grid; min-width: 0; }
  .byline__primary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); }
  .byline__name { color: var(--color-text); font-weight: var(--weight-semibold); }
  .byline__name:hover { color: var(--color-text); text-decoration: underline; }
  .byline__secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }

  /* video-embed (lazy: art thumbnail + play button; the iframe loads only after click) */
  .video-embed {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: var(--ratio-video);
    padding: 0;
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-media);
    background: var(--color-surface-hover);
    color: var(--color-text);
    text-align: left;
    overflow: hidden;
    transition: border-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .video-embed:hover { --play-bg: var(--color-accent-fill); --play-fg: var(--color-on-accent); border-color: var(--color-border-strong); }
  .video-embed[data-state="loaded"] { display: grid; place-items: center; padding: var(--space-4); background: var(--color-surface); text-align: center; font-size: var(--text-sm); color: var(--color-text-secondary); }
  .video-embed__art { position: absolute; inset: 0; width: 100%; height: 100%; }
  .video-embed__art-bg { fill: var(--color-surface-active); }
  .video-embed__art-a { fill: var(--art-a); }
  .video-embed__art-b { fill: var(--art-b); }
  .video-embed__art-c { fill: var(--art-c); }
  .video-embed__art-title { fill: var(--color-text); font-family: var(--font-sans); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
  .video-embed__art-sub { fill: var(--color-text-secondary); font-family: var(--font-sans); font-weight: var(--weight-medium); }
  .video-embed__play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: var(--size-play);
    height: var(--size-play);
    display: grid;
    place-items: center;
    border-radius: var(--radius-round);
    background: var(--play-bg, var(--color-bg));
    color: var(--play-fg, inherit);
    border: var(--border-width) solid currentColor;
    transition: transform var(--duration) var(--ease);
  }
  .video-embed__play--sm { width: var(--size-play-sm); height: var(--size-play-sm); }
  .video-embed__duration {
    position: absolute;
    right: var(--space-3);
    bottom: var(--space-3);
    padding: 0 var(--space-2);
    border-radius: var(--radius);
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    font-variant-numeric: tabular-nums;
  }

  /* post-card */
  .post-card {
    display: grid;
    grid-template-columns: var(--size-vote-column) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin-top: var(--space-4);
    padding: var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
  }
  .post-card:hover { background: var(--color-surface-hover); }
  .post-card--compact { padding: var(--space-4); }
  .post-card__vote { display: flex; justify-content: center; align-items: flex-start; }
  .post-card__body { min-width: 0; }
  .post-card__title { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .post-card__title-link:hover { color: var(--color-text); text-decoration: underline; }
  .post-card__excerpt { color: var(--color-text-secondary); display: -webkit-box; -webkit-line-clamp: var(--clamp-lines); -webkit-box-orient: vertical; overflow: hidden; }
  .post-card__media { position: relative; display: block; margin-top: var(--space-4); }
  .post-card__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-4); margin-left: calc(var(--space-3) * -1); }
  .action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    transition: background var(--duration) var(--ease), color var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .action:hover { background: var(--color-surface-active); color: var(--color-text); }
  .action:active { transform: scale(var(--scale-press)); }
  .action[aria-pressed="true"] { color: var(--color-text); font-weight: var(--weight-semibold); }
  @media (max-width: 520px) {
    .action { padding: var(--space-2); }
  }
  @media (max-width: 520px) {
    .post-card { grid-template-columns: minmax(0, 1fr); }
    .post-card__vote { order: 2; justify-content: flex-start; }
  }

  /* post-detail (single post page) */
  .post-detail { display: grid; grid-template-columns: var(--size-vote-column) minmax(0, 1fr); gap: 0 var(--space-4); }
  .post-detail__vote { display: flex; justify-content: center; align-items: flex-start; }
  .post-detail__main { min-width: 0; }
  .post-detail__title { margin: var(--space-5) 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .post-detail__body { display: grid; gap: var(--space-4); margin-top: var(--space-5); max-width: var(--size-readable); }
  .post-detail__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin-top: var(--space-4); margin-left: calc(var(--space-3) * -1); }
  @media (max-width: 520px) {
    .post-detail { grid-template-columns: minmax(0, 1fr); }
    .post-detail__vote { order: 2; justify-content: flex-start; margin-top: var(--space-3); }
  }

  /* breadcrumb */
  .breadcrumb { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }

  /* community-sidebar */
  .community-sidebar { display: grid; gap: var(--space-4); min-width: 0; }
  .community-sidebar__section { padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .community-sidebar__title { margin-bottom: var(--space-3); color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); line-height: var(--leading-snug); }
  .community-sidebar__list { display: grid; gap: var(--space-1); }
  .community-sidebar__item { display: flex; align-items: center; gap: var(--space-3); margin: 0 calc(var(--space-2) * -1); padding: var(--space-2); border-radius: var(--radius); font-size: var(--text-sm); transition: background var(--duration) var(--ease); }
  .community-sidebar__item:hover { background: var(--color-surface-hover); }
  .community-sidebar__main { flex: 1; min-width: 0; }
  .community-sidebar__name { display: block; font-weight: var(--weight-semibold); }
  .community-sidebar__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .community-sidebar__dot { width: var(--size-dot); height: var(--size-dot); border-radius: var(--radius-round); background: var(--color-accent-secondary); }
  .community-sidebar__value { color: var(--color-accent-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .community-sidebar__rules { display: grid; gap: var(--space-3); counter-reset: rule; font-size: var(--text-sm); }
  .community-sidebar__rule { display: grid; grid-template-columns: var(--size-rank) 1fr; gap: var(--space-1); counter-increment: rule; }
  .community-sidebar__rule::before { content: counter(rule); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
  .community-sidebar__rule-title { display: block; font-weight: var(--weight-semibold); }
  .community-sidebar__rule-text { display: block; color: var(--color-text-secondary); }

  /* page-head (community and profile headers) */
  .page-head { padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); margin-bottom: var(--space-4); }
  .page-head__row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
  .page-head__identity { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
  .page-head__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  .page-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .page-head__text { margin-top: var(--space-4); max-width: var(--size-readable); color: var(--color-text-secondary); }
  .page-head__stats { display: flex; flex-wrap: wrap; gap: var(--space-7); margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .page-head__stat { display: block; }
  .page-head__stat-value { display: block; color: var(--color-text); font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .page-head__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-5); }

  /* comment (recursive: a comment may contain a comment__replies list of comments) */
  .comment { padding: var(--space-4) 0 var(--space-1); }
  .comment__header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .comment__author { color: var(--color-text); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .comment__author:hover { color: var(--color-text); text-decoration: underline; }
  .comment__body { margin: var(--space-2) 0; max-width: var(--size-readable); }
  .comment__footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .comment__action { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); background: none; border: 0; border-radius: var(--radius); color: inherit; font-size: var(--text-xs); font-weight: var(--weight-medium); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
  .comment__action:hover { background: var(--color-surface-hover); color: var(--color-text); }
  .comment__replies { display: grid; margin-left: var(--space-4); padding-left: var(--space-4); border-left: var(--border-width) solid var(--color-border); }
  .comment__replies--root { margin-left: 0; padding-left: 0; border-left: 0; }
  .comment__more { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-3) 0; background: none; border: 0; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); }
  .comment__more-icon { transition: transform var(--duration) var(--ease); }
  .comment__more:hover { color: var(--color-text); text-decoration: underline; }
  .comment__more-icon[data-state="open"] { transform: rotate(var(--flip)); }

  /* discussion (comment section wrapper) */
  .discussion { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
  .discussion__thread { padding: var(--space-2) var(--space-5) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .discussion__title { font-size: var(--text-md); font-weight: var(--weight-semibold); }

  /* poll */
  .poll { display: grid; gap: var(--space-2); padding: var(--space-5); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .poll__question { margin-bottom: var(--space-1); padding: 0; font-weight: var(--weight-semibold); }
  .poll__option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-bg); font-size: var(--text-sm); cursor: pointer; transition: border-color var(--duration) var(--ease); }
  .poll__option:hover { border-color: var(--color-text); }
  .poll__option[data-state="checked"] { border-color: var(--color-text); border-width: var(--border-width-strong); }
  .poll__input { width: var(--size-icon); height: var(--size-icon); margin: 0; accent-color: var(--color-accent-fill); }
  .poll__result { position: relative; display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); font-size: var(--text-sm); overflow: hidden; }
  .poll__result[data-state="mine"] { border-color: var(--color-text); }
  .poll__bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--value); background: var(--color-surface-active); }
  .poll__bar[data-state="mine"] { border-right: var(--border-width-strong) solid var(--color-text); }
  .poll__text { position: relative; }
  .poll__footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .poll__label { margin: var(--space-7) 0 var(--space-2); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

  /* field */
  .field { display: grid; gap: var(--space-2); }
  .field__label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .field__input-wrap { position: relative; }
  .field__prefix { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); color: var(--color-text-secondary); pointer-events: none; }
  .field__control { width: 100%; padding: var(--space-3) var(--space-4); background: var(--color-bg); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius); transition: border-color var(--duration) var(--ease); }
  .field__control:hover { border-color: var(--color-text-secondary); }
  .field__control--prefixed { padding-left: var(--space-7); font-size: var(--text-md); }
  .field__control--area { min-height: var(--size-field-area); resize: vertical; }
  .field__control[readonly] { background: var(--color-surface-hover); border-style: dashed; color: var(--color-text-secondary); }
  .field__control[aria-invalid="true"] { border-color: var(--color-text); border-width: var(--border-width-strong); }
  .field__hint { font-size: var(--text-xs); color: var(--color-text-secondary); }
  .field__error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .field__status { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-status); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .field__status[data-state="ok"] { color: var(--color-text); font-weight: var(--weight-semibold); }
  .field__status[data-state="taken"] { color: var(--color-text); font-weight: var(--weight-semibold); }
  .field__check { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: var(--border-width-strong) solid var(--color-text); border-radius: var(--radius); font-weight: var(--weight-semibold); cursor: pointer; }
  .field__check-input { flex: none; width: var(--size-check); height: var(--size-check); margin: var(--space-1) 0 0; accent-color: var(--color-accent-fill); }
  .field__list { display: grid; gap: var(--space-1); padding-left: var(--space-4); list-style: disc; font-size: var(--text-sm); color: var(--color-text-secondary); }
  .field__examples { display: grid; gap: var(--space-2); padding: var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius); font-size: var(--text-sm); }
  .field__example { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }

  /* notice */
  .notice { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .notice__icon { margin-top: var(--space-1); }
  .notice__title { color: var(--color-text); font-weight: var(--weight-semibold); }
  .notice--strong { flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-text); color: var(--color-bg); font-size: var(--text-sm); }
  .notice__head { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
  .notice__title--strong { display: block; color: inherit; font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .notice__text { opacity: var(--opacity-soft); }

  /* panel and settings-list */
  .panel { padding: var(--space-6); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
  .panel__title { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  .settings-list__title { margin: var(--space-7) 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
  .settings-list__field { flex: 1; min-width: var(--size-field-min); }
  .settings-list__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; border-top: var(--border-width) solid var(--color-border); }
  .settings-list__term { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .settings-list__value { color: var(--color-text-secondary); font-size: var(--text-sm); }
}

/* ---------- login ---------- */
@layer components {
  .login {
    display: grid;
    justify-items: center;
    gap: var(--space-6);
    width: 100%;
    max-width: var(--size-login);
    margin: var(--space-8) auto 0;
    padding: var(--space-8) var(--space-7);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    text-align: center;
  }
  .login__logo { display: block; width: var(--size-login-logo); height: var(--size-login-logo); filter: brightness(var(--logo-boost)); }
  .login__head { display: grid; gap: var(--space-2); }
  .login__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
  .login__lead { color: var(--color-text-secondary); }
  .login__providers { display: grid; gap: var(--space-3); width: 100%; }
  .login__note { font-size: var(--text-xs); color: var(--color-text-secondary); }

  .provider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--size-provider);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    font-size: var(--text-base);
    font-weight: var(--weight-medium);
    line-height: var(--leading-snug);
    transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), opacity var(--duration) var(--ease), transform var(--duration-fast) var(--ease);
  }
  .provider:hover { text-decoration: none; }
  .provider:active { transform: scale(var(--scale-press)); }
  .provider__label { min-width: 0; }
  .provider__mark { width: var(--size-provider-mark); height: var(--size-provider-mark); flex: none; }
  /* the logo is transparent burgundy: lifted so it reads on the burgundy button */
  .provider__logo { display: block; width: var(--size-provider-logo); height: var(--size-provider-logo); flex: none; filter: brightness(var(--logo-on-accent)); }

  .provider--ozillo { background: var(--color-accent-fill); border-color: var(--color-accent-fill); color: var(--color-on-accent); }
  .provider--ozillo:hover { color: var(--color-on-accent); opacity: var(--opacity-hover); }
  .provider--google { background: var(--brand-google-bg); border-color: var(--brand-google-border); color: var(--brand-google-text); }
  .provider--google:hover { background: var(--brand-google-hover); color: var(--brand-google-text); }
  .provider--google:active { background: var(--brand-google-active); }

  @media (max-width: 480px) {
    .login { margin-top: var(--space-4); padding: var(--space-7) var(--space-4); }
  }
}

/* ---------- M2 additions (feeds, posts, rendered markdown) ---------- */
@layer components {
  /* tabs that are links (sort tabs, post kind) mark the current one with aria-current */
  .feed-tabs__tab[aria-current="page"] { background: var(--color-accent-fill); color: var(--color-on-accent); }
  .feed-tabs__tab[aria-current="page"]:hover { color: var(--color-on-accent); text-decoration: none; }

  /* the read-only vote (M2) and other controls that arrive later: disabled, not hoverable */
  .vote__btn:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }
  .action:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; }

  /* "Daha fazla" */
  .feed__more { margin-top: var(--space-4); }

  /* community strip on the post page: the join control sits at the far end */
  .breadcrumb__action { margin-left: auto; }

  /* sanitized markdown (post bodies, community rules) */
  .prose { display: grid; gap: var(--space-3); line-height: var(--leading-normal); overflow-wrap: anywhere; }
  .prose a { text-decoration: underline; }
  .prose h3, .prose h4, .prose h5, .prose h6 { font-size: var(--text-base); font-weight: var(--weight-semibold); line-height: var(--leading-snug); }
  .prose ul { list-style: disc; padding-left: var(--space-5); }
  .prose ol { list-style: decimal; padding-left: var(--space-5); }
  .prose li + li { margin-top: var(--space-1); }
  .prose blockquote { padding-left: var(--space-4); border-left: var(--border-width-strong) solid var(--color-border-strong); color: var(--color-text-secondary); }
  .prose code { padding: 0 var(--space-1); border-radius: var(--space-1); background: var(--color-surface-active); font-family: var(--font-mono); font-size: 0.9em; }
  .prose pre { padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); overflow-x: auto; }
  .prose pre code { padding: 0; background: none; }
  .prose table { border-collapse: collapse; display: block; overflow-x: auto; font-size: var(--text-sm); }
  .prose th, .prose td { padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); text-align: left; }
  .prose th { font-weight: var(--weight-semibold); background: var(--color-surface-active); }
  .prose hr { border: 0; border-top: var(--border-width) solid var(--color-border); width: 100%; }
}

/* ---------- M3 additions (comments, votes) ---------- */
@layer components {
  /* shown only while the root comment list is empty (the list stays in the DOM as the htmx target) */
  .discussion__empty { display: none; padding: var(--space-4) 0; color: var(--color-text-secondary); }
  .comment__replies--root:empty + .discussion__empty { display: block; }
  .comment .field__error { margin-top: var(--space-1); }
  .comment > form { margin: var(--space-2) 0 var(--space-3); max-width: var(--size-readable); }
  .comment__body.prose { margin: var(--space-2) 0; }
  .comment__more { cursor: pointer; }
  .comment__more[aria-busy="true"], .htmx-request.comment__more { opacity: var(--opacity-disabled); }

  /* one comment in the profile "Yorumlar" tab */
  .profile-comment {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .profile-comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .profile-comment__meta a:first-child { color: var(--color-text); font-weight: var(--weight-semibold); }
  .profile-comment__body { color: var(--color-text); overflow-wrap: anywhere; }
}

/* ---------- M4 additions (post kinds, flair, spoiler, poll bars, link preview) ---------- */
@layer tokens {
  :root {
    --size-media-max: 36rem;
  }
}

@layer components {
  /* flair (a tinted pill; the four tints are the avatar tints) */
  .flair {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-2);
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    background: var(--tint-3);
    color: var(--color-text);
    font-size: var(--text-xs);
    line-height: var(--leading-normal);
    white-space: nowrap;
  }
  .flair:hover { color: var(--color-text); text-decoration: none; border-color: var(--color-border-strong); }
  .flair[data-tint="1"] { background: var(--tint-1); }
  .flair[data-tint="2"] { background: var(--tint-2); }
  .flair[data-tint="3"] { background: var(--tint-3); }
  .flair[data-tint="4"] { background: var(--tint-4); }
  .flair[aria-current="true"] { border-color: var(--color-text); }
  .flair-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); }
  .flair-filter__all { padding: 0 var(--space-2); border: var(--border-width) solid transparent; border-radius: var(--radius-pill); background: var(--color-surface-active); color: var(--color-text-secondary); font-size: var(--text-xs); line-height: var(--leading-normal); }
  .flair-filter__all:hover { color: var(--color-text); text-decoration: none; }
  .flair-filter__all[aria-current="true"] { border-color: var(--color-text); color: var(--color-text); }
  .flair-list { display: grid; gap: var(--space-2); }
  .flair-list__item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .flair-choice { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }

  /* spoiler: collapsed until opened (a details element, so it works without JavaScript) */
  .spoiler { margin-top: var(--space-2); }
  .spoiler__summary { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-surface-active); color: var(--color-text-secondary); font-size: var(--text-xs); font-weight: var(--weight-medium); cursor: pointer; list-style: none; }
  .spoiler__summary::-webkit-details-marker { display: none; }
  .spoiler__summary:hover { color: var(--color-text); }
  .spoiler[open] .spoiler__show, .spoiler:not([open]) .spoiler__hide { display: none; }
  .spoiler__content { margin-top: var(--space-3); }

  /* lazy video: thumbnail image (the iframe replaces the whole box after a click) */
  .video-embed__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .video-embed--player { display: block; }
  .video-embed--player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

  /* images inside post and comment bodies (our CDN only; the sanitizer allows no other attributes) */
  .prose img { display: block; width: auto; max-width: 100%; height: auto; max-height: var(--size-media-max); border-radius: var(--radius-media); border: var(--border-width) solid var(--color-border); background: var(--color-surface-hover); object-fit: contain; }

  /* big link card under a post body: 16:9 og image (our own copy), site, title, description */
  .link-preview { display: grid; gap: var(--space-1); margin: var(--space-4) 0 0; padding-bottom: var(--space-3); max-width: var(--size-readable); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-media); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-sm); overflow: hidden; overflow-wrap: anywhere; text-decoration: none; transition: border-color var(--duration) var(--ease); }
  .link-preview:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); text-decoration: none; }
  .link-preview > :first-child:not(.link-preview__image) { margin-top: var(--space-3); }
  .link-preview__site, .link-preview__title, .link-preview__text { margin-inline: var(--space-4); }
  .link-preview__image + .link-preview__site, .link-preview__image + .link-preview__title, .link-preview__image + .link-preview__text { margin-top: var(--space-2); }
  .link-preview__site { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
  .link-preview__title { color: var(--color-text); font-weight: var(--weight-semibold); }
  .link-preview__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

  /* level progress (profile), badges row and leaderboard rows */
  .level-progress { display: grid; gap: var(--space-2); margin-top: var(--space-5); max-width: var(--size-readable); }
  .level-progress__head { font-size: var(--text-sm); color: var(--color-text-secondary); }
  .level-progress__head strong { color: var(--color-accent-secondary); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
  .level-progress__track { position: relative; height: var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-active); overflow: hidden; }
  .level-progress__bar { position: absolute; top: 0; bottom: 0; left: 0; width: var(--value, 0%); border-radius: var(--radius-pill); background: var(--color-accent-fill); }
  .page-head__badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
  .leaderboard__rank { flex: none; min-width: var(--size-rank); color: var(--color-text-secondary); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
  .leaderboard__more { margin-top: var(--space-3); }

  /* data-pct bars (poll results, level progress): widths come from data-pct (inline styles are blocked by the CSP) */
  .poll__bar { width: var(--value, 0%); }
  .poll .field__error { margin-top: var(--space-1); }
  [data-pct="0"] { --value: 0%; }
  [data-pct="1"] { --value: 1%; }
  [data-pct="2"] { --value: 2%; }
  [data-pct="3"] { --value: 3%; }
  [data-pct="4"] { --value: 4%; }
  [data-pct="5"] { --value: 5%; }
  [data-pct="6"] { --value: 6%; }
  [data-pct="7"] { --value: 7%; }
  [data-pct="8"] { --value: 8%; }
  [data-pct="9"] { --value: 9%; }
  [data-pct="10"] { --value: 10%; }
  [data-pct="11"] { --value: 11%; }
  [data-pct="12"] { --value: 12%; }
  [data-pct="13"] { --value: 13%; }
  [data-pct="14"] { --value: 14%; }
  [data-pct="15"] { --value: 15%; }
  [data-pct="16"] { --value: 16%; }
  [data-pct="17"] { --value: 17%; }
  [data-pct="18"] { --value: 18%; }
  [data-pct="19"] { --value: 19%; }
  [data-pct="20"] { --value: 20%; }
  [data-pct="21"] { --value: 21%; }
  [data-pct="22"] { --value: 22%; }
  [data-pct="23"] { --value: 23%; }
  [data-pct="24"] { --value: 24%; }
  [data-pct="25"] { --value: 25%; }
  [data-pct="26"] { --value: 26%; }
  [data-pct="27"] { --value: 27%; }
  [data-pct="28"] { --value: 28%; }
  [data-pct="29"] { --value: 29%; }
  [data-pct="30"] { --value: 30%; }
  [data-pct="31"] { --value: 31%; }
  [data-pct="32"] { --value: 32%; }
  [data-pct="33"] { --value: 33%; }
  [data-pct="34"] { --value: 34%; }
  [data-pct="35"] { --value: 35%; }
  [data-pct="36"] { --value: 36%; }
  [data-pct="37"] { --value: 37%; }
  [data-pct="38"] { --value: 38%; }
  [data-pct="39"] { --value: 39%; }
  [data-pct="40"] { --value: 40%; }
  [data-pct="41"] { --value: 41%; }
  [data-pct="42"] { --value: 42%; }
  [data-pct="43"] { --value: 43%; }
  [data-pct="44"] { --value: 44%; }
  [data-pct="45"] { --value: 45%; }
  [data-pct="46"] { --value: 46%; }
  [data-pct="47"] { --value: 47%; }
  [data-pct="48"] { --value: 48%; }
  [data-pct="49"] { --value: 49%; }
  [data-pct="50"] { --value: 50%; }
  [data-pct="51"] { --value: 51%; }
  [data-pct="52"] { --value: 52%; }
  [data-pct="53"] { --value: 53%; }
  [data-pct="54"] { --value: 54%; }
  [data-pct="55"] { --value: 55%; }
  [data-pct="56"] { --value: 56%; }
  [data-pct="57"] { --value: 57%; }
  [data-pct="58"] { --value: 58%; }
  [data-pct="59"] { --value: 59%; }
  [data-pct="60"] { --value: 60%; }
  [data-pct="61"] { --value: 61%; }
  [data-pct="62"] { --value: 62%; }
  [data-pct="63"] { --value: 63%; }
  [data-pct="64"] { --value: 64%; }
  [data-pct="65"] { --value: 65%; }
  [data-pct="66"] { --value: 66%; }
  [data-pct="67"] { --value: 67%; }
  [data-pct="68"] { --value: 68%; }
  [data-pct="69"] { --value: 69%; }
  [data-pct="70"] { --value: 70%; }
  [data-pct="71"] { --value: 71%; }
  [data-pct="72"] { --value: 72%; }
  [data-pct="73"] { --value: 73%; }
  [data-pct="74"] { --value: 74%; }
  [data-pct="75"] { --value: 75%; }
  [data-pct="76"] { --value: 76%; }
  [data-pct="77"] { --value: 77%; }
  [data-pct="78"] { --value: 78%; }
  [data-pct="79"] { --value: 79%; }
  [data-pct="80"] { --value: 80%; }
  [data-pct="81"] { --value: 81%; }
  [data-pct="82"] { --value: 82%; }
  [data-pct="83"] { --value: 83%; }
  [data-pct="84"] { --value: 84%; }
  [data-pct="85"] { --value: 85%; }
  [data-pct="86"] { --value: 86%; }
  [data-pct="87"] { --value: 87%; }
  [data-pct="88"] { --value: 88%; }
  [data-pct="89"] { --value: 89%; }
  [data-pct="90"] { --value: 90%; }
  [data-pct="91"] { --value: 91%; }
  [data-pct="92"] { --value: 92%; }
  [data-pct="93"] { --value: 93%; }
  [data-pct="94"] { --value: 94%; }
  [data-pct="95"] { --value: 95%; }
  [data-pct="96"] { --value: 96%; }
  [data-pct="97"] { --value: 97%; }
  [data-pct="98"] { --value: 98%; }
  [data-pct="99"] { --value: 99%; }
  [data-pct="100"] { --value: 100%; }
}

/* ---------- moderation (M6) ---------- */
@layer layout {
  .page[data-width="wide"] { grid-template-columns: minmax(0, var(--size-page)); }
}
@layer components {
  .badge--review { background: var(--color-surface-hover); color: var(--color-accent-secondary); }

  /* the result line of a report request */
  .report__done { margin: 0; }

  /* mod panel */
  .mod-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
  .mod-item { display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-bg); }
  .mod-item--done { color: var(--color-text-secondary); }
  .mod-item--error { border-color: var(--color-border-strong); color: var(--color-text); }
  .mod-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .mod-item__title { font-weight: var(--weight-semibold); }
  .mod-item__preview { margin: 0; color: var(--color-text-secondary); overflow-wrap: anywhere; white-space: pre-line; }
  .mod-item__why { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
  .mod-item__note { margin: 0; padding-left: var(--space-3); border-left: var(--border-width-strong) solid var(--color-border-strong); color: var(--color-text-secondary); overflow-wrap: anywhere; }
  .mod-item__form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
  .mod-item__reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .mod-item__reasons li { padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-active); font-size: var(--text-sm); }
  .mod-item__num { color: var(--color-accent-secondary); font-weight: var(--weight-semibold); }
  .mod-log { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); font-size: var(--text-sm); }
  .mod-log__by { color: var(--color-text-secondary); }
}

/* ---------- M6.5: link images, inline link previews, markdown editor ---------- */
@layer tokens {
  :root {
    --size-inline-thumb: 2.5rem;
    --size-inline-link: 28rem;
  }
}

@layer components {
  /* og:image of the big link card: our own re-encoded copy, cover-cropped to 16:9 (height: auto beats the height attribute) */
  .link-preview__image { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio-video); object-fit: cover; background: var(--color-surface-hover); }

  /* media of a feed card: a link to the post; the YouTube thumbnail (with a play badge) or the first link's og image, 16:9 */
  .post-card__media--video:hover { --play-bg: var(--color-accent-fill); --play-fg: var(--color-on-accent); }
  .post-card__more { position: absolute; right: var(--space-3); bottom: var(--space-3); padding: 0 var(--space-2); border-radius: var(--radius); background: var(--color-bg); color: var(--color-text); font-size: var(--text-xs); font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; }
  .post-card__cover { display: block; width: 100%; height: auto; aspect-ratio: var(--ratio-video); object-fit: cover; border: var(--border-width) solid var(--color-border); border-radius: var(--radius-media); background: var(--color-surface-hover); }

  /* one-line preview after a bare URL inside a post or comment: smaller and flatter than the link-post card */
  .prose .link-inline, .link-inline { display: inline-grid; grid-template-columns: var(--size-inline-thumb) minmax(0, 1fr); align-items: center; gap: var(--space-3); width: 100%; max-width: var(--size-inline-link); padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; line-height: var(--leading-snug); }
  .link-inline:hover { border-color: var(--color-border-strong); color: var(--color-text); text-decoration: none; }
  .link-inline__thumb, .link-inline__tile { width: var(--size-inline-thumb); height: var(--size-inline-thumb); border-radius: var(--radius-tile); }
  .link-inline__thumb { display: block; object-fit: cover; background: var(--color-surface-active); }
  .link-inline__tile { display: grid; place-items: center; background: var(--tint-3); color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-semibold); }
  .link-inline__tile[data-tint="1"] { background: var(--tint-1); }
  .link-inline__tile[data-tint="2"] { background: var(--tint-2); }
  .link-inline__tile[data-tint="4"] { background: var(--tint-4); }
  .link-inline__text { display: grid; min-width: 0; }
  .link-inline__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .link-inline__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); color: var(--color-text-secondary); }

  /* minimal markdown editor (toolbar over the textarea; see app.js) */
  .editor { display: grid; gap: var(--space-2); }
  .editor__bar { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); }
  .editor__btn { min-width: var(--size-tap); height: var(--size-tap); padding: 0 var(--space-2); border: 0; border-radius: var(--radius); background: transparent; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease); }
  .editor__btn:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text); }
  .editor__btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
  .editor__btn--bold { font-weight: var(--weight-bold); }
  .editor__btn--italic { font-style: italic; }
  .editor__btn--toggle { margin-left: auto; }
  .editor__btn[aria-pressed="true"] { background: var(--color-accent-fill); color: var(--color-on-accent); }
  .editor__status { color: var(--color-text-secondary); font-size: var(--text-xs); }
  .editor__status[data-state="error"] { color: var(--color-text); font-weight: var(--weight-semibold); }
  .editor__status:empty { display: none; }
  .editor[data-drop="on"] .editor__bar, .editor[data-drop="on"] .field__control { border-color: var(--color-accent-fill); }
  .editor__preview { min-height: var(--size-field-area); padding: var(--space-3) var(--space-4); border: var(--border-width) dashed var(--color-border-strong); border-radius: var(--radius); background: var(--color-bg); }
}

/* ---------- accessibility, notifications, search (M7) ---------- */
@layer components {

  /* skip link: first focusable element of every page; visible only while focused */
  .skip-link {
    position: fixed;
    top: var(--space-2);
    left: var(--space-4);
    z-index: var(--z-skip);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-accent-fill);
    color: var(--color-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
  }
  .skip-link:hover { color: var(--color-on-accent); }
  .skip-link:not(:focus) { width: var(--border-width); height: var(--border-width); padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
  .page__main:focus { outline: 0; }

  /* the tab rows scroll sideways, so their focus ring is drawn inside the pill */
  .feed-tabs__tab:focus-visible, .site-header__link:focus-visible { outline-offset: calc(var(--border-width-strong) * -1); }
  .feed-tabs__tab[aria-current="page"] { background: var(--color-accent-fill); color: var(--color-on-accent); }

  /* header bell with the unread count */
  .site-header__bell { position: relative; }
  .site-header__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: var(--size-check);
    padding: 0 var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-accent-fill);
    color: var(--color-on-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    text-align: center;
  }

  /* notifications */
  .notification-list { display: grid; gap: var(--space-2); }
  .notification {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .notification[data-unread="true"] { border-inline-start: var(--border-width-strong) solid var(--color-accent-fill); }
  .notification__body { min-width: 0; display: grid; gap: var(--space-1); }
  .notification__actor { font-weight: var(--weight-semibold); }
  .notification__meta { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }

  /* the search page's own form */
  .search-form { display: flex; gap: var(--space-2); }
  .search-form__input { flex: 1; min-width: 0; }

  /* result counts on the search tabs, and the "results are in another tab" hint */
  .feed-tabs__count { font-size: var(--text-xs); font-variant-numeric: tabular-nums; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-surface-active); color: var(--color-text); }
  .feed-tabs__count[data-zero="true"] { background: transparent; color: var(--color-text-secondary); opacity: 0.7; }
  .feed-tabs__tab[aria-current="page"] .feed-tabs__count { background: transparent; color: inherit; }
  .search-hint { margin: 0; }
  .search-hint__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }

  /* placeholders keep the secondary text colour (readable in both themes) */
  ::placeholder { color: var(--color-text-secondary); opacity: 1; }

  /* touch targets: at least 44 px on touch screens and narrow windows */
  @media (pointer: coarse), (max-width: 520px) {
    .button, .action, .feed-tabs__tab, .site-header__link, .user-menu__button, .user-menu__item, .more-menu__item, .comment__action, .editor__btn { min-height: var(--size-tap-min); }
    .button--icon, .editor__btn { min-width: var(--size-tap-min); }
    .vote__btn { min-width: var(--size-tap-min); min-height: var(--size-tap-min); }
    .action { min-width: var(--size-tap-min); justify-content: center; }
    .community-sidebar__item { min-height: var(--size-tap-min); }
    .brand { min-height: var(--size-tap-min); }
    .post-card__title-link { display: inline-block; padding-block: var(--space-2); }
  }
  @media (max-width: 520px) {
    .notification { flex-direction: column; align-items: stretch; }
    .search-form { flex-wrap: wrap; }
    .page { padding: var(--space-5) var(--space-3) var(--space-9); }
  }
}

/* ---------- M9b: "..." menus, dialogs, bookmarks, ban controls ---------- */
@layer tokens {
  :root, ::backdrop {
    --color-scrim: rgb(0 0 0 / 0.55);
  }
  :root {
    --size-dialog: 30rem;
    --size-menu-wide: 15rem;
  }
}

@layer components {
  /* a form that only wraps one control (the bookmark button) */
  .inline-form { display: inline-flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
  .action[aria-pressed="true"] .icon { fill: currentColor; }
  .page-title { margin-bottom: var(--space-1); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

  /* the "..." menu of posts and comments: same disclosure pattern as the account menu */
  .more-menu { position: relative; display: inline-flex; align-items: center; }
  .more-menu__button[aria-expanded="true"] { background: var(--color-surface-active); color: var(--color-text); }
  .more-menu__panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: var(--z-header);
    display: grid;
    gap: var(--space-1);
    min-width: var(--size-menu-wide);
    max-width: calc(100vw - var(--space-6));
    padding: var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-media);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    text-align: left;
  }
  /* anchored to the button's left edge (the share button sits near the left of the footer) */
  .more-menu__panel--start { right: auto; left: 0; }
  .more-menu__form { margin: 0; display: grid; }
  .more-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
  }
  .more-menu__item:hover, .more-menu__item:focus-visible { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
  .more-menu__item:focus-visible { outline-offset: calc(var(--border-width-strong) * -1); }
  .more-menu__item[aria-checked="true"] .icon { fill: currentColor; }
  .more-menu__item:disabled { opacity: var(--opacity-disabled); cursor: not-allowed; }
  .more-menu__rule { width: 100%; margin: var(--space-1) 0; border: 0; border-top: var(--border-width) solid var(--color-border); }
  .more-menu__message { margin: 0; padding: var(--space-2) var(--space-3); }

  /* modal dialogs (report, ban): the native element supplies focus trapping and Esc */
  .dialog {
    width: min(var(--size-dialog), calc(100vw - var(--space-6)));
    max-height: calc(100vh - var(--space-6));
    padding: 0;
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
    overflow: auto;
  }
  .dialog::backdrop { background: var(--color-scrim); }
  .dialog__form { padding: var(--space-6); }
  .dialog__title { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .dialog__message { margin: 0; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-bg); }
  .dialog__message[data-state="error"], .field__error[data-state="error"] { border-color: var(--color-border-strong); }
}

/* ---------- utilities ---------- */
@layer utilities {
  .visually-hidden { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stack { display: grid; gap: var(--space-4); }
  .stack[data-gap="sm"] { gap: var(--space-2); }
  .stack[data-gap="lg"] { gap: var(--space-6); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .cluster[data-gap="sm"] { gap: var(--space-2); }
  .cluster[data-gap="lg"] { gap: var(--space-5); }
  [hidden] { display: none; }
}

/* ---------- image lightbox ---------- */
@layer components {
  .prose img[role="button"] { cursor: zoom-in; }

  html[data-lightbox] { overflow: hidden; }

  .lightbox {
    position: fixed; inset: 0; z-index: var(--z-lightbox);
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
    background: var(--color-lightbox); color: var(--color-on-lightbox);
    overscroll-behavior: contain;
  }
  .lightbox:not([open]) { display: none; }
  .lightbox[open] { display: grid; }
  .lightbox::backdrop { background: transparent; }
  .lightbox :focus-visible { outline-color: var(--color-on-lightbox); }
  @media (prefers-reduced-motion: no-preference) {
    .lightbox[open] { animation: lightbox-in var(--duration) var(--ease); }
    .lightbox[open] .lightbox__img { animation: lightbox-zoom var(--duration) var(--ease); }
  }
  @keyframes lightbox-in { from { opacity: 0; } }
  @keyframes lightbox-zoom { from { transform: scale(0.96); } }

  .lightbox__stage {
    display: grid; grid-template-rows: minmax(0, 1fr) auto; place-items: center; gap: var(--space-3);
    min-height: 0; min-width: 0; touch-action: pan-y pinch-zoom;
    padding: max(var(--space-4), env(safe-area-inset-top)) max(var(--space-4), env(safe-area-inset-right)) max(var(--space-4), env(safe-area-inset-bottom)) max(var(--space-4), env(safe-area-inset-left));
  }
  .lightbox__img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; min-height: 0;
    object-fit: contain; user-select: none; -webkit-user-drag: none;
  }
  .lightbox__img[hidden] { display: none; }
  .lightbox__caption, .lightbox__error {
    max-width: var(--size-readable); text-align: center; font-size: var(--text-sm); line-height: var(--leading-snug);
  }
  .lightbox__error { align-self: center; grid-row: 1; }
  .lightbox__caption { grid-row: 2; }

  .lightbox__btn {
    position: absolute; display: grid; place-items: center;
    width: var(--size-tap-min); height: var(--size-tap-min); padding: 0;
    border: 0; border-radius: var(--radius-round);
    background: var(--color-lightbox-control); color: var(--color-on-lightbox);
    font-size: var(--text-lg); line-height: var(--leading-none);
    transition: background-color var(--duration) var(--ease);
  }
  .lightbox__btn:hover { background: var(--color-lightbox-control-hover); }
  .lightbox__close { top: max(var(--space-3), env(safe-area-inset-top)); right: max(var(--space-3), env(safe-area-inset-right)); }
  .lightbox__prev, .lightbox__next { top: 50%; translate: 0 -50%; }
  .lightbox__prev { left: max(var(--space-3), env(safe-area-inset-left)); }
  .lightbox__next { right: max(var(--space-3), env(safe-area-inset-right)); }
  .lightbox--single .lightbox__prev, .lightbox--single .lightbox__next, .lightbox--single .lightbox__count { display: none; }
  .lightbox__count {
    position: absolute; top: max(var(--space-4), env(safe-area-inset-top)); left: 50%; translate: -50% 0;
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill);
    background: var(--color-lightbox-control); font-size: var(--text-sm); font-weight: var(--weight-medium);
  }
  .lightbox__count:empty { display: none; }
}

/* === 9f:begin === */
@layer components {
  /* a person's label: display name first, muted @username next to it */
  .name-label { display: inline; min-width: 0; }
  .name-label__user { color: var(--color-text-secondary); font-weight: var(--weight-regular, 400); }
  .page-head__title .name-label__user { font-size: var(--text-base); }
}
/* === 9f:end === */

/* === 9c:begin === */
/* ---------- M9c: app-like phone experience (tab bar, compact header, sheets, offline page) ----------
   Phones are max-width 767px. Everything here is progressive: desktop rules are untouched, and the tab bar,
   sheets and search icon only exist below that width. */
@layer tokens {
  :root {
    --size-tabbar: 4.5rem;
    --size-header-avatar: 2.25rem;
    --gap-tab: 0.375rem;
    --size-header-compact: 3.5rem;
    --size-fab: 3.25rem;
    --size-tab-icon-w: 3.5rem;
    --size-tab-icon-h: 2rem;
    --size-handle-w: 2.5rem;
    --size-handle-h: 0.25rem;
    --size-sheet-max: 80dvh;
    --lift-fab: 0.5rem;
    --z-tabbar: 6;
    --z-sheet-backdrop: 14;
    --z-sheet: 15;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --scale-press-soft: 0.96;
    --opacity-press: 0.7;
  }
  @media (prefers-reduced-motion: reduce) {
    :root { --scale-press-soft: 1; }
  }
}

@layer base {
  html { -webkit-tap-highlight-color: transparent; }
  a, button, input, select, textarea, summary, label, [role="button"], [role="tab"], [role="menuitem"] { touch-action: manipulation; }
}

@layer components {
  /* the offline page (served by /offline, cached by the service worker): no site chrome */
  .offline {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    text-align: center;
  }
  .offline:focus { outline: 0; }
  .offline__logo { width: var(--size-login-logo); height: var(--size-login-logo); filter: brightness(var(--logo-boost)); }
  .offline__title { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); }
  .offline__text { max-width: var(--size-readable); color: var(--color-text-secondary); }

  /* /submit: the community picker */
  .pick-list { display: grid; gap: var(--space-2); }
  .pick-list__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--size-tap-min);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-media);
    background: var(--color-bg);
    font-weight: var(--weight-medium);
  }
  .pick-list__item:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
  .pick-list__name { min-width: 0; }

  /* phone-only controls stay hidden elsewhere */
  .tabbar, .site-header__searchlink, .site-header__search-close { display: none; }

  .dialog { max-height: calc(100dvh - var(--space-6)); }

  @media (max-width: 767px) {
    body { min-height: 100vh; min-height: 100dvh; }
    body[data-tabs] { padding-bottom: calc(var(--size-tabbar) + var(--safe-bottom)); }
    html {
      scroll-padding-top: calc(var(--size-header-compact) + var(--space-3));
      scroll-padding-bottom: calc(var(--size-tabbar) + var(--safe-bottom) + var(--space-3));
    }

    /* compact header: brand, search icon, theme toggle and the account button; the tab bar has the rest */
    .site-header { position: sticky; }
    .site-header__inner {
      position: relative;
      flex-wrap: nowrap;
      gap: var(--space-2);
      min-height: var(--size-header-compact);
      padding: 0 max(var(--space-3), var(--safe-right)) 0 max(var(--space-3), var(--safe-left));    }
    .site-header__nav, .site-header__bell, .site-header__cta, .user-menu__chevron { display: none; }
    .brand { flex: 0 1 auto; min-width: 0; font-size: var(--text-md); }
    .brand__name { overflow: hidden; text-overflow: ellipsis; }
    .site-header__tools { order: 0; flex-wrap: nowrap; align-items: center; gap: var(--space-1); }
    .site-header__tool { width: var(--size-tap-min); height: var(--size-tap-min); }
    .site-header__searchlink { display: inline-flex; }
    .user-menu__button { display: flex; align-items: center; justify-content: center; gap: 0; flex: none; width: var(--size-tap-min); height: var(--size-tap-min); padding: 0; border-color: transparent; border-radius: var(--radius-round); background: transparent; }
    .user-menu__button:hover, .user-menu__button[aria-expanded="true"] { border-color: transparent; }
    .user-menu__button .avatar { width: var(--size-header-avatar); height: var(--size-header-avatar); }
    .user-menu__name { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip: rect(0 0 0 0); }

    /* the search box collapses to an icon and expands over the whole header bar */
    .site-header__search { display: none; }
    .site-header[data-search="open"] .site-header__search {
      position: absolute;
      inset: 0 var(--space-3);
      z-index: 1;
      display: flex;
      flex: none;
      align-items: center;
      gap: var(--space-2);
      max-width: none;
      background: var(--color-surface);
    }
    .site-header[data-search="open"] .site-header__search-input { flex: 1; width: auto; min-width: 0; }
    .site-header[data-search="open"] .site-header__search-close { display: inline-flex; flex: none; }

    /* the bottom tab bar */
    .tabbar {
      position: fixed;
      inset: auto 0 0 0;
      z-index: var(--z-tabbar);
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      height: calc(var(--size-tabbar) + var(--safe-bottom));
      padding: 0 var(--safe-right) var(--safe-bottom) var(--safe-left);
      background: var(--color-surface);
      border-top: var(--border-width) solid var(--color-border);
      view-transition-name: tabbar;
    }
    .tabbar__item {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--gap-tab);
      min-width: 0;
      min-height: var(--size-tap-min);
      color: var(--color-text-secondary);
      font-size: var(--text-xs);
      font-weight: var(--weight-medium);
      line-height: var(--leading-snug);
    }
    .tabbar__item:hover { color: var(--color-text); text-decoration: none; }
    .tabbar__item[aria-current="page"] { color: var(--color-text); }
    .tabbar__item:focus-visible { outline-offset: calc(var(--border-width-strong) * -1); }
    .tabbar__icon {
      position: relative;
      display: grid;
      place-items: center;
      width: var(--size-tab-icon-w);
      height: var(--size-tab-icon-h);
      border-radius: var(--radius-pill);
      transition: background var(--duration) var(--ease);
    }
    .tabbar__item[aria-current="page"] .tabbar__icon { background: var(--color-accent-fill); color: var(--color-on-accent); }
    .tabbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tabbar__badge {
      position: absolute;
      top: calc(var(--space-1) * -1);
      right: var(--space-1);
      min-width: var(--size-check);
      padding: 0 var(--space-1);
      border: var(--border-width) solid var(--color-surface);
      border-radius: var(--radius-pill);
      background: var(--color-accent-fill);
      color: var(--color-on-accent);
      font-size: var(--text-xs);
      font-weight: var(--weight-bold);
      line-height: var(--leading-normal);
      text-align: center;
    }
    .tabbar__fab {
      display: grid;
      place-items: center;
      width: var(--size-fab);
      height: var(--size-fab);
      border: var(--border-width-strong) solid var(--color-surface);
      border-radius: var(--radius-round);
      background: var(--color-accent-fill);
      color: var(--color-on-accent);
      translate: 0 calc(var(--lift-fab) * -1);
    }
    /* the keyboard is up: the bar would sit on top of the field being typed in */
    body:has(input:focus, textarea:focus, select:focus) .tabbar { display: none; }

    /* "..." menus, the share popover and the account menu open as bottom sheets */
    .more-menu__panel, .user-menu__panel {
      position: fixed;
      inset: auto 0 0 0;
      z-index: var(--z-sheet);
      width: 100%;
      min-width: 0;
      max-width: none;
      max-height: var(--size-sheet-max);
      padding: var(--space-3) var(--space-3) calc(var(--space-3) + var(--safe-bottom));
      overflow-y: auto;
      overscroll-behavior: contain;
      border-width: var(--border-width) 0 0;
      border-radius: var(--radius-card) var(--radius-card) 0 0;
    }
    .more-menu__panel--start { right: 0; left: 0; }
    .more-menu__panel::before, .user-menu__panel::before {
      content: "";
      justify-self: center;
      width: var(--size-handle-w);
      height: var(--size-handle-h);
      margin-bottom: var(--space-2);
      border-radius: var(--radius-pill);
      background: var(--color-border-strong);
    }
    .more-menu__item, .user-menu__item { min-height: var(--size-tap-min); padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
    .sheet-backdrop { position: fixed; inset: 0; z-index: var(--z-sheet-backdrop); background: var(--color-scrim); }
    html[data-sheet] { overflow: hidden; }
    /* the account menu lives inside the header's stacking context: lift the header above the backdrop and dim it itself */
    html[data-sheet="user"] .site-header { z-index: var(--z-sheet); }
    html[data-sheet="user"] .site-header::after { content: ""; position: absolute; inset: 0; background: var(--color-scrim); }
  }

  @media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
    .more-menu__panel:not([hidden]), .user-menu__panel:not([hidden]) { animation: sheet-up var(--duration) var(--ease); }
    .sheet-backdrop { animation: sheet-fade var(--duration) var(--ease); }
  }
  @keyframes sheet-up { from { transform: translateY(100%); } }
  @keyframes sheet-fade { from { opacity: 0; } }

  /* installed (standalone) window: keep the header clear of the status bar / notch, no pull-to-refresh bounce */
  @media (display-mode: standalone) {
    html { overscroll-behavior-y: contain; }
    .site-header { padding-top: var(--safe-top); }
  }

  /* chrome is not text: no selection, no long-press callout (content stays selectable) */
  @media (max-width: 767px), (display-mode: standalone) {
    .button, .action, .vote__btn, .feed-tabs__tab, .tabbar, .site-header__tool, .site-header__link, .user-menu__button, .more-menu__item, .user-menu__item, .brand {
      -webkit-user-select: none;
      user-select: none;
      -webkit-touch-callout: none;
    }
  }

  /* press feedback on touch screens and phones: a quick dip, instant on release */
  @media (hover: none), (max-width: 767px) {
    .action, .vote__btn, .feed-tabs__tab, .more-menu__item, .user-menu__item, .tabbar__icon, .tabbar__label, .tabbar__fab {
      transition: transform var(--duration-fast) var(--ease), opacity var(--duration-fast) var(--ease);
    }
    .action:active, .vote__btn:active, .feed-tabs__tab:active, .more-menu__item:active, .user-menu__item:active, .tabbar__item:active .tabbar__icon, .tabbar__item:active .tabbar__label {
      transform: scale(var(--scale-press-soft));
      opacity: var(--opacity-press);
    }
    .tabbar__item--create:active .tabbar__fab { transform: scale(var(--scale-press-soft)); opacity: var(--opacity-press); }
  }
}

/* Page transitions: a short fade and slide between full page loads (cross-document View Transitions, where the
   browser has them). The tab bar keeps its own layer so it stays still. htmx swaps and the lightbox are not
   navigations and are not affected. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: page-out var(--duration-fast) var(--ease) both; }
  ::view-transition-new(root) { animation: page-in var(--duration) var(--ease) both; }
  @keyframes page-out { to { opacity: 0; } }
  @keyframes page-in { from { opacity: 0; transform: translateY(var(--space-2)); } }
}
/* === 9c:end === */

/* === 10c:begin === */
/* compact card of a comment's first link: small 16:9 og image on the side, site, title, clamped description */
@layer components {
  :root { --size-link-card-img: 8.5rem; --size-link-card: 30rem; }
  .prose .link-card, .link-card { display: grid; grid-template-columns: var(--size-link-card-img) minmax(0, 1fr); align-items: stretch; width: 100%; max-width: var(--size-link-card); margin: var(--space-3) 0 0; border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-hover); color: var(--color-text); overflow: hidden; text-decoration: none; line-height: var(--leading-snug); }
  .link-card--plain { grid-template-columns: minmax(0, 1fr); }
  .link-card:hover { border-color: var(--color-border-strong); color: var(--color-text); text-decoration: none; }
  .prose .link-card__image, .link-card__image { width: 100%; height: 100%; min-height: 4.75rem; max-height: none; aspect-ratio: var(--ratio-video); object-fit: cover; border: 0; border-radius: 0; background: var(--color-surface-active); }
  .link-card__text { display: grid; align-content: center; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3); overflow-wrap: anywhere; }
  .link-card__site { font-size: var(--text-xs); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .link-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .link-card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--text-xs); color: var(--color-text-secondary); }
  @media (max-width: 480px) {
    :root { --size-link-card-img: 5.5rem; }
    .link-card__desc { -webkit-line-clamp: 1; }
  }
}
/* === 10c:end === */
/* === 10d:begin === */
/* badge tooltips: pure CSS from data-tip (role badges, level tags, profile achievements). Shown on hover, on focus
   (keyboard) and on tap (a tap leaves the element hovered on touch). Text in the tip is never the accessible name. */
@layer components {
  :root { --size-tooltip: 11rem; }
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 50%;
    translate: -50% 0;
    z-index: var(--z-header);
    width: max-content;
    max-width: min(var(--size-tooltip), calc(100vw - 2 * var(--space-4)));
    padding: var(--space-1) var(--space-2);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-media);
    background: var(--color-text);
    color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1.35;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration) var(--ease);
  }
  [data-tip]:hover::after,
  [data-tip]:focus::after,
  [data-tip]:focus-visible::after { opacity: 1; visibility: visible; }
}
/* === 10d:end === */

/* === 10e:begin === */
/* header wordmark: the lowercase word "social" in a self-hosted handwriting font (Caveat, SIL OFL 1.1, Latin subset of "social") */
@font-face {
  font-family: "Ozillo Script";
  src: url("caveat-social-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.brand__name {
  padding-bottom: 0;
  overflow: visible;
  font-family: "Ozillo Script", "Caveat", "Segoe Script", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: 1.55em;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-text);
  position: relative;
  top: -0.14em;
}
/* === 10e:end === */
/* === 10g:begin === */
/* footer sticks to the bottom of the viewport on short pages */
@layer layout {
  body { min-height: 100dvh; display: flex; flex-direction: column; }
  /* auto-margin containers would shrink-wrap their content inside the flex column: keep them full width */
  body > .page, body > main { width: 100%; }
  .page { width: 100%; }
  body > .site-footer { margin-top: auto; }
}
/* === 10g:end === */

/* === 10a:begin === */
/* quick post card at the top of the home and community feeds: wide screens only (phones have the tab bar's centre button) */
@layer components {
  .composer { display: none; }
  @media (min-width: 768px) {
    .composer { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); background: var(--color-surface); }
    .composer__input { display: flex; align-items: center; flex: 1; min-width: 0; min-height: var(--size-field); padding: 0 var(--space-4); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg); color: var(--color-text-secondary); transition: background var(--duration) var(--ease), color var(--duration) var(--ease); }
    .composer__input:hover { background: var(--color-surface-hover); color: var(--color-text); text-decoration: none; }
    .composer__action { flex: none; }
  }
}
/* === 10a:end === */

/* === 10b:begin === */
/* "(düzenlendi)" mark, and the popular-comment teasers under a feed card */
@layer components {
  .edited-mark { color: var(--color-text-secondary); font-size: var(--text-xs); white-space: nowrap; }
  .teasers { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
  .teaser { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-2) var(--space-3); border: var(--border-width) solid var(--color-border); border-radius: var(--radius); background: var(--color-surface-hover); }
  .teaser__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--color-text-secondary); }
  .teaser__author { font-weight: var(--weight-semibold); color: var(--color-text); }
  .teaser__text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: var(--leading-snug); color: var(--color-text); text-decoration: none; }
  .teaser__text:hover { text-decoration: underline; }
  @media (max-width: 480px) {
    .teaser { padding: var(--space-2); }
  }
}
/* === 10b:end === */

/* === 10f:begin === */
/* desktop: the right sidebar (.page__aside) stays in view while the feed scrolls; it scrolls itself if taller than the viewport */
@layer layout {
  @media (min-width: 861px) {
    .page__aside {
      position: sticky;
      /* same offset as the page's own top padding, so the sidebar does not glide when the sticky starts */
      top: calc(var(--size-header) + var(--space-7));
      align-self: start;
      max-height: calc(100dvh - var(--size-header) - var(--space-7) - var(--space-4));
      overflow-y: auto;
      overscroll-behavior: contain;
      scrollbar-width: thin;
      padding-bottom: var(--space-1);
    }
  }
}
/* === 10f:end === */
/* === 10h:begin === */
/* whole feed card opens the post (stretched title link); names, badges, buttons and menus stay their own targets */
@layer components {
  .post-card { position: relative; cursor: pointer; }
  .post-card__title-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .post-card a:not(.post-card__title-link),
  .post-card button,
  .post-card [data-tip],
  .post-card__vote { position: relative; z-index: 1; }
  .post-card__footer { position: relative; z-index: 2; cursor: default; }
  .post-card__vote { cursor: default; }
  .post-card :is(a, button) { cursor: pointer; }
  /* a hovered/focused badge must paint its tooltip above the sibling links that also sit at z-index 1 */
  [data-tip]:hover,
  [data-tip]:focus-visible { z-index: 5; }
  .post-card__title-link:focus-visible { outline: none; }
  .post-card:has(.post-card__title-link:focus-visible) { outline: var(--border-width) solid var(--color-accent-fill); outline-offset: 2px; }
}
/* === 10h:end === */
/* === 10j:begin === */
/* popular-comment teasers as small chat bubbles under the feed card: soft corners, quiet score pill, whole bubble is the link */
@layer components {
  .teasers { gap: var(--space-3); }
  .teaser {
    position: relative;
    margin-left: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 0;
    border-radius: var(--radius-card);
    background: var(--color-bg);
  }
  .teaser__text { color: var(--color-text); text-decoration: none; }
  .teaser__text::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .teaser:hover { outline: var(--border-width) solid var(--color-border); }
  .teaser:hover .teaser__text { text-decoration: none; }
  .teaser__meta { gap: var(--space-1); font-size: var(--text-xs); }
  .teaser__text { display: block; margin-top: var(--space-1); }
  .post-card a.teaser__text { position: static; z-index: auto; }
  @media (max-width: 480px) {
    .teaser { margin-left: var(--space-3); padding: var(--space-3); }
  }
}
/* === 10j:end === */
/* === 10k:begin === */
@layer components {
  .optlist { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  .optlist__row { display: flex; align-items: center; gap: var(--space-2); }
  .optlist__num { flex: none; display: grid; place-items: center; width: var(--space-6); height: var(--space-6); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-pill); font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
  .optlist__input { flex: 1; min-width: 0; min-height: max(var(--size-tap), 2.75rem); }
  .optlist__count { flex: none; min-width: 2ch; font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); text-align: right; }
  .optlist__rm, .optlist__add { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 var(--space-3); background: var(--color-bg); color: var(--color-text); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius); font-weight: var(--weight-semibold); cursor: pointer; }
  .optlist__add { justify-self: start; width: fit-content; }
  .optlist__rm:hover:not(:disabled), .optlist__add:hover:not(:disabled) { background: var(--color-surface-hover); }
  .optlist__rm:disabled, .optlist__add:disabled { opacity: .45; cursor: not-allowed; }
  .optlist__rm:focus-visible, .optlist__add:focus-visible, .optlist__input:focus-visible { outline: var(--border-width-strong) solid var(--color-text); outline-offset: 2px; }
  .optlist__msg:empty { display: none; }
  @media (max-width: 480px) { .optlist__num { display: none; } }
}
/* === 10k:end === */
/* === 10l:begin === */
/* post detail page: wider page (72 rem -> 83 rem; the aside stays); the post text keeps a ~46 rem measure (about 75
   characters per line) with looser leading, and the sidebar gets a contents card (app.js, "reading") for long posts;
   single column below 860 px as before */
@layer tokens {
  :root { --size-post-page: 83rem; --size-post-text: 46rem; --text-post-body: 1.0625rem; }
}
@layer layout {
  .page[data-width="post"] { max-width: var(--size-post-page); }
  @media (max-width: 860px) {
    .page[data-width="post"] { grid-template-columns: minmax(0, 1fr); }
  }
}
@layer components {
  .post-detail__body { max-width: var(--size-post-text); font-size: var(--text-post-body); line-height: 1.75; gap: var(--space-5); }
  .read-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none; background: transparent; }
  .read-progress__bar { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: var(--color-accent-fill); }
  .toc__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
  .toc__list a { display: block; padding-left: var(--space-3); border-left: 2px solid var(--color-border); color: var(--color-text-secondary); text-decoration: none; line-height: var(--leading-snug); }
  .toc__list a:hover, .toc__list a[aria-current="true"] { border-left-color: var(--color-accent-fill); color: var(--color-text); }
  .toc__list [data-level="4"] a { margin-left: var(--space-3); }
  .toc__list [data-level="5"] a, .toc__list [data-level="6"] a { margin-left: var(--space-5); }
  .post-detail__body :is(h3, h4, h5, h6) { scroll-margin-top: 5rem; }
  /* prose is a grid: an auto track grew to the widest child (a wide image, a link card), so a revealed spoiler widened the page */
  .prose, .post-detail__body { grid-template-columns: minmax(0, 1fr); }
  .prose > * { min-width: 0; }
  .prose img, .prose iframe, .prose video { max-width: 100%; }
  /* the spoiler box never takes its width from what is revealed inside it */
  .spoiler, .spoiler__content { min-width: 0; }
  .spoiler__content { contain: inline-size; }
  .post-card__body, .post-detail__main { min-width: 0; }
  .post-card__media, .post-card__cover, .link-preview__image, .link-card__image { max-width: 100%; min-width: 0; }
}
@layer components {
  /* `.prose img` (inline body images) out-specified the player thumbnail: it showed at its natural 4:3 box with bars instead of filling the 16:9 frame */
  .prose .video-embed__thumb {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; border: 0; border-radius: 0; background: none;
  }
}
/* === 10l:end === */
/* === 10n:begin === */
/* community settings page rhythm: stacked section cards get a gap; one 1rem rhythm inside each card (heading block
   keeps its own 0.5rem); the flair "Renk" legend lines up with the labels and the swatches get even spacing; the
   file input looks like the text inputs; appointed mods row up like the flair rows.
   Layout order note: the .stack/.cluster utilities are in @layer utilities, so the two rules that override them live there. */
@layer components {
  .page__main > .panel + .panel { margin-top: var(--space-6); }
  fieldset.cluster > legend.field__label { float: left; width: 100%; margin: 0 0 var(--space-2); padding: 0; }
  fieldset.cluster > .flair-choice { margin: 0 var(--space-4) var(--space-2) 0; }
  .field__control[type="file"] { min-height: 3.125rem; padding: var(--space-2) var(--space-3); cursor: pointer; }
  .field__control[type="file"]::file-selector-button {
    margin-inline-end: var(--space-3); padding: var(--space-1) var(--space-3);
    border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius);
    background: var(--color-surface); color: var(--color-text);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); cursor: pointer;
  }
  .field__control[type="file"]::file-selector-button:hover { background: var(--color-surface-hover); }
  .panel .mod-item:has(> .mod-item__form) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
}
@layer utilities {
  section.panel.stack[data-gap="lg"] { gap: var(--space-4); }
  /* the empty flair state sits under its heading like the heading's own helper text does */
  section.panel.stack[data-gap="lg"]:has(> .stack[data-gap="sm"] + .field__hint) { gap: var(--space-2); }
  fieldset.cluster { display: block; }
}
/* === 10n:end === */
/* === 10o:begin === */
/* phone vote pill (feed cards and post page, horizontal below 521 px): the pill is the 44 px touch target; the round
   buttons (34 px) sit inside its 1 px border and 4 px padding with equal inset, so the active fill never leaves the pill;
   the 44 px hit areas are pseudo-elements; count centred with equal sides. Comments (.vote--inline) are untouched. */
@layer tokens {
  :root { --size-vote-btn: calc(var(--size-tap-min) - 2 * (var(--space-1) + var(--border-width))); }
}
@layer components {
  @media (max-width: 520px) {
    .vote:not(.vote--inline) {
      box-sizing: border-box;
      height: var(--size-tap-min);
      min-width: 0;
      padding: var(--space-1);
    }
    .vote:not(.vote--inline) .vote__btn {
      position: relative;
      flex: none;
      width: var(--size-vote-btn);
      height: var(--size-vote-btn);
      min-width: 0;
      min-height: 0;
      border-radius: var(--radius-pill);
    }
    /* invisible 44 px hit area: the button plus the pill's border and padding */
    .vote:not(.vote--inline) .vote__btn::before {
      content: "";
      position: absolute;
      inset: calc(-1 * (var(--space-1) + var(--border-width)));
      border-radius: inherit;
    }
    .vote:not(.vote--inline) .vote__count {
      flex: none;
      min-width: 3ch;
      padding: 0 var(--space-2);
      text-align: center;
      font-variant-numeric: tabular-nums;
    }
    /* ring drawn inside the round button, so it never meets the pill border */
    .vote:not(.vote--inline) .vote__btn:focus-visible {
      border-radius: var(--radius-pill);
      outline-offset: calc(var(--border-width-strong) * -1);
    }
  }
}
/* === 10o:end === */
/* === 10p:begin === */
/* app feel on phones and in the installed PWA: iOS Safari zooms the page when a focused field has a font-size under 16px,
   so every text field is 16px on touch/small screens; double-tap zoom is off (pinch zoom stays for accessibility) */
@layer utilities {
  html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  @media (max-width: 860px), (hover: none) and (pointer: coarse) {
    :is(input, textarea, select):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="button"]):not([type="submit"]) {
      font-size: max(1rem, 16px);
    }
  }
}
/* === 10p:end === */
/* === yanki-tip:begin === */
/* wider tooltip for the profile Yankı stat (data-tip-size="lg") */
@layer components {
  :root { --size-tooltip-lg: 18rem; }
  [data-tip][data-tip-size="lg"]::after {
    max-width: min(var(--size-tooltip-lg), calc(100vw - 2 * var(--space-4)));
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
    text-align: left;
  }
}
/* === yanki-tip:end === */

/* === composer-collapse:begin === */
@layer components {
  /* Top-level comment box: one row until the reader focuses it or types. Reply boxes are not collapsible. */
  form[data-collapsible] .field__control--area { transition: min-height var(--duration) var(--ease); }
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .field__label { position: absolute; width: var(--border-width); height: var(--border-width); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .field__control--area { min-height: var(--size-field); height: var(--size-field); resize: none; overflow: hidden; }
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .editor__bar,
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .editor__preview,
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .editor__status,
  form[data-collapsible]:not(:focus-within):not([data-dirty]):not(:has(.editor[data-mode="preview"])) .cluster { display: none; }
}
@layer components {
  /* Roomier spacing in the expanded comment box: label, toolbar, text area and submit row each get air. */
  form[data-comment-form].stack { gap: var(--space-4); }
  form[data-comment-form] .field { gap: var(--space-3); }
  form[data-comment-form] .editor { gap: var(--space-3); }
}
/* === composer-collapse:end === */
/* === mod-picker:begin === */
.mod-picker .mod-item__content { display: flex; align-items: center; gap: var(--space-2); }
/* === mod-picker:end === */
/* === onboarding:begin === */
@layer components {
  .onb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .onb-bar__count { margin: 0; font-weight: 600; }
  .onb-search { display: flex; gap: var(--space-2); }
  .onb-search .field__control { flex: 1; min-width: 0; }
  .onb-feed-hint { margin: 0 0 var(--space-3); }
}
/* === onboarding:end === */
/* === font:begin === */
/* Google Sans Flex (SIL OFL 1.1, see google-sans-flex-OFL.txt): the weight axis only, self-hosted in two Unicode subsets
   (latin ~50 KB, latin-ext ~26 KB; Turkish ç ğ ı İ ö ş ü are covered). Nothing is requested from Google. */
@font-face {
  font-family: "Google Sans Flex";
  src: url("google-sans-flex-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  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: "Google Sans Flex";
  src: url("google-sans-flex-latin-wght-normal.woff2") format("woff2");
  font-weight: 1 1000;
  font-style: normal;
  font-display: swap;
  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:end === */

/* === seo2:begin === */
@layer components {
  .home-intro { margin: 0 0 var(--space-4); padding: var(--space-4); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-card); }
  .home-intro__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.25; color: var(--color-text); }
  .home-intro__text { margin: 0; font-size: var(--text-base); color: var(--color-text-secondary); }
}
/* === seo2:end === */

/* === footer2:begin === */
/* site footer: brand, Ozillo family backlinks, discovery links */
@layer components {
  .site-footer { border-top: var(--border-width) solid var(--color-border); background: var(--color-surface); color: var(--color-text-secondary); }
  .site-footer__inner {
    max-width: var(--size-page);
    margin: 0 auto;
    padding: var(--space-8) var(--space-4) var(--space-7);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7) var(--space-8);
    font-size: var(--text-sm);
  }
  .site-footer__brand { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
  .site-footer__about { margin: 0; max-width: 26rem; line-height: var(--leading-normal); }
  .site-footer__copy { margin: 0; font-size: var(--text-xs); }
  .site-footer__col { min-width: 0; }
  .site-footer__title { margin: 0 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-text-secondary); }
  .site-footer__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
  .site-footer__link {
    display: grid;
    gap: 0;
    min-height: var(--size-tap-min);
    align-content: center;
    border-radius: var(--radius);
    color: var(--color-text);
    transition: color var(--duration) var(--ease);
  }
  .site-footer__link:hover { text-decoration: none; color: var(--color-text); }
  .site-footer__link:hover .site-footer__name { text-decoration: underline; text-underline-offset: 0.2em; }
  .site-footer__link:focus-visible { outline: var(--border-width-strong) solid var(--color-ring); outline-offset: var(--space-1); }
  .site-footer__name { font-weight: var(--weight-medium); }
  .site-footer__note { font-size: var(--text-xs); color: var(--color-text-secondary); }
  @media (max-width: 767px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: var(--space-6) var(--space-4) var(--space-5); gap: var(--space-5) var(--space-4); }
    .site-footer__brand { grid-column: 1 / -1; gap: var(--space-2); }
    .site-footer__link { min-height: var(--size-tap-min); }
  }
  @media (max-width: 479px) {
    .site-footer__inner { grid-template-columns: minmax(0, 1fr); }
  }
}
/* === footer2:end === */

/* === consent:begin === */
@layer tokens { :root { --z-consent: 25; } }
@layer components {
  .consent {
    position: fixed;
    inset: auto var(--space-4) var(--space-4) var(--space-4);
    z-index: var(--z-consent);
    display: grid;
    gap: var(--space-3);
    max-width: 40rem;
    margin-inline: auto;
    padding: var(--space-4);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
  }
  .consent[hidden] { display: none; }
  .consent__text { font-size: var(--text-sm); }
  .consent__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
  button.site-footer__link { padding: 0; border: 0; background: none; text-align: start; }
  /* Phones: sit above the bottom tab bar. */
  @media (max-width: 767px) {
    .consent { bottom: calc(var(--size-tabbar) + var(--space-3) + env(safe-area-inset-bottom)); }
  }
}
/* === consent:end === */

/* === counter:begin === */
@layer components {
  .field__counter { font-variant-numeric: tabular-nums; white-space: nowrap; }
}
/* === counter:end === */