/* ==========================================================================
   Ordevia — the out-of-date-browser stylesheet.  D-244.

   WHY THIS FILE EXISTS, in one paragraph.

   Tailwind v4 wraps everything it emits in `@layer`, and uses `oklch()` colours.
   A browser that does not understand cascade layers does not degrade them — it
   ignores every rule inside, which is all of them. So on an iPad from 2012 the
   product renders as bare HTML: default-blue underlined links, native button
   chrome, and an inline SVG logo painted at whatever size it feels like. That
   is the founder's photograph. The JavaScript is compiled for the same modern
   baseline, so nothing hydrates either. There is no version of "fix the CSS"
   that makes that device run this app (docs/BROWSER_SUPPORT.md).

   WHAT THIS FILE IS THEREFORE FOR. Making the failure presentable, and — on the
   one surface where the visitor came for something we can still give them, the
   diner's menu — readable.

   THREE RULES FOR EDITING IT.

   1. EVERY SELECTOR IS SCOPED UNDER `html.legacy-browser`. Not for tidiness:
      unlayered CSS outranks layered CSS, so an unscoped rule in this file would
      beat Tailwind on MODERN browsers. The class is only ever added by the
      feature test in the root layout.

   2. OLD SYNTAX ONLY. Hex colours, no custom properties, no nesting, no
      `:where()`, no `@layer`, no logical properties. The browsers that read this
      file are the ones that could not read the other one.

   3. IT IS ALLOWED TO BE PLAIN. This is not a second design system and must
      never grow into one. Legible beats attractive; the goal is that nobody is
      ever shown something broken.
   ========================================================================== */

html.legacy-browser {
  background: #f6f2ec;
  -webkit-text-size-adjust: 100%;
}

html.legacy-browser body {
  margin: 0;
  padding: 0;
  background: #f6f2ec;
  color: #1c1917;
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

/* A measure. Unstyled Tailwind markup is a stack of block-level divs, which is
   actually readable top-to-bottom — what it lacks is a width, any spacing, and
   a type hierarchy. Those three things are most of the difference between the
   photograph and something you would hand to a customer. */
html.legacy-browser body > * {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  padding-left: 18px;
  padding-right: 18px;
}

html.legacy-browser h1,
html.legacy-browser h2,
html.legacy-browser h3 {
  margin: 1.4em 0 0.4em;
  line-height: 1.25;
  font-weight: 700;
  color: #17120e;
}
html.legacy-browser h1 {
  font-size: 26px;
}
html.legacy-browser h2 {
  font-size: 20px;
}
html.legacy-browser h3 {
  font-size: 17px;
}
html.legacy-browser p,
html.legacy-browser li {
  margin: 0.5em 0;
}
html.legacy-browser ul,
html.legacy-browser ol {
  padding-left: 1.2em;
}

html.legacy-browser a {
  color: #c9521a;
  font-weight: 600;
  text-decoration: none;
}
html.legacy-browser a:hover,
html.legacy-browser a:focus {
  text-decoration: underline;
}

/* THE GIANT LOGO. An inline SVG with no CSS box takes its intrinsic size, and
   the brand mark's is enormous — it filled the founder's whole iPad screen
   twice over. Cap every piece of media; anything that genuinely needs to be
   bigger is a photo, and photos keep their aspect ratio. */
html.legacy-browser img {
  max-width: 100%;
  height: auto;
}
html.legacy-browser svg {
  max-width: 28px;
  max-height: 28px;
  height: auto;
}

/* Native button chrome is the other half of "it looks broken". These buttons do
   nothing anyway — the script that would handle them never parsed — so they are
   drawn as quiet text rather than as OS widgets pretending to be live. */
html.legacy-browser button,
html.legacy-browser input,
html.legacy-browser select,
html.legacy-browser textarea {
  font: inherit;
  color: inherit;
  max-width: 100%;
}
html.legacy-browser button {
  background: none;
  border: 0;
  padding: 0;
  color: #6b6257;
  cursor: default;
}

/* WORDS RUNNING INTO EACH OTHER, which is the last thing that still looks
   broken once type and spacing are fixed. A row laid out with flexbox has no
   whitespace between its children in the markup — the gap was the stylesheet's
   job — so with the stylesheet gone the nav reads
   "FonctionnalitésComment ça marcheTarifsFAQ".

   The handle is that Tailwind's class ATTRIBUTES are still in the HTML even
   though none of their rules apply, so `[class*="flex"]` reliably identifies the
   rows that were meant to be horizontal. Deliberately limited to inline-level
   children, so emphasis inside a sentence is untouched. A heuristic, and said to
   be one — but it is the difference between a readable page and a wall. */
html.legacy-browser [class*="flex"] > a,
html.legacy-browser [class*="flex"] > span,
html.legacy-browser [class*="flex"] > button,
html.legacy-browser nav a,
html.legacy-browser header a {
  display: inline-block;
  margin: 0 12px 5px 0;
}

/* Chrome that is meaningless without JavaScript: the cart pill, sticky bars,
   sheets, the background-photo layer, decorative dividers. Marked at the source
   so this file never has to guess from a class name. */
html.legacy-browser [data-legacy-hide] {
  display: none !important;
}

/* ── The notice strip (diner menu) ─────────────────────────────────────────
   Shown only on the surface that still has something to give a visitor. It
   says what they are looking at and what they cannot do, in one sentence. */
.legacy-note {
  display: none;
}
html.legacy-browser .legacy-note {
  display: block;
  max-width: none;
  margin: 0 0 14px;
  padding: 12px 18px;
  background: #fff1e8;
  border-bottom: 1px solid #ffd9bc;
  color: #7c3a12;
  font-size: 15px;
  line-height: 1.45;
}
html.legacy-browser .legacy-note strong {
  display: block;
  margin-bottom: 2px;
  color: #17120e;
}

/* ── The full-screen block (dashboard, admin, kitchen, service) ────────────
   These screens genuinely cannot work, so they are replaced rather than
   degraded. Pure CSS off the <html> class, which is the point: it appears
   without a single line of the app's JavaScript having run. */
.legacy-block {
  display: none;
}
html.legacy-browser .legacy-block {
  display: block;
  max-width: 34em;
  margin: 0 auto;
  padding: 56px 22px;
}
html.legacy-browser .legacy-block h1 {
  margin-top: 18px;
  font-size: 24px;
}
html.legacy-browser .legacy-block p {
  color: #5b5347;
  font-size: 16px;
}
html.legacy-browser .legacy-block ul {
  margin: 18px 0 0;
  padding-left: 20px;
  color: #5b5347;
}
html.legacy-browser .legacy-block li {
  margin: 8px 0;
}
html.legacy-browser .legacy-block .legacy-brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #a8a29e;
}
/* Whatever the app would have rendered is taken off the screen entirely. A
   half-painted dashboard behind an explanation is worse than either alone. */
html.legacy-browser [data-app-shell] {
  display: none !important;
}

/* ── No JavaScript at all ─────────────────────────────────────────────────
   A different failure with the same answer. This one is NOT scoped to
   .legacy-browser: <noscript> content only renders when scripting is off, and
   on that path the boot script never ran to add the class. Everything here is
   old syntax for the same reason. */
.legacy-noscript {
  max-width: 34em;
  margin: 0 auto;
  padding: 56px 22px;
  font-family:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: #1c1917;
}
.legacy-noscript h1 {
  margin: 18px 0 8px;
  font-size: 24px;
  line-height: 1.25;
}
.legacy-noscript p {
  margin: 0.5em 0;
  color: #5b5347;
  line-height: 1.55;
}