/** ChallengeFlow: 20-theme.css
 *  Theme „Signal“. Diese Datei benutzt ausschliesslich Variablen — kein
 *  einziger Farbwert steht direkt in einer Regel. Dadurch genuegt der
 *  Variablenblock unten, um die gesamte Oberflaeche auf Nacht umzustellen. */
@layer theme {
  /* ---------------------------------------------------------------- Nacht */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --page-a: #0a0a0a;
    --page-b: #0a0a0a;
    --text: #f5f5f5;
    --copy: #c6c6c6;
    --muted: #8f8f8f;
    --line: #2b2b2b;
    --line-strong: #f5f5f5;
    --card: #0a0a0a;
    --topbar: #0a0a0a;
    --nav-muted: #f5f5f5;
    --soft: #171717;
    --soft-2: #232323;
    --input: #121212;
    /* Nachts traegt Blau auf Schwarz kaum Kontrast und kippt ins Violette.
       Die Signalfarbe wird deshalb warm: Bernstein auf Schwarz ist die
       hellste Farbe der Palette und liegt weit weg vom Alarmrot. */
    --accent: #ffa41f;
    --accent-2: #ffa41f;
    --accent-deep: #ffc35c;
    --accent-hot: #ffbb4d;
    --accent-ink: #1a1000;
    --accent-soft: #2e1f05;
    --accent-glow: rgba(255,164,31,.34);
    --create-accent: #ff8a1c;
    --create-accent-hover: #ffb33d;
    --create-accent-ink: #1a1000;
    --vote-up: #55d27d;
    --vote-down: #ff7c88;
    --danger: #ff5f6d;
    --danger-soft: #2d0f16;
    --pill-bg: #2e1f05;
    --icon-soft: #171717;
    --icon-bg: #0a0a0a;
    --drop-bg: #121212;
    --media-bg: #171717;
    --track: #2b2b2b;
    --stage: #000000;
    --timeline-bg: #0a0a0a;
    --editor-surface: #0a0a0a;
    --editor-head-bg: #0a0a0a;
    --editor-note-bg: #171717;
    --editor-row-bg: #121212;
    --editor-line: #2b2b2b;
    --elevated-shadow: 0 24px 60px rgba(0,0,0,.7);
    --photo-filter: saturate(1) contrast(.98) brightness(.95);
  }

  html, body { background: var(--page-a); color: var(--text); }
  body { background-image: none; }
  ::selection { background: var(--accent); color: var(--accent-ink); }

  /* Die Kopfleiste sitzt auf einer harten Linie, nicht auf einem Schatten. */
  .topbar {
    background: var(--topbar);
    border-bottom: 1px solid var(--text);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .app-brand, .app-brand strong, .view-title { color: var(--text); }
  .brand-symbol {
    background: var(--accent);
    border-radius: 0;
    box-shadow: none;
  }
  .brand-symbol svg { stroke: var(--accent-ink); }
  .header-primary-button {
    background: var(--text);
    color: var(--page-a);
    border: 1px solid var(--text);
    border-radius: 0;
    box-shadow: none;
  }
  .header-primary-button:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
  .header-create-button {
    color: var(--create-accent-ink);
    background: var(--create-accent);
    border-color: var(--create-accent);
  }
  .header-create-button:hover, .header-create-button.is-active {
    color: var(--create-accent-ink);
    background: var(--create-accent-hover);
    border-color: var(--create-accent-hover);
  }

  .panel, .update-card, .challenge-card,
  .modal-card, .participants-block, .notice, .thread-card,
  .message, .detail-grid > div, .stats-grid > div, .country-empty,
  .file-drop, .preview-item {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: 0;
  }
  .panel, .update-card, .challenge-card { box-shadow: none; }
  .panel h1, .panel h2, .challenge-body h3, .link-title, .detail-grid p,
  .photo-modal-challenge-link, .photo-modal-comments-head,
  .country-panel-head h2, .country-title, .detail-timeline-head strong {
    color: var(--text);
  }
  .muted, .meta, .update-location, .location-line, .small-note,
  .form-grid label, .modal-label, .feed-filter-field, .photo-modal-meta-row, .photo-modal-section-label {
    color: var(--muted);
  }
  .update-copy p, .detail-text, .challenge-body p, .photo-modal-caption p, .photo-modal-update-copy p,
  .comment p, .expandable-copy-text {
    font-family: var(--font-copy);
    color: var(--copy);
    font-size: 14.5px;
    font-weight: 400;
    line-height: 1.6;
  }
  .update-text-poster-description,
  .update-text-poster .expandable-copy-text {
    font-family: var(--font-copy);
    color: var(--copy);
    font-size: clamp(16px,1.55vw,19px);
    font-weight: 500;
    line-height: 1.55;
  }
  .update-text-poster.is-detail-text-poster .update-text-poster-description,
  .update-text-poster.is-detail-text-poster .expandable-copy-text {
    font-size: clamp(17px,1.7vw,21px);
    line-height: 1.62;
  }
  .update-text-poster.is-compact-text-poster .update-text-poster-description {
    font-size: 14px;
    line-height: 1.48;
  }
  /* Alles Gemessene laeuft in der Monospace: Zeit, Ort, Zaehler. */
  .meta, .update-location, .location-line, .photo-counter, .icon-button em,
  .progress-meta, .participant-stream-label, .challenge-stream-kicker {
    font-family: var(--font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  input, textarea, select, .country-search, .feed-autocomplete input,
  .comment-input-wrap {
    background: var(--input);
    color: var(--text);
    border: 1px solid var(--text);
    border-radius: 0;
    caret-color: var(--accent);
    box-shadow: none;
  }
  input::placeholder, textarea::placeholder, .country-search::placeholder,
  .feed-autocomplete input::placeholder { color: var(--muted); opacity: 1; }
  /* Nur die Kontur wechselt die Farbe. Der fruehere Innenschatten hat im
     Kommentarfeld eine zweite Kontur erzeugt und wirkte im Dunkelmodus
     wie ein Alarm. */
  input:focus, textarea:focus, select:focus, .country-search:focus,
  .feed-autocomplete input:focus, .comment-input-wrap:focus-within {
    border-color: var(--accent);
    box-shadow: none;
  }
  .comment-input-wrap input:focus,
  .comment-input-wrap input:focus-visible {
    border-color: transparent;
    box-shadow: none;
  }

  .primary-action, .ghost-button, .pill-button, .danger-button,
  .feed-selection-chip, .icon-button, .segment-button, .filter-chip,
  .badge, .participant-chip, .nav button, .top-actions button {
    border-radius: 0;
  }
  .primary-action, .icon-button.send {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-weight: 700;
  }
  .primary-action:hover, .icon-button.send:hover {
    background: var(--accent-deep);
    border-color: var(--accent-deep);
    color: var(--accent-ink);
  }
  .ghost-button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--text);
    font-weight: 700;
  }
  .ghost-button:hover { background: var(--text); color: var(--page-a); }
  .pill-button, .feed-selection-chip {
    background: var(--accent-soft);
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    font-weight: 700;
  }
  .pill-button:hover, .feed-selection-chip:hover {
    background: var(--accent);
    color: var(--accent-ink);
  }
  .danger-button {
    background: transparent;
    color: var(--danger);
    border: 1px solid var(--danger);
    font-weight: 700;
  }
  .danger-button:hover { background: var(--danger); color: var(--page-a); }

  .segmented-control,
  .mine-view-switcher {
    background: var(--soft);
    border: 1px solid var(--line-strong);
    border-radius: 0;
    padding: 3px;
  }
  .segment-button, .filter-chip {
    background: transparent;
    color: var(--text);
    border: 1px solid transparent;
    font-weight: 600;
  }
  .segment-button:hover, .filter-chip:hover { background: var(--soft); color: var(--text); }
  /* Zwei Staerken, damit die Leiste eine Rangfolge hat: Was man ansieht
     (Updates oder Challenges) wird voll in der Signalfarbe markiert. */
  .segment-button.active, .filter-chip.active {
    background: var(--accent);
    color: var(--accent-ink);
    font-weight: 700;
    box-shadow: none;
  }

  .icon-button { background: transparent; color: var(--text); border: 1px solid transparent; }
  .icon-button:hover { background: var(--soft); color: var(--text); }
  .icon-button.is-liked { background: transparent; color: var(--accent); }
  .icon-button.is-leave-action { background: transparent; color: var(--danger); }
  .icon-button.is-leave-action:hover { background: var(--danger); color: var(--page-a); }
  .badge {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    font-family: var(--font-data);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .badge.ghost { background: transparent; color: var(--muted); border-color: var(--line); }
  .participant-chip {
    background: transparent;
    color: var(--accent-deep);
    border: 1px solid var(--accent);
    font-weight: 600;
  }
  .mention, .inline-more, .tiny-link { color: var(--accent); }

  .nav button { color: var(--text); font-weight: 600; }
  .nav button:hover { background: var(--soft); color: var(--text); }
  .nav button.active { background: var(--accent); color: var(--accent-ink); font-weight: 700; box-shadow: none; }
  .top-actions button {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--text);
  }
  .top-actions button:hover { background: var(--text); color: var(--page-a); }
  .top-actions button.profile-button.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

  .feed-suggestion-menu {
    background: var(--card);
    border: 1px solid var(--text);
    border-radius: 0;
    box-shadow: var(--elevated-shadow);
  }
  .feed-suggestion-option { background: transparent; color: var(--text); }
  .feed-suggestion-option:hover, .feed-suggestion-option:focus { background: var(--accent); color: var(--accent-ink); }
  .feed-suggestion-option small { color: var(--muted); }

  .country-overlay {
    background: var(--card);
    border: 1px solid var(--text);
    border-radius: 0;
    box-shadow: var(--elevated-shadow);
  }
  .country-row { background: transparent; color: var(--text); border: 1px solid var(--line); border-radius: 0; }
  .country-row:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .country-empty { background: var(--soft); }
  .world-toolbar .ghost-button, .world-toolbar .pill-button,
  .world-toolbar .primary-action.small, .world-icon-button {
    background: var(--card);
    color: var(--text);
    border-color: var(--text);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .world-toolbar .primary-action.small, .world-icon-button.is-active,
  .world-toolbar .ghost-button.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
  }
  .world-toolbar .ghost-button:hover, .world-toolbar .pill-button:hover,
  .world-icon-button:hover { background: var(--text); color: var(--page-a); }
  .world-stats, .globe-hint, .globe-tip { color: #fff; }

  .timeline-toggle:hover, .overlay-close:hover, .lightbox-close:hover { background: var(--soft); color: var(--text); }

  .file-drop { background: var(--drop-bg); border-color: var(--text); }
  .file-drop:hover, .file-drop.drag-active { background: var(--accent-soft); border-color: var(--accent); }
  .image-fallback, .media-strip { background: var(--media-bg); color: var(--muted); }
  .photo-modal,
  .photo-modal-stage,
  .photo-modal-summary,
  .photo-modal-comments-inner {
    background: var(--page-a);
    color: var(--text);
  }
  .photo-modal-comments {
    background: var(--page-a);
    border-color: var(--line);
  }
  .photo-modal .muted,
  .photo-modal .meta,
  .photo-modal-meta-row,
  .photo-modal-section-label { color: var(--muted); }
  .photo-modal .icon-button { color: var(--text); }
  .photo-modal .icon-button:hover { background: var(--soft-2); color: var(--text); }
  .photo-modal-comments-scroll { scrollbar-color: var(--muted) transparent; }
  .photo-counter {
    background: rgba(10,10,10,.42);
    color: rgba(255,255,255,.86);
    border-radius: 0;
    font-size: 10px;
    letter-spacing: .06em;
  }
  /* Auf dunklem Grund braucht dieselbe Farbe mehr Helligkeit. */
  :root[data-theme="dark"] .ranking-badge { --rank-light: 62%; }
  .ranking-badge[style*="--rank-sat:0%"] .ranking-badge-mark {
    fill: var(--muted);
    color: var(--muted);
  }
  .comment { border-color: var(--line); }

  .notice.unread { background: var(--accent-soft); border-color: var(--accent); }
  .message.sent { background: var(--accent-soft); }

  /* „Meine Challenges“: die Rubrikleiste war eine feste dunkle Flaeche aus
     dem alten Entwurf. Auf hellem Grund stand dadurch schwarze Schrift auf
     Schwarz. Sie folgt jetzt dem Farbsystem. */
  .mine-category-header {
    background: var(--soft);
    border-color: var(--line);
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mine-category-icon {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-deep);
  }
  .mine-category-count {
    background: var(--card);
    border-color: var(--line);
    color: var(--copy);
  }
  .mine-view-switcher {
    background: var(--soft);
    border-color: var(--line);
  }
  /* Wie man etwas ansieht, ist die leisere Entscheidung: helle Flaeche in
     der Signalfarbe, Symbol und Kontur im kraeftigen Ton. Identisch unter
     „Entdecken“ und „Meine“, weil beide dieselbe Schaltergruppe benutzen. */
  .mine-view-button { color: var(--muted); }
  .mine-view-button:hover { background: var(--soft-2); color: var(--text); }
  .mine-view-button.is-active {
    background: var(--accent-soft);
    color: var(--accent-deep);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  /* Kuerzel im Kreis: Hintergrund und Schrift kamen sich im Dunkelmodus
     ins Gehege, beide waren nahezu weiss. */
  .avatar {
    background: var(--accent);
    color: var(--accent-ink);
  }

  /* ------------------------------------------------- Challenge-Detailseite */
  .challenge-detail-page {
    --detail-page: var(--page-a);
    --detail-surface: var(--card);
    --detail-surface-raised: var(--soft);
    --detail-text: var(--text);
    --detail-copy: var(--copy);
    --detail-muted: var(--muted);
    --detail-line: var(--line);
    --detail-accent: var(--accent);
    color: var(--detail-text);
  }
  .challenge-detail-page::before { background: var(--detail-page); }
  .challenge-detail-page .challenge-detail-surface {
    color: var(--detail-text);
    background: var(--detail-surface);
    border-color: var(--text);
  }
  .challenge-detail-page .challenge-stream-area > .create-update-panel,
  .challenge-detail-page .challenge-stream-area > .compact-panel,
  .challenge-detail-page .timeline-content > .update-card,
  .challenge-detail-page .timeline-content > .panel {
    color: var(--detail-text);
    background: var(--detail-surface);
    border: 1px solid var(--text);
    box-shadow: none;
  }
  .challenge-detail-page h1,
  .challenge-detail-page h2,
  .challenge-detail-page h3,
  .challenge-detail-page strong,
  .challenge-detail-page .panel h1,
  .challenge-detail-page .panel h2,
  .challenge-detail-page .challenge-body h3,
  .challenge-detail-page .link-title,
  .challenge-detail-page .detail-grid p,
  .challenge-detail-page .comment-head strong,
  .challenge-detail-page .expandable-copy-label {
    color: var(--detail-text);
  }
  .challenge-detail-page .muted,
  .challenge-detail-page .meta,
  .challenge-detail-page .small-note,
  .challenge-detail-page .update-location,
  .challenge-detail-page .location-line,
  .challenge-detail-page .form-grid label,
  .challenge-detail-page .file-drop-sub {
    color: var(--detail-muted);
  }
  .challenge-detail-page .update-copy p,
  .challenge-detail-page .detail-text,
  .challenge-detail-page .challenge-body p,
  .challenge-detail-page .comment p,
  .challenge-detail-page .expandable-copy-text {
    color: var(--detail-copy);
  }
  .challenge-detail-page .expandable-copy-toggle,
  .challenge-detail-page .inline-more,
  .challenge-detail-page .mention {
    color: var(--accent);
  }
  .challenge-detail-page .ghost-button,
  .challenge-detail-page .icon-button {
    color: var(--detail-text);
    background: transparent;
  }
  .challenge-detail-page .ghost-button:hover {
    color: var(--page-a);
    background: var(--text);
  }
  .challenge-detail-page .icon-button:hover {
    color: var(--detail-text);
    background: var(--soft);
  }
  .challenge-detail-page .icon-button.is-liked { color: var(--accent); background: transparent; }
  .challenge-detail-page .badge { color: var(--accent-ink); background: var(--accent); }
  .challenge-detail-page .icon-button.is-leave-action { color: var(--danger); background: transparent; }
  .challenge-detail-page .icon-button.is-leave-action:hover { color: var(--page-a); background: var(--danger); }
  .challenge-detail-page .badge.ghost { color: var(--muted); background: transparent; }
  .challenge-detail-page .progress-meta,
  .challenge-detail-page .progress-meta strong { color: var(--detail-muted); }
  .challenge-detail-page .progress-meta strong:last-child { color: hsl(var(--progress-hue,32) 86% 52%); }
  .challenge-detail-page .progress-bar { background: var(--track); }

  /* Teilnehmerblock: eigener Kasten mit Kopfzeile auf harter Linie. */
  .challenge-detail-page .participants-block {
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--text);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    overflow: hidden;
  }
  .challenge-detail-page .participants-block .participants-head {
    align-items: center;
    margin: 0;
    padding: 14px 18px;
    background: var(--soft);
    border-bottom: 1px solid var(--text);
  }
  .challenge-detail-page .participants-block .participants-head strong {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.035em;
    text-transform: uppercase;
  }
  .challenge-detail-page .participants-block .participant-stream-picker {
    margin: 0;
    padding: 16px 18px 0;
  }
  .challenge-detail-page .participants-block .participant-stream-help,
  .challenge-detail-page .participants-block > .muted {
    margin: 10px 18px 0;
    color: var(--muted);
  }
  .challenge-detail-page .participants-block .actionbar {
    margin: 0;
    padding: 14px 18px 16px;
    border-top: 0;
  }
  .challenge-detail-page .participant-chip {
    color: var(--accent-deep);
    background: transparent;
    border-color: var(--accent);
  }
  .challenge-detail-page .challenge-detail-meta { color: var(--detail-muted); }
  .challenge-detail-page .challenge-detail-owner strong,
  .challenge-detail-page .challenge-detail-dates > span:not(.challenge-detail-date-arrow),
  .challenge-detail-page .challenge-detail-place {
    color: var(--detail-copy);
  }
  .challenge-detail-page input,
  .challenge-detail-page textarea,
  .challenge-detail-page select,
  .challenge-detail-page .comment-input-wrap,
  .challenge-detail-page .file-drop {
    color: var(--detail-text);
    background: var(--input);
    border-color: var(--text);
    caret-color: var(--detail-accent);
  }
  .challenge-detail-page input::placeholder,
  .challenge-detail-page textarea::placeholder { color: var(--muted); opacity: 1; }
  .challenge-detail-page input:focus,
  .challenge-detail-page textarea:focus,
  .challenge-detail-page select:focus {
    border-color: var(--detail-accent);
    box-shadow: none;
  }
  .challenge-detail-page .comment-input-wrap,
  .challenge-detail-page .comment-input-wrap:focus-within {
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .challenge-detail-page .comment-input-wrap input,
  .challenge-detail-page .comment-input-wrap input:focus,
  .challenge-detail-page .comment-input-wrap input:focus-visible {
    padding-inline: 0;
    background: transparent;
    border: 0;
    outline: 0;
    box-shadow: none;
  }
  .challenge-detail-page .comment,
  .challenge-detail-page .update-card > .actionbar { border-color: var(--detail-line); }
  .challenge-detail-page .media-carousel,
  .challenge-detail-page .media-strip { background: transparent; border-color: transparent; }
  .challenge-detail-page .media-dot::after { background: var(--line); }
  .challenge-detail-page .media-dot.active::after { background: var(--detail-accent); }
  .challenge-detail-page .file-drop:hover,
  .challenge-detail-page .file-drop.drag-active {
    color: var(--detail-text);
    background: var(--accent-soft);
    border-color: var(--detail-accent);
  }
  .challenge-detail-page .challenge-detail-copy-row {
    background: transparent;
    border-color: var(--detail-line);
  }
  /* Der Kasten um „Ziel“ kam aus der allgemeinen Flaechenregel fuer
     .detail-grid > div. Auf der Challenge-Seite gehoert dort keiner hin. */
  .challenge-detail-page .detail-grid > div {
    background: transparent;
    border: 0;
  }
  .challenge-detail-page .detail-grid h3 {
    margin-bottom: 9px;
    color: var(--detail-muted);
    font-family: var(--font-data);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .06em;
  }
  .challenge-detail-page .participant-stream-chip {
    color: var(--accent-deep);
    background: transparent;
    border-color: var(--accent);
    font-weight: 600;
  }
  .challenge-detail-page .participant-stream-chip.is-original {
    color: var(--text);
    background: transparent;
    border-color: var(--text);
  }
  .challenge-detail-page .participant-stream-chip.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
  }
  /* Der gewaehlte Verlauf traegt dieselbe Signalfarbe wie „Neu“ und der
     aktive Menuepunkt. Eine weisse Flaeche wirkte hier wie ein Fremdkoerper. */
  .challenge-detail-page .participant-stream-chip.is-original.is-active {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--accent);
  }
  .challenge-detail-page .challenge-stream-header {
    color: var(--detail-text);
    background: var(--card);
    border-color: var(--text);
    box-shadow: none;
  }
  .challenge-detail-page .challenge-stream-header.is-participant-stream {
    border-color: var(--accent);
    background: var(--card);
  }
  .challenge-detail-page .challenge-stream-header p,
  .challenge-detail-page .challenge-stream-kicker,
  .challenge-detail-page .participant-stream-label { color: var(--detail-muted); }
  .challenge-detail-page .participant-update-label,
  .update-detail-page .participant-update-label {
    color: var(--accent-deep);
    background: transparent;
    border-color: var(--accent);
  }
  .challenge-detail-page .update-card.is-participant-update {
    border-color: var(--accent);
    box-shadow: none;
  }
  /* In der Challenge-Zeitleiste kennzeichnet bereits der Kartenrahmen das
     Teilnahme-Update. Der zusätzliche Poster-Streifen würde dieselbe linke
     Kante ein zweites Mal betonen und wie ein überlagerter Rahmen wirken. */
  .challenge-detail-page .timeline-content > .update-card.is-participant-update.is-text-only .update-text-poster-accent {
    display: none;
  }
  .challenge-detail-page .challenge-stream-note,
  .challenge-detail-page .challenge-stream-empty {
    background: var(--soft);
    border-color: var(--line);
  }

  /* ------------------------------------------------------- Tag/Nacht-Knopf */
  .theme-toggle svg { display: block; }
  .theme-toggle .icon-night { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-day { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-night { display: block; }
}