/* ThaiQR design tokens, shared by the guest menu, the owner dashboard, the admin area and the print sheets.
   Direction: "kitchen ticket". Warm paper on graph paper, espresso ink, 2px square frames, mono labels with dotted
   leaders, one brick red used only where something needs attention. Food photos carry the colour.
   See docs/DESIGN.md. */

/* ---- fonts (self-hosted, all SIL OFL; unicode-range keeps a page from downloading scripts it does not show) ---- */
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-400-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 400; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-500-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 500; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-thai-600-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Plex Thai"; font-weight: 600; font-display: swap; src: url("/fonts/ibm-plex-sans-thai-looped-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* names of dishes and venues */
@font-face { font-family: "Fraunces"; font-weight: 600; font-display: swap; src: url("/fonts/fraunces-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Fraunces"; font-weight: 700; font-display: swap; src: url("/fonts/fraunces-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* numbers, prices and small uppercase labels */
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Thai names: a serif Thai, so the staff's screen reads like a printed docket */
@font-face { font-family: "Noto Serif Thai"; font-weight: 500; font-display: swap; src: url("/fonts/noto-serif-thai-thai-500-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Serif Thai"; font-weight: 600; font-display: swap; src: url("/fonts/noto-serif-thai-thai-600-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Serif Thai"; font-weight: 700; font-display: swap; src: url("/fonts/noto-serif-thai-thai-700-normal.woff2") format("woff2"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }

:root {
	/* paper and ink. Every surface is a warm cream; ink is espresso, never pure black */
	--bg: #efe4cd;             /* the page: graph paper */
	--grid: #e2d4b6;           /* the 24px lines on it */
	--paper: #f5ecd8;          /* cards, rows, sheets */
	--paper-2: #fffaf0;        /* inputs, receipts */
	--stone: #e4d6b8;          /* quiet fills: inactive tabs, hover, tracks */
	--stone-2: #d8c8a4;
	--kraft: #cdbb96;          /* wrapping-paper brown: panels, table tops */
	--ink: #2a1c12;            /* text, frames, primary buttons (13:1 on paper) */
	--ink-2: #4a3324;
	--ink-3: #6b4a32;          /* muted text, 6.1:1 on paper */
	--line: #b79f7c;           /* dotted and dashed rules inside a surface */
	--line-strong: #2a1c12;    /* frames of controls and cards */
	--espresso: #241810;       /* the sidebar, the staff screen */
	--espresso-2: #3a2a1c;
	--on-espresso: #f5ecd8;
	--on-espresso-2: #d6c19a;

	/* brick: the one warm accent. Brand mark, counters, allergens, anything that needs a look */
	--brand: #9b3b24;
	--brand-strong: #7f2e1a;
	--brand-soft: #f0d9c9;

	/* meaning, for state only and always with a word or an icon next to it */
	--ok: #4a5d23;      --ok-soft: #e3e5c6;
	--warn: #85570f;    --warn-soft: #f2e0b3;
	--err: #9b3b24;     --err-soft: #f0d9c9;
	--info: #40536a;    --info-soft: #dcdfd2;

	/* venue accent (the guest page overrides these from the venue settings; used sparingly) */
	--accent: var(--brand);
	--accent-ink: #ffffff;

	/* type */
	--font-text: "Plex Thai", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
	--font-display: "Fraunces", "Noto Serif Thai", Georgia, "Noto Serif", "Times New Roman", serif;
	--font-mono: "DM Mono", "Plex Thai", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	--font-th: "Noto Serif Thai", "Plex Thai", serif;
	--fs-xs: .75rem;
	--fs-sm: .8125rem;
	--fs-md: .9375rem;
	--fs-lg: 1.0625rem;
	--fs-xl: 1.25rem;
	--fs-2xl: 1.75rem;
	--fs-3xl: clamp(2.2rem, 5.6vw, 3.75rem);
	--lh-text: 1.55;
	--lh-tight: 1.2;
	/* small uppercase mono labels: Thai has no case and does not tolerate tracking */
	--tt: uppercase;
	--ls: .08em;
	--fs-label: .75rem;        /* buttons, tabs, captions */
	--fs-badge: .6875rem;

	/* shape and rhythm: square frames; only markers, switches and avatars are round */
	--r-xs: 0; --r-sm: 0; --r-md: 0; --r-lg: 0; --r-xl: 0;
	--bw: 2px;
	--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px;
	--gutter: clamp(16px, 4vw, 32px);
	/* the one column every page is set in (the guest menu's width); its content edges are the gutter inside it */
	--col: 680px;
	--tap: 44px;
	/* one height per kind of content (docs/UI_STANDARD.md, "Heights"): whatever holds the same thing is the same height.
	   A one-line thing you press (button, field, select, tab, title-block cell, chip, pill, stepper, close button, a row
	   of a list or of a menu) is 44; a one-line label you cannot press (badge, stamp, tag, number stamp) is 24; a
	   counter on a button is 22; a bar with one row of controls (header, top bar, the head and foot of a sheet) is 60
	   plus its 2px rule; a key of the number pad (a large digit) is 52. --h-ctl-sm stays as a name, the same 44. */
	--h-ctl: 44px;
	--h-ctl-sm: 44px;
	--h-tag: 24px;
	--h-count: 22px;
	--h-bar: 60px;
	--h-key: 52px;
	--h-pic: 52px;    /* a small picture: a logo, a dish in a list (the dish card's photo is 88) */
	--h-mark: 26px;   /* a round mark: a step number, a checklist tick, a lettered mark on a photo and its legend */

	/* depth: paper on a table. Frames carry structure; shadows only for things that float */
	--sh-1: none;
	--sh-2: 0 14px 26px -14px rgb(36 24 16 / .55);
	--sh-3: 0 24px 60px -20px rgb(36 24 16 / .6);

	/* graph paper */
	--paper-grid: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);

	/* motion: one easing, three speeds; everything honours prefers-reduced-motion below */
	--ease: cubic-bezier(.2, .8, .2, 1);
	--t-fast: 120ms;
	--t-med: 200ms;
	--t-slow: 340ms;

	color-scheme: light;   /* the only theme: no dark variant anywhere, guests included */

	/* scrollbars: a square ink bar in a paper strip; a dark surface (the sidebar, the staff screen) sets its own pair */
	--sb-track: var(--stone);
	--sb-thumb: var(--ink-3);
	--sb-thumb-hover: var(--ink);
}

/* Thai, Devanagari and CJK need more vertical room than Latin: stacked vowels and tone marks must not be clipped. */
:lang(th) { --lh-text: 1.7; --lh-tight: 1.45; --tt: none; --ls: 0; --fs-label: .8125rem; --fs-badge: .75rem; }
:lang(hi) { --lh-text: 1.75; --lh-tight: 1.5; --tt: none; --ls: 0; }
:lang(zh), :lang(ja), :lang(ko) { --lh-text: 1.65; --lh-tight: 1.4; --tt: none; --ls: 0; }
:lang(zh) { --font-text: "Plex Thai", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif; }
:lang(ja) { --font-text: "Plex Thai", "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", system-ui, sans-serif; }
:lang(ko) { --font-text: "Plex Thai", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", system-ui, sans-serif; }
:lang(hi) { --font-text: "Plex Thai", "Kohinoor Devanagari", "Nirmala UI", "Mangal", "Noto Sans Devanagari", system-ui, sans-serif; }
:lang(zh), :lang(ja), :lang(ko), :lang(hi) { --font-display: var(--font-text); --font-th: var(--font-text); }

*, *::before, *::after { box-sizing: border-box; }
/* the scrollbar keeps its place, so the column does not shift between a short page and a long one */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-gutter: stable; }
/* While a modal window is open the page gives that place up: the window and its backdrop cannot paint into it, so it would
   stand beside them as an empty strip. A padding of the same width (--sbw, measured by the page's script) keeps the column
   where it was, so nothing moves under the backdrop; the page does not scroll behind the window. */
html:has(dialog:modal) { scrollbar-gutter: auto; padding-right: var(--sbw, 0px); }
html:has(dialog:modal) body { overflow: hidden; }
body { margin: 0; font-family: var(--font-text); font-size: var(--fs-md); line-height: var(--lh-text); color: var(--ink); background-color: var(--bg); background-image: var(--paper-grid); background-size: 24px 24px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: var(--lh-tight); margin: 0; text-wrap: balance; overflow-wrap: anywhere; hyphens: auto; }
/* tight tracking helps Latin and Cyrillic headings; Thai marks must never be squeezed */
:lang(en) :is(h1, h2), :lang(ru) :is(h1, h2) { letter-spacing: -.012em; }
p { margin: 0 0 var(--sp-3); text-wrap: pretty; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-color: var(--line); text-underline-offset: .2em; }
a:hover { text-decoration-color: currentColor; }
[hidden], [x-cloak] { display: none !important; }
.num, .tnum { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* scrollbars in the sheet's language: square, no arrows, an ink bar with a margin of track around it. WebKit and Blink
   draw the pseudo-elements; Firefox gets the same colours through scrollbar-color (it has no shape control). */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--sb-track); }
::-webkit-scrollbar-thumb { min-height: 32px; background: var(--sb-thumb); border: 2px solid var(--sb-track); border-radius: 0; }
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--sb-track); }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
/* a phone-sized window (the landing page's demo phone, a narrow browser) gets the slim bar a phone would show */
@media (max-width: 480px) { ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-thumb { border-width: 1px; } }
@supports not selector(::-webkit-scrollbar) { * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) var(--sb-track); } }

/* focus is always visible for keyboard users, never for mouse taps */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* icons: one 24px grid, a 1.7px square-cut stroke (see fragments/icons.html) */
/* a flag next to a language (fragments/flags.html): never alone, always with the language's name or code */
.flag { width: 21px; height: 14px; flex: none; box-shadow: 0 0 0 1px rgb(42 28 18 / .3); }
.flag.sm { width: 18px; height: 12px; }

.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.22em; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}