/* =========================================================
   Klar — shared component vocabulary
   ----------------------------------------------------------
   The components UIUX.md calls common: page heading, panel,
   segmented control, search box, macro line, energy overview,
   goal band, meal and entry rows, portion pills, tiles, settings
   rows, empty/error/success states, folds, the docking main
   action and the sheet dialog.

   Values are taken from the *effective* Klar cascade, i.e.
   referenz/styles.css followed by referenz/klar/klar.css, the way
   the reference actually renders — not from whichever rule is
   found first. The rendered proof of each screen lives in
   docs/uiux/klar/_gerendert/.

   Deliberately scoped under ``.app-main`` wherever the class name
   is a common word. ABGLEICH.md lists two defects caused by
   exactly that: a global ``.profile`` forced the profile form into
   a row, and a global ``.entry`` painted a whole detail page red.
   Neither is reintroduced here.
   ========================================================= */

/* ---------------------------------------------------------- page heading */

.app-main .page-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.app-main .page-heading > div {
  min-width: 0;
}

/* Größe, Schnitt und Versalien stehen bei ``.eyebrow`` in
   typography.css. Hier steht nur, was der Seitenkopf daran ändert. */
.app-main .page-heading .eyebrow {
  color: var(--accent);
  margin-bottom: 9px;
  display: block;
}

/* Größe und Laufweite kommen von ``h1``. Hier steht nur der Umbruch:
   ein langer Rezeptname darf nicht über den Rand hinauslaufen. */
.app-main .page-heading h1 {
  overflow-wrap: anywhere;
}

.app-main .page-heading p {
  font-size: var(--text-base);
  line-height: 1.6;
  margin-top: 9px;
  color: var(--muted);
}

.app-main .page-heading__actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------- surfaces */

.app-main .panel {
  padding: 18px;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--round);
  min-width: 0;
}

.app-main .panel.stack,
.app-main .panel--stack {
  display: grid;
  gap: 16px;
  align-content: start;
}

/* Kein eigener Wert: im Konzept ist eine Abschnittsüberschrift im
   Panel eine gewöhnliche ``h2`` (19 px). Nur die Lebensmittel- und
   Eintragsseiten drücken sie auf 16 px, und das steht dort. */

.app-main .section-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 13px;
}

.app-main .section-label > small,
.app-main .section-sub {
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.app-main .compact-heading {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.app-main .compact-heading h2 {
  font-size: var(--text-lg);
}

.app-main .hint {
  font-size: var(--text-sm);
  line-height: 1.7;
  color: var(--muted);
}

.app-main .work-context {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-sm);
}

.app-main .work-context strong {
  color: var(--accent);
}

.app-main .target-context {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--text-sm);
  padding: 11px 12px;
  background: var(--tint);
  border-radius: 11px;
  color: var(--accent);
  line-height: 1.5;
}

.app-main .target-context svg {
  flex-shrink: 0;
}

/* ---------------------------------------------------------- chips */

.app-main .chip {
  font-size: var(--text-2xs);
  font-weight: 700;
  padding: 5px 8px;
  background: var(--tint);
  color: var(--accent);
  border-radius: 7px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  border: 0;
  line-height: 1.4;
}

.app-main .chip--neutral {
  background: var(--line);
  color: var(--muted);
}

.app-main .chip-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ---------------------------------------------------------- meter */

.app-main .meter {
  height: 6px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--line);
}

.app-main .meter > i {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 9px;
  max-width: 100%;
}

/* ---------------------------------------------------------- daily balance (home) */

.app-main .daily-stat {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: 20px;
  border-radius: var(--round);
}

/* Kopfzeile der Bilanz: ``row between`` aus den Hilfsklassen, mit den
   beiden Namen des Konzepts. Die ``daily-stat__*``-Namen waren ein
   eigener Satz für dieselben zwei Elemente und ließen sich gegen die
   Referenz nicht messen. */
.app-main .daily-stat .stat-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
}

.app-main .remaining {
  font-size: var(--text-sm);
  color: var(--accent);
  font-weight: 750;
  white-space: nowrap;
}

/* Über dem Ziel ist kein Fehler, aber auch keine Restmenge. Rot bleibt
   der destruktiven Aktion vorbehalten; das hier ist der gedeckte Ton
   daneben. */
.app-main .remaining.is-over {
  color: var(--over-goal);
}

.app-main .remaining.is-muted {
  color: var(--muted);
  font-weight: 600;
}

.app-main .calorie-main {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0 14px;
  font-variant-numeric: tabular-nums;
}

.app-main .calorie-main strong {
  font-size: 2.25rem;
  letter-spacing: -1.5px;
  line-height: 1.1;
}

.app-main .calorie-main span {
  font-size: var(--text-sm);
  color: var(--muted);
}

.app-main .macro-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  padding-top: 17px;
  margin-top: 17px;
  border-top: 1px solid var(--line);
}

.app-main .macro-grid > div {
  min-width: 0;
}

.app-main .macro-grid small {
  color: var(--muted);
  font-size: var(--text-sm);
}

.app-main .macro-grid .meter {
  height: 4px;
}

.app-main .macro-value {
  margin: 7px 0;
  font-size: var(--text-base);
  font-weight: 750;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.app-main .macro-value span {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
}

.app-main .macro-grid .rest {
  font-size: var(--text-2xs);
  color: var(--muted);
  display: block;
  margin-top: 6px;
  white-space: nowrap;
}

/* Fett, nicht nur dunkler: seit der Abstand zum Ziel eine Vorzeichenzahl ist
   („+102,5 g" statt „102,5 g drüber"), bleibt in der Spalte Raum dafür. */
.app-main .macro-grid .rest.is-over {
  color: var(--over-goal);
  font-weight: 750;
}

/* ---------------------------------------------------------- compact balance (diary) */

.app-main .compact-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 13px 0 14px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.app-main .compact-stat {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.app-main .compact-stat > span {
  display: block;
  font-size: var(--text-xs);
  color: var(--muted);
  margin-bottom: 5px;
}

.app-main .compact-stat strong {
  font-size: var(--text-md);
  font-weight: 800;
  display: block;
}

.app-main .compact-stat strong small {
  font-size: var(--text-2xs);
  color: var(--muted);
  font-weight: 500;
}

.app-main .compact-stat .meter {
  margin: 7px 0 6px;
  height: 4px;
}

.app-main .compact-stat em {
  display: block;
  font-size: var(--text-2xs);
  font-style: normal;
  color: var(--muted);
  white-space: nowrap;
}

.app-main .compact-stat .is-over {
  color: var(--over-goal);
  font-weight: 700;
}

/* ---------------------------------------------------------- macro line
   A quiet labelled text row — never coloured chip areas. The dot
   is decoration; the word and the number carry the meaning. */

.app-main .macro-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 13px;
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: 1.6;
  margin-top: 5px;
}

.app-main .macro-line > span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.app-main .macro-line i {
  width: 3px;
  height: 10px;
  border-radius: 2px;
  margin-right: 2px;
  opacity: 0.75;
  flex-shrink: 0;
}

.app-main .macro-line b {
  font-weight: 650;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.app-main .macro-line small {
  font-size: inherit;
  color: var(--muted);
}

.app-main .macro-line--compact {
  gap: 3px 8px;
  font-size: var(--text-2xs);
}

/* Ohne das „g" hinter der Zahl (``no_unit`` in macro_line.html): der Raum,
   den die Einheit einnahm, geht in den Abstand zwischen den drei Werten. */
.app-main .macro-line--bare {
  gap: 3px 12px;
}

/* ---------------------------------------------------------- energy overview
   Exact title "Energieübersicht": big kcal number, one slim
   segmented distribution, three labelled macro values.
   No ring, no percentages in this graphic. */

.app-main .energy-overview {
  display: grid;
  gap: 19px;
  padding: 3px 0 5px;
}

.app-main .energy-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.app-main .energy-total > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-sm);
}

/* Die Flamme. Maß in klar-icons.css (``.energy-total svg`` = 17x20). */

.app-main .energy-total > div {
  display: flex;
  align-items: baseline;
  gap: 7px;
}

.app-main .energy-total strong {
  font-size: 2.375rem;
  line-height: 1.1;
  letter-spacing: -1.8px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}

.app-main .energy-total > div > span {
  font-size: var(--text-sm);
  color: var(--muted);
}

.app-main .energy-distribution {
  display: flex;
  gap: 3px;
  height: 7px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--line);
}

.app-main .energy-distribution i {
  min-width: 0;
  transition: flex 0.22s;
}

.app-main .energy-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.app-main .energy-values > div {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.app-main .energy-values > div > span {
  font-size: var(--text-2xs);
  color: var(--muted);
  display: flex;
  gap: 5px;
  align-items: center;
}

.app-main .energy-values i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

.app-main .energy-values strong {
  font-size: 1.25rem;
  font-weight: 650;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}

.app-main .energy-values strong small {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 500;
}

/* ---------------------------------------------------------- goal band
   The two secondary four-column groups: "Prozent deiner Tagesziele"
   and "Tagesstand mit diesem Eintrag". */

.app-main .goal-band {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.app-main .goal-band > div {
  min-width: 0;
}

.app-main .goal-band > div > span {
  font-size: var(--text-2xs);
  color: var(--muted);
}

.app-main .goal-band strong {
  display: block;
  font-size: var(--text-md);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-main .goal-band strong small {
  font-weight: 500;
  font-size: var(--text-2xs);
  color: var(--muted);
}

.app-main .goal-band .target-track {
  height: 4px;
  margin: 7px 0;
}

.app-main .goal-band > div > small {
  display: block;
  font-size: 0.5625rem;
  color: var(--muted);
  white-space: nowrap;
}

.app-main .goal-band > div > small.is-over {
  color: var(--over-goal);
}

.app-main .target-track {
  display: flex;
  height: 7px;
  background: var(--line);
  border-radius: 8px;
  overflow: hidden;
  margin: 8px 0;
}

.app-main .target-track > span {
  display: block;
  height: 100%;
  flex-shrink: 0;
}

.app-main .target-track > span.before {
  opacity: 0.35;
}

.app-main .graph-key {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 0.5625rem;
  color: var(--muted);
}

.app-main .graph-key > span {
  display: flex;
  gap: 5px;
  align-items: center;
}

.app-main .graph-key i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--accent);
}

.app-main .graph-key .before {
  opacity: 0.35;
}

/* The two goal panels sit back visually — the detail is secondary. */
.app-main .panel--goal-band {
  padding: 14px 12px;
  gap: 12px;
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}

.app-main .panel--goal-band h2 {
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------- tiles */

.app-main .tile-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.app-main .tile {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--round);
  padding: 17px 15px;
  min-height: 131px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 7px;
  color: inherit;
  text-decoration: none;
  min-width: 0;
}

.app-main .tile__icon {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  background: var(--tint);
  color: var(--accent);
  border-radius: 13px;
  margin-bottom: 6px;
}

.app-main .tile strong {
  font-size: var(--text-md);
  overflow-wrap: anywhere;
}

.app-main .tile small {
  color: var(--muted);
  line-height: 1.5;
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- segmented control */

.app-main .segment {
  display: flex;
  background: var(--line);
  padding: 4px;
  border-radius: 13px;
  gap: 3px;
}

/* 44 px, nicht die 40 der Referenz.
   Das Projekt hat diese Entscheidung schon getroffen und geprüft:
   ``recipes/tests/test_space_tabs_strip.py`` misst ``.segment > a`` und
   verlangt die 44 px aus UIUX.md. Ein Reiter ist ein Berührziel, und die
   Polsterung des Bandes zählt dabei nicht mit — sie liegt außerhalb des
   Ankers und löst ihn nicht aus. Vier Pixel Abweichung von der Vorlage gegen
   eine belegte Bedienbarkeitsregel: die Regel gewinnt. */
/* ``label`` steht mit in der Liste, weil eine Zweifachauswahl, die
   ohne JavaScript funktionieren soll, aus echten Radiobuttons in
   Labeln besteht (Berechnungsart im Rezepteditor). Ohne diese Zeile
   blieben dort rohe Radiobuttons stehen, während dieselbe Auswahl
   anderswo als Band erscheint — dieselbe Frage, zwei Gestalten. */
.app-main .segment > button,
.app-main .segment > a,
.app-main .segment > label {
  position: relative;
  flex: 1;
  border: 0;
  padding: 9px 8px;
  min-height: 44px;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 750;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

/* Der Zustand kommt vom Server (``is-selected``). ``:has(input:checked)``
   ist der Gürtel zum Hosenträger: klickt jemand, ohne dass die Seite neu
   lädt, springt die Auszeichnung trotzdem sofort mit. */
.app-main .segment > .is-selected,
.app-main .segment > [aria-pressed="true"],
.app-main .segment > [aria-current="page"],
.app-main .segment > label:has(input:checked) {
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
}

/* Der Radiobutton deckt die ganze Fläche ab, ist aber unsichtbar: so
   trägt das Label ein echtes 44-px-Ziel und die Tastaturbedienung
   bleibt die des Browsers. Sichtbar wird der Fokus am Label. */
.app-main .segment > label > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.app-main .segment > label:focus-within {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- search box */

.app-main .search-box {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 13px;
  min-height: 48px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Die Lupe wird in klar-icons.css bemaßt (``.search-box svg`` = 19 px). */

.app-main .search-box input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--text-16); /* nie unter 16 px — sonst zoomt iOS beim Fokus */
  padding: 12px 0;
}

.app-main .search-box:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.app-main .search-tools {
  display: grid;
  grid-template-columns: 1fr 48px;
  gap: 8px;
}

.app-main .search-tools .btn--icon {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 14px;
}

/* ---------------------------------------------------------- view toggle */

.app-main .view-toggle {
  display: flex;
  gap: 2px;
}

.app-main .view-toggle > a,
.app-main .view-toggle > button {
  border: 0;
  background: transparent;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
  border-radius: 10px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-main .view-toggle > .is-selected {
  color: var(--accent);
  background: var(--tint);
}

/* ---------------------------------------------------------- empty state */

.app-main .empty {
  text-align: center;
  padding: 30px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--round);
  color: var(--muted);
  font-size: var(--text-base);
  line-height: 1.8;
}

/* ``.empty svg`` ist in klar-icons.css auf 30x30 gesetzt; hier steht
   nur die Platzierung über dem Text. */
.app-main .empty > svg {
  display: block;
  margin: 0 auto 12px;
  color: var(--accent);
}

/* ---------------------------------------------------------- messages in page */

.app-main .error-box {
  padding: 13px;
  background: var(--danger-soft-bg);
  color: var(--danger-soft-ink);
  border: 1px solid var(--danger-soft-line);
  border-radius: 12px;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.app-main .success-box {
  padding: 14px;
  background: var(--success-soft-bg);
  color: var(--success-soft-ink);
  border-radius: 12px;
  font-size: var(--text-sm);
  line-height: 1.6;
}

.app-main .form-error {
  font-size: var(--text-sm);
  color: var(--danger);
  line-height: 1.6;
}

.app-main .form-error:empty {
  display: none;
}

.app-main .snapshot-note {
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.7;
  display: flex;
  gap: 7px;
}

/* Maß in klar-icons.css (``.snapshot-note svg`` = 16x16). */

/* ---------------------------------------------------------- fold (details) */

.app-main .fold {
  border: 1px solid var(--line);
  background: var(--surface);
  padding: 0 15px;
  border-radius: 14px;
}

.app-main .fold > summary {
  min-height: 48px;
  cursor: pointer;
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  gap: 8px;
  list-style: none;
}

.app-main .fold > summary::-webkit-details-marker {
  display: none;
}

.app-main .fold > summary::after {
  content: "";
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--t-fast);
}

.app-main .fold[open] > summary::after {
  transform: rotate(-135deg) translate(-2px, -2px);
}

.app-main .fold > div {
  padding-bottom: 14px;
  /* Eine Nährwerttabelle mit langen Bezeichnungen darf bei 320 px waagerecht
     scrollen — die Seite darum herum nicht. Ohne eigenen Scrollbereich schöbe
     sie den ganzen Inhalt auf. */
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

/* ---------------------------------------------------------- nutrition table */

.app-main .nutrition-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.app-main .nutrition-table th {
  text-align: left;
  font-weight: 500;
  color: var(--muted);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.app-main .nutrition-table td {
  text-align: right;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.app-main .nutrition-table tr.is-sub th {
  padding-left: 12px;
  font-size: var(--text-xs);
}

/* ---------------------------------------------------------- settings / container rows */

.app-main .settings-row {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 13px 0;
  min-height: 60px;
  text-align: left;
  font-size: var(--text-base);
  font-weight: 650;
  color: inherit;
  text-decoration: none;
}

.app-main .settings-row:last-child {
  border-bottom: 0;
}

.app-main .settings-row__icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  background: var(--tint);
  border-radius: 11px;
  color: var(--accent);
  flex-shrink: 0;
}

.app-main .settings-row__body {
  flex: 1;
  min-width: 0;
}

.app-main .settings-row__body small {
  display: block;
  color: var(--muted);
  font-size: var(--text-xs);
  margin-top: 5px;
  font-weight: 500;
  line-height: 1.5;
}

/* Maß in klar-icons.css (``.settings-row > svg`` = 17 px). */
.app-main .settings-row__caret {
  margin-left: auto;
  color: var(--muted);
  flex-shrink: 0;
}

/* ---------------------------------------------------------- profile card
   Im Konzept heißt die Zeile ``.panel.profile``. Der Name steht hier
   **nur** in Verbindung mit ``.panel`` — ABGLEICH.md hält einen Fehler
   fest, bei dem ein globales ``.profile`` das Profilformular in eine
   Zeile gezwungen hat, weil die Profilseite selbst so heißt. An einem
   Panel kann es das nicht: das Formular ist keines. */

.app-main .panel.profile {
  display: flex;
  gap: 15px;
  align-items: center;
  min-width: 0;
}

.app-main .panel.profile .avatar {
  width: 55px;
  height: 55px;
  font-size: var(--text-md);
  flex-shrink: 0;
}

.app-main .panel.profile > div {
  min-width: 0;
}

.app-main .panel.profile h2 {
  font-size: var(--text-xl);
  overflow-wrap: anywhere;
}

.app-main .panel.profile p {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: 5px;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- docking main action
   Floating above the navigation while the normal end of the form
   is out of view; blending into the page as soon as it is visible.
   Only the visible variant is focusable — the hidden one carries
   ``inert`` (klar-action-dock.js). */

.app-main .bottom-action {
  display: grid;
  gap: 9px;
  margin-top: 8px;
}

.app-main .bottom-action > small {
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
}

.app-main .bottom-action > .btn {
  transition:
    opacity var(--t-med),
    transform var(--t-slow);
}

.app-main .bottom-action.is-floating > .btn {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
}

.action-dock {
  position: fixed;
  z-index: 20;
  bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 11px);
  left: max(var(--page-gutter), var(--safe-left));
  right: max(var(--page-gutter), var(--safe-right));
  max-width: calc(var(--container-max) - 2 * var(--page-gutter));
  margin: 0 auto;
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.25s ease;
  filter: drop-shadow(0 5px 13px rgba(37, 35, 74, 0.15));
}

.action-dock.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.action-dock .btn {
  min-height: 49px;
  border-radius: 15px;
}

body.is-signed-out .action-dock {
  bottom: calc(var(--safe-bottom) + 14px);
}

@media (prefers-reduced-motion: reduce) {
  .action-dock,
  .app-main .bottom-action > .btn,
  .app-main .energy-distribution i {
    transition: none;
    transform: none;
  }
}

/* ---------------------------------------------------------- narrow phones */

/* Die Wertzeile der Tagebuchspalte, gemessen an der echten Schrift: „1.608"
   (14 px, 800) ist 39,2 px breit, „ / 2.000" daneben (10 px, 500) 35,5 px --
   zusammen 74,7 px. Die Spalte hat bei 390 px 81,75 px, bei 361 px noch
   74,5 px: dort brach nur die kcal-Spalte um, und ihre Anzeige stand eine
   Zeile tiefer als die drei daneben. Unter 380 px steht das Ziel deshalb in
   **allen** vier Spalten in einer eigenen Zeile -- 39 px und 36 px passen bis
   320 px hinunter (67 px), und die vier Balken bleiben auf einer Höhe. */
@media (max-width: 380px) {
  .app-main .compact-stat strong small {
    display: block;
    margin-top: 2px;
    line-height: 1.3;
  }
}

@media (max-width: 350px) {
  .app-main .compact-stats {
    gap: 7px;
  }
  .app-main .compact-stat strong {
    font-size: var(--text-base);
  }
  .app-main .compact-stat em {
    font-size: 0.5625rem;
  }
  .app-main .compact-stat > span {
    font-size: var(--text-2xs);
  }
  .app-main .compact-stat strong small {
    font-size: 0.5625rem;
  }
  .app-main .page-heading h1 {
    font-size: var(--text-3xl);
  }
  .app-main .macro-value {
    white-space: normal;
    font-size: var(--text-sm);
  }
  .app-main .macro-value span {
    display: block;
    margin-top: 3px;
  }
  .app-main .energy-total strong {
    font-size: 2rem;
  }
  .app-main .energy-values strong {
    font-size: var(--text-lg);
  }
  .app-main .goal-band {
    gap: 7px;
  }
  .app-main .tile {
    padding: 14px 12px;
  }
}