/* Honest loaders — the failure states for the four May loaders.
 *
 * The whole point of this file is that an unreadable screen must not look like
 * an empty one. The empty states these replace (.ev-empty, .capture-empty,
 * .empty) are quiet, centred, low-contrast and reassuring — exactly right for
 * "you have not added anything yet", and exactly wrong for "the database
 * refused". So nothing here shares a class with them: left-aligned, a red rule
 * down the side, a mark in the corner, a monospace quotation of what the server
 * said, and a button. It should be impossible to skim one and think it was the
 * other.
 *
 * HANDOFF rule 6 — light theme. Flat accents need no override as fills or
 * borders, but do as TEXT: raw --amber is about 2:1 on white. #B03A2E for red
 * text, #9C5C08 for amber text. Rediscovered three times in one day; not again.
 *
 * HANDOFF rule 7 — equal specificity resolves by source order, and this file
 * loads after the inline <style>, so these rules win over anything in
 * index.html at the same weight. Nothing here is written to depend on that: the
 * classes are all new and unshared. */

/* ---------------------------------------------------------------------------
   The panel
   --------------------------------------------------------------------------- */

.hl-panel {
  border: 1px solid rgba(224, 90, 74, 0.35);
  border-left: 3px solid #E05A4A;
  border-radius: 0 10px 10px 0;
  background: rgba(224, 90, 74, 0.06);
  padding: 1rem 1.1rem 0.9rem;
  margin: 0.4rem 0 1rem;
  text-align: left;
  max-width: 46rem;
}

.hl-panel-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.6rem;
}

.hl-panel-mark {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #E05A4A;
  color: #1A1410;
  font-weight: 800;
  font-size: 0.78rem;
  line-height: 20px;
  text-align: center;
}

.hl-panel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 700;
  color: #E05A4A;
  letter-spacing: 0.01em;
}

.hl-panel-body {
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--sand);
}

.hl-panel-body p { margin: 0 0 0.6rem; }
.hl-panel-body p:last-child { margin-bottom: 0; }
.hl-panel-body strong { color: var(--bone); font-weight: 700; }

.hl-panel-body code,
.hl-note code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--glass-border);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--bone);
  overflow-wrap: anywhere;
}

/* What the server actually said, quoted rather than paraphrased —
   HANDOFF rule 9. Set apart so it is obviously a quotation and not this
   file's own words. */
.hl-said {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--glass-border);
  color: var(--muted);
}

.hl-code-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82em;
  color: var(--muted);
}

/* The line that stops a reader taking the blank screen below as a fact. */
.hl-panel-guard {
  margin-top: 0.7rem !important;
  padding: 0.55rem 0.7rem;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 6px;
  font-size: 0.82rem;
}

.hl-panel-actions { margin-top: 0.85rem; }

.hl-btn {
  font-family: 'Archivo', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid rgba(224, 90, 74, 0.5);
  background: rgba(224, 90, 74, 0.12);
  color: #E05A4A;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.hl-btn:hover:not(:disabled) { background: rgba(224, 90, 74, 0.22); border-color: #E05A4A; }
.hl-btn:disabled { opacity: 0.6; cursor: default; }

/* ---------------------------------------------------------------------------
   The stats strip that refuses to print a number
   ---------------------------------------------------------------------------
   The Menu Editor's real strip reads 0 / 0 / $0 off an empty cache. A zero
   computed from a read that never happened is the same lie in a different font,
   so this prints a dash and says why. It is deliberately dimmer and flatter
   than .menu-stat so it does not read as a measurement. */

.hl-stats-dead {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.hl-stat-dead {
  padding: 0.7rem 0.5rem;
  border: 1px dashed var(--glass-border);
  border-radius: 10px;
  background: transparent;
  text-align: center;
}

.hl-stat-dash {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--muted);
}

.hl-stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.15rem;
}

.hl-stat-why {
  font-size: 0.68rem;
  color: #E05A4A;
  margin-top: 0.2rem;
}

/* ---------------------------------------------------------------------------
   The banner, for a partial failure
   --------------------------------------------------------------------------- */

.hl-note {
  border-left: 3px solid #E05A4A;
  border-radius: 0 8px 8px 0;
  background: rgba(224, 90, 74, 0.07);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.9rem;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--sand);
  text-align: left;
}
.hl-note strong { color: #E05A4A; font-weight: 700; }

/* #grid is a CSS grid of recipe cards; a banner dropped into it would otherwise
   be squeezed into one column's width. */
#grid > .hl-note { grid-column: 1 / -1; }

/* ---------------------------------------------------------------------------
   Light theme — HANDOFF rule 6
   --------------------------------------------------------------------------- */

body.light-theme .hl-panel {
  background: rgba(224, 90, 74, 0.05);
  border-color: rgba(176, 58, 46, 0.3);
  border-left-color: #B03A2E;
}
body.light-theme .hl-panel-title { color: #B03A2E; }
body.light-theme .hl-panel-mark { background: #B03A2E; color: #FFFFFF; }
body.light-theme .hl-panel-body code,
body.light-theme .hl-note code {
  background: #F0EDE8;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1A1814;
}
body.light-theme .hl-panel-guard { background: rgba(0, 0, 0, 0.04); }
body.light-theme .hl-btn { border-color: rgba(176, 58, 46, 0.45); background: rgba(176, 58, 46, 0.08); color: #B03A2E; }
body.light-theme .hl-btn:hover:not(:disabled) { background: rgba(176, 58, 46, 0.16); border-color: #B03A2E; }
body.light-theme .hl-stat-why { color: #B03A2E; }
body.light-theme .hl-note { background: rgba(224, 90, 74, 0.06); border-left-color: #B03A2E; }
body.light-theme .hl-note strong { color: #B03A2E; }