/* The page's styles. Kept beside app.js rather than inline so a change to
   either is a change to one file. */
  :root {
    --bg: #f7f6f3; --card: #ffffff; --sunk: #f1ede6; --ink: #1d1b18;
    --muted: #6b6459; --line: #e3ded5; --line-firm: #cdc5b8;
    --accent: #b4471f; --ok: #2f6b57; --warn: #8a5a12; --sel: #1d1b18;
    --sans: "Segoe UI", system-ui, -apple-system, Helvetica, Arial, sans-serif;
    --mono: "Cascadia Mono", Consolas, "SF Mono", ui-monospace, monospace;
  }
  * { box-sizing: border-box; }
  body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.5; }
  .wrap { max-width: 1080px; margin: 0 auto; padding: 32px 20px 80px; }
  h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: -0.01em; }
  .lede { color: var(--muted); margin: 0 0 28px; }
  h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 12px; }

  .card { background: var(--card); border: 1px solid var(--line-firm); padding: 20px; margin-bottom: 24px; }

  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line-firm); white-space: nowrap; }
  td { padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tbody tr:last-child td { border-bottom: 0; }
  .num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

  input, select, button { font: inherit; color: inherit; background: #fff; border: 1px solid var(--line-firm); padding: 6px 8px; }
  input { width: 100%; }
  input.qty { width: 84px; text-align: right; font-family: var(--mono); }
  input.temp, input.mins { width: 78px; text-align: right; font-family: var(--mono); }
  button { cursor: pointer; background: var(--ink); color: #fff; border-color: var(--ink); padding: 8px 16px; }
  button.ghost { background: transparent; color: var(--ink); }
  button.tiny { padding: 3px 9px; font-size: 13px; }
  button:disabled { opacity: .5; cursor: default; }
  .actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }

  .scroller { overflow-x: auto; }
  .totals { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
  .tile { background: var(--card); padding: 14px 16px; }
  .tile .k { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
  .tile .v { font-family: var(--mono); font-size: 21px; font-variant-numeric: tabular-nums; margin-top: 2px; }
  .tile .u { font-size: 12px; color: var(--muted); }
  .tile.partial .v { color: var(--accent); }
  .tile.none .v { color: var(--muted); font-size: 15px; }

  h3 { font-size: 17px; margin: 0 0 2px; }
  .sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
  #weight { margin: 14px 0 0; font-size: 13px; }
  .err { border-left: 3px solid var(--accent); background: #fbeae6; padding: 12px; margin-top: 14px; font-size: 14px; }
  .err ul { margin: 8px 0 0; padding-left: 18px; }
  .err details { margin-top: 10px; font-size: 12.5px; color: var(--muted); }
  .err summary { cursor: pointer; }
  .err details code { display: block; margin-top: 6px; color: var(--muted); }
  .muted { color: var(--muted); }
  code { font-family: var(--mono); font-size: 13px; }
  /* A datalist cannot carry which database a suggestion came from: picking
     "Ghee" from ICMR and "Ghee" from FitShield USDA both hand back the same
     string. This dropdown keeps the chosen record's source.

     It is fixed-position and lives directly under <body>, because the rows sit
     inside a horizontally scrolling table: any ancestor with overflow other
     than visible clips an absolutely positioned child, which previously left
     only the first of three matches on screen. */
  #suggest {
    position: fixed; z-index: 100; background: var(--card);
    border: 1px solid var(--line-firm); border-radius: 2px;
    box-shadow: 0 10px 28px rgba(29,27,24,.16);
    max-height: min(320px, 60vh); overflow-y: auto;
  }
  /* Stacked, not side by side: a long name and a long source competing on
     one line squeezed "Verka ghee" onto two lines and cut its code off. */
  #suggest .opt { padding: 8px 12px; cursor: pointer; }
  #suggest .opt + .opt { border-top: 1px solid var(--line); }
  #suggest .opt:hover { background: var(--sunk); }
  #suggest .opt.on { background: var(--sel); color: #fff; }
  #suggest .opt.on .db { color: rgba(255,255,255,.72); }
  #suggest .nm { font-size: 14px; display: block; }
  #suggest .db {
    color: var(--muted); font-size: 11.5px; display: block; margin-top: 1px;
  }
  #suggest .none, #suggest .hint {
    padding: 9px 12px; color: var(--muted); font-size: 13px; cursor: default;
  }
  #suggest .hint { border-top: 1px solid var(--line); background: var(--sunk); }

  /* Reserved whether or not a source is pinned, so choosing one does not
     shunt every row below it down the page. */
  .namecell { min-height: 54px; }
  .pin { margin-top: 3px; font-size: 11.5px; min-height: 17px; }
  .pin .who { color: var(--ok); font-weight: 600; }
  .pin .code { color: var(--muted); font-family: var(--mono); font-size: 11px; }
  .pin button {
    background: none; border: 0; color: var(--muted); cursor: pointer;
    padding: 0 0 0 6px; font-size: 11.5px; text-decoration: underline;
  }
  .pin .idle { color: var(--muted); }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* Below this width the six-column row cannot fit, and a form you scroll
     sideways to fill is worse than one that stacks. */
  @media (max-width: 820px) {
    .entry thead { display: none; }
    .entry, .entry tbody, .entry tr, .entry td { display: block; width: 100%; }
    .entry tr {
      border: 1px solid var(--line-firm); padding: 12px; margin-bottom: 12px;
      position: relative;
    }
    .entry td { border: 0; padding: 4px 0; }
    .entry td::before {
      content: attr(data-label); display: block; font-size: 10.5px;
      text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
      margin-bottom: 3px;
    }
    .entry td.namecell::before { content: "Ingredient"; }
    .entry input, .entry select { width: 100%; }
    .entry input.qty, .entry input.temp, .entry input.mins { width: 100%; text-align: left; }
    /* width:auto matters: the block rule above makes every cell 100% wide, and
       a full-width box anchored to right:8px starts at the left edge, which
       put the remove button on top of the Ingredient label. */
    .entry td.remove {
      position: absolute; top: 8px; right: 8px; width: auto; padding: 0;
    }
    .entry td.remove::before { content: none; }
    .entry td.namecell { padding-right: 34px; }
    .pair { display: flex; gap: 10px; }
    .pair > * { flex: 1; }
  }

/* ---- Dish claims ----------------------------------------------------- */

.fields { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.field { flex: 1 1 240px; }
.field label {
  display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin-bottom: 4px;
}
.field select { width: 100%; }

/* One claim is one row: the wording a pack would carry, and nothing else.
   Everything behind it - the figures, the condition, the lawful synonyms -
   opens on click, so a dish with sixteen claims still reads as a list. */
.claim { border-left: 3px solid var(--ok); margin-bottom: 4px; background: var(--card); }
.claim > summary {
  cursor: pointer; list-style: none; display: flex; align-items: baseline;
  justify-content: space-between; gap: 14px; padding: 9px 12px 9px 13px;
}
.claim > summary::-webkit-details-marker { display: none; }
.claim > summary:hover { background: var(--sunk); }
.claim .lab { font-weight: 600; }
.claim .more { color: var(--muted); font-size: 12px; white-space: nowrap; }
.claim .more::before { content: "detail"; }
.claim[open] .more::before { content: "hide"; }
.claim .info { padding: 2px 12px 12px 13px; }
.claim .cond { font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.claim .why { font-size: 13px; margin-top: 5px; }
.claim .also { font-size: 12px; color: var(--muted); margin-top: 3px; }
.claim .info .also:first-child { margin: 0 0 6px; }

/* Still used by the folded-away ingredient tables. */
.group { border-top: 1px solid var(--line); padding: 4px 0; }
.group > summary {
  cursor: pointer; padding: 11px 0; font-size: 15px; font-weight: 600;
  list-style: none; display: flex; align-items: baseline; gap: 10px;
}
.group > summary::-webkit-details-marker { display: none; }
/* Drawn with borders rather than set as a character: the triangle glyphs
   are missing from the default Windows UI font and came out as tofu. */
.group > summary::before {
  content: ""; flex: none; width: 0; height: 0; align-self: center;
  border: 5px solid transparent; border-left-color: var(--muted);
  border-right: 0; transition: transform .12s;
}
.group[open] > summary::before { transform: rotate(90deg); }
.group > summary .c { font-family: var(--mono); color: var(--muted); font-weight: 400; font-size: 13px; }
.group > summary:hover { color: var(--accent); }
.group .body { padding: 0 0 12px 21px; }

.empty { color: var(--muted); font-size: 13.5px; }
td.gap { color: var(--warn); }