/* ══════════════════════════════════════════════════════════════════════════
   MAA.SE'S OWN DESIGN SYSTEM, inside the Food wing.

   GOVERNOR, 2026-09-22: "The aesthetic details of these apps are well thought
   out, you don't need to change anything. Just render them as they have been
   built." He had caught the same mistake one layer up the day before, and he
   was right both times: a previous pass reproduced Maa.se's OBJECTS and then
   drew its surfaces in this product's visual language.

   So this file is Maa.se's `src/shared/tokens.css` and `primitives.tsx`,
   reproduced rather than reinterpreted — its palette, its two families, its
   type scale, its 4pt rhythm ladder, its three radii, its one elevation. Read
   from the live repository at main @ 83d2bda, not from wings/.

   IT IS SCOPED. `.w-maase` is set on the body element by paint(), so this
   product's own system is untouched everywhere else and the two never bleed
   into each other. The dock and the chrome above stay this product's, which
   is what GD-FORK-024 (2) approved when the governor accepted Ahoy's own bar
   sitting directly above it.

   Nothing here is invented. Where a value looks arbitrary it is Maa.se's, and
   its reason is in Maa.se's own comment beside it.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900;
  font-display: swap; src: url('fonts/SourceSerif4-normal.woff2') format('woff2'); }
@font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 200 900;
  font-display: swap; src: url('fonts/SourceSerif4-italic.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800;
  font-display: swap; src: url('fonts/PlusJakartaSans-normal.woff2') format('woff2'); }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: italic; font-weight: 200 800;
  font-display: swap; src: url('fonts/PlusJakartaSans-italic.woff2') format('woff2'); }

.w-maase {
  /* role palette — Maa.se's, verbatim */
  --canvas: #FAF5EB;
  --card: #FFFCF4;
  --ink: #221A12;
  --sub: #75604A;
  --hair: rgba(96, 66, 32, 0.15);
  --ember: #C8401D;      /* THE accent: primary action + portion pulse. Nothing else. */
  --ember-ink: #FFF6F0;
  --veg: #237A38;
  --egg: #9A7000;
  --nonveg: #A93313;
  /* THE ENERGY JEWEL, and the one colour appetite is allowed to wear. Maa.se
     calls it `--c-carbs` and states the law beside it: a demand cloud is AMBER
     because green belongs to vegetarian and to nothing else, so a cloud in
     green would read as a dietary claim about the food underneath it. */
  --carbs: #D6983A;
  --carbs-ink: #B3771F;

  /* type — two families; scale 14/16/18/21/25; weights 400/600/700.
     The 15px legibility floor is law there (governor sweep 2026-08-03, and a
     test enforces it) — it is kept here for the same neighbour. */
  --m-serif: 'Source Serif 4', Georgia, serif;
  --m-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --t-meta: 600 15px/1.5 var(--m-sans);
  --t-body: 400 16px/1.5 var(--m-sans);
  --t-verb: 700 16px/1 var(--m-sans);
  --t-who: italic 450 16px/1.35 var(--m-serif);
  --t-sect: 600 16px/1.3 var(--m-sans);
  --t-rowname: 620 18px/1.25 var(--m-serif);
  --t-greet: italic 450 21px/1.3 var(--m-serif);
  --t-price: 700 19px/1.2 var(--m-sans);
  --t-dish: 620 25px/1.2 var(--m-serif);
  --t-h1: 700 20px/1.3 var(--m-sans);
  --track-display: -0.2px;

  /* space (4pt) + shape (3 radii) + depth (one elevation).
     Maa.se's rhythm law — three breaths, nothing else:
       s1–s2 within a unit · s3–s4 between units · s5 a new thought. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-ctl: 12px; --r-verb: 14px; --r-card: 20px; --r-pill: 999px;
  --shadow-hero: 0 8px 24px rgba(30, 15, 4, 0.07);
  /* the kansa thali — Maa.se's own object, not generic ceramic (its doc 12 §11).
     It is the Plate primitive's no-photograph state, and since this product
     holds no photographs it is the only state a plate here ever wears. */
  --plate-shadow: rgba(60, 26, 8, 0.14);
  --thali-rim: conic-gradient(from 210deg, #E2BE7A, #F6E3B0 18%, #C79F52 42%,
               #F1DCA2 62%, #D8B268 82%, #E2BE7A);
  --thali-well: radial-gradient(circle at 50% 38%, #FDF6E4 0%, #F6EAD0 64%, #E8D5AC 100%);
  --thali-edge: rgba(160, 124, 60, 0.35);
  --shadow-verb: 0 6px 16px rgba(200, 64, 29, 0.22);
  --tap-min: 44px;
  --verb-h: 54px;

  background: var(--canvas);
  color: var(--ink);
  font: var(--t-body);
  padding: var(--s5) var(--s4) var(--s6);
}
.w-maase * { box-sizing: border-box; }
.w-maase button, .w-maase input, .w-maase select, .w-maase textarea {
  font: var(--t-body); color: var(--ink);
}
/* Feedback grammar (Maa.se doc 12 §8): every tap answers. One rule, every button. */
.w-maase button:not(:disabled) { transition: transform 160ms ease, opacity 160ms ease; }
.w-maase button:not(:disabled):active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) { .w-maase button:not(:disabled) { transition: none; } }

/* ── the primitives, one class each ────────────────────────────────────── */
.w-maase .m-h1 { font: var(--t-h1); letter-spacing: var(--track-display);
  margin: var(--s3) var(--s1) var(--s2); }
.w-maase .m-dish { font: var(--t-dish); letter-spacing: var(--track-display); margin: 0 0 var(--s1); }
.w-maase .m-row { font: var(--t-rowname); letter-spacing: var(--track-display); margin: 0 0 var(--s1); }
.w-maase .m-greet { font: var(--t-greet); letter-spacing: var(--track-display); }
.w-maase .m-who { font: var(--t-who); color: var(--sub); }
.w-maase .m-meta { font: var(--t-meta); font-weight: 400; color: var(--sub);
  margin-top: var(--s1); line-height: 1.5; }
.w-maase .m-meta.alert { color: var(--nonveg); font-weight: 600; }
.w-maase .m-price { font: var(--t-price); white-space: nowrap; }
.w-maase .m-price .small { font: var(--t-meta); color: var(--sub); margin-left: var(--s1); }
.w-maase .m-sect { font: var(--t-sect); padding: var(--s5) var(--s1) var(--s3);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.w-maase .m-rule { height: 1px; background: var(--hair); border: 0; margin: var(--s4) 0; }

/* THE VERB — the one primary action on a face, in the one accent. */
.w-maase .m-verb { display: flex; align-items: center; justify-content: center;
  width: 100%; height: var(--verb-h); border: none; background: var(--ember);
  color: var(--ember-ink); border-radius: var(--r-verb); font: var(--t-verb);
  box-shadow: var(--shadow-verb); cursor: pointer; }
.w-maase .m-verb[disabled], .w-maase .m-verb.busy { opacity: .45; pointer-events: none; }
/* QUIET — a full-width secondary. Quiet must never mean invisible. */
.w-maase .m-quiet { display: block; width: 100%; min-height: var(--tap-min);
  background: transparent; color: var(--ink); border: 1px solid var(--hair);
  border-radius: var(--r-ctl); font: var(--t-body); cursor: pointer; padding: var(--s3); }
.w-maase .m-link { background: none; border: 0; padding: var(--s2) 0; color: var(--ink);
  font: var(--t-meta); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; min-height: var(--tap-min); text-align: left; }
.w-maase .m-link.plain { text-decoration: none; }

.w-maase .m-card { background: var(--card); border-radius: var(--r-card);
  box-shadow: var(--shadow-hero); padding: var(--s4); }
.w-maase .m-panel { background: var(--card); border: 1px solid var(--hair);
  border-radius: var(--r-card); padding: var(--s4); }
/* A MENU ROW — the Table is typeset rows on hairlines, not a grid of cards. */
.w-maase .m-menurow { display: flex; gap: var(--s3); align-items: flex-start;
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: var(--s3) var(--s1); border-bottom: 1px solid var(--hair); }
.w-maase .m-menurow.last { border-bottom: 0; }
.w-maase .m-menurow .grow { flex: 1; min-width: 0; }
.w-maase .m-thali { width: 48px; height: 48px; flex: none; border-radius: var(--r-pill);
  background: var(--thali-rim); filter: drop-shadow(0 6px 5px var(--plate-shadow));
  display: flex; align-items: center; justify-content: center; }
.w-maase .m-thali::after { content: ''; width: 72%; height: 72%;
  border-radius: var(--r-pill); background: var(--thali-well);
  border: 1px solid var(--thali-edge); }
.w-maase .m-thali.lg { width: 200px; height: 200px; }
.w-maase .m-thali.md { width: 100px; height: 100px; }
.w-maase .m-thali.hero { width: 124px; height: 124px; }
.w-maase .m-thali.sm { width: 60px; height: 60px; }
/* PORTION PLATES — how many are left, as a row of dots you can count without
   reading. Ember for what remains; a hairline ring for what is gone. Dots only
   while they can be counted at a glance; past twelve the sentence carries it. */
.w-maase .m-plates { display: flex; gap: var(--s1); align-items: center; margin: var(--s3) 0 0; }
.w-maase .m-plates i { width: var(--s2); height: var(--s2); border-radius: var(--r-pill);
  background: var(--ember); }
.w-maase .m-plates i.gone { background: transparent; border: 1.4px solid var(--hair); }
.w-maase .m-plates .lab { font: var(--t-meta); font-weight: 400; color: var(--sub);
  margin-left: var(--s2); }

/* Food-safety marker (Maa.se N19): SHAPE as well as colour, per the Indian
   marking convention — veg a green dot, egg and non-veg triangles. Never
   decoration, and never colour alone. */
.w-maase .m-dot { display: inline-block; width: var(--s2); height: var(--s2);
  margin-right: var(--s2); vertical-align: 1px; border-radius: var(--r-pill);
  background: var(--veg); }
.w-maase .m-dot.egg { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--egg); }
.w-maase .m-dot.nonveg { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: var(--nonveg); }

/* PICK PILL — selected is INK-filled, because the accent stays reserved. */
.w-maase .m-pill { font: var(--t-meta); padding: var(--s2) var(--s3);
  margin: 0 var(--s2) var(--s2) 0; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--sub);
  min-height: var(--tap-min); }
.w-maase .m-pill[aria-pressed="true"] { background: var(--ink); color: var(--canvas); }

.w-maase .m-field { width: 100%; min-height: var(--tap-min); padding: var(--s3);
  border: 1px solid var(--hair); border-radius: var(--r-ctl); background: var(--card);
  color: var(--ink); font: var(--t-body); }
.w-maase .m-step { display: flex; align-items: center; gap: var(--s4); }
.w-maase .m-step button { width: var(--tap-min); height: var(--tap-min);
  border-radius: var(--r-ctl); border: 1px solid var(--hair); background: transparent;
  color: var(--sub); font: var(--t-body); cursor: pointer; }
.w-maase .m-step .n { font: var(--t-price); min-width: var(--s6); text-align: center; }

/* ── THE FORK'S DOORS ──────────────────────────────────────────────────── */
.w-maase .m-door { display: flex; gap: var(--s4); align-items: center; width: 100%;
  min-height: 88px; text-align: left; cursor: pointer; margin-top: var(--s3);
  padding: var(--s4); background: var(--card); color: var(--ink);
  border: 1px solid var(--hair); border-radius: var(--r-verb); }
.w-maase .m-door .dh { display: block; font: var(--t-rowname); }
.w-maase .m-door .ds { display: block; font: var(--t-meta); font-weight: 400;
  color: var(--sub); margin-top: var(--s1); line-height: 1.5; }

/* ── THE ARRANGEMENT'S MARK ────────────────────────────────────────────────
   NOT a ring of dots, and not a photograph. Maa.se: "The mark — the ring of
   days WITH ITS HOUR. The eye must never confuse an arrangement with a
   photographed plate, so this is the ONLY face an arrangement wears." One
   line, floored at 14px — the stacked version was caught at 8–11px by the
   legibility sweep and is unreadable for the over-50 neighbour. */
.w-maase .m-ring { border-radius: 50%; flex: none; border: 2px solid var(--ember);
  color: var(--ember); display: inline-flex; align-items: center; justify-content: center;
  text-align: center; letter-spacing: -0.3px; width: 48px; height: 48px;
  font: 700 14px/1 var(--m-sans); }
.w-maase .m-ring.lg { width: 56px; height: 56px; font: 700 16px/1 var(--m-sans); }
.w-maase .m-ring.muted { border-color: var(--sub); color: var(--sub); }

/* ── THE MILK CARD ─────────────────────────────────────────────────────────
   Seven circles from today. The circle CARRIES THE DAY NAME at the 15px floor
   (the 10px caps row underneath was the smallest text in Maa.se and the sweep
   removed it); dashed when it does not run; struck through when skipped or
   when she is not making it; ember today, with the only word below. Tapping a
   circle IS the skip — no menu, no dialog. */
.w-maase .m-week { display: flex; justify-content: space-between; margin-top: var(--s3); }
.w-maase .m-week button { width: 42px; background: none; border: none; padding: 0;
  text-align: center; cursor: pointer; }
.w-maase .m-week button:disabled { cursor: default; }
.w-maase .m-week .c { width: 40px; height: 40px; border-radius: 50%; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--m-sans);
  border: 1.5px solid var(--hair); color: var(--sub); background: var(--card); }
.w-maase .m-week .c.off { border-style: dashed; }
.w-maase .m-week .c.struck { text-decoration: line-through; }
.w-maase .m-week .c.today { border-color: var(--ember); color: var(--ember); }
.w-maase .m-week .t { display: block; font: 600 14px/1 var(--m-sans);
  color: var(--ember); margin-top: var(--s1); }

.w-maase .m-empty { text-align: center; padding: var(--s6) var(--s4); }
.w-maase .m-empty b { display: block; font: var(--t-rowname); margin-bottom: var(--s2); }
.w-maase .m-stack > * + * { margin-top: var(--s3); }
.w-maase .m-actions { margin-top: var(--s5); display: grid; gap: var(--s3); }

/* ── WHAT YOUR SOCIETY IS EATING FOR (Maa.se face 15) ─────────────────────
   The macro field, and everything drawn on it. */
.w-maase .m-field { position: relative; width: 100%; aspect-ratio: 1;
  margin-top: var(--s3); border-radius: var(--r-card); overflow: hidden;
  box-shadow: var(--shadow-hero); background:
    radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--carbs) 16%, transparent), transparent 62%),
    radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--sub) 14%, transparent), transparent 62%),
    var(--card); }
.w-maase .m-field i { position: absolute; transform: translate(-50%, -50%);
  border-radius: var(--r-pill); display: block; }
.w-maase .m-cloud { z-index: 1; background: radial-gradient(circle,
  color-mix(in srgb, var(--carbs) 55%, transparent), transparent 70%); }
/* Her own kitchen, in ember rings — quiet, and never filled: a filled dot
   would outweigh the cloud it sits on, and the cloud is the subject. */
.w-maase .m-field .m-ring { z-index: 2; width: 20px; height: 20px;
  border: 2px solid var(--ember); }
/* Where the appetite is pulling. Dashed, because it is a centre of gravity
   rather than a thing anybody cooked. */
.w-maase .m-centre { z-index: 3; width: 34px; height: 34px;
  border: 2px dashed var(--carbs); }
.w-maase .m-lean { text-align: center; font: var(--t-greet);
  margin: var(--s4) 0 var(--s1); }
.w-maase .m-lean b { color: var(--carbs-ink); font-weight: 600; }
.w-maase .m-legend { margin-top: var(--s4); display: flex; gap: var(--s4);
  flex-wrap: wrap; font: var(--t-meta); color: var(--sub); }
.w-maase .m-legend i { display: inline-block; width: 10px; height: 10px;
  border-radius: var(--r-pill); margin-right: var(--s1); }
.w-maase .k-cloud { background: color-mix(in srgb, var(--carbs) 40%, transparent); }
.w-maase .k-ring { border: 2px solid var(--ember); }