/*
 * 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;
}

.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 {
  /* Resting + hover border tokens — skins override for a deliberate rim. */
  --widget-border: color-mix(in srgb, var(--planet-black) 6%, transparent);
  --widget-border-hover: var(--planet-primary);
  background: var(--planet-white);
  border: 1px solid var(--widget-border);
  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: var(--widget-border-hover);
  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;
}

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

/* --- Widget skins ----------------------------------------------------------------
   light_dark flips with body[data-theme]. yellow_blue / blue_yellow are fixed
   CI fills (always yellow / always blue) so they match in light and dark.
   Each appearance sets --widget-* tokens for text, accents, hairlines. */

.widget-card {
  --widget-fg: #000000;
  --widget-accent: var(--planet-primary);
  --widget-hairline: rgba(0, 0, 0, 0.15);
  --widget-icon-fg: var(--planet-primary);
  --widget-icon-bg: color-mix(in srgb, var(--planet-primary) 12%, transparent);
  --widget-tool-fg: #000000;
  --widget-tool-active-fg: #FFFFFF;
  --widget-edit-rule: color-mix(in srgb, var(--planet-primary) 25%, transparent);
}

/* Light appearance (light_dark in light mode): grey rim → blue hover */
body[data-theme="light"] .widget-card--skin-light_dark {
  --widget-fg: #000000;
  --widget-accent: var(--planet-primary);
  --widget-hairline: rgba(0, 0, 0, 0.12);
  --widget-icon-fg: var(--planet-primary);
  --widget-icon-bg: color-mix(in srgb, var(--planet-primary) 12%, transparent);
  --widget-tool-fg: #000000;
  --widget-tool-active-fg: #FFFFFF;
  --widget-edit-rule: color-mix(in srgb, var(--planet-primary) 25%, transparent);
  --widget-border: #DCDCDC;
  --widget-border-hover: var(--planet-primary);
  --color-primary: var(--widget-accent);
  background: #FFFFFF;
  border-color: var(--widget-border);
  color: var(--widget-fg);
  box-shadow: var(--shadow-card);
}

/* Dark appearance (light_dark in dark mode): soft white rim → yellow hover */
body[data-theme="dark"] .widget-card--skin-light_dark {
  --widget-fg: #F5F5F5;
  --widget-accent: var(--planet-secondary);
  --widget-hairline: color-mix(in srgb, #FFFFFF 28%, transparent);
  --widget-icon-fg: var(--planet-secondary);
  --widget-icon-bg: color-mix(in srgb, #FFFFFF 14%, transparent);
  --widget-tool-fg: #000000;
  --widget-tool-active-fg: #FFFFFF;
  --widget-edit-rule: color-mix(in srgb, #FFFFFF 35%, transparent);
  --widget-border: color-mix(in srgb, #FFFFFF 14%, transparent);
  --widget-border-hover: var(--planet-secondary);
  --color-primary: var(--widget-accent);
  background: #0A0A0A;
  border-color: var(--widget-border);
  color: var(--widget-fg);
  box-shadow: none;
}

/* Accent skins: white control surfaces; body type uses --widget-fg / accent
   so tabs/links never land same-on-same (blue-on-blue, yellow-on-yellow). */
.widget-card--skin-blue_yellow,
.widget-card--skin-yellow_blue {
  --planet-tint: #FFFFFF;
  --planet-input-fill: #FFFFFF;
  --planet-neutral: #F5F5F5;
  --planet-white: #ffffff;
  --color-surface: #ffffff;
  --color-border: #FFFFFF;
  --color-primary: var(--widget-accent);
  --color-primary-contrast: #ffffff;
  box-shadow: none;
}

/* Blue — always (both global themes). */
.widget-card--skin-blue_yellow {
  --widget-fg: #FFFFFF;
  --widget-accent: var(--planet-secondary);
  --widget-hairline: color-mix(in srgb, #FFFFFF 28%, transparent);
  --widget-icon-fg: var(--planet-secondary);
  --widget-icon-bg: color-mix(in srgb, #FFFFFF 14%, transparent);
  --widget-tool-fg: #000000;
  --widget-tool-active-fg: #FFFFFF;
  --widget-edit-rule: color-mix(in srgb, #FFFFFF 35%, transparent);
  /* Light page: fill-matched rim (no second edge), hover → yellow accent. */
  --widget-border: var(--planet-primary);
  --widget-border-hover: var(--planet-secondary);
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.55);
  background: var(--planet-primary);
  border-color: var(--widget-border);
  color: var(--widget-fg);
}

/* Yellow — always (both global themes). */
.widget-card--skin-yellow_blue {
  --widget-fg: #000000;
  --widget-accent: var(--planet-primary);
  --widget-hairline: rgba(0, 0, 0, 0.15);
  --widget-icon-fg: #000000;
  --widget-icon-bg: color-mix(in srgb, #000000 10%, var(--planet-secondary));
  --widget-tool-fg: #000000;
  --widget-tool-active-fg: #FFFFFF;
  --widget-edit-rule: rgba(0, 0, 0, 0.25);
  /* Light page: fill-matched rim, hover → blue accent. */
  --widget-border: var(--planet-secondary);
  --widget-border-hover: var(--planet-primary);
  --color-text: #000000;
  --color-text-muted: rgba(0, 0, 0, 0.5);
  background: var(--planet-secondary);
  border-color: var(--widget-border);
  color: var(--widget-fg);
}

/* Dark page: accent cards share the soft white rim language with dark tiles
   — no hard yellow/blue outline against the chrome. */
body[data-theme="dark"] .widget-card--skin-blue_yellow,
body[data-theme="dark"] .widget-card--skin-yellow_blue {
  --widget-border: color-mix(in srgb, #FFFFFF 14%, transparent);
  --widget-border-hover: color-mix(in srgb, #FFFFFF 35%, transparent);
}

.widget-card[class*="widget-card--skin-"] h2,
.widget-card[class*="widget-card--skin-"] p,
.widget-card[class*="widget-card--skin-"] span,
.widget-card[class*="widget-card--skin-"] strong,
.widget-card[class*="widget-card--skin-"] a,
.widget-card[class*="widget-card--skin-"] li,
.widget-card[class*="widget-card--skin-"] time {
  color: var(--widget-fg);
}

/* Accents must win over the span/text paint above (welcome stats, etc.). */
.widget-card[class*="widget-card--skin-"] .pw-stat__num {
  color: var(--widget-accent);
}

.widget-card[class*="widget-card--skin-"] .widget-card__icon {
  background: var(--widget-icon-bg);
}

.widget-card[class*="widget-card--skin-"] .widget-card__icon .material-icons-outlined {
  color: var(--widget-icon-fg);
}

.widget-card[class*="widget-card--skin-"] .widget-card__source {
  opacity: 0.7;
}

.widget-card[class*="widget-card--skin-"] .widget-posts__item,
.widget-card[class*="widget-card--skin-"] .w-list__row {
  border-color: var(--widget-hairline);
  border-bottom-color: var(--widget-hairline);
}

/* Tabs / row actions: use skin accent, not global blue (blue-on-blue). */
.widget-card[class*="widget-card--skin-"] .w-tabs {
  border-bottom-color: var(--widget-hairline);
}

.widget-card[class*="widget-card--skin-"] .w-tabs__tab {
  background: transparent;
  border-color: transparent;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
}

.widget-card[class*="widget-card--skin-"] .w-tabs__tab span {
  color: inherit;
}

.widget-card[class*="widget-card--skin-"] .w-tabs__tab.is-active {
  color: var(--widget-accent);
  border-bottom-color: var(--widget-accent);
  background: transparent;
}

.widget-card[class*="widget-card--skin-"] .w-list__action {
  color: var(--widget-accent);
}

.widget-card[class*="widget-card--skin-"] .w-list__action:hover {
  color: var(--widget-fg);
}

/* Controls on accent cards: white surfaces, black type (readable on yellow/blue).
   Primary stays Planet blue on yellow (same as on white cards); on blue cards
   it stays white to avoid blue-on-blue. */
.widget-card--skin-blue_yellow .btn,
.widget-card--skin-yellow_blue .btn,
.widget-card--skin-blue_yellow .btn--primary,
.widget-card--skin-blue_yellow .btn--ghost,
.widget-card--skin-yellow_blue .btn--ghost,
.widget-card--skin-blue_yellow input,
.widget-card--skin-blue_yellow select,
.widget-card--skin-blue_yellow textarea,
.widget-card--skin-blue_yellow .form-input,
.widget-card--skin-yellow_blue input,
.widget-card--skin-yellow_blue select,
.widget-card--skin-yellow_blue textarea,
.widget-card--skin-yellow_blue .form-input {
  color: #000000;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.widget-card--skin-yellow_blue .btn--primary {
  color: #FFFFFF;
  background: var(--planet-primary);
  border-color: var(--planet-primary);
}

.widget-card--skin-blue_yellow .btn:hover,
.widget-card--skin-yellow_blue .btn:hover,
.widget-card--skin-blue_yellow .btn--primary:hover,
.widget-card--skin-blue_yellow .btn--ghost:hover,
.widget-card--skin-yellow_blue .btn--ghost:hover {
  background: #F5F5F5;
  border-color: #F5F5F5;
  color: #000000;
  text-decoration: none;
}

.widget-card--skin-yellow_blue .btn--primary:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
  text-decoration: none;
}

.widget-card--skin-blue_yellow .btn--ghost.btn--danger,
.widget-card--skin-yellow_blue .btn--ghost.btn--danger {
  color: var(--color-danger);
  border-color: #FFFFFF;
  background: #FFFFFF;
}

.widget-card--skin-blue_yellow .btn--ghost.btn--danger:hover,
.widget-card--skin-yellow_blue .btn--ghost.btn--danger:hover {
  background: var(--color-danger);
  border-color: var(--color-danger);
  color: #FFFFFF;
}

.widget-card--skin-blue_yellow input:focus,
.widget-card--skin-blue_yellow select:focus,
.widget-card--skin-blue_yellow textarea:focus,
.widget-card--skin-blue_yellow .form-input:focus,
.widget-card--skin-yellow_blue input:focus,
.widget-card--skin-yellow_blue select:focus,
.widget-card--skin-yellow_blue textarea:focus,
.widget-card--skin-yellow_blue .form-input:focus {
  border-color: #000000;
  outline: none;
}

.widget-card--skin-blue_yellow .gains__reaction,
.widget-card--skin-yellow_blue .gains__reaction {
  background: #FFFFFF;
  border-color: transparent;
  color: #000000;
}

.widget-card--skin-blue_yellow .gains__reaction span,
.widget-card--skin-yellow_blue .gains__reaction span {
  color: inherit;
}

.widget-card--skin-blue_yellow .gains__reaction:hover,
.widget-card--skin-yellow_blue .gains__reaction:hover {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.25);
}

.widget-card--skin-blue_yellow .gains__reaction--active,
.widget-card--skin-yellow_blue .gains__reaction--active {
  background: #FFFFFF;
  border-color: #000000;
  color: #000000;
}

/* --- 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: #F0F0F0;
  color: var(--planet-primary);
}

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

.widget-card__resize:hover {
  background: #F0F0F0;
  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(--widget-border-hover);
}

/* Tools sit on light frost with their own black/white chrome — don't inherit
   --widget-fg from the card (white-on-blue / light-on-dark would wash them). */
.widget-card[class*="widget-card--skin-"] .widget-card__tool,
.widget-card[class*="widget-card--skin-"] .widget-card__tool .material-icons-outlined,
.widget-card[class*="widget-card--skin-"] .widget-card__resize,
.widget-card[class*="widget-card--skin-"] .widget-card__resize .material-icons-outlined {
  color: #0A0A0A;
}

.widget-card[class*="widget-card--skin-"] .widget-card__tool.is-active,
.widget-card[class*="widget-card--skin-"] .widget-card__tool.is-active .material-icons-outlined {
  color: #FFFFFF;
}

body.cockpit-edit .widget-card[class*="widget-card--skin-"] .widget-card__header {
  border-bottom-color: var(--widget-edit-rule);
}

/* --- 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);
}

/* On yellow cards the CI yellow chip vanishes — use blue accent. */
.widget-card--skin-yellow_blue .w-list__time--alert,
.widget-card--skin-yellow_blue .w-list__time--highlight {
  color: #FFFFFF;
  background: var(--planet-primary);
}

/* --- 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 var(--widget-hairline);
}

.pw-stat {
  padding: 0 var(--space-6);
  border-left: 1px solid var(--widget-hairline);
}

.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;
  /* Skin token: yellow on blue/dark, blue on yellow/light — never same-on-same. */
  color: var(--widget-accent);
}

.pw-stat__label {
  display: block;
  margin-top: var(--space-1);
  /* Mockup .w-welcome__stat: labels at meta size (16px). */
  font-size: var(--text-meta);
  color: var(--widget-fg);
  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);
  }
}