/* ChefsRecords diagram style - ONE set of rules for every text-built diagram on the guides.
   Spec: DATA/marketing/graphics/DIAGRAM_STYLE.md   Written 18 October 2026.
   This REPLACES the "Graphics" block in each guide's <style> (the .panel, .scale, .ladder, .tag and .flow rules).
   It does NOT touch the .app / .shot rules (real app screenshots).
   Needs the guides' existing variables: --ink --muted --accent --border --brand. */

:root {
  /* Colour by meaning. One meaning, one colour, on every page. */
  --t-cook:   #7F1D1D;  /* cooking and reheating: the core temperature food must reach */
  --t-hot:    #B71C1C;  /* hot holding: food kept hot for service or display */
  --t-zone-a: #B8390A;  /* danger zone, and anything over the chilled limit or under the hot holding limit */
  --t-zone-b: #C9480F;  /* (second stripe; both stripes keep white text above 4.5:1) */
  --t-chill:  #2E7D32;  /* chilled food, the 8 degrees C limit */
  --t-fridge: #1B5E20;  /* the recommended fridge setting, 5 degrees C */
  --t-frozen: #1565C0;  /* frozen, iced water: cold. Blue means cold and nothing else */
  --t-none:   #4B5563;  /* not a temperature: a time, "no number", a topic */
  --t-foreign-ink:  #374151;  /* not UK: outline box, no fill */
  --t-foreign-line: #6B7280;
}

/* ---- 1. Panel shell (unchanged from the guides) ---- */
.fig { margin: 18px 0 6px; }
.fig figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }
.panel { background: linear-gradient(180deg, #fbfbfc 0%, #f3f4f7 100%); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 10px 26px rgba(43,47,54,0.07); }
.panel-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border); font-weight: 700; font-size: 0.98rem; color: var(--ink); }
.panel-head .ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #fdecea;
  display: flex; align-items: center; justify-content: center; }
.panel-head .ic svg { width: 20px; height: 20px; }
.panel-head small { display: block; font-weight: 500; font-size: 0.8rem; color: var(--muted); }
.panel figcaption { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---- 2. Bands: the coloured box + title + tags + text rows. Replaces .scale and .ladder ----
   <figure class="fig bands stack panel">  a thermometer: rows touch, ordered hot to cold
   <figure class="fig bands list panel">   a list of separate figures (cooling, reheating, inspector panel)   */
.bands .row { display: grid; grid-template-columns: 112px 1fr; gap: 0 16px; }
.bands .sw { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 68px; padding: 8px; text-align: center; color: #fff; line-height: 1.15; overflow-wrap: break-word; }
.bands .sw b { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; }
.bands .sw small { font-size: 0.8rem; font-weight: 700; }
.bands .tx { align-self: center; padding: 10px 0; min-width: 0; line-height: 1.5; }
.bands .tx strong { display: block; color: var(--ink); }
.bands .tx > span { display: block; color: #3a3f48; font-size: 0.94rem; }
.bands .tx > span.tags { margin: 3px 0 2px; }
.bands .tx > span.tags .tag { margin: 0 6px 3px 0; }

/* colour = meaning (class on .sw). Written with .bands in front so it beats the base .sw rules */
.bands .t-cook   { background: var(--t-cook); }
.bands .t-hot    { background: var(--t-hot); }
.bands .t-zone   { background: repeating-linear-gradient(135deg, var(--t-zone-a) 0 10px, var(--t-zone-b) 10px 20px); min-height: 92px; }
.bands .t-chill  { background: var(--t-chill); }
.bands .t-fridge { background: var(--t-fridge); }
.bands .t-frozen { background: var(--t-frozen); }
.bands .t-none   { background: var(--t-none); }
.bands .t-foreign { background: #fff; color: var(--t-foreign-ink); border: 2px dashed var(--t-foreign-line); }

/* stack: a thermometer. Mark the first joined row "top", the last joined row "bottom", and a row set apart
   by a jump in the scale (the freezer) "alone". Rows in between carry no extra class. */
.stack .row .sw { border-top: 2px dashed rgba(255,255,255,0.7); }
.stack .row.top .sw { border-radius: 16px 16px 0 0; border-top: 0; }
.stack .row.bottom .sw { border-radius: 0 0 16px 16px; }
.stack .row.alone { margin-top: 14px; }
.stack .row.alone .sw { border-radius: 16px; border-top: 0; }
/* list: separate boxes */
.list .row + .row { margin-top: 10px; }
.list .sw { border-radius: 14px; }

/* ---- 3. Tags: law, guidance, our own, not UK. Sentence case, never upper case ---- */
.tag { display: inline-block; font-style: normal; font-size: 0.8rem; font-weight: 700; line-height: 1.3;
  padding: 3px 10px; border-radius: 12px; vertical-align: 1px; margin-left: 4px; }
.tag.law     { background: #fdecea; color: #8e1414; }
.tag.guide   { background: #e8f5e9; color: #1b5e20; }
.tag.own     { background: #eef0f3; color: #3a3f48; }                        /* Common target, not law / Our advice */
.tag.foreign { background: #fff; color: #374151; border: 1px dashed #6b7280; } /* Not UK - United States */

/* ---- 4. Flow charts (rules unchanged; .fw added for a warning in the middle of a chart) ---- */
.flow { font-size: 0.93rem; }
.flow .fb { border: 2px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff;
  text-align: center; color: #3a3f48; }
.flow .fs { border-color: #B71C1C; background: #fdecea; color: #8e1414; font-weight: 700; }   /* start: what went wrong. First box only */
.flow .fq { border-color: var(--accent); background: #eef0fb; color: #2f3a8f; font-weight: 700; } /* a question (indigo, not cold blue) */
.flow .fw { border-color: #C2410C; background: #fff4e5; color: #7c2d12; font-weight: 700; }   /* a warning in the middle */
.flow .fe { border-color: #2E7D32; background: #e8f5e9; color: #1b5e20; font-weight: 700; }   /* end: write down what went wrong and what you did. Last box only */
.flow .ar { height: 28px; background: no-repeat center / 16px 28px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath d='M8 2v16' stroke='%237b818c' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M2.5 16.5 8 25l5.5-8.5z' fill='%237b818c' stroke='%237b818c' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.flow .split { display: grid; grid-template-columns: 1fr 1.6fr; gap: 12px; align-items: start; }
.flow .yn { display: block; text-align: center; font-weight: 700; font-size: 0.8rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin-top: 8px; }
.flow .n { display: inline-block; min-width: 22px; height: 22px; line-height: 22px; border-radius: 50%; background: var(--ink);
  color: #fff; font-size: 0.78rem; font-weight: 700; margin-right: 6px; }

/* ---- 5. Probe panel (two boxes with a drawn glass and pot): unchanged ---- */
.panel .probe div { background: #fff; }
.probe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.probe div { border: 1px solid var(--border); border-radius: 12px; padding: 14px 10px 12px; text-align: center; }
.probe svg { width: 64px; height: 64px; display: block; margin: 0 auto 6px; }
.probe strong { display: block; }
.probe b { display: block; font-size: 1.15rem; color: var(--ink); margin-top: 2px; }

/* ---- 6. Comparison tables (nations side by side, check vs calibration): a card per row on a phone ----
   <table class="cmp" role="table">  every <td> carries data-label="the column heading" ; first cell of each row is <th scope="row"> */
.cmp { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.cmp th, .cmp td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.cmp thead th { color: var(--muted); font-weight: 600; font-size: 0.85rem; }
.cmp tbody th { color: var(--ink); font-weight: 700; min-width: 6.5rem; hyphens: none; }
@media (max-width: 720px) {
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; }
  .cmp tr { background: #fff; border: 1px solid var(--border); border-radius: 12px; margin: 0 0 12px; overflow: hidden; }
  .cmp tbody th { padding: 10px 12px; background: #f3f4f7; border-bottom: 1px solid var(--border); font-size: 1rem; }
  .cmp td { padding: 9px 12px; border-bottom: 1px solid var(--border); }
  .cmp td:last-child { border-bottom: 0; }
  .cmp td::before { content: attr(data-label); display: block; font-weight: 700; font-size: 0.82rem; color: var(--ink); margin-bottom: 1px; }
}

/* ---- 7. Phone ---- */
@media (max-width: 480px) {
  .panel { padding: 14px 14px 12px; }
  .bands .row { grid-template-columns: 88px 1fr; gap: 0 12px; }
  .bands .sw { padding: 6px 4px; }
  .bands .sw b { font-size: 1rem; }
  .bands .sw small { font-size: 0.78rem; }
  .flow .split { grid-template-columns: 1fr; }
}
/* very narrow phones (320 px): the box goes on top of its text, as a bar */
@media (max-width: 340px) {
  .bands .row { grid-template-columns: 1fr; }
  .bands .sw { flex-direction: row; flex-wrap: wrap; gap: 0 6px; min-height: 44px; border-radius: 12px !important; border-top: 0 !important; }
  .stack .row + .row { margin-top: 10px; }
  .bands .tx { padding: 6px 0 4px; }
}

/* Nation switch (assets/nation.js, 23 Oct 2026): bar under the title; other nations' lines fold behind a button */
.nxbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; padding: 10px 12px;
  background: var(--surface, #fff); border: 1px solid var(--border, #e4e6eb); border-radius: 12px; font-size: 0.9rem; }
.nxbar .nxlead { font-weight: 700; color: var(--ink, #2b2f36); margin-right: 4px; }
.nxchip { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; cursor: pointer;
  background: var(--bg, #f4f5f7); color: var(--ink, #2b2f36); border: 1px solid var(--border, #e4e6eb); }
.nxchip:hover { border-color: #B71C1C; color: #B71C1C; }
.nxchip[aria-pressed="true"] { background: #B71C1C; color: #fff; border-color: #B71C1C; }
.nx { display: none !important; }
.nx-li { list-style: none; }
.nx-show { font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent, #5C6BC0); background: none; border: 0;
  padding: 2px 0; margin: 2px 0 8px; cursor: pointer; text-align: left; }
.nx-show::before { content: "+ "; color: #B71C1C; }
.nx-show:hover { text-decoration: underline; }
p > .nx-show, li > .nx-show { display: block; margin: 4px 0 0; }
.nxsaved { flex-basis: 100%; font-size: 0.8rem; color: var(--muted, #5b6270); }
.nxsaved[hidden] { display: none; }
.nxforget { font: inherit; color: var(--accent, #5C6BC0); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }