/*
 * Design 1 — "Planet"
 *
 * Follows the official Cockpit mockup (Pages/cockpit.html in the styleguide
 * repo): neutral canvas, white rounded widget cards that lift on hover, a
 * tinted icon circle per widget, a Planet-blue accent card for the welcome
 * widget with acid-yellow highlights. Pill buttons, chips, filled inputs.
 *
 * Loads after application.css and overrides its tokens and components.
 */

:root {
  /* Planet tokens */
  --planet-primary: #0000FF;
  --planet-secondary: #D4FF00;
  --planet-black: #000000;
  --planet-white: #ffffff;
  --planet-tint: #DCDCDC;
  --planet-input-fill: #ECECEC;
  --planet-neutral: #F5F5F5;

  /* Motion (styleguide tokens) */
  --motion-instant: 120ms;
  --motion-fast: 200ms;
  --motion-default: 300ms;
  --ease-out: cubic-bezier(0.25, 0.8, 0.25, 1);

  /* Type scale (styleguide tokens at their desktop values — pinned instead
     of vw-fluid so the app matches the mockup at any window size; meta for
     list content, h4 for widget titles, h3 for brand/greeting, h2 for the
     page title) */
  --text-meta: 1rem;
  --text-h4: 2rem;
  --text-h3: 2.5rem;
  --text-h2: clamp(3.5rem, 6vw, 5rem);

  /* Remap the base tokens — neutral canvas, white surfaces */
  --color-bg: var(--planet-neutral);
  --color-surface: var(--planet-white);
  --color-border: var(--planet-tint);
  --color-text: var(--planet-black);
  --color-text-muted: rgba(0, 0, 0, 0.5);
  --color-primary: var(--planet-primary);
  --color-primary-contrast: var(--planet-white);
  --color-danger: #b42318;
  --color-success: var(--planet-primary);

  --font-sans: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --radius: 24px;
  --shadow-card: 0 1px 0 color-mix(in srgb, var(--planet-black) 4%, transparent);

  --weight-body: 500;
  --weight-display: 600;
}

/* Phones: the pinned desktop scale is far too large on a ~390px screen —
   shrink the display sizes and the list/meta size in one place. */
@media (max-width: 767.98px) {
  :root {
    --text-meta: 0.875rem;
    --text-h4: 1.25rem;
    --text-h3: 1.5rem;
    --text-h2: 2.25rem;
  }
}

/* --- Base ----------------------------------------------------------------- */

body {
  font-weight: var(--weight-body);
  line-height: 1.4;
}

h1,
h2,
h3 {
  font-weight: var(--weight-display);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

h1 { font-size: 2rem; }

@media (max-width: 767.98px) {
  h1 { font-size: 1.5rem; }
}

a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: var(--weight-display);
}

/* --- Header: transparent on the canvas, like the mockup nav ------------------- */

.site-header {
  background: transparent;
  border-bottom: 0;
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--planet-primary);
  font-weight: var(--weight-display);
  font-size: var(--text-h3);
  letter-spacing: -0.01em;
  line-height: 1;
}

/* Blue sphere next to the wordmark, after the styleguide's
   .planet-outro__sphere: a solid ball with softly blurred bounds. On hover
   it goes full disco — spins through the whole spectrum while pulsing. */
.site-header__brand::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background: var(--planet-primary);
  filter: blur(0.09em);
}

.site-header__brand:hover::before {
  animation: brand-sphere-disco 1.2s linear infinite;
}

@keyframes brand-sphere-disco {
  0% {
    filter: blur(0.09em) hue-rotate(0deg) saturate(2);
    transform: scale(1);
  }

  25% {
    transform: scale(1.18);
  }

  50% {
    filter: blur(0.12em) hue-rotate(180deg) saturate(3);
    transform: scale(0.95);
  }

  75% {
    transform: scale(1.18);
  }

  100% {
    filter: blur(0.09em) hue-rotate(360deg) saturate(2);
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header__brand:hover::before {
    animation: none;
  }
}

.site-header__brand:hover {
  text-decoration: none;
  opacity: 0.75;
}

/* Compact 40px pill buttons in the nav (mockup .cockpit-nav .btn). */
.site-header .btn {
  display: inline-flex;
  align-items: center;
  height: 2.5rem;
  padding: 0 var(--space-4);
  font-size: var(--text-meta);
}

/* background-color (not the shorthand) so the photo variant's
   background-size: cover from the base stylesheet isn't reset. */
.avatar {
  background-color: var(--planet-primary);
  color: var(--planet-white);
  font-weight: var(--weight-display);
}

.avatar--photo {
  color: transparent;
  background-color: var(--planet-tint);
}

.site-header__link {
  color: var(--planet-black);
  font-weight: var(--weight-display);
}

.site-header__link:hover {
  color: var(--planet-primary);
  text-decoration: none;
}

.locale-switcher select {
  border: 0;
  border-bottom: 1px solid var(--planet-black);
  border-radius: 0;
  background: transparent;
  padding: var(--space-1) 0;
  font-weight: var(--weight-body);
  cursor: pointer;
}

.locale-switcher select:focus {
  outline: none;
  border-bottom-color: var(--planet-primary);
}

/* --- Buttons: pills ----------------------------------------------------------- */

.btn {
  border-radius: 999px;
  padding: 0.55rem 1.25rem;
  font-weight: var(--weight-display);
  line-height: 1;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.btn--primary {
  background: var(--planet-primary);
  color: var(--planet-white);
}

.btn--primary:hover {
  background: var(--planet-black);
}

.btn--ghost {
  color: var(--planet-black);
  border-color: var(--planet-black);
  background: transparent;
}

.btn--ghost:hover {
  background: var(--planet-black);
  color: var(--planet-white);
  text-decoration: none;
}

.btn--ghost.btn--danger {
  color: var(--color-danger);
  border-color: currentColor;
}

.btn--ghost.btn--danger:hover {
  background: var(--color-danger);
  color: var(--planet-white);
}

/* Icon-only row actions stay circular despite the pill padding above. */
.btn--icon {
  padding: 0;
}

/* --- Flash ----------------------------------------------------------------- */

/* CI banners: notice = primary blue block with acid icon, alert = acid
   block with black text — the two brand colors doing the talking. */
.flash {
  border: 0;
  border-radius: 24px;
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-6);
  font-weight: var(--weight-display);
  align-items: center;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--planet-black) 12%, transparent);
}

.flash--notice {
  background: var(--planet-primary);
  color: var(--planet-white);
}

.flash--notice .flash__icon {
  color: var(--planet-secondary);
}

.flash--alert {
  background: var(--planet-secondary);
  color: var(--planet-black);
}

.confirm-dialog {
  background: var(--planet-white);
  border-radius: 24px;
  box-shadow: 0 24px 64px color-mix(in srgb, var(--planet-black) 25%, transparent);
}

.confirm-dialog::backdrop {
  background: color-mix(in srgb, var(--planet-black) 40%, transparent);
}

/* --- Shell spacing (mockup: 72px nav, 40px under the head, 40/80px page) --------- */

.site-header__inner {
  padding-block: var(--space-4);
}

.site-main {
  /* Mockup .cockpit-main: 40px top, 80px bottom, 24-48px fluid sides.
     Applies to every page (admin included), not just the wide dashboard,
     so all pages share the same gutters. */
  padding: 2.5rem clamp(1.5rem, 3vw, 3rem) 5rem;
}

/* Keep the editor's save bar close to the form (see application.css). */
.site-main--savebar {
  padding-bottom: var(--space-3);
}

/* --- Page head: big display title like the mockup's "Dein Cockpit" -------------- */

.page-head {
  margin-block-end: 2.5rem;
}

/* Mockup .cockpit-hint: 16px at 65%. */
.dashboard-hint,
.page-hint {
  font-size: var(--text-meta);
  color: inherit;
  opacity: 0.65;
}

.page-head h1 {
  font-size: var(--text-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* 48px action pills next to the title (mockup .cockpit-head .btn). */
.page-head .btn {
  display: inline-flex;
  align-items: center;
  height: 3rem;
  padding: 0 var(--space-4);
  font-size: var(--text-meta);
}

/* --- Login: editorial, no card -------------------------------------------------- */

.login-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  text-align: left;
  max-width: 34rem;
  margin: 16vh auto 0;
  padding: 0;
}

.login-card::before {
  content: "";
  display: block;
  width: 4rem;
  height: 2px;
  background: var(--planet-primary);
  margin-bottom: var(--space-6);
}

.login-card h1 {
  font-size: var(--text-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-4);
}

.login-card__note {
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
}

.login-card .btn {
  width: auto;
  padding: 0.75rem 1.75rem;
}

/* --- Lists become line rows -------------------------------------------------- */

.card-list {
  gap: 0;
  border-top: 1px solid var(--planet-tint);
}

.card-list__item {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--planet-tint);
  border-radius: 0;
  padding: var(--space-6) 0;
}

/* --- Chips ----------------------------------------------------------------- */

.badge {
  border: 1px solid var(--planet-tint);
  color: var(--planet-black);
  background: var(--planet-white);
  font-size: 0.8125rem;
  font-weight: var(--weight-display);
  padding: 0.1rem 0.65rem;
}

/* Chips in CI colors only (black, grey, CI blue — channels get acid/blue).
   States are distinguished by fill vs. outline vs. muted. */

/* Channels: Neuigkeiten acid, Events blue, anything future black outline. */
.badge--channel {
  color: var(--planet-black);
  border-color: var(--planet-black);
  background: var(--planet-white);
}

.badge--channel-news {
  color: var(--planet-black);
  border-color: var(--planet-secondary);
  background: var(--planet-secondary);
}

.badge--channel-events {
  color: var(--planet-white);
  border-color: var(--planet-primary);
  background: var(--planet-primary);
}

/* Status: blue outline = live, black outline = scheduled,
   grey fill = expired, black fill = manually hidden. */
.badge--published {
  color: var(--planet-primary);
  border-color: var(--planet-primary);
  background: var(--planet-white);
}

.badge--scheduled {
  color: var(--planet-black);
  border-color: var(--planet-black);
  background: var(--planet-white);
}

.badge--expired {
  color: rgba(0, 0, 0, 0.5);
  border-color: transparent;
  background: var(--planet-input-fill);
}

.badge--hidden {
  color: var(--planet-white);
  border-color: var(--planet-black);
  background: var(--planet-black);
}

/* Audience: everyone is quiet grey; a targeted subset pops in blue tint. */
.badge--audience-all {
  color: rgba(0, 0, 0, 0.5);
  border-color: var(--planet-tint);
  background: transparent;
}

.badge--audience-limited {
  color: var(--planet-primary);
  border-color: color-mix(in srgb, var(--planet-primary) 30%, var(--planet-white));
  background: color-mix(in srgb, var(--planet-primary) 8%, var(--planet-white));
}

/* Languages: translated = blue tint with check, missing = dimmed outline. */
.badge--lang-done {
  color: var(--planet-primary);
  border-color: color-mix(in srgb, var(--planet-primary) 30%, var(--planet-white));
  background: color-mix(in srgb, var(--planet-primary) 8%, var(--planet-white));
}

.badge--lang-missing {
  color: rgba(0, 0, 0, 0.35);
  border-color: var(--planet-tint);
  background: transparent;
}

/* --- Forms: editorial, filled inputs ------------------------------------------- */

.form {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.form__field input[type="text"],
.form__field input[type="number"],
.form__field textarea,
.form__field select,
.form__field input[type="datetime-local"],
.ai-panel textarea {
  background: var(--planet-input-fill);
  border: 0;
  border-radius: 6px;
  padding: 0.7rem 1rem;
  transition: box-shadow 120ms ease;
}

/* The blue underline is for text-like fields; a checkbox with it looks
   half-checked, so it keeps its native focus ring instead. */
.form__field input:focus:not([type="checkbox"]),
.form__field textarea:focus,
.form__field select:focus,
.ai-panel textarea:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--planet-primary);
}

.form__field label,
.form__field legend {
  font-weight: var(--weight-display);
}

.checkbox-grid {
  border-color: var(--planet-tint);
  border-radius: 6px;
}

.ai-panel {
  border: 1px solid var(--planet-tint);
  border-radius: 6px; /* matches trix-editor */
}

.post-form__card,
.post-form__savebar {
  background: var(--planet-white);
  border-color: var(--planet-tint);
}

.post-form__savebar {
  box-shadow: 0 10px 30px color-mix(in srgb, var(--planet-black) 12%, transparent);
}

.audience-fields__filter {
  background: var(--planet-input-fill);
  border: 0;
  border-radius: 6px;
  padding: 0.7rem 1rem;
}

.audience-fields__filter:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--planet-primary);
}

trix-editor {
  background: var(--planet-input-fill);
  border: 0;
  border-radius: 6px;
  padding: 0.7rem 1rem;
}

trix-editor:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--planet-primary);
}

/* Trix toolbar in CI: white pill button groups on the neutral canvas,
   acid highlight for active formats, blue focus/dialog accents. The icons
   themselves are Trix's SVG sprites and stay near-black. */
trix-toolbar .trix-button-group {
  border: 1px solid var(--planet-tint);
  border-radius: 999px;
  overflow: hidden;
  background: var(--planet-white);
  margin-bottom: var(--space-2);
}

trix-toolbar .trix-button {
  border: 0;
  border-radius: 0;
  background: transparent;
}

trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid var(--planet-neutral);
}

trix-toolbar .trix-button:not(:disabled):hover {
  background: var(--planet-neutral);
}

trix-toolbar .trix-button.trix-active {
  background: var(--planet-secondary);
}

trix-toolbar .trix-dialog {
  border: 1px solid var(--planet-tint);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  background: var(--planet-white);
}

trix-toolbar .trix-input--dialog {
  background: var(--planet-input-fill);
  border: 0;
  border-radius: 6px;
}

trix-toolbar .trix-input--dialog:focus {
  outline: none;
  box-shadow: inset 0 -2px 0 var(--planet-primary);
}

trix-toolbar .trix-button--dialog {
  color: var(--planet-primary);
  font-weight: var(--weight-display);
  border-color: var(--planet-tint);
}

/* --- Tabs & admin nav ----------------------------------------------------------- */

.locale-tabs {
  border-bottom-color: var(--planet-tint);
}

.locale-tabs__tab {
  color: var(--color-text-muted);
}

.locale-tabs__tab.is-active {
  color: var(--planet-primary);
  border-bottom-color: var(--planet-primary);
}

.admin-nav {
  border-bottom-color: var(--planet-tint);
}

.admin-nav__link:hover {
  color: var(--planet-primary);
  text-decoration: none;
}

.admin-nav__link.is-active {
  color: var(--planet-primary);
  border-bottom-color: var(--planet-primary);
}

/* --- Widget cards: white, rounded, lift on hover (mockup .widget) ---------------- */

/* Mockup spacing: 24px gaps between widgets, 24px padding inside them. */
.dashboard-grid {
  gap: var(--space-6);
}

.widget-card {
  background: var(--planet-white);
  border: 1px solid color-mix(in srgb, var(--planet-black) 6%, transparent);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
  transition: border-color var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out);
}

/* Mockup: head padding-bottom 16px + body padding-top 24px = 40px between
   the header and the content; 16px between icon and title. */
.widget-card__header {
  margin-block-end: 2.5rem;
  gap: var(--space-4);
}

.widget-card:hover {
  border-color: color-mix(in srgb, var(--planet-primary) 35%, var(--planet-tint));
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .widget-card:hover {
    transform: none;
  }
}

.widget-card__icon {
  background: color-mix(in srgb, var(--planet-primary) 10%, var(--planet-neutral));
}

.widget-card__icon .material-icons-outlined {
  font-size: 24px; /* styleguide --icon token */
  color: var(--planet-primary);
}

/* Mockup .widget__title-text: h4-sized title (24-32px, line-height 1.1,
   no letter-spacing); source label at body size (16px), body weight, 50 %
   opacity — inherits the card's text color so accent cards stay legible. */
.widget-card__heading h2 {
  font-size: var(--text-h4);
  font-weight: var(--weight-display);
  letter-spacing: normal;
  line-height: 1.1;
}

.widget-card__source {
  font-size: var(--text-meta);
  font-weight: var(--weight-body);
  color: inherit;
  opacity: 0.5;
  letter-spacing: normal;
}

/* Mockup .widget__empty: empty/error notes at 16px, 50%, line-height 1.4. */
.widget-card__body .text-muted {
  font-size: var(--text-meta);
  line-height: 1.4;
}

/* --- Accent card: the welcome widget goes Planet-blue (mockup widget--accent) ---- */

.widget-card[data-widget="welcome"] {
  background: var(--planet-primary);
  border-color: var(--planet-primary);
  box-shadow: none;
}

.widget-card[data-widget="welcome"],
.widget-card[data-widget="welcome"] h2,
.widget-card[data-widget="welcome"] p,
.widget-card[data-widget="welcome"] span,
.widget-card[data-widget="welcome"] strong {
  color: var(--planet-white);
}

.widget-card[data-widget="welcome"] .widget-card__icon {
  background: color-mix(in srgb, var(--planet-white) 14%, transparent);
}

.widget-card[data-widget="welcome"] .widget-card__icon .material-icons-outlined {
  color: var(--planet-secondary);
}

.widget-card[data-widget="welcome"] .widget-card__source {
  opacity: 0.7;
}

/* Lets the stat strip (margin-top: auto) sit at the bottom of the card. */
.widget-card[data-widget="welcome"] .widget-card__body {
  display: flex;
  flex-direction: column;
}

/* --- Second accent card: the events widget goes CI acid --------------------------- */

.widget-card[data-widget="events"] {
  background: var(--planet-secondary);
  border-color: var(--planet-secondary);
  box-shadow: none;
}

.widget-card[data-widget="events"] .widget-card__icon {
  background: color-mix(in srgb, var(--planet-black) 10%, var(--planet-secondary));
}

.widget-card[data-widget="events"] .widget-card__icon .material-icons-outlined {
  color: var(--planet-black);
}

.widget-card[data-widget="events"] .widget-card__source {
  opacity: 0.7;
}

.widget-card[data-widget="events"] .widget-posts__item {
  border-color: rgba(0, 0, 0, 0.15);
}

/* --- Edit mode (mockup body.cockpit-edit) ----------------------------------------- */

.dashboard-edit-toggle.is-active {
  background: var(--planet-primary);
  border-color: var(--planet-primary);
  color: var(--planet-white);
}

body.cockpit-edit .widget-card:hover {
  transform: none;
}

body.cockpit-edit .widget-card__header {
  border-bottom: 1px dashed color-mix(in srgb, var(--planet-primary) 25%, transparent);
  padding-bottom: var(--space-2);
}

.widget-card__tool:hover {
  background: var(--planet-neutral);
  color: var(--planet-primary);
}

.widget-card__tool.is-active {
  background: var(--planet-primary);
  border-color: var(--planet-primary);
  color: var(--planet-white);
}

.widget-card__resize:hover {
  background: var(--planet-neutral);
  color: var(--planet-primary);
}

/* --- Floating button + widget tray ------------------------------------------------- */

.widget-fab {
  background: var(--planet-primary);
  color: var(--planet-white);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--planet-black) 25%, transparent);
  transition: transform var(--motion-fast) var(--ease-out);
}

.widget-fab:hover {
  transform: scale(1.05);
}

.widget-fab__badge {
  background: var(--planet-secondary);
  color: var(--planet-black);
}

.widget-tray {
  background: var(--planet-white);
  border-color: var(--planet-tint);
  border-radius: 24px;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--planet-black) 15%, transparent);
}

.widget-tray__title,
.widget-tray__section {
  font-size: var(--text-meta);
  font-weight: var(--weight-display);
}

.widget-tray__list {
  border-color: var(--planet-tint);
  border-radius: 16px;
}

.widget-tray__empty {
  font-size: var(--text-meta);
  color: inherit;
  opacity: 0.5;
}

.widget-tray__list .widget-card {
  border-radius: 16px;
}

.widget-tray__list .widget-card:hover {
  transform: none;
  border-color: var(--planet-primary);
}

/* The frosted tools keep their own dark foreground, even on accent cards
   whose spans are forced white. */
.widget-card[data-widget="welcome"] .widget-card__tool,
.widget-card[data-widget="welcome"] .widget-card__tools span,
.widget-card[data-widget="welcome"] .widget-card__resize span {
  color: var(--planet-black);
}

.widget-card[data-widget="welcome"] .widget-card__tool.is-active,
.widget-card[data-widget="welcome"] .widget-card__tool.is-active span {
  color: var(--planet-white);
}

body.cockpit-edit .widget-card[data-widget="welcome"] .widget-card__header {
  border-bottom-color: color-mix(in srgb, var(--planet-white) 35%, transparent);
}

/* --- Widget row accents ----------------------------------------------------------- */

/* Mockup .w-list__row: meta-sized (16px) content, 13px sub-meta,
   times at 55% strength, 16px between rows. */
.w-list__row {
  border-bottom-color: var(--planet-tint);
  /* Mockup: 16px text, line-height 1.35, 16px row padding + column gap. */
  font-size: var(--text-meta);
  line-height: 1.35;
  padding-block: var(--space-4);
  gap: var(--space-4);
}

/* News/events widgets per mockup .w-news: 13px kicker at 50%, h4-sized
   post title (24-32px), 16px copy at 80% with line-height 1.4. */
.widget-posts {
  --post-gap: var(--space-8);
}

.widget-posts__title {
  font-size: var(--text-h4);
  font-weight: var(--weight-display);
  line-height: 1.1;
  margin-block-end: var(--space-4);
}

.widget-posts__meta {
  font-size: 0.8125rem;
  opacity: 0.5;
  color: inherit;
  margin-block-end: var(--space-2);
}

.widget-posts__body p {
  font-size: var(--text-meta);
  line-height: 1.4;
  opacity: 0.8;
  margin-block-end: var(--space-3);
}

.widget-posts__body ul,
.widget-posts__body ol {
  font-size: var(--text-meta);
  line-height: 1.45;
}

.w-list__meta {
  font-size: 0.8125rem;
  color: inherit;
  opacity: 0.5;
}

.w-list__time {
  color: inherit;
  opacity: 0.55;
}

.w-list__time--alert,
.w-list__time--highlight {
  opacity: 1;
}

/* News/events post excerpts at meta size (mockup .w-news p). */
.widget-posts__body p {
  font-size: var(--text-meta);
}

.w-list__time--alert,
.w-list__time--highlight {
  color: var(--planet-black);
  background: var(--planet-secondary);
  border-radius: 999px;
  padding: 0 0.5rem;
  font-weight: var(--weight-display);
}

/* --- Planet welcome widget (theme view override, on the blue accent card) -------- */

.pw-greeting {
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-4);
}

.pw-meta {
  /* Mockup .w-welcome p: 8px between the meta lines. */
  margin: 0 0 var(--space-2);
  font-size: var(--text-meta);
  opacity: 0.75;
}

.pw-stats {
  display: flex;
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid color-mix(in srgb, var(--planet-white) 28%, transparent);
}

.pw-stat {
  padding: 0 var(--space-6);
  border-left: 1px solid color-mix(in srgb, var(--planet-white) 28%, transparent);
}

.pw-stat:first-child {
  padding-left: 0;
  border-left: 0;
}

.pw-stat__num {
  display: block;
  font-size: var(--text-h3);
  font-weight: var(--weight-display);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--planet-secondary) !important;
}

.pw-stat__label {
  display: block;
  margin-top: var(--space-1);
  /* Mockup .w-welcome__stat: labels at meta size (16px). */
  font-size: var(--text-meta);
  opacity: 0.75;
}

/* --- Rich text content ------------------------------------------------------------ */

figure.attachment img {
  border-radius: 0;
}

pre {
  background: var(--planet-neutral);
  border-radius: 0;
}

/* --- Phones: compact widgets ------------------------------------------------------ */

/* Two cards share ~360px, so the desktop spacing (24px gap and padding,
   40px under the header, 40px icon circle) compacts and the type inside
   the cards drops below the page-level mobile scale. Kept at the end of
   the file so it wins over the component rules above. */
@media (max-width: 767.98px) {
  .site-main {
    padding-inline: var(--space-2);
  }

  .dashboard-grid {
    gap: var(--space-3);
  }

  .widget-card {
    padding: var(--space-3);

    /* Re-scoped type tokens: everything inside the cards reads these. */
    --text-meta: 0.75rem;
    --text-h4: 1rem;
    --text-h3: 1.25rem;
  }

  .widget-card__header {
    margin-block-end: var(--space-3);
    gap: var(--space-2);
  }

  .widget-card__icon {
    width: 2rem;
    height: 2rem;
  }

  .widget-card__icon .material-icons-outlined {
    font-size: 18px;
  }

  /* List widgets: tighter rows, narrower time column, smaller meta lines.
     The action link ("Öffnen"/"Teilnehmen") leaves its own column — at half
     width it would squeeze the title to a few px — and moves below the
     title instead. */
  .w-list__row {
    grid-template-columns: 3rem 1fr;
    gap: var(--space-1) var(--space-2);
    padding-block: var(--space-2);
  }

  .w-list__action {
    grid-column: 2;
    justify-self: start;
  }

  /* Birthday "today" badge: wider than the fixed date column, so that row
     trades gap for column (8px gap becomes 4px, column grows by 4px) and
     the name stays aligned with the other rows. Only a pill wider than
     that (e.g. French "aujourd'hui !") pushes the name to the right. */
  .w-list__row:has(.w-list__time--highlight) {
    grid-template-columns: minmax(calc(3rem + 4px), max-content) 1fr;
    column-gap: 4px;
  }

  .w-list__time--highlight {
    white-space: nowrap;
  }

  .w-list__meta,
  .widget-posts__meta {
    font-size: 0.6875rem;
  }

  .widget-posts {
    --post-gap: var(--space-3);
  }

  .widget-posts__title {
    font-size: 0.875rem;
    line-height: 1.2;
  }

  /* Rich text blocks are Trix <div>s, not <p>s — size the container so the
     post body matches the gains feed. */
  .widget-posts__body {
    font-size: var(--text-meta);
    line-height: 1.4;
  }

  .w-tabs__tab {
    font-size: 0.6875rem;
    padding: var(--space-1) var(--space-2) var(--space-1) 0;
  }

  .gains {
    font-size: var(--text-meta);
  }

  /* Welcome card: tighter greeting and stat band. */
  .pw-greeting {
    margin-bottom: var(--space-3);
  }

  .pw-stats {
    padding-top: var(--space-3);
  }

  .pw-stat {
    padding: 0 var(--space-3);
  }
}