/* Gemeinsame Bausteine und Bewegung aller HelloCheri-Webseiten — nachgebaut nach den
   Bausteinen der App (design-guide.md im App-Repo), Werte nur aus tokens.css (generiert
   aus design/tokens.json). Keine festen Farben, kein Glanz, keine Schatten.

   Bewegung wie die App mit „Expressiv“ (Material 3 Expressive): räumliche Änderungen
   federn und dürfen leicht überschwingen, Farbe und Deckkraft gleiten ohne. Wer weniger
   Bewegung eingestellt hat, bekommt alles sofort (tokens.css). */

/* ---------- Bewegung: Abkürzungen ---------- */
:root{
  --hc-spatial-fast:var(--md-sys-motion-spatial-fast-duration) var(--md-sys-motion-spatial-fast-easing);
  --hc-spatial:var(--md-sys-motion-spatial-default-duration) var(--md-sys-motion-spatial-default-easing);
  --hc-effects-fast:var(--md-sys-motion-effects-fast-duration) var(--md-sys-motion-effects-fast-easing);
  --hc-effects:var(--md-sys-motion-effects-default-duration) var(--md-sys-motion-effects-default-easing);
}

/* ---------- Seite wie ein App-Screen ---------- */
body{
  margin:0; background:var(--md-sys-color-background); color:var(--md-sys-color-on-surface);
  font-family:var(--hc-font-body); font-size:var(--md-sys-typescale-body-large-size);
  line-height:var(--md-sys-typescale-body-large-line-height);
  -webkit-font-smoothing:antialiased;
}

/* ---------- Formen wie die App (smooth-shapes.spec.md im App-Repo) ----------
   Squircle-Ecken: Ein Baustein setzt nur --hc-r (Token-Radius aus tokens.css), die Regel
   unten macht daraus die Form. Mit corner-shape zeichnet der Browser die Superellipse
   (k aus den Tokens) mit Radius × Skala — so tief wie die Ecke in der App. Ohne
   corner-shape (ältere Browser) bleibt es eine normale Ecke mit dem Token-Radius.
   .hc-sq-sm/-md/-lg/-xl für eigene Elemente einer Seite; .hc-circle für Kreise. Pillen
   (Status) bekommen bewusst kein corner-shape — das machte die Enden eckiger. */
.hc-sq-sm,.hc-brand a{--hc-r:var(--hc-shape-small)}
.hc-sq-md,.hc-button,.hc-pill,.hc-seg{--hc-r:var(--hc-shape-medium)}
.hc-sq-lg,.hc-card{--hc-r:var(--hc-shape-large)}
.hc-sq-xl{--hc-r:var(--hc-shape-extra-large)}
.hc-sq-sm,.hc-sq-md,.hc-sq-lg,.hc-sq-xl,.hc-brand a,.hc-button,.hc-pill,.hc-card,.hc-seg,.hc-seg>*{border-radius:var(--hc-r)}
.hc-circle{border-radius:50%}
@supports (corner-shape: superellipse(2)){
  .hc-sq-sm,.hc-sq-md,.hc-sq-lg,.hc-sq-xl,.hc-brand a,.hc-button,.hc-pill,.hc-card,.hc-seg,.hc-seg>*{
    corner-shape:superellipse(var(--hc-squircle-k));
    border-radius:calc(var(--hc-r) * var(--hc-squircle-scale));
  }
  .hc-circle{corner-shape:superellipse(var(--hc-circle-k))}
}

/* ---------- Kopfleiste: Sprache und Farbschema (docs/lang-theme.spec.md) ----------
   hc.js baut die Schalter in [data-hc-controls]. Auf Unterseiten eine eigene Zeile oben rechts,
   der Schriftzug darunter mittig; auf der Startseite schwebend (.hc-controls-float).
   Segmente innen 3 px kleiner als außen, damit die Ecken parallel laufen. Sichtbar 32/38 px,
   die Trefferfläche reicht per ::after auf 44 px. */
.hc-controls{display:flex; justify-content:flex-end; align-items:center; gap:var(--hc-space-s);
  min-height:38px; padding:var(--hc-space-l) var(--hc-space-l) 0}
.hc-controls-float{position:absolute; top:0; right:0}
@media (min-width:600px){.hc-controls{padding:20px var(--hc-space-xl) 0}}
.hc-controls + .hc-brand{padding-top:var(--hc-space-s)}
.hc-seg{display:flex; padding:3px; gap:2px; background:color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent)}
.hc-seg>*{
  --hc-r:calc(var(--hc-shape-medium) - 3px);
  position:relative; display:grid; place-items:center; min-width:38px; height:32px; padding:0 10px;
  appearance:none; -webkit-appearance:none; border:0; background:transparent; cursor:pointer; text-decoration:none;
  color:var(--md-sys-color-on-surface-variant); font:800 .8rem var(--hc-font-body); letter-spacing:.04em;
  transition:background-color var(--hc-effects-fast), color var(--hc-effects-fast),
    box-shadow var(--hc-effects-fast), transform var(--hc-spatial-fast);
}
.hc-seg>*::after{content:""; position:absolute; inset:-6px 0}
.hc-seg>:hover{color:var(--md-sys-color-on-surface)}
.hc-seg>[aria-pressed="true"],.hc-seg>[aria-current]{background:var(--md-sys-color-background);
  color:var(--md-sys-color-on-surface); box-shadow:0 0 0 1px var(--md-sys-color-outline-variant)}
.hc-theme{position:relative; width:38px; height:38px; display:grid; place-items:center; border:0; cursor:pointer;
  appearance:none; -webkit-appearance:none; color:var(--md-sys-color-on-surface);
  background:color-mix(in srgb, var(--md-sys-color-on-surface) 7%, transparent);
  transition:box-shadow var(--hc-effects-fast), transform var(--hc-spatial-fast)}
.hc-theme::after{content:""; position:absolute; inset:-3px; border-radius:50%}
.hc-theme:hover{box-shadow:inset 0 0 0 1px var(--md-sys-color-outline-variant)}
.hc-theme svg{width:18px; height:18px}
.hc-seg>:active,.hc-theme:active{transform:scale(.9)}
.hc-seg>:focus-visible,.hc-theme:focus-visible{outline:2px solid var(--md-sys-color-on-surface); outline-offset:3px}

/* Kopfzeile wie die Startseite der App: Pusteblume + Schriftzug, zentriert, führt zur Startseite. */
.hc-brand{display:flex; justify-content:center; padding:var(--hc-space-l) var(--hc-space-l) var(--hc-space-s)}
.hc-brand a{display:block}
.hc-brand img{display:block; height:28px; width:auto}

/* Das App-Icon (wie auf dem Homescreen). */
.hc-app-icon{display:block; width:72px; height:72px; border-radius:var(--hc-shape-medium)}

/* Karte wie SettingsCard / die Listen-Karte: surfaceContainer, Large-Squircle, kein Rand. */
.hc-card{background:var(--md-sys-color-surface-container); overflow:hidden}

/* ---------- Buttons wie in der App ----------
   .hc-button  = Hauptaktion (Medium-Squircle, volle Breite, 52 dp, titleMedium).
   .hc-pill    = Nebenaktion (wie „Neue Liste“: helle Fläche, farbiges Icon, labelLarge).
                 Der Name ist historisch — seit den Squircles ist sie keine Pille mehr;
                 Pillen sind nur noch Zustände (.hc-status).
   Rückmeldung wie M3: Zustandsschicht (8 % Hover, 10 % gedrückt). Die Form bleibt beim
   Drücken gleich, ein Form-Morph kommt später (smooth-shapes.spec.md E11). */
.hc-button,.hc-pill{
  --hc-state:transparent;
  display:flex; align-items:center; justify-content:center; gap:var(--hc-space-s);
  width:100%; border:0; cursor:pointer; text-decoration:none; text-align:center;
  font-family:var(--hc-font-body);
  background-image:linear-gradient(var(--hc-state),var(--hc-state));
  transition:background-color var(--hc-effects-fast);
  -webkit-tap-highlight-color:transparent;
}
.hc-button{
  min-height:52px; padding:0 var(--hc-space-xl);
  background-color:var(--md-sys-color-primary); color:var(--md-sys-color-on-primary);
  font-size:var(--md-sys-typescale-title-medium-size); font-weight:var(--md-sys-typescale-title-medium-weight);
}
.hc-pill{
  min-height:44px; padding:0 var(--hc-space-m);
  background-color:var(--md-sys-color-surface-container); color:var(--md-sys-color-on-surface);
  font-size:var(--md-sys-typescale-label-large-size); font-weight:var(--md-sys-typescale-label-large-weight);
}
.hc-pill svg{width:20px; height:20px; fill:var(--md-sys-color-primary); flex:none}
@media (hover:hover){
  .hc-button:hover{--hc-state:color-mix(in srgb, var(--md-sys-color-on-primary) 8%, transparent)}
  .hc-pill:hover{--hc-state:color-mix(in srgb, var(--md-sys-color-on-surface) 8%, transparent)}
}
.hc-button:active{--hc-state:color-mix(in srgb, var(--md-sys-color-on-primary) 10%, transparent)}
.hc-pill:active{--hc-state:color-mix(in srgb, var(--md-sys-color-on-surface) 10%, transparent)}
.hc-button:focus-visible,.hc-pill:focus-visible{outline:2px solid var(--md-sys-color-on-surface); outline-offset:3px}

/* Zustand als Pille wie StatusPill der App: ganzer Satz in labelLarge/onSurface, ohne Icon,
   ohne Mittelpunkt, keine graue Kleinschrift (Glossar „Ton“). */
.hc-status{display:inline-flex; align-items:center; gap:var(--hc-space-xs); margin:0; padding:2px var(--hc-space-s);
  border-radius:var(--hc-shape-full); background:var(--md-sys-color-surface-container-highest);
  color:var(--md-sys-color-on-surface); font-size:var(--md-sys-typescale-label-large-size);
  font-weight:var(--md-sys-typescale-label-large-weight); line-height:var(--md-sys-typescale-label-large-line-height)}
.hc-status svg{width:16px; height:16px; fill:var(--md-sys-color-on-surface-variant); flex:none}
.hc-status[hidden]{display:none}

/* Textlink wie M3 TextButton (z. B. Datenschutz unten). */
.hc-link{color:var(--md-sys-color-on-surface-variant); font-size:var(--md-sys-typescale-body-small-size)}

/* Lädt: M3-Kreis im Akzent. */
.hc-spinner{width:32px; height:32px; border-radius:50%; border:3px solid var(--md-sys-color-surface-container-highest);
  border-top-color:var(--md-sys-color-primary); animation:hc-spin 1s linear infinite}
@keyframes hc-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.hc-spinner{animation-duration:3s}}

/* ---------- Erscheinen ----------
   Von leicht unten an seinen Platz federn, dabei einblenden. Greift auch, wenn ein Zustand
   per [hidden] wechselt (Laden → Inhalt): display:none → block startet sie neu. */
@keyframes hc-enter-move{from{transform:translateY(16px)}to{transform:none}}
@keyframes hc-enter-fade{from{opacity:0}to{opacity:1}}
.hc-enter{animation:hc-enter-move var(--hc-spatial) both, hc-enter-fade var(--hc-effects) both}
.hc-enter-2{animation-delay:60ms}
.hc-enter-3{animation-delay:120ms}

/* Kurze Rückmeldung (z. B. „Text kopiert“). */
@keyframes hc-pop{from{transform:scale(.9)}to{transform:none}}
.hc-pop{animation:hc-pop var(--hc-spatial-fast) both, hc-enter-fade var(--hc-effects-fast) both}

/* ---------- Seitenwechsel (Startseite ↔ Datenschutz) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:hc-enter-fade var(--hc-effects-fast) reverse both}
::view-transition-new(root){animation:hc-enter-fade var(--hc-effects) both}