/* Design "pop" – Jugendhaus-Pop (default, docs/DESIGN.md §1).
   TikTok/Instagram energy, but professional: a calm, almost white page with white cards and
   near-black ink; colour comes in moments – the warm gradient (orange → pink → violet) only on
   the main action, the active navigation, progress and story rings and on successes. Stickers
   are slightly tilted with a die-cut edge. Dark: true black like TikTok, #16161D surfaces,
   cyan and pink accents, subtle hairline borders instead of shadows.
   Headings Plus Jakarta Sans 800, UI labels and buttons 600/700, body Atkinson Hyperlegible.

   Every design file defines the full token set of docs/DESIGN.md §5 for light and dark:
   light on [data-design="…"], dark via prefers-color-scheme (unless data-theme="light") and
   via data-theme="dark". The two dark blocks must stay identical (core/tests/test_design.py
   checks that and the WCAG contrast of all pairs). This file also styles pages without
   data-design (error pages). Private to this file:
   --pop-toast / --pop-toast-ink  toast colours: ink in light, a lifted grey in dark;
   --pop-hot / --pop-hot-ink      the second accent for small signals (stickers, the "Eilt" dot,
                                  unread counts): the accent pink in light, hot pink next to
                                  the cyan accent in dark. */

/* @light */
:root:not([data-design]),
[data-design="pop"] {
  color-scheme: light;
  --bg: #F6F6F8;
  --surface: #FFFFFF;
  --surface-2: #F0F0F4;
  --ink: #0F0F14;
  --ink-soft: #595967;
  --line: #E4E4EB;
  --field-border: #8A8A96;
  --accent: #CF1C62;
  --accent-ink: #FFFFFF;
  --accent-soft: #FFE6F0;
  --accent-gradient: linear-gradient(45deg, #D4430F 0%, #E1157A 52%, #8A2BE2 100%);
  --marker: #E4FA6B;
  --marker-ink: #0F0F14;
  --ok: #0A7F56;
  --ok-ink: #FFFFFF;
  --ok-soft: #DDF6EB;
  --danger: #C42B1C;
  --danger-ink: #FFFFFF;
  --danger-soft: #FDE4E1;
  --q-sofort: #FFE3EE;
  --q-sofort-ink: #A3104D;
  --q-planen: #EEE8FF;
  --q-planen-ink: #5B21B6;
  --q-schnell: #FFE9D7;
  --q-schnell-ink: #973806;
  --q-spaeter: #EEEEF3;
  --q-spaeter-ink: #45454F;
  --radius: 20px;
  --radius-lg: 24px;
  --shadow: 0 0 0 1px rgba(15, 15, 20, .04), 0 1px 2px rgba(15, 15, 20, .06), 0 8px 20px -6px rgba(15, 15, 20, .10);
  --shadow-lg: 0 0 0 1px rgba(15, 15, 20, .05), 0 24px 56px -12px rgba(15, 15, 20, .30);
  --font-head: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --tile-gap: 10px;
  --focus: #6D28D9;
  --head-scale: 1;
  --head-weight: 800;
  --head-tracking: -0.03em;
  --backdrop: rgba(15, 15, 20, .45);
  --pop-toast: #0F0F14;
  --pop-toast-ink: #FFFFFF;
  --pop-hot: #CF1C62;
  --pop-hot-ink: #FFFFFF;
}

/* @dark */
@media (prefers-color-scheme: dark) {
  :root:not([data-design]):not([data-theme="light"]),
  :root:not([data-theme="light"])[data-design="pop"],
  :root:not([data-theme="light"]) [data-design="pop"] {
    color-scheme: dark;
    --bg: #000000;
    --surface: #16161D;
    --surface-2: #24242E;
    --ink: #F5F5F7;
    --ink-soft: #A9A9B8;
    --line: #2C2C38;
    --field-border: #7C7C8C;
    --accent: #2EE6E6;
    --accent-ink: #001A1B;
    --accent-soft: #0A2B2E;
    --accent-gradient: linear-gradient(45deg, #2EE6E6 0%, #9C8CFF 50%, #FF4F8B 100%);
    --marker: #E4FA6B;
    --marker-ink: #0F0F14;
    --ok: #46E09E;
    --ok-ink: #02170E;
    --ok-soft: #0D2A1F;
    --danger: #FF8A7A;
    --danger-ink: #240603;
    --danger-soft: #3A1511;
    --q-sofort: #3A0D22;
    --q-sofort-ink: #FF9FC6;
    --q-planen: #1F1745;
    --q-planen-ink: #C8BCFF;
    --q-schnell: #3A2108;
    --q-schnell-ink: #FFC27E;
    --q-spaeter: #1E1E26;
    --q-spaeter-ink: #C9C9D5;
    --shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px -12px rgba(0, 0, 0, .9);
    --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 64px rgba(0, 0, 0, .9);
    --focus: #2EE6E6;
    --backdrop: rgba(0, 0, 0, .72);
    --pop-toast: #2A2A35;
    --pop-toast-ink: #F5F5F7;
    --pop-hot: #FF4F8B;
    --pop-hot-ink: #1F000E;
  }
}
:root:not([data-design])[data-theme="dark"],
:root[data-theme="dark"][data-design="pop"],
:root[data-theme="dark"] [data-design="pop"] {
  color-scheme: dark;
  --bg: #000000;
  --surface: #16161D;
  --surface-2: #24242E;
  --ink: #F5F5F7;
  --ink-soft: #A9A9B8;
  --line: #2C2C38;
  --field-border: #7C7C8C;
  --accent: #2EE6E6;
  --accent-ink: #001A1B;
  --accent-soft: #0A2B2E;
  --accent-gradient: linear-gradient(45deg, #2EE6E6 0%, #9C8CFF 50%, #FF4F8B 100%);
  --marker: #E4FA6B;
  --marker-ink: #0F0F14;
  --ok: #46E09E;
  --ok-ink: #02170E;
  --ok-soft: #0D2A1F;
  --danger: #FF8A7A;
  --danger-ink: #240603;
  --danger-soft: #3A1511;
  --q-sofort: #3A0D22;
  --q-sofort-ink: #FF9FC6;
  --q-planen: #1F1745;
  --q-planen-ink: #C8BCFF;
  --q-schnell: #3A2108;
  --q-schnell-ink: #FFC27E;
  --q-spaeter: #1E1E26;
  --q-spaeter-ink: #C9C9D5;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .07), 0 10px 30px -12px rgba(0, 0, 0, .9);
  --shadow-lg: 0 0 0 1px rgba(255, 255, 255, .09), 0 24px 64px rgba(0, 0, 0, .9);
  --focus: #2EE6E6;
  --backdrop: rgba(0, 0, 0, .72);
  --pop-toast: #2A2A35;
  --pop-toast-ink: #F5F5F7;
  --pop-hot: #FF4F8B;
  --pop-hot-ink: #1F000E;
}

/* =========================================================== pop specifics
   Only rules for this design, colours always through the tokens above. The selectors are
   wrapped in :where() so they weigh no more than the base rule they refine – module CSS
   (loaded later) still wins – and everything sits in @media screen, so print keeps the plain
   base look. */
@media screen {
  /* ---------------------------------------------------------------- type */
  /* Jakarta 800 for headings; UI labels and buttons 600/700 (the base uses 800 in places). */
  :where([data-design="pop"]) .eyebrow { font-weight: 600; letter-spacing: 0; }
  :where([data-design="pop"]) .card__title,
  :where([data-design="pop"]) .section__title { letter-spacing: -0.02em; }

  /* -------------------------------------------------------------- chrome */
  /* Top and bottom bar: frosted glass over the page with a hairline edge. */
  :where([data-design="pop"]) .topbar {
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
  }
  :where([data-design="pop"]) .brand { letter-spacing: -0.045em; }
  /* The mark sits there like a sticker. */
  :where([data-design="pop"]) .brand__mark {
    border-radius: 11px; transform: rotate(-8deg);
    box-shadow: 0 4px 10px -4px color-mix(in srgb, var(--accent) 70%, transparent);
  }
  /* Unread count: a hot dot like an inbox badge (pink also in dark, next to the cyan). */
  :where([data-design="pop"]) .icon-btn .count {
    background: var(--pop-hot); color: var(--pop-hot-ink); font-weight: 700;
  }

  :where([data-design="pop"]) .bottomnav {
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
  }
  :where([data-design="pop"]) .bottomnav a { position: relative; font-weight: 600; }
  :where([data-design="pop"]) .bottomnav a[aria-current="page"] { font-weight: 800; }
  :where([data-design="pop"]) .bottomnav a[aria-current="page"] .icon { background: transparent; stroke-width: 2.5; }
  /* The active place: a short gradient bar above the icon. */
  :where([data-design="pop"]) .bottomnav a[aria-current="page"]::before {
    content: ""; position: absolute; top: 3px; left: 50%; width: 26px; height: 4px; margin-left: -13px;
    border-radius: 999px; background: var(--accent-gradient);
  }
  @media (min-width: 900px) {
    :where([data-design="pop"]) .topnav a { position: relative; font-weight: 600; }
    :where([data-design="pop"]) .topnav a:hover { background: var(--surface-2); }
    :where([data-design="pop"]) .topnav a[aria-current="page"] { background: transparent; color: var(--ink); font-weight: 800; }
    :where([data-design="pop"]) .topnav a[aria-current="page"]::after {
      content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 3px;
      border-radius: 999px; background: var(--accent-gradient);
    }
  }

  /* Quick capture: an ink disc inside a gradient ring, like an unseen story. */
  :where([data-design="pop"]) .quick-capture__btn {
    border: 3px solid transparent;
    background: linear-gradient(var(--ink), var(--ink)) padding-box, var(--accent-gradient) border-box;
    color: var(--bg); font-weight: 700;
  }

  /* --------------------------------------------------------------- cards */
  /* Cards float without borders: a crisp shadow in light, a hairline ring in dark (--shadow). */
  :where([data-design="pop"]) .card,
  :where([data-design="pop"]) .tile,
  :where([data-design="pop"]) .quad,
  :where([data-design="pop"]) .kpi,
  :where([data-design="pop"]) .counter-btn { border-color: transparent; }
  :where([data-design="pop"]) .card--ok { border-left-color: var(--ok); }
  :where([data-design="pop"]) .card--danger { border-left-color: var(--danger); }
  :where([data-design="pop"]) .kpi__value { letter-spacing: -0.04em; }
  :where([data-design="pop"]) .empty .icon { color: var(--accent); }

  /* ------------------------------------------------------------- buttons */
  :where([data-design="pop"]) .btn,
  :where([data-design="pop"]) .addbar { border-radius: 999px; }
  :where([data-design="pop"]) .btn { font-weight: 700; letter-spacing: -0.005em; }
  /* The main action glows softly in its own colour. */
  :where([data-design="pop"]) .btn--primary {
    box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--accent) 65%, transparent);
  }
  :where([data-design="pop"]) .btn--primary:hover { filter: brightness(1.05) saturate(1.08); }

  /* -------------------------------------------------------- chips, forms */
  :where([data-design="pop"]) .chip-btn { font-weight: 700; }
  :where([data-design="pop"]) .segmented > .chip-btn,
  :where([data-design="pop"]) .chips--segment > .chip-btn { font-weight: 600; }
  :where([data-design="pop"]) .segmented > .chip-btn:has(input:checked),
  :where([data-design="pop"]) .segmented > .chip-btn[aria-pressed="true"],
  :where([data-design="pop"]) .chips--segment > .chip-btn:has(input:checked),
  :where([data-design="pop"]) .chips--segment > .chip-btn[aria-pressed="true"] { font-weight: 700; }
  :where([data-design="pop"]) .field > label,
  :where([data-design="pop"]) .field__label,
  :where([data-design="pop"]) legend,
  :where([data-design="pop"]) .badge,
  :where([data-design="pop"]) .chip { font-weight: 700; }

  /* --------------------------------------------------------------- tiles */
  :where([data-design="pop"]) .tile { gap: 4px; }
  :where([data-design="pop"]) .tile__label { font-weight: 700; letter-spacing: -0.01em; }
  :where([data-design="pop"]) .tile__value { font-size: calc(2.3rem * var(--head-scale, 1)); letter-spacing: -0.045em; }
  :where([data-design="pop"]) .tile__value--text { font-size: calc(1.2rem * var(--head-scale, 1)); letter-spacing: -0.02em; }
  :where([data-design="pop"]) .tile--accent {
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--accent) 80%, transparent);
  }
  :where([data-design="pop"]) a.quad { transition: transform .1s ease, box-shadow .15s ease; }
  /* Lift on hover only with a real pointer (no sticky hover after a tap on the phone). */
  @media (hover: hover) {
    :where([data-design="pop"]) a.tile:hover,
    :where([data-design="pop"]) a.quad:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
  }
  :where([data-design="pop"]) a.tile:active,
  :where([data-design="pop"]) a.quad:active { transform: scale(.98); }

  /* --------------------------------------------------------- story rings */
  /* Like Instagram: the done part of the ring shows the gradient, the rest is a hairline.
     Next = full gradient ring (an invitation); done = a gradient coin with the tick. */
  :where([data-design="pop"]) .story__ring {
    padding: 3px;
    background:
      conic-gradient(transparent calc(var(--progress) * 360deg), var(--line) 0),
      var(--accent-gradient);
  }
  :where([data-design="pop"]) .story--next .story__ring,
  :where([data-design="pop"]) .story--done .story__ring { background: var(--accent-gradient); }
  :where([data-design="pop"]) .story--done .story__inner { background: var(--accent-gradient); color: var(--accent-ink); }
  :where([data-design="pop"]) .story--next .story__inner { background: var(--surface); color: var(--ink); }
  :where([data-design="pop"]) .story__label { font-weight: 600; }
  :where([data-design="pop"]) .story--next .story__label { font-weight: 800; }
  /* The same coin in the quest sheet. */
  :where([data-design="pop"]) .quest--done .quest__mark {
    background: var(--accent-gradient); border-color: transparent; color: var(--accent-ink);
  }

  /* ------------------------------------------------------ compact matrix */
  /* White cards with a glow of the field colour from the top corner (pink, violet, orange,
     grey – the gradient family); the first titles as dotted lines. */
  :where([data-design="pop"]) .quad {
    gap: 8px; box-shadow: var(--shadow);
    background: linear-gradient(160deg, var(--q) 0%, var(--q) 22%, var(--surface) 78%);
  }
  :where([data-design="pop"]) .quad__title { font-weight: 700; }
  :where([data-design="pop"]) .quad__count { font-size: calc(2rem * var(--head-scale, 1)); letter-spacing: -0.045em; }
  :where([data-design="pop"]) .quad__list { gap: 2px; }
  :where([data-design="pop"]) .quad__item {
    position: relative; padding: 2px 0 2px 14px; border-radius: 0; background: transparent;
  }
  :where([data-design="pop"]) .quad__item::before {
    content: ""; position: absolute; left: 1px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--q-ink);
  }
  :where([data-design="pop"]) .quad__more { font-weight: 600; }

  /* ----------------------------------------------------------- chat list */
  /* Separators start after the avatar, like in a messenger (rows without one keep the full line). */
  :where([data-design="pop"]) .chatlist > li + li .chat:has(> .chat__avatar) {
    border-top: 0;
    background: linear-gradient(var(--line), var(--line)) no-repeat 54px 0 / calc(100% - 54px) 1px;
  }
  :where([data-design="pop"]) .chat__title { font-weight: 700; }
  :where([data-design="pop"]) .chat__time { font-weight: 600; }
  /* "Eilt" / unread: a solid hot dot – the gradient stays reserved for actions and successes. */
  :where([data-design="pop"]) .chat__dot { background: var(--pop-hot); color: var(--pop-hot-ink); font-weight: 700; }

  /* ------------------------------------------------------ three-up grid */
  /* A photo grid: hairline gaps, only the outer corners rounded, stamps as stickers. */
  :where([data-design="pop"]) .grid3 { gap: 3px; border-radius: var(--radius); overflow: hidden; }
  :where([data-design="pop"]) .gridcell { border-radius: 0; }
  :where([data-design="pop"]) .gridcell:focus-visible { outline-offset: -3px; }
  :where([data-design="pop"]) .gridcell__stamp {
    border: 0; border-radius: 7px; padding: 2px 8px;
    background: var(--person, var(--ok)); color: var(--person-ink, var(--ok-ink));
    box-shadow: 0 0 0 2px var(--surface);
  }
  :where([data-design="pop"]) .gridcell__title { font-weight: 700; }

  /* -------------------------------------------------------------- slides */
  /* Meeting mode: huge tight titles; the bars are frosted glass. */
  :where([data-design="pop"]) .slide__title { letter-spacing: -0.045em; line-height: 1; }
  :where([data-design="pop"]) .slides__progress,
  :where([data-design="pop"]) .slide__actions {
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    -webkit-backdrop-filter: saturate(1.8) blur(18px);
    backdrop-filter: saturate(1.8) blur(18px);
  }
  :where([data-design="pop"]) .slide__actions { border-top-color: transparent; }
  /* Discussed: a sticker slapped on the slide. */
  :where([data-design="pop"]) .slide__stamp {
    border: 0; border-radius: 14px; padding: 8px 16px; transform: rotate(-9deg);
    background: var(--ok); color: var(--ok-ink); font-size: 1.25rem; letter-spacing: .06em;
    box-shadow: 0 0 0 4px var(--surface), var(--shadow-lg);
  }

  /* ------------------------------------------------------------- add bar */
  :where([data-design="pop"]) .addbar {
    border: 0; background: var(--surface); box-shadow: var(--shadow); color: var(--ink-soft); font-weight: 600;
  }
  :where([data-design="pop"]) .addbar:hover { color: var(--ink); box-shadow: var(--shadow-lg); }

  /* ----------------------------------------------------------- kpi strip */
  :where([data-design="pop"]) .kpi-strip { gap: 1px; border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
  :where([data-design="pop"]) .kpi-strip__value { letter-spacing: -0.04em; }
  :where([data-design="pop"]) .kpi-strip__label { font-weight: 600; }

  /* ------------------------------------------------------------ stickers */
  /* Slightly tilted with a die-cut edge; every second one leans the other way. */
  :where([data-design="pop"]) .sticker {
    border-radius: 10px; padding: 3px 10px; transform: rotate(-6deg);
    background: var(--pop-hot); color: var(--pop-hot-ink);
    box-shadow: 0 0 0 2px var(--surface), var(--shadow);
  }
  :where([data-design="pop"]) .sticker--marker { background: var(--marker); color: var(--marker-ink); }
  :where([data-design="pop"]) .sticker--ok { background: var(--ok); color: var(--ok-ink); }
  :where([data-design="pop"]) .sticker--soft { background: var(--surface-2); color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }
  :where([data-design="pop"]) .sticker:nth-of-type(even) { transform: rotate(4deg); }

  /* ------------------------------------------------------------- avatars */
  :where([data-design="pop"]) .avatar { letter-spacing: -0.02em; }
  /* The own big avatar (the way to the account) wears its colour as a ring, like a profile. */
  :where([data-design="pop"]) .greeting .avatar--l:not(.avatar--empty),
  :where([data-design="pop"]) a.avatar-link .avatar--l:not(.avatar--empty) {
    box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--person, var(--line));
  }

  /* ------------------------------------------------------- design picker */
  /* Konto → Design: the tick of the own choice becomes a gradient coin on the card's corner
     (a small success moment), so the long name has the whole width of a 375 px column. */
  :where([data-design="pop"]) .design-card { position: relative; }
  :where([data-design="pop"]) .design-card__name {
    padding: 0 2px 2px; font-size: .78rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  }
  :where([data-design="pop"]) .design-card__name .icon {
    position: absolute; top: -7px; right: -7px; width: 26px; height: 26px; padding: 5px; box-sizing: border-box;
    border-radius: 50%; background: var(--accent-gradient); color: var(--accent-ink); stroke-width: 3;
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* --------------------------------------------------------------- sheet */
  :where([data-design="pop"]) .sheet__handle::before { width: 40px; background: var(--field-border); opacity: .45; }
  :where([data-design="pop"]) .sheet__close { background: var(--surface-2); }

  /* ------------------------------------------------------- Theke counter */
  :where([data-design="pop"]) .counter-btn { border-radius: var(--radius-lg); }
  /* A count landed: for a moment the button glows with the gradient edge (a success moment). */
  :where([data-design="pop"]) .counter-btn.is-bumped {
    border-color: transparent;
    background: linear-gradient(var(--accent-soft), var(--accent-soft)) padding-box, var(--accent-gradient) border-box;
  }
  :where([data-design="pop"]) .counter-btn__count { letter-spacing: -0.03em; }
  :where([data-design="pop"]) .counter-toggle { border-radius: 999px; }

  /* -------------------------------------------------------------- toasts */
  /* Ink in light; in dark a lifted grey card instead of a glaring white one. */
  :where([data-design="pop"]) .toast {
    --focus: var(--pop-toast-ink);
    border-radius: 20px; background: var(--pop-toast); color: var(--pop-toast-ink); font-weight: 600;
  }
  :where([data-design="pop"]) .toast__undo,
  :where([data-design="pop"]) .toast__link,
  :where([data-design="pop"]) .toast__close { font-weight: 700; }
  /* Slimmer pills, so a short message plus "Ansehen" stays on one line at 375 px. */
  :where([data-design="pop"]) .toast__undo,
  :where([data-design="pop"]) .toast__link { padding: 0 14px; }
}