/*
 * The app layer of the SpotFan design system for the cloud screens: the variables of APP-MUSTER.md section 2 that these
 * screens use, the dark mode of section 3 (follows the system setting), and the patterns of section 4 as classes.
 * Every color here is a value of APP-MUSTER.md; tests/web/design.test.ts keeps raw colors out of every other file.
 */
:root {
  --lime: #c4ea5a; /* --sf-lime-soft, APP-MUSTER section 10 */
  --sf-side: #fbfbf8;
  --sf-card-sel: #f6f5ef;
  --sf-pop: #fcfcfb;
  --sf-on-lime: #121a0e;
  --sf-strong-hover: #2a3524;
  --sf-i040: rgba(18, 26, 14, .04);
  --sf-i080: rgba(18, 26, 14, .08);
  --sf-i140: rgba(18, 26, 14, .14);
  --sf-i400: rgba(18, 26, 14, .40);
  --sf-i420: rgba(18, 26, 14, .42);
  --sf-k080: rgba(0, 0, 0, .08);
  --sf-k100: rgba(0, 0, 0, .10);
  --sf-k120: rgba(0, 0, 0, .12);
  --sf-sh060: rgba(18, 26, 14, .06);
  --sf-btn-dark-hover: #1c2814;
  --sf-btn-soft-hover: rgba(18, 26, 14, .05);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121a0e;
    --card: #172014;
    --paper-warm: #1c2618;
    --ink: #ecede9;
    --deep-green: #a8e014;
    --lime: #a8e014;
    --ink-a75: rgba(252, 252, 251, .80);
    --ink-a65: rgba(252, 252, 251, .72);
    --ink-a60: rgba(252, 252, 251, .68);
    --ink-a55: rgba(252, 252, 251, .64);
    --ink-a45: rgba(252, 252, 251, .56);
    --ink-a40: rgba(252, 252, 251, .52);
    --ink-a12: rgba(252, 252, 251, .14);
    --ink-a06: rgba(252, 252, 251, .07);
    --sf-side: #0e1409;
    --sf-card-sel: #1f2a1b;
    --sf-pop: #1d2719;
    --sf-i040: rgba(252, 252, 251, .052);
    --sf-i080: rgba(252, 252, 251, .104);
    --sf-i140: rgba(252, 252, 251, .168);
    --sf-i400: rgba(252, 252, 251, .5);
    --sf-i420: rgba(252, 252, 251, .523);
    --sf-k080: rgba(252, 252, 251, .088);
    --sf-k100: rgba(252, 252, 251, .11);
    --sf-k120: rgba(252, 252, 251, .132);
    --sf-sh060: rgba(0, 0, 0, .21);
    --sf-btn-dark-hover: #98cc12;
    --sf-btn-soft-hover: rgba(252, 252, 251, .07);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }

/* one narrow column in the middle: sign in, welcome and consent are short tasks */
.sf-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: var(--space-10) var(--space-4) var(--space-7); }
.sf-column { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: var(--space-5); }
.sf-logo { height: 22px; width: auto; align-self: flex-start; }
.sf-logo-dark { display: block; }
.sf-logo-light { display: none; }
@media (prefers-color-scheme: dark) {
  .sf-logo-dark { display: none; }
  .sf-logo-light { display: block; }
}

/* 4.3 Kasten */
.sf-box { background: var(--card); border: .5px solid var(--sf-k100); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }

/* 7 Text: großer Titel, Satz, Hinweis */
.sf-title { font-family: var(--font-display); font-weight: 500; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; margin: 0; text-wrap: pretty; }
.sf-section { font-family: var(--font-display); font-weight: 500; font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
.sf-text { margin: 0; font-size: 14px; line-height: 1.55; text-wrap: pretty; }
.sf-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-a65); text-wrap: pretty; }
.sf-kicker { margin: 0; font-size: 13px; color: var(--ink-a55); }
.sf-strong { font-weight: 500; }

/* 4.10 Formularzeile */
.sf-field { display: flex; flex-direction: column; gap: 6px; }
.sf-field label { font-size: 13px; line-height: 1.5; color: var(--ink-a75); }
.sf-input { height: 36px; padding: 0 10px; border: .5px solid var(--sf-k120); border-radius: var(--radius-md); background: var(--paper); color: var(--ink); font: inherit; font-size: 14px; outline: 0; transition: border-color .15s ease; }
.sf-input::placeholder { color: var(--sf-i420); }
.sf-input:focus { border-color: var(--sf-i400); }
.sf-field-error { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 6px; font-size: 13px; line-height: 1.45; color: var(--ink); }
.sf-field-error:not(:has(> .sf-icon)) { display: block; } /* a sentence alone, without the icon column */

/* 5 Knöpfe: DS Button dark, outline, ghost in der Größe der App */
.sf-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid transparent; font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; transition: background .15s ease, opacity .15s ease; text-decoration: none; }
.sf-btn:disabled { opacity: .45; cursor: not-allowed; }
.sf-btn-dark { background: var(--ink); color: var(--paper); }
.sf-btn-dark:hover:not(:disabled) { background: var(--sf-btn-dark-hover); }
@media (prefers-color-scheme: dark) {
  .sf-btn-dark { background: var(--lime); color: var(--sf-on-lime); }
}
.sf-btn-outline { background: transparent; color: var(--ink); border-color: var(--ink-a12); }
.sf-btn-ghost { background: transparent; color: var(--ink); }
.sf-btn-outline:hover:not(:disabled), .sf-btn-ghost:hover:not(:disabled) { background: var(--sf-btn-soft-hover); }
.sf-btn:focus-visible, .sf-link:focus-visible { outline: 2px solid var(--sf-i400); outline-offset: 2px; }
.sf-link { background: none; border: 0; padding: 0 4px; height: 26px; font: inherit; font-size: 13px; font-weight: 500; color: var(--deep-green); cursor: pointer; text-decoration: none; transition: color .15s ease; }
.sf-link:hover { color: var(--ink); }

/* 4.17 Fehlerzustand */
.sf-alert { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 12px 14px; border: .5px solid var(--sf-k120); border-radius: var(--radius-lg); background: var(--card); font-size: 14px; line-height: 1.5; }
.sf-alert-body { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-icon { width: 14px; height: 14px; margin-top: 3px; color: var(--ink); }

/* 4.16 Zustand „SpotFan arbeitet“ */
.sf-working { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.sf-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sf-i140); border-top-color: var(--ink); animation: sf-spin .9s linear infinite; }
@keyframes sf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sf-spinner { animation: none; } }

/* 4.2 Listenzeile (Marken und Rollen) */
.sf-list { display: flex; flex-direction: column; }
.sf-list-row { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: .5px solid var(--sf-k100); }
.sf-list-row:first-child { border-top: 0; }
.sf-list-name { font-size: 14px; font-weight: 500; }
.sf-list-sub { font-size: 13px; color: var(--ink-a55); }

/* the person a consent is given for */
.sf-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-a65); }

.sf-foot { margin-top: auto; padding-top: var(--space-8); display: flex; gap: var(--space-4); font-size: 12px; color: var(--ink-a45); }
.sf-box-form { display: flex; flex-direction: column; gap: var(--space-4); }

/* the signed in screens: top bar with the areas (4.7 Reiter), a wider column */
.sf-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); padding: var(--space-3) var(--space-4); border-bottom: .5px solid var(--sf-k100); background: var(--sf-side); }
.sf-top-logo { display: inline-flex; }
.sf-top-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.sf-nav { display: flex; flex-wrap: wrap; gap: 2px; min-width: 0; }
.sf-nav a { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; font-size: 13px; font-weight: 500; color: var(--ink-a55); text-decoration: none; border-bottom: 2px solid transparent; transition: color .15s ease; }
.sf-nav a:hover { color: var(--ink); }
.sf-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--lime); }
.sf-brand { display: inline-flex; }
.sf-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-select { height: 32px; padding: 0 8px; font-size: 13px; }
.sf-app { width: 100%; max-width: 760px; margin: 0 auto; padding: var(--space-7) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-5); }
.sf-foot-app { justify-content: center; padding: var(--space-8) var(--space-4) var(--space-6); }

/* 4.1 Seitenkopf */
.sf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 12px; }
.sf-head-title { display: flex; flex-direction: column; gap: 4px; }
.sf-back { align-self: flex-start; background: none; border: 0; padding: 4px 6px 4px 2px; font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-a55); cursor: pointer; }
.sf-back::before { content: "‹ "; }
.sf-back:hover { color: var(--ink); }
.sf-btn-sm { height: 28px; padding: 0 10px; font-size: 13px; border-radius: 7px; }

/* 4.2 Listenzeile mit Zeit, Inhalt, Marke */
.sf-item { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-top: .5px solid var(--sf-k100); color: inherit; text-decoration: none; }
.sf-list > .sf-item:first-child { border-top: 0; }
.sf-item:not(:has(.sf-item-time)) { grid-template-columns: minmax(0, 1fr) auto; }
.sf-item:has(.sf-item-ref) { grid-template-columns: 120px minmax(0, 1fr) auto; }
.sf-item-time { font-size: 13px; color: var(--ink-a55); font-variant-numeric: tabular-nums; }
.sf-item-ref { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sf-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.sf-item-main .sf-list-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.sf-item-link:hover .sf-list-name { color: var(--deep-green); }
.sf-item-actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
@media (max-width: 560px) {
  .sf-item, .sf-item:has(.sf-item-ref) { grid-template-columns: minmax(0, 1fr) auto; }
  .sf-item-time, .sf-item-ref { grid-column: 1 / -1; }
  .sf-item-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* 4.13 Eigene Marke je Zustand: Rahmen, Schrift; gestoppt und abgelehnt in Ink, nie Rot */
.sf-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--radius-sm); border: .5px solid var(--sf-k120); font-size: 12px; font-weight: 500; color: var(--ink-a65); white-space: nowrap; }
.sf-badge-checked, .sf-badge-verified { color: var(--deep-green); }
.sf-badge-approved, .sf-badge-scheduled, .sf-badge-published, .sf-badge-reconciled { background: var(--lime); color: var(--sf-on-lime); border-color: transparent; }
.sf-badge-stopped, .sf-badge-deviation, .sf-badge-rejected { background: var(--ink); color: var(--paper); border-color: transparent; }

/* 4.18 Leerer Zustand */
.sf-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 28px; text-align: center; border: .5px solid var(--sf-k100); border-radius: var(--radius-lg); background: var(--card); }

/* Stück: Fassungen untereinander */
.sf-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-variant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-textarea { height: auto; min-height: 96px; padding: 8px 10px; line-height: 1.5; resize: vertical; }
.sf-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-failed { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: .5px solid var(--sf-k120); border-radius: var(--radius-md); }
.sf-gap { margin: var(--space-3) 0 var(--space-3); }

/* Team: people with an editor, role and channel checkboxes (APP-MUSTER.md: checkbox, ink tick, click area 28 px) */
.sf-person { border-top: .5px solid var(--sf-k100); }
.sf-list > .sf-person:first-child { border-top: 0; }
.sf-person > .sf-item { border-top: 0; }
.sf-editor { padding: 0 0 var(--space-4); }
.sf-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.sf-legend { padding: 0 0 var(--space-1); font-size: 13px; line-height: 1.5; color: var(--ink-a75); width: 100%; }
.sf-fieldset > .sf-hint { width: 100%; margin: 0 0 var(--space-1); }
.sf-check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 28px; font-size: 14px; cursor: pointer; }
.sf-check input { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: var(--ink); cursor: pointer; }
.sf-check input:disabled, .sf-check input:disabled + span { cursor: not-allowed; opacity: .5; }
.sf-check-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 var(--space-4); width: 100%; }

/* Woche: the goal of the week as a figure and a meter (planned in lime, published in ink), days, channel table */
.sf-goal { gap: var(--space-3); }
.sf-goal .sf-legend { padding: 0; }
.sf-goal-figure { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-h2); letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sf-goal-of { font-size: var(--text-h3); color: var(--ink-a55); }
.sf-meter { position: relative; display: block; height: var(--space-3); border-radius: var(--radius-md); background: var(--sf-i080); overflow: hidden; }
.sf-meter-sm { height: var(--space-2); width: calc(var(--space-10) * 2); }
.sf-meter-fill, .sf-meter-done { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; }
.sf-meter-fill { background: var(--lime); }
.sf-meter-done { background: var(--ink); }
.sf-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.sf-stats div { display: flex; flex-direction: column; gap: var(--space-1); }
.sf-stats dt { font-size: var(--text-small); color: var(--ink-a55); }
.sf-stats dd { margin: 0; font-size: var(--text-body); font-weight: 500; font-variant-numeric: tabular-nums; }
.sf-day[aria-current="date"] .sf-list-name { font-weight: 600; }
.sf-table-wrap { overflow-x: auto; }
.sf-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.sf-table th, .sf-table td { padding: var(--space-2) var(--space-2); border-top: .5px solid var(--sf-k100); text-align: left; white-space: nowrap; }
.sf-table thead th { border-top: 0; font-weight: 500; color: var(--ink-a55); }
.sf-table tbody th { font-weight: 500; }
.sf-num { text-align: right; font-variant-numeric: tabular-nums; }
.sf-table .sf-num { text-align: right; }
.sf-table td.sf-table-editor { white-space: normal; padding-bottom: var(--space-4); }
.sf-table .sf-link-cell { padding: 0; height: auto; font-size: inherit; text-align: left; }
.sf-cell-full { color: var(--deep-green); font-weight: 600; }
.sf-cell-part { color: var(--ink); }
.sf-cell-open, .sf-cell-none { color: var(--ink-a45); }
@media (max-width: 600px) {
  .sf-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sf-meter-sm { width: var(--space-10); }
}

/* Kommentare: one comment with its context, the reply field and the replies sent (foreign text as plain text) */
.sf-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.sf-comment { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) 0; border-top: .5px solid var(--sf-k100); }
.sf-list > .sf-comment:first-child { border-top: 0; padding-top: 0; }
.sf-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
.sf-comment-author { font-weight: 600; font-size: var(--text-body); }
.sf-comment-body { margin: 0; font-size: var(--text-body); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-quote { margin: 0; padding-left: var(--space-3); border-left: 2px solid var(--sf-k120); font-size: var(--text-small); color: var(--ink-a65); white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-sent { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--sf-i080); }
.sf-link-inline { color: var(--deep-green); font-weight: 500; text-decoration: none; }
.sf-link-inline:hover { color: var(--ink); }
.sf-link-inline:focus-visible { outline: 2px solid var(--sf-i400); outline-offset: 2px; }

/* Ziel und Stufe: choices with a number next to them */
.sf-choices { flex-direction: column; gap: var(--space-1); }
.sf-choices > .sf-section { padding: 0; margin-bottom: var(--space-1); }
.sf-choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.sf-input-num { width: calc(var(--space-10) + var(--space-8)); font-variant-numeric: tabular-nums; }
.sf-choice-amount { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }

/* Themen und Vorrat: the gap of a language, a topic with its pieces and its open form */
.sf-stock-short { color: var(--ink); font-weight: 500; }
.sf-topic { display: flex; flex-direction: column; gap: var(--space-2); border-top: .5px solid var(--sf-k100); padding-bottom: var(--space-2); }
.sf-list > .sf-topic:first-child { border-top: 0; }
.sf-topic > .sf-item { border-top: 0; }
.sf-topic .sf-item-actions { flex-wrap: wrap; }
.sf-topic-notes { white-space: pre-line; }
.sf-topic-pieces { padding-left: var(--space-4); }
.sf-topic-form { padding: var(--space-2) 0 var(--space-2) var(--space-4); }
@media (max-width: 600px) {
  .sf-topic > .sf-item { grid-template-columns: minmax(0, 1fr); }
  .sf-topic .sf-item-actions { justify-content: flex-start; }
  .sf-nav a { padding: 0 var(--space-2); }
}