/* =========================================================
   Klar icons — one drawing vocabulary
   ----------------------------------------------------------
   The reference draws every symbol itself and sizes it here,
   not at the call site:

     svg{width:22px;height:22px;fill:none;stroke:currentColor;
         stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
         flex-shrink:0}

   That single rule is what gives the set its even weight: the
   stroke follows the text colour, never the font size, so an
   icon beside a 26 px heading and one beside an 11 px label are
   the same thickness. An icon font cannot do that — a glyph is a
   filled shape scaled by ``font-size``.

   Below: the reference rule verbatim, then its component
   overrides, each next to the selector it came from. Components
   whose names this application changed are listed with both.

   Loaded early (right after base.css) so any component sheet can
   still overrule a size for its own context.
   ========================================================= */

svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

button svg,
a svg,
label svg {
  pointer-events: none;
}

/* --- Shell ------------------------------------------------ */
/* ref: .app-brand svg */
.app-header__brand svg {
  color: var(--accent);
  width: 24px;
  height: 24px;
}

/* ref: .nav-item svg */
.bottom-nav__item svg {
  width: 22px;
  height: 22px;
}

/* --- Diary ------------------------------------------------ */
.meal-title svg {
  width: 18px;
}
.meal-refined .meal-title svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
}
.meal-energy svg {
  width: 15px;
  height: 17px;
  color: #8a91a3;
  fill: #8a91a31a;
  stroke-width: 1.6;
}
.meal-controls .icon-button svg {
  width: 18px;
  height: 18px;
}
.meal-refined .meal-add svg {
  width: 15px;
}
.entry .icon-button svg {
  width: 18px;
}
.meal-choice-end > svg {
  width: 18px;
  color: var(--accent);
}
.meal-choice-entries svg {
  width: 12px;
  height: 14px;
  color: var(--muted);
}
/* Der Pfeil am Ende eines Blatteintrags. Das Konzept schreibt ihn als
   ``.meal-type-list button > svg`` -- unter diesem Namen stand die Regel hier
   auch, nur heisst die Liste bei uns ``.sheet__list``. Die Regel war damit
   wirkungslos, und der Pfeil fiel auf die globalen 22px zurueck statt auf 17.
   Der Selektor trifft jetzt die Bauform statt eines Klassennamens: das einzige
   direkte svg-Kind eines Eintrags ist der Pfeil, denn das fuehrende Symbol
   steckt in ``.type-icon``. Rand und Farbe stehen in ``klar-dialog.css``. */
.sheet__list > a > svg,
.sheet__list > button > svg {
  width: 17px;
}
.type-icon svg {
  width: 19px;
  height: 19px;
}
.target-selection > svg {
  width: 17px;
  color: var(--muted);
}

/* --- Search, lists, empty states -------------------------- */
.search-box svg {
  color: var(--muted);
  width: 19px;
}
.empty svg {
  display: block;
  margin: 0 auto 12px;
  color: var(--accent);
  width: 30px;
  height: 30px;
}
.chip svg {
  width: 13px;
  height: 13px;
}
.thumb svg {
  width: 25px;
  height: 25px;
}
.food-result .quick-add svg {
  width: 18px;
  height: 18px;
}
.scan-result > svg {
  width: 15px;
  height: 18px;
  flex: none;
  color: var(--muted);
}
.scan-result-icon svg {
  width: 28px;
  height: 28px;
}

/* --- Recipes and containers ------------------------------- */
.recipe-cover svg {
  width: 46px;
  height: 46px;
  stroke-width: 1.2;
  color: var(--accent);
}
.recipe-list .recipe-cover svg {
  width: 25px;
  height: 25px;
}
.detail-hero > svg {
  width: 53px;
  height: 53px;
  stroke-width: 1.1;
}
.container-row > svg {
  color: var(--accent);
  width: 28px;
  height: 28px;
}
.container-select svg {
  margin-left: auto;
  width: 17px;
}
.editor-ingredient .icon-button svg {
  width: 17px;
}

/* --- Settings rows ---------------------------------------- */
/* ref: .settings-row .setting-icon svg */
.settings-row .settings-row__icon svg {
  width: 19px;
}
/* ref: .settings-row>svg — der Pfeil am Zeilenende. Der zweite Selektor hiess
   frueher ``.settings-row .settings-row__caret svg`` und traf nichts: der Pfeil
   *ist* das svg und traegt die Klasse selbst, er enthaelt keines. */
.settings-row > svg,
.settings-row > svg.settings-row__caret {
  margin-left: auto;
  width: 17px;
  color: var(--muted);
}

/* --- Energy, goals, copy ---------------------------------- */
.energy-total svg {
  width: 17px;
  height: 20px;
  color: var(--accent);
}
.compare-energy svg {
  width: 17px;
  color: var(--accent);
}
.lock-explanation svg {
  width: 17px;
  height: 18px;
  flex-shrink: 0;
  color: var(--accent);
}
.snapshot-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.copy-field .icon-button svg {
  width: 18px;
}