/* ============================================================================
   TMA DESIGN SYSTEM — BASE
   Ported from the design prototype's assets/css/base.css under the §3 fidelity
   mandate. Reset, typography roles, layout primitives. Shell chrome lives in
   shell.css; in-page widgets stay with the host stylesheets until their own
   lane ports components.css.

   Every text style on every screen maps to a named role below — never style
   text ad hoc on a page. ShellDesignBaseTests asserts all 24 roles exist,
   because a screen that finds one missing invents its own and the scale stops
   being one scale.
   ========================================================================== */

/* ---- ONE block of the prototype's base.css deliberately does NOT port ------
   The prototype's SPA-feel block — `@view-transition { navigation: auto }`
   plus `view-transition-name` on the app bar, drawer and bottom nav — exists
   because every prototype screen is its own DOCUMENT, so without it the
   chrome tears down and rebuilds on every navigation.

   This host does not have that problem to solve. Tma.CorporateSite is a Blazor
   <Router> app: the shell renders OUTSIDE @Body, so the app bar, drawer and
   bottom nav are never torn down between routes — they are the same DOM nodes
   before and after. That IS the design's stated intent ("the app bar and the
   drawer look CONTINUOUS across a navigation instead of tearing down and
   rebuilding"); the platform reaches it structurally instead of by animation.

   `@view-transition` is a CROSS-DOCUMENT feature. Blazor's enhanced navigation
   replaces DOM in place, so the at-rule would never fire for in-app navigation:
   porting it would add an inert rule and a false claim that the behaviour was
   carried. Recorded here rather than dropped silently, because §3 forbids
   descoping designed behaviour without saying so. */

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* The one part of the held-back `* { margin: 0 }` that the SHELL cannot do
   without: the UA's default 8px body margin insets the app bar from the
   viewport edges, so it stops being full-bleed. Measured — the harness showed
   the bar at x=8 and 31px short. Zeroing body alone is safe for unported
   screens (their spacing comes from their own containers, not from this
   margin) where the blanket reset would not be. */
body { margin: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--t-16);
  line-height: var(--lh-body);
  color: var(--ink-1);
  background: var(--bg);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
/* `display: block` on svg kills the inline-baseline gap under icons. Checked
   against the pinned MudBlazor 9.4.0 rather than assumed: `.mud-icon-root` sets
   `display: inline-block` itself, and a class beats this element selector, so
   Mud icons are unaffected. Worth knowing that 8.0.0 set no display at all — on
   that version this rule WOULD have blockified every Mud icon, so a MudBlazor
   downgrade is the thing that would break it, not an edit here. */
img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent-fg);
  outline-offset: 2px;
  border-radius: 4px;
}
::selection { background: var(--accent-soft); }

/* ---- four reset rules are HELD FOR THE SCREENS LANE, not dropped -----------
   The prototype's reset also carries `* { margin: 0 }`, a bare-`button` reset,
   `a { color: var(--accent-fg); text-decoration: none }` and its hover rule.
   Those are correct for the prototype because every screen there is already
   built on .stack / .area-section, which supply the spacing the margin reset
   removes.

   This host still has ~145 unported routes whose spacing and link colour come
   from the host stylesheets. Landing the reset in the SHELL lane would restyle
   every one of them the moment the shell merges — a change nobody reviewed, on
   screens this lane never looked at. It ports with the screens, alongside the
   markup that replaces what it strips. Written down rather than omitted: §3
   forbids losing designed behaviour quietly, and a rule held for sequencing is
   not a rule descoped. */

/* the grain — one quiet texture layer on the page background */
body::before {
  content: "";
  position: fixed; inset: 0;
  background-image: var(--grain);
  opacity: var(--grain-opacity);
  pointer-events: none;
  z-index: 0;
}
/* …and the reason the grain does not cover the page: a positioned element with
   z-index 0 paints ABOVE non-positioned siblings, so without this the texture
   would sit over the content instead of under it. */
body > * { position: relative; z-index: 1; }

/* ---- typography roles (named tokens — DESIGN-SYSTEM §2) ------------------- */
.t-display {            /* Display heading — hero/wall only */
  font-size: var(--t-display);
  font-weight: 900;
  letter-spacing: var(--track-display);
  line-height: var(--lh-display);
  color: var(--ink-1);
}
.t-page-title {         /* Page title — one per screen */
  font-size: var(--t-32);
  font-weight: 900;
  letter-spacing: var(--track-h1);
  line-height: var(--lh-heading);
  color: var(--ink-1);
}
.t-section {            /* Section heading — caps head */
  font-size: var(--t-14);
  font-weight: 800;
  letter-spacing: var(--track-caps-head);
  text-transform: uppercase;
  color: var(--eyebrow);
  line-height: var(--lh-heading);
}
.t-subsection {         /* Subsection heading */
  font-size: var(--t-24);
  font-weight: 800;
  line-height: var(--lh-heading);
  color: var(--ink-1);
}
.t-card-title {         /* Card title */
  font-size: var(--t-20);
  font-weight: 800;
  line-height: var(--lh-heading);
  color: var(--ink-1);
}
.t-body-lg { font-size: var(--t-20); line-height: var(--lh-body); color: var(--ink-1); }
.t-body    { font-size: var(--t-16); line-height: var(--lh-body); color: var(--ink-1); }
.t-body-2  { font-size: var(--t-16); line-height: var(--lh-body); color: var(--ink-2); }
.t-compact { font-size: var(--t-14); line-height: var(--lh-compact); color: var(--ink-2); }
.t-eyebrow {            /* small-caps eyebrow above a title */
  font-size: var(--t-cap);
  font-weight: 800;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--eyebrow);
  line-height: var(--lh-heading);
}
.t-nav      { font-size: var(--t-14); font-weight: 600; line-height: var(--lh-compact); }
.t-button   { font-size: var(--t-16); font-weight: 700; line-height: 1; }
.t-label {              /* form label */
  font-size: var(--t-14);
  font-weight: 700;
  color: var(--ink-1);
  line-height: var(--lh-compact);
}
.t-helper   { font-size: var(--t-14); color: var(--ink-3); line-height: var(--lh-compact); }
.t-error    { font-size: var(--t-14); color: var(--error); font-weight: 600; line-height: var(--lh-compact); }
.t-table-head {
  font-size: var(--t-cap);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-table-body { font-size: var(--t-14); line-height: var(--lh-compact); color: var(--ink-1); }
.t-meta     { font-size: var(--t-14); color: var(--ink-3); line-height: var(--lh-compact); }
.t-badge    { font-size: var(--t-cap); font-weight: 800; letter-spacing: .04em; line-height: 1; }
.t-dish-name { font-size: var(--t-20); font-weight: 800; line-height: var(--lh-heading); color: var(--ink-1); }
.t-dish-desc { font-size: var(--t-16); line-height: var(--lh-body); color: var(--ink-2); max-width: var(--w-line); }
.t-price {
  font-size: var(--t-16);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.t-allergen { font-size: var(--t-14); font-weight: 700; line-height: var(--lh-compact); }
.t-fine     { font-size: var(--t-14); color: var(--ink-3); }

/* ---- the standard area head — every area opens with this exact block ------ */
.area-wrap {
  max-width: var(--w-reading);
  margin: 0 auto;
  padding: 28px var(--gutter) calc(var(--bottomnav-h) + 60px);
}
.area-wrap--wide   { max-width: var(--w-wide); }
.area-wrap--narrow { max-width: var(--w-narrow); }
.area-head .t-eyebrow { display: block; margin-bottom: var(--gap-eyebrow); }
.area-head .lede {
  margin-top: var(--gap-lede);
  font-size: var(--t-16);
  line-height: var(--lh-body);
  color: var(--ink-2);
  max-width: 56ch;
}
.area-head { margin-bottom: var(--gap-after-head); }

/* the standard caps section — identical grouping everywhere */
.area-section { margin-top: var(--sp-section); }
.area-section:first-of-type { margin-top: 0; }
.section-head {
  display: flex;
  align-items: center;
  gap: var(--sp-icon-text);
  margin-bottom: var(--gap-caps-head);
}
.section-head .count { font-size: var(--t-14); color: var(--ink-3); font-weight: 600; }
.section-head .spacer { flex: 1; }

/* ---- layout primitives ----------------------------------------------------- */
.stack     { display: flex; flex-direction: column; gap: var(--sp-related); }
.stack-lg  { display: flex; flex-direction: column; gap: var(--sp-5); }
.row       { display: flex; align-items: center; gap: var(--sp-related); }
.row-wrap  { display: flex; align-items: center; gap: var(--sp-related); flex-wrap: wrap; }
.spread    { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-related); }
.center    { display: grid; place-items: center; }
.grid-cards {
  display: grid;
  gap: var(--sp-card-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 768px)  { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

/* horizontal rail — scroll is a first-class interaction (Variant B) */
.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(72vw, 300px);
  gap: var(--sp-card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  /* snap respects the gutter, so the FIRST card aligns with the content
     above/below it exactly like the last card does at the far end */
  scroll-padding-inline: var(--gutter);
  padding-bottom: var(--sp-2);
  margin-inline: calc(-1 * var(--gutter));
  padding-inline: var(--gutter);
  scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
@media (min-width: 1280px) { .rail { grid-auto-columns: 300px; } }

/* wide content NEVER widens the page — it scrolls inside its own container */
.scroll-x { overflow-x: auto; max-width: 100%; }

.hairline-top    { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* prose measure guard */
.prose { max-width: var(--w-line); }
.prose p + p { margin-top: var(--sp-4); }

/* R11 — Arabic joining guard: tracked styles exist as component-level
   letter-spacing literals (brand, eyebrows, badges, table heads), and ANY
   positive tracking breaks Arabic cursive joining. The token overrides in
   tokens.css cannot defeat literals, so the kill rule is global. */
html[lang="ar"] * { letter-spacing: 0 !important; }