/* Quatro Refeições — Mielina design system v1.
   Layout only; every colour, space, radius and type role comes from the
   shared layer. Source of truth: design-system/mielina/MASTER.md. */

@import url('../components.css?v=c1ea0fd2');

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: clip;
}

/* Aurora — the space pair, cold at the edges, behind the hero only. */
.aurora {
  position: absolute;
  inset: -24% -12% auto;
  height: 820px;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(42% 52% at 50% 22%, rgba(46, 56, 85, 0.62), transparent 70%),
    radial-gradient(34% 44% at 74% 12%, rgba(46, 204, 113, 0.16), transparent 70%),
    radial-gradient(70% 42% at 50% 0%, rgba(30, 39, 60, 0.55), transparent 76%);
  filter: saturate(1.2);
}

/* ---------- chrome ---------- */

.appbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--line);
}
.bar-left { display: flex; align-items: center; gap: var(--space-1); min-width: 0; }
.appbar .mark { color: var(--fg); text-decoration: none; font-weight: 800; letter-spacing: -0.01em; }
.appbar .mark:hover { opacity: 0.75; }
.appbar .slash { color: var(--muted); }
.appbar .product { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .stamp {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.appbar .stamp .dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--status-live); }

/* ---------- shell ---------- */

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-3); }

.hero { position: relative; z-index: 1; padding: var(--space-5) 0 var(--space-4); }
.hero h1 {
  margin: var(--space-2) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 6.4vw, 72px);
  line-height: var(--type-display-hero-lh);
  letter-spacing: -0.025em;
  max-width: 16ch;
  text-wrap: balance;
}
.lede {
  margin: 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: var(--type-body-lede-size);
  line-height: var(--type-body-lede-lh);
}

.kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-kicker-size);
  line-height: var(--type-mono-kicker-lh);
  letter-spacing: var(--type-mono-kicker-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.kicker .n { color: var(--fg); margin-right: var(--space-1); }

/* ---------- kpi row ---------- */

.kpis {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.kpi { background: var(--bg); padding: var(--space-2); display: flex; flex-direction: column; gap: 4px; }
.k-l {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.k-v { margin: 0; font-size: 32px; font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.k-f { margin: 0; color: var(--muted); font-size: var(--type-body-small-size); line-height: var(--type-body-small-lh); }

/* ---------- blocks ---------- */

.block { padding: var(--space-5) 0 0; }
.block h2 {
  margin: var(--space-2) 0 var(--space-2);
  font-size: var(--type-heading-card-size);
  line-height: var(--type-heading-card-lh);
  letter-spacing: var(--type-heading-card-ls);
  font-weight: 700;
  text-wrap: balance;
}
.body {
  margin: 0 0 var(--space-3);
  max-width: 68ch;
  color: var(--muted);
  font-size: var(--type-body-base-size);
  line-height: var(--type-body-base-lh);
}

.note {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-strong);
  background: var(--bg-elev);
  padding: var(--space-2);
  margin: var(--space-3) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.note p { margin: 0; max-width: 68ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }
.note strong { color: var(--fg); font-weight: 700; }

/* ---------- the day ---------- */

.day { border-top: 1px solid var(--line); }
.meal {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line);
}
.clock {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  color: var(--muted);
  padding-top: 6px;
}
.meal-body { min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.meal-body h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.why { margin: 0; max-width: 66ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }

.items { list-style: none; margin: 0; padding: 0; }
.items li {
  display: grid;
  grid-template-columns: 1fr auto 76px;
  gap: var(--space-2);
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--type-body-small-size);
}
.items li:last-child { border-bottom: none; }
.items .q, .items .r {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.items .q { color: var(--muted); }
.items .r { color: var(--fg); }
.items li.sum { border-top: 1px solid var(--line-strong); border-bottom: none; margin-top: 4px; padding-top: 10px; }
.items li.sum span:first-child {
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.items li.sum .r { font-weight: 800; font-size: 15px; }

.tally { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.tally li {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 4px var(--chip-x);
}
.tally li.hi { color: var(--fg); border-color: var(--line-strong); }

/* ---------- grids of panels ---------- */

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-2); }
.panel {
  border: 1px solid var(--line);
  background: var(--bg-elev);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.panel h3 {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.panel h3.big { font-family: var(--font-display); font-size: 20px; letter-spacing: -0.01em; text-transform: none; color: var(--fg); }
.panel ul { list-style: none; margin: 0; padding: 0; }
.panel li {
  display: grid;
  grid-template-columns: 1fr auto 62px;
  gap: var(--space-1);
  align-items: baseline;
  padding: 5px 0;
  font-size: var(--type-body-small-size);
}
.panel li.two { grid-template-columns: 1fr auto; }
.panel .q, .panel .r {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.panel .q { color: var(--muted); }
.panel .r { color: var(--fg); }
.subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--space-1);
}
.subtotal span:first-child {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
}
.subtotal span:last-child { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; }

/* ---------- numbered steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: flex; flex-direction: column; }
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.steps li:first-child { border-top: 1px solid var(--line); }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--type-mono-meta-size);
  letter-spacing: var(--type-mono-meta-ls);
  color: var(--muted);
}
.steps p { margin: 0; max-width: 66ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }
.steps strong { color: var(--fg); font-weight: 700; }
.steps .t { display: block; margin-top: 4px; font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--type-mono-meta-ls); text-transform: uppercase; color: var(--muted); }

/* ---------- rules ---------- */

.rules { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rules li { padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.rules li:first-child { border-top: 1px solid var(--line); }
.rules strong { display: block; font-weight: 700; margin-bottom: 4px; }
.rules span { display: block; max-width: 68ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }

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

.scroller { overflow-x: auto; border: 1px solid var(--line); }
table { border-collapse: collapse; width: 100%; min-width: 620px; }
th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--type-body-small-size); line-height: 1.6; }
thead th {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--type-mono-meta-ls);
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { font-family: var(--font-mono); font-size: 13px; color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; }
tbody td { color: var(--muted); }

/* ---------- footer ---------- */

.foot { margin-top: var(--space-5); border-top: 1px solid var(--line); padding: var(--space-3) 0 var(--space-5); }
.foot p { margin: 0 0 var(--space-1); max-width: 68ch; color: var(--muted); font-size: var(--type-body-small-size); line-height: 1.6; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }

@media (max-width: 640px) {
  .meal { grid-template-columns: 1fr; gap: var(--space-1); }
  .clock { padding-top: 0; }
  .hero { padding: var(--space-4) 0 var(--space-3); }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }