/* === theme.css ======================================================= */
/* SRVD POS template - the ONE own stylesheet, in layer order (README, section 1):
	 1. THEME TOKENS, FONTS, MATERIALS - the Figma design tokens as --pos-* and
	    Bootstrap's --bs-* globals (dark default, [data-bs-theme="light"] skin),
	    the General Sans faces and the glass materials.
	 2. KIT COMPONENTS - every visual component of the design as a real HTML
	    element restyled by a kit class family (.srvd-btn, .srvd-field, .srvd-checkbox, .srvd-dropdown, ...),
	    with the 0. RESETS block first and the 7. BOOTSTRAP INTEROP block last.
	 3. PAGES - one "page: <name>" layout section per page.
	 Served unminified with a ?v= cache buster (no build step); this copy in pos.srvd is the source of truth for the theme, srvd.pos.design
	 stays the Figma working document. Origin: html/assets/css/custom.css + html/assets/css/ui-kit.css
	 (Figma FRAME "UI Kit" 18914:12150, SRVD - Design), assembled in Session F2b
	 of __plan/ui-kit-fix-plan.md. */

/* ==================================================================== */
/* 1. THEME TOKENS, FONTS, MATERIALS                                    */
/* ==================================================================== */

/* >>> fonts: general-sans >>> */
/* Brand typeface used across SRVD POS screens. Hosted locally (offline). */
@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "General Sans";
	src: url("../fonts/general-sans-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
/* <<< fonts: general-sans <<< */

/* >>> theme: bootstrap-vars >>> */
/* Layer 1 - the Figma design tokens (Variables sheet 18920:10461) as ONE source:
	 (1) the shared --pos-* tokens every page used to re-declare, and (2) Bootstrap's
	 global --bs-* variables mapped onto them, so the scaffold itself is on-brand and
	 a stray Bootstrap component never looks foreign. This themes Bootstrap's
	 VARIABLES only - no Bootstrap component class is restyled (fix plan, decision 1).
	 Dark is the default (the POS frames are dark); [data-bs-theme="light"] is the
	 light skin and MUST redefine every variable set in the dark block, because
	 Bootstrap's own :root,[data-bs-theme=light] rule loads before this file.
	 Pages keep their own [data-page] token blocks (higher specificity) for
	 page-level variants; the kit page aliases its --uikit-* chrome tokens to these
	 where the values agree. Plan: __plan/ui-kit-fix-plan.md (Session F0). */
:root,
[data-bs-theme="dark"] {
	color-scheme: dark;

	/* shared tokens (Figma variable name in the comment) */
	--pos-bg: #19171d;                                 /* Background / Primary */
	--pos-text: #ffffff;                               /* Text / Primary */
	--pos-muted: #aaa9ab;                              /* Text / Secondary */
	--pos-faint: #4c4954;                              /* Text / Tertiary */
	--pos-on-light: #181818;                           /* Text / Foreground: glyphs and text on white */
	--pos-card: rgba(95, 93, 102, 0.15);               /* Background / Secondary */
	--pos-card-hover: rgba(95, 93, 102, 0.25);         /* Background / Secondary, hovered / pressed: the chip on an accent surface (toast close) */
	--pos-card-active: rgba(95, 93, 102, 0.35);
	--pos-elevated: #2c2c30;                           /* Background / Secondary Opaque */
	--pos-tile: rgba(204, 204, 204, 0.12);             /* Background / Tertiary */
	--pos-hairline: rgba(204, 204, 204, 0.12);         /* Background / Tertiary, as a rule or stroke */
	--pos-chip: rgba(86, 84, 91, 0.30);                /* Background / Input: chips, ghost buttons, fields */
	--pos-chip-hover: rgba(86, 84, 91, 0.45);
	--pos-input-secondary: rgba(204, 204, 204, 0.22);  /* Background / Input Secondary */
	--pos-overlay: rgba(0, 0, 0, 0.50);                /* Background / Overlay */
	--pos-shadow: rgba(0, 0, 0, 0.30);                 /* Background / Elevated Surface Shadow */
	--pos-close-bg: rgba(255, 255, 255, 0.20);         /* Text / Foreground transparent: pop-up close */
	--pos-logo-bg: rgba(95, 93, 102, 0.15);            /* Background / Secondary: logo disc */
	--pos-popover: #353437;                            /* no Figma variable: the dropdown surface over a pop-up (checkout loyalty search 28902:28268, the tables printer picker) */
	--pos-toolbar: #222225;                            /* no Figma variable: the mobile "buttons panel" (checkout 29909:97049 / 97070, tables-menu) */
	--pos-photo-shade: linear-gradient(to top, rgba(0, 0, 0, 0.85) 23%, rgba(0, 0, 0, 0) 50%);        /* the legibility shade over a photo card (Figma "dish card" 28677:27498 "shadow"; light: the white wash of 29504:25857) */
	--pos-photo-shade-deep: linear-gradient(to top, rgba(0, 0, 0, 0.9) 25%, rgba(0, 0, 0, 0) 70%);    /* the option card's deeper shade (Figma "option card" 29234:30231) */
	--pos-photo-bubble: rgba(255, 255, 255, 0.20);     /* the "+" bubble on a photo (Figma "Button" 32 on #fff@20%; light 29504:25857: #fff@60%) */
	--pos-photo-bubble-hover: rgba(255, 255, 255, 0.32);
	--pos-photo-bubble-text: #ffffff;
	--pos-photo-mask: rgba(0, 0, 0, 0.45);            /* the flat legibility mask over an uploaded image (Figma "image uploader" 4366:4526 hover / error; light: a white wash like --pos-photo-shade) */
	--pos-accent: #ffffff;                             /* Brand / Primary as a surface: active chips, primary buttons, selected cards */
	--pos-on-accent: #181818;                          /* text and glyphs on the accent */
	--pos-accent-hover: #f1f2f3;                       /* hovered accent surface (approved POS pages) */
	--pos-danger: #ed4052;                             /* Status / Danger */
	--pos-success: #3dc55b;                            /* Status / Success */
	--pos-warning: #feb62b;                            /* Status / Warning */
	--pos-secondary: #ca45f9;                          /* violet accent (Figma's hidden Brand / Secondary row): story ring, visited links, secondary tags, second event dot */
	--pos-course-starter: #4aa3ff;                     /* no Figma variable: the course tags (pos order list, workorders cards) run cold to warm, starter = sky blue */
	--pos-course-main: #feb62b;                        /* main = the warning amber */
	--pos-course-dessert: #ff6f91;                     /* dessert = coral */
	--pos-screen-surface: linear-gradient(180deg, #2f2e33 8.78%, #000000 97.32%);
	--pos-screen-border: linear-gradient(to bottom right, rgba(69, 66, 77, 0.75), rgba(37, 39, 40, 0.60));
	--pos-drawer-surface: linear-gradient(149deg, rgba(47, 46, 51, 0.75), rgba(37, 39, 40, 0.60));    /* the drawer's glass surface (Figma "Drawer and popover" 9617:8359: the .glass-effect stops at 149deg; light: the light glass card's stops) */
	--pos-modal-surface: linear-gradient(180deg, rgba(47, 46, 51, 0.75) 0%, rgba(37, 39, 40, 0.60) 100%);    /* the pop-up material (the shell's .pos-modal__dialog; custom.css paints the framework's SweetAlert popups with it) */
	--pos-modal-border: linear-gradient(180deg, rgba(69, 66, 77, 0.75) 0%, rgba(37, 39, 40, 0.60) 100%);
	--pos-font: "General Sans", system-ui, -apple-system, sans-serif;   /* Typeface / Primary */

	/* Bootstrap global variables (names as in bootstrap 5.3 _root.scss) */
	--bs-body-bg: var(--pos-bg);
	--bs-body-bg-rgb: 25, 23, 29;
	--bs-body-color: var(--pos-text);
	--bs-body-color-rgb: 255, 255, 255;
	--bs-emphasis-color: #ffffff;
	--bs-emphasis-color-rgb: 255, 255, 255;
	--bs-secondary-color: var(--pos-muted);
	--bs-secondary-color-rgb: 170, 169, 171;
	--bs-secondary-bg: var(--pos-elevated);
	--bs-secondary-bg-rgb: 44, 44, 48;
	--bs-tertiary-color: var(--pos-faint);
	--bs-tertiary-color-rgb: 76, 73, 84;
	--bs-tertiary-bg: var(--pos-tile);
	--bs-tertiary-bg-rgb: 204, 204, 204;
	--bs-border-color: var(--pos-hairline);
	--bs-border-color-translucent: var(--pos-hairline);
	--bs-body-font-family: var(--pos-font);
	--bs-font-sans-serif: var(--pos-font);
	--bs-body-line-height: 1.5;                        /* Bootstrap default, kept for good (F7 decision): a kit family pins its
	                                                      own line-height (the Typekit values), so Bootstrap's own components,
	                                                      the docs chrome and page prose keep Bootstrap's rhythm; Figma Snug
	                                                      120% is a family value, never the body's */
	--bs-primary: var(--pos-accent);                   /* Brand / Primary */
	--bs-primary-rgb: 255, 255, 255;
	--bs-danger: var(--pos-danger);
	--bs-danger-rgb: 237, 64, 82;
	--bs-success: var(--pos-success);
	--bs-success-rgb: 61, 197, 91;
	--bs-warning: var(--pos-warning);
	--bs-warning-rgb: 254, 182, 43;
	--bs-link-color: #ffffff;
	--bs-link-color-rgb: 255, 255, 255;
	--bs-link-hover-color: #ffffff;                    /* kit links keep their colour and gain the underline */
	--bs-link-hover-color-rgb: 255, 255, 255;
	--bs-border-radius-sm: 4px;
	--bs-border-radius: 8px;                           /* fields, tags, kbd */
	--bs-border-radius-lg: 16px;                       /* cards, toasts */
	--bs-border-radius-xl: 24px;                       /* tiles, dropdown menus */
	--bs-border-radius-xxl: 32px;                      /* glass panels */
	--bs-focus-ring-width: 2px;
	--bs-focus-ring-color: rgba(255, 255, 255, 0.70);
	--bs-form-invalid-color: var(--pos-danger);
	--bs-form-invalid-border-color: var(--pos-danger);
}
[data-bs-theme="light"] {
	color-scheme: light;

	--pos-bg: #ffffff;
	--pos-text: #181818;
	--pos-muted: #5f5c69;
	--pos-faint: #c9cbce;
	--pos-on-light: #181818;                           /* the pages keep dark glyphs on their light active chips */
	--pos-card: rgba(163, 168, 173, 0.15);
	--pos-card-hover: rgba(163, 168, 173, 0.25);
	--pos-card-active: rgba(163, 168, 173, 0.35);
	--pos-elevated: #ecedee;
	--pos-tile: rgba(158, 169, 180, 0.24);
	--pos-hairline: rgba(158, 169, 180, 0.24);
	--pos-chip: #ffffff;
	--pos-chip-hover: #f1f2f3;
	--pos-input-secondary: #ffffff;
	--pos-overlay: rgba(170, 170, 170, 0.50);
	--pos-shadow: rgba(0, 0, 0, 0.30);
	--pos-close-bg: rgba(255, 255, 255, 0.60);
	--pos-logo-bg: rgba(163, 168, 173, 0.15);
	--pos-popover: #ffffff;
	--pos-toolbar: #f1f2f3;                            /* derived from the light chips: no light mobile frame is validated */
	--pos-photo-shade: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.22) 100%);
	--pos-photo-shade-deep: linear-gradient(to top, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 35%, rgba(255, 255, 255, 0.22) 100%);
	--pos-photo-bubble: rgba(255, 255, 255, 0.60);
	--pos-photo-bubble-hover: rgba(255, 255, 255, 0.80);
	--pos-photo-bubble-text: #181818;
	--pos-photo-mask: rgba(255, 255, 255, 0.45);
	--pos-accent: #181818;
	--pos-on-accent: #ffffff;
	--pos-accent-hover: #000000;
	--pos-danger: #ed4052;
	--pos-success: #3dc55b;
	--pos-warning: #feb62b;
	--pos-secondary: #ca45f9;
	--pos-course-starter: #1e7fe0;                     /* the course colours deepened so the outline tags read on white */
	--pos-course-main: #d9910a;
	--pos-course-dessert: #e0447a;
	--pos-screen-surface: linear-gradient(180deg, rgba(248, 249, 250, 0.90) 0%, rgba(241, 242, 243, 0.80) 100%);
	--pos-screen-border: linear-gradient(to bottom right, rgba(227, 231, 234, 0.85), rgba(241, 242, 243, 0.80));
	--pos-drawer-surface: linear-gradient(149deg, rgba(248, 249, 250, 0.90), rgba(241, 242, 243, 0.80));
	--pos-modal-surface: linear-gradient(180deg, rgba(248, 249, 250, 0.90) 0%, rgba(241, 242, 243, 0.80) 100%);
	--pos-modal-border: linear-gradient(180deg, rgba(227, 231, 234, 0.85) 0%, rgba(241, 242, 243, 0.80) 100%);
	--pos-font: "General Sans", system-ui, -apple-system, sans-serif;

	--bs-body-bg: var(--pos-bg);
	--bs-body-bg-rgb: 255, 255, 255;
	--bs-body-color: var(--pos-text);
	--bs-body-color-rgb: 24, 24, 24;
	--bs-emphasis-color: #000000;
	--bs-emphasis-color-rgb: 0, 0, 0;
	--bs-secondary-color: var(--pos-muted);
	--bs-secondary-color-rgb: 95, 92, 105;
	--bs-secondary-bg: var(--pos-elevated);
	--bs-secondary-bg-rgb: 236, 237, 238;
	--bs-tertiary-color: var(--pos-faint);
	--bs-tertiary-color-rgb: 201, 203, 206;
	--bs-tertiary-bg: var(--pos-tile);
	--bs-tertiary-bg-rgb: 158, 169, 180;
	--bs-border-color: var(--pos-hairline);
	--bs-border-color-translucent: var(--pos-hairline);
	--bs-body-font-family: var(--pos-font);
	--bs-font-sans-serif: var(--pos-font);
	--bs-body-line-height: 1.5;
	--bs-primary: var(--pos-accent);
	--bs-primary-rgb: 24, 24, 24;
	--bs-danger: var(--pos-danger);
	--bs-danger-rgb: 237, 64, 82;
	--bs-success: var(--pos-success);
	--bs-success-rgb: 61, 197, 91;
	--bs-warning: var(--pos-warning);
	--bs-warning-rgb: 254, 182, 43;
	--bs-link-color: #181818;
	--bs-link-color-rgb: 24, 24, 24;
	--bs-link-hover-color: #181818;
	--bs-link-hover-color-rgb: 24, 24, 24;
	--bs-border-radius-sm: 4px;
	--bs-border-radius: 8px;
	--bs-border-radius-lg: 16px;
	--bs-border-radius-xl: 24px;
	--bs-border-radius-xxl: 32px;
	--bs-focus-ring-width: 2px;
	--bs-focus-ring-color: rgba(24, 24, 24, 0.70);
	--bs-form-invalid-color: var(--pos-danger);
	--bs-form-invalid-border-color: var(--pos-danger);
}
/* <<< theme: bootstrap-vars <<< */

/* >>> theme: menu-category-palette >>> */
/* Menu category colours - Figma SECTION "Menu colour palette" 28998:13033: the
	 15 group colours (level 1) and 78 sub-category colours (level 2) that the kit's
	 coloured category tile (.srvd-pos-cat-tile--colour, its .srvd-pos-cat-tile--<slug>
	 modifiers) paints at --pos-cat-alpha (Figma: solid fill @ 40%). Theme-independent:
	 the section has no light artboard, the tiles keep their fills in both themes. Values
	 from the working document's html/assets/css/menu-colour-palette.css (generated by
	 .figma-cache/_gen-palette-css.js), carried over by rendered/f8/_f8-palette.js; the
	 group comments quote Figma's hidden colour-intent notes. */
:root {
	--pos-cat-alpha: 0.4;

	/* Meat Dishes (28998:13034) — deep meaty red – richness and flavor */
	--pos-cat-meat:                         #b22222;
	--pos-cat-meat-beef:                    #8b0000;   /* Beef Dishes */
	--pos-cat-meat-pork:                    #d2691e;   /* Pork Dishes */
	--pos-cat-meat-lamb:                    #a0522d;   /* Lamb Dishes */
	--pos-cat-meat-chicken:                 #e9967a;   /* Chicken Dishes */
	--pos-cat-meat-turkey-duck:             #8b4513;   /* Turkey & Duck Dishes */

	/* Seafood Dishes (28998:13041) — Fresh sea blue – the sea and purity */
	--pos-cat-seafood:                      #1e90ff;
	--pos-cat-seafood-shellfish:            #5f9ea0;   /* Shellfish Dishes */
	--pos-cat-seafood-shrimp-prawn:         #ffa07a;   /* Shrimp & Prawn */
	--pos-cat-seafood-crab:                 #ff6347;   /* Crab */
	--pos-cat-seafood-lobster:              #e34234;   /* Lobster */
	--pos-cat-seafood-squid-octopus:        #708090;   /* Squid & Octopus */
	--pos-cat-seafood-mussels-clams:        #20b2aa;   /* Mussels & Clams */
	--pos-cat-seafood-sushi-sashimi:        #ff7f50;   /* Sushi & Sashimi */

	/* Vegetarian & Plant-Based (28998:13049) — Warm green –freshness, health, and nature. */
	--pos-cat-vegetarian:                   #228b22;
	--pos-cat-vegetarian-vegetarian:        #32cd32;   /* Vegetarian Dishes */
	--pos-cat-vegetarian-vegan:             #2e8b57;   /* Vegan Dishes */
	--pos-cat-vegetarian-grilled-vegetables: #6b8e23;   /* Grilled Vegetables */
	--pos-cat-vegetarian-salads:            #7cfc00;   /* Salads */
	--pos-cat-vegetarian-bowls:             #66cdaa;   /* Bowls */

	/* Pasta, Noodles & Grains (28998:13056) — Golden – the color of wheat and pasta */
	--pos-cat-pasta:                        #daa520;
	--pos-cat-pasta-pasta:                  #ffd700;   /* Pasta */
	--pos-cat-pasta-noodles:                #f4a460;   /* Noodles */
	--pos-cat-pasta-risotto:                #eedc82;   /* Risotto */
	--pos-cat-pasta-rice:                   #fff8dc;   /* Rice */
	--pos-cat-pasta-dumplings:              #deb887;   /* Dumplings */

	/* Baked & Flour -Based Dishes (28998:13063) — Warm bread shade, appetizing and cozy */
	--pos-cat-baked:                        #f4a300;
	--pos-cat-baked-pizza:                  #ff8c00;   /* Pizza */
	--pos-cat-baked-burgers:                #cd853f;   /* Burgers */
	--pos-cat-baked-sandwiches-wraps:       #ffd39b;   /* Sandwiches & Wraps */
	--pos-cat-baked-tacos-quesadillas:      #ffa500;   /* Tacos & Quesadillas */
	--pos-cat-baked-pies:                   #d2b48c;   /* Pies */

	/* Egg & Breakfast Dishes (28998:13070) — Sunny yellow – a symbol of energy and morning */
	--pos-cat-breakfast:                    #ffd700;
	--pos-cat-breakfast-omelets:            #ffec8b;   /* Omelets */
	--pos-cat-breakfast-pancakes:           #f5deb3;   /* Pancakes */
	--pos-cat-breakfast-waffles:            #e1c699;   /* Waffles */
	--pos-cat-breakfast-french-toast:       #f0e68c;   /* French Toast */
	--pos-cat-breakfast-breakfast-platters: #ffe4b5;   /* Breakfast Platters */

	/* Soups & Stews (28998:13077) — Warm orange -brown – a feeling of home comfort */
	--pos-cat-soups:                        #c04000;
	--pos-cat-soups-cream-soups:            #ffb347;   /* Cream Soups */
	--pos-cat-soups-clear-soups:            #ffdab9;   /* Clear Soups */
	--pos-cat-soups-stews:                  #8b4513;   /* Stews */
	--pos-cat-soups-curries:                #e27e05;   /* Curries */

	/* Grill, BBQ & Roasted (28998:13083) — smoky dark red –heat and coals */
	--pos-cat-grill:                        #8b0000;
	--pos-cat-grill-bbq:                    #b22222;   /* BBQ */
	--pos-cat-grill-grilled:                #a52a2a;   /* Grilled Dishes */
	--pos-cat-grill-roasted-meats:          #cd5c5c;   /* Roasted Meats */
	--pos-cat-grill-skewers:                #d2691e;   /* Skewers */
	--pos-cat-grill-smoked:                 #60472e;   /* Smoked Dishes */

	/* International Cuisine (28998:13090) — purple –a symbol of diversity and exoticism */
	--pos-cat-international:                #9932cc;
	--pos-cat-international-asian:          #da70d6;   /* Asian Dishes */
	--pos-cat-international-mediterranean:  #cba135;   /* Mediterranean */
	--pos-cat-international-italian:        #e6c200;   /* Italian */
	--pos-cat-international-mexican:        #dd5523;   /* Mexican */
	--pos-cat-international-middle-eastern: #c48e2b;   /* Middle Eastern */
	--pos-cat-international-indian:         #ffa500;   /* Indian */

	/* Side Dishes (28998:13098) — neutral warm tone */
	--pos-cat-sides:                        #bc8f8f;
	--pos-cat-sides-rice:                   #fff8dc;   /* Rice */
	--pos-cat-sides-potatoes:               #f5deb3;   /* Potatoes */
	--pos-cat-sides-vegetables:             #9acd32;   /* Vegetables */
	--pos-cat-sides-fries:                  #ffd700;   /* Fries */
	--pos-cat-sides-sauces-dips:            #c2b280;   /* Sauces & Dips */

	/* Bakery & Pastry (28998:13105) — caramel colour of dough & fresh baked goods */
	--pos-cat-bakery:                       #d2691e;
	--pos-cat-bakery-bread:                 #deb887;   /* Bread */
	--pos-cat-bakery-croissants:            #f4a460;   /* Croissants */
	--pos-cat-bakery-muffins:               #f38c5c;   /* Muffins */
	--pos-cat-bakery-pies:                  #c68642;   /* Pies */
	--pos-cat-bakery-savory-pastries:       #eecfa1;   /* Savory Pastries */

	/* Desserts (28998:13112) — soft pink –sweet, airy and attractive */
	--pos-cat-desserts:                     #ff69b4;
	--pos-cat-desserts-cakes:               #ffb6c1;   /* Cakes */
	--pos-cat-desserts-cheesecakes:         #fadadd;   /* Cheesecakes */
	--pos-cat-desserts-ice-cream:           #fff0f5;   /* Ice Cream */
	--pos-cat-desserts-tarts:               #f5cba7;   /* Tarts */
	--pos-cat-desserts-fruit-desserts:      #ffc0cb;   /* Fruit Desserts */
	--pos-cat-desserts-mousse:              #f08080;   /* Mousse */

	/* Beverages (28998:13120) — coffee-brown – coziness and comfort */
	--pos-cat-beverages:                    #6f4e37;
	--pos-cat-beverages-coffee:             #5b452f;   /* Coffee */
	--pos-cat-beverages-tea:                #d2b48c;   /* Tea */
	--pos-cat-beverages-smoothies:          #ff9670;   /* Smoothies */
	--pos-cat-beverages-juices:             #f2d440;   /* Juices */
	--pos-cat-beverages-soft-drinks:        #4682b4;   /* Soft Drinks */

	/* Alcoholic Beverages (28998:13127) — Bordeaux wine – sophistication and evening atmosphere */
	--pos-cat-alcohol:                      #8f0c0c;
	--pos-cat-alcohol-wine:                 #722f37;   /* Wine */
	--pos-cat-alcohol-beer:                 #daa520;   /* Beer */
	--pos-cat-alcohol-cocktails:            #ff6347;   /* Cocktails */
	--pos-cat-alcohol-spirits-drinks:       #a0522d;   /* Spirits drinks */

	/* Special Categories (28998:13133) — neutral gray-blue – for special sections */
	--pos-cat-special:                      #708090;
	--pos-cat-special-kids-menu:            #87cefa;   /* Kids Menu */
	--pos-cat-special-chefs-specials:       #ffe243;   /* Chef’s Specials */
	--pos-cat-special-seasonal:             #a0f3a0;   /* Seasonal Dishes */
	--pos-cat-special-healthy-options:      #3cb371;   /* Healthy Options */
	--pos-cat-special-gluten-free:          #f0e68c;   /* Gluten-Free */
	--pos-cat-special-keto-paleo:           #bdb76b;   /* Keto/Paleo */
}
/* <<< theme: menu-category-palette <<< */

/* Every page and the kit used to set this on their body; the template sets it once. */
body { -webkit-font-smoothing: antialiased; }

/* >>> components: glass-effect >>> */
/* Reusable "glass modal" material. Apply to any element (card, button, div):
			 <div class="glass-effect"> … </div>
	 Figma's live Glass material params aren't exposed by the REST API, so this
	 emulates the look. Tune per element by overriding any --glass-* variable:
			 .my-btn { --glass-radius: 999px; --glass-blur: 24px; }
	 Theme it globally later via [data-bs-theme="light"] .glass-effect { … }.
	 Requires a backdrop to blur (place over an image/photo/coloured bg). */
.glass-effect {
	/* tokens (defaults = SRVD dark glass) */
	--glass-blur: 30px;
	--glass-saturate: 1.5;
	--glass-surface: linear-gradient(180deg, rgba(47, 46, 51, 0.75) 0%, rgba(37, 39, 40, 0.60) 100%);
	--glass-sheen: rgba(255, 255, 255, 0.07);          /* top sheen, folded into bg */
	--glass-border: linear-gradient(180deg, rgba(69, 66, 77, 0.75) 0%, rgba(37, 39, 40, 0.60) 100%);
	--glass-border-width: 1px;
	--glass-top-light: rgba(255, 255, 255, 0.20);      /* specular top edge */
	--glass-depth: rgba(0, 0, 0, 0.12);                /* inner bottom depth */
	--glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.30);   /* soft float shadow */
	--glass-radius: 32px;

	position: relative;
	border-radius: var(--glass-radius);
	background:
		linear-gradient(180deg, var(--glass-sheen) 0%, rgba(255, 255, 255, 0) 42%),
		var(--glass-surface);
	backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	-webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
	box-shadow:
		inset 0 1px 0 var(--glass-top-light),
		inset 0 -24px 48px var(--glass-depth),
		var(--glass-shadow);
}
/* gradient hairline border that respects the radius (mask trick) */
.glass-effect::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--glass-border-width);
	background: var(--glass-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
					mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
					mask-composite: exclude;
	pointer-events: none;
}
/* Light color-mode skin for every glass element (Figma light V3/V2 card).
	 Re-skins all .glass-effect surfaces at once when <html data-bs-theme="light">. */
[data-bs-theme="light"] .glass-effect {
	--glass-surface: linear-gradient(180deg, rgba(248, 249, 250, 0.90) 0%, rgba(241, 242, 243, 0.80) 100%);
	--glass-border: linear-gradient(180deg, rgba(227, 231, 234, 0.85) 0%, rgba(241, 242, 243, 0.80) 100%);
	--glass-sheen: rgba(255, 255, 255, 0.45);
	--glass-top-light: rgba(255, 255, 255, 0.70);
	--glass-depth: rgba(0, 0, 0, 0.05);
	--glass-shadow: 0 24px 70px rgba(0, 0, 0, 0.18);
}
/* <<< components: glass-effect <<< */

/* >>> components: modal-glass-effect >>> */
/* Flat translucent panel taken verbatim from the Figma "options window"
	 (node 29293:35997 — the add-dish modal). Unlike .glass-effect it carries
	 ONLY what that node defines: a ~34° gradient surface, a ~135° 1px gradient
	 hairline border, and a 32px radius. No backdrop blur / sheen / specular /
	 float-shadow (the node has no effects) — the frosting comes from the scrim
	 behind it (.pos-modal__sheet). Apply over a blurred/photographic backdrop.
	 Tune per element by overriding any --mglass-* variable. */
.modal-glass-effect {
	--mglass-surface: linear-gradient(34deg, rgba(47, 46, 51, 0.75) 0%, rgba(37, 38, 39, 0.60) 100%);
	--mglass-border: linear-gradient(135deg, rgba(69, 66, 77, 0.75) 0%, rgba(37, 38, 39, 0.60) 100%);
	--mglass-border-width: 1px;
	--mglass-radius: 32px;

	position: relative;
	border-radius: var(--mglass-radius);
	background: var(--mglass-surface);
}
/* gradient hairline border that respects the radius (same mask trick) */
.modal-glass-effect::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--mglass-border-width);
	background: var(--mglass-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
					mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
					mask-composite: exclude;
	pointer-events: none;
}
/* Light skin (no Figma light-modal frame; mirrors the .glass-effect light card,
	 keeping the same 34°/135° angles as the dark modal panel). */
[data-bs-theme="light"] .modal-glass-effect {
	--mglass-surface: linear-gradient(34deg, rgba(248, 249, 250, 0.90) 0%, rgba(241, 242, 243, 0.80) 100%);
	--mglass-border: linear-gradient(135deg, rgba(227, 231, 234, 0.85) 0%, rgba(241, 242, 243, 0.80) 100%);
}
/* <<< components: modal-glass-effect <<< */

/* ==================================================================== */
/* 2. KIT COMPONENTS                                                    */
/* The kit sheets (ui-kit.html) are the contract: copy the markup from    */
/* there. Colours are Layer 1 tokens in every family (F7; the last ones,   */
/* search bar / chat / charts / toast / uploader / drawer, in F8 sitting  */
/* 10), so the light skin follows automatically; the device mocks (iOS,   */
/* Android, Safari, the phone) and the icon sheets stay literal - they    */
/* are the same in both themes - as do #e71d32 / #93989c (Figma error /  */
/* help text) and the rating value #000000. The sheets stay dark because  */
/* every dark sheet carries data-bs-theme="dark" (nested colour mode).    */
/* Names: srvd-<family>__element--modifier (README, section 1, "Names"). */
/* ==================================================================== */

/* State contract (fix plan, Session F0): every visible state has a REAL
	 selector first and a sheet-only demo twin second, in this order in every
	 rule, e.g. `.srvd-btn:hover, .srvd-btn.is-hover { ... }`:
	   hover      .x:hover                                     twin .x.is-hover
	   focus      .x:focus-visible (composite: :focus-within)  twin .x.is-focused
	   pressed    .x:active                                    twin .x.is-pressed
	   toggle     .x[aria-pressed="true"]                      twin .x.is-active
	   selected   .x[aria-selected="true"], .x[aria-current]   twin .x.is-active / --selected
	   checked    input:checked                                no twin (use `checked`)
	   disabled   .x:disabled, .x[aria-disabled="true"]        twin .x.is-disabled
	   open       .x[aria-expanded="true"], dialog[open]       twin .x--open
	   invalid    .x[aria-invalid="true"], :user-invalid       twin .x--error
	   empty      :placeholder-shown / :not(:placeholder-shown) twin --filled
	   busy       .x[aria-busy="true"]                         twin .is-loading
	 The is-* / --state twins exist only so ui-kit.html can show every state at
	 once; pages never use them (template/README.md, section 4). Since F7 every
	 control has hover / pressed / focus-visible / disabled, and every family reads
	 Layer 1 tokens only (alpha shades via color-mix; a white-in-dark surface is
	 --pos-accent with --pos-on-accent glyphs). */

/* ---------------------------------------------------------------------- */
/* 0. RESETS                                                              */
/* Every kit family is built on the native element it IS (button, input,  */
/* ul, dialog, ...) and must render identically with or without Bootstrap */
/* and whatever it is nested in. The reset for each element kind is       */
/* written ONCE below as a zero-specificity :where() list, so a family's  */
/* own rule always wins and the copy-paste markup needs no extra class.   */
/* Zero specificity beats the UA sheet but NOT Bootstrap reboot: what     */
/* reboot sets on the element (ul padding/margin, textarea resize, kbd,   */
/* [type=search]) is declared again in the family rule (F1, .srvd-field__chips). */
/* The reset makes typography and colour INHERIT, so a family sets what   */
/* it needs itself (font-size, line-height, weight, colour). A family     */
/* joins the list for its element when it is (re)built on it - F1/F2     */
/* fields, F3 range and progress, F4/F6 dialogs, F6 file input; lists     */
/* keyed on element.class stay inert until the markup migrates. Position  */
/* is never reset here: .uikit-abs anchors the sheet copies.              */
/* ---------------------------------------------------------------------- */
/* controls: <button> and <a> families (reboot: border-radius 0, text-transform none,
	 focus outline; UA: system font, 2px outset border, buttonface background) */
:where(.srvd-btn, .srvd-dropdown__option, .srvd-action-sheet-item, .srvd-list-item__frame, .srvd-list-item__action, .srvd-list-action-solo, .srvd-dialog__action, .srvd-pagination-segment, .srvd-ios-share__to, .srvd-ios-share__row, .srvd-ios-share__edit, .srvd-ios-share__close,
	.srvd-calendar__navbtn, .srvd-calendar__cell, button.srvd-calendar__title, .srvd-field-tag__close, .srvd-field__reveal, .srvd-tabbar__tab, .srvd-tab-item, .srvd-navbar-btn, .srvd-navbar-group__item, .srvd-empty-state__btn, .srvd-segmented__item, .srvd-tab, .srvd-carousel-dot,
	.srvd-chat-file__circle, .srvd-table__sort, .srvd-push-notification__action, .srvd-uploader-tile__close, .srvd-chat-audio__btn, .srvd-toast__close,
	.srvd-toast__action, .srvd-search__clear, .srvd-search__cancel, .srvd-modal__close, .srvd-message-bar__icon, .srvd-message-bar__send, .srvd-wysiwyg__btn, .srvd-ios-keyboard__key,
	.srvd-ios-keyboard__emoji, .srvd-ios-keyboard__home-btn, .srvd-ios-keyboard__emic, .srvd-ios-keyboard__eback, .srvd-ios-keyboard__eabc, .srvd-pos-table, .srvd-pos-table-card, .srvd-pos-table-card__persons,
	.srvd-pos-menu-item, .srvd-pos-key, .srvd-pos-guest, .srvd-pos-cat-tile, .srvd-pos-cat, .srvd-pos-amount__btn, .srvd-pos-dish__add, .srvd-pos-dish__tap, .srvd-android-share__app,
	.srvd-sidebar-item, .srvd-breadcrumb__link, .srvd-link, .srvd-sidebar__brand, button.srvd-field__input) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}
/* fields: <input>, <textarea>, <select> families (F1 .srvd-field; F2 the search bar input and the
	 chat message textarea; F6 the amount stepper value) */
:where(input.srvd-field__input, textarea.srvd-field__input, select.srvd-field__input, input.srvd-search__input, textarea.srvd-message-bar__input, input.srvd-pos-amount__val) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font: inherit;
	color: inherit;
	outline: 0;
	resize: none;
}
:where(input.srvd-field__input, textarea.srvd-field__input, input.srvd-search__input, textarea.srvd-message-bar__input)::placeholder { opacity: 1; }   /* Firefox dims placeholders */
:where(input.srvd-field__input, input.srvd-search__input)::-webkit-search-decoration,
:where(input.srvd-field__input, input.srvd-search__input)::-webkit-search-cancel-button,
:where(input.srvd-field__input, input.srvd-search__input)::-webkit-search-results-button,
:where(input.srvd-field__input, input.srvd-search__input)::-webkit-search-results-decoration { display: none; -webkit-appearance: none; }
:where(input.srvd-field__input)::-webkit-outer-spin-button,
:where(input.srvd-field__input)::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
:where(input.srvd-field__input[type="number"]) { -moz-appearance: textfield; }
/* range: <input type="range"> (F3: the .srvd-slider sliders) */
:where(input.srvd-slider__input) {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	outline: 0;
}
:where(input.srvd-slider__input)::-webkit-slider-runnable-track { border: 0; background: none; }
:where(input.srvd-slider__input)::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; border: 0; }
:where(input.srvd-slider__input)::-moz-range-track { border: 0; background: none; }
:where(input.srvd-slider__input)::-moz-range-progress { border: 0; background: none; }
:where(input.srvd-slider__input)::-moz-range-thumb { border: 0; border-radius: 0; background: none; }
/* file: <input type="file"> stays in the tree, visually hidden, so the label keeps
	 :focus-within and the keyboard reaches it (F6 media uploader) */
:where(input.srvd-uploader__file) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
/* lists: <ul>, <ol>, <menu> families (F2 the chat log; F4 the list rows and the action sheet items) */
:where(.srvd-sidebar__group, .srvd-breadcrumb__list, ul.srvd-field__chips, ul.srvd-chat-log, ul.srvd-list, menu.srvd-action-sheet__items, ul.srvd-avatar-group) {
	list-style: none;
	margin: 0;
	padding: 0;
}
/* dialogs: <dialog> families (F4 drawer, action sheet, iOS / Android sheets; F6 the modal).
	 Chrome's UA puts a dialog at position:absolute inset 0 with margin:auto, a 1em
	 padding, a solid border and Canvas colours; the kit dialogs lay themselves out.
	 A dialog without the open attribute stays hidden whatever display its family
	 sets: the UA's own dialog:not([open]) rule would lose to any author rule. */
:where(dialog.srvd-modal, dialog.srvd-drawer, dialog.srvd-action-sheet, dialog.srvd-dialog, dialog.srvd-ios-share, dialog.srvd-android-share) {
	position: relative;
	inset: auto;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow: visible;
}
dialog:where(.srvd-modal, .srvd-drawer, .srvd-action-sheet, .srvd-dialog, .srvd-ios-share, .srvd-android-share):not([open]) { display: none; }
:where(dialog.srvd-modal, dialog.srvd-drawer, dialog.srvd-action-sheet, dialog.srvd-dialog, dialog.srvd-ios-share, dialog.srvd-android-share)::backdrop { background: var(--pos-overlay); }
/* progress: <progress> (F3, only if the native element reproduces the 4px fill) */
:where(progress.srvd-progress-native) {
	appearance: none;
	-webkit-appearance: none;
	display: block;
	border: 0;
	background: none;
}
:where(progress.srvd-progress-native)::-webkit-progress-bar { background: none; }
/* tables: <table> families (reboot: caption-side bottom, th text-align match-parent; F5 the calendar grid) */
:where(table.srvd-table, table.srvd-calendar__grid) { border-collapse: collapse; border-spacing: 0; }
:where(table.srvd-table th, table.srvd-calendar__grid th) { text-align: inherit; }
/* kbd: <kbd> families (reboot paints kbd body-bg on body-color with .875em) */
:where(.srvd-kbd, .srvd-dropdown__kbd) {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: inherit;
	color: inherit;
}

/* --- Kit buttons (copy-paste markup). States follow the contract: real
	 selector first (:hover, :active, :disabled, [aria-busy], :focus-visible),
	 sheet-only twin second (is-hover, is-pressed, is-disabled, is-loading,
	 is-focused). Figma hover: only the secondary type changes. ------------- */
.srvd-btn {
	position: relative;
	z-index: 0;                        /* own stacking context: focus ring pseudo sits behind */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 200px;
	background: transparent;
	font-family: "General Sans", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 700;
	letter-spacing: -0.16px;
	color: var(--pos-text);
	white-space: nowrap;
	text-decoration: none;             /* an <a> button (a checkout link): reboot underlines links, the kit reset is zero-specificity */
	cursor: pointer;
}
.srvd-btn--primary { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-btn--secondary { background: var(--pos-chip); }
.srvd-btn--tertiary { letter-spacing: -0.32px; }
.srvd-btn--icon { width: 48px; padding: 0; }
.srvd-btn--icon.srvd-btn--tertiary { border: 1px solid var(--pos-hairline); }
.srvd-btn--light { background: var(--pos-close-bg); }   /* the translucent close of a full-width pop-up: Figma "Button" 48 on #fff@20% (F8, tables: the split-table view) */
/* --danger : the destructive action of the order screen ("Bestelling
	 verwijderen") as an outline in the danger status colour - the secondary type's hover look on that colour: a 1px ring
	 and the label in the colour on a transparent fill; hover tints the fill 10%, pressed fills it with the on-light
	 glyphs (as the coloured status surfaces, Layer 1), disabled dims like the primary type */
.srvd-btn--danger { border: 1px solid var(--pos-danger); color: var(--pos-danger); }
.srvd-btn--danger:hover:where(:not(:disabled, [aria-busy="true"])) { background: color-mix(in srgb, var(--pos-danger) 10%, transparent); }
.srvd-btn--danger:active:where(:not(:disabled, [aria-busy="true"])) { background: var(--pos-danger); color: var(--pos-on-light); }
.srvd-btn--small {
	height: 32px;
	padding: 0 16px;
	border-radius: 16px;
	font-size: 13px;
	line-height: 19.5px;
	letter-spacing: -0.08px;
}
.srvd-btn--small.srvd-btn--icon { width: 32px; padding: 0; }
.srvd-btn--small.srvd-btn--secondary { background: transparent; border: 1px solid color-mix(in srgb, var(--pos-text) 40%, transparent); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary { border: 0; }
/* the POS page frames (reprint receipts, tables, checkout) place the 60px button
	 instance: same padding, radius and type, only taller (F2b reconciliation) */
.srvd-btn--lg { height: 60px; }
.srvd-btn__plus, .srvd-btn__icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; }
.srvd-btn__spinner { display: block; width: 24px; height: 24px; color: var(--pos-text); }   /* Figma: a white spinner on the busy surface, not the label colour */
.srvd-btn__spinner--right { position: absolute; left: 103px; top: 12px; }
/* invisible 24px glyph slot (Figma draws these white-on-white; the toast sheet keeps it until F3) */
.srvd-btn__ghost-icon { display: block; width: 24px; height: 24px; }

/* hover - Figma defines a hover only for the secondary type (a 1px white border on a
	 transparent fill); its primary and tertiary hover variants look like their default */
.srvd-btn--secondary:hover:where(:not(:disabled, [aria-busy="true"])), .srvd-btn--secondary.is-hover { background: transparent; border: 1px solid var(--pos-text); }
.srvd-btn--light:hover:where(:not(:disabled, [aria-busy="true"])), .srvd-btn--light.is-hover { background: rgba(255, 255, 255, 0.30); }   /* as the navbar's light button */

/* pressed */
.srvd-btn--primary.is-pressed, .srvd-btn--primary:active { box-shadow: inset 0 -6px 4px rgba(0, 0, 0, 0.30); }
.srvd-btn--icon.srvd-btn--primary.is-pressed, .srvd-btn--icon.srvd-btn--primary:active { box-shadow: inset 0 -4px 6px rgba(0, 0, 0, 0.30); }
.srvd-btn--secondary.is-pressed, .srvd-btn--secondary:active { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-btn--tertiary.is-pressed, .srvd-btn--tertiary:active { background: var(--pos-tile); }
.srvd-btn--icon.srvd-btn--tertiary.is-pressed, .srvd-btn--icon.srvd-btn--tertiary:active { background: transparent; border-color: var(--pos-text); }
.srvd-btn--small.srvd-btn--primary.is-pressed, .srvd-btn--small.srvd-btn--primary:active { box-shadow: inset 0 -6px 4px rgba(0, 0, 0, 0.30); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--primary.is-pressed, .srvd-btn--small.srvd-btn--icon.srvd-btn--primary:active { box-shadow: none; }
.srvd-btn--small.srvd-btn--secondary.is-pressed, .srvd-btn--small.srvd-btn--secondary:active { background: var(--pos-accent); border-color: var(--pos-text); color: var(--pos-on-accent); }
.srvd-btn--small.srvd-btn--tertiary.is-pressed, .srvd-btn--small.srvd-btn--tertiary:active { background: var(--pos-faint); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--secondary.is-pressed, .srvd-btn--small.srvd-btn--icon.srvd-btn--secondary:active { background: transparent; border-color: var(--pos-text); color: var(--pos-text); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary.is-pressed, .srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary:active { background: transparent; }

/* disabled */
.srvd-btn--primary.is-disabled, .srvd-btn--primary:disabled, .srvd-btn--danger:disabled { opacity: 0.4; cursor: default; }
.srvd-btn--secondary.is-disabled, .srvd-btn--secondary:disabled { color: color-mix(in srgb, var(--pos-text) 40%, transparent); cursor: default; }
.srvd-btn--icon.srvd-btn--secondary.is-disabled, .srvd-btn--icon.srvd-btn--secondary:disabled { color: color-mix(in srgb, var(--pos-muted) 40%, transparent); }
.srvd-btn--tertiary.is-disabled, .srvd-btn--tertiary:disabled { color: var(--pos-faint); cursor: default; }
.srvd-btn--small.srvd-btn--primary.is-disabled, .srvd-btn--small.srvd-btn--primary:disabled { opacity: 1; background: var(--pos-tile); color: var(--pos-muted); }
.srvd-btn--small.srvd-btn--secondary.is-disabled, .srvd-btn--small.srvd-btn--secondary:disabled { border-color: var(--pos-faint); color: var(--pos-faint); }

/* loading - aria-busy="true" (with disabled, so it cannot be submitted twice); declared after
	 the disabled rules so the busy look wins over the disabled dimming */
.srvd-btn[aria-busy="true"], .srvd-btn.is-loading { cursor: progress; }
.srvd-btn--primary[aria-busy="true"], .srvd-btn--primary.is-loading { background: var(--pos-faint); opacity: 1; }
.srvd-btn--secondary[aria-busy="true"], .srvd-btn--icon.srvd-btn--secondary[aria-busy="true"], .srvd-btn--secondary.is-loading { color: var(--pos-text); }

/* focused — outer 1px ring 4px outside the button (Figma "focus outline"); the kit ring replaces the
	 browser's own outline (F2b keyboard check: both showed at once) */
.srvd-btn:focus-visible { outline: 0; }
.srvd-btn.is-focused::before, .srvd-btn:focus-visible::before {
	content: "";
	position: absolute;
	inset: -4px;
	border: 1px solid var(--pos-text);
	border-radius: 200px;
	z-index: -1;
}
.srvd-btn--small.is-focused::before, .srvd-btn--small:focus-visible::before { border-radius: 20px; }
.srvd-btn--secondary.is-focused, .srvd-btn--secondary:focus-visible { background: var(--pos-tile); }
.srvd-btn--icon.srvd-btn--secondary.is-focused::before, .srvd-btn--icon.srvd-btn--secondary:focus-visible::before { background: var(--pos-chip); }
.srvd-btn--tertiary.is-focused, .srvd-btn--tertiary:focus-visible { border: 2px solid var(--pos-text); }
.srvd-btn--icon.srvd-btn--tertiary.is-focused, .srvd-btn--icon.srvd-btn--tertiary:focus-visible { border: 0; }
.srvd-btn--small.srvd-btn--secondary.is-focused, .srvd-btn--small.srvd-btn--secondary:focus-visible { background: transparent; border: 2px solid var(--pos-text); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--secondary.is-focused, .srvd-btn--small.srvd-btn--icon.srvd-btn--secondary:focus-visible { border: 2px solid var(--pos-text); }
.srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary.is-focused, .srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary:focus-visible { border: 2px solid var(--pos-text); }
/* the ::before ring is anchored to the PADDING box — variants with a 2px
	 border need a 2px bigger inset to keep the ring 4px outside the button */
.srvd-btn--tertiary.is-focused::before, .srvd-btn--tertiary:focus-visible::before,
.srvd-btn--small.srvd-btn--secondary.is-focused::before, .srvd-btn--small.srvd-btn--secondary:focus-visible::before,
.srvd-btn--small.srvd-btn--tertiary.is-focused::before, .srvd-btn--small.srvd-btn--tertiary:focus-visible::before { inset: -6px; }
.srvd-btn--icon.srvd-btn--tertiary.is-focused::before, .srvd-btn--icon.srvd-btn--tertiary:focus-visible::before { inset: -4px; }
.srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary.is-focused::before, .srvd-btn--small.srvd-btn--icon.srvd-btn--tertiary:focus-visible::before { inset: -6px; }

/* --- Kit input fields (.srvd-field; Figma "Inputs" 960:258; copy-paste markup) --
	 Real elements (fix plan F1): <label class="srvd-field__label" for> + <input |
	 textarea | select class="srvd-field__input"> inside a .srvd-field__box; icons, chips
	 and a reveal button share the box. Traditional style = label above the
	 box. .srvd-field--combined = the label floats inside the box (.srvd-field__body wraps
	 label + input): it sits as one centred 16px line while the field is
	 empty and unfocused, and floats to 13px above the text as soon as the
	 field is focused or holds a value. A combined field always carries a
	 placeholder attribute (Bootstrap's floating-label rule: CSS tells
	 empty from filled via :placeholder-shown); placeholder=" " (one space)
	 means "no visible placeholder" and is the only case that collapses -
	 a real placeholder keeps the label floated (Figma's card form).
	 States, real selector first, sheet twin second (state contract):
	   focus     .srvd-field:focus-within                 .srvd-field.is-focused
	   disabled  .srvd-field:has(.srvd-field__input:disabled)    .srvd-field.is-disabled
	   invalid   .srvd-field:has([aria-invalid="true"])   .srvd-field--error
	   required  .srvd-field:has(.srvd-field__input:required)   (no twin: use `required`)
	 Modifiers: --combined, --dark (solid #19171d box), --sm (44px box: the
	 dropdown search, tag pickers), --r12 / --r16 (12 / 16px radius), --select
	 (set by app.js on a field whose <select> it enhanced into the kit trigger +
	 listbox, F8 sitting 8; see the select rules below).
	 Chips in a multiselect field reuse the kit tag (.srvd-field-tag, Tags sheet). */
.srvd-field { display: flex; flex-direction: column; gap: 4px; }
.srvd-field__label {
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-text);
}
.srvd-field__box {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--pos-chip);
}
.srvd-field__input {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 19.2px;
	color: var(--pos-text);
	resize: none;   /* reboot textarea { resize: vertical } and [type=search] { -webkit-appearance } beat the :where() reset */
	appearance: none;
	-webkit-appearance: none;
}
.srvd-field__input::placeholder { color: var(--pos-muted); }
/* a text input fills the box's height, so the whole box is its hit area, not just the text line in its middle (the
	 enhanced select's trigger does the same below; kit.js forwards a tap on the rest of any box to its control) */
input.srvd-field__input { align-self: stretch; }
select.srvd-field__input { height: 19.2px; cursor: pointer; }
select.srvd-field__input:has(option[value=""]:checked) { color: var(--pos-muted); }
.srvd-field__input option { color: var(--pos-text); background: var(--pos-bg); }
/* the kit select (README, section 2; F8 sitting 8, R-61): the browser's own option list is not the design, so
	 app.js enhances every <select class="srvd-field__input"> in a .srvd-field (opt out with data-meriad-pos-native) into a
	 <button class="srvd-field__input" aria-haspopup aria-expanded aria-controls> trigger showing the chosen option
	 (a .srvd-field__value span, .srvd-field__placeholder while the value is "") + a .srvd-dropdown--popover
	 listbox built from the options and appended to the box, which hangs 4px below it at the field's width
	 (Figma "Select receipt printer - dropdown is active" 29171:23319, the loyalty search 28902:28268); the
	 field carries --select. The <select> keeps the form value: hidden from sm up, it is the control below sm
	 (the platform's own picker on touch), where the trigger and the menu hide instead. While the menu is open
	 the box shows the focus border and the trailing chevron turns. A page may write the trigger + menu by hand
	 on the same rules (RESETS control list). */
button.srvd-field__input { display: flex; align-items: center; align-self: stretch; padding: 0; text-align: left; cursor: pointer; outline: 0; }   /* the trigger takes the box's height: the whole box is the tap target (kit.js forwards a tap beside it) */
.srvd-field__value { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the trigger's focus frame is for the keyboard only (a pop-up that focuses it on opening shows no frame) */
.srvd-field:has(button.srvd-field__input:focus:not(:focus-visible, [aria-expanded="true"])) .srvd-field__box { border: 0; padding: 0 12px; }
.srvd-field:has(button.srvd-field__input[aria-expanded="true"]) .srvd-field__box { border: 1px solid var(--pos-text); padding: 0 11px; }
.srvd-field:has(button.srvd-field__input[aria-expanded="true"]) .srvd-field__icon { transform: rotate(180deg); }
/* the menu is only visible while the trigger is expanded, when the box wears its 1px border: the offsets
	 compensate for it so the menu spans the field's full width 4px below the box */
.srvd-field--select .srvd-field__box > .srvd-dropdown { position: absolute; left: -1px; right: -1px; top: calc(100% + 5px); z-index: 5; }
/* --above (kit.js, a field low on the screen with more room above it): the menu hangs 4px over the box instead */
.srvd-field--select .srvd-field__box > .srvd-dropdown--above { top: auto; bottom: calc(100% + 5px); }
.srvd-field--select select.srvd-field__input { display: none; }
@media (max-width: 575.98px) {
	.srvd-field--select select.srvd-field__input { display: block; }
	.srvd-field--select button.srvd-field__input, .srvd-field--select .srvd-field__box > .srvd-dropdown { display: none; }
}
/* a picker field (F8, tables-menu: the move-table "To table" field, Figma "dropdown" 29372:25047): the box holds
	 an <a class="srvd-field__input" href> that navigates to the page choosing the value; while empty it shows a
	 .srvd-field__placeholder (the muted placeholder text). The box frames on keyboard focus only (as the trigger). */
a.srvd-field__input { display: flex; align-items: center; color: var(--pos-text); text-decoration: none; cursor: pointer; outline: 0; }
a.srvd-field__input:hover { color: var(--pos-text); }
.srvd-field__placeholder { color: var(--pos-muted); }
.srvd-field:has(a.srvd-field__input:focus:not(:focus-visible)) .srvd-field__box { border: 0; padding: 0 12px; }
.srvd-field__icon { display: block; width: 24px; height: 24px; flex: 0 0 auto; }
.srvd-field__reveal {
	display: flex;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	padding: 0;
	color: var(--pos-text);
}
.srvd-field__reveal svg { display: block; width: 24px; height: 24px; }
.srvd-field__reveal:hover { color: var(--pos-muted); }
.srvd-field__reveal:focus-visible, .srvd-field-tag__close:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-field__chips { display: flex; flex: 0 0 auto; gap: 4px; margin: 0; padding: 0; list-style: none; }   /* reboot ul beats the :where() list reset */
.srvd-field__help, .srvd-field__error {
	margin: 0;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-field__help { color: #93989c; }
.srvd-field__error { color: var(--pos-danger); }
/* required mark: the red asterisk sits in the box's top-right corner */
.srvd-field:has(.srvd-field__input:required) .srvd-field__box::after {
	content: "*";
	position: absolute;
	left: calc(100% - 15px);
	top: 1px;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -0.32px;
	color: #e71d32;
}
.srvd-field--dark .srvd-field__box { background: var(--pos-bg); }
.srvd-field--sm .srvd-field__box { height: 44px; }
.srvd-field--r12 .srvd-field__box { border-radius: 12px; }
.srvd-field--r16 .srvd-field__box { border-radius: 16px; }
/* bordered states keep the same VISUAL 12px inset: the CSS border eats 1px
	 of padding (Figma inside-strokes never displace content) */
.srvd-field:focus-within .srvd-field__box, .srvd-field.is-focused .srvd-field__box { border: 1px solid var(--pos-text); padding: 0 11px; }
.srvd-field:has(.srvd-field__input[aria-invalid="true"]) .srvd-field__box, .srvd-field--error .srvd-field__box { background: var(--pos-bg); border: 1px solid var(--pos-danger); padding: 0 11px; }
.srvd-field:has(.srvd-field__input:disabled) .srvd-field__box, .srvd-field.is-disabled .srvd-field__box { background: var(--pos-tile); }
.srvd-field:has(.srvd-field__input:disabled) .srvd-field__label, .srvd-field.is-disabled .srvd-field__label { color: var(--pos-faint); }
.srvd-field__input:disabled, .srvd-field.is-disabled .srvd-field__input { color: var(--pos-faint); -webkit-text-fill-color: var(--pos-faint); opacity: 1; }
.srvd-field__input:disabled::placeholder, .srvd-field.is-disabled .srvd-field__input::placeholder { color: var(--pos-faint); -webkit-text-fill-color: var(--pos-faint); }
/* combined style: 56px box, label (16px row) over the text (28px row) */
.srvd-field--combined .srvd-field__box { height: 56px; padding: 6px 12px; gap: 8px; }
.srvd-field--combined:focus-within .srvd-field__box, .srvd-field--combined.is-focused .srvd-field__box { padding: 5px 11px; }
.srvd-field--combined:has(.srvd-field__input[aria-invalid="true"]) .srvd-field__box, .srvd-field--combined.srvd-field--error .srvd-field__box { background: var(--pos-chip); border-color: #e71d32; padding: 5px 11px; }
.srvd-field--combined:has(.srvd-field__input:disabled) .srvd-field__box, .srvd-field--combined.is-disabled .srvd-field__box { background: var(--pos-card); }
.srvd-field__body {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	min-width: 0;
	height: 44px;
}
.srvd-field__body .srvd-field__label { line-height: 16px; }
.srvd-field__body .srvd-field__input { flex: 0 0 auto; height: 19.2px; margin: 4.4px 0; }   /* = the 28px text row, no inner-editor snapping */
.srvd-field--combined:where(:has(.srvd-field__input[placeholder=" "]:placeholder-shown):not(:focus-within, .is-focused)) .srvd-field__label {
	position: absolute;
	top: calc(50% - 9.6px);
	font-size: 16px;
	line-height: 19.2px;
	letter-spacing: 0;
	color: var(--pos-muted);
}
/* --pill (F8, checkout): the POS pages' 56px pill field - Figma "Input" 1117:799 as the payment area
	 28813:20261 and the pop-ups place it: r200 box on the chip fill, pad 20, gap 8, 17px text, a 16px
	 muted label 12px above the box (Figma "subtitle"), a muted 16px placeholder (also on a select whose
	 empty option is chosen), a trailing 24px chevron 20px from the edge or a leading 24px glyph 12px in
	 (the search field 28902:28268: the text starts at 44). The focus border keeps the 20px inset
	 (declared after the family's focus / error rules, which it outranks by position). */
.srvd-field--pill { gap: 12px; }
.srvd-field--pill .srvd-field__label { font-size: 16px; line-height: 19.2px; letter-spacing: 0; color: var(--pos-muted); }
.srvd-field--pill .srvd-field__box { height: 56px; padding: 0 20px; gap: 8px; border-radius: 200px; }
.srvd-field--pill .srvd-field__input { font-size: 17px; line-height: 19.55px; }
.srvd-field--pill select.srvd-field__input { height: 19.55px; }
.srvd-field--pill .srvd-field__input::placeholder, .srvd-field--pill select.srvd-field__input:has(option[value=""]:checked) { font-size: 16px; }
.srvd-field--pill .srvd-field__icon:first-child { margin-left: -8px; }
.srvd-field--pill:focus-within .srvd-field__box, .srvd-field--pill.is-focused .srvd-field__box { padding: 0 19px; }
.srvd-field--pill:has(.srvd-field__input[aria-invalid="true"]) .srvd-field__box, .srvd-field--pill.srvd-field--error .srvd-field__box { padding: 0 19px; }
.srvd-field--pill:has(button.srvd-field__input[aria-expanded="true"]) .srvd-field__box { padding: 0 19px; }
.srvd-field--pill:has(button.srvd-field__input:focus:not(:focus-visible, [aria-expanded="true"])) .srvd-field__box { padding: 0 20px; }
.srvd-field--pill:has(a.srvd-field__input:focus:not(:focus-visible)) .srvd-field__box { padding: 0 20px; }
.srvd-field--pill .srvd-field__placeholder { font-size: 16px; line-height: 19.2px; }
/* kit tag with close button (Tags sheet "Tag (base)"; also the chips of a
	 multiselect .srvd-field field) */
.srvd-field-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 32px;
	padding: 0 4px 0 12px;
	background: var(--pos-accent);
	border-radius: 8px;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-on-accent);
	white-space: nowrap;
}
.srvd-field-tag__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 0;
	padding: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--pos-on-accent) 10%, transparent);
	color: var(--pos-on-accent);
	cursor: pointer;
}
.srvd-field-tag__close:hover:where(:not(:disabled)) { background: color-mix(in srgb, var(--pos-on-accent) 18%, transparent); }
.srvd-field-tag__close:active:where(:not(:disabled)) { background: color-mix(in srgb, var(--pos-on-accent) 28%, transparent); }
.srvd-field-tag__close:disabled { opacity: 0.4; cursor: default; }
.srvd-field-tag--proto { padding: 0 12px; gap: 8px; background: var(--pos-warning); }

/* Inputs sheet extras: dim row labels + its larger properties type ramp.
	 These texts are SF Pro Display in Figma (third-party kit); Inter is the
	 closest freely embeddable match, with SF preferred where installed. */
@font-face {
	font-family: "Inter Tight";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-tight-400.woff2") format("woff2");
}
@font-face {
	font-family: "Inter Tight";
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/inter-tight-700.woff2") format("woff2");
}
/* Android-native faces for the Android sharing dialog (Figma uses Roboto /
	 Roboto Condensed there; Windows ships neither) */
@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F;
	src: url("../fonts/roboto-400-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	src: url("../fonts/roboto-400-cyrillic.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Condensed";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F;
	src: url("../fonts/roboto-condensed-400-latin.woff2") format("woff2");
}
@font-face {
	font-family: "Roboto Condensed";
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	src: url("../fonts/roboto-condensed-400-cyrillic.woff2") format("woff2");
}
.srvd-docs-prop-name { margin: 0; font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif; font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -0.41px; color: var(--pos-text); }
.srvd-docs-prop-desc { margin: 0; font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif; font-size: 16px; line-height: 24px; font-weight: 400; color: var(--pos-text); }
.srvd-docs-prop-value { margin: 0; font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif; font-size: 17px; line-height: 22px; font-weight: 400; color: var(--pos-text); }

/* --- Kit pagination (Figma "pagination segment" / "pagination") --------- */
.srvd-pagination {
	display: flex;
	align-items: stretch;
	box-sizing: border-box;
	height: 56px;
	border: 1px solid var(--pos-faint);
	border-radius: 16px;
	overflow: hidden;
	background: transparent;
}
.srvd-pagination-segment {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	padding: 0;
	background: transparent;
	border: 0;
	border-right: 1px solid var(--pos-faint);   /* Figma segments carry a right-only divider */
	font-family: "General Sans", system-ui, -apple-system, sans-serif;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
	color: var(--pos-text);
	white-space: nowrap;
	cursor: pointer;
}
.srvd-pagination .srvd-pagination-segment { height: auto; }
.srvd-pagination .srvd-pagination-segment:last-child { border-right: 0; }  /* would double the bar's own border */
.srvd-pagination-segment--prev, .srvd-pagination-segment--next { justify-content: flex-start; padding-left: 31px; }
.srvd-pagination-segment--prev { border-right: 0; }            /* the kit's Previous cell has no divider */
.srvd-pagination-segment:hover:where(:not([aria-current="page"], :disabled)), .srvd-pagination-segment.is-hover { background: var(--pos-card); }
.srvd-pagination-segment:active:where(:not([aria-current="page"], :disabled)), .srvd-pagination-segment.is-pressed { background: var(--pos-chip); }
/* the kit paints the active label white-on-white (invisible) - kept faithful; aria-current="page"
	 marks the current page (F7), .is-active is the sheet twin */
.srvd-pagination-segment[aria-current="page"], .srvd-pagination-segment.is-active { background: var(--pos-accent); color: var(--pos-accent); font-weight: 700; letter-spacing: -0.16px; }
.srvd-pagination-segment:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -4px; border-radius: 12px; }
.srvd-pagination-segment:disabled, .srvd-pagination-segment.is-disabled { color: var(--pos-faint); cursor: default; }
/* the gap cell ("...") is a <span aria-hidden>: no hover, no pointer, no Tab stop */
.srvd-pagination-segment--gap { cursor: default; }
.srvd-pagination-segment__icon { display: block; flex: 0 0 auto; width: 24px; height: 24px; }

/* --- Kit checkboxes / radios / switches (Figma "Checkbox", "Radio Button",
	 "Switch") — real hidden inputs drive the states, so the classes are
	 usable as live form controls outside the sheet ------------------------ */
.srvd-checkbox, .srvd-radio, .srvd-switch { position: relative; display: inline-block; cursor: pointer; }
.srvd-checkbox input, .srvd-radio input, .srvd-switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: inherit;
}
.srvd-checkbox__box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	border-radius: 50%;              /* the kit's checkboxes are circular */
	background: var(--pos-bg);
	border: 1px solid var(--pos-muted);
}
.srvd-checkbox--lg .srvd-checkbox__box { width: 32px; height: 32px; }
.srvd-checkbox__check { display: block; width: 16px; height: 16px; }
.srvd-checkbox--lg .srvd-checkbox__check { width: 24px; height: 24px; }
.srvd-checkbox__check path { stroke: var(--pos-on-accent); }
.srvd-checkbox input:not(:checked) + .srvd-checkbox__box .srvd-checkbox__check { visibility: hidden; }
.srvd-checkbox input:checked + .srvd-checkbox__box { background: var(--pos-accent); border: 0; }
.srvd-checkbox input:disabled + .srvd-checkbox__box { background: var(--pos-card); border: 1px solid var(--pos-faint); }
.srvd-checkbox input:disabled + .srvd-checkbox__box .srvd-checkbox__check path { stroke: var(--pos-muted); }
.srvd-checkbox.is-focused .srvd-checkbox__box::after, .srvd-checkbox input:focus-visible + .srvd-checkbox__box::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 1px solid var(--pos-text);
	border-radius: 8px;
}
.srvd-checkbox--lg.is-focused .srvd-checkbox__box::after, .srvd-checkbox--lg input:focus-visible + .srvd-checkbox__box::after { border-radius: 12px; }
.srvd-radio__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--pos-bg);
	border: 1px solid var(--pos-muted);
}
.srvd-radio--lg .srvd-radio__circle {
	width: 32px;
	height: 32px;
	background: color-mix(in srgb, var(--pos-text) 10%, transparent);
	border-color: var(--pos-chip);
}
.srvd-radio__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pos-on-accent); visibility: hidden; }
.srvd-radio--lg .srvd-radio__dot { width: 12px; height: 12px; }
.srvd-radio input:checked + .srvd-radio__circle { background: var(--pos-accent); border: 0; }
.srvd-radio input:checked + .srvd-radio__circle .srvd-radio__dot { visibility: visible; }
.srvd-radio input:disabled + .srvd-radio__circle { background: var(--pos-card); border: 1px solid var(--pos-faint); }
.srvd-radio--lg input:disabled + .srvd-radio__circle { background: color-mix(in srgb, var(--pos-text) 4%, transparent); }
.srvd-radio--lg input:checked:disabled + .srvd-radio__circle { background: color-mix(in srgb, var(--pos-text) 10%, transparent); }
.srvd-radio input:checked:disabled + .srvd-radio__circle .srvd-radio__dot { background: color-mix(in srgb, var(--pos-text) 48%, transparent); }
.srvd-radio input:focus-visible + .srvd-radio__circle::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 1px solid var(--pos-text);
	border-radius: 50%;
}
.srvd-switch__track {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 32px;
	height: 20px;
	border-radius: 128px;
	background: var(--pos-muted);
}
.srvd-switch--lg .srvd-switch__track { width: 44px; height: 28px; }
.srvd-switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--pos-on-accent); }
.srvd-switch--lg .srvd-switch__knob { width: 24px; height: 24px; }
.srvd-switch input:checked + .srvd-switch__track { background: var(--pos-accent); }
.srvd-switch input:checked + .srvd-switch__track .srvd-switch__knob { left: auto; right: 2px; }
.srvd-switch input:disabled + .srvd-switch__track { background: var(--pos-faint); }
.srvd-switch input:checked:disabled + .srvd-switch__track { background: color-mix(in srgb, var(--pos-text) 40%, transparent); }
/* the kit dims the WHOLE large disabled-on switch, the small one only its track */
.srvd-switch--lg input:checked:disabled + .srvd-switch__track { opacity: 0.38; }
/* hover (F7; Figma draws none): the unchecked ring / track lightens, the checked surface takes
	 the hover accent; a disabled control keeps the default pointer */
.srvd-checkbox:hover input:not(:disabled, :checked) + .srvd-checkbox__box, .srvd-radio:hover input:not(:disabled, :checked) + .srvd-radio__circle { border-color: var(--pos-text); }
.srvd-checkbox:hover input:checked:not(:disabled) + .srvd-checkbox__box, .srvd-radio:hover input:checked:not(:disabled) + .srvd-radio__circle, .srvd-switch:hover input:checked:not(:disabled) + .srvd-switch__track { background: var(--pos-accent-hover); }
.srvd-switch:hover input:not(:disabled, :checked) + .srvd-switch__track { background: color-mix(in srgb, var(--pos-muted) 70%, var(--pos-text)); }
.srvd-checkbox:has(input:disabled), .srvd-radio:has(input:disabled), .srvd-switch:has(input:disabled) { cursor: default; }
/* switch focus frame (F7): the checkbox frame, 4px around the track, as a pill */
.srvd-switch.is-focused .srvd-switch__track::after, .srvd-switch input:focus-visible + .srvd-switch__track::after {
	content: "";
	position: absolute;
	inset: -4px;
	border: 1px solid var(--pos-text);
	border-radius: 128px;
}

.srvd-checkbox--withlabel, .srvd-radio--withlabel { display: inline-flex; align-items: center; gap: 12px; }
.srvd-checkbox__label, .srvd-radio__label { font-size: 16px; line-height: 19.2px; color: var(--pos-text); }

/* --- Kit avatars (Figma "avatar" / "avatar group") ---------------------- */
.srvd-avatar { position: relative; display: inline-block; width: 64px; height: 64px; }
.srvd-avatar--lg { width: 128px; height: 128px; }
.srvd-avatar--sm { width: 36px; height: 36px; }
.srvd-avatar--xs { width: 24px; height: 24px; }
.srvd-avatar__img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.srvd-avatar--rect .srvd-avatar__img { border-radius: 16px; }
.srvd-avatar--rect.srvd-avatar--lg .srvd-avatar__img { border-radius: 24px; }
.srvd-avatar--rect.srvd-avatar--sm .srvd-avatar__img, .srvd-avatar--rect.srvd-avatar--xs .srvd-avatar__img { border-radius: 6px; }
.srvd-avatar__ph {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: var(--pos-card);
	color: var(--pos-muted);
	font-weight: 700;
	font-size: 28px;
	line-height: 33.6px;
	letter-spacing: 0.41px;
}
.srvd-avatar--rect .srvd-avatar__ph { border-radius: 16px; }
.srvd-avatar--lg .srvd-avatar__ph { font-size: 48px; line-height: 55.2px; letter-spacing: 0.58px; }
.srvd-avatar--sm .srvd-avatar__ph { font-size: 13px; line-height: 20.1px; letter-spacing: 0; }
.srvd-avatar--xs .srvd-avatar__ph { font-size: 11px; line-height: 17px; letter-spacing: 0; }
.srvd-avatar__ph svg { display: block; width: 48px; height: 48px; }
.srvd-avatar--more .srvd-avatar__ph { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-avatar__dot {
	position: absolute;
	right: 0;
	bottom: 0;
	box-sizing: content-box;
	width: 8px;
	height: 8px;
	border: 4px solid var(--pos-bg);
	border-radius: 50%;
	background: var(--pos-success);
}
.srvd-avatar--story::before {
	content: "";
	position: absolute;
	inset: -5px;
	border: 2px solid var(--pos-secondary);
	border-radius: 50%;
}
.srvd-avatar__badge {
	position: absolute;
	top: -4px;
	right: -4px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 20px;
	background: var(--pos-danger);
	color: var(--pos-on-light);
	font-weight: 700;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.06px;
}
.srvd-avatar-group { display: flex; margin: 0; padding: 0; list-style: none; }   /* a <ul> of <li class="srvd-avatar"> (F7); reboot's ul padding / margin re-declared */
.srvd-avatar-group .srvd-avatar { margin-left: -20px; }   /* 64px avatars advance 44px */
.srvd-avatar-group--sm .srvd-avatar { margin-left: -12px; }
.srvd-avatar-group--xs .srvd-avatar { margin-left: -8px; }
.srvd-avatar-group .srvd-avatar:first-child { margin-left: 0; }

/* small white tag chip next to dark-sheet headings (Figma "Tag") */
.srvd-tag {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	height: 32px;
	padding: 0 12px;
	border-radius: 8px;
	background: var(--pos-accent);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-on-accent);
	white-space: nowrap;
}

/* --- Kit sliders (Figma "Sliders" 10274:11520) --------------------------
	 <input type="range" class="srvd-slider__input"> inside .srvd-slider (F3): the browser owns
	 the value, the drag and the keyboard (arrows, Home/End, PgUp/PgDn); the
	 24px thumb IS the knob (accent disc, 8px dot as a radial gradient, 12px
	 while :active - sheet twin .is-dragged). The fill and the optional value
	 tip (<output class="srvd-tooltip srvd-slider__tip" for>) sit on the custom properties
	 app.js writes from the value: --val (0..1, the last moved thumb), --lo /
	 --hi for .srvd-slider--range (two overlaid inputs; only the thumbs take the
	 pointer and the focused input is on top, so thumbs never trap each
	 other). Colours are Layer 1 tokens. ------------------------------------- */
.srvd-slider { position: relative; height: 24px; --val: 0; --lo: 0; --hi: 1; }
.srvd-slider__track, .srvd-slider__fill {
	position: absolute;
	top: 10.5px;                       /* 3px line centred on the 24px thumb row */
	height: 3px;
	border-radius: 1.5px;
	pointer-events: none;
}
.srvd-slider__track { left: 0; right: 0; background: var(--pos-faint); }
.srvd-slider__fill { left: 0; width: calc(var(--val) * (100% - 24px) + 12px); background: var(--pos-accent); }
.srvd-slider--range .srvd-slider__fill { left: calc(var(--lo) * (100% - 24px) + 12px); width: auto; right: calc((1 - var(--hi)) * (100% - 24px) + 12px); }
.srvd-slider__input {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 24px;
	cursor: grab;
}
.srvd-slider__input::-webkit-slider-runnable-track { height: 24px; }
.srvd-slider__input::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--pos-on-accent) 4px, var(--pos-accent) 4.5px);
	cursor: grab;
}
.srvd-slider__input::-moz-range-track { height: 24px; }
.srvd-slider__input::-moz-range-thumb {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--pos-on-accent) 4px, var(--pos-accent) 4.5px);
	cursor: grab;
}
/* dragged: the dot grows to 12px */
.srvd-slider__input:active::-webkit-slider-thumb, .srvd-slider__input.is-dragged::-webkit-slider-thumb { background: radial-gradient(circle, var(--pos-on-accent) 6px, var(--pos-accent) 6.5px); cursor: grabbing; }
.srvd-slider__input:active::-moz-range-thumb, .srvd-slider__input.is-dragged::-moz-range-thumb { background: radial-gradient(circle, var(--pos-on-accent) 6px, var(--pos-accent) 6.5px); cursor: grabbing; }
/* focused (keyboard): the kit ring around the thumb only */
.srvd-slider__input:focus-visible::-webkit-slider-thumb { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-slider__input:focus-visible::-moz-range-thumb { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* disabled */
.srvd-slider:has(.srvd-slider__input:disabled), .srvd-slider.is-disabled { opacity: 0.4; }
.srvd-slider__input:disabled, .srvd-slider__input:disabled::-webkit-slider-thumb { cursor: default; }
.srvd-slider__input:disabled::-moz-range-thumb { cursor: default; }
/* range: two inputs share the box */
.srvd-slider--range .srvd-slider__input { pointer-events: none; }
.srvd-slider--range .srvd-slider__input::-webkit-slider-thumb { pointer-events: auto; }
.srvd-slider--range .srvd-slider__input::-moz-range-thumb { pointer-events: auto; }
.srvd-slider--range .srvd-slider__input:focus { z-index: 1; }
/* value tip: the shared .srvd-tooltip, centred over the thumb */
.srvd-slider__tip { position: absolute; top: -45px; left: calc(var(--val) * (100% - 24px) + 12px); transform: translateX(-50%); pointer-events: none; }

/* --- Kit tooltip (Figma "tooltip" set; also the Sliders sheet value tip) -
	 the notch is a 14px diamond in the same white, so the union casts ONE
	 shadow via filter (box-shadow would double up on the overlap) ---------- */
.srvd-tooltip {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 32px;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	white-space: nowrap;
	filter: drop-shadow(0 10px 20px var(--pos-shadow));
}
.srvd-tooltip__notch {
	position: absolute;
	width: 14px;
	height: 14px;
	background: var(--pos-accent);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.srvd-tooltip--notch-br .srvd-tooltip__notch, .srvd-tooltip--notch-bc .srvd-tooltip__notch, .srvd-tooltip--notch-bl .srvd-tooltip__notch { bottom: -6px; }
.srvd-tooltip--notch-tr .srvd-tooltip__notch, .srvd-tooltip--notch-tc .srvd-tooltip__notch, .srvd-tooltip--notch-tl .srvd-tooltip__notch { top: -7px; }
.srvd-tooltip--notch-bc .srvd-tooltip__notch, .srvd-tooltip--notch-tc .srvd-tooltip__notch { left: calc(50% - 7px); }
.srvd-tooltip--notch-br .srvd-tooltip__notch { left: 49px; }
.srvd-tooltip--notch-tr .srvd-tooltip__notch { left: 48px; }
.srvd-tooltip--notch-bl .srvd-tooltip__notch, .srvd-tooltip--notch-tl .srvd-tooltip__notch { left: 10px; }
.srvd-tooltip--notch-r .srvd-tooltip__notch { right: -6px; top: 9px; }
.srvd-tooltip--notch-l .srvd-tooltip__notch { left: -6px; top: 9px; }
.srvd-tooltip__emoji { width: 17px; height: 18px; margin-right: 5px; }

/* --- Kit segmented control (Figma "Tabs and Carousels" 18158:8212) -------
	 <button role="tab"> items in a [role="tablist"] bar: the selected item is
	 aria-selected="true" (sheet twin .is-active); hover, focus and disabled
	 are real (F3). Bootstrap's Tab plugin writes the same attribute (interop
	 block); a tap or Left/Right arrow selects (app.js). Layer 1 tokens. ------ */
.srvd-segmented {
	display: inline-flex;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 200px;
	background: var(--pos-tile);
}
.srvd-segmented .srvd-segmented__item { flex: 1 1 0; }
/* --icon (F8, tables): the list / scheme view toggle - Figma "buttons" 92x48 in the tables header
	 28781:19100: two 40px icon-only Button instances, gap 4, on the 48px pill; the selected one carries
	 no shadow */
.srvd-segmented--icon { gap: 4px; }
.srvd-segmented--icon .srvd-segmented__item { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; }
.srvd-segmented--icon .srvd-segmented__item[aria-selected="true"], .srvd-segmented--icon .srvd-segmented__item.is-active { box-shadow: none; }
.srvd-segmented--icon .srvd-segmented__item svg { display: block; }
.srvd-segmented__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 51px;
	padding: 16px;
	border: 0;
	border-radius: 200px;
	background: transparent;
	font-family: var(--pos-font);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
	color: var(--pos-text);
	white-space: nowrap;
	cursor: pointer;
}
.srvd-segmented__item:hover:where(:not([aria-selected="true"], :disabled)), .srvd-segmented__item.is-hover { background: var(--pos-card); }
.srvd-segmented__item[aria-selected="true"], .srvd-segmented__item.is-active {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	font-weight: 500;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}
.srvd-segmented__item:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-segmented__item:disabled, .srvd-segmented__item.is-disabled { opacity: 0.4; cursor: default; }

/* --- Kit tab chip: in a [role="tablist"] aria-selected="true" marks the open
	 tab, standalone (a filter chip) aria-pressed="true"; twin .is-active ------ */
.srvd-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;           /* a chip stretched by its row keeps its label centred (F8, checkout) */
	box-sizing: border-box;
	height: 48px;
	padding: 8px 20px;
	border: 0;
	border-radius: 30px;
	background: var(--pos-chip);
	font-family: var(--pos-font);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
	color: var(--pos-text);
	white-space: nowrap;
	cursor: pointer;
}
.srvd-tab:hover:where(:not([aria-selected="true"], [aria-pressed="true"], :disabled)), .srvd-tab.is-hover { background: var(--pos-chip-hover); }
.srvd-tab[aria-selected="true"], .srvd-tab[aria-pressed="true"], .srvd-tab.is-active { background: var(--pos-accent); color: var(--pos-on-accent); font-weight: 500; }
.srvd-tab:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-tab:disabled, .srvd-tab.is-disabled { opacity: 0.4; cursor: default; }
/* --lg (F8, checkout): the cash preset chips of Figma's "payment area" 28813:20261 and the reward
	 chips of the loyalty pop-up 28902:13993 carry a 17px text override on the default variant; the
	 selected variant keeps the chip's 16px medium text */
.srvd-tab--lg { font-size: 17px; line-height: 19.55px; }
.srvd-tab--lg[aria-selected="true"], .srvd-tab--lg[aria-pressed="true"], .srvd-tab--lg.is-active { font-size: 16px; line-height: 19.2px; }

/* --- Kit carousel dots: <button role="tab"> per slide in a [role="tablist"]
	 row, aria-selected="true" = the current slide (twin .is-active) ---------- */
.srvd-carousel-dots { display: inline-flex; align-items: center; gap: 8px; }
.srvd-carousel-dot {
	display: block;
	box-sizing: border-box;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}
.srvd-carousel-dot::after { content: ""; display: block; width: 6px; height: 6px; margin: 1px; border-radius: 50%; background: var(--pos-faint); }
.srvd-carousel-dot:hover:where(:not([aria-selected="true"], :disabled))::after, .srvd-carousel-dot.is-hover::after { background: var(--pos-muted); }
.srvd-carousel-dot[aria-selected="true"]::after, .srvd-carousel-dot.is-active::after { width: 8px; height: 8px; margin: 0; background: var(--pos-accent); }
.srvd-carousel-dot:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 3px; }
.srvd-carousel-dot:disabled, .srvd-carousel-dot.is-disabled { opacity: 0.4; cursor: default; }

/* --- Kit stories/steps pagination: every segment is role="progressbar"
	 (aria-valuenow 0..100). Base = not seen; the current story carries
	 aria-current="step" and shows its progress as --val (0..1, at least the
	 4px sliver Figma draws); aria-valuenow="100" = complete (Figma's
	 "current - complete" is the same accent bar). Twins --started / --seen. -- */
.srvd-stories { display: inline-flex; gap: 4px; }
.srvd-stories .srvd-story { flex: 1 1 0; }
.srvd-story { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--pos-faint); --val: 0; }
.srvd-story[aria-current="step"]::after, .srvd-story--started::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: max(4px, calc(var(--val) * 100%));
	height: 4px;
	border-radius: 2px;
	background: var(--pos-accent);
}
.srvd-story[aria-valuenow="100"], .srvd-story--seen { background: var(--pos-accent); }

/* --- Kit badge (Figma "badge" cset 9639:8223) ---------------------------
	 the same 24px counter .srvd-avatar__badge pins to avatars, as a standalone
	 element */
.srvd-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 20px;
	background: var(--pos-danger);
	color: var(--pos-on-light);
	font-weight: 700;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.065px;
}

/* --- Kit tags (Figma "Tag (base)" 2266:1291 + "Tag" colours 22700:12827) -
	 .srvd-tag = Type=Simple; the with-close variant IS the existing .srvd-field-tag
	 (same kit component, already used by the multiselect inputs). ---------- */
.srvd-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 32px;
	padding: 0 12px;
	background: var(--pos-accent);
	border-radius: 8px;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-on-accent);
	white-space: nowrap;
}
/* colour variants (Figma "Tag" colours): fixed status colours with the dark glyph colour in both
	 themes; --disabled is a colour variant of the set, not a state twin */
.srvd-tag--secondary { background: var(--pos-secondary); color: var(--pos-on-light); }
.srvd-tag--danger { background: var(--pos-danger); color: var(--pos-on-light); }
.srvd-tag--success { background: var(--pos-success); color: var(--pos-on-light); }
.srvd-tag--warning { background: var(--pos-warning); color: var(--pos-on-light); }
.srvd-tag--disabled { background: var(--pos-faint); color: var(--pos-on-light); }
.srvd-tag--neutral { background: var(--pos-tile); color: var(--pos-text); }
/* course tags: one fixed colour per course, shared by the workorders cards (filled) and the pos
	 order list (outline); the colour lives in --srvd-tag-color so --outline can reuse it */
.srvd-tag--course-starter { --srvd-tag-color: var(--pos-course-starter); }
.srvd-tag--course-main { --srvd-tag-color: var(--pos-course-main); }
.srvd-tag--course-dessert { --srvd-tag-color: var(--pos-course-dessert); }
.srvd-tag--course-starter, .srvd-tag--course-main, .srvd-tag--course-dessert { background: var(--srvd-tag-color); color: var(--pos-on-light); }
/* --outline: the tag as a 1px ring in its colour with the colour as text on a transparent ground;
	 without a colour variant it takes the text colour */
.srvd-tag--outline { background: transparent; border: 1px solid var(--srvd-tag-color, var(--pos-text)); color: var(--srvd-tag-color, var(--pos-text)); }
/* --small : the 24px tag that sits in a line of text (the Retour / Gratis
	 flags in a line name of the order screen) */
.srvd-tag--small { height: 24px; padding: 0 8px; border-radius: 6px; }

/* --- Kit media uploader (Figma "upload" 4365:4407 + "image uploader"
	 4366:4526) -------------------------------------------------------------
	 A drop zone (.srvd-uploader-drop, --sm) and an upload tile (.srvd-uploader-tile) are <label>s
	 around a visually hidden <input type="file" class="srvd-uploader__file"> (RESETS),
	 so a tap or Enter / Space opens the picker and the label carries :hover /
	 :focus-within; --dragover is the modifier page JS sets while a drag hovers
	 (app.js drops the files into the input). The uploading tile is aria-busy
	 with a role="progressbar" bar (the bar width = the value), an uploaded
	 --image tile always holds its mask and remove button, shown on hover /
	 focus-within (or the --error content variant, whose mask is a status).
	 1px dashed borders use the browser dash pattern (Figma's ~5/6 is close).
	 Colours: Layer 1 tokens; the drop zone's #c4c9ce dashed border is Figma-literal
	 (a light grey that reads on both themes, like the field's help text), the mask
	 over an uploaded image is --pos-photo-mask (F8 sitting 10). ----------------- */
.srvd-uploader-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	box-sizing: border-box;
	border: 1px dashed #c4c9ce;
	border-radius: 12px;
	color: var(--pos-text);
	font-size: 16px;
	line-height: 19.2px;
	cursor: pointer;
}
.srvd-uploader-drop--sm {
	gap: 8px;
	border-radius: 16px;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-uploader-drop__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--pos-text) 20%, transparent);
}
.srvd-uploader-drop__icon svg { display: block; width: 48px; height: 48px; }
.srvd-uploader-drop--sm .srvd-uploader-drop__icon { width: 64px; height: 64px; }
.srvd-uploader-drop--sm .srvd-uploader-drop__icon svg { width: 24px; height: 24px; }
.srvd-uploader-drop__text { display: block; }
/* states (Figma draws only the tile's hover): the tile look on hover / drag-over, the kit ring on
	 keyboard focus (the picker opened by a tap focuses the input too, so :focus-within is not used) */
.srvd-uploader-drop:hover:where(:not(:has(input:disabled))), .srvd-uploader-drop.is-hover, .srvd-uploader-drop--dragover { border-color: var(--pos-text); background: var(--pos-card); }
.srvd-uploader-drop:has(input:focus-visible), .srvd-uploader-drop.is-focused { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-uploader-drop:has(input:disabled), .srvd-uploader-drop.is-disabled { opacity: 0.4; cursor: default; }
.srvd-uploader-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 176px;
	height: 176px;
	border: 1px dashed var(--pos-faint);
	border-radius: 16px;
	background: var(--pos-card);
	color: var(--pos-muted);
}
.srvd-uploader-tile > svg { display: block; width: 48px; height: 48px; }
label.srvd-uploader-tile { cursor: pointer; }
label.srvd-uploader-tile:hover:where(:not(:has(input:disabled))), label.srvd-uploader-tile:has(input:focus-visible), .srvd-uploader-tile.is-hover:where(:not(.srvd-uploader-tile--image)), .srvd-uploader-tile--dragover {
	border-color: var(--pos-text);
	background: color-mix(in srgb, var(--pos-text) 20%, transparent);
	color: var(--pos-text);
}
label.srvd-uploader-tile:has(input:focus-visible), .srvd-uploader-tile.is-focused { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
label.srvd-uploader-tile:has(input:disabled), .srvd-uploader-tile.is-disabled { opacity: 0.4; cursor: default; }
.srvd-uploader-tile--uploading {
	gap: 8px;
	padding: 24px;
	color: var(--pos-text);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-uploader-progress { box-sizing: border-box; width: 128px; padding: 8px 0; }
.srvd-uploader-progress__track { height: 4px; border-radius: 4px; background: var(--pos-faint); overflow: hidden; }
.srvd-uploader-progress__bar { height: 4px; background: var(--pos-accent); }
/* the CSS border eats 1px of padding (Figma inside-strokes don't displace
	 content): pad 15 + border 1 = the visual 16px inset; the mask insets 15
	 from the PADDING edge = 16 from the border box, exactly over the img */
.srvd-uploader-tile--image {
	border-style: solid;
	background: var(--pos-bg);
	padding: 15px;
	color: var(--pos-text);
}
.srvd-uploader-tile__img { display: block; width: 144px; height: 144px; border-radius: 4px; object-fit: cover; }
.srvd-uploader-tile__mask {
	position: absolute;
	inset: 15px;
	border-radius: 4px;
	background: var(--pos-photo-mask);
}
/* the mask and the remove button are in the markup of every --image tile: invisible (but the
	 button stays focusable) until the pointer or the focus is on the tile; an --error tile shows them */
.srvd-uploader-tile--image .srvd-uploader-tile__mask, .srvd-uploader-tile--image .srvd-uploader-tile__close { opacity: 0; }
.srvd-uploader-tile--image:hover .srvd-uploader-tile__mask, .srvd-uploader-tile--image:focus-within .srvd-uploader-tile__mask, .srvd-uploader-tile--image.is-hover .srvd-uploader-tile__mask, .srvd-uploader-tile--error .srvd-uploader-tile__mask,
.srvd-uploader-tile--image:hover .srvd-uploader-tile__close, .srvd-uploader-tile--image:focus-within .srvd-uploader-tile__close, .srvd-uploader-tile--image.is-hover .srvd-uploader-tile__close, .srvd-uploader-tile--error .srvd-uploader-tile__close { opacity: 1; }
.srvd-uploader-tile__mask--error {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: rgba(231, 29, 50, 0.10);
	color: var(--pos-danger);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-uploader-tile__mask--error svg { display: block; width: 24px; height: 24px; }
.srvd-uploader-tile__close {
	position: absolute;
	top: 7px;
	right: 7px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--pos-card);
	color: var(--pos-text);
	box-shadow: 0 10px 20px var(--pos-shadow);
	cursor: pointer;
}
.srvd-uploader-tile__close svg { display: block; width: 24px; height: 24px; }
.srvd-uploader-tile__close:hover:where(:not(:disabled)), .srvd-uploader-tile__close.is-hover { background: var(--pos-chip); }
.srvd-uploader-tile__close:active:where(:not(:disabled)), .srvd-uploader-tile__close.is-pressed { background: var(--pos-chip-hover); }
.srvd-uploader-tile__close:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-uploader-tile__close:disabled, .srvd-uploader-tile__close.is-disabled { opacity: 0.4; cursor: default; }

/* --- Kit calendar (Figma "Calendar" 4183:8291, component "calendar") ----
	 Fixed 266.7px-wide month block: a 44px nav (prev / next buttons around the
	 title, a <button> where it opens the month / year selector) over the month
	 grid, a fixed-layout <table class="srvd-calendar__grid" role="grid">: a 44px
	 week-day header row of <th scope="col"> and --srvd-calendar-row-tall week rows
	 (36.4px days, 56.5px in the 3-column --months picker, 42.4px in the 300px
	 --lg instance) whose <td>s hold one 40px-tall <button class="srvd-calendar__cell">
	 overlapping the row symmetrically (Figma cross=CENTER on a taller child:
	 margin = (row - 40px) / 2). States are the real attributes: aria-pressed
	 = the selected day (accent circle), disabled = not available (outside the
	 month), --off = a day off (weekend: content, not a state). Figma draws no
	 hover / pressed / focus: the kit's chip tokens and focus ring. app.js gives
	 each grid one Tab stop and the arrow keys. ------------------------------- */
.srvd-calendar { width: 266.7px; color: var(--pos-text); }
.srvd-calendar__nav { position: relative; height: 44px; }
.srvd-calendar__navbtn {
	position: absolute;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border-radius: 30px;
	background: var(--pos-card);
	color: var(--pos-text);
}
.srvd-calendar__navbtn svg { display: block; width: 24px; height: 24px; }
.srvd-calendar__navbtn--prev { left: 0; }
.srvd-calendar__navbtn--next { right: 0; }
.srvd-calendar__navbtn:hover:where(:not(:disabled)), .srvd-calendar__navbtn.is-hover { background: var(--pos-chip); }
.srvd-calendar__navbtn:active:where(:not(:disabled)), .srvd-calendar__navbtn.is-pressed { background: var(--pos-chip-hover); }
.srvd-calendar__navbtn:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-calendar__navbtn:disabled, .srvd-calendar__navbtn.is-disabled { opacity: 0.4; cursor: default; }
/* the title: static text, or a button that opens the month / year selector */
.srvd-calendar__title {
	position: absolute;
	left: 32px;
	right: 32px;
	top: 13px;
	padding: 0;
	border-radius: 8px;
	font-size: 16px;
	line-height: 19.2px;
	text-align: center;
	color: inherit;
}
button.srvd-calendar__title:hover:where(:not(:disabled)), .srvd-calendar__title.is-hover { background: var(--pos-card); }
button.srvd-calendar__title:active:where(:not(:disabled)), .srvd-calendar__title.is-pressed { background: var(--pos-chip); }
button.srvd-calendar__title:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
button.srvd-calendar__title:disabled, .srvd-calendar__title.is-disabled { opacity: 0.4; cursor: default; }
/* the grid (reboot: caption-side, border-collapse; UA: 1px cell padding, bold centred th) */
.srvd-calendar__grid {
	--srvd-calendar-row: 36.4px;
	width: 100%;
	margin: 0;
	table-layout: fixed;
	border-collapse: collapse;
	border-spacing: 0;
}
.srvd-calendar__grid th, .srvd-calendar__grid td { padding: 0; border: 0; vertical-align: top; }
/* month picker: 3 cells per 56.5px row */
.srvd-calendar__grid--months { --srvd-calendar-row: 56.5px; }
/* resized 300x300 instance used in the usage-example dual-month picker */
.srvd-calendar--lg { width: 300px; }
.srvd-calendar--lg .srvd-calendar__grid { --srvd-calendar-row: 42.4px; }
.srvd-calendar__weekdays { height: 44px; }
.srvd-calendar__wd {
	color: var(--pos-muted);
	font-size: 13px;
	line-height: 15.6px;
	font-weight: 400;
	letter-spacing: -0.08px;
	text-align: center;
	vertical-align: middle;
}
/* the standalone cset copies of a week day */
span.srvd-calendar__wd { display: flex; align-items: center; justify-content: center; height: 32px; }
.srvd-calendar__wd--off { color: color-mix(in srgb, var(--pos-danger) 40%, transparent); }
.srvd-calendar__week { height: var(--srvd-calendar-row); }
.srvd-calendar__cell {
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0;
	border-radius: 20px;
	font-size: 16px;
	line-height: 19.2px;
	color: var(--pos-text);
}
.srvd-calendar__grid .srvd-calendar__cell { width: 100%; margin: calc((var(--srvd-calendar-row) - 40px) / 2) 0; }
/* the 40px circle behind the (38.1px) cell: accent when selected, a chip shade on hover / press */
.srvd-calendar__cell::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 20px;
}
.srvd-calendar__cell:hover:where(:not(:disabled, [aria-pressed="true"]))::before, .srvd-calendar__cell.is-hover::before { background: var(--pos-card); }
.srvd-calendar__cell:active:where(:not(:disabled, [aria-pressed="true"]))::before, .srvd-calendar__cell.is-pressed::before { background: var(--pos-chip); }
.srvd-calendar__cell:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-calendar__cell--off { color: var(--pos-danger); }
.srvd-calendar__cell:disabled, .srvd-calendar__cell.is-disabled { color: var(--pos-faint); cursor: default; }
.srvd-calendar__cell--off:disabled, .srvd-calendar__cell--off.is-disabled { color: color-mix(in srgb, var(--pos-danger) 40%, transparent); }
.srvd-calendar__cell[aria-pressed="true"], .srvd-calendar__cell.is-active { color: var(--pos-on-accent); }
.srvd-calendar__cell[aria-pressed="true"]::before, .srvd-calendar__cell.is-active::before { background: var(--pos-accent); }
.srvd-calendar__cell[aria-pressed="true"]:disabled, .srvd-calendar__cell.is-active.is-disabled { color: color-mix(in srgb, var(--pos-on-accent) 40%, transparent); }
/* optional small month label above the date ("Jul" / "1" cell) */
.srvd-calendar__cellmonth { display: block; font-size: 11px; line-height: 10px; }
/* event dots pinned 4px above the cell bottom (the second dot's purple has no token yet - F7) */
.srvd-calendar__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	display: flex;
	gap: 2px;
	justify-content: center;
}
.srvd-calendar__dots i { width: 4px; height: 4px; border-radius: 2px; background: var(--pos-text); }
.srvd-calendar__dots i + i { background: var(--pos-secondary); }
.srvd-calendar__cell[aria-pressed="true"] .srvd-calendar__dots i:first-child, .srvd-calendar__cell.is-active .srvd-calendar__dots i:first-child { background: var(--pos-bg); }

/* year dropdown overlay (Figma "dropdown" instance on calendar State=Year) */
/* .srvd-dropdown (the year picker) is the kit's dropdown menu: the whole family lives in the
	 Dropdowns block at the end of this file. */

/* --- Kit progress indicators (Figma "Progress Indicators" 4376:4331) ----
	 Bars: the track is role="progressbar" (aria-valuenow), the fill width is
	 the value (Figma draws 74px for its 42%). Circle: the wrapper is the
	 progressbar, the arc an inline SVG (Figma exposes no arc data). Spinners
	 and loading dots are role="status"; the sheet shows their still phases,
	 pages add --live for the motion (F3). Colours are Layer 1 tokens. ------- */
.srvd-progress-label { color: var(--pos-muted); font-size: 13px; line-height: 15.6px; letter-spacing: -0.08px; }
.srvd-progress-bar {
	box-sizing: border-box;
	width: 200px;
	padding: 8px 0;
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--pos-text);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-progress-bar__track { display: block; flex: 1; height: 4px; border-radius: 4px; background: var(--pos-faint); overflow: hidden; }
.srvd-progress-bar__fill { display: block; height: 4px; background: var(--pos-accent); }
.srvd-progress-bar__value { width: 28px; text-align: center; }
.srvd-progress-bar--stacked { flex-direction: column; align-items: stretch; }
.srvd-progress-bar--stacked .srvd-progress-bar__track { flex: none; }
.srvd-progress-bar__row { display: flex; align-items: center; gap: 8px; }
.srvd-progress-bar__row span:first-child { flex: 1; }
/* circular indicators are inline SVGs; these wrappers size and colour them */
.srvd-progress-circle { position: relative; width: 40px; height: 40px; color: var(--pos-text); }
.srvd-progress-circle svg { display: block; width: 40px; height: 40px; }
.srvd-progress-circle__track { stroke: var(--pos-faint); }
.srvd-progress-circle__arc { stroke: currentColor; }
.srvd-progress-circle__value {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	line-height: 14.9px;
}
.srvd-progress-spin { display: block; width: 24px; height: 24px; color: var(--pos-text); }
.srvd-progress-spindot { display: block; width: 80px; height: 80px; overflow: visible; color: var(--pos-text); }   /* the 6px ring overflows the 80px box by 3px (the sheet copies say so inline) */
.srvd-progress-dots { position: relative; width: 24px; height: 24px; }
.srvd-progress-dots i {
	position: absolute;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 3px;
	background: var(--pos-text);
	opacity: 0.2;
}
.srvd-progress-dots i:nth-child(1) { left: 0; }
.srvd-progress-dots i:nth-child(2) { left: 9px; }
.srvd-progress-dots i:nth-child(3) { left: 18px; }
.srvd-progress-dots--p1 i:nth-child(1), .srvd-progress-dots--p2 i:nth-child(2), .srvd-progress-dots--p3 i:nth-child(3) { opacity: 1; }
/* pages: --live turns the still phases into motion */
.srvd-progress-spin--live, .srvd-progress-spindot--live { animation: srvd-progress-rotate 1s linear infinite; }
.srvd-progress-dots--live i { animation: srvd-progress-blink 0.9s ease-in-out infinite; }
.srvd-progress-dots--live i:nth-child(2) { animation-delay: 0.3s; }
.srvd-progress-dots--live i:nth-child(3) { animation-delay: 0.6s; }
@keyframes srvd-progress-rotate { to { transform: rotate(360deg); } }
@keyframes srvd-progress-blink { 0%, 60%, 100% { opacity: 0.2; } 30% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.srvd-progress-spin--live, .srvd-progress-spindot--live, .srvd-progress-dots--live i { animation: none; }
}

/* --- Kit rating stars (Figma "Rating stars" 17913:7940) -----------------
	 Display: .srvd-rating is role="img" with the rating in aria-label, the stars
	 are decorative (--half = faint base + accent star clipped to the left
	 8px). Input (kit addition, F3): .srvd-rating--input is a role="radiogroup" of
	 <label class="srvd-star"> + visually hidden <input type="radio">; :checked
	 fills that star and the ones before it, hover previews, arrows move. ---- */
.srvd-star { position: relative; display: block; width: 16px; height: 16px; color: var(--pos-text); }
.srvd-star svg { position: absolute; inset: 0; display: block; width: 16px; height: 16px; }
.srvd-star--empty { color: var(--pos-faint); }
/* half star: faint base + accent star clipped to the left 8px */
.srvd-star--half { color: var(--pos-faint); }
.srvd-star--half svg + svg { color: var(--pos-text); clip-path: inset(0 50% 0 0); }
.srvd-rating { display: flex; align-items: center; }
.srvd-rating__value {
	margin-left: 8px;
	color: #000000;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-rating--input .srvd-star { margin: 0; color: var(--pos-faint); cursor: pointer; }
.srvd-rating--input .srvd-star:where(:has(input:checked), :has(~ .srvd-star input:checked)) { color: var(--pos-text); }
.srvd-rating--input:hover .srvd-star { color: var(--pos-faint); }
.srvd-rating--input:hover .srvd-star:where(:hover, :has(~ .srvd-star:hover)) { color: var(--pos-text); }
.srvd-rating--input .srvd-star:has(input:focus-visible) { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; border-radius: 4px; }
.srvd-rating--input .srvd-star:has(input:disabled) { opacity: 0.4; cursor: default; }

/* --- Kit toast notification (Figma "Progress Indicators" 19243:10514) ---
	 The kit toast is deliberately white-on-white (glass banner over content):
	 icon and text are white and invisible on the white surface — only the
	 close chip / Undo button read. Rendered verbatim, on Layer 1 tokens (F8
	 sitting 10): the surface is --pos-accent and the text --pos-text, so the
	 quirk holds in both themes (light: #181818 on #181818); Undo is
	 --pos-on-accent, the close chip the card shades, its ring the on-accent
	 mix. The phone mock below is device chrome and stays literal. --------- */
.srvd-toast {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	width: 335px;
	height: 84px;
	padding: 16px 24px;
	border-radius: 16px;
	background: var(--pos-accent);
	color: var(--pos-text);
	box-shadow: 0 40px 60px var(--pos-shadow);
}
.srvd-toast__text { flex: 1; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 15.6px; }
.srvd-toast__title { font-weight: 700; letter-spacing: -0.065px; }
.srvd-toast__desc { letter-spacing: -0.08px; }
.srvd-toast__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: var(--pos-card);
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-toast__close svg { display: block; width: 24px; height: 24px; }
.srvd-toast__action {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pos-on-accent);
	font-family: inherit;
	font-size: 13px;
	line-height: 19.5px;
	font-weight: 700;
	letter-spacing: -0.08px;
	cursor: pointer;
}
/* states (F3): the banner is role="status"; its buttons sit on the accent surface, so the
	 focus ring is the on-accent one (dark on the white banner; white on the light theme's dark banner) */
.srvd-toast__close:hover, .srvd-toast__close.is-hover { background: var(--pos-card-hover); }
.srvd-toast__close:active, .srvd-toast__close.is-pressed { background: var(--pos-card-active); }
.srvd-toast__action:hover, .srvd-toast__action.is-hover { text-decoration: underline; }
.srvd-toast__close:focus-visible, .srvd-toast__action:focus-visible { outline: var(--bs-focus-ring-width) solid color-mix(in srgb, var(--pos-on-accent) 70%, transparent); outline-offset: 2px; }
.srvd-toast__action:focus-visible { border-radius: 4px; }
.srvd-toast__close:disabled, .srvd-toast__action:disabled { opacity: 0.4; cursor: default; }

/* iPhone chat mock on the toast sheet ("Prototype example" 19243:10677).
	 Fixed 375x812 canvas clipped by the sheet bottom; children are pixel-
	 anchored. Navbar/status glyphs are white-on-white in Figma (invisible)
	 and are omitted — only the avatar peeks out beside the banner. -------- */
.srvd-phone {
	position: absolute;
	width: 375px;
	height: 812px;
	border-radius: 35px;
	background: #19171d;
	box-shadow: 0 24px 60px rgba(37, 70, 100, 0.1);
	overflow: hidden;
}
.srvd-phone__nav {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 88px;
	background: #ffffff;
}
.srvd-phone__avatar { position: absolute; border-radius: 50%; }
.srvd-phone__bubble {
	position: absolute;
	box-sizing: border-box;
	width: 264px;
	padding: 8px 12px;
	border-radius: 20px 20px 20px 2px;
	background: rgba(95, 93, 102, 0.15);
	color: #ffffff;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: -0.08px;
}
.srvd-phone__bubble--out {
	border-radius: 20px 20px 2px 20px;
	background: #ffffff;
	color: #181818;
}
.srvd-phone__bubble img.srvd-phone__photo { display: block; width: 240px; border-radius: 0 0 8px 8px; margin: 0 0 4px; }
.srvd-phone__emoji { display: inline-block; width: 16px; height: 16px; margin-left: 3px; vertical-align: -3px; }
.srvd-phone__time { position: absolute; color: #aaa9ab; font-size: 11px; line-height: 14.9px; }
.srvd-phone__read { position: absolute; right: 10px; bottom: 8px; opacity: 0.4; color: #181818; }
.srvd-phone__read svg { display: block; width: 16px; height: 16px; }

/* --- Kit charts (Figma "charts" 19247:10967) ----------------------------
	 Axis/grid/series render as inline SVG built from the node geometry
	 (exact fillGeometry paths, arcData donut sectors); labels, legends and
	 comparison bars are real HTML. All pixel-anchored on the dark sheet.
	 Colours: Layer 1 tokens (F8 sitting 10) - the SVG strokes through .srvd-chart-axis
	 (muted), .srvd-chart-grid (faint) and .srvd-chart-gap (the sheet colour between the
	 donut sectors), the white series / lines / gradient through currentColor (the
	 plot's --pos-text); a white surface or bar is --pos-accent. ---------------------- */
.srvd-chart-label {
	position: absolute;
	font-size: 11px;
	line-height: 14.9px;
	color: var(--pos-muted);
	opacity: 0.6;
	white-space: nowrap;
}
.srvd-chart-label--w { color: var(--pos-text); }         /* comparison-chart labels are white@60% */
.srvd-chart-label--r { text-align: right; }
.srvd-chart-label--c { text-align: center; }
.srvd-chart-plot { position: absolute; overflow: visible; display: block; color: var(--pos-text); }
.srvd-chart-axis { stroke: var(--pos-muted); }
.srvd-chart-grid { stroke: var(--pos-faint); }
.srvd-chart-gap { stroke: var(--pos-bg); }
.srvd-chart-legend { position: absolute; display: flex; gap: 20px; }
.srvd-chart-legend--v { flex-direction: column; gap: 8px; }
.srvd-chart-legend--wrap { flex-wrap: wrap; column-gap: 20px; row-gap: 8px; }
.srvd-chart-legend-item {
	display: flex;
	gap: 8px;
	height: 20px;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-text);
	white-space: nowrap;
}
.srvd-chart-legend-item i { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.srvd-chart-tip {
	position: absolute;
	box-sizing: border-box;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--pos-accent);
	color: var(--pos-bg);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	text-align: center;
	white-space: nowrap;
	box-shadow: 0 10px 20px var(--pos-shadow);
}
.srvd-chart-tip b { font-weight: 700; }
.srvd-chart-bar { position: absolute; background: var(--pos-accent); border-radius: 2px 2px 0 0; }
.srvd-chart-compare-bar { position: absolute; height: 16px; border-radius: 0 2px 2px 0; }
.srvd-chart-compare-bar span {
	position: absolute;
	left: calc(100% + 5px);
	top: -2px;
	font-size: 11px;
	line-height: 14.9px;
	color: var(--pos-text);
	opacity: 0.6;
	white-space: nowrap;
}
/* stacked-bar example: 16 flex columns mirror Figma's auto-layout (gap 4,
	 fill-width containers); green = series bar, purple = stacked overlay */
.srvd-chart-cols { position: absolute; display: flex; gap: 4px; }
.srvd-chart-col { position: relative; flex: 1; }
.srvd-chart-col i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 2px 2px 0 0; }
.srvd-chart-col__g { background: var(--pos-success); }
.srvd-chart-col__p { background: var(--pos-secondary); }
.srvd-chart-note { margin: 0; font-size: 16px; line-height: 19.2px; color: var(--pos-text); }

/* --- Kit empty states (Figma frame named "charts" 17596:12638 — the sheet
	 titles itself "Empty states"; icons are the kit's own 10px-stroke
	 vectors, inlined as exported SVG) ------------------------------------- */
.srvd-empty-state__icon { display: block; width: 120px; height: 120px; color: var(--pos-faint); }
.srvd-empty-state__icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.srvd-empty-state__title {
	margin: 0;
	font-size: 28px;
	line-height: 33.6px;
	font-weight: 700;
	letter-spacing: -0.14px;
	color: var(--pos-muted);
	text-align: center;
}
.srvd-empty-state__text {
	margin: 0;
	font-size: 16px;
	line-height: 19.2px;
	color: var(--pos-muted);
	text-align: center;
}
.srvd-empty-state__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 200px;
	background: var(--pos-chip);
	color: var(--pos-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 700;
	letter-spacing: -0.16px;
	white-space: nowrap;
	text-decoration: none;             /* an <a> button (the error pages): reboot underlines links, the kit reset is zero-specificity */
	cursor: pointer;
}
/* states (F7): the secondary button on the chip tokens, the primary one without a hover (R-04) */
.srvd-empty-state__btn:hover:where(:not(:disabled)), .srvd-empty-state__btn.is-hover { background: var(--pos-chip-hover); }
.srvd-empty-state__btn:active:where(:not(:disabled)), .srvd-empty-state__btn.is-pressed { background: var(--pos-tile); }
.srvd-empty-state__btn:focus-visible, .srvd-empty-state__btn.is-focused { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 4px; }
.srvd-empty-state__btn:disabled, .srvd-empty-state__btn.is-disabled { opacity: 0.4; cursor: default; }
.srvd-empty-state__btn--primary { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-empty-state__btn--primary:hover:where(:not(:disabled)), .srvd-empty-state__btn--primary.is-hover { background: var(--pos-accent); }
.srvd-empty-state__btn--primary:active:where(:not(:disabled)), .srvd-empty-state__btn--primary.is-pressed { background: var(--pos-accent); box-shadow: inset 0 -6px 4px var(--pos-shadow); }
/* .srvd-empty-state (F7 kit addition): the composed block for pages - icon, title, text and button stacked
	 and centred, gaps 32 / 8 / 32 as in the sheet's phone examples; the sheet's own copies stay
	 absolutely anchored (the docs sheet centres their button at its x) */
.srvd-empty-state { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.srvd-empty-state .srvd-empty-state__text { margin-top: -24px; }

/* iPhone mock frames on the Empty-states sheet (375x812, radius 35).
	 Unlike .srvd-phone (toast sheet) these are all-dark with visible status-bar
	 glyphs; device chrome glyphs are the kit's own vectors, inlined. ------- */
.srvd-phone-mock {
	position: absolute;
	width: 375px;
	height: 812px;
	border-radius: 35px;
	background: var(--pos-bg);
	overflow: hidden;
}
.srvd-phone-mock--shadow { box-shadow: 0 80px 250px var(--pos-shadow); }
.srvd-phone-mock-i { display: block; width: 24px; height: 24px; }
.srvd-phone-mock__time {
	position: absolute;
	left: 16px;
	top: 19.5px;
	width: 79px;
	text-align: center;
	color: var(--pos-text);
	font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	font-size: 15px;
	line-height: 17.9px;
	font-weight: 600;
	letter-spacing: -0.5px;
}
.srvd-phone-mock__cluster { position: absolute; left: 286.5px; top: 23.2px; }
.srvd-phone-mock__cluster svg { display: block; }
.srvd-phone-mock__deeplink {
	position: absolute;
	left: 16px;
	top: 33px;
	display: flex;
	align-items: center;
	width: 79px;
	height: 13px;
	color: var(--pos-text);
	font-family: "SF Pro Text", "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	font-size: 11px;
	line-height: 13.1px;
}
.srvd-phone-mock__deeplink svg { display: block; margin-right: 4px; }
.srvd-phone-mock__nav-title {
	position: absolute;
	left: 72px;
	top: 59px;
	width: 231px;
	text-align: center;
	color: var(--pos-text);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 700;
	letter-spacing: -0.16px;
}
.srvd-phone-mock__navicon { position: absolute; width: 24px; height: 24px; color: var(--pos-text); }
.srvd-phone-mock__tabs { position: absolute; left: 0; top: 727px; display: flex; }
.srvd-phone-mock__tab { position: relative; width: 75px; height: 49px; color: var(--pos-muted); }
.srvd-phone-mock__tab--current { color: var(--pos-text); }   /* the phone mock's current tab: a content variant, the mock is not operable */
.srvd-phone-mock__tab .srvd-phone-mock-i { position: absolute; left: 26px; top: 5px; }
.srvd-phone-mock__tab span {
	position: absolute;
	left: 0;
	top: 35px;
	width: 100%;
	text-align: center;
	font-size: 11px;
	line-height: 14.9px;
}
.srvd-phone-mock__home {
	position: absolute;
	left: 120px;
	top: 799px;
	width: 135px;
	height: 5px;
	border-radius: 100px;
	background: var(--pos-accent);
}
.srvd-phone-mock__search {
	position: absolute;
	left: 24px;
	top: 54px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 327px;
	height: 44px;
	padding: 12px;
	border-radius: 12px;
	background: var(--pos-card);
	color: var(--pos-text);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-phone-mock__search .srvd-phone-mock-i { flex: 0 0 24px; }
.srvd-phone-mock__search span { flex: 1; }
.srvd-phone-mock__search-dot {
	position: absolute;
	left: 333px;
	top: 65px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pos-danger);
	box-shadow: 0 0 0 2px var(--pos-card);
}

/* --- Navbar (iOS26 style): <header class="srvd-navbar"> + 44px round buttons and
	 button groups. The bar is 375 wide; top padding reserves the status-bar
	 area (56 large / 44 compact). The centred title overlays the content row,
	 so it needs the per-variant top offset (flex centring would centre on the
	 whole bar). Buttons have real hover / focus / disabled (F3); Layer 1 tokens. */
.srvd-navbar {
	position: relative;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 375px;
	background: var(--pos-bg);
	color: var(--pos-text);
}
.srvd-navbar--large { height: 110px; padding: 56px 16px 10px; }
.srvd-navbar--compact { height: 98px; padding: 44px 16px 10px; }
.srvd-navbar--popover {
	height: 70px;
	padding: 16px 16px 10px;
	background: transparent;
	border-radius: 38px 38px 0 0;
}
.srvd-navbar__title {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	font-weight: 700;
	color: var(--pos-text);
	white-space: nowrap;
}
.srvd-navbar--large .srvd-navbar__title { top: 65.5px; font-size: 22px; line-height: 25.3px; letter-spacing: -0.22px; }
.srvd-navbar--compact .srvd-navbar__title { top: 57px; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
.srvd-navbar__title--left {
	position: static;
	transform: none;
	font-weight: 700;
	font-size: 16px;
	line-height: 19.2px;
	letter-spacing: -0.16px;
	color: var(--pos-text);
}
.srvd-navbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 22px;
	background: var(--pos-tile);
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-navbar-btn--light { background: var(--pos-close-bg); }
.srvd-navbar-btn svg { display: block; }
.srvd-navbar-btn:hover:where(:not(:disabled)), .srvd-navbar-btn.is-hover { background: var(--pos-input-secondary); }
.srvd-navbar-btn--light:hover:where(:not(:disabled)), .srvd-navbar-btn--light.is-hover { background: rgba(255, 255, 255, 0.30); }
.srvd-navbar-group {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	padding: 4px;
	border-radius: 40px;
	background: var(--pos-tile);
}
.srvd-navbar-group__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: transparent;
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-navbar-group__item svg { display: block; }
.srvd-navbar-group__item:hover:where(:not(:disabled)), .srvd-navbar-group__item.is-hover { background: var(--pos-tile); }
.srvd-navbar-btn:focus-visible, .srvd-navbar-group__item:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-navbar-btn:disabled, .srvd-navbar-group__item:disabled, .srvd-navbar-btn.is-disabled, .srvd-navbar-group__item.is-disabled { opacity: 0.4; cursor: default; }

/* --- Tabbar (iOS26 style): 375-wide bar of equal-width 54px pill tabs. --- */
.srvd-tabbar {
	display: flex;
	gap: 4px;
	box-sizing: border-box;
	width: 375px;
	padding: 8px 16px 28px;
	background: var(--pos-bg);
}
.srvd-tabbar__tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 54px;
	padding: 0;
	border: 0;
	border-radius: 60px;
	background: transparent;
	color: var(--pos-muted);
	font-size: 24px;                   /* icon-font glyphs (bi-*) fill the 24px slot like the SVGs */
	line-height: 1;
	text-decoration: none;             /* the wired tab bar's items are <a> (F8 sitting 9) */
	cursor: pointer;
}
.srvd-tabbar__tab[aria-current="page"], .srvd-tabbar__tab.is-active { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-tabbar__tab:hover:where(:not([aria-current="page"], :disabled)), .srvd-tabbar__tab.is-hover { background: var(--pos-card); }
.srvd-tabbar__tab:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-tabbar__tab:disabled, .srvd-tabbar__tab.is-disabled { opacity: 0.4; cursor: default; }
/* pages: the bar spans its container (Figma "Receipts" 29909:96717 tabbar 375 = the viewport) */
.srvd-tabbar--fluid { width: auto; }
.srvd-tabbar__tab svg { display: block; }

/* --- Single tab item (the "tab" cset): a <button>. Default = icon over an
	 11px label, iOS26 = the 75x54 pill from the tabbar. Colour rides on
	 currentColor; the current tab is aria-current="page" (aria-selected in a
	 tablist), sheet twin .srvd-tab-item--active. ------------------------------------ */
.srvd-tab-item { position: relative; width: 75px; padding: 0; color: var(--pos-muted); cursor: pointer; }
.srvd-tab-item[aria-current="page"], .srvd-tab-item[aria-selected="true"], .srvd-tab-item--active { color: var(--pos-text); }
.srvd-tab-item--default { height: 49px; }
.srvd-tab-item--default .srvd-tab-item__icon { position: absolute; left: 25.5px; top: 5px; }
.srvd-tab-item__label {
	position: absolute;
	left: 0;
	top: 35px;
	width: 75px;
	text-align: center;
	font-size: 11px;
	line-height: 14.9px;
}
.srvd-tab-item--pill {
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 60px;
}
.srvd-tab-item--pill[aria-current="page"], .srvd-tab-item--pill[aria-selected="true"], .srvd-tab-item--pill.srvd-tab-item--active { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-tab-item svg { display: block; }
.srvd-tab-item:hover:where(:not([aria-current="page"], [aria-selected="true"], :disabled)), .srvd-tab-item.is-hover { color: var(--pos-text); }
.srvd-tab-item--pill:hover:where(:not([aria-current="page"], [aria-selected="true"], :disabled)), .srvd-tab-item--pill.is-hover { background: var(--pos-card); }
.srvd-tab-item:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-tab-item:disabled, .srvd-tab-item.is-disabled { opacity: 0.4; cursor: default; }

/* ---------------------------------------------------------------------- */
/* 4r. SEARCH BAR (Figma "Search bar" 4415:11707)                          */
/* .srvd-search = <form role="search"> holding the field (<input type="search">*/
/* + glyph + clear button) and the Cancel button. Both extra controls are  */
/* CSS-driven: Cancel shows while the form has focus (:focus-within, sheet */
/* twin .is-focused), Clear shows when the field holds a value and the     */
/* focus is gone (:not(:placeholder-shown)). Renamed from .srvd-sidebar in F2: that*/
/* name belongs to the Sidebar family (4x), whose rule overrode this one.  */
/* Colours: Layer 1 tokens (F8 sitting 10).                                */
/* ---------------------------------------------------------------------- */
.srvd-search { display: flex; align-items: center; gap: 12px; width: 327px; margin: 0; }
.srvd-search__field {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: 44px;
	padding: 12px;
	border-radius: 12px;
	background: var(--pos-card);
	min-width: 0;
}
.srvd-search__field svg { flex: 0 0 auto; display: block; }
.srvd-search__icon { color: var(--pos-text); }
.srvd-search:not(:focus-within, .is-focused):has(.srvd-search__input:placeholder-shown) .srvd-search__icon { color: var(--pos-muted); }
.srvd-search__input {
	flex: 1;
	min-width: 0;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-text);
	-webkit-appearance: none;   /* reboot [type=search] { -webkit-appearance: textfield; outline-offset: -2px } beats the :where() reset */
	outline-offset: 0;
}
.srvd-search__input::placeholder { color: var(--pos-muted); }
.srvd-search__clear { display: none; padding: 0; color: var(--pos-text); }
.srvd-search:not(:focus-within, .is-focused):has(.srvd-search__input:not(:placeholder-shown)) .srvd-search__clear, .srvd-search__clear:focus { display: inline-flex; }
.srvd-search__cancel {
	display: none;
	flex: 0 0 auto;
	padding: 0;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
	color: var(--pos-text);
}
.srvd-search:focus-within .srvd-search__cancel, .srvd-search.is-focused .srvd-search__cancel { display: block; }
.srvd-search__clear:hover, .srvd-search__cancel:hover { color: var(--pos-muted); }
.srvd-search__clear:focus-visible, .srvd-search__cancel:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* 4s. ANDROID SHARING DIALOG (Figma "Android assets" 9633:8436)          */
/* The kit's Android share sheet: white top-rounded panel, drag handle,   */
/* "Share..." header with a bottom hairline, row of app targets whose     */
/* icons are cropped from the baseline export (image fills).              */
/* ---------------------------------------------------------------------- */
.srvd-android-share {
	position: relative;
	box-sizing: border-box;
	width: 388.69px;
	height: 229px;                     /* Figma-exact: 75 head + 108 apps + 46 pad */
	background: #ffffff;
	border-radius: 13px 13px 0 0;
	color: #181818;
}
.srvd-android-share__handle {
	position: absolute;
	left: 50%;
	top: 16px;
	transform: translateX(-50%);
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: #d9d9d9;
}
.srvd-android-share__head {
	box-sizing: border-box;
	height: 75px;
	margin: 0 14.3px;
	padding: 37px 16px 18px;
	border-bottom: 1px solid #e8e7e2;
	font-family: "Roboto", "Segoe UI", sans-serif;
	font-size: 18px;
	line-height: 20px;
	font-weight: 400;                  /* an <h2>: undo reboot's heading weight */
	text-align: center;
	color: inherit;
}
.srvd-android-share__apps { display: flex; margin: 0 14.3px; padding: 22px 0; height: 108px; box-sizing: border-box; }
.srvd-android-share__app {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 90px;
	padding: 0 8px;
	border: 0;
	background: transparent;
	font-family: inherit;
	cursor: pointer;
}
/* the white Android sheet keeps a dark ring and shade in both themes */
.srvd-android-share__app:hover:where(:not(:disabled)), .srvd-android-share__app.is-hover { border-radius: 8px; background: rgba(0, 0, 0, 0.06); }
.srvd-android-share__app:active:where(:not(:disabled)), .srvd-android-share__app.is-pressed { border-radius: 8px; background: rgba(0, 0, 0, 0.12); }
.srvd-android-share__app:focus-visible { border-radius: 8px; outline: 2px solid rgba(24, 24, 24, 0.7); outline-offset: -2px; }
.srvd-android-share__app:disabled, .srvd-android-share__app.is-disabled { opacity: 0.4; cursor: default; }
.srvd-android-share:modal { position: fixed; inset: auto 0 0; margin: 0 auto; }
.srvd-android-share__app img {
	width: 37px;
	height: 37px;
	border-radius: 50%;
	filter: drop-shadow(0 1px 2px #dddddd);
}
.srvd-android-share__app span {
	/* the Figma text box is 74 wide, but its render truncates at ~50px
		 ("Google…", "Яндекс…") — 52px reproduces the same cut points */
	max-width: 52px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	/* Figma names Roboto Condensed here, but its export renders plain Roboto
		 (wider advances, earlier truncation) — match the render */
	font-family: "Roboto", "Segoe UI", sans-serif;
	font-size: 14px;
	line-height: 16.4px;
	letter-spacing: 0.28px;
	color: #000000;
}

/* ---------------------------------------------------------------------- */
/* 4t. LIST (Figma "List" 1174:756)                                        */
/* .srvd-list = the <ul>, .srvd-list-item = the <li>: the kit's 375x60 mobile list   */
/* item. The tappable row is .srvd-list-item__frame on the element it is: <button>  */
/* (or <a href> when it navigates), <label> when the row toggles its own   */
/* .srvd-switch switch / .srvd-radio radio (.srvd-list-item__control), a plain <div> for a static  */
/* row. Leading icon, 16px label, optional number / control / chevron,    */
/* optional bottom separator. Swipe actions are <button>s AFTER the frame; */
/* --swiped shifts the frame -180px and grows the actions to 60px (Figma  */
/* State=Swiped) - a modifier page JS toggles on the gesture. The host    */
/* clips. States on the row and the actions: :hover / :active /           */
/* :focus-visible / :disabled (twins is-hover / is-pressed / is-disabled).  */
/* ---------------------------------------------------------------------- */
.srvd-list {
	margin: 0;                         /* reboot's ul rules, declared again (RESETS lose to reboot) */
	padding: 0;
	list-style: none;
}
.srvd-list-item {
	position: relative;
	display: flex;
	width: 375px;
	height: 60px;
	overflow: hidden;
	color: var(--pos-text);
}
.srvd-list-item__frame {
	position: relative;
	flex: 0 0 375px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 60px;
	padding: 16px;
	text-align: left;
	color: inherit;
	text-decoration: none;             /* an <a> row (the language pop-up): reboot underlines links, the kit reset is zero-specificity */
}
.srvd-list-item__frame:where(a, button, label) { cursor: pointer; }
.srvd-list-item--swiped .srvd-list-item__frame { margin-left: -180px; }
.srvd-list-item__frame:where(a, button, label):hover:where(:not(:disabled, [aria-disabled="true"])), .srvd-list-item__frame.is-hover { background: var(--pos-card); }
.srvd-list-item__frame:where(a, button, label):active:where(:not(:disabled, [aria-disabled="true"])), .srvd-list-item__frame.is-pressed { background: var(--pos-chip); }
.srvd-list-item__frame:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-list-item__frame:disabled, .srvd-list-item__frame[aria-disabled="true"], .srvd-list-item__frame.is-disabled { opacity: 0.4; cursor: default; }
.srvd-list-item__icon { flex: 0 0 24px; width: 24px; height: 24px; }
.srvd-list-item__icon svg { display: block; }
.srvd-list-item__label {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 19.2px;
	white-space: nowrap;
}
.srvd-list-item__label--add {
	/* Figma: SF Pro Display 700, left-aligned in a 175px box centred in the
		 leftover space -> glyphs start 64px after the icon gap */
	padding-left: 64px;
	font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: -0.32px;
}
.srvd-list-item__num { flex: 0 0 auto; font-size: 16px; line-height: 19.2px; color: var(--pos-muted); }
.srvd-list-item__control { flex: 0 0 auto; }
.srvd-list-item__chev { flex: 0 0 24px; width: 24px; height: 24px; }
.srvd-list-item__chev svg { display: block; }
.srvd-list-item__sep {
	position: absolute;
	left: 20px;
	bottom: 0;
	width: 335px;
	height: 1px;
	background: color-mix(in srgb, var(--pos-faint) 50%, transparent);      /* #4c4954 @ 50% */
}
/* --fluid: the list and its rows take the width of their container instead of the
	 375px phone width (the language and "more" pop-ups); the separator spans the row minus its padding */
.srvd-list--fluid .srvd-list-item { width: auto; }
.srvd-list--fluid .srvd-list-item__frame { flex: 1 1 auto; width: 100%; }
.srvd-list--fluid .srvd-list-item__sep { left: 16px; right: 16px; width: auto; }
.srvd-list--fluid .srvd-list-item__icon .bi { font-size: 24px; line-height: 1; }
.srvd-list-item__action {
	flex: 0 0 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 0;
	height: 60px;
	padding: 0;
	overflow: hidden;
	color: var(--pos-on-light);
	font-size: 11px;
	line-height: 14.9px;
	white-space: nowrap;
}
.srvd-list-item--swiped .srvd-list-item__action { flex: 0 0 60px; width: 60px; }
.srvd-list-item__action svg { display: block; flex: 0 0 auto; }
.srvd-list-item__action--mark { background: var(--pos-success); }
.srvd-list-item__action--edit { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-list-item__action--delete { background: var(--pos-danger); }
/* standalone action (the "swipe action" cset demo) */
.srvd-list-action-solo {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 60px;
	height: 60px;
	padding: 0;
	color: var(--pos-on-light);
	font-size: 11px;
	line-height: 14.9px;
}
.srvd-list-action-solo svg { display: block; }
/* the actions keep their own colour: hover / pressed darken it with an inset shade */
.srvd-list-item__action:hover:where(:not(:disabled)), .srvd-list-action-solo:hover:where(:not(:disabled)), .srvd-list-item__action.is-hover { box-shadow: inset 0 0 0 60px rgba(0, 0, 0, 0.08); }
.srvd-list-item__action:active:where(:not(:disabled)), .srvd-list-action-solo:active:where(:not(:disabled)), .srvd-list-item__action.is-pressed { box-shadow: inset 0 0 0 60px rgba(0, 0, 0, 0.16); }
.srvd-list-item__action:focus-visible, .srvd-list-action-solo:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-list-item__action:disabled, .srvd-list-action-solo:disabled, .srvd-list-item__action.is-disabled { opacity: 0.4; cursor: default; }

/* ---------------------------------------------------------------------- */
/* 4u. DRAWER (Figma "Drawer and popover" 9617:8359)                       */
/* Bottom sheet = <dialog class="srvd-drawer">: the glass surface (--pos-drawer-surface) */
/* with 24px top corners, 44px vertical padding and a 16px column gap for */
/* its title (.srvd-drawer__title, an <h2>) and content (a .srvd-list of rows,   */
/* <label> rows with .srvd-radio radios for options). The scrim is the dialog's   */
/* ::backdrop when opened with showModal() (RESETS), Bootstrap's           */
/* .offcanvas-backdrop in the offcanvas interop, a docs .uikit-scrim on   */
/* the kit sheet. Escape and any <form method="dialog"> button close a    */
/* modal drawer. No position of its own: :modal pins it to the bottom,    */
/* .uikit-abs anchors the sheet copies, .offcanvas fixes the Bootstrap one. */
/* ---------------------------------------------------------------------- */
.srvd-drawer {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 375px;
	padding: 44px 0;
	border-radius: 24px 24px 0 0;
	background: var(--pos-drawer-surface);
	box-shadow: 0 10px 20px var(--pos-shadow);
	color: var(--pos-text);
}
.srvd-drawer:modal { position: fixed; inset: auto 0 0; max-height: 100%; margin: 0 auto; overflow: auto; }
.srvd-drawer__title {
	box-sizing: border-box;
	margin: 0;
	padding: 0 16px 12px;
	font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	letter-spacing: 0.38px;
	color: inherit;
}

/* ---------------------------------------------------------------------- */
/* 4v. ACTION SHEET (Figma "Action sheet" 9617:8027)                       */
/* iOS action sheet = <dialog class="srvd-action-sheet">: a 375x812 scrim with the      */
/* actions menu bottom-anchored 34px above the phone edge - a <menu> of   */
/* <li><button class="srvd-action-sheet-item"> items and a <form method="dialog">       */
/* Cancel group on --pos-elevated r16 surfaces; Cancel closes the dialog  */
/* natively, so does Escape when it is modal (:modal centres the 375x812  */
/* box). Closed = the dialog without open (renders nothing, Figma         */
/* State=Closed); --closed is the parked look for a slide-out before open */
/* is removed. .srvd-action-sheet-item is the "action sheet item" cset (Style=Centered */
/* | --left; optional --danger, --sep, icon, subtext) with :hover /        */
/* :active / :focus-visible / :disabled (twins is-hover / is-pressed /     */
/* is-disabled).                                                           */
/* ---------------------------------------------------------------------- */
.srvd-action-sheet {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	width: 375px;
	height: 812px;
	padding: 34px 16px;
	overflow: hidden;
	background: var(--pos-overlay);
	color: var(--pos-text);
	transition: background 0.3s ease;
}
.srvd-action-sheet:modal { position: fixed; inset: 0; margin: auto; }
.srvd-action-sheet__menu {
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.3s ease;
}
.srvd-action-sheet__items, .srvd-action-sheet__cancel {
	display: flex;
	flex-direction: column;
	margin: 0;                         /* the <menu> list reset, declared again against reboot */
	padding: 0;
	list-style: none;
	overflow: hidden;                  /* item hover / pressed fills stay inside the corners */
	border-radius: 16px;
	background: var(--pos-elevated);
}
.srvd-action-sheet--closed { background: transparent; }
.srvd-action-sheet--closed .srvd-action-sheet__menu { transform: translateY(calc(100% + 34px)); }
.srvd-action-sheet-item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	box-sizing: border-box;
	width: 100%;
	min-height: 59px;
	margin: 0;
	padding: 20px 24px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 16px;
	line-height: 19px;                 /* Figma's 19.2 line box rounds to 19 - keeps 4 items at 236 */
	text-align: center;
	color: var(--pos-text);
	cursor: pointer;
	appearance: none;
}
.srvd-action-sheet-item--left {
	align-items: flex-start;           /* Figma Style=Left-aligned has no cross alignment: text tops the icon */
	justify-content: flex-start;
	text-align: left;
}
.srvd-action-sheet-item--danger { color: #e71d32; }   /* the iOS destructive red, not the POS --pos-danger */
.srvd-action-sheet-item__icon { flex: 0 0 24px; width: 24px; height: 24px; }
.srvd-action-sheet-item__icon svg { display: block; width: 24px; height: 24px; }
.srvd-action-sheet-item__text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.srvd-action-sheet-item__sub { font-size: 13px; line-height: 15.6px; letter-spacing: -0.08px; color: var(--pos-muted); }
/* Figma "Vector 14": a 1px #4c4954@30% CENTRE stroke on the item's bottom edge */
.srvd-action-sheet-item--sep::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5px;
	height: 1px;
	background: color-mix(in srgb, var(--pos-faint) 30%, transparent);
}
.srvd-action-sheet-item:hover:where(:not(:disabled)), .srvd-action-sheet-item.is-hover { background: var(--pos-chip); }
.srvd-action-sheet-item:active:where(:not(:disabled)), .srvd-action-sheet-item.is-pressed { background: var(--pos-chip-hover); }
.srvd-action-sheet-item:disabled, .srvd-action-sheet-item.is-disabled { opacity: 0.4; cursor: default; }
.srvd-action-sheet-item:focus-visible {
	outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
	outline-offset: -2px;
	border-radius: 16px;
}

/* --- Kit chat (Figma "Chat" 17528:6262): message bar (a <form> with a real
	 <textarea rows="1">: focus = :focus-within / is-focused, filled =
	 :not(:placeholder-shown) swaps the voice button for Send) + iOS keyboard,
	 chat message rows (<ul role="log">), status ticks, date separator, voice
	 (aria-pressed while playing) + file messages. Colours: Layer 1 tokens (F8 sitting
	 10); the iOS keyboard is device chrome and stays literal (dark in both themes). -- */
.srvd-message-bar {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: 375px;
	margin: 0;
	padding: 8px 16px 34px;
	color: var(--pos-text);
}
.srvd-message-bar--kb { height: 351px; padding-bottom: 0; }
.srvd-message-bar__field {
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	height: 44px;
	padding: 12px;
	border-radius: 12px;
	background: var(--pos-card);
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
.srvd-message-bar__icon {
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-message-bar__icon svg, .srvd-message-bar__send svg { display: block; width: 100%; height: 100%; }
.srvd-message-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 19px;
	line-height: 19px;   /* one 13px line centred in Figma's 19px text row (was a 15.6 line in a 19px flex box) */
	white-space: pre;    /* single line: a page that wants a growing bar adds that itself */
	overflow: hidden;
	resize: none;        /* reboot textarea { resize: vertical } beats the :where() reset */
	color: var(--pos-text);
}
.srvd-message-bar__input::placeholder { color: var(--pos-muted); }
.srvd-message-bar:focus-within .srvd-message-bar__input::placeholder, .srvd-message-bar.is-focused .srvd-message-bar__input::placeholder { color: #93989c; }
/* a filled bar shows Send instead of the voice button */
.srvd-message-bar:has(.srvd-message-bar__input:not(:placeholder-shown)) .srvd-message-bar__icon--voice { display: none; }
.srvd-message-bar__send {
	display: none;
	flex: 0 0 28px;
	box-sizing: border-box;
	width: 28px;
	height: 28px;
	padding: 4px;
	border: 0;
	border-radius: 30px;
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	cursor: pointer;
}
.srvd-message-bar:has(.srvd-message-bar__input:not(:placeholder-shown)) .srvd-message-bar__send { display: block; }
.srvd-message-bar--kb .srvd-ios-keyboard { margin: 8px -16px 0; }   /* Figma bottom-anchors the keyboard: 8 + 44 + 8 + 291 = 351 */

/* iOS keyboard (Figma "keyboard" instance, dark): 375x291 = 7px spacer, three
	 42px rows 12px apart, the input-type row 13px lower, then a 75px home bar. */
.srvd-ios-keyboard {
	position: relative;
	box-sizing: border-box;
	width: 375px;
	height: 291px;
	padding: 7px 3px 0;
	background: rgba(51, 52, 52, 0.6);
	font-family: "SF Pro Text", "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	color: #ffffff;
}
.srvd-ios-keyboard__row { display: flex; justify-content: center; gap: 6px; height: 42px; margin-bottom: 12px; }
.srvd-ios-keyboard__row--3 { gap: 14px; }
.srvd-ios-keyboard__row--4 { margin-top: 13px; margin-bottom: 0; }
.srvd-ios-keyboard__group { display: flex; gap: 6px; }
.srvd-ios-keyboard__key {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 0 0 31.5px;
	width: 31.5px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 4.6px;
	background: rgba(255, 255, 255, 0.3);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
	color: #ffffff;
	font-family: inherit;
	font-size: 22.5px;
	line-height: 27px;
	text-transform: lowercase;
	cursor: pointer;
}
.srvd-ios-keyboard__key--w2 { flex-basis: 32.1px; width: 32.1px; }
.srvd-ios-keyboard__key--w3 { flex-basis: 31.6px; width: 31.6px; }
.srvd-ios-keyboard__key--sec { flex-basis: 42px; width: 42px; background: rgba(255, 255, 255, 0.1); }
.srvd-ios-keyboard__key--sec svg { display: block; width: 24px; height: 24px; }
.srvd-ios-keyboard__key--num, .srvd-ios-keyboard__key--return {
	flex-basis: 91px;
	width: 91px;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: -0.32px;
	text-transform: none;
}
/* the sheet export composites the space bar at 25% white, not the letter keys' 30% */
.srvd-ios-keyboard__key--space {
	flex-basis: 175px;
	width: 175px;
	background: rgba(255, 255, 255, 0.25);
	font-size: 15.5px;
	line-height: 18px;
	letter-spacing: -0.1px;
}
.srvd-ios-keyboard__home { position: absolute; left: 0; top: 216px; width: 375px; height: 75px; }
.srvd-ios-keyboard__home-btn {
	position: absolute;
	left: 26px;
	top: 19px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	cursor: pointer;
}
.srvd-ios-keyboard__home-btn--mic { left: 317px; }
.srvd-ios-keyboard__home-btn svg { display: block; width: 32px; height: 32px; }
.srvd-ios-keyboard__key:focus-visible, .srvd-ios-keyboard__home-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);   /* device chrome: the keyboard is dark in both themes */
	outline-offset: 1px;
}
.srvd-message-bar__icon:focus-visible, .srvd-message-bar__send:focus-visible {
	outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
	outline-offset: 1px;
}

/* chat message: 24px avatar column (+2 gap +15 time placeholder) bottom-aligned
	 next to a 264-wide bubble stack. Incoming = tinted, r20/20/20/2; outgoing =
	 white, r20/20/2/20, avatar on the right. */
.srvd-chat-log { margin: 0; padding: 0; list-style: none; }   /* reboot ul beats the :where() list reset */
.srvd-chat-message { display: flex; align-items: flex-end; gap: 10px; width: 380px; color: var(--pos-text); }
.srvd-chat-message--out { justify-content: flex-end; }
.srvd-chat-message__avatar { display: flex; flex-direction: column; gap: 2px; flex: 0 0 24px; width: 24px; height: 41px; }
.srvd-chat-message__avatar img { display: block; width: 24px; height: 24px; border-radius: 50%; }
.srvd-chat-message__stack { display: flex; flex-direction: column; gap: 2px; width: 264px; }
.srvd-chat-message__bubble {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 8px 12px;
	border-radius: 20px 20px 20px 2px;
	background: var(--pos-card);
}
.srvd-chat-message--out .srvd-chat-message__bubble { border-radius: 20px 20px 2px 20px; background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-chat-message__name { display: block; height: 17px; font-size: 11px; line-height: 14.9px; font-weight: 700; }
.srvd-chat-message__text { width: 240px; height: 80px; margin: 0; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }   /* Figma lays the 15.6 auto line height out at a whole 16px pitch (5 lines = the 80px box) */
.srvd-chat-message__status { position: absolute; right: 12px; bottom: 8px; width: 16px; height: 16px; opacity: 0.4; }
.srvd-chat-message__status--read { opacity: 1; }
.srvd-chat-message__status svg, .srvd-chat-status svg { display: block; width: 16px; height: 16px; }
.srvd-chat-message__time { display: block; height: 15px; font-size: 11px; line-height: 14.9px; color: var(--pos-muted); }

/* standalone status ticks (the "message status" cset) */
.srvd-chat-status { display: block; width: 16px; height: 16px; color: var(--pos-text); }
.srvd-chat-status--sent, .srvd-chat-status--received { opacity: 0.4; }

/* date separator pill */
.srvd-chat-date {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 27px;
	padding: 6px 12px;
	border-radius: 20px;
	background: var(--pos-card);
	color: var(--pos-text);
	font-size: 11px;
	line-height: 14.9px;
	white-space: nowrap;
}

/* voice message: 40px round button + clipped waveform (3px bars, 2px gaps) + time */
.srvd-chat-audio {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 180px;
	height: 56px;
	padding: 8px 8px 8px 0;
	color: var(--pos-text);
}
.srvd-chat-audio__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--pos-bg);
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-chat-audio__btn svg { display: block; width: 24px; height: 24px; }
.srvd-chat-audio__wave { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; height: 31px; min-width: 0; overflow: hidden; }
.srvd-chat-audio__wave i { display: block; flex: 0 0 3px; width: 3px; background: currentColor; }
.srvd-chat-audio:has(.srvd-chat-audio__btn[aria-pressed="true"]) .srvd-chat-audio__wave i, .srvd-chat-audio--playing .srvd-chat-audio__wave i { background: var(--pos-faint); }
.srvd-chat-audio:has(.srvd-chat-audio__btn[aria-pressed="true"]) .srvd-chat-audio__wave i.is-played, .srvd-chat-audio--playing .srvd-chat-audio__wave i.is-played { background: currentColor; }
.srvd-chat-audio__time { flex: 0 0 22px; width: 22px; font-size: 13px; line-height: 15.6px; letter-spacing: -0.08px; }

/* file message: 40px tinted circle (optional 270° progress ring) + name / size + action */
.srvd-chat-file {
	display: flex;
	align-items: center;
	gap: 16px;
	box-sizing: border-box;
	width: 180px;
	height: 56px;
	padding: 8px 8px 8px 0;
	color: var(--pos-text);
}
.srvd-chat-file__circle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pos-card);
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-chat-file__circle > svg:not(.srvd-chat-file__ring) { display: block; width: 24px; height: 24px; }
.srvd-chat-file__ring { position: absolute; left: -2px; top: -2px; width: 44px; height: 44px; overflow: visible; }
.srvd-chat-file__ring-track { stroke: var(--pos-faint); }
.srvd-chat-file__info { display: flex; flex-direction: column; gap: 4px; width: 116px; font-size: 13px; line-height: 15.6px; letter-spacing: -0.08px; }
.srvd-chat-file__name { display: block; height: 16px; font-weight: 700; letter-spacing: -0.065px; }
.srvd-chat-file__meta { display: flex; align-items: center; gap: 8px; height: 16px; white-space: nowrap; }
.srvd-chat-file__meta b { font-weight: 700; letter-spacing: -0.065px; }
.srvd-chat-audio__btn:focus-visible, .srvd-chat-file__circle:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* --- iOS Assets sheet (4413:4557): status bars, home indicator, alert /
	 permission dialogs, iOS keyboards, Safari URL bars, share sheet and push
	 notifications. All iOS text is SF Pro Text/Display -> Inter Tight fallback. */
.srvd-ios { --srvd-ios-font: "SF Pro Text", "SF Pro Display", "Inter Tight", system-ui, sans-serif; }

/* status bar (iPhone 13 Mini 375x44, iPhone 14 Pro 375x50) + home indicator */
.srvd-ios-status-bar {
	position: relative;
	width: 375px;
	height: 44px;
	font-family: var(--srvd-ios-font);
	color: #ffffff;
}
.srvd-ios-status-bar--pro { height: 50px; }
.srvd-ios-status-bar__time {
	position: absolute;
	left: 16px;
	top: 19.5px;
	width: 79px;
	text-align: center;
	font-size: 15px;
	line-height: 18px;
	font-weight: 600;
	letter-spacing: -0.5px;
}
.srvd-ios-status-bar--pro .srvd-ios-status-bar__time { top: 22.5px; width: 95px; }
.srvd-ios-status-bar__cluster { position: absolute; left: 286.5px; top: 23.2px; }
.srvd-ios-status-bar--pro .srvd-ios-status-bar__cluster { left: 271px; top: 25px; }
.srvd-ios-status-bar__cluster svg { display: block; }
.srvd-ios-home { position: relative; width: 375px; height: 34px; }
.srvd-ios-home::after {
	content: "";
	position: absolute;
	left: 120px;
	top: 21px;
	width: 135px;
	height: 5px;
	border-radius: 100px;
	background: #ffffff;
}

/* iOS alert / permission dialog (270 wide; hairlines are 0.5px = 1 device px @2x) */
.srvd-dialog {
	position: relative;
	box-sizing: border-box;
	width: 270px;
	overflow: hidden;
	border-radius: 14px;
	background: rgba(30, 30, 30, 0.75);
	font-family: var(--srvd-ios-font);
	color: #ffffff;
}
.srvd-dialog__content {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	text-align: center;
	white-space: nowrap;
}
.srvd-dialog__title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.408px; }
.srvd-dialog__desc { margin: 0; font-size: 13px; line-height: 18px; letter-spacing: -0.078px; }
.srvd-dialog__sep { flex: 0 0 0.5px; height: 0.5px; background: rgba(235, 235, 245, 0.18); }
.srvd-dialog__vsep { flex: 0 0 0.5px; width: 0.5px; background: rgba(235, 235, 245, 0.18); }
.srvd-dialog__map { position: relative; height: 207px; }
.srvd-dialog__map img { display: block; width: 270px; height: 207px; }
.srvd-dialog__pin {
	position: absolute;
	left: 77px;
	top: 58.5px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #167bf1;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.srvd-dialog__pin::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #19171d;
}
.srvd-dialog__actions { display: flex; }
.srvd-dialog__actions--stack { flex-direction: column; }
.srvd-dialog__action {
	flex: 1 1 0;
	box-sizing: border-box;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #0a84ff;
	font-family: inherit;
	font-size: 17px;
	line-height: 22px;
	letter-spacing: -0.408px;
	white-space: nowrap;
	cursor: pointer;
}
.srvd-dialog__actions--stack .srvd-dialog__action { flex: 0 0 44px; }
.srvd-dialog__action--bold { font-weight: 600; }
.srvd-dialog__action:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-dialog__action:hover:where(:not(:disabled)), .srvd-dialog__action.is-hover { background: var(--pos-chip); }
.srvd-dialog__action:active:where(:not(:disabled)), .srvd-dialog__action.is-pressed { background: var(--pos-chip-hover); }
.srvd-dialog__action:disabled, .srvd-dialog__action.is-disabled { opacity: 0.4; cursor: default; }
.srvd-dialog:modal { position: fixed; inset: 0; margin: auto; }

/* numeric keyboard: 4 rows of 117x46 keys on the shared .srvd-ios-keyboard base */
.srvd-ios-keyboard--num { padding: 6px 6px 3px; }
.srvd-ios-keyboard--num .srvd-ios-keyboard__row { gap: 6px; height: 46px; margin-bottom: 8px; }
.srvd-ios-keyboard--num .srvd-ios-keyboard__key { position: relative; flex-basis: 117px; width: 117px; height: 46px; border-radius: 5px; }
.srvd-ios-keyboard--num .srvd-ios-keyboard__key--blank { background: none; box-shadow: none; }
.srvd-ios-keyboard--num .srvd-ios-keyboard__key--blank svg { display: block; width: 117px; height: 46px; }
.srvd-ios-keyboard__num {
	position: absolute;
	left: 0;
	right: 0;
	top: 1px;
	font-size: 25px;
	line-height: 30px;
	letter-spacing: 0.291px;
	text-transform: none;
}
.srvd-ios-keyboard__abc {
	position: absolute;
	left: 0;
	right: 0;
	top: 29px;
	font-size: 10px;
	line-height: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

/* emoji keyboard (375x333): Apple emoji come from a sprite cropped out of the
	 sheet export (36x36 cells, 8 columns x 5 rows) — Windows has no Apple glyphs */
.srvd-ios-keyboard--emoji { height: 333px; padding: 0; background: rgba(44, 44, 46, 0.94); }
.srvd-ios-keyboard__ehead {
	position: absolute;
	top: 8px;
	font-size: 12px;
	line-height: 14px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: rgba(235, 235, 245, 0.6);
	opacity: 0.7;
	white-space: nowrap;
}
.srvd-ios-keyboard__egrid { position: absolute; top: 30.5px; display: grid; grid-template-columns: repeat(6, 36px); gap: 2px 10px; }
.srvd-ios-keyboard__egrid--people { grid-template-columns: repeat(2, 36px); }
.srvd-ios-keyboard__emoji {
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	background: url("../images/demo/ios-emoji-sprite.png") no-repeat;
	background-size: 288px 180px;
	cursor: pointer;
}
.srvd-ios-keyboard__ehl { position: absolute; left: 11.5px; top: 223px; width: 30px; height: 30px; border-radius: 50%; background: rgba(51, 52, 52, 0.6); }
.srvd-ios-keyboard__erecent { position: absolute; left: 18.5px; top: 230px; }
.srvd-ios-keyboard__eidx { position: absolute; left: 56px; top: 229px; }
.srvd-ios-keyboard__erecent svg, .srvd-ios-keyboard__eidx svg, .srvd-ios-keyboard__eback svg, .srvd-ios-keyboard__emic svg { display: block; }
.srvd-ios-keyboard__eback, .srvd-ios-keyboard__eabc, .srvd-ios-keyboard__emic {
	position: absolute;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font-family: inherit;
	cursor: pointer;
}
.srvd-ios-keyboard__eback { left: 341px; top: 229px; }
.srvd-ios-keyboard__eabc { left: 25px; top: 287px; font-size: 15px; line-height: 18px; letter-spacing: -0.516px; }
.srvd-ios-keyboard__emic { left: 330px; top: 283px; }
.srvd-ios-keyboard__emoji:focus-visible, .srvd-ios-keyboard__eback:focus-visible, .srvd-ios-keyboard__eabc:focus-visible, .srvd-ios-keyboard__emic:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7);
}

/* Safari URL bars (375 wide; status bar on top, or toolbar + home indicator below) */
.srvd-safari {
	position: relative;
	width: 375px;
	background: rgba(61, 61, 61, 0.94);
	font-family: var(--srvd-ios-font);
	color: #ffffff;
}
.srvd-safari--bottom { box-shadow: inset 0 0.33px 0 rgba(0, 0, 0, 0.3); }   /* Figma inner shadow y=0.33 */
.srvd-safari > .srvd-ios-status-bar { position: absolute; left: 0; top: 0; }
.srvd-safari > .srvd-ios-home { position: absolute; left: 0; top: 99px; }
.srvd-safari__domain {
	position: absolute;
	left: 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 3px;
	width: 375px;
	height: 25px;
	padding: 1px 0 9px 146px;              /* lock at Figma's x (see .srvd-safari__url) */
	font-size: 12.66px;
	line-height: 15px;
	letter-spacing: 0.127px;
}
.srvd-safari__lock { display: flex; align-items: center; justify-content: center; width: 11px; height: 12px; }
.srvd-safari__lock svg { display: block; }
.srvd-safari__field {
	position: absolute;
	left: 10px;
	box-sizing: border-box;
	width: 355px;
	height: 36px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.08);
}
.srvd-safari__field--bottom { left: 22px; top: 8px; width: 331px; height: 44px; border-radius: 12px; }
.srvd-safari__aa, .srvd-safari__reload { position: absolute; }
.srvd-safari__aa svg, .srvd-safari__reload svg, .srvd-safari__toolbar svg { display: block; }
/* the lock + domain group is anchored at Figma's x (centred in Figma, but the SF ->
	 Inter Tight width difference would otherwise shift the lock glyph) */
.srvd-safari__url {
	position: absolute;
	left: 122.5px;
	display: flex;
	align-items: center;
	gap: 4px;
	height: 19px;
	font-size: 16px;
	line-height: 19px;
	letter-spacing: -0.448px;
}
.srvd-safari__field--bottom .srvd-safari__url { left: 110px; }
.srvd-safari__url .srvd-safari__lock { width: 15px; height: 17px; }
.srvd-safari__url--dim .srvd-safari__lock { opacity: 0.5; }
.srvd-safari__toolbar { position: absolute; left: 0; top: 56px; }

/* iOS share sheet (375x656, clips the 5th "share to" contact like Figma) */
.srvd-ios-share {
	position: relative;
	box-sizing: border-box;
	width: 375px;
	height: 656px;
	overflow: hidden;
	border-radius: 13px 13px 0 0;
	background: rgba(61, 61, 61, 0.94);
	font-family: var(--srvd-ios-font);
	color: #ffffff;
}
.srvd-ios-share__head {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 72px;
	padding: 16px;
}
.srvd-ios-share__file {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	border-radius: 1px;
	background: #2c2c2e;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.srvd-ios-share__file img { display: block; width: 18px; height: 18px; border-radius: 3.9px; }
.srvd-ios-share__meta { flex: 1 1 auto; min-width: 0; }
.srvd-ios-share__title { margin: 0; font-size: 16px; line-height: 21px; font-weight: 600; letter-spacing: -0.32px; color: inherit; }
.srvd-ios-share__sub { font-size: 13px; line-height: 18px; letter-spacing: -0.078px; color: rgba(235, 235, 245, 0.6); }
.srvd-ios-share__close {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #2c2c2e;
	color: rgba(235, 235, 245, 0.6);
	cursor: pointer;
}
.srvd-ios-share__close svg { display: block; }
.srvd-ios-share__sep { position: absolute; left: 0; width: 375px; height: 0.5px; background: rgba(235, 235, 245, 0.18); }
.srvd-ios-share__people, .srvd-ios-share__apps {
	position: absolute;
	left: 0;
	display: flex;
	align-items: flex-start;
	gap: 18px;
	padding: 0 16px;
}
.srvd-ios-share__people { top: 93px; height: 98px; }
.srvd-ios-share__apps { top: 228px; height: 77px; gap: 32px; }
.srvd-ios-share__to {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 72px;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 11px;
	line-height: 13px;
	letter-spacing: 0.066px;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
}
.srvd-ios-share__to--airdrop, .srvd-ios-share__to--app { width: 60px; }
.srvd-ios-share__to img { display: block; }
.srvd-ios-share__to--app img { border-radius: 13px; }
.srvd-ios-share__dim { color: rgba(235, 235, 245, 0.6); }
.srvd-ios-share__airdrop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: 13px;
	background: #ffffff;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
}
.srvd-ios-share__airdrop svg { display: block; }
.srvd-ios-share__actions { position: absolute; left: 16px; top: 329px; display: flex; flex-direction: column; gap: 16px; width: 343px; }
.srvd-ios-share__group { overflow: hidden; border-radius: 13px; background: #2c2c2e; }
.srvd-ios-share__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 13px 16px;
	border: 0;
	background: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 17px;
	line-height: 22px;
	letter-spacing: -0.408px;
	cursor: pointer;
}
.srvd-ios-share__row + .srvd-ios-share__row { box-shadow: inset 0 0.5px 0 rgba(235, 235, 245, 0.18); }
.srvd-ios-share__icon { display: flex; align-items: center; justify-content: flex-end; height: 22px; }
.srvd-ios-share__icon svg { display: block; }
.srvd-ios-share__edit {
	align-self: flex-start;
	margin: 0;
	padding: 0 0 0 16px;
	border: 0;
	background: none;
	color: #0a84ff;
	font-family: inherit;
	font-size: 17px;
	line-height: 22px;
	letter-spacing: -0.408px;
	cursor: pointer;
}
.srvd-ios-share__close:focus-visible, .srvd-ios-share__to:focus-visible, .srvd-ios-share__row:focus-visible, .srvd-ios-share__edit:focus-visible {
	outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color);
	outline-offset: -2px;
}
.srvd-ios-share__row:hover:where(:not(:disabled)), .srvd-ios-share__row.is-hover { background: var(--pos-chip); }
.srvd-ios-share__row:active:where(:not(:disabled)), .srvd-ios-share__row.is-pressed { background: var(--pos-chip-hover); }
.srvd-ios-share__to:hover:where(:not(:disabled)), .srvd-ios-share__edit:hover:where(:not(:disabled)) { opacity: 0.85; }
.srvd-ios-share__to:active:where(:not(:disabled)), .srvd-ios-share__edit:active:where(:not(:disabled)) { opacity: 0.7; }
.srvd-ios-share__close:hover:where(:not(:disabled)) { color: #ffffff; }
.srvd-ios-share__close:active:where(:not(:disabled)) { opacity: 0.7; }
.srvd-ios-share__to:disabled, .srvd-ios-share__row:disabled, .srvd-ios-share__edit:disabled, .srvd-ios-share__close:disabled { opacity: 0.4; cursor: default; }
.srvd-ios-share:modal { position: fixed; inset: auto 0 0; margin: 0 auto; }

/* push notifications (347 wide; the summary tile is 167.5x222) */
.srvd-push-notification { position: relative; width: 347px; font-family: var(--srvd-ios-font); color: #ffffff; }
.srvd-push-notification__body {
	display: flex;
	align-items: center;
	gap: 14px;
	box-sizing: border-box;
	padding: 14px;
	border-radius: 23px;
	background: rgba(30, 30, 30, 0.75);
}
.srvd-push-notification__icon { display: block; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 8px; }
.srvd-push-notification__text { flex: 1 1 auto; min-width: 0; }
.srvd-push-notification__row { display: flex; justify-content: space-between; align-items: flex-start; height: 18px; padding-right: 4px; }
.srvd-push-notification__title { font-size: 15px; line-height: 18px; font-weight: 600; letter-spacing: -0.3px; white-space: nowrap; }
.srvd-push-notification__emoji { display: inline-block; width: 20px; height: 20px; margin-left: -1px; vertical-align: -5px; }
.srvd-push-notification__time {
	flex: 0 0 auto;
	padding-top: 3px;
	font-size: 12px;
	line-height: 14px;
	font-weight: 500;
	letter-spacing: -0.24px;
	text-align: right;
}
.srvd-push-notification__time--dim, .srvd-push-notification__ago { color: rgba(235, 235, 245, 0.6); }
.srvd-push-notification__msg { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 18px; letter-spacing: -0.3px; }
.srvd-push-notification__msg > span { flex: 1 1 auto; white-space: nowrap; }   /* explicit <br> at Figma's line breaks */
.srvd-push-notification__thumb { display: block; flex: 0 0 auto; }
.srvd-push-notification__thumb--32 { width: 32px; height: 32px; border-radius: 8px; }
.srvd-push-notification__thumb--80 { width: 80px; height: 80px; border-radius: 16px; }
.srvd-push-notification__desc { font-size: 12px; line-height: 14px; }
.srvd-push-notification__ago { margin-top: 4px; font-size: 12px; line-height: 14px; }
/* pressed: flat #2c2c2e head, big photo, action buttons */
.srvd-push-notification--expanded .srvd-push-notification__body { border-radius: 13px 13px 0 0; background: #2c2c2e; }
.srvd-push-notification--expanded .srvd-push-notification__row { padding-right: 4px; }
.srvd-push-notification--expanded .srvd-push-notification__time { margin-left: 8px; }
.srvd-push-notification__photo { display: block; width: 347px; height: 272px; border-radius: 0 0 13px 13px; }
/* Figma's 16px "spacer" overlaps the photo's bottom edge — the actions start right at 82 + 272 */
.srvd-push-notification__actions { overflow: hidden; border-radius: 13px; background: rgba(61, 61, 61, 0.94); }
.srvd-push-notification__action {
	display: block;
	width: 100%;
	height: 59px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	font-family: inherit;
	font-size: 20px;
	line-height: 24px;
	cursor: pointer;
}
.srvd-push-notification__action:first-child { box-shadow: inset 0 -0.5px 0 rgba(235, 235, 245, 0.18); }
/* summary banner: icon column + 179px text column + 80px cover */
.srvd-push-notification--banner .srvd-push-notification__body { align-items: stretch; height: 98px; padding: 8px 8px 8px 14px; border-radius: 24px; }
.srvd-push-notification__iconcol { display: flex; align-items: center; flex: 0 0 38px; width: 38px; }
.srvd-push-notification--banner .srvd-push-notification__text { display: flex; flex-direction: column; gap: 4px; flex: 0 0 179px; width: 179px; padding: 7px 7px 7px 0; box-sizing: border-box; }
.srvd-push-notification--banner .srvd-push-notification__title, .srvd-push-notification--tile .srvd-push-notification__title { font-weight: 500; }
.srvd-push-notification--banner .srvd-push-notification__ago, .srvd-push-notification--tile .srvd-push-notification__ago { margin-top: 0; }
/* summary tile */
.srvd-push-notification--tile { box-sizing: border-box; width: 167.5px; height: 222px; padding: 140px 14px 14px; overflow: hidden; border-radius: 24px; background: rgba(30, 30, 30, 0.75); }
.srvd-push-notification__cover { position: absolute; left: 0; top: 0; display: block; width: 168px; height: 126px; border-radius: 23px 23px 0 0; }
.srvd-push-notification__icon--sm { position: absolute; left: 14px; top: 17px; width: 24px; height: 24px; }
.srvd-push-notification--tile .srvd-push-notification__text { display: flex; flex-direction: column; gap: 4px; width: 139.5px; }
.srvd-push-notification__action:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-push-notification__action:hover:where(:not(:disabled)), .srvd-push-notification__action.is-hover { background: var(--pos-chip); }
.srvd-push-notification__action:active:where(:not(:disabled)), .srvd-push-notification__action.is-pressed { background: var(--pos-chip-hover); }
.srvd-push-notification__action:disabled, .srvd-push-notification__action.is-disabled { opacity: 0.4; cursor: default; }

/* --- Dropdowns sheet (Figma "Dropdowns" 1243:831): .srvd-dropdown dropdown menu + .srvd-dropdown__option
	 rows. The Calendar sheet's year picker (a 127px .srvd-dropdown) uses the same family — its
	 earlier rules were folded in here. .srvd-dropdown is the popup surface; the element that holds
	 the options (.srvd-dropdown__options, or the .srvd-dropdown itself without a wrapper) carries the role:
	 menu (role="menuitem" buttons), listbox (role="option" buttons on aria-selected) or
	 group (label + checkbox options); a subheader is role="presentation" and labels the
	 holder through aria-labelledby. The trigger is a button with aria-haspopup /
	 aria-expanded / aria-controls (the .srvd-dropdown hidden while collapsed; app.js toggles it,
	 Bootstrap's .dropdown does inside the interop case); the in-menu search input is a
	 combobox controlling the listbox. States: hover white row, aria-selected / :active =
	 bold value, :disabled dimmed, the focus ring inside the row. Option rows stack icon / value / subtitle / shortcut
	 with no gap, centred in a 56px box: taller content overflows the box symmetrically
	 (24px-icon rows start 1.5px above the row), exactly like Figma's auto-layout. -------- */
.srvd-dropdown {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 8px 0 0;
	border-radius: 24px;
	background: var(--pos-bg);
	box-shadow: 0 40px 60px var(--pos-shadow);
	color: var(--pos-text);
	overflow: hidden;
}
.srvd-dropdown__options {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	padding-bottom: 8px;
	border-radius: 10px;
	overflow-x: hidden;
	overflow-y: auto;   /* kit.js caps a menu to the viewport (max-height on the menu): the options scroll */
	overscroll-behavior: contain;
}
.srvd-dropdown__option {
	box-sizing: border-box;
	display: flex;
	flex: none;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	width: 100%;
	height: 56px;
	padding: 12px 24px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--pos-text);
	font: inherit;
	text-align: left;
	text-decoration: none;
}
.srvd-dropdown__option:focus-visible { outline: 2px solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-dropdown__value { font-size: 16px; line-height: 19px; font-weight: 400; color: inherit; white-space: nowrap; }
.srvd-dropdown__sub { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); white-space: nowrap; }
.srvd-dropdown[hidden] { display: none; }
/* --popover / --hug (F8, checkout): a menu that opens over a pop-up paints the Layer 1 --pos-popover
	 surface (the loyalty search 28902:28268, the tables printer picker); --hug lets every option hug
	 its content (Figma's hugging "dropdown option" instances: 59px for a value with a subtitle)
	 instead of the sheet's fixed 56px box */
.srvd-dropdown--popover { background: var(--pos-popover); }
.srvd-dropdown--hug .srvd-dropdown__option { height: auto; min-height: 56px; }
.srvd-dropdown__option:hover:where(:not(:disabled)), .srvd-dropdown__option.is-hover { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-dropdown__option:hover:where(:not(:disabled)) .srvd-dropdown__value, .srvd-dropdown__option.is-hover .srvd-dropdown__value { font-weight: 500; }
.srvd-dropdown__option[aria-selected="true"] .srvd-dropdown__value, .srvd-dropdown__option:active:where(:not(:disabled)) .srvd-dropdown__value, .srvd-dropdown__option.is-pressed .srvd-dropdown__value { font-weight: 700; letter-spacing: -0.16px; }
.srvd-dropdown__option:disabled .srvd-dropdown__value, .srvd-dropdown__option.is-disabled .srvd-dropdown__value { opacity: 0.4; }
.srvd-dropdown__option:disabled, .srvd-dropdown__option.is-disabled { cursor: default; }
.srvd-dropdown__subheader {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	width: 100%;
	height: 40px;
	padding: 16px 24px 8px;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: -0.08px;
	color: var(--pos-muted);
	white-space: nowrap;
}
.srvd-dropdown__icon { display: block; flex: none; width: 24px; height: 24px; }
.srvd-dropdown__icon svg { display: block; width: 24px; height: 24px; }
.srvd-dropdown__avatar { display: block; flex: none; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.srvd-dropdown__kbd {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 2px;
	box-sizing: border-box;
	height: 24px;
	padding: 2px 8px;
	border-radius: 8px;
	background: var(--pos-card);
	font-family: inherit;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: -0.08px;
	color: var(--pos-muted);
}
.srvd-dropdown__kbd svg { display: block; }
.srvd-dropdown__input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; pointer-events: none; }
.srvd-dropdown__check {
	box-sizing: border-box;
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 1px solid var(--pos-muted);
	border-radius: 50%;
	background: var(--pos-bg);
	color: var(--pos-on-accent);   /* the check glyph on the accent box */
}
.srvd-dropdown__check svg { display: block; width: 14px; height: 14px; visibility: hidden; }
.srvd-dropdown__input:checked + .srvd-dropdown__check { background: var(--pos-accent); border-color: var(--pos-text); }
.srvd-dropdown__input:checked + .srvd-dropdown__check svg { visibility: visible; }
.srvd-dropdown__input:focus-visible + .srvd-dropdown__check { outline: 2px solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-dropdown__scrollbar { position: absolute; right: 8px; top: 17px; width: 4px; height: 60px; border-radius: 20px; background: var(--pos-faint); }
.srvd-dropdown__search { flex: none; box-sizing: border-box; padding: 8px 16px; }
/* the hover demo's pointer: Figma's white "Cursor" instance with its soft shadow (SVG export) */
.srvd-dropdown-cursor { pointer-events: none; }
.srvd-dropdown-cursor svg { display: block; }

/* --- Sidebar, Cursors & Keyboard shortcuts sheets (Figma "Sidebar" 3561:2071,
	 "Cursors" 2288:1573, "Keyboard shortcuts" 18539:10517) --------------------
	 .srvd-sidebar = the kit's desktop sidebar (260 wide, --collapsed = 100): a brand row,
	 then a space-between column so the account group sits at the bottom;
	 .srvd-sidebar-item rows are 56 high (pad 12/40, gap 12 | 4 collapsed) and --active
	 draws the inset pill (4/8, r12). .srvd-cursor = cursor glyph swatches (the hand /
	 move exports carry Figma's soft shadow, so they are larger than the 32px box
	 and anchored by their content). .srvd-kbd = shortcut chip that hugs its content
	 (20px for a bare key, 24px with a modifier glyph); .srvd-kbd-set = the wrapping
	 demo grid. ---------------------------------------------------------------- */
.srvd-sidebar {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 64px;
	box-sizing: border-box;
	width: 260px;
	height: 1024px;
	padding: 40px 0;
	background: var(--pos-bg);
	box-shadow: 0 40px 60px rgba(26, 69, 109, 0.07);
	color: var(--pos-text);
}
.srvd-sidebar--collapsed { width: 100px; }
.srvd-sidebar__brand {
	display: flex;
	flex: none;
	align-items: center;
	gap: 12px;
	width: 186px;
	height: 32px;
	color: inherit;
	text-decoration: none;
}
.srvd-sidebar--collapsed .srvd-sidebar__brand { width: 32px; }
.srvd-sidebar--collapsed .srvd-sidebar__name { display: none; }
/* Figma "Subtract": a 32px disc minus an 18px hole, angular gradient rotated 180deg */
.srvd-sidebar__logo {
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: conic-gradient(from 180deg, #0e96f9 0deg, #ff3939 97.5deg, #edac06 183.75deg, #bc16ca 268.125deg, #0d96f9 354.375deg, #0e96f9 360deg);
	-webkit-mask: radial-gradient(circle closest-side, transparent 8.5px, #000000 9.5px);
	mask: radial-gradient(circle closest-side, transparent 8.5px, #000000 9.5px);
}
.srvd-sidebar__name {
	font-family: "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	font-size: 17px;
	line-height: 22px;
	font-weight: 700;
	letter-spacing: -0.41px;
	white-space: nowrap;
}
.srvd-sidebar__nav {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: space-between;
	align-self: stretch;
	min-height: 0;
}
.srvd-sidebar__group { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.srvd-sidebar-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	box-sizing: border-box;
	width: 260px;
	height: 56px;
	padding: 12px 40px;
	color: var(--pos-text);
	text-decoration: none;
	font-size: 16px;
	line-height: 19px;
	white-space: nowrap;
}
.srvd-sidebar--collapsed .srvd-sidebar-item, .srvd-sidebar-item--collapsed { width: 100px; gap: 4px; }
/* states (F7): the inset pill (4 / 8, r12) is the ::before of every item - filled for the current
	 page (aria-current="page", twin --active), on hover and, darker, while pressed; the focus
	 ring sits inside the pill; a link that is not available is aria-disabled="true" */
.srvd-sidebar-item::before {
	content: "";
	position: absolute;
	inset: 4px 8px;
	border-radius: 12px;
	background: transparent;
}
.srvd-sidebar-item[aria-current="page"], .srvd-sidebar-item--active { font-weight: 700; letter-spacing: -0.16px; }
.srvd-sidebar-item[aria-current="page"]::before, .srvd-sidebar-item--active::before,
.srvd-sidebar-item:hover:where(:not([aria-disabled="true"]))::before, .srvd-sidebar-item.is-hover::before { background: var(--pos-card); }
.srvd-sidebar-item:active:where(:not([aria-disabled="true"]))::before, .srvd-sidebar-item.is-pressed::before { background: var(--pos-chip); }
.srvd-sidebar-item:focus-visible { outline: 0; }
.srvd-sidebar-item:focus-visible::before { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-sidebar-item[aria-disabled="true"], .srvd-sidebar-item.is-disabled { color: var(--pos-faint); pointer-events: none; }
.srvd-sidebar__brand:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 4px; border-radius: 8px; }
.srvd-sidebar-item > * { position: relative; }   /* content above the ::before pill */
.srvd-sidebar-item__icon { display: block; flex: none; width: 24px; height: 24px; }
.srvd-sidebar-item__icon svg { display: block; width: 24px; height: 24px; }
.srvd-sidebar-item__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.srvd-sidebar--collapsed .srvd-sidebar-item__label, .srvd-sidebar-item--collapsed .srvd-sidebar-item__label { display: none; }
.srvd-sidebar-item .srvd-badge { flex: none; }
/* the 32px avatar overflows the 24px icon slot by 4px on every side, as in Figma */
.srvd-sidebar-item__avatar { position: absolute; inset: -4px; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
/* collapsed hover tooltip: 10px right of the sidebar, vertically centred on the row */
.srvd-sidebar-item__tip { position: absolute; left: 110px; top: 10px; }

.srvd-cursor { position: relative; display: block; width: 32px; height: 32px; color: var(--pos-text); }
.srvd-cursor svg { position: absolute; left: 0; top: 0; display: block; }
.srvd-cursor--default svg { top: -0.5px; }
.srvd-cursor--hand svg { left: -41.5px; top: -32.5px; }
.srvd-cursor--grab svg { left: -41.5px; top: -31px; }
.srvd-cursor--move svg { left: -42px; top: -32.5px; }
.srvd-kbd {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	box-sizing: border-box;
	padding: 2px 8px;
	border-radius: 8px;
	background: var(--pos-card);
	font-family: inherit;
	font-size: 13px;
	line-height: 16px;
	letter-spacing: -0.08px;
	color: var(--pos-muted);
	white-space: nowrap;
}
.srvd-kbd svg { display: block; flex: none; height: 20px; }
/* Figma hugs the key letter to a 9px text box; Chrome advances General Sans "K" ~8.2px */
.srvd-kbd__key { display: inline-block; min-width: 9px; }

/* --- Modal sheet (Figma "Modal" 4413:4594): <dialog class="srvd-modal"> (RESETS), 360x295, whose
	 content is one <form method="dialog" class="srvd-modal__form"> (display: contents, so the head /
	 body / actions stay the dialog's flex children): the .srvd-modal__close button and Cancel are
	 submit buttons that close the dialog natively with their value as returnValue, Submit
	 closes it with "submit". The title is an <h2>. With the open attribute the dialog renders
	 in flow (the sheet); showModal() centres it (:modal) over the ::backdrop scrim. Inside
	 Bootstrap's .modal the .modal-content is the .srvd-modal (interop block). ------------------- */
.srvd-modal {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 360px;
	height: 295px;
	padding: 24px;
	border-radius: 12px;
	background: var(--pos-bg);
	box-shadow: 0 80px 250px var(--pos-shadow);
	color: var(--pos-text);
}
.srvd-modal:modal { position: fixed; inset: 0; margin: auto; }
.srvd-modal__form { display: contents; }
.srvd-modal__head { position: relative; flex: none; height: 40px; }
/* the title spans the whole head (the close button overlays its right end) */
.srvd-modal__title {
	position: absolute;
	left: 0;
	right: 0;
	top: 3px;
	margin: 0;
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.14px;
	text-align: center;
	color: inherit;                    /* reboot's heading colour */
}
.srvd-modal__close {
	position: absolute;
	right: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 8px;
	border: 0;
	border-radius: 50%;
	background: var(--pos-card);
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-modal__close svg { display: block; width: 24px; height: 24px; }
.srvd-modal__close:hover:where(:not(:disabled)), .srvd-modal__close.is-hover { background: var(--pos-chip); }
.srvd-modal__close:active:where(:not(:disabled)), .srvd-modal__close.is-pressed { background: var(--pos-chip-hover); }
.srvd-modal__close:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-modal__close:disabled, .srvd-modal__close.is-disabled { opacity: 0.4; cursor: default; }
.srvd-modal__body { flex: 1 1 auto; min-height: 0; }
.srvd-modal__actions { display: flex; flex: none; gap: 16px; }
.srvd-modal__actions > .srvd-btn { flex: 1 1 0; min-width: 0; padding: 0 16px; }

.srvd-breadcrumb { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.srvd-breadcrumb__list { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 0; list-style: none; }
.srvd-breadcrumb__item { display: flex; align-items: flex-start; gap: 16px; white-space: nowrap; }
.srvd-breadcrumb__link { color: inherit; text-decoration: none; border-radius: 4px; }
/* states (F7): a link lights up on hover, underlines while pressed, rings on keyboard focus;
	 the current level (li[aria-current="page"]) is plain text */
.srvd-breadcrumb__link:hover, .srvd-breadcrumb__link.is-hover { color: var(--pos-text); }
.srvd-breadcrumb__link:active, .srvd-breadcrumb__link.is-pressed { color: var(--pos-text); text-decoration: underline; }
.srvd-breadcrumb__link:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* separators: Figma's "/" and "•" sit in 18px text boxes of 5 / 7px (Chrome advances them
	 7 / 6px, which drifted the trail), the chevron is a 16px icon */
.srvd-breadcrumb__item + .srvd-breadcrumb__item::before { content: "/"; flex: none; width: 5px; line-height: 18px; }
.srvd-breadcrumb--bullet .srvd-breadcrumb__item + .srvd-breadcrumb__item::before { content: "\2022"; width: 7px; }
.srvd-breadcrumb--arrow .srvd-breadcrumb__list, .srvd-breadcrumb--arrow .srvd-breadcrumb__item { align-items: center; }
.srvd-breadcrumb--arrow .srvd-breadcrumb__item + .srvd-breadcrumb__item::before {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--pos-faint);   /* the chevron is a mask so its colour follows the token */
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M5.666 3.333L10.333 8L5.666 12.667' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'><path d='M5.666 3.333L10.333 8L5.666 12.667' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat;
}
.srvd-breadcrumb--compact .srvd-breadcrumb__list, .srvd-breadcrumb--compact .srvd-breadcrumb__item { align-items: center; gap: 4px; }
.srvd-breadcrumb--compact .srvd-breadcrumb__item + .srvd-breadcrumb__item::before { content: none; }
.srvd-breadcrumb__more { width: 144px; padding: 0; }
.srvd-breadcrumb__more svg { display: block; width: 24px; height: 24px; }
/* --- Tables sheet (Figma "Tables" 4380:4140): .srvd-table is a real <table> whose rows are flex
	 rows; .srvd-table--cell = a one-cell specimen table without the row chrome (hug width). A
	 sortable head is <th aria-sort> holding a .srvd-table__sort button: the glyph's two paths are
	 .srvd-table__sort-down / -up, dimmed unless aria-sort says descending / ascending; hover lifts
	 the head text to the text colour, the focus ring sits on the button. ------------------- */
.srvd-table-wrap { overflow: hidden; border-radius: 12px; }
.srvd-table { display: block; width: 100%; border-collapse: collapse; border-spacing: 0; color: var(--pos-text); }
.srvd-table--cell { width: max-content; }
.srvd-table--cell .srvd-table__row { padding: 0; background: none; box-shadow: none; }
.srvd-table thead, .srvd-table tbody { display: block; }
.srvd-table__row {
	display: flex;
	box-sizing: border-box;
	width: 100%;
	padding: 0 16px;
	background: var(--pos-bg);
	box-shadow: inset 0 -1px 0 var(--pos-hairline);   /* Figma's inside bottom stroke */
}
.srvd-table tbody .srvd-table__row:last-child { box-shadow: none; }
.srvd-table__th, .srvd-table__td {
	display: flex;
	flex: 1 1 0;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	padding: 0 12px;
	font-weight: 400;
	text-align: left;
	white-space: nowrap;
}
.srvd-table__th { gap: 4px; height: 44px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.srvd-table__td { gap: 12px; height: 60px; font-size: 16px; line-height: 19px; color: var(--pos-text); }
.srvd-table__th--check, .srvd-table__td--check { flex: none; }
.srvd-table__sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
	cursor: pointer;
}
.srvd-table__sort svg { display: block; width: 24px; height: 24px; color: var(--pos-text); }
.srvd-table__sort svg path { opacity: 0.2; }
th[aria-sort="descending"] .srvd-table__sort-down, th[aria-sort="ascending"] .srvd-table__sort-up { opacity: 1; }
.srvd-table__sort:hover:where(:not(:disabled)), .srvd-table__sort.is-hover { color: var(--pos-text); }
.srvd-table__sort:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; border-radius: 4px; }
.srvd-table__sort:disabled, .srvd-table__sort.is-disabled { cursor: default; opacity: 0.4; }
.srvd-table__avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }
.srvd-table .srvd-checkbox { display: block; }
.srvd-checkbox--sm .srvd-checkbox__box { width: 16px; height: 16px; }

/* --- WYSIWYG sheet (Figma "wysiwyg" 8065:6496) -------------------------------
	 The 89 editor glyphs are one <symbol> sprite (#wy-<name>, 24x24 boxes drawn
	 in currentColor); .srvd-wysiwyg__i / .srvd-wysiwyg__caret size a <use> of them. .srvd-wysiwyg is the
	 editor toolbar: a #19171d .srvd-wysiwyg__bar (pad 16) of .srvd-wysiwyg__group rows (24px
	 .srvd-wysiwyg__btn buttons 24 apart; --dd appends the 8x5 caret, :disabled = 25%),
	 .srvd-wysiwyg__std fills the width with its groups 48 apart before the trailing
	 undo / redo / more group. --compact is the hug-width bar (pad 16/24, groups
	 8 inside / 40 apart). --open tints the editor (rgba(95,93,102,.15)) and
	 shows the .srvd-wysiwyg__subrow: the opening button carries --open (a 48px r8-top
	 highlight behind it, the same tint) and .srvd-wysiwyg__sub is the secondary toolbar
	 (same tint again, pad 16, gap 24) at the left offset Figma pinned per
	 submenu. States on the real attributes: a formatting toggle carries
	 aria-pressed (pressed = the tile tint on the 48px ::before box), a menu
	 opener aria-haspopup + aria-expanded (+ aria-controls to its .srvd-wysiwyg__sub;
	 expanded = the r8-top highlight, the editor tints through :has()), hover /
	 pressed / focus on that same box; --open / is-* are the sheet twins. app.js
	 gives each toolbar one Tab stop with the arrow keys and flips aria-pressed
	 on a tap. .srvd-wysiwyg-glyph / .srvd-wysiwyg-tip are the icon-sheet display pieces. ---- */
.srvd-wysiwyg-sprite { display: none; }
.srvd-wysiwyg__i { display: block; width: 24px; height: 24px; fill: currentColor; }
.srvd-wysiwyg__caret { display: block; width: 8px; height: 5px; fill: currentColor; }
.srvd-wysiwyg-glyph { display: inline-flex; align-items: flex-start; color: var(--pos-text); }
.srvd-wysiwyg-glyph--dd .srvd-wysiwyg__caret { margin-top: 10px; }
.srvd-wysiwyg-tip {
	box-sizing: border-box;
	height: 26px;
	padding: 6px 8px;
	border-radius: 2px;
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	font-size: 12px;
	line-height: 14px;
	letter-spacing: 0;
	white-space: nowrap;
}

.srvd-wysiwyg { position: relative; width: 891px; color: var(--pos-text); }
.srvd-wysiwyg--compact { width: auto; }
.srvd-wysiwyg:has(.srvd-wysiwyg__btn[aria-expanded="true"]), .srvd-wysiwyg--open { background: var(--pos-card); }
.srvd-wysiwyg__bar { display: flex; align-items: center; padding: 16px; background: var(--pos-bg); }
.srvd-wysiwyg--compact .srvd-wysiwyg__bar { gap: 40px; padding: 16px 24px; }
.srvd-wysiwyg__std { display: flex; flex: 1 1 0; gap: 48px; }
.srvd-wysiwyg__group { display: flex; flex: none; gap: 24px; }
.srvd-wysiwyg--compact .srvd-wysiwyg__group { gap: 8px; }
.srvd-wysiwyg__btn {
	position: relative;
	display: flex;
	flex: none;
	align-items: flex-start;
	height: 24px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}
.srvd-wysiwyg__btn > svg { position: relative; }  /* above the state box */
.srvd-wysiwyg__btn:disabled { opacity: 0.25; cursor: default; }
.srvd-wysiwyg__btn--dd .srvd-wysiwyg__caret { margin-top: 10px; }
/* the 48px state box behind the 24px glyph (8px taller / 12px wider on every side; a --dd
	 button with its caret gets 56 wide): transparent at rest */
.srvd-wysiwyg__btn::before {
	content: "";
	position: absolute;
	inset: -8px -12px;
	border-radius: 8px;
	background: transparent;
}
.srvd-wysiwyg__btn:hover:where(:not(:disabled))::before, .srvd-wysiwyg__btn.is-hover::before { background: var(--pos-card); }
.srvd-wysiwyg__btn:active:where(:not(:disabled))::before, .srvd-wysiwyg__btn.is-pressed::before { background: var(--pos-chip); }
.srvd-wysiwyg__btn[aria-pressed="true"]::before, .srvd-wysiwyg__btn.is-active::before { background: var(--pos-tile); }
.srvd-wysiwyg__btn[aria-expanded="true"]::before, .srvd-wysiwyg__btn--open::before { border-radius: 8px 8px 0 0; background: var(--pos-card); }
.srvd-wysiwyg__btn:focus-visible { outline: 0; }
.srvd-wysiwyg__btn:focus-visible::before, .srvd-wysiwyg__btn.is-focused::before { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -2px; }
.srvd-wysiwyg__subrow { position: relative; height: 56px; }
.srvd-wysiwyg__sub {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	gap: 24px;
	padding: 16px;
	background: var(--pos-card);
}

/* --- Links & Safari browser sheets (Figma "Links" 20398:11205, "Safari browser"
	 21263:12047) ------------------------------------------------------------
	 .srvd-link is the text link: 16/24 inline-flex (gap 8, 2px side padding) whose
	 .srvd-link__text carries the 1px underline (--underline; 20% by default, solid
	 on hover / pressed) or, when focused, the 21px r6 ring 5px around the text.
	 States are real pseudo classes AND --hover / --pressed / --focused /
	 --visited / --disabled modifiers for the sheet. .srvd-link__icon is a 24px
	 leading / trailing glyph in currentColor. .srvd-link-note / .srvd-link-props are
	 the sheet's note column and properties table (rows 78, first row 97, demo
	 cell hugged to the right edge). .srvd-safari-bar is the 874px Safari chrome mock
	 (--mac 52px toolbar, --ipad 60px status + toolbar bar): every glyph is the
	 Figma vector inlined at its own position, .srvd-safari-bar__url is the field,
	 .srvd-safari-bar__domain / __status the SF Pro texts. ------------------------------- */
.srvd-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 2px;
	border-radius: 16px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0;
	color: var(--pos-text);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}
.srvd-link__text { position: relative; }
.srvd-link__icon { display: block; flex: none; width: 24px; height: 24px; color: inherit; }
.srvd-link__icon svg { display: block; width: 24px; height: 24px; }
.srvd-link--underline .srvd-link__text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 1px;
	height: 1px;
	background: currentColor;
	opacity: 0.2;
}
.srvd-link--underline:hover .srvd-link__text::after, .srvd-link--underline.srvd-link--hover .srvd-link__text::after,
.srvd-link--underline:active .srvd-link__text::after, .srvd-link--underline.srvd-link--pressed .srvd-link__text::after { opacity: 1; }
.srvd-link:visited, .srvd-link--visited { color: var(--pos-secondary); }
.srvd-link[aria-disabled="true"], .srvd-link--disabled { color: var(--pos-muted); pointer-events: none; }
.srvd-link:focus-visible, .srvd-link--focused { outline: none; }
.srvd-link:focus-visible .srvd-link__text::after, .srvd-link--focused .srvd-link__text::after { display: none; }
.srvd-link:focus-visible .srvd-link__text::before, .srvd-link--focused .srvd-link__text::before {
	content: "";
	position: absolute;
	left: -5px;
	right: -5px;
	top: 2.5px;
	height: 21px;
	box-sizing: border-box;
	border: 1px solid currentColor;
	border-radius: 6px;
}

.srvd-safari-bar {
	position: relative;
	box-sizing: border-box;
	width: 874px;
	background: #2c2c2e;
	font-family: "SF Pro Text", "SF Pro Display", "Inter Tight", system-ui, sans-serif;
	color: #ffffff;
}
.srvd-safari-bar--mac { height: 52px; }
.srvd-safari-bar--ipad { height: 60px; box-shadow: inset 0 -1px 0 #dfdfdf; }
.srvd-safari-bar__light { position: absolute; box-sizing: border-box; width: 12px; height: 12px; border-radius: 50%; border: 1px solid; }
.srvd-safari-bar__light--close { background: #ff5f57; border-color: #e14640; }
.srvd-safari-bar__light--min { background: #ffbd2e; border-color: #dfa123; }
.srvd-safari-bar__light--max { background: #28ca42; border-color: #1dad2c; }
.srvd-safari-bar__glyph { position: absolute; display: block; line-height: 0; }
.srvd-safari-bar__glyph svg { display: block; }
.srvd-safari-bar__url { position: absolute; box-sizing: border-box; border-radius: 5px; background: #474a4d; }
.srvd-safari-bar__url--r9 { border-radius: 9px; }
.srvd-safari-bar__domain {
	position: absolute;
	font-size: 13px;
	line-height: 16px;
	font-weight: 500;
	letter-spacing: 0;
	color: rgba(235, 235, 245, 0.6);
	white-space: nowrap;
}
.srvd-safari-bar__status { position: absolute; font-size: 12px; line-height: 14px; font-weight: 500; letter-spacing: 0; color: #ffffff; white-space: nowrap; }
.srvd-safari-bar__dot { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }

/* --- Interface Icons sheet (Figma "Interface Icons" 17046:12899) --------------
	 Every glyph is a <symbol> in the #ic-<key> sprite (24x24 boxes; the white
	 strokes / fills are currentColor, tinted fills stay as exported) drawn by
	 <span class="srvd-icons-glyph"><svg class="srvd-icons__i"><use href="#ic-add"/></svg></span>.
	 .srvd-icons-sheet is the 1080x5750 dark canvas as flow layout: pad 60, gap 80,
	 one .srvd-icons-set per icon set = a 960px flex-wrap grid (gap 20 / 20) whose
	 first child is the full-width 70px .srvd-icons-set__title separator, then 24px
	 glyphs (22 per row). --16 / --12 are the legacy tiny sizes, --empty the
	 blank placeholder component; exports whose render bounds overflow the box
	 carry their own size + floor(dx)/floor(dy) offset inline. ------------------ */
.srvd-icons-sprite { display: none; }
.srvd-icons-glyph {
	position: relative;
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	color: #ffffff;
}
.srvd-icons-glyph--16 { width: 16px; height: 16px; }
.srvd-icons-glyph--12 { width: 12px; height: 12px; }
.srvd-icons__i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Vuesax Icons sheets (Figma "Vuesax Icons" 17046:12922 + 21959:12334) ----
	 Two 1080x5750 dark canvases (Vuesax, Coolicons) as flow layout: pad 60,
	 gap 68, one .srvd-icons-vuesax-set per icon set = a 960px flex-wrap grid (gap 20 / 20)
	 whose first child is the full-width 70px .srvd-icons-vuesax-set__title separator (text
	 at the top of the box; --center for the Coolicons sheet), then 24px
	 glyphs (22 per row). Every glyph is a <symbol> in the #vx-<key> / #cl-<key>
	 sprite (24x24 boxes; the white strokes are currentColor, tinted fills
	 stay as exported) drawn by
	 <span class="srvd-icons-vuesax-glyph"><svg class="srvd-icons-vuesax__i"><use href="#vx-category"/></svg></span>.
	 --20 is the one 20px glyph, --empty a blank placeholder; exports whose
	 render bounds overflow the box carry their own size + dx/dy inline.
	 .srvd-icons-vuesax-link = the underlined 40px Figma hyperlink under the last set. ------ */
.vx-sprite,
.cl-sprite { display: none; }
.srvd-icons-vuesax-glyph {
	position: relative;
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	color: #ffffff;
}
.srvd-icons-vuesax-glyph--20 { width: 20px; height: 20px; }
.srvd-icons-vuesax__i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.srvd-icons-vuesax-link {
	display: block;
	/* General Sans has no Cyrillic: Figma rendered the whole node in its Roboto fallback
	   (the Latin glyph shapes and the text rows match Roboto exactly, not General Sans) */
	font-family: "Roboto", system-ui, -apple-system, sans-serif;
	font-size: 40px;
	line-height: 46px;
	font-weight: 400;
	letter-spacing: 0.48px;
	color: #ffffff;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 5px;
}
.srvd-icons-vuesax-link:hover { color: #ffffff; }

/* --- Extended Icons sheet (Figma "Extended Icons" 17046:13193) ----------------
	 One 1080x5750 dark canvas as flow layout: pad 60, gap 80, one .srvd-icons-extended-set per
	 icon set = a 960px flex-wrap grid (gap 20 / 20) whose first child is the
	 full-width 70px .srvd-icons-extended-set__title separator (text at the top of the box),
	 then 24px glyphs (22 per row). Every glyph is a <symbol> in the #ex-<key>
	 sprite (24x24 boxes; the 1.6px white strokes are currentColor) drawn by
	 <span class="srvd-icons-extended-glyph"><svg class="srvd-icons-extended__i"><use href="#ex-activity"/></svg></span>.
	 --sf is the one separator set in SF Pro Display 22/44 (Education) in the
	 kit's Inter Tight stand-in stack; --empty a blank placeholder. ------------ */
.ex-sprite { display: none; }
.srvd-icons-extended-glyph {
	position: relative;
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	color: #ffffff;
}
.srvd-icons-extended__i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Flags and logos sheets (Figma "Flags and logos" 18914:12161) -------------
	 Three dark canvases (Payment Methods Icons 1080x427, Flags 1080x471, Logos
	 1080x4752) stacked 50px apart, each as flow layout: pad 60, gap 80, the
	 48/55 title, then .srvd-flags-set rows = 960px flex-wrap grids (gap 20 / 20;
	 --860 for the narrower Rounded Monochrome row, --center / --end for the
	 Figma cross alignment) optionally opened by the full-width 70px
	 .srvd-flags-set__title separator. Every logo is a <symbol> in the multi-colour
	 #fl-<set>-<name> sprite (card-* 34x24, pay-* / flag-* / flagr-* / mono-* /
	 color-* 24x24, crypto-* 44x44, rmono-* / rcolor-* 60x60; only the mono and
	 rmono sets are currentColor) drawn by
	 <span class="srvd-flags-glyph"><svg class="srvd-flags__i"><use href="#fl-flag-usa"/></svg></span>.
	 --empty is a blank placeholder. --------------------------------------- */
/* the sprite must stay RENDERED (0x0, clipped) - a display:none sprite makes Chrome drop
	 every <clipPath> / <mask> / <filter> the multi-colour logos reference from their <use> */
.fl-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}
.srvd-flags {
	display: flex;
	flex-direction: column;
	gap: 50px;
	width: 1080px;
}
.srvd-flags-glyph {
	position: relative;
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	color: var(--pos-text);
}
.srvd-flags-glyph--34x24 { width: 34px; }
.srvd-flags-glyph--44x44 { width: 44px; height: 44px; }
.srvd-flags-glyph--60x60 { width: 60px; height: 60px; }
.srvd-flags__i {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
}
.srvd-pos-icon {
	display: inline-flex;
	flex: none;
	width: 24px;
	height: 24px;
}
.srvd-pos-icon--20 { width: 20px; height: 20px; }
.srvd-pos-icon svg { display: block; width: 100%; height: 100%; }

/* round 60px icon button of the menu strip (Figma "menu item" 28677:21888) */
.srvd-pos-menu-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 60px;
	height: 60px;
	padding: 10px;
	border: 0;
	border-radius: 48px;
	background: var(--pos-chip);
	color: var(--pos-text);
	font-size: 24px;                   /* icon-font glyphs (bi-*) fill the 24px slot like the SVGs */
	line-height: 1;
	text-decoration: none;             /* the wired rail's items are <a> (F8 sitting 9) */
	transition: background-color 0.15s ease, color 0.15s ease;
}
/* states (approved POS pages, F2b): hover, the current page / pressed toggle, focus ring; disabled = a rail
	 section without a screen yet (F8 sitting 9, R-62: the POS pages' Register = open the cash drawer), 40% like .srvd-tabbar__tab:disabled */
.srvd-pos-menu-item:hover:where(:not(:disabled, .is-disabled)), .srvd-pos-menu-item.is-hover { background: var(--pos-chip-hover); }
.srvd-pos-menu-item[aria-current="page"], .srvd-pos-menu-item[aria-pressed="true"], .srvd-pos-menu-item--active {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
}
.srvd-pos-menu-item[aria-current="page"]:hover, .srvd-pos-menu-item[aria-pressed="true"]:hover, .srvd-pos-menu-item--active:hover { background: var(--pos-accent-hover); }
.srvd-pos-menu-item:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-menu-item:disabled, .srvd-pos-menu-item.is-disabled { opacity: 0.4; cursor: default; }
/* --caption : the item stacks its glyph over an 11px muted caption (the login
	 timer under the employee item); the caption text is the page's, the 60px box stays */
.srvd-pos-menu-item--caption { flex-direction: column; gap: 2px; padding: 6px 4px; }
.srvd-pos-menu-item__caption {
	display: block;
	font-size: 11px;
	line-height: 13px;
	font-weight: 500;
	letter-spacing: -0.06px;
	color: var(--pos-muted);
	white-space: nowrap;
}
.srvd-pos-menu-item[aria-current="page"] .srvd-pos-menu-item__caption, .srvd-pos-menu-item[aria-pressed="true"] .srvd-pos-menu-item__caption { color: var(--pos-on-accent); }

/* category pill (Figma "category item" 28677:22067) */
.srvd-pos-cat {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 43px;
	padding: 12px 16px;
	border: 0;
	border-radius: 200px;
	background: transparent;
	color: var(--pos-text);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
	white-space: nowrap;
}
.srvd-pos-cat:hover:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat.is-hover { background: var(--pos-card); }
.srvd-pos-cat:active:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat.is-pressed { background: var(--pos-chip); }
.srvd-pos-cat[aria-pressed="true"], .srvd-pos-cat--active {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	font-weight: 500;
}
.srvd-pos-cat[aria-pressed="true"]:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.srvd-pos-cat:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-cat:disabled, .srvd-pos-cat.is-disabled { opacity: 0.4; cursor: default; }
/* --fill (F8, tables-menu): the pill as the category list places it (Figma "categories list" 28676:18190: 200 wide
	 in the 240px column, the title at the left) */
.srvd-pos-cat--fill { width: 100%; justify-content: flex-start; }
/* --colour : the pill painted like the coloured tile, from --srvd-pos-cat-colour at
	 --pos-cat-alpha (the order screen keeps a category's colour in the list view and in the row of pills below sm);
	 hover / pressed deepen the fill by 10 / 20 points as the tile does, the pressed pill keeps the accent */
.srvd-pos-cat--colour {
	--srvd-pos-cat-colour: var(--pos-muted);
	background: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100%), transparent);
	transition: background-color 0.15s ease;
}
.srvd-pos-cat--colour:hover:where(:not([aria-pressed="true"], :disabled)) { background: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100% + 10%), transparent); }
.srvd-pos-cat--colour:active:where(:not([aria-pressed="true"], :disabled)) { background: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100% + 20%), transparent); }

/* 118px category tile (Figma "category item tiles" 28682:14585) */
.srvd-pos-cat-tile {
	display: flex;
	align-items: flex-start;
	box-sizing: border-box;
	width: 118px;
	height: 118px;
	padding: 16px;
	border: 0;
	border-radius: 24px;
	background: var(--pos-tile);
	color: var(--pos-text);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
	text-align: left;
}
.srvd-pos-cat-tile:hover:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat-tile.is-hover { background: var(--pos-input-secondary); }
.srvd-pos-cat-tile:active:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat-tile.is-pressed { background: var(--pos-chip-hover); }
.srvd-pos-cat-tile[aria-pressed="true"], .srvd-pos-cat-tile--active {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
	font-weight: 500;
}
.srvd-pos-cat-tile[aria-pressed="true"]:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.srvd-pos-cat-tile:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-cat-tile:disabled, .srvd-pos-cat-tile.is-disabled { opacity: 0.4; cursor: default; }
.srvd-pos-cat-tile__title { width: 86px; margin: 0; font: inherit; color: inherit; }   /* an <h2> title: reboot's heading rules re-declared */
/* --fluid (F8, tables-menu): the tile as the category grid places it (Figma "categories list" 28682:1643: two
	 118px tiles in the 240px column = the kit size at 1440, square at other widths) */
.srvd-pos-cat-tile--fluid { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.srvd-pos-cat-tile--fluid .srvd-pos-cat-tile__title { width: auto; }

/* coloured category tile (Figma "category item 2 level" 28982:11377 and the 240px level-1
	 "category item 1 level" 28985:11439 of the SECTION "Menu colour palette" 28998:13033 - F8):
	 the tile paints --srvd-pos-cat-colour at --pos-cat-alpha (40%) and stacks a 13/16 title over an
	 11/15 caption at 60% (the approved page's rounded line heights: Chrome renders the Typekit
	 15.6 / 14.85 one device pixel above Figma's export - R-20); --group is the level-1 tile
	 (240 wide = two tiles and their 4px gutter, bold title, -0.065 tracking). Pick the colour
	 with a colour modifier below
	 (.srvd-pos-cat-tile--<slug> = the Layer 1 --pos-cat-<slug> token) or set --srvd-pos-cat-colour inline.
	 Hover / pressed deepen the fill by 10 / 20 points (the approved page's hover; Figma has no
	 state variants); a heading tile is a static <div> and keeps its fill and the default cursor.
	 Specimen page: menu-colour-palette.html (every colour). */
.srvd-pos-cat-tile--colour {
	--srvd-pos-cat-colour: var(--pos-muted);
	--srvd-pos-cat-fill: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100%), transparent);
	flex-direction: column;
	gap: 2px;
	background: var(--srvd-pos-cat-fill);
	font-size: 13px;
	line-height: 16px;
	letter-spacing: -0.08px;
	overflow: hidden;
	transition: background-color 0.15s ease;
}
.srvd-pos-cat-tile--colour .srvd-pos-cat-tile__title { width: auto; }
.srvd-pos-cat-tile--group { width: 240px; letter-spacing: -0.065px; }
.srvd-pos-cat-tile--group .srvd-pos-cat-tile__title { font-weight: 700; }
.srvd-pos-cat-tile__caption {
	margin: 0;
	font-size: 11px;
	line-height: 15px;
	letter-spacing: 0;
	opacity: 0.6;
}
.srvd-pos-cat-tile--colour:hover:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat-tile--colour.is-hover { background: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100% + 10%), transparent); }
.srvd-pos-cat-tile--colour:active:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-cat-tile--colour.is-pressed { background: color-mix(in srgb, var(--srvd-pos-cat-colour) calc(var(--pos-cat-alpha) * 100% + 20%), transparent); }
/* a static tile (the heading <div> of a group) is not a control */
.srvd-pos-cat-tile--colour:where(:not(button, a)) { cursor: default; }
.srvd-pos-cat-tile--colour:where(:not(button, a)):hover, .srvd-pos-cat-tile--colour:where(:not(button, a)):active { background: var(--srvd-pos-cat-fill); }
/* colour modifiers: one per Layer 1 --pos-cat-<slug> token (theme: menu-category-palette) */
/* Meat Dishes */
.srvd-pos-cat-tile--meat                    { --srvd-pos-cat-colour: var(--pos-cat-meat); }
.srvd-pos-cat-tile--meat-beef               { --srvd-pos-cat-colour: var(--pos-cat-meat-beef); }
.srvd-pos-cat-tile--meat-pork               { --srvd-pos-cat-colour: var(--pos-cat-meat-pork); }
.srvd-pos-cat-tile--meat-lamb               { --srvd-pos-cat-colour: var(--pos-cat-meat-lamb); }
.srvd-pos-cat-tile--meat-chicken            { --srvd-pos-cat-colour: var(--pos-cat-meat-chicken); }
.srvd-pos-cat-tile--meat-turkey-duck        { --srvd-pos-cat-colour: var(--pos-cat-meat-turkey-duck); }
/* Seafood Dishes */
.srvd-pos-cat-tile--seafood                 { --srvd-pos-cat-colour: var(--pos-cat-seafood); }
.srvd-pos-cat-tile--seafood-shellfish       { --srvd-pos-cat-colour: var(--pos-cat-seafood-shellfish); }
.srvd-pos-cat-tile--seafood-shrimp-prawn    { --srvd-pos-cat-colour: var(--pos-cat-seafood-shrimp-prawn); }
.srvd-pos-cat-tile--seafood-crab            { --srvd-pos-cat-colour: var(--pos-cat-seafood-crab); }
.srvd-pos-cat-tile--seafood-lobster         { --srvd-pos-cat-colour: var(--pos-cat-seafood-lobster); }
.srvd-pos-cat-tile--seafood-squid-octopus   { --srvd-pos-cat-colour: var(--pos-cat-seafood-squid-octopus); }
.srvd-pos-cat-tile--seafood-mussels-clams   { --srvd-pos-cat-colour: var(--pos-cat-seafood-mussels-clams); }
.srvd-pos-cat-tile--seafood-sushi-sashimi   { --srvd-pos-cat-colour: var(--pos-cat-seafood-sushi-sashimi); }
/* Vegetarian & Plant-Based */
.srvd-pos-cat-tile--vegetarian              { --srvd-pos-cat-colour: var(--pos-cat-vegetarian); }
.srvd-pos-cat-tile--vegetarian-vegetarian   { --srvd-pos-cat-colour: var(--pos-cat-vegetarian-vegetarian); }
.srvd-pos-cat-tile--vegetarian-vegan        { --srvd-pos-cat-colour: var(--pos-cat-vegetarian-vegan); }
.srvd-pos-cat-tile--vegetarian-grilled-vegetables { --srvd-pos-cat-colour: var(--pos-cat-vegetarian-grilled-vegetables); }
.srvd-pos-cat-tile--vegetarian-salads       { --srvd-pos-cat-colour: var(--pos-cat-vegetarian-salads); }
.srvd-pos-cat-tile--vegetarian-bowls        { --srvd-pos-cat-colour: var(--pos-cat-vegetarian-bowls); }
/* Pasta, Noodles & Grains */
.srvd-pos-cat-tile--pasta                   { --srvd-pos-cat-colour: var(--pos-cat-pasta); }
.srvd-pos-cat-tile--pasta-pasta             { --srvd-pos-cat-colour: var(--pos-cat-pasta-pasta); }
.srvd-pos-cat-tile--pasta-noodles           { --srvd-pos-cat-colour: var(--pos-cat-pasta-noodles); }
.srvd-pos-cat-tile--pasta-risotto           { --srvd-pos-cat-colour: var(--pos-cat-pasta-risotto); }
.srvd-pos-cat-tile--pasta-rice              { --srvd-pos-cat-colour: var(--pos-cat-pasta-rice); }
.srvd-pos-cat-tile--pasta-dumplings         { --srvd-pos-cat-colour: var(--pos-cat-pasta-dumplings); }
/* Baked & Flour -Based Dishes */
.srvd-pos-cat-tile--baked                   { --srvd-pos-cat-colour: var(--pos-cat-baked); }
.srvd-pos-cat-tile--baked-pizza             { --srvd-pos-cat-colour: var(--pos-cat-baked-pizza); }
.srvd-pos-cat-tile--baked-burgers           { --srvd-pos-cat-colour: var(--pos-cat-baked-burgers); }
.srvd-pos-cat-tile--baked-sandwiches-wraps  { --srvd-pos-cat-colour: var(--pos-cat-baked-sandwiches-wraps); }
.srvd-pos-cat-tile--baked-tacos-quesadillas { --srvd-pos-cat-colour: var(--pos-cat-baked-tacos-quesadillas); }
.srvd-pos-cat-tile--baked-pies              { --srvd-pos-cat-colour: var(--pos-cat-baked-pies); }
/* Egg & Breakfast Dishes */
.srvd-pos-cat-tile--breakfast               { --srvd-pos-cat-colour: var(--pos-cat-breakfast); }
.srvd-pos-cat-tile--breakfast-omelets       { --srvd-pos-cat-colour: var(--pos-cat-breakfast-omelets); }
.srvd-pos-cat-tile--breakfast-pancakes      { --srvd-pos-cat-colour: var(--pos-cat-breakfast-pancakes); }
.srvd-pos-cat-tile--breakfast-waffles       { --srvd-pos-cat-colour: var(--pos-cat-breakfast-waffles); }
.srvd-pos-cat-tile--breakfast-french-toast  { --srvd-pos-cat-colour: var(--pos-cat-breakfast-french-toast); }
.srvd-pos-cat-tile--breakfast-breakfast-platters { --srvd-pos-cat-colour: var(--pos-cat-breakfast-breakfast-platters); }
/* Soups & Stews */
.srvd-pos-cat-tile--soups                   { --srvd-pos-cat-colour: var(--pos-cat-soups); }
.srvd-pos-cat-tile--soups-cream-soups       { --srvd-pos-cat-colour: var(--pos-cat-soups-cream-soups); }
.srvd-pos-cat-tile--soups-clear-soups       { --srvd-pos-cat-colour: var(--pos-cat-soups-clear-soups); }
.srvd-pos-cat-tile--soups-stews             { --srvd-pos-cat-colour: var(--pos-cat-soups-stews); }
.srvd-pos-cat-tile--soups-curries           { --srvd-pos-cat-colour: var(--pos-cat-soups-curries); }
/* Grill, BBQ & Roasted */
.srvd-pos-cat-tile--grill                   { --srvd-pos-cat-colour: var(--pos-cat-grill); }
.srvd-pos-cat-tile--grill-bbq               { --srvd-pos-cat-colour: var(--pos-cat-grill-bbq); }
.srvd-pos-cat-tile--grill-grilled           { --srvd-pos-cat-colour: var(--pos-cat-grill-grilled); }
.srvd-pos-cat-tile--grill-roasted-meats     { --srvd-pos-cat-colour: var(--pos-cat-grill-roasted-meats); }
.srvd-pos-cat-tile--grill-skewers           { --srvd-pos-cat-colour: var(--pos-cat-grill-skewers); }
.srvd-pos-cat-tile--grill-smoked            { --srvd-pos-cat-colour: var(--pos-cat-grill-smoked); }
/* International Cuisine */
.srvd-pos-cat-tile--international           { --srvd-pos-cat-colour: var(--pos-cat-international); }
.srvd-pos-cat-tile--international-asian     { --srvd-pos-cat-colour: var(--pos-cat-international-asian); }
.srvd-pos-cat-tile--international-mediterranean { --srvd-pos-cat-colour: var(--pos-cat-international-mediterranean); }
.srvd-pos-cat-tile--international-italian   { --srvd-pos-cat-colour: var(--pos-cat-international-italian); }
.srvd-pos-cat-tile--international-mexican   { --srvd-pos-cat-colour: var(--pos-cat-international-mexican); }
.srvd-pos-cat-tile--international-middle-eastern { --srvd-pos-cat-colour: var(--pos-cat-international-middle-eastern); }
.srvd-pos-cat-tile--international-indian    { --srvd-pos-cat-colour: var(--pos-cat-international-indian); }
/* Side Dishes */
.srvd-pos-cat-tile--sides                   { --srvd-pos-cat-colour: var(--pos-cat-sides); }
.srvd-pos-cat-tile--sides-rice              { --srvd-pos-cat-colour: var(--pos-cat-sides-rice); }
.srvd-pos-cat-tile--sides-potatoes          { --srvd-pos-cat-colour: var(--pos-cat-sides-potatoes); }
.srvd-pos-cat-tile--sides-vegetables        { --srvd-pos-cat-colour: var(--pos-cat-sides-vegetables); }
.srvd-pos-cat-tile--sides-fries             { --srvd-pos-cat-colour: var(--pos-cat-sides-fries); }
.srvd-pos-cat-tile--sides-sauces-dips       { --srvd-pos-cat-colour: var(--pos-cat-sides-sauces-dips); }
/* Bakery & Pastry */
.srvd-pos-cat-tile--bakery                  { --srvd-pos-cat-colour: var(--pos-cat-bakery); }
.srvd-pos-cat-tile--bakery-bread            { --srvd-pos-cat-colour: var(--pos-cat-bakery-bread); }
.srvd-pos-cat-tile--bakery-croissants       { --srvd-pos-cat-colour: var(--pos-cat-bakery-croissants); }
.srvd-pos-cat-tile--bakery-muffins          { --srvd-pos-cat-colour: var(--pos-cat-bakery-muffins); }
.srvd-pos-cat-tile--bakery-pies             { --srvd-pos-cat-colour: var(--pos-cat-bakery-pies); }
.srvd-pos-cat-tile--bakery-savory-pastries  { --srvd-pos-cat-colour: var(--pos-cat-bakery-savory-pastries); }
/* Desserts */
.srvd-pos-cat-tile--desserts                { --srvd-pos-cat-colour: var(--pos-cat-desserts); }
.srvd-pos-cat-tile--desserts-cakes          { --srvd-pos-cat-colour: var(--pos-cat-desserts-cakes); }
.srvd-pos-cat-tile--desserts-cheesecakes    { --srvd-pos-cat-colour: var(--pos-cat-desserts-cheesecakes); }
.srvd-pos-cat-tile--desserts-ice-cream      { --srvd-pos-cat-colour: var(--pos-cat-desserts-ice-cream); }
.srvd-pos-cat-tile--desserts-tarts          { --srvd-pos-cat-colour: var(--pos-cat-desserts-tarts); }
.srvd-pos-cat-tile--desserts-fruit-desserts { --srvd-pos-cat-colour: var(--pos-cat-desserts-fruit-desserts); }
.srvd-pos-cat-tile--desserts-mousse         { --srvd-pos-cat-colour: var(--pos-cat-desserts-mousse); }
/* Beverages */
.srvd-pos-cat-tile--beverages               { --srvd-pos-cat-colour: var(--pos-cat-beverages); }
.srvd-pos-cat-tile--beverages-coffee        { --srvd-pos-cat-colour: var(--pos-cat-beverages-coffee); }
.srvd-pos-cat-tile--beverages-tea           { --srvd-pos-cat-colour: var(--pos-cat-beverages-tea); }
.srvd-pos-cat-tile--beverages-smoothies     { --srvd-pos-cat-colour: var(--pos-cat-beverages-smoothies); }
.srvd-pos-cat-tile--beverages-juices        { --srvd-pos-cat-colour: var(--pos-cat-beverages-juices); }
.srvd-pos-cat-tile--beverages-soft-drinks   { --srvd-pos-cat-colour: var(--pos-cat-beverages-soft-drinks); }
/* Alcoholic Beverages */
.srvd-pos-cat-tile--alcohol                 { --srvd-pos-cat-colour: var(--pos-cat-alcohol); }
.srvd-pos-cat-tile--alcohol-wine            { --srvd-pos-cat-colour: var(--pos-cat-alcohol-wine); }
.srvd-pos-cat-tile--alcohol-beer            { --srvd-pos-cat-colour: var(--pos-cat-alcohol-beer); }
.srvd-pos-cat-tile--alcohol-cocktails       { --srvd-pos-cat-colour: var(--pos-cat-alcohol-cocktails); }
.srvd-pos-cat-tile--alcohol-spirits-drinks  { --srvd-pos-cat-colour: var(--pos-cat-alcohol-spirits-drinks); }
/* Special Categories */
.srvd-pos-cat-tile--special                 { --srvd-pos-cat-colour: var(--pos-cat-special); }
.srvd-pos-cat-tile--special-kids-menu       { --srvd-pos-cat-colour: var(--pos-cat-special-kids-menu); }
.srvd-pos-cat-tile--special-chefs-specials  { --srvd-pos-cat-colour: var(--pos-cat-special-chefs-specials); }
.srvd-pos-cat-tile--special-seasonal        { --srvd-pos-cat-colour: var(--pos-cat-special-seasonal); }
.srvd-pos-cat-tile--special-healthy-options { --srvd-pos-cat-colour: var(--pos-cat-special-healthy-options); }
.srvd-pos-cat-tile--special-gluten-free     { --srvd-pos-cat-colour: var(--pos-cat-special-gluten-free); }
.srvd-pos-cat-tile--special-keto-paleo      { --srvd-pos-cat-colour: var(--pos-cat-special-keto-paleo); }

/* 150px dish card (Figma "dish card" 29233:25361): photo, bottom shade, "+" bubble. The card
	 is an <article>; its tap target is the .srvd-pos-dish__tap button stretched over the photo
	 (the shade, title and price let the pointer through), the "+" bubble sits above it. */
.srvd-pos-dish {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 2px;
	box-sizing: border-box;
	width: 150px;
	height: 150px;
	padding: 12px;
	border-radius: 24px;
	background: var(--pos-card);
	color: var(--pos-text);
	overflow: hidden;
}
.srvd-pos-dish__placeholder {
	position: absolute;
	left: 51px;
	top: 51px;
	width: 48px;
	height: 48px;
	color: var(--pos-faint);
}
.srvd-pos-dish__placeholder svg { display: block; }
.srvd-pos-dish:has(.srvd-pos-dish__img:not([hidden])) .srvd-pos-dish__placeholder { visibility: hidden; }   /* a photo card shows no glyph (the POS photos are translucent WebPs - F8 tables-menu); img[hidden] brings it back */
.srvd-pos-dish__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 24px;
}
.srvd-pos-dish__shade {
	position: absolute;
	inset: 0;
	border-radius: 24px;
	background: var(--pos-photo-shade);
}
.srvd-pos-dish__placeholder, .srvd-pos-dish__shade, .srvd-pos-dish__title, .srvd-pos-dish__price { pointer-events: none; }
.srvd-pos-dish__tap {
	position: absolute;
	inset: 0;
	padding: 0;
	border-radius: 24px;
	background: transparent;
}
.srvd-pos-dish__tap:hover:where(:not(:disabled)), .srvd-pos-dish__tap.is-hover { background: color-mix(in srgb, var(--pos-text) 8%, transparent); }
.srvd-pos-dish__tap:active:where(:not(:disabled)), .srvd-pos-dish__tap.is-pressed { background: color-mix(in srgb, var(--pos-text) 16%, transparent); }
.srvd-pos-dish__tap:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: -3px; }
.srvd-pos-dish__add {
	position: absolute;
	right: 6px;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	padding: 4px;
	border: 0;
	border-radius: 48px;
	background: var(--pos-photo-bubble);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--pos-photo-bubble-text);
}
.srvd-pos-dish__add:hover:where(:not(:disabled)), .srvd-pos-dish__add.is-hover { background: var(--pos-photo-bubble-hover); }
.srvd-pos-dish__add:active:where(:not(:disabled)), .srvd-pos-dish__add.is-pressed { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-pos-dish__add:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-dish__add:disabled, .srvd-pos-dish__add.is-disabled { opacity: 0.4; cursor: default; }
/* --counted: the product is in the cart; the bubble takes its pressed look and shows the count instead of the "+"
	 (cart.js toggles the class), widening for two or three digits. Doubled class to outrank the hover rule above */
.srvd-pos-dish__add.srvd-pos-dish__add--counted { width: auto; min-width: 32px; padding: 0 8px; background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-pos-dish__add.srvd-pos-dish__add--counted:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.srvd-pos-dish__add--counted .srvd-pos-icon { display: none; }
.srvd-pos-dish__title {
	position: relative;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 500;
}
.srvd-pos-dish__price {
	position: relative;
	font-size: 13px;
	line-height: 15.6px;
	letter-spacing: -0.08px;
}
/* --fluid (F8, tables-menu): the card as the dish grid places it (Figma "dishes grid" 28676:18242: 163px in four
	 columns at 1440, square at other widths); --lg = the 220px instance of the options window (Figma "dish section"
	 29442:32381: pad 16, gap 4). Both centre the placeholder glyph. */
.srvd-pos-dish--fluid { width: 100%; min-width: 0; height: auto; aspect-ratio: 1 / 1; }
.srvd-pos-dish--lg { width: 220px; height: 220px; padding: 16px; gap: 4px; }
.srvd-pos-dish--fluid .srvd-pos-dish__placeholder, .srvd-pos-dish--lg .srvd-pos-dish__placeholder { left: calc(50% - 24px); top: calc(50% - 24px); }
/* Three pieces the order screen adds to the family:
	 __marks - the dietary / allergen marks row above the name: 16px stroke glyphs from the page's
	   dietary sprite (includes/dietary.icons.tpl), each a role="img" with a tooltip; an allergen mark (--allergen) takes
	   the warning colour, a preference mark the text colour;
	 __count - the units of the product in the cart, inside the "+" bubble in place of the glyph (the bubble takes
	   --counted, see above); the page hides it at 0;
	 --sold-out - the sold-out state: the tap and the "+" carry disabled, the photo fades and the __soldout label lies
	   over the middle of the card on the scrim colour. */
/* the row spans the card but lets the pointer through to the tap button; only the 16px glyphs catch it (their tooltips) */
.srvd-pos-dish__marks { position: relative; display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 2px; pointer-events: none; }
.srvd-pos-dish__mark { display: inline-flex; width: 16px; height: 16px; color: var(--pos-text); opacity: 0.85; pointer-events: auto; }
.srvd-pos-dish__mark--allergen { color: var(--pos-warning); opacity: 1; }
.srvd-pos-dish__mark svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.srvd-pos-dish__count { font-weight: 700; font-size: 13px; line-height: 15.6px; letter-spacing: -0.065px; }
.srvd-pos-dish--sold-out .srvd-pos-dish__img, .srvd-pos-dish--sold-out .srvd-pos-dish__placeholder { opacity: 0.4; }
.srvd-pos-dish--sold-out .srvd-pos-dish__tap { cursor: default; }
.srvd-pos-dish__soldout {
	position: absolute;
	left: 12px;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	padding: 6px 8px;
	border-radius: 12px;
	background: var(--pos-overlay);
	color: var(--pos-text);
	font-size: 13px;
	line-height: 15.6px;
	font-weight: 500;
	text-align: center;
	pointer-events: none;
}
/* light (Figma "Tables - Table 21 - Menu: list" 29504:25857 / the light options window 29504:28079): the photo pales
	 under a white wash and the text turns dark, the "+" bubble is #ffffff@60% with a dark glyph - the Layer 1
	 --pos-photo-* tokens carry both looks, so a dark sheet inside a light page keeps its own */

/* 48px amount stepper (Figma "amount" 28677:28056): two buttons (value="-1" / "1") around an
	 <input class="srvd-pos-amount__val" inputmode="numeric"> (RESETS field list); app.js steps the
	 value within the input's min / max and disables the button at a bound */
.srvd-pos-amount {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: 48px;
	border-radius: 24px;
	background: var(--pos-chip);
	color: var(--pos-text);
}
.srvd-pos-amount__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 200px;
	background: var(--pos-chip);
	color: var(--pos-text);
}
.srvd-pos-amount__btn:hover:where(:not(:disabled)), .srvd-pos-amount__btn.is-hover { background: var(--pos-chip-hover); }
.srvd-pos-amount__btn:active:where(:not(:disabled)), .srvd-pos-amount__btn.is-pressed { background: var(--pos-accent); color: var(--pos-on-accent); }
.srvd-pos-amount__btn:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-amount__btn:disabled .srvd-pos-icon, .srvd-pos-amount__btn.is-disabled .srvd-pos-icon { opacity: 0.4; }
.srvd-pos-amount__btn:disabled, .srvd-pos-amount__btn.is-disabled { background: var(--pos-tile); cursor: default; }   /* the pages' instances (Figma "amount" in 29424:44347 / 29459:44121 / 28676:18267): a disabled end on the tile fill; the sheet's component keeps the chip - F8 tables-menu */
.srvd-pos-amount__val {
	width: 20px;
	text-align: center;
	font-size: 16px;
	line-height: 19.2px;
	border-radius: 4px;
}
.srvd-pos-amount__val:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* --alert (F8, tables-menu): a count that differs from the order (Figma "Edit order" 29424:44347: the reduced and the
	 deleted line show their count in Status / Danger) */
.srvd-pos-amount--alert .srvd-pos-amount__val { color: var(--pos-danger); }
/* --lg (F8, checkout): Figma "guest amount" 28776:19079 - the 64px stepper of the POS payment area and
	 pop-ups: pad 4, gap 12, 56px buttons on a --pos-bg trough (the chip fill below sm, Figma
	 29909:97070), the value 17/19.55 centred in the remaining width. The value may be an <output>
	 (money the page formats and steps: app.js leaves such a stepper alone) */
.srvd-pos-amount--lg {
	display: flex;
	justify-content: space-between;
	height: 64px;
	padding: 4px;
	border-radius: 200px;
	background: var(--pos-bg);
}
.srvd-pos-amount--lg .srvd-pos-amount__btn { width: 56px; height: 56px; flex: 0 0 56px; }
.srvd-pos-amount--lg .srvd-pos-amount__val { flex: 1 1 0; width: 0; min-width: 0; font-size: 17px; line-height: 19.55px; }   /* an <input> value contributes no intrinsic width to its column (F8 tables-menu: the options window's 228px actions column, the 167px mobile panel) */
.srvd-pos-amount--lg .srvd-pos-amount__val--count { font-size: 20px; line-height: 25px; font-weight: 700; }   /* the guest count (Figma "guest amount" in "pop-up - new order" 28816:21293: "number" 20/25 bold; the money instances keep 17px) - F8, tables */
@media (max-width: 575.98px) {
	.srvd-pos-amount--lg { background: var(--pos-chip); }
}
/* --field (F8, tables-menu): the stepper as a form field (Figma "amount" 307x56 in "Add new dish" 29459:44121: the
	 56px pill, pad 4, the 48px buttons at its ends, the value between) */
.srvd-pos-amount--field { display: flex; justify-content: space-between; width: 100%; height: 56px; padding: 0 4px; }
.srvd-pos-amount--field .srvd-pos-amount__val { flex: 1; width: auto; }

/* 84px keypad key (Figma "Key Button" 28687:19046) and 60px guest counter ("guest button" 28774:21087) */
.srvd-pos-key,
.srvd-pos-guest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 84px;
	height: 84px;
	padding: 0;
	border: 0;
	border-radius: 200px;
	background: var(--pos-chip);
	color: var(--pos-text);
	font-size: 28px;
	line-height: 33.6px;
	font-weight: 700;
	letter-spacing: -0.14px;
}
.srvd-pos-guest {
	width: 60px;
	height: 60px;
	font-size: 20px;
	line-height: 25px;
	letter-spacing: 0;
}
/* --sm (F8, tables): the 56px guest buttons of Figma "pop-up - new order" 28816:21293 (six in the 376px
	 column, gap 8); 50px in the mobile drawer 29909:94938 */
.srvd-pos-guest--sm { width: 56px; height: 56px; }
@media (max-width: 575.98px) {
	.srvd-pos-guest--sm { width: 50px; height: 50px; }
}
.srvd-pos-key:hover:where(:not(:disabled)), .srvd-pos-key.is-hover,
.srvd-pos-guest:hover:where(:not([aria-pressed="true"], :disabled)), .srvd-pos-guest.is-hover { background: var(--pos-chip-hover); }
.srvd-pos-key:active:where(:not(:disabled)), .srvd-pos-key.is-pressed,
.srvd-pos-guest[aria-pressed="true"], .srvd-pos-guest:active:where(:not(:disabled)), .srvd-pos-guest.is-pressed, .srvd-pos-guest--selected {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
}
.srvd-pos-guest[aria-pressed="true"]:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.srvd-pos-key:focus-visible, .srvd-pos-guest:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-key:disabled, .srvd-pos-key.is-disabled, .srvd-pos-guest:disabled, .srvd-pos-guest.is-disabled { opacity: 0.4; cursor: default; }
/* glyph key (--icon): the login keypad's delete key, Figma 28688:17695 places a 40px "leading icon"
	 slot instead of the label - the approved page draws it as a 30px icon font. Below sm the key
	 labels are 24px and the glyph 26px (Figma "Login-default" 29909:99271) - F8, login page. */
.srvd-pos-key--icon { font-size: 30px; line-height: 1; }
@media (max-width: 575.98px) {
	.srvd-pos-key { font-size: 24px; line-height: 29px; letter-spacing: -0.12px; }
	.srvd-pos-key--icon { font-size: 26px; line-height: 1; }
}

/* floor-plan pieces (Figma "seat" 28813:22078, "bar" 28813:22233, "entrance" 28813:22172) */
.srvd-pos-seat {
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--pos-muted) 40%, transparent);
}
.srvd-pos-bar {
	display: block;
	width: 40px;
	height: 104px;
	border-radius: 8px;
	background: var(--pos-muted);
}
.srvd-pos-bar--l {
	width: 104px;
	border-radius: 0;
	background: none;
	color: var(--pos-muted);
}
.srvd-pos-bar--l svg { display: block; }
.srvd-pos-entrance {
	display: block;
	flex: none;
	width: 66px;
	height: 20px;
	border-radius: 4px 4px 0 0;
	background: var(--pos-tile);
}

/* floor-plan table (Figma "table" 28813:22061): 56px square / 66px rect / round,
	 colour modifiers, --occupied = 1px inner white ring, optional __time line */
.srvd-pos-table {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 56px;
	height: 56px;
	padding: 10px;
	border: 0;
	border-radius: 8px;
	background: #44cf9c;
	color: #fdfdfe;
}
.srvd-pos-table--rect { width: 66px; }
.srvd-pos-table--round { border-radius: 200px; color: var(--pos-text); }
.srvd-pos-table--green { background: #44cf9c; }
.srvd-pos-table--blue { background: #43bee1; }
.srvd-pos-table--pink { background: #f672a7; }
/* the floor plan of "Tables - Scheme" 28781:19100 paints six status hues (Figma names none); the kit's
	 table component shows the first three - F8, tables */
.srvd-pos-table--yellow { background: #fcc015; }
.srvd-pos-table--purple { background: #6658dd; }
.srvd-pos-table--grey { background: #636c79; }
.srvd-pos-table--occupied { box-shadow: inset 0 0 0 1px var(--pos-text); }
/* states (Figma draws none; the coloured floor-plan tables brighten, the list tables use the chip tokens) */
.srvd-pos-table:hover:where(:not(.srvd-pos-table--list, :disabled)), .srvd-pos-table.is-hover:where(:not(.srvd-pos-table--list)) { filter: brightness(1.1); }
.srvd-pos-table:active:where(:not(.srvd-pos-table--list, :disabled)), .srvd-pos-table.is-pressed:where(:not(.srvd-pos-table--list)) { filter: brightness(0.9); }
.srvd-pos-table:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-table:disabled, .srvd-pos-table.is-disabled { opacity: 0.4; cursor: default; }
.srvd-pos-table__label {
	position: relative;
	top: 1px;                          /* Chrome sets the glyphs ~1px higher in the 20px box than Figma */
	display: block;
	width: 100%;
	height: 20px;
	font-size: 17px;
	line-height: 19.55px;
	font-weight: 700;
	letter-spacing: -0.17px;
	text-align: center;
	white-space: nowrap;
}
.srvd-pos-table__time {
	position: relative;
	top: 0.5px;
	display: block;
	height: 15px;
	font-size: 11px;
	line-height: 14.85px;
	font-weight: 400;
	letter-spacing: 0;
	color: #fdfdfe;
	opacity: 0.72;
	text-align: center;
	white-space: nowrap;
}
/* list tables (Figma "Table" 28702:6304): 66x46 Available / Occupied / Booked */
.srvd-pos-table--list {
	width: 66px;
	height: 46px;
	background: var(--pos-tile);
	color: var(--pos-text);
}
.srvd-pos-table--list-occupied {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
}
.srvd-pos-table--booked {
	background: var(--pos-card);
	box-shadow: inset 0 0 0 1px var(--pos-muted);
}
.srvd-pos-table--booked .srvd-pos-table__time {
	color: var(--pos-muted);
	opacity: 1;
}
.srvd-pos-table--list:hover:where(:not(.srvd-pos-table--list-occupied, :disabled)), .srvd-pos-table--list.is-hover { background: var(--pos-input-secondary); }
.srvd-pos-table--list-occupied:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.srvd-pos-table--list:active:where(:not(.srvd-pos-table--list-occupied, :disabled)), .srvd-pos-table--list.is-pressed { background: var(--pos-chip-hover); }

/* table list card (Figma "table" 29055:22375 / 29062:22062): 255x97 large, --sm 167x86, --w355 */
.srvd-pos-table-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	box-sizing: border-box;
	width: 255.2px;
	height: 97px;
	padding: 20px;
	border: 0;
	border-radius: 24px;
	background: var(--pos-card);
	box-shadow: inset 0 0 0 1px var(--pos-hairline);
	color: var(--pos-text);
	text-align: left;
	text-decoration: none;             /* an <a> card: reboot underlines links (F8, tables) */
}
.srvd-pos-table-card--occupied {
	background: var(--pos-accent);
	box-shadow: none;
	color: var(--pos-on-accent);
}
.srvd-pos-table-card--sm {
	width: 167px;
	height: 86px;
	padding: 12px;
}
.srvd-pos-table-card--w355 { width: 355px; }
/* --print = the armed card (Figma "after click - print button"): row layout, tile fill */
.srvd-pos-table-card--print {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	background: var(--pos-tile);
}
.srvd-pos-table-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.srvd-pos-table-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 34px;
}
.srvd-pos-table-card--sm .srvd-pos-table-card__head { height: 24px; }
.srvd-pos-table-card__title {
	font-size: 20px;
	line-height: 25px;
	font-weight: 700;
	white-space: nowrap;
}
.srvd-pos-table-card--sm .srvd-pos-table-card__title {
	font-size: 16px;
	line-height: 19.2px;
	letter-spacing: -0.16px;
}
.srvd-pos-table-card__titlewrap {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.srvd-pos-table-card__split {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 24px;
	background: var(--pos-tile);
}
.srvd-pos-table-card__persons {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	height: 34px;
	padding: 0 12px 0 8px;
	border-radius: 24px;
	background: var(--pos-tile);
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 500;
}
.srvd-pos-table-card__persons--bare {
	padding: 0;
	background: none;
}
.srvd-pos-table-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 4px;
	height: 34px;
}
.srvd-pos-table-card__total {
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 400;
}
.srvd-pos-table-card__check {
	position: absolute;
	right: 8px;
	top: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 30px;
	background: var(--pos-on-accent);
	color: var(--pos-text);
}
.srvd-pos-table-card__check--light {
	background: var(--pos-accent);
	color: var(--pos-on-accent);
}
/* the check badge is part of the card markup and shows on the pressed (selected) card only */
.srvd-pos-table-card:not([aria-pressed="true"], .is-active) .srvd-pos-table-card__check { display: none; }

/* .srvd-pos-table-card--wide (F2b, Figma "Reprint receipts" 29118:14069): the card as the POS pages place it in
	 the 820px column - fluid width, 105 high, pad 24 - with the same DOM in every state: .srvd-pos-table-card__body
	 (head + total), the guests pill as a <button> (page adds Bootstrap's .stretched-link so the whole card
	 arms) and the Reprint .srvd-btn--lg that only shows on --print. Below sm (Figma "Receipts" 29909:96717)
	 the card is a 92px row with an always-visible secondary Reprint button and no pill. */
.srvd-pos-table-card--wide { width: 100%; height: 105px; padding: 24px; }
.srvd-pos-table-card--wide.srvd-pos-table-card--print { flex-direction: row; }
.srvd-pos-table-card:not(.srvd-pos-table-card--print) > .srvd-btn { display: none; }
.srvd-pos-table-card--print .srvd-pos-table-card__persons { display: none; }
/* --fluid / --grid (F8, tables): --fluid = a card that fills its column (the move drawer's --sm card,
	 Figma "table" 343x86 in 30014:66298); --grid = the card as the tables list places it (Figma "Tables -
	 list" 29068:21118: 255.2px in a 5-column grid = the kit width at 1440, fluid at other widths) which
	 below sm takes the --sm geometry (Figma 29922:68570: 167x86, pad 12, the title in a 24px row, the
	 total and the bare guests count in a 34px row) from the large card's DOM; a card may be an <a> */
.srvd-pos-table-card--fluid, .srvd-pos-table-card--grid { width: 100%; }
@media (max-width: 575.98px) {
	.srvd-pos-table-card--grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "title title" "total persons";
		align-items: center;
		column-gap: 8px;
		row-gap: 4px;
		height: 86px;
		padding: 12px;
	}
	.srvd-pos-table-card--grid .srvd-pos-table-card__head { display: contents; }
	.srvd-pos-table-card--grid .srvd-pos-table-card__title, .srvd-pos-table-card--grid .srvd-pos-table-card__titlewrap { grid-area: title; height: 24px; }
	.srvd-pos-table-card--grid .srvd-pos-table-card__title { display: flex; align-items: center; font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
	.srvd-pos-table-card--grid .srvd-pos-table-card__split { width: 24px; height: 24px; background: none; }
	.srvd-pos-table-card--grid .srvd-pos-table-card__total { grid-area: total; }
	.srvd-pos-table-card--grid .srvd-pos-table-card__persons { grid-area: persons; justify-self: end; padding: 0; background: none; }
}
/* states: hover on the tappable cards (not the white occupied / armed ones), pressed, focus rings
	 on the card and on the pill, disabled */
.srvd-pos-table-card:hover:where(:not(.srvd-pos-table-card--occupied, .srvd-pos-table-card--print, :disabled)), .srvd-pos-table-card.is-hover { background: var(--pos-chip-hover); }
.srvd-pos-table-card--occupied:hover:where(:not(.srvd-pos-table-card--print, :disabled)) { background: var(--pos-accent-hover); }
button.srvd-pos-table-card:active:where(:not(.srvd-pos-table-card--occupied, .srvd-pos-table-card--print, :disabled)), a.srvd-pos-table-card:active:where(:not(.srvd-pos-table-card--occupied, .srvd-pos-table-card--print)), .srvd-pos-table-card.is-pressed { background: var(--pos-chip); }
button.srvd-pos-table-card:focus-visible, a.srvd-pos-table-card:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
a.srvd-pos-table-card:hover { color: var(--pos-text); }                      /* reboot's a:hover colour would outrank the family */
a.srvd-pos-table-card--occupied:hover { color: var(--pos-on-accent); }
button.srvd-pos-table-card:disabled, .srvd-pos-table-card.is-disabled { opacity: 0.4; cursor: default; }
.srvd-pos-table-card__persons:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* --active / --overdue / --paid-qr : the status of a table's order on the list card - a
	 running order, an order without activity for 15 minutes, a table paid through the QR code in the last 15 minutes
	 (a free table too) - as a status surface: a 20% tint of the status token (--pos-success / --pos-warning /
	 --pos-secondary) on the card fill with a 1px ring in the token and the page text colour; hover deepens the tint.
	 The modifier sits on the --occupied or the free card and outranks their surfaces (declared after them). */
.srvd-pos-table-card--active { background: color-mix(in srgb, var(--pos-success) 20%, var(--pos-card)); box-shadow: inset 0 0 0 1px var(--pos-success); color: var(--pos-text); }
.srvd-pos-table-card--overdue { background: color-mix(in srgb, var(--pos-warning) 20%, var(--pos-card)); box-shadow: inset 0 0 0 1px var(--pos-warning); color: var(--pos-text); }
.srvd-pos-table-card--paid-qr { background: color-mix(in srgb, var(--pos-secondary) 20%, var(--pos-card)); box-shadow: inset 0 0 0 1px var(--pos-secondary); color: var(--pos-text); }
.srvd-pos-table-card--active:hover:where(:not(.srvd-pos-table-card--print, :disabled)) { background: color-mix(in srgb, var(--pos-success) 32%, var(--pos-card)); }
.srvd-pos-table-card--overdue:hover:where(:not(.srvd-pos-table-card--print, :disabled)) { background: color-mix(in srgb, var(--pos-warning) 32%, var(--pos-card)); }
.srvd-pos-table-card--paid-qr:hover:where(:not(.srvd-pos-table-card--print, :disabled)) { background: color-mix(in srgb, var(--pos-secondary) 32%, var(--pos-card)); }
a.srvd-pos-table-card--active:hover, a.srvd-pos-table-card--overdue:hover, a.srvd-pos-table-card--paid-qr:hover { color: var(--pos-text); }
@media (max-width: 575.98px) {
	.srvd-pos-table-card--wide {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 92px;
		padding: 16px;
	}
	.srvd-pos-table-card--wide:hover, .srvd-pos-table-card--wide.srvd-pos-table-card--print { background: var(--pos-card); }
	.srvd-pos-table-card--wide .srvd-pos-table-card__title { font-size: 17px; line-height: 20px; letter-spacing: -0.17px; }
	.srvd-pos-table-card--wide .srvd-pos-table-card__persons { display: none; }
	.srvd-pos-table-card.srvd-pos-table-card--wide > .srvd-btn { display: inline-flex; background: var(--pos-chip); color: var(--pos-text); }   /* outranks the :not(--print) hide above */
	.srvd-pos-table-card.srvd-pos-table-card--wide > .srvd-btn:hover { background: var(--pos-chip-hover); }
}

/* option cards (Figma "option card" 29234:30231 140x140, "option card - mobile" 29939:58427 343x60):
	 a <label> wrapping a hidden checkbox; the white check badge is the checked state */
.srvd-pos-option {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	box-sizing: border-box;
	width: 140px;
	height: 140px;
	padding: 12px;
	border-radius: 24px;
	background: var(--pos-card);
	color: var(--pos-text);
	overflow: hidden;
	cursor: pointer;
}
.srvd-pos-option__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.srvd-pos-option__shade {
	position: absolute;
	inset: 0;
	background: var(--pos-photo-shade-deep);
}
.srvd-pos-option__title {
	position: relative;
	top: 0.5px;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 500;
}
.srvd-pos-option__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}
.srvd-pos-option__check {
	position: absolute;
	right: 6px;
	top: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 30px;
	background: var(--pos-accent);
	color: var(--pos-on-accent);
}
.srvd-pos-option__check--static { position: static; flex: none; }
/* unchecked: the kit checkbox's ring (Figma "Checkbox" 9552:10215 on the option cards of 29442:32376 / 29909:97525);
	 the glyph shows on :checked only - F8 tables-menu */
.srvd-pos-option__input:not(:checked) ~ .srvd-pos-option__check { background: var(--pos-bg); border: 1px solid var(--pos-muted); color: transparent; }
.srvd-pos-option:hover .srvd-pos-option__input:not(:checked, :disabled) ~ .srvd-pos-option__check, .srvd-pos-option-row:hover .srvd-pos-option__input:not(:checked, :disabled) ~ .srvd-pos-option__check { border-color: var(--pos-text); }
/* the subtitle under the title (Figma "Subtitle" 13/15.6: a surcharge) */
.srvd-pos-option__sub { position: relative; font-size: 13px; line-height: 15.6px; letter-spacing: -0.08px; }
/* the thumb placeholder of a card without a photo: the row form shows it as its 60px square */
.srvd-pos-option__thumb { display: none; }
.srvd-pos-option:has(.srvd-pos-option__input:focus-visible), .srvd-pos-option-row:has(.srvd-pos-option__input:focus-visible), .srvd-pos-option.is-focused, .srvd-pos-option-row.is-focused { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
.srvd-pos-option:has(.srvd-pos-option__input:disabled), .srvd-pos-option-row:has(.srvd-pos-option__input:disabled), .srvd-pos-option.is-disabled, .srvd-pos-option-row.is-disabled { opacity: 0.4; cursor: default; }
.srvd-pos-option-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 343px;
	height: 60px;
	color: var(--pos-text);
	cursor: pointer;
}
.srvd-pos-option-row__img {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 16px;
	object-fit: cover;
	background: var(--pos-card);
}
.srvd-pos-option-row__title {
	flex: 1;
	font-size: 16px;
	line-height: 19.2px;
	font-weight: 500;
}
/* --adaptive (F8, tables-menu): the option card that takes the row form (Figma "option card - mobile" 29939:58427:
	 the 60px thumb r16, the title, the subtitle and the check at the right) below sm from the tile's DOM (the edit-dish
	 sheet 29909:97525); a card without a photo shows its .srvd-pos-option__thumb */
@media (max-width: 575.98px) {
	.srvd-pos-option--adaptive {
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		gap: 12px;
		width: 100%;
		height: 60px;
		padding: 0;
		border-radius: 0;
		background: none;
		overflow: visible;
	}
	.srvd-pos-option--adaptive .srvd-pos-option__img, .srvd-pos-option--adaptive .srvd-pos-option__thumb { position: static; display: block; flex: none; width: 60px; height: 60px; border-radius: 16px; background: var(--pos-card); }
	.srvd-pos-option--adaptive .srvd-pos-option__shade { display: none; }
	.srvd-pos-option--adaptive .srvd-pos-option__title { flex: 1; top: 0; }
	.srvd-pos-option--adaptive .srvd-pos-option__sub { flex: none; }
	.srvd-pos-option--adaptive .srvd-pos-option__check { position: static; flex: none; }
}
/* light (Figma 29504:28079): the photo pales under the white wash of --pos-photo-shade-deep, the text turns dark */

/* ---------------------------------------------------------------------- */
/* 7. BOOTSTRAP INTEROP                                                   */
/* One sub-block per Bootstrap BEHAVIOUR component a kit family may sit   */
/* in. A kit element never carries a Bootstrap component class itself     */
/* (conventions, section 3); it may share an element or a parent with a   */
/* Bootstrap STRUCTURAL class (.modal-content, .dropdown-menu, .offcanvas,  */
/* .toast, .nav / .tab-content, .collapse) and this block overrides that    */
/* component's --bs-* variables and properties so the kit look wins.       */
/* Verified with the scratch page html/__ui-kit-interop.html (Session F7). */
/* ---------------------------------------------------------------------- */
/* .toast.srvd-toast (F3): Bootstrap's .toast draws a 1px translucent border and a 350px
	 width from its --bs-toast-* variables and hides the element until its JS adds .show;
	 the kit banner keeps its own 335px box, radius and shadow. The kit close button
	 dismisses it through data-bs-dismiss="toast". */
.toast.srvd-toast { --bs-toast-max-width: 335px; --bs-toast-border-width: 0; --bs-toast-font-size: 1em; }
/* tabs (F3): no rule needed. Bootstrap's Tab plugin accepts any [role="tablist"] parent
	 (.srvd-segmented, .srvd-carousel-dots or a plain .nav wrapper around .srvd-tab chips), writes the aria-selected
	 the kit keys on and toggles a class (.active) the kit never styles; the .tab-content
	 panes are Bootstrap's own. Contract: the initially open trigger carries that .active
	 (the plugin finds the tab to deactivate by it, not by aria-selected) - a behaviour
	 hook like .show on a toast, not a style. app.js leaves data-bs-toggle items alone. */
/* .offcanvas.srvd-drawer (F4): Bootstrap's .offcanvas-bottom is a fixed, full-width panel of
	 --bs-offcanvas-height (30vh) with a top border; the kit drawer keeps its own height,
	 corners, gradient and shadow (theme.css loads after Bootstrap, so .srvd-drawer's background
	 shorthand already wins) and sits centred at the phone width, full-width below it.
	 Bootstrap owns position, visibility and the slide transition; its .offcanvas-backdrop
	 is the scrim. */
.offcanvas.srvd-drawer {
	--bs-offcanvas-height: auto;
	--bs-offcanvas-border-width: 0;
	--bs-offcanvas-padding-x: 0;
	--bs-offcanvas-padding-y: 0;
	width: auto;
	max-width: 375px;
	margin: 0 auto;
}
/* .modal-content.srvd-modal (F6): Bootstrap's .modal-content paints --bs-modal-bg with a 1px border
	 and its own radius and stretches to the 500px .modal-dialog; the kit dialog keeps its own
	 360px box, background, radius and shadow (theme.css loads after Bootstrap) and centres in
	 the dialog frame. Inside .modal the .modal-content is a <div> (Bootstrap's .modal is the
	 dialog: it sets role / aria-modal itself); the close button and Cancel carry
	 data-bs-dismiss="modal". Bootstrap owns the backdrop, the fade and Escape. */
.modal-content.srvd-modal {
	--bs-modal-bg: transparent;
	--bs-modal-border-width: 0;
	--bs-modal-color: inherit;
	margin: 0 auto;
}
/* .dropdown-menu.srvd-dropdown (F6): Bootstrap's .dropdown-menu adds a 10rem min-width and a 1px border
	 and shows the menu as display: block through .show; the kit menu is a flex column (its
	 option holder shrinks and clips inside a fixed-height menu). The trigger is the kit button
	 with data-bs-toggle="dropdown" (Bootstrap writes aria-expanded; the kit menu keys nothing on
	 .show); Bootstrap owns the positioning, the outside click and Escape, app.js the arrow keys. */
.dropdown-menu.srvd-dropdown {
	--bs-dropdown-min-width: 0;
	--bs-dropdown-border-width: 0;
}
.dropdown-menu.srvd-dropdown.show { display: flex; }
/* .collapse (F7): no rule needed. Bootstrap's Collapse plugin toggles display on the wrapper
	 (.collapse / .show) and animates its height (.collapsing); a kit list, block or form inside
	 renders as on its sheet. The trigger is a kit button with data-bs-toggle="collapse" and
	 aria-controls (Bootstrap writes its aria-expanded; the kit keys nothing on it for a button).
	 Verified on the scratch page (F7). */
/* framework form feedback: the meriad form module (assets/meriad/js/modules/form.js) marks
	 an invalid field with Bootstrap's .is-invalid and shows its feedback list with .invalid-feedback - state hooks of
	 a behaviour module the kit cannot rename. A kit field or stepper holding such a field takes the kit's own
	 error look (the danger ring; the box keeps its 20px inner edge under the 1px border, as the aria-invalid rule
	 does). The feedback list itself is a page element (page: tables-menu). */
.srvd-field:has(.is-invalid) .srvd-field__box,
.srvd-field:has(.is-invalid) .srvd-pos-amount { border: 1px solid var(--pos-danger); }
.srvd-field:has(.is-invalid) .srvd-field__box { padding: 0 19px; }

/* ==================================================================== */
/* 3. PAGES - one layout section per page (README, section 6): layout,   */
/* page-specific composition and the tokens a page overrides. Components  */
/* come from the kit above and are never restyled here.                   */
/* ==================================================================== */

/* shell: pos ========================================================
	 The POS terminal shell every POS page composes - promoted out of the
	 reprint-receipts section in Session F8 (reconciliation R-07 / R-09) before
	 the next POS page landed: the 1440x1024 canvas (.pos), the 92px sidebar
	 rail (.pos-sidebar, .pos-logo, .pos-nav*; its 60px buttons are the kit's
	 .srvd-pos-menu-item), the gradient screen panel (.pos-content, .pos-screen)
	 with its 96px header (.pos-header, .pos-title) and the pop-ups (.pos-modal*:
	 a 456px glass dialog over a blurred scrim in the --confirm / --result /
	 --form / --status / --options / --picker / --compact types and the
	 --window frame (a floating bar over a window on the modal material the
	 page fills), 84px icon badges, the 56px close and the form's head; bottom
	 drawers and full-screen sheets below sm).
	 Not a kit family: Figma has no component for the shell (it is the frame of
	 every POS page), the approved pages are its reference (decision 6) and the
	 kit page never loads it. Colours are Layer 1 tokens. Figma: the "sidebar"
	 instance and "screen" frame of the POS pages (e.g. 29118:14069), the pop-up
	 frames 29118:14107 / 14125 / 14144, the mobile drawers 29929:98240 /
	 29929:98791. A page adds its own layout in its "page: <name>" section
	 below and never restyles the shell classes. */

/* Terminal canvas: 1440x1024 is the Figma baseline; the screen area fills
	 the viewport and the 820px card column stays centred. */
.pos {
	width: 100%;
	min-width: 768px;
	height: 100vh;
	display: flex;
	overflow: hidden;
}

/* ---- SIDEBAR rail (Figma: pad 16, logo 60, groups gap 60, items gap 12).
	 Desktop only (d-none d-sm-flex); the mobile tab bar is a separate .srvd-tabbar
	 after the screen area. The 60px buttons are the kit's .srvd-pos-menu-item. ---- */
.pos-sidebar {
	width: 92px;
	flex: 0 0 92px;
	padding: 16px;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.pos-logo {
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--pos-logo-bg);
	color: var(--pos-text);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pos-logo img { width: 52px; height: 52px; display: block; object-fit: contain; }
/* the switch outranks the .pos-logo img rule above (0,1,1) */
.pos-logo .pos-logo__img--on-light { display: none; }
[data-bs-theme="light"] .pos-logo .pos-logo__img--on-dark { display: none; }
[data-bs-theme="light"] .pos-logo .pos-logo__img--on-light { display: block; }
.pos-nav {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 60px;
}
.pos-nav-group { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pos-nav-group--bottom { margin-top: auto; gap: 60px; }

/* ---- SCREEN AREA (Figma: radius 32, vertical gradient, 1px gradient hairline
	 border - same mask trick as .glass-effect) ---- */
.pos-content {
	flex: 1;
	min-width: 0;
	display: flex;
	padding: 8px 8px 8px 0;
}
/* --no-rail: the screen panel without the sidebar rail (a display whose controls sit in its page header, the work
	 orders): the panel keeps the same 8px margin on its left */
.pos-content--no-rail { padding-left: 8px; }
.pos-screen {
	flex: 1;
	min-width: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 32px;
	background: var(--pos-screen-surface);
	overflow: hidden;
}
.pos-screen::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: var(--pos-screen-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
					mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
					mask-composite: exclude;
	pointer-events: none;
	z-index: 2;
}

/* ---- HEADER (Figma "header" 96h, pad 24, bottom hairline; the JSON lists the
	 title at x=172 but the export renders it at 116 - a hidden back-button slot).
	 The desktop / mobile title spans switch with d-none d-sm-inline / d-sm-none. ---- */
.pos-header {
	flex: 0 0 96px;
	height: 96px;
	padding: 24px;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var(--pos-hairline);
}
.pos-title {
	margin: 0;
	color: var(--pos-text);
	font-size: 28px;
	line-height: 34px;
	font-weight: 700;
	letter-spacing: -0.14px;
}

/* ---- BANNER : a slim full-width strip above .pos-screen inside .pos-content,
	 painted in the status colour of its modifier; text left, a kit button right ---- */
.pos-content--stacked { flex-direction: column; gap: 8px; }
.pos-banner {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 24px;
	border-radius: 24px;
	font-size: 14px;
	line-height: 18px;
}
.pos-banner--warning { background: var(--pos-warning); color: var(--pos-on-light); }

/* ---- POP-UPS - 456px dialog, r32, modal-glass surface (Figma pop-up frames)
	 over the scrim (#000 @50% + blur 36 -> CSS blur 18). The --confirm and
	 --result variants and the 84px icon badges are the pop-up types every POS
	 page uses; which badge shows is the page's (reprint-receipts: #resultModal).
	 Its buttons are .srvd-btn--lg stretched by the column flex container. ---- */
.pos-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pos-modal[hidden] { display: none; }
body.pos-modal-open { overflow: hidden; }
.pos-modal__sheet {
	position: absolute;
	inset: 0;
	background: var(--pos-overlay);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
}
.pos-modal__dialog {
	--mglass-surface: var(--pos-modal-surface);      /* the Layer 1 pop-up material (both themes) */
	--mglass-border: var(--pos-modal-border);
	--mglass-border-width: 1px;
	--mglass-radius: 32px;
	position: relative;
	z-index: 1;
	width: 456px;
	max-width: 100%;
	margin: 0;
	border-radius: var(--mglass-radius);
	background: var(--mglass-surface);
	display: flex;
	flex-direction: column;
	align-items: center;
	overflow: visible;
}
.pos-modal__dialog::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: var(--mglass-border-width);
	background: var(--mglass-border);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
					mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
					mask-composite: exclude;
	pointer-events: none;
}
.pos-modal__title {
	margin: 0;
	width: 100%;
	font-size: 20px;
	line-height: 25px;
	font-weight: 700;
	text-align: center;
	color: var(--pos-text);
}
.pos-modal__buttons { width: 100%; display: flex; flex-direction: column; gap: 12px; }   /* the .srvd-btn children stretch */

/* confirm: pad 40, title <-> buttons gap 48 (Figma 456x285) */
.pos-modal__dialog--confirm { padding: 40px; gap: 48px; }
.pos-modal__icon {
	width: 84px;
	height: 84px;
	flex: 0 0 84px;
	border-radius: 50%;
	background: #ffffff;
	color: var(--pos-on-light);
	display: none;
	align-items: center;
	justify-content: center;
}
.pos-modal__icon svg { display: block; }
.pos-modal__icon--ok { background: var(--pos-accent); color: var(--pos-on-accent); }
.pos-modal__icon--fail { background: var(--pos-danger); color: var(--pos-on-light); }   /* Figma: #19171d strokes on #ed4052 */
.pos-modal__icon--warning { background: var(--pos-warning); color: var(--pos-on-light); }
.pos-modal__icon--info { background: var(--pos-chip); color: var(--pos-text); }   /* The framework's informationPopup */
.pos-modal__icon--visible { display: flex; }
/* The shared pop-ups (includes/modals.shell.tpl) pick their badge from data-meriad-pos-state on the
	 .pos-modal, so a page needs no per-id rule: busy / success / fail / warning / info */
.pos-modal[data-meriad-pos-state="busy"] .pos-modal__icon--busy,
.pos-modal[data-meriad-pos-state="success"] .pos-modal__icon--ok,
.pos-modal[data-meriad-pos-state="fail"] .pos-modal__icon--fail,
.pos-modal[data-meriad-pos-state="warning"] .pos-modal__icon--warning,
.pos-modal[data-meriad-pos-state="info"] .pos-modal__icon--info { display: flex; }
/* The text line under the title of a result or confirm pop-up (the framework's message popups,
	 the "payment in progress" notice) is centred like the title; the confirm's badge shows in the drawer only (below) */
.pos-modal__dialog--result .pos-modal__subtitle, .pos-modal__dialog--confirm .pos-modal__subtitle { text-align: center; }
/* A result pop-up that closes by itself (the module sets data-meriad-pos-autoclose
	 while its timer runs) shows no close: neither the 56px cross nor the drawer's ghost Close button; the scrim and Escape
	 still close it */
.pos-modal[data-meriad-pos-autoclose] .pos-modal__close,
.pos-modal[data-meriad-pos-autoclose] .pos-modal__buttons { display: none; }
/* the caller's own action (showPosResult options.action) stays while the pop-up auto-closes; the [hidden] of the
	 module wins when there is none */
.pos-modal[data-meriad-pos-autoclose] .pos-modal__buttons--result-action:not([hidden]) { display: flex; }
.pos-modal__buttons--result-action[hidden] { display: none; }   /* the flex of .pos-modal__buttons would beat the browser's [hidden] */

/* result: pad 64/40, gap 32, 260px title column (Figma 456x294) */
.pos-modal__dialog--result { padding: 64px 40px; gap: 32px; }
.pos-modal__dialog--result .pos-modal__title { width: 260px; }
/* close: 56 circle, #ffffff @20%, 24px above the dialog, flush with its right edge */
.pos-modal__close {
	position: absolute;
	right: 0;
	top: -80px;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pos-close-bg);
	color: var(--pos-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.pos-modal__close:hover { background: rgba(255, 255, 255, 0.30); }
.pos-modal__close:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* form (F8, checkout - Figma pop-up frames 28902:13938 / 13945 / 13952): a <form> dialog, pad 40, gap 48;
	 its .pos-modal__content column (gap 32, --pos-modal-gap for a page-level variant) starts with the
	 .pos-modal__head row (the left-aligned title; below sm also the sheet's 44px close button, a kit
	 .srvd-navbar-btn--light) and holds the page's fields; the buttons column follows */
.pos-modal__dialog--form { align-items: stretch; padding: 40px; gap: 48px; }
.pos-modal__content { display: flex; flex-direction: column; gap: var(--pos-modal-gap, 32px); }
.pos-modal__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pos-modal__dialog--form .pos-modal__title { flex: 1 1 auto; width: auto; text-align: left; }   /* the title yields, the 44px close keeps its size */
/* status (F8, checkout - Figma SECTION "Cash payment" 29221:16472: processing / failed / successful):
	 pad 64/124 = a 208px column, gap 20 - the badge (--busy holds the kit's spinner dot), a 17px
	 title, the page's details, the buttons 40 below (20 gap + 20 margin); --row lays two 160px buttons
	 side by side (328 wide, centred over the column) */
.pos-modal__dialog--status { align-items: center; padding: 64px 124px; gap: 20px; }
.pos-modal__icon--busy { background: transparent; color: var(--pos-text); }
.pos-modal__title--status { font-size: 17px; line-height: 19.55px; letter-spacing: -0.17px; }
.pos-modal__dialog--status .pos-modal__buttons { margin-top: 20px; gap: 8px; }
.pos-modal__buttons--row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }   /* equal columns: the kit buttons stretch */
.pos-modal__dialog--status .pos-modal__buttons--row { width: 328px; margin-inline: -60px; }
/* options (F8, tables - Figma "pop-up - new order" 28816:21293): a dialog of a heading block and option
	 sections at gap 40 (pad 40) that ends in a row of two buttons (.pos-modal__buttons--row); below sm a
	 drawer on the elevated surface (29909:94938). .pos-modal__heading is the "title" block a POS pop-up
	 may open with: a 16px muted .pos-modal__subtitle over the 40px .pos-modal__title--lg (24px below
	 sm), gap 8 */
.pos-modal__dialog--options { align-items: stretch; padding: 40px; gap: 40px; }
.pos-modal__heading { display: flex; flex-direction: column; gap: 8px; }
.pos-modal__subtitle { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.pos-modal__title--lg { width: auto; font-size: 40px; line-height: 46px; letter-spacing: -0.4px; text-align: left; }
/* picker (F8, tables - Figma "Select receipt printer" 29171:23319, "Frame 56" 468x392): a 468px form
	 dialog, pad 40, the left-aligned title 32 above a .pos-modal__content column at gap 24 (a field, then
	 the buttons as rows of their own); below sm a drawer at gap 24 ("Choose printer" 29922:74268) */
.pos-modal__dialog--picker { --pos-modal-gap: 24px; width: 468px; align-items: stretch; padding: 40px; gap: 32px; }
.pos-modal__dialog--picker .pos-modal__title { text-align: left; }
/* compact (F8, tables - Figma "Order - Scheme - Move to - chosen" 30014:66298): the small confirmation
	 drawer - a subtitle, a card and the button row at gap 16, pad 16 (44 at the bottom below sm) */
.pos-modal__dialog--compact { align-items: stretch; padding: 16px; gap: 16px; }
/* window (F8, tables-menu - Figma "pop up" 718 of "Split receipt" 29291:32802, "Move table" 29383:34168 and "Add new
	 dish" 29459:44121, the 1100 "modal" of "Select options" 29293:35993 / "Edit dish" 29442:32376, the 720 "pop up" of
	 "Edit order" 29424:44347 = the window alone): a .pos-modal__frame (--pos-modal-width, 718; --wide = 1100) of the
	 48px .pos-modal__bar (the left-aligned title and the 48px kit light close) 24 above the .pos-modal__window, the
	 flat Layer 1 modal material (.modal-glass-effect) the page lays out; the frame carries the material too, painted
	 below sm only (the full-screen sheet). A .pos-modal__panel around a window's buttons is transparent to layout
	 from sm up and the sticky "buttons panel" of the sheet below sm. */
.pos-modal__frame {
	--mglass-radius: 0;
	position: relative;
	z-index: 1;
	width: var(--pos-modal-width, 718px);
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.pos-modal__frame--wide { --pos-modal-width: 1100px; }
@media (min-width: 576px) {
	[data-bs-theme] .pos-modal__frame { --mglass-surface: none; --mglass-border-width: 0px; }   /* outranks the material's light rule */
}
.pos-modal__bar { flex: 0 0 auto; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pos-modal__bar .pos-modal__title { flex: 1 1 auto; width: auto; text-align: left; }
.pos-modal__window {
	--mglass-radius: 32px;
	flex: 1 1 auto;
	min-height: 0;
	max-height: 100%;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.pos-modal__panel { display: contents; }

/* ---- LIGHT theme (Figma light SECTION "Reprint receipts" 29504:27487; the other
	 light sections share it). The tokens do the rest (the pop-up material is the
	 Layer 1 --pos-modal-surface / --pos-modal-border pair); only the close's hover
	 is shell-level. ---- */
[data-bs-theme="light"] .pos-modal__close:hover { background: rgba(255, 255, 255, 0.85); }

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - the mobile POS frames
	 (e.g. "Receipts" 29909:96717, 375x812) and the drawers 29929:98240. The rail
	 is hidden (d-none d-sm-flex) and the page's .srvd-tabbar tab bar shows; the
	 header becomes the centred navbar row, the pop-ups bottom drawers. iOS
	 status bar (44) and home indicator (34) are device chrome and omitted. ---- */
@media (max-width: 575.98px) {
	.pos {
		min-width: 0;
		height: 100vh;
		height: 100dvh;
		flex-direction: column;
	}

	/* ---- screen: flat #19171d, no card ---- */
	.pos-content { flex: 1 1 auto; min-height: 0; padding: 0; }
	.pos-screen { border-radius: 0; background: var(--pos-bg); }
	.pos-screen::before { display: none; }

	/* ---- navbar (Figma: title 22/25 at y=56 = status bar 44 + 12; the list starts
		 at 110 = 66 without the status bar -> 12 + 25 + 10 + list pad 19) ---- */
	.pos-header {
		flex: 0 0 auto;
		height: auto;
		padding: 12px 16px 10px;
		justify-content: center;
		border-bottom: 0;
	}
	.pos-title { font-size: 22px; line-height: 25px; letter-spacing: -0.22px; text-align: center; }

	/* ---- pop-ups -> bottom drawers (r24 top, flat gradient, pad 40/16/44, gap 40); the
		 page decides which badge its confirm drawer shows (reprint-receipts: the printer) ---- */
	.pos-modal { padding: 0; align-items: flex-end; }
	.pos-modal__dialog {
		--mglass-radius: 24px 24px 0 0;
		width: 100%;
		max-height: 100%;
		padding: 40px 16px max(44px, calc(10px + env(safe-area-inset-bottom, 0px)));   /* Figma 44 = 10 + home indicator */
		gap: 40px;
		border-radius: 24px 24px 0 0;
		overflow-y: auto;
	}
	.pos-modal__dialog::before { display: none; }       /* Figma drawer: no hairline border */
	.pos-modal__dialog--result .pos-modal__title { width: 260px; }
	.pos-modal__close { display: none; }                /* drawer closes with the ghost button */
	.pos-modal__icon--printer { display: flex; }        /* the confirm drawer shows the printer badge (Figma 29929:98240, 29909:97243) */
	.pos-modal__dialog--confirm .pos-modal__icon--warning { display: flex; }   /* the generic confirm (#actionConfirmModal) shows its badge in the drawer the same way */

	/* ---- form pop-ups -> full-screen sheets (Figma "Gift card" 29909:97668: a 70px navbar with the
		 title and the 44px close, the fields column 10 below it, the buttons panel 8/16/44) ---- */
	.pos-modal__dialog--form { height: 100%; padding: 0; gap: 0; border-radius: 0; }
	.pos-modal__dialog--form .pos-modal__content { flex: 1 1 auto; min-height: 0; padding: 0 16px 24px; gap: 10px; overflow-y: auto; }
	.pos-modal__head { flex: 0 0 auto; margin: 0 -16px; padding: 16px 16px 10px; }
	.pos-modal__dialog--form .pos-modal__title { font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
	.pos-modal__dialog--form .pos-modal__buttons { flex: 0 0 auto; padding: 8px 16px max(44px, calc(10px + env(safe-area-inset-bottom, 0px))); gap: 10px; }

	/* ---- status pop-up -> drawer (Figma 29909:97292 / 97358 / 97425) ---- */
	.pos-modal__dialog--status { gap: 20px; }
	.pos-modal__dialog--status .pos-modal__buttons { margin-top: 20px; gap: 12px; }
	.pos-modal__dialog--status .pos-modal__buttons--row { width: 100%; margin-inline: 0; }

	/* ---- options pop-up -> a drawer on the elevated surface (Figma 29909:94938: #2c2c30, pad 40/16/44,
		 gap 40, the title 24/29); picker -> a drawer at gap 24; compact -> pad 16/16/44, gap 16 ---- */
	.pos-modal__dialog--options { --mglass-surface: var(--pos-elevated); }
	.pos-modal__title--lg { font-size: 24px; line-height: 29px; letter-spacing: -0.12px; }
	.pos-modal__dialog--picker { gap: 24px; }
	.pos-modal__dialog--compact { padding: 16px 16px max(44px, calc(10px + env(safe-area-inset-bottom, 0px))); gap: 16px; }

	/* ---- window pop-ups -> full-screen sheets (Figma "Edit dish" 29909:97525 / "Move table" 29909:98060: the frame
		 on the modal material, the 70px navbar with the 16px title and the 44px kit close, the window flat at pad
		 10/16/24 gap 24, the buttons in the sticky "buttons panel" on --pos-toolbar) ---- */
	.pos-modal__frame { width: 100%; height: 100%; max-height: none; gap: 0; }
	.pos-modal__frame::before { display: none; }
	.pos-modal__bar { min-height: 70px; padding: 16px 16px 10px; }
	.pos-modal__bar .pos-modal__title { font-size: 16px; line-height: 19.2px; letter-spacing: -0.16px; }
	.pos-modal__frame > .pos-modal__window { --mglass-surface: none; --mglass-border-width: 0px; --mglass-radius: 0; flex: 1 1 auto; min-height: 0; height: auto; max-height: none; padding: 10px 16px 0; gap: 24px; overflow-y: auto; scrollbar-width: none; }
	.pos-modal__frame > .pos-modal__window::-webkit-scrollbar { display: none; }
	.pos-modal__panel {
		position: sticky;
		bottom: 0;
		z-index: 4;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 8px;
		margin: auto -16px 0;
		padding: 8px 16px max(44px, calc(10px + env(safe-area-inset-bottom, 0px)));
		background: var(--pos-toolbar);
	}
	.pos-modal__panel > .pos-modal__buttons { gap: 10px; }

	/* light mobile = tokens only (no light mobile frame is validated): a flat white drawer */
	[data-bs-theme="light"] .pos-modal__dialog { --mglass-surface: linear-gradient(180deg, #f8f9fa 0%, #f1f2f3 100%); }
}

/* page: reprint-receipts ============================================
	 Figma SECTION "Reprint receipts" 29118:14068 (desktop, dark), light section
	 29504:27487, mobile "Receipts" 29909:96717 with the drawers 29929:98240 and
	 29929:98791. Migrated from html/reprint-receipts.html in Session F2b; the
	 mapping record is __plan/template-map/reprint-receipts.md. Components come
	 from the kit: .srvd-pos-menu-item (sidebar rail buttons), .srvd-pos-table-card--wide
	 (receipt cards), .srvd-btn--lg (pop-up buttons), .srvd-tabbar--fluid (mobile tab bar);
	 the canvas, rail, screen panel and pop-ups are the shared POS shell above
	 (promoted in F8). What is left here is the receipt list, which result badge
	 the pop-up shows and one mobile-light token override. Colours are Layer 1
	 tokens. */

/* ---- RECEIPT LIST (Figma "tables": pad 24, columns 820 centred, 2 x 402
	 cards, gap 16). The cards are .srvd-pos-table-card--wide; tapping the guests pill
	 (stretched over the card) arms it, which swaps the pill for the Reprint
	 button - app.js, page section. ---- */
.pos-receipts {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	scrollbar-width: none;
}
.pos-receipts::-webkit-scrollbar { display: none; }
.pos-receipts__subtitle {                             /* mobile only (d-sm-none): 16/19 muted */
	margin: 0;
	font-size: 16px;
	line-height: 19px;
	color: var(--pos-muted);
}
.pos-receipts__grid {
	width: 820px;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
/* no receipts yet: the kit empty state (icon + title) centred in the remaining height of the list */
.pos-receipts__empty {
	flex: 1;
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* the result pop-up's badge follows data-meriad-pos-state (the shell rule) */

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - Figma "Receipts"
	 29909:96717: one column of 92px rows (kit: .srvd-pos-table-card--wide), the confirm
	 drawer shows the shell's printer badge (its rule moved into the shell in F8,
	 sitting 3). ---- */
@media (max-width: 575.98px) {
	/* ---- list (Figma "columns": pad 16, subtitle 16/19 muted, rows gap 16) ---- */
	.pos-receipts { padding: 19px 16px 16px; align-items: stretch; gap: 16px; }
	.pos-receipts__grid { width: auto; grid-template-columns: minmax(0, 1fr); gap: 16px; }

	/* light mobile = tokens only (no light mobile frame is validated): the ghost
		 buttons need a visible chip on the white drawer */
	[data-bs-theme="light"] [data-meriad-pos-page="reprint-receipts"] { --pos-chip: #f1f2f3; --pos-chip-hover: #e6e8ea; }
}

/* page: login ======================================================
	 Figma "V3 Login (dark)" 28688:17695 (default), 28688:17710 (processing),
	 28688:17725 (error); light "V2: Login" 29504:26088 / 26110 / 26125 (the
	 Layer 1 light tokens on the same DOM); mobile "Login-default" 29909:99271
	 (375x812). Migrated from html/login.html in Session F8; the mapping record
	 is __plan/template-map/login.md. Components come from the kit: .srvd-pos-key
	 (keypad keys, --icon for the delete key); the card and the theme toggle are
	 the Layer 1 .glass-effect material. What is left here is the page's layout:
	 the full-bleed photo, the card, the logo, the passcode dots (a page
	 composition: role="progressbar", the dots fill from aria-valuenow, the
	 error text shows by its hidden attribute) and the floating theme toggle
	 (a preview control). Colours are Layer 1 tokens: the working document's
	 --login-* values all equal a token (bg, text, input-secondary = empty dot,
	 accent = filled dot, chip = key, danger = error, logo-bg = mobile disc). */

/* Full-bleed background photo: the page sets --login-background inline on .login-screen (the location's own
	 photo, later configurable in the backoffice); without it the kit's exports show (the dark one carries
	 Figma's 30% darken, the light one 20%; the token colour shows until the photo loads) */
.login-screen {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: var(--pos-bg) var(--login-background, url("../images/login/login-bg.webp")) center / cover no-repeat;
	overflow: hidden;
}
[data-bs-theme="light"] .login-screen { background-image: var(--login-background, url("../images/login/login-bg-light.webp")); }

/* Card = layout only; the frosted glass is .glass-effect (32px radius = its default) */
.login-card {
	z-index: 1;
	width: 492px;
	max-width: 100%;
	padding: 76px 96px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}
.login-logo {
	position: relative;
	width: 140px;
	height: 140px;
	flex: 0 0 auto;
	color: var(--pos-text);
}
.login-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* the switch outranks the .login-logo img rule above (0,1,1) */
.login-logo .login-logo__img--on-light { display: none; }
[data-bs-theme="light"] .login-logo .login-logo__img--on-dark { display: none; }
[data-bs-theme="light"] .login-logo .login-logo__img--on-light { display: block; }

/* Brand line under the logo: "Kassa" with the BETA / location tag, hung below the logo box
	 inside the 60px card gap (absolute, no height of its own, so the card keeps the template's height); the logout
	 page reuses the card with the check badge and a message column */
.login-brand {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	margin-top: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}
.login-brand__title {
	margin: 0;
	font-size: 20px;
	line-height: 25px;
	font-weight: 700;
	letter-spacing: -0.1px;
	color: var(--pos-text);
	text-transform: uppercase;
}
.login-brand__tag { font-size: 13px; line-height: 16px; color: var(--pos-muted); }
.login-brand__tag--beta { color: var(--pos-danger); font-weight: 700; }
.login-message { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.login-message__title { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; color: var(--pos-text); }
.login-message__text { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.login-message__link { color: var(--pos-text); font-weight: 700; }
.login-primary {
	width: 300px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 40px;
}

/* Passcode dots (Figma "code input" 300x96: 16px dots, gap 40, pad 40; the
	 error line sits in the bottom padding). aria-valuenow fills the first n dots. */
.login-dots {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 0;
}
.login-dots__track { display: flex; gap: 40px; }
.login-dot {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	border-radius: 50%;
	background: var(--pos-input-secondary);
	transition: background-color 0.12s ease;
}
.login-dots__track[aria-valuenow="1"] .login-dot:nth-child(-n+1),
.login-dots__track[aria-valuenow="2"] .login-dot:nth-child(-n+2),
.login-dots__track[aria-valuenow="3"] .login-dot:nth-child(-n+3),
.login-dots__track[aria-valuenow="4"] .login-dot:nth-child(-n+4),
.login-dots__track[aria-valuenow="5"] .login-dot:nth-child(-n+5) { background: var(--pos-accent); }
.login-card[data-meriad-pos-state="error"] .login-dots__track .login-dot { background: var(--pos-danger); }   /* wins over the fill rules (same specificity, later) */
.login-error {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	text-align: center;
	color: var(--pos-danger);
	font-size: 13px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: -0.08px;
}

/* Keypad (Figma "keyboard" 300x396: 3 x 84px columns, gap 12, pad 12/0); the
	 keys are the kit's .srvd-pos-key, the "0" (10th key) sits in the middle column */
.login-keypad {
	display: grid;
	grid-template-columns: repeat(3, 84px);
	gap: 12px;
	justify-content: center;
	padding: 12px 0;
}
.login-keypad > :nth-child(10) { grid-column: 2; }

/* Floating theme toggle: a 48px glass pill (preview control) */
.login-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 10;
	width: 48px;
	height: 48px;
	--glass-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	color: var(--pos-text);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.login-toggle:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - Figma "Login-default"
	 29909:99271: the card becomes a full-bleed glass sheet over a portrait crop
	 of the photo (Figma stacks photo -> #000 @50% -> blur 36 -> the default
	 glass gradient, so the 50% layer is folded under the surface), the logo a
	 100px disc, card gap 60 -> 24; the dots and keypad geometry are the desktop
	 one, the key labels shrink in the kit (.srvd-pos-key, 24px). ---- */
@media (max-width: 575.98px) {
	.login-screen {
		padding: 0;
		background-image: var(--login-background, url("../images/login/login-bg-mobile.webp"));
	}
	.login-card {
		width: 100%;
		max-width: none;
		min-height: 100vh;
		padding: 76px 16px;
		gap: 24px;
		--glass-radius: 0;
		--glass-blur: 36px;
		--glass-saturate: 1;
		--glass-border-width: 0;
		--glass-shadow: none;
		--glass-surface:
			linear-gradient(180deg, rgba(47, 46, 51, 0.75) 0%, rgba(37, 39, 40, 0.60) 100%),
			linear-gradient(rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
	}
	.login-logo {
		width: 100px;
		height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background: var(--pos-logo-bg);
	}
	.login-primary { width: 100%; }
}

/* page: checkout ===================================================
	 Figma SECTION "Checkout" 28902:13755 (Desktop set, dark): the four
	 payment-method frames 28902:13845 / 13860 / 13878 / 13896 (only the "payment
	 area" component 28813:20261 differs), the print pop-up 28902:13914, the
	 loyalty / discount / gift card pop-ups (28902:13938, 28268, 13993, 13945,
	 13986, 13952, 13969) and the payment status SECTION "Cash payment"
	 29221:16472; light SECTION "Checkout" 29504:26642 + "Cash payment"
	 29504:27932 (the Layer 1 tokens on the same DOM); mobile SECTION "Order":
	 "Checkout step 1" 29909:97049, "step 2 - *" 29909:97070 / 97118 / 97160 /
	 97202, the drawers 29909:97243 / 97292 / 97358 / 97425 and the "Gift card"
	 sheet 29909:97668. Migrated from html/checkout.html in Session F8 (sitting
	 3); the mapping record is __plan/template-map/checkout.md. Components come
	 from the kit: .srvd-tab (extras and payment chips; --lg for the cash presets and
	 reward chips), .srvd-pos-amount--lg (the 64px money steppers), .srvd-field--pill (the
	 pill fields and selects), .srvd-dropdown--popover.srvd-dropdown--hug (the loyalty results),
	 .srvd-checkbox--lg (the checkbox), .srvd-btn--lg (the actions) and .srvd-btn--icon.srvd-btn--tertiary
	 (the back and remove buttons), .srvd-navbar-btn (the mobile back and close buttons),
	 .srvd-stories (the mobile step pager), .srvd-progress-spindot (the processing badge);
	 the canvas, the rail and the pop-ups (--confirm / --form / --status) are the
	 POS shell. What is left here is the two-panel layout, the order / bonus /
	 totals / payment compositions, the status details and the mobile two-step
	 flow. Colours are Layer 1 tokens; text keeps the working document's rounded
	 line heights (R-20). */
[data-meriad-pos-page="checkout"] { --pos-panel-x: 80px; --checkout-header-inset: 20px; }   /* Figma panel side padding 80; the back button 20 from the edge */
@media (max-width: 1439.98px) {
	[data-meriad-pos-page="checkout"] { --pos-panel-x: clamp(28px, 6vw, 80px); --checkout-header-inset: var(--pos-panel-x); }   /* the side padding scales below the 1440 baseline */
}

/* ---- CONTENT: two equal panels in the screen area (Figma "content" 1340x1008, pad 8 8 8 0, gap 8).
	 The details panel is the Layer 1 .glass-effect, the checkout panel the flat .modal-glass-effect;
	 data-meriad-pos-step on the main picks the visible panel below sm. ---- */
.checkout {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 8px;
	padding: 8px 8px 8px 0;
}
.checkout-panel {
	--glass-radius: 32px;
	--mglass-radius: 32px;
	--glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);      /* the panel's own float shadow (the working document's validated value) */
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* ---- panel header (Figma "header" 96h, pad 24/80, hairline): the back button (a kit tertiary icon
	 button) sits 20px from the panel edge, the title 16px after it ---- */
.checkout-panel__header {
	flex: 0 0 96px;
	height: 96px;
	padding: 24px var(--pos-panel-x) 24px var(--checkout-header-inset);
	display: flex;
	align-items: center;
	gap: 16px;
	border-bottom: 1px solid var(--pos-hairline);
}
.checkout-panel__header--plain { padding-left: var(--pos-panel-x); }   /* no back button: the title starts at the 80px inset */

/* shared text (Figma: section title 20/25 bold muted, labels and hints 16/19 muted) */
.checkout-section-title { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; color: var(--pos-muted); }
.checkout-section-meta { font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.checkout-section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checkout-label { display: block; margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.checkout-hint { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
/* the warning line of the gift card pop-up: the kit warning tag leads the reason, in the warning colour */
.checkout-hint--warning { display: flex; align-items: flex-start; gap: 12px; color: var(--pos-warning); }
/* the feedback line of a form pop-up (a rejected discount code or gift card), gone while empty */
.checkout-feedback { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 16px; color: var(--pos-danger); }
.checkout-feedback:empty { display: none; }

/* ---- LEFT PANEL: the order list fills, the bonus options hug the bottom (Figma "order details"
	 pad 24/80 gap 20, rows pad 16/0; "bonus options" pad-top 24). The details are one reloadable
	 fragment: .checkout-details is the column the two blocks sit in. ---- */
.checkout-details { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.checkout-order {
	flex: 1 1 auto;
	min-height: 0;
	padding: 24px var(--pos-panel-x);
	display: flex;
	flex-direction: column;
	gap: 20px;
	border-bottom: 1px solid var(--pos-hairline);
}
.checkout-order__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	min-height: 0;
	overflow-y: auto;
	scrollbar-width: none;
}
.checkout-order__list::-webkit-scrollbar { width: 0; display: none; }
.checkout-order__item { display: flex; align-items: baseline; gap: 4px; padding: 16px 0; }
.checkout-order__qty { flex: 0 0 30px; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.checkout-order__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.checkout-order__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.checkout-order__sub { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.checkout-order__price { flex: 0 0 auto; font-size: 16px; line-height: 19px; text-align: right; }
.checkout-order__price--old { color: var(--pos-muted); text-decoration: line-through; }   /* a price a loyalty reward replaced (Figma cash frame) */

.checkout-bonus { flex: 0 0 auto; padding-top: 24px; display: flex; flex-direction: column; }
.checkout-section-head--inset { padding: 0 var(--pos-panel-x); }
.checkout-bonus__list { display: flex; flex-direction: column; }
.checkout-bonus__item {
	position: relative;
	padding: 24px var(--pos-panel-x);
	display: flex;
	flex-direction: column;
	gap: 8px;
	border-bottom: 1px solid var(--pos-hairline);
}
/* the remove button (a kit tertiary icon button) sits 20px from the panel edge, vertically centred */
.checkout-bonus__remove { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }
/* 3-column grid: name 209 / points 209 / price 88 (Figma "bonus item") */
.checkout-bonus__head, .checkout-bonus__row { display: grid; align-items: baseline; }
.checkout-bonus__head { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.checkout-bonus__head--3, .checkout-bonus__row--3 { grid-template-columns: 1fr 1fr 88px; }
.checkout-bonus__head--2, .checkout-bonus__row--2 { grid-template-columns: 1fr auto; }
.checkout-bonus__end { text-align: right; }
.checkout-bonus__rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.checkout-bonus__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.checkout-bonus__points { display: inline-flex; align-items: baseline; gap: 4px; }
.checkout-bonus__num { font-size: 16px; line-height: 19px; }
.checkout-bonus__unit { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.checkout-bonus__price { font-size: 16px; line-height: 19px; text-align: right; }
/* earned points + total: 108h, pad 24/80/12/80, 28px bold pair */
/* no extras applied yet: one muted line in the place of the items */
.checkout-bonus__empty { margin: 0; padding: 24px var(--pos-panel-x); font-size: 16px; line-height: 19px; color: var(--pos-muted); border-bottom: 1px solid var(--pos-hairline); }
.checkout-bonus__total { min-height: 108px; padding: 24px var(--pos-panel-x) 12px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.checkout-bonus__big { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.14px; }

/* ---- RIGHT PANEL: top (fills, scrolls) / bottom (hugs) ---- */
.checkout-panel__top { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.checkout-panel__top::-webkit-scrollbar { width: 0; display: none; }
.checkout-panel__bottom { flex: 0 0 auto; display: flex; flex-direction: column; border-top: 1px solid var(--pos-hairline); }
/* extras (Figma "tabs area": pad 24/80, hairline; the kit chips wrap with gap 8) */
.checkout-extras {
	padding: 24px var(--pos-panel-x);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--pos-hairline);
}
/* tips (Figma "tips": pad 22/80, gap 28, the label fills, the kit stepper 239 wide) */
.checkout-tips { padding: 22px var(--pos-panel-x); display: flex; align-items: center; gap: 28px; }
.checkout-tips > .checkout-label { flex: 1 1 auto; }
.checkout-tips__amount { flex: 0 0 239px; width: 239px; display: grid; }
/* mobile-only subtotal / total block (Figma "total" in 29909:97070) */
.checkout-totals { display: none; }
/* payment area (Figma "payment area": pad 24/80, gap 28; head gap 20; a field = label + control, gap 12) */
.checkout-payment {
	padding: 24px var(--pos-panel-x);
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.checkout-payment__head { display: flex; flex-direction: column; gap: 20px; }
.checkout-method { display: flex; flex-direction: column; gap: 28px; }
.checkout-method--narrow { padding-inline: 20px; }                          /* Type=cash&PIN sits 20px further in (Figma pad 24/100) */
.checkout-field { display: flex; flex-direction: column; gap: 12px; }
/* chip rows: the kit chips share the row (Figma tabs gap 8; the cash presets 4 x 75.5 + "Exact change" 172) */
.checkout-chips { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.checkout-chips--cash { grid-template-columns: repeat(4, minmax(0, 1fr)) 172px; }
.checkout-chips--hug { display: flex; flex-wrap: wrap; gap: 8px; }
/* checkbox row (Figma "checkbox": the kit large checkbox + a 17px label, gap 12) */
.checkout-check { display: flex; align-items: center; gap: 12px; }
.checkout-check__label { margin: 0; font-size: 17px; line-height: 20px; cursor: pointer; }
/* the change (Contant) and the PIN part (Contant + pin) under their stepper: the muted label, the
	 17px amount at the end, a danger note on its own line while the received amount falls short */
.checkout-change { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.checkout-change > .checkout-label { flex: 1 1 auto; }
.checkout-change__value { font-size: 17px; line-height: 20px; font-weight: 500; }
.checkout-change__note { flex: 1 0 100%; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-danger); }
/* actions (Figma "buttons" 108h: pad 24/80, gap 12, two equal kit buttons) */
.checkout-actions {
	padding: 24px var(--pos-panel-x);
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 12px;
	border-top: 1px solid var(--pos-hairline);
}

/* ---- payment status pop-up (shell --status): which badge shows, the title's state colour and the
	 208px details list (Figma "details": 13/16 muted terms, 20/25 bold values, gap 4) ---- */
#statusModal[data-meriad-pos-state="processing"] .pos-modal__icon--busy,
#statusModal[data-meriad-pos-state="failed"] .pos-modal__icon--fail,
#statusModal[data-meriad-pos-state="cancelled"] .pos-modal__icon--fail,
#statusModal[data-meriad-pos-state="processed"] .pos-modal__icon--ok { display: flex; }
/* no title while processing: the details sit 40 lower (Figma 29221:16473) unless the machine's message speaks in its place
	 (the live message line under the badge, styled as the status title) */
#statusModal[data-meriad-pos-state="processing"] .checkout-status__message[hidden] + .checkout-status__details { margin-top: 40px; }
#statusModal[data-meriad-pos-state="failed"] .checkout-status__title,
#statusModal[data-meriad-pos-state="cancelled"] .checkout-status__title { color: var(--pos-danger); }
.checkout-status__message { margin: 0; width: 100%; font-size: 17px; line-height: 19.55px; letter-spacing: -0.17px; text-align: center; color: var(--pos-text); }
.checkout-status__details { width: 100%; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.checkout-status__details > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.checkout-status__details dt { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; font-weight: 400; color: var(--pos-muted); }
.checkout-status__details dd { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; }

/* ---- loyalty pop-up: the kit results menu 4px below the search field (Figma 28902:28268), the
	 selected member (28902:13993: the pop-up's content gap tightens to 28) ---- */
.checkout-fields { display: flex; flex-direction: column; gap: 32px; }
.checkout-search { position: relative; }
.checkout-search > .srvd-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5; }
#loyaltyModal[data-meriad-pos-state="selected"] { --pos-modal-gap: 28px; }
#loyaltyModal[data-meriad-pos-state="selected"] .checkout-fields { gap: 28px; }
.checkout-member { display: flex; flex-direction: column; gap: 16px; }
.checkout-member__row { display: flex; align-items: baseline; gap: 16px; }
.checkout-member__id { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.checkout-member__name { font-size: 20px; line-height: 25px; font-weight: 700; }
.checkout-member__email { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-member__points { flex: 0 0 auto; font-size: 17px; line-height: 20px; }

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - Figma "Checkout step 1" 29909:97049 and
	 "Checkout step 2 - *" 29909:97070 ...: the two panels become the two steps (data-meriad-pos-step on the
	 main, which scrolls), the shell rail is hidden and a top bar with the kit's 44px back button
	 and the kit stories pager lead the page; a fixed --pos-toolbar button panel holds Next / Print /
	 Paid; the pop-ups are the shell's drawers and sheets. ---- */
.checkout-topbar, .checkout-pager, .checkout-bottombar { display: none; }
@media (max-width: 575.98px) {
	[data-meriad-pos-page="checkout"] { --pos-panel-x: 0px; }
	.checkout {
		flex: 1 1 auto;
		min-height: 0;
		flex-direction: column;
		gap: 16px;
		padding: 16px 16px 136px;                /* room for the fixed button panel (112 + 24) */
		overflow-y: auto;
		scrollbar-width: none;
	}
	.checkout::-webkit-scrollbar { display: none; }

	/* ---- top bar (Figma navbar: the 44px kit button, the centred title / subtitle, "Step n/2") ---- */
	.checkout-topbar { display: flex; align-items: center; gap: 12px; }
	.checkout-topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
	.checkout-topbar__name { font-size: 16px; line-height: 19px; font-weight: 700; letter-spacing: -0.16px; }
	.checkout-topbar__sub { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
	.checkout-topbar__step { flex: 0 0 auto; min-width: 44px; white-space: nowrap; text-align: right; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
	/* the kit stories pager spans the row (Figma "stories pagination": pad 12/0 folded into the 16 gap) */
	.checkout-pager { display: grid; margin: -4px 0 -8px; }

	/* ---- panels: full-bleed, the glass materials switched off through their variables; one step
		 visible at a time ---- */
	.checkout-panel {
		--glass-sheen: transparent;
		--glass-surface: none;
		--glass-blur: 0px;
		--glass-saturate: 1;
		--glass-top-light: transparent;
		--glass-depth: transparent;
		--glass-shadow: 0 0 0 transparent;
		--glass-border-width: 0px;
		--glass-radius: 0;
		--mglass-surface: none;
		--mglass-border-width: 0px;
		--mglass-radius: 0;
		-webkit-backdrop-filter: none;             /* a blur(0) filter would still composite the panel and grey its text */
		backdrop-filter: none;
		flex: 0 0 auto;
		overflow: visible;
	}
	.checkout[data-meriad-pos-step="1"] .checkout-panel--checkout,
	.checkout[data-meriad-pos-step="2"] .checkout-panel--details { display: none; }

	/* STEP 1 - order + bonus options (Figma 29909:97049: 17px section titles, rows pad 16/0) */
	.checkout-panel__header { display: none; }              /* the title lives in the top bar */
	.checkout-section-title { font-size: 17px; line-height: 20px; letter-spacing: -0.17px; }
	.checkout-details { flex: 0 0 auto; }
	.checkout-order { flex: 0 0 auto; padding: 0 0 16px; gap: 20px; }
	.checkout-bonus__empty { padding: 16px 0; }
	.checkout-order__list { overflow: visible; }
	.checkout-bonus { padding-top: 16px; }
	.checkout-bonus__item { padding: 16px 0; gap: 16px; align-items: flex-end; }
	.checkout-bonus__item > .checkout-bonus__head, .checkout-bonus__item > .checkout-bonus__rows { align-self: stretch; }
	.checkout-bonus__item > .checkout-bonus__rows { margin-top: -8px; }
	.checkout-bonus__remove { position: static; transform: none; order: 3; }   /* the x moves to the bottom-right corner (Figma "bonus item mobile") */
	.checkout-bonus__head--3, .checkout-bonus__row--3 { grid-template-columns: 119px 1fr 88px; column-gap: 8px; }
	.checkout-bonus__head--3 > :nth-child(2) { text-align: right; }
	.checkout-bonus__row--3 .checkout-bonus__points { justify-content: flex-end; }
	.checkout-bonus__total { padding: 16px 0; }
	.checkout-bonus__big { font-size: 24px; line-height: 29px; letter-spacing: -0.12px; }

	/* STEP 2 - checkout + payment (Figma 29909:97070: 17px titles, the fields full width) */
	.checkout-panel__top { overflow: visible; }
	.checkout-panel__header--plain { display: flex; flex: 0 0 auto; height: auto; padding: 0 0 24px; border: 0; }
	.checkout-extras { padding: 0 0 24px; border: 0; }
	.checkout-tips { flex-direction: column; align-items: stretch; gap: 17px; padding: 0 0 16px; border-bottom: 1px solid var(--pos-hairline); }
	.checkout-tips__amount { flex: 0 0 auto; width: 100%; }
	.checkout-totals { display: flex; flex-direction: column; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--pos-hairline); }
	.checkout-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: 16px; line-height: 19px; }
	.checkout-totals__row > :first-child { color: var(--pos-muted); }
	.checkout-totals__row > :last-child { font-weight: 500; }
	.checkout-panel__bottom { border: 0; }
	.checkout-payment { padding: 16px 0; border-bottom: 1px solid var(--pos-hairline); }
	/* 2 x 2 method chips, 4 cash presets + a full-width "Exact change" */
	.checkout-chips { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.checkout-chips--cash { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.checkout-chips--cash > :last-child { grid-column: 1 / -1; }
	.checkout-method--narrow { padding-inline: 0; }
	.checkout-check__label { flex: 1; }
	.checkout-actions { display: none; }                    /* replaced by the fixed button panel */

	/* ---- fixed button panel (Figma "buttons panel": --pos-toolbar, pad 8/16/44, gap 10) ---- */
	.checkout-bottombar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
		gap: 10px;
		padding: 8px 16px max(44px, calc(10px + env(safe-area-inset-bottom, 0px)));   /* Figma: 44 = 10 + home indicator */
		background: var(--pos-toolbar);
	}

	/* ---- the loyalty results sit in the sheet's flow ---- */
	.checkout-search > .srvd-dropdown { position: static; margin-top: 8px; }

	/* light mobile = tokens only (no light mobile frame is validated): the white chips need a tint
		 on the white page */
	[data-bs-theme="light"] [data-meriad-pos-page="checkout"] { --pos-chip: #f1f2f3; --pos-chip-hover: #e6e8ea; }
}

/* page: tables =====================================================
	 Figma FRAME "Tables - Scheme" 28781:19100 (Desktop set, SECTION "Tables"
	 28781:19099): the floor plan; "Tables - list" 29068:21118; the new-order
	 pop-up 28816:21293; "Tables - splited table view" 29068:21168; the receipt
	 printer SECTION 29171:23319; the move-to picker 29383:34032. Light
	 29504:26194 / 27174 / 27224 / 26330 / 27580 (the Layer 1 tokens on the same
	 DOM). Mobile "Tables - Scheme" 29909:92725, "Tables - List" 29922:68570,
	 "Tables - New order" 29909:94938, the split sheet 29996:58991, "Choose
	 printer" 29922:74268, "Order - Scheme - Move to" 30014:66151 / 66298.
	 Migrated from html/tables.html in Session F8 (sitting 4,
	 rendered/f8/_tables-html.js); the mapping record is
	 __plan/template-map/tables.md. Components come from the kit: .srvd-pos-seat /
	 .srvd-pos-table / .srvd-pos-bar / .srvd-pos-entrance (the floor plan), .srvd-pos-table-card--grid
	 (the list cards) and --sm.--fluid (the move drawer's card), .srvd-tab (hall
	 tabs), .srvd-segmented--icon (the view toggle), .srvd-btn--icon.srvd-btn--tertiary (header
	 buttons), .srvd-pos-guest--sm and .srvd-pos-amount--lg (the new-order pop-up),
	 .srvd-field--pill + .srvd-dropdown--popover (the printer picker), .srvd-btn--lg (pop-up
	 buttons), .srvd-btn--light / .srvd-navbar-btn--light (closes), .srvd-tabbar--fluid (mobile
	 tab bar); the canvas, the rail, the screen and the pop-ups (--options /
	 --picker / --result / --compact) are the POS shell. What is left here is
	 the 90px header with its rule, the plan canvas (halls, walls, the zoom
	 stack, the scale / pan transform), the list grid, the split view and its
	 cards, the printer field and the mobile navbar / move-mode variants.
	 Colours are Layer 1 tokens; the floor plan's table colours are the kit's
	 literals.
	 The page hooks carry the POS prefix - data-meriad-pos-page on <body>,
	 data-meriad-pos-mode="move" on <body> in move mode, data-meriad-pos-hall on the placeholder plan's halls
	 (the zone tabs are buttons that filter the zone sections client-side through their hidden attribute,
	 tables.js; per-zone/<id> only preselects a zone; the plan is the static placeholder). */

/* ---- HEADER (Figma "header" 1340x90: pad 20 / 20 / 19, bottom hairline; "navigation" gap 32 with a
	 full-height rule (Figma "Vector 2" at 248) between the 124px title block + the view toggle and the
	 hall tabs; the buttons row on the right) ---- */
.tables-header {
	flex: 0 0 90px;
	height: 90px;
	padding: 20px 20px 19px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--pos-hairline);
}
.tables-header__nav { position: relative; display: flex; align-items: center; gap: 32px; }
.tables-header__nav::after {
	content: "";
	position: absolute;
	left: 248px;
	top: -20px;
	width: 1px;
	height: 90px;
	background: var(--pos-hairline);
}
.tables-header__title { display: flex; align-items: center; gap: 16px; }
.tables-titleblock { width: 124px; display: flex; flex-direction: column; }
.tables-subtitle { margin: 0; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
/* the move-mode title (a second heading: "Move to" on desktop, the 16px navbar title below sm) */
.tables-movetitle { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.14px; color: var(--pos-text); }
.tables-tabs { display: flex; gap: 4px; height: 48px; }
.tables-header__actions, .tables-header__cancel { display: inline-flex; gap: 8px; }
[data-meriad-pos-mode="move"] .tables-subtitle { display: none; }   /* desktop move mode: "Move to" alone (Figma 29383:34032) */

/* ---- FLOOR PLAN (Figma "schema" 1340x926): the design canvas is top-anchored + horizontally centred
	 (Figma clips its bottom 8px behind the 1008px screen), panned by --plan-x / --plan-y and scaled by
	 fit x zoom (app.js sets all three); drag anywhere to pan, wheel / pinch to zoom ---- */
.tables-plan {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
	cursor: grab;
	touch-action: none;                        /* drag-to-pan handles touch itself */
	user-select: none;
}
.tables-plan[data-meriad-pos-dragging] { cursor: grabbing; }   /* the POS marks the drag and the wheel zoom with attributes (README section 4), not the template's is-* classes */
.tables-plan__canvas {
	position: absolute;
	left: 50%;
	top: 0;
	width: 1340px;
	height: 926px;
	transform: translate(calc(-50% + var(--plan-x, 0px)), var(--plan-y, 0px)) scale(var(--plan-scale, 1));
	transform-origin: top center;
	transition: transform 0.2s ease;
}
.tables-plan[data-meriad-pos-dragging] .tables-plan__canvas,
.tables-plan[data-meriad-pos-zooming] .tables-plan__canvas { transition: none; }   /* wheel / pinch zoom follows the input directly */
/* halls: Figma frames with a 5px INSIDE stroke; every piece (the kit's seats, tables, bars and entrances,
	 the walls) sits at its frame-relative offset from the Figma JSON (inline left / top) */
.tables-hall {
	position: absolute;
	background: var(--pos-bg);
	box-shadow: inset 0 0 0 5px var(--pos-hairline);
	transition: opacity 0.2s ease, visibility 0.2s;
}
.tables-hall > * { position: absolute; }
.tables-wall { background: var(--pos-hairline); }
/* the hall tabs hide every other hall: they fade out while the plan zooms in on the selected one
	 (app.js), and visibility keeps their tables out of reach. One generic rule (floor-plan fixes, sitting 1): the
	 selected hall is marked, so a plan with any number of halls filters without a CSS change. The POS marks it with
	 the attribute data-meriad-pos-selected instead of the template's is-selected class (README section 4); the
	 placeholder plan is never filtered (data-meriad-pos-hall="all"), the floor-plan plan wires it */
.tables-plan:not([data-meriad-pos-hall="all"]) .tables-hall:not([data-meriad-pos-selected]) { opacity: 0; visibility: hidden; }
/* zoom stack (Figma "scale": two 56px circles on the tile fill, 20 from the corner, gap 12) - no kit
	 family (the kit's icon buttons are 48 / 44) */
.tables-zoom { position: absolute; top: 20px; right: 20px; display: flex; flex-direction: column; gap: 12px; }
.tables-zoom__btn {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pos-tile);
	color: var(--pos-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.tables-zoom__btn svg { display: block; }
.tables-zoom__btn:hover { background: var(--pos-chip-hover); }
.tables-zoom__btn:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }

/* ---- TABLE LIST (Figma "Tables - list" 29068:21118: content pad 24, sections gap 24; a section = a
	 20/25 muted title 16 above a 5-column grid (gap 4) of kit cards; Figma "scroll section": an 8px
	 rounded thumb, no track) ---- */
.tables-list {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	padding: 24px 16px 24px 24px;             /* 16 + the 8px scrollbar = Figma's 24 right inset */
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.tables-list::-webkit-scrollbar { width: 8px; }
.tables-list::-webkit-scrollbar-thumb { border-radius: 24px; background: var(--pos-faint); }
@supports not selector(::-webkit-scrollbar) {
	.tables-list { scrollbar-width: thin; scrollbar-color: var(--pos-faint) transparent; }
}
.tables-list__section { display: flex; flex-direction: column; gap: 16px; }
/* the zone tabs hide every other zone section through its hidden attribute (tables.js; the template's generic
	 is-selected rule of the floor-plan fixes, sitting 1, is not needed for that) */
.tables-list__title { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; color: var(--pos-muted); }
.tables-list__grid {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 4px;
}
.tables-list__grid > li { min-width: 0; }
/* fewer columns below the 1440 baseline so "Table 10" + the pill still fit */
@media (max-width: 1199.98px) { .tables-list__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 991.98px) { .tables-list__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- NEW-ORDER pop-up (shell --options): a section = a 16px muted label 8 above its control (Figma
	 "Number of guests" / "Otherwise input"); the six kit guest buttons at gap 8 ---- */
.tables-neworder__section { display: flex; flex-direction: column; gap: 8px; }
.tables-neworder__label { font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tables-neworder__presets { display: flex; align-items: center; gap: 8px; }

/* ---- SPLIT-TABLE view (Figma 29068:21168): a 936px column centred on the canvas - the 48px header row
	 (title 20/25 + the kit light close) 24 above the "table tile" grid (2 x 462, gap 12, rows auto / 1fr
	 = 674) of glass cards (the Layer 1 modal material, pad 40, radius 32). The section itself is that
	 material only below sm (the mobile sheet 29996:58991, no radius or hairline); from sm up its
	 surface is switched off through the material's variable. ---- */
.tables-split {
	--mglass-border-width: 0px;
	--mglass-radius: 0;
	position: relative;
	z-index: 1;
	width: 936px;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: var(--pos-text);
}
@media (min-width: 576px) {
	[data-bs-theme] .tables-split { --mglass-surface: none; }   /* outranks the material's light rule */
}
.tables-split__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; }
.tables-split__title { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; }
.tables-split__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto minmax(0, 1fr);
	gap: 12px;
	height: 674px;
	max-height: 100%;
}
/* a card: the top block (heading + guests pill, then the items or the empty line) and the subtotal
	 pinned to the bottom (Figma "table tile": pad 40, gap 24) */
.tables-split-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 24px;
	min-height: 0;
	padding: 40px;
	color: var(--pos-text);
	text-decoration: none;
	overflow: hidden;
}
.tables-split-card:hover { color: var(--pos-text); }
.tables-split-card:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* in move mode the split being moved is no destination  */
.tables-split-card[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.tables-split-card__top { display: flex; flex-direction: column; gap: 24px; }
.tables-split-card__header { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; }
/* the card's title block (Figma "title": subtitle 16/19 muted over the 40/46 part letter, gap 8) */
.tables-split-card__heading { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tables-split-card__subtitle { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tables-split-card__title { margin: 0; font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.4px; }
/* guests pill (Figma "persons area": 34h, r24, tile fill, pad 0/12/0/8, gap 8 - the list card's pill) */
.tables-split-card__persons {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 12px 0 8px;
	border-radius: 24px;
	background: var(--pos-tile);
	font-size: 16px;
	line-height: 19px;
	white-space: nowrap;
}
.tables-split-card__empty { margin: 0; font-size: 16px; line-height: 19px; }
.tables-split-card__items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.tables-split-card__item { display: flex; align-items: baseline; gap: 4px; padding: 8px 0; font-size: 16px; line-height: 19px; }
.tables-split-card__qty { flex: 0 0 30px; color: var(--pos-muted); }
.tables-split-card__name { flex: 1 1 auto; min-width: 0; }
.tables-split-card__price { flex: 0 0 auto; text-align: right; }
.tables-split-card__footer { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; }
.tables-split-card__label { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tables-split-card__total { font-size: 16px; line-height: 19px; font-weight: 500; }

/* ---- PRINTER pop-up (shell --picker): the field = a 16px muted subtitle 12 above the kit pill field
	 (Figma "Paid sum input", gap 12); the kit menu opens 4px below the field (Figma "dropdown" 388x185).
	 Below sm the field gives way to the printer cards (Figma "table" 345x82: r24, the card fill, a 1px
	 hairline, pad 24, 17/20 bold), 16 below the subtitle ---- */
.tables-printer__field { display: flex; flex-direction: column; gap: 12px; }
.tables-printer__subtitle { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tables-printer__cards { display: flex; flex-direction: column; gap: 16px; }
.tables-printer__card {
	min-height: 82px;
	padding: 24px;
	border: 0;
	border-radius: 24px;
	background: var(--pos-card);
	box-shadow: inset 0 0 0 1px var(--pos-hairline);
	color: var(--pos-text);
	font-family: inherit;
	font-size: 17px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: -0.17px;
	text-align: left;
	cursor: pointer;
}
.tables-printer__card:hover { background: var(--pos-chip-hover); }
.tables-printer__card:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* the result pop-up's badge follows data-meriad-pos-state (the shell rule) */

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - Figma "Tables - Scheme" 29909:92725: the shell
	 hides the rail and the page shows the kit tab bar; the header becomes the navbar row (the view
	 toggle | the centred title block | the buttons) + a scrolling tabs row; the plan shows at the
	 design's 0.7225 scale (app.js), the list in two columns of the kit's --grid cards; the pop-ups are
	 the shell's drawers, the split view a full-bleed sheet. ---- */
@media (max-width: 575.98px) {
	/* navbar row (Figma "navbar": row 44 + pad 12/16/10 without the status bar) + tabs row (Figma "tabs"
		 72: pad 12, 48px pills); the desktop wrappers are flattened with display: contents so the pieces
		 re-order */
	.tables-header {
		flex: 0 0 auto;
		height: auto;
		flex-wrap: wrap;
		gap: 0;
		padding: 10px 16px 0;
		border-bottom: 0;
	}
	.tables-header__nav, .tables-header__title { display: contents; }
	.tables-header__nav::after { display: none; }
	.tables-header__toggle { order: 1; flex: 0 0 auto; margin-right: 12px; }   /* 92 + 12 = the 104px buttons row -> the title centred on screen (Figma) */
	.tables-titleblock {
		order: 2;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		flex-direction: column-reverse;         /* mobile: title above subtitle */
		align-items: center;
		text-align: center;
		padding: 0 8px;
	}
	.tables-header__actions { order: 3; flex: 0 0 auto; }
	.tables-tabs {
		order: 4;
		flex: 0 0 100%;
		height: auto;                          /* 48px pills + 12px bottom pad */
		margin-top: 20px;                      /* navbar bottom pad 8 + tabs top pad 12 */
		padding-bottom: 12px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.tables-tabs::-webkit-scrollbar { display: none; }

	/* list (Figma 29922:68570: pad 16, sections gap 24, 17/20 titles, a 2-column grid gap 8 of the kit's
		 86px --grid cards; touch: no visible scrollbar) */
	.tables-list { padding: 16px; scrollbar-width: none; }
	.tables-list::-webkit-scrollbar { display: none; }
	.tables-list__title { font-size: 17px; line-height: 20px; letter-spacing: -0.17px; }
	.tables-list__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

	/* plan: fills the rest; no zoom stack in the mobile design */
	.tables-zoom { display: none; }

	/* split-table sheet (Figma 29996:58991): the whole screen is the modal material, a 70px navbar
		 (pad 16/16/10, the kit 44px close, title 16/19 700) and one scrolling column of cards (pad
		 10/16/16, gap 16, the part letters 22/25) */
	.tables-split { width: 100%; max-width: none; height: 100%; gap: 0; }
	.tables-split__header { flex: 0 0 auto; min-height: 44px; padding: 16px 16px 10px; }
	.tables-split__title { font-size: 16px; line-height: 19px; letter-spacing: -0.16px; }
	.tables-split__grid {
		display: flex;
		flex-direction: column;
		gap: 16px;
		height: auto;
		max-height: none;
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		padding: 10px 16px 16px;
		scrollbar-width: none;
	}
	.tables-split__grid::-webkit-scrollbar { display: none; }
	.tables-split-card { flex: 0 0 auto; justify-content: flex-start; padding: 16px; }
	.tables-split-card__title { font-size: 22px; line-height: 25px; letter-spacing: -0.22px; }

	/* printer drawer: the cards 16 below the subtitle */
	.tables-printer__field { gap: 16px; }

	/* move mode (Figma "Order - Scheme - Move to" 30014:66151, "popover body" 70: pad 16/16/10, the 44px
		 kit close): the 16/19 title with the 13/16 subtitle left-aligned, no view toggle, no tab bar
		 (app.js hides it); the tabs 12 below */
	[data-meriad-pos-mode="move"] .tables-header { padding: 16px 16px 0; }
	[data-meriad-pos-mode="move"] .tables-subtitle { display: block; }
	[data-meriad-pos-mode="move"] .tables-header__toggle { display: none; }
	[data-meriad-pos-mode="move"] .tables-titleblock { align-items: flex-start; text-align: left; padding: 0; }
	[data-meriad-pos-mode="move"] .tables-movetitle { font-size: 16px; line-height: 19px; letter-spacing: -0.16px; }
	[data-meriad-pos-mode="move"] .tables-tabs { margin-top: 22px; }

	/* light mobile = tokens only (no light mobile frame is validated): the ghost buttons and guest chips
		 need a visible chip on the white drawers */
	[data-bs-theme="light"] [data-meriad-pos-page="tables"] { --pos-chip: #f1f2f3; --pos-chip-hover: #e6e8ea; }
}

/* page: tables-menu ================================================
	 Figma SECTION "Tables – Menu" 28682:18332 (Desktop set): the list / tiles
	 artboards 28676:18190 / 28682:1643 (only the category browser differs), the
	 pop-ups "Select options" 29293:35993, "Edit dish" 29442:32376, "Edit order"
	 29424:44347, "Split receipt" 29291:32802, "Move table" 29383:34168 / 34259
	 and "Add new dish" 29459:44121; light 29504:25857 / 25947 and the light
	 modals 28079 / 29167 / 28291 / 28982 / 29725 (the Layer 1 tokens on the
	 same DOM). Mobile "Table - menu" 29909:96919 / "Table - order" 29909:96980,
	 "Edit dish" 29909:97525, "Move table" 29909:98060. Migrated from
	 html/tables-menu.html in Session F8 (sitting 5, rendered/f8/_tmenu-html.js);
	 the mapping record is __plan/template-map/tables-menu.md. Components come
	 from the kit: .srvd-segmented--icon (the list / tiles toggle) and .srvd-segmented (the mobile
	 Menu / Order switch), .srvd-pos-cat--fill / .srvd-pos-cat-tile--fluid (the
	 categories), .srvd-tab (menu groups, delete reasons), .srvd-pos-dish--fluid / --lg
	 (dish cards), .srvd-btn--icon.srvd-btn--tertiary / --secondary (the receipt's icon
	 buttons), .srvd-pos-amount (the 48px steppers; --lg in the options windows,
	 --field in the new-dish form, --alert for a changed count), .srvd-pos-option
	 (--adaptive: the option cards, rows below sm), .srvd-checkbox--lg (the selection
	 checkboxes and flags), .srvd-field--pill (the new-dish fields, the move-table
	 fields with an <a> picker), .srvd-btn--lg (the actions), .srvd-btn--light / .srvd-navbar-btn
	 (closes, the mobile top bar); the canvas, the rail and the pop-up frames
	 (the shell's --window type: .pos-modal__frame / __bar / __window / __panel)
	 are the POS shell. What is left here is the two panels, the receipt
	 compositions (lines, order list, the floating action bar, totals, actions),
	 the pop-up windows' inner layouts (the three columns of the options window,
	 the order lists with their scroll thumbs, the new-dish rows) and the mobile
	 top bar. Colours are Layer 1 tokens; text keeps the working document's
	 rounded line heights (R-20). */

/* ---- CONTENT: the two glass panels in the screen area (Figma "content" 1348x1024: pad 8 8 8 0, gap 8;
	 "menu area" 952 / "table receipt" 380, both r32 on the Layer 1 glass) ---- */
.tmenu {
	flex: 1;
	min-width: 0;
	display: flex;
	gap: 8px;
	padding: 8px 8px 8px 0;
}
.tmenu-menu, .tmenu-receipt {
	--glass-radius: 32px;
	--glass-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);      /* the panel's own float shadow (the working document's validated value) */
}
/* shared text (Figma: the 13/16 muted subtitle over the shell's 28/34 title; the 16px bold muted section labels) */
.tmenu-titleblock { display: flex; flex-direction: column; }
.tmenu-subtitle { margin: 0; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-section-label { margin: 0; font-size: 16px; line-height: 19.2px; font-weight: 700; letter-spacing: -0.16px; color: var(--pos-muted); }
/* scrolling regions hide their scrollbar (touch / wheel first) so no gutter is reserved: the 4-column grid stays exact at 1440 */
.tmenu-cats__list, .tmenu-grid, .tmenu-takeorder, .tmenu-order__list { scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.tmenu-cats__list::-webkit-scrollbar, .tmenu-grid::-webkit-scrollbar, .tmenu-takeorder::-webkit-scrollbar, .tmenu-order__list::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* ---- MENU PANEL (Figma "menu area": pad 16, gap 16): the categories column (240, grows to 360) and the
	 dishes column (664 at 1440, fluid) ---- */
.tmenu-menu {
	flex: 5 1 952px;
	min-width: 618px;                          /* cats 240 + gap 16 + a 2-column grid 330 + pad 32 */
	padding: 16px;
	display: flex;
	gap: 16px;
	overflow: hidden;
}
.tmenu-cats {
	flex: 1 1 240px;
	min-width: 240px;
	max-width: 360px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}
/* header (Figma "header" 240x50: pad-left 16, the title block and the kit segmented control, centred) */
.tmenu-cats__header {
	flex: 0 0 50px;
	height: 50px;
	padding-left: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
/* the category list: the tiles view = a 2-column grid of the kit tiles (Figma "categories list" 118 x 118,
	 gap 4), the list view = the kit pills 200 wide (Figma pad-right 40), gap 4 */
.tmenu-cats__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.tmenu-cats__list[data-meriad-pos-view="tiles"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; align-content: start; }
.tmenu-cats__list[data-meriad-pos-view="list"] { display: flex; flex-direction: column; gap: 4px; padding-right: 40px; }
@media (min-width: 1900px) {
	.tmenu-cats__list[data-meriad-pos-view="tiles"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }   /* the wider column takes three tiles */
}
.tmenu-dishes {
	flex: 4 1 664px;
	min-width: 330px;                          /* two 163px cards + the gap */
	display: flex;
	flex-direction: column;
	gap: 16px;
	overflow: hidden;
}
.tmenu-tabs { flex: 0 0 48px; display: flex; gap: 4px; }
/* dish grid (Figma "dishes grid": 163px cards, gap 4): as many columns as fit, stretched (161px tracks keep
	 the four 163px columns exact at 1440; the column floor keeps two) */
.tmenu-grid {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(161px, 1fr));
	gap: 4px;
	align-content: start;
	/* every row is as tall as its cards (the kit's square aspect-ratio): the card is a scroll container (overflow hidden),
		 so its automatic minimum height is 0 and an auto row would start at 0 and only share out the grid's definite
		 height - a long list squashed the cards to fit */
	grid-auto-rows: max-content;
	align-items: start;
	overflow-y: auto;
	overflow-x: hidden;
}

/* ---- RECEIPT PANEL (Figma "table receipt" 380: the 82px header with a hairline, the "order area" (pad 16/24,
	 gap 8, hairline) with the floating action bar over its bottom, the "bottom" (pad 16/24) with the order
	 list pinned to its end) ---- */
.tmenu-receipt {
	flex: 1 1 380px;
	min-width: 380px;
	max-width: 520px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.tmenu-receipt__top {
	position: relative;
	flex: 0 1 auto;
	min-height: 0;
	max-height: 50%;
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid var(--pos-hairline);
}
.tmenu-receipt__header {
	flex: 0 0 auto;
	padding: 16px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 1px solid var(--pos-hairline);
}
.tmenu-receipt__actions, .tmenu-order__actions { display: inline-flex; gap: 8px; }
.tmenu-takeorder {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 24px 84px;                   /* the last line scrolls clear of the floating bar (60 + 12 + 12) */
	display: flex;
	flex-direction: column;
	gap: 8px;
	overflow-y: auto;
	overflow-x: hidden;
}
/* a take-order line (Figma "add dish card" 332x139: pad 12/0, gap 8, bottom hairline; header = the 16px name
	 and price, the 13px mods, the controls row = the kit tertiary icon button and the kit stepper) */
.tmenu-lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tmenu-line { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--pos-hairline); }
.tmenu-line__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tmenu-line__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.tmenu-line__price { font-size: 16px; line-height: 19px; }
.tmenu-line__mods { margin: 0; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-line__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* floating action bar (Figma "floating icon buttons" 29383:34017: 240x60 pill on the tile fill + 16px blur,
	 pad 4, gap 8, four 52px buttons - no kit family at 52px): bottom-centre of the take-order area, 12 above
	 the hairline */
.tmenu-floatbar {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 60px;
	padding: 4px;
	border-radius: 40px;
	background: var(--pos-tile);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}
.tmenu-floatbar__btn {
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pos-chip);
	color: var(--pos-text);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.tmenu-floatbar__btn:hover:where(:not(:disabled)) { background: var(--pos-chip-hover); }
.tmenu-floatbar__btn--primary { background: var(--pos-accent); color: var(--pos-on-accent); }
.tmenu-floatbar__btn--primary:hover:where(:not(:disabled)) { background: var(--pos-accent-hover); }
.tmenu-floatbar__btn:focus-visible { outline: var(--bs-focus-ring-width) solid var(--bs-focus-ring-color); outline-offset: 2px; }
/* the kit's disabled look (40%, no hover): Annuleren, Bevestigen and Afrekenen are disabled while the cart being taken
	 is empty (cart.js), on the table order and the direct sale alike */
.tmenu-floatbar__btn:disabled { opacity: 0.4; cursor: default; }
/* the order summary (Figma "bottom": pad 16/24; the 48px "header" row, the list (a 40px subheader on a
	 --pos-card rule, 51px items on hairlines), the "sum" block, the button area at gap 12) */
.tmenu-receipt__bottom {
	flex: 1 1 auto;
	min-height: 0;
	padding: 16px 24px;
	display: flex;
	flex-direction: column;
}
.tmenu-order__header { flex: 0 0 48px; display: flex; align-items: center; gap: 16px; }
.tmenu-order__persons { font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-order__actions { margin-left: auto; }
.tmenu-order__list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; }
.tmenu-order__subheader { margin: 0; padding: 12px 0; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; border-bottom: 1px solid var(--pos-card); display: flex; align-items: center; gap: 8px; }   /* the course outline tag + the "Huidige gang" tag side by side */
.tmenu-order__dot { flex: 0 0 auto; width: 4px; height: 4px; border-radius: 50%; background: var(--pos-muted); }   /* the separator between the course tag and the "Huidige gang" tag */
.tmenu-order__items { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tmenu-order__item { display: flex; align-items: baseline; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--pos-hairline); }
.tmenu-order__qty { flex: 0 0 30px; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-order__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tmenu-order__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.tmenu-order__sub { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-order__price { flex: 0 0 auto; font-size: 16px; line-height: 19px; }
.tmenu-total { flex: 0 0 auto; padding: 16px 0; display: flex; flex-direction: column; }
.tmenu-total__label { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-total__value { font-size: 16px; line-height: 19px; font-weight: 500; }
.tmenu-actions { flex: 0 0 auto; margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.tmenu-actions__row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }

/* ---- shared pop-up pieces: the scroll thumb of a list window (Figma "scroll section": an 8px thumb the page
	 syncs, no track) and the totals block (13/16 muted labels, 16/19 values, gap 12) ---- */
.tmenu-scroll { position: absolute; top: 0; width: 8px; height: 100%; border-radius: 24px; pointer-events: none; }
.tmenu-scroll__thumb { width: 8px; height: 40px; border-radius: 24px; background: var(--pos-faint); }
.tmenu-totals { flex: 0 0 auto; display: flex; flex-direction: column; gap: 12px; }
.tmenu-totals__row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
.tmenu-totals__label { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-totals__value { font-size: 16px; line-height: 19px; font-weight: 500; }

/* ---- OPTIONS WINDOW (Figma "options window" 29293:35997, 1100 x 645 / the edit-dish 600): three columns -
	 the dish section (260, pad 20) with the kit dish card at 220, the option's section (612, pad 20, gap 40,
	 hairlines on both sides) with the groups of kit option cards, the actions column (228, pad 24) ---- */
.tmenu-options {
	flex-direction: row;
	align-items: stretch;
	height: 645px;
}
#editDishModal .tmenu-options { height: 600px; }
.tmenu-options__dish { flex: 0 0 260px; padding: 20px; }
.tmenu-options__groups {
	flex: 1 1 612px;
	min-width: 0;
	min-height: 0;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	border-inline: 1px solid var(--pos-hairline);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
}
.tmenu-options__groups::-webkit-scrollbar { width: 0; display: none; }
/* a rendered <legend> sits outside the fieldset's flex flow, so the space under the label is the label's own margin, not
	 the fieldset's gap (20px under every group label) */
.tmenu-optgroup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; }
.tmenu-optgroup__label { float: none; width: auto; margin: 0 0 20px; padding: 0; font-size: 16px; line-height: 19px; font-weight: 700; letter-spacing: -0.16px; color: var(--pos-muted); }
.tmenu-optgroup__tiles { display: flex; flex-wrap: wrap; gap: 4px; }
/* the actions column: the kit --lg stepper, the flags (edit dish) and the primary button; the stepper and the
	 button share the shell's buttons panel (transparent to layout from sm up, the pinned bar below sm) */
.tmenu-options__actions { flex: 0 0 228px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
#addDishModal .tmenu-options__actions { gap: 12px; }
.tmenu-options__actions > .pos-modal__panel > .srvd-btn { order: 3; }
.tmenu-options__flags { order: 2; display: flex; flex-direction: column; }
/* a flag row (Figma "checkbox" 180x64: the kit large checkbox, gap 16, the 16/19 label) */
.tmenu-flag { display: flex; align-items: center; gap: 16px; padding: 16px 0; }
.tmenu-flag__label { margin: 0; font-size: 16px; line-height: 19px; font-weight: 500; cursor: pointer; }
/* the mobile dish header (Figma "dish header" 29939:58378: a 120px image on the card fill, the 17px bold name
	 and the price bottom-aligned beside it) */
.tmenu-dishhead { display: flex; align-items: flex-end; gap: 16px; }
.tmenu-dishhead__thumb { position: relative; flex: 0 0 120px; width: 120px; height: 120px; border-radius: 24px; background: var(--pos-card); overflow: hidden; }
.tmenu-dishhead__placeholder { position: absolute; left: 36px; top: 36px; width: 48px; height: 48px; }
.tmenu-dishhead__placeholder svg { display: block; }
.tmenu-dishhead__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tmenu-dishhead__text { display: flex; flex-direction: column; gap: 4px; padding-bottom: 8px; }
.tmenu-dishhead__name { font-size: 17px; line-height: 20px; font-weight: 700; letter-spacing: -0.17px; }
.tmenu-dishhead__price { font-size: 16px; line-height: 19px; }

/* ---- EDIT-ORDER window (Figma "pop up" 720x905: pad 40, gap 24; the subheader, the 450px list with the 8px
	 thumb 12 beside it, the reason panel, the totals, the button row) ---- */
#editOrderModal { --pos-modal-width: 720px; }
.tmenu-eom { padding: 40px; gap: 24px; }
.tmenu-eom__header { display: flex; align-items: baseline; justify-content: space-between; gap: 40px; }
.tmenu-eom__title { margin: 0; font-size: 20px; line-height: 25px; font-weight: 700; }
.tmenu-eom__persons { font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-eom__scrollwrap { position: relative; flex: 0 1 auto; min-height: 120px; }
.tmenu-eom__list { margin: 0; padding: 0; list-style: none; height: 450px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.tmenu-eom__list::-webkit-scrollbar { width: 0; display: none; }
.tmenu-eom__scroll { right: -20px; }
/* an order line (Figma "order item" 640x83: text | the kit stepper | price at gap 24, pad 16/0, hairline; the
	 kit tertiary icon button 40 after the price) */
.tmenu-eom__item { display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--pos-hairline); }
.tmenu-eom__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tmenu-eom__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.tmenu-eom__mods { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-eom__price { flex: 0 0 60px; text-align: right; font-size: 16px; line-height: 19px; }
.tmenu-eom__action { margin-left: 16px; }
/* row states: a deleted line fades its text (--pos-faint) and swaps the trash for the restore glyph; the count
	 is the kit's --alert stepper */
.tmenu-eom__item[data-meriad-pos-state="deleted"] .tmenu-eom__name,
.tmenu-eom__item[data-meriad-pos-state="deleted"] .tmenu-eom__mods,
.tmenu-eom__item[data-meriad-pos-state="deleted"] .tmenu-eom__price { color: var(--pos-faint); }
.tmenu-eom__restore { display: none; }
.tmenu-eom__item[data-meriad-pos-state="deleted"] .tmenu-eom__trash { display: none; }
.tmenu-eom__item[data-meriad-pos-state="deleted"] .tmenu-eom__restore { display: block; }
/* the delete-reason panel (Figma "reason": the card fill, pad 16, gap 16; the message in the danger colour, the
	 kit tertiary "Restore all", four kit chips) */
.tmenu-eom__reason { flex: 0 0 auto; padding: 16px; border-radius: 24px; background: var(--pos-card); display: flex; flex-direction: column; gap: 16px; }
.tmenu-eom__reason[hidden] { display: none; }
.tmenu-eom__reason-row { display: flex; align-items: center; gap: 16px; }
.tmenu-eom__reason-msg { flex: 1; margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-danger); }
.tmenu-eom__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }

/* ---- SPLIT-RECEIPT and MOVE-TABLE windows (Figma "order list" 718x678 / "window" 718x783: pad 40, gap 24; the
	 muted subheader, the list of kit checkbox + line rows, the 8px thumb 16 from the edge, the totals and the
	 button at gap 24) ---- */
.tmenu-select { padding: 40px; gap: 24px; }
.tmenu-select__header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 40px; }
.tmenu-select__titleblock { display: flex; flex-direction: column; gap: 8px; }
.tmenu-select__subtitle, .tmenu-select__persons, .tmenu-select__hint { font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-select__title { font-size: 18px; line-height: 23px; font-weight: 700; color: var(--pos-muted); }
.tmenu-select__hint { flex: 0 0 auto; margin: 0; }
.tmenu-select__scrollwrap { position: relative; flex: 0 1 auto; min-height: 120px; }
.tmenu-select__scrollbox { max-height: 323px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; }
.tmenu-select__scrollbox::-webkit-scrollbar { width: 0; display: none; }
.tmenu-mtm .tmenu-select__scrollbox { max-height: 387px; }   /* the select-all row (64) + four lines */
.tmenu-select__scroll { right: -24px; }                       /* 16 from the window's edge */
.tmenu-select__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.tmenu-select__all { display: flex; align-items: center; gap: 24px; padding: 16px 0; }
.tmenu-select__alllabel { margin: 0; font-size: 16px; line-height: 19px; font-weight: 500; cursor: pointer; }
.tmenu-select__item { display: flex; align-items: center; gap: 24px; }
.tmenu-select__line { flex: 1; min-width: 0; display: flex; align-items: center; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--pos-hairline); }
.tmenu-select__text { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.tmenu-select__name { font-size: 16px; line-height: 19px; font-weight: 500; }
.tmenu-select__mods { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-select__price { flex: 0 0 60px; text-align: right; font-size: 16px; line-height: 19px; }
.tmenu-select__bottom { flex: 0 0 auto; display: flex; flex-direction: column; gap: 24px; }
/* the move-table fields (Figma "tables": two kit pill fields, gap 24; the "To table" picker is an <a> in the box) */
.tmenu-mtm__tables { flex: 0 0 auto; display: flex; gap: 24px; }
.tmenu-mtm__tables > .srvd-field { flex: 1 1 0; min-width: 0; }

/* ---- ADD-NEW-DISH form window (Figma "content" 718x481: pad 40, gap 40; rows of two kit pill fields at gap
	 24 / 20; the kit --field stepper as the Amount field; the button row) ---- */
.tmenu-ndm { padding: 40px; gap: 40px; }
.pos-modal__frame > .tmenu-ndm { overflow: visible; }   /* the kit select menus hang below their field; the short window has nothing to scroll (the sheet below sm scrolls, see the mobile block) */
.tmenu-ndm__form { display: flex; flex-direction: column; gap: 20px; }
.tmenu-ndm__row { display: flex; gap: 24px; }
.tmenu-ndm__row > .srvd-field { flex: 1 1 0; min-width: 0; }

/* ---- What the working screen adds to the design page (layout only) - the empty states, the
	 framework's form feedback lists, the flags in a line name, the written allergen list of the options window
	 (dietary.list.tpl), the split-table form and the guests field of the move window ---- */
.tmenu-empty { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-feedback { margin: 0; padding: 0; list-style: none; font-size: 13px; line-height: 16px; color: var(--pos-danger); }
.tmenu-feedback:empty { display: none; }
/* the framework's form module shows the list with Bootstrap's .invalid-feedback (display: none, 100% wide, .875em) */
.tmenu-feedback.invalid-feedback { display: block; width: auto; margin-top: 4px; font-size: 13px; color: var(--pos-danger); }
/* the direct sale has no order block: the take-order area takes the whole receipt panel, and its total is pinned
	 under the scrolling lines (the floating bar sits in the total's bottom padding instead of the lines') */
.tmenu-receipt__top:only-child { flex: 1 1 auto; max-height: none; border-bottom: 0; }
.tmenu-receipt__top:only-child .tmenu-takeorder { padding-bottom: 16px; }
.tmenu-takeorder__total { flex: 0 0 auto; padding: 16px 24px 84px; border-top: 1px solid var(--pos-hairline); }
/* the name of a selectable line is a label of its checkbox (the whole text selects the line) */
.tmenu-select__text { cursor: pointer; }
.tmenu-takeorder__body { display: flex; flex-direction: column; gap: 8px; }
.tmenu-line__name, .tmenu-order__name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tmenu-line__flag { display: inline-flex; color: var(--pos-warning); }
.tmenu-order__empty { margin: 0; padding: 16px 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }
.tmenu-actions > form { display: flex; flex-direction: column; }   /* the delete form in the actions block: a column stretches the kit button to the block's width */
.tmenu-options__dish { display: flex; flex-direction: column; gap: 16px; min-height: 0; overflow-y: auto; scrollbar-width: none; }
.tmenu-options__dish::-webkit-scrollbar { width: 0; display: none; }
.tmenu-dietary { display: flex; flex-direction: column; gap: 12px; }
.tmenu-dietary__group { display: flex; flex-direction: column; gap: 6px; }
.tmenu-dietary__title { margin: 0; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: -0.08px; color: var(--pos-muted); }
.tmenu-dietary__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.tmenu-dietary__item { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 16px; letter-spacing: -0.08px; }
.tmenu-dietary__icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tmenu-optgroup > .srvd-field, .tmenu-eom__reason > .srvd-field { width: 100%; }
.tmenu-mtm__guests { flex: 0 0 auto; }
.tmenu-split { padding: 40px; gap: 24px; }
.tmenu-split__letters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.tmenu-split__blocked { margin: 0; font-size: 16px; line-height: 19px; color: var(--pos-muted); }

/* ---- MOBILE (<= 575.98px = below Bootstrap's sm) - Figma "Table - menu" 29909:96919 / "Table - order"
	 29909:96980: the shell rail is hidden, the top app bar (the kit navbar buttons) and the kit segmented
	 control lead a single scrolling column; the panels lose their glass and one of them shows at a time; the
	 categories become one horizontal row of kit pills (app.js swaps the family), the dish grid drops to two
	 columns; the pop-ups are the shell's full-screen sheets. ---- */
.tmenu-topbar, .tmenu-switch { display: none; }
@media (max-width: 575.98px) {
	.tmenu {
		flex: 1 1 auto;
		min-height: 0;
		flex-direction: column;
		gap: 16px;
		padding: 16px;
		overflow-y: auto;
		scrollbar-width: none;
	}
	.tmenu::-webkit-scrollbar { display: none; }

	/* ---- top app bar (Figma navbar 29922:71552: the 44px kit button, the centred 22px title over the subtitle,
		 the two 44px kit buttons) ---- */
	.tmenu-topbar { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; }
	.tmenu-topbar__title { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
	.tmenu-topbar__name { font-size: 22px; line-height: 25px; font-weight: 700; letter-spacing: -0.22px; }
	.tmenu-topbar__sub { font-size: 13px; line-height: 16px; letter-spacing: -0.08px; color: var(--pos-muted); }
	.tmenu-topbar__actions { flex: 0 0 auto; display: flex; gap: 8px; }
	/* the Menu / Order switch: the kit segmented control stretched by its grid wrapper */
	.tmenu-switch { display: grid; }

	/* ---- panels: full-bleed, the glass switched off through its variables; the switch picks one ---- */
	.tmenu-menu, .tmenu-receipt {
		--glass-sheen: transparent;
		--glass-surface: none;
		--glass-blur: 0px;
		--glass-saturate: 1;
		--glass-top-light: transparent;
		--glass-depth: transparent;
		--glass-shadow: 0 0 0 transparent;
		--glass-border-width: 0px;
		--glass-radius: 0;
		-webkit-backdrop-filter: none;             /* a blur(0) filter would still composite the panel and grey its text */
		backdrop-filter: none;
		width: 100%;
		min-width: 0;
		max-width: none;
		flex: 0 0 auto;
		flex-direction: column;
		padding: 0;
		gap: 16px;
		overflow: visible;
	}
	.tmenu[data-meriad-pos-view="menu"] .tmenu-receipt { display: none; }
	.tmenu[data-meriad-pos-view="order"] .tmenu-menu { display: none; }

	/* ---- MENU: no header (the title lives in the top bar); the categories one swipeable row of pills ---- */
	.tmenu-cats { width: 100%; min-width: 0; max-width: none; flex: 0 0 auto; overflow: visible; }
	.tmenu-cats__header { display: none; }
	.tmenu-cats__list[data-meriad-pos-view="tiles"], .tmenu-cats__list[data-meriad-pos-view="list"] {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 4px;
		padding: 0 40px 0 0;                      /* Figma end-peek */
		overflow-x: auto;
		overflow-y: hidden;
	}
	.tmenu-cats__list > .srvd-pos-cat { flex: 0 0 auto; width: auto; }
	.tmenu-dishes { width: 100%; min-width: 0; flex: 1 1 auto; overflow: visible; }
	.tmenu-tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
	.tmenu-tabs::-webkit-scrollbar { display: none; }
	.tmenu-tabs > .srvd-tab { flex: 0 0 auto; }
	.tmenu-grid { flex: 0 0 auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }

	/* ---- ORDER: the receipt header lives in the top bar; the whole page scrolls (no caps, no floating bar) ---- */
	.tmenu-receipt__header { display: none; }
	.tmenu-receipt__top { flex: 0 0 auto; max-height: none; overflow: visible; border-bottom: 0; }
	.tmenu-takeorder { flex: 0 0 auto; padding: 0; gap: 16px; overflow: visible; }
	.tmenu-line { padding: 0 0 16px; }
	.tmenu-line:last-child { border-bottom: 0; padding-bottom: 0; }
	.tmenu-floatbar { display: none; }
	.tmenu-receipt__bottom { flex: 0 0 auto; padding: 16px 0 0; border-top: 1px solid var(--pos-hairline); }
	.tmenu-order__list { flex: 0 0 auto; overflow: visible; }
	/* the order total (Figma "Table - order": right-aligned, the 20/24 bold sum) */
	.tmenu-total { align-items: flex-end; gap: 2px; padding: 16px 0 0; }
	.tmenu-total__value { font-size: 20px; line-height: 24px; font-weight: 700; }
	.tmenu-actions { margin-top: 16px; }

	/* ---- options window -> the sheet's column: the dish header row, the option rows, the flags, the pinned
		 stepper + button (Figma "Edit dish" 29909:97525) ---- */
	.tmenu-options { flex-direction: column; height: auto; }
	#editDishModal .tmenu-options { height: auto; }
	.tmenu-options__dish { flex: 0 0 auto; padding: 0; }
	.tmenu-options__groups { flex: 0 0 auto; padding: 0; gap: 24px; border: 0; overflow: visible; }
	.tmenu-optgroup__label { margin-bottom: 16px; }
	.tmenu-optgroup__tiles { flex-direction: column; gap: 8px; }
	.tmenu-options__actions { display: contents; }
	.tmenu-options__flags { order: 1; }
	.tmenu-flag { padding: 16px 0; }
	.tmenu-options__bar { order: 2; }

	/* ---- edit order -> the sheet: the list flows, a line re-stacks (text + price / stepper + action), the reason
		 chips scroll sideways ---- */
	.tmenu-eom { padding: 16px 0 0; }   /* no navbar bar on this sheet: a 16px inset above the subheader */
	.tmenu-eom__scrollwrap { min-height: 0; }
	.tmenu-eom__list { height: auto; overflow: visible; }
	.tmenu-scroll { display: none; }
	.tmenu-eom__item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 12px; column-gap: 12px; }
	.tmenu-eom__text { grid-column: 1; }
	.tmenu-eom__price { grid-column: 2; flex-basis: auto; }
	.tmenu-eom__item > .srvd-pos-amount { grid-column: 1; justify-self: start; }
	.tmenu-eom__action { grid-column: 2; justify-self: end; margin-left: 0; }
	.tmenu-eom__reason-row { flex-wrap: wrap; }
	.tmenu-eom__tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
	.tmenu-eom__tabs::-webkit-scrollbar { display: none; }
	.tmenu-eom__tabs > .srvd-tab { flex: 0 0 auto; }

	/* ---- split receipt / move table -> the sheet (Figma "Move table" 29909:98060: the two fields stay a row,
		 no subheader, a line becomes a card - title + price / mods / checkbox + stepper - on a hairline, 16px
		 total labels) ---- */
	.tmenu-select { padding: 0; }
	.tmenu-select__scrollwrap { min-height: 0; }
	.tmenu-select__scrollbox, .tmenu-mtm .tmenu-select__scrollbox { max-height: none; overflow: visible; }
	.tmenu-mtm__header { display: none; }
	.tmenu-select__item { gap: 12px; }
	.tmenu-srm .tmenu-select__line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; row-gap: 12px; column-gap: 12px; }
	.tmenu-srm .tmenu-select__text { grid-row: 1; grid-column: 1; }
	.tmenu-srm .tmenu-select__price { grid-row: 1; grid-column: 2; flex-basis: auto; }
	.tmenu-srm .tmenu-select__line > .srvd-pos-amount { grid-row: 2; grid-column: 1 / -1; justify-self: start; }
	.tmenu-mtm .tmenu-select__item {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 8px;
		padding: 12px 0;
		border-bottom: 1px solid var(--pos-hairline);
	}
	.tmenu-mtm .tmenu-select__line, .tmenu-mtm .tmenu-select__text { display: contents; }
	.tmenu-mtm .tmenu-select__name { grid-row: 1; grid-column: 1; align-self: start; margin-bottom: 8px; }
	.tmenu-mtm .tmenu-select__price { grid-row: 1; grid-column: 2; align-self: start; flex-basis: auto; }
	.tmenu-mtm .tmenu-select__mods { grid-row: 2; grid-column: 1 / -1; min-height: 32px; margin-bottom: 8px; }   /* Figma keeps a 32px (2-line) mods box */
	.tmenu-mtm .tmenu-select__item > .srvd-checkbox { grid-row: 3; grid-column: 1; justify-self: start; }
	.tmenu-mtm .tmenu-select__line > .srvd-pos-amount { grid-row: 3; grid-column: 1 / -1; justify-self: end; }
	.tmenu-mtm .tmenu-totals__label { font-size: 16px; line-height: 19px; letter-spacing: 0; }

	/* ---- add new dish -> the sheet: the rows stack ---- */
	.tmenu-ndm { padding: 0; gap: 24px; }
	.pos-modal__frame > .tmenu-ndm { overflow-y: auto; }   /* the sheet scrolls again (native selects below sm, no hanging menu) */
	.tmenu-ndm__row { flex-direction: column; gap: 20px; }

	/* ---- the working screen's additions to the sheet: the split form stacks, the dish column flows, the direct sale's
		 take-order area flows like the table order's (the :only-child rule above outranks .tmenu-receipt__top) ---- */
	.tmenu-receipt__top:only-child { flex: 0 0 auto; }
	.tmenu-split { padding: 0; }
	.tmenu-split__letters { grid-template-columns: minmax(0, 1fr); }
	.tmenu-options__dish { overflow: visible; }

	/* light mobile = tokens only (no light mobile frame is validated): the chips need a visible fill on the
		 white page */
	[data-bs-theme="light"] [data-meriad-pos-page="tables-menu"] { --pos-chip: #f1f2f3; --pos-chip-hover: #e6e8ea; }
}
/* page: error ======================================================
	 The 403 / 404 / 500 pages compose the kit's empty state
	 (.srvd-empty-state) centred in the screen panel, or on the bare page when the
	 route renders without the shell (layout.full). Layout only: the width sits on
	 the .pos-error__body wrapper, the kit component keeps its own spacing. */
.pos-error {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.pos-error--full { min-height: 100vh; background: var(--pos-bg); }
.pos-error__body { width: 100%; max-width: 420px; }