/*
 * Menu v2 base styles (resources/views/layouts/menu.blade.php + resources/views/menu/**).
 * Neutral, template-agnostic. Skins (step 3B) override the --mn-* custom properties or add rules under body.menu-t-{classic|modern|stitch}.
 * Tokens come from public/front/css/mesa-tokens.css (--stitch-*). Logical properties only, so RTL needs no extra rules.
 */
:root {
    --mn-bg: var(--stitch-canvas, #f8f9fa);
    --mn-surface: var(--stitch-surface, #ffffff);
    --mn-surface-2: var(--stitch-surface-subtle, #f3f4f6);
    --mn-text: var(--stitch-text-primary, #0a0d12);
    --mn-text-2: var(--stitch-text-secondary, #4b5563);
    --mn-border: var(--stitch-border, #e5e7eb);
    --mn-primary: var(--stitch-emerald-dark, #047857);
    --mn-on-primary: #ffffff;
    --mn-radius: var(--stitch-radius-lg, 12px);
    --mn-radius-sm: var(--stitch-radius-md, 8px);
    --mn-shadow: var(--stitch-shadow-subtle, 0 1px 3px rgba(10, 13, 18, 0.06));
    --mn-focus: #1d4ed8;
    --mn-max: 1100px;
    --mn-gutter: 16px;
    --mn-font: var(--stitch-font-sans, system-ui, sans-serif);
}
html[dir="rtl"] { --mn-font: var(--stitch-font-ar, 'Cairo', system-ui, sans-serif); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--mn-bg);
    color: var(--mn-text);
    font-family: var(--mn-font);
    font-size: 16px;
    line-height: 1.55;
}
img, picture { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--mn-focus); outline-offset: 2px; }
[hidden] { display: none !important; }

.mn-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mn-num { font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; }
.mn-muted { color: var(--mn-text-2); margin: 0.25rem 0; }
.mn-link { color: var(--mn-primary); text-decoration: underline; text-underline-offset: 3px; }
.mn-skip { position: absolute; inset-inline-start: 1rem; inset-block-start: -4rem; z-index: 3000; background: var(--mn-text); color: #fff; padding: 0.6rem 1rem; border-radius: var(--mn-radius-sm); }
.mn-skip:focus { inset-block-start: 0.75rem; }

/* ------------------------------------------------------------ chrome */
.mn-topbar { position: sticky; inset-block-start: 0; z-index: 50; background: var(--mn-surface); border-block-end: 1px solid var(--mn-border); }
.mn-topbar-inner { max-width: var(--mn-max); margin-inline: auto; padding: 8px var(--mn-gutter); display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; }
.mn-topbar-name, .mn-topbar-back { font-weight: 700; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.mn-topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.mn-page { max-width: var(--mn-max); margin-inline: auto; padding: 0 var(--mn-gutter) 48px; }
.mn-page:focus { outline: none; }
.mn-section { margin-block-start: 20px; }
.mn-h1 { font-size: 1.6rem; line-height: 1.2; margin: 0; }
.mn-h2 { font-size: 1.25rem; margin: 0 0 12px; }
.mn-h3 { font-size: 1.05rem; margin: 0 0 10px; }
.mn-prose { overflow-wrap: anywhere; }
.mn-prose img { height: auto; }
.mn-flash { margin: 8px 0; padding: 10px 14px; border-radius: var(--mn-radius-sm); border: 1px solid var(--mn-border); background: var(--mn-surface-2); }
.mn-flash-ok { border-color: var(--mn-primary); }
.mn-empty { color: var(--mn-text-2); padding: 12px 0; }

/* ------------------------------------------------------------ A hero */
.mn-hero { position: relative; margin-inline: calc(var(--mn-gutter) * -1); }
.mn-hero-media { position: relative; width: 100%; aspect-ratio: 16 / 7; min-height: 150px; max-height: 340px; overflow: hidden; background: var(--mn-surface-2); }
.mn-hero-img, .mn-hero-media picture, .mn-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.mn-hero-fallback { position: absolute; inset: 0; background: linear-gradient(135deg, var(--mn-primary), var(--stitch-obsidian, #0a0d12)); }
.mn-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 13, 18, 0.55), rgba(10, 13, 18, 0) 55%); pointer-events: none; }
.mn-hero-actions { position: absolute; inset-inline: var(--mn-gutter); inset-block-end: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.mn-hero-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--mn-text); font: inherit; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; box-shadow: var(--mn-shadow); }
.mn-hero-btn:hover { background: #fff; }

/* ------------------------------------------------------------ B identity */
.mn-identity { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mn-identity-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 260px; }
.mn-logo { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--mn-surface); border: 2px solid var(--mn-surface); box-shadow: var(--mn-shadow); }
.mn-logo-img, .mn-logo picture, .mn-logo img { width: 100%; height: 100%; object-fit: cover; }
.mn-logo-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--mn-primary); color: var(--mn-on-primary); font-weight: 800; font-size: 1.4rem; }
.mn-identity-text { min-width: 0; }
.mn-branch { margin: 2px 0 0; color: var(--mn-text-2); font-weight: 600; }
.mn-desc { margin: 4px 0 0; color: var(--mn-text-2); overflow-wrap: anywhere; }
.mn-lang { display: inline-flex; border: 1px solid var(--mn-border); border-radius: 999px; overflow: hidden; background: var(--mn-surface); }
.mn-lang-link { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 14px; text-decoration: none; font-weight: 600; font-size: 0.9rem; color: var(--mn-text-2); }
.mn-lang-link.is-active { background: var(--mn-primary); color: var(--mn-on-primary); }

/* ------------------------------------------------------------ C contact / D links */
.mn-contact-list, .mn-links-list, .mn-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mn-contact-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mn-border); background: var(--mn-surface); color: var(--mn-text); }
.mn-contact-link:hover { border-color: var(--mn-primary); color: var(--mn-primary); }
.mn-pill { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--mn-border); background: var(--mn-surface); color: var(--mn-text); font: inherit; font-size: 0.92rem; text-decoration: none; cursor: pointer; }
.mn-pill:hover { border-color: var(--mn-primary); }

/* ------------------------------------------------------------ E search */
.mn-search-form { position: relative; }
.mn-search-input { width: 100%; min-height: 48px; padding-block: 10px; padding-inline: 16px 48px; border: 1px solid var(--mn-border); border-radius: var(--mn-radius); background: var(--mn-surface); color: var(--mn-text); font: inherit; }
.mn-search-clear { position: absolute; inset-inline-end: 4px; inset-block-start: 2px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--mn-text-2); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.mn-search-status { margin: 6px 0 0; min-height: 1.2em; color: var(--mn-text-2); font-size: 0.9rem; }

/* ------------------------------------------------------------ F categories */
.mn-cat-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.mn-cat-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); overflow: hidden; box-shadow: var(--mn-shadow); }
.mn-cat-card:hover, .mn-cat-card.is-active { border-color: var(--mn-primary); }
.mn-cat-media { display: block; aspect-ratio: 4 / 3; background: var(--mn-surface-2); overflow: hidden; }
.mn-cat-media picture, .mn-cat-media img { width: 100%; height: 100%; object-fit: cover; }
.mn-cat-tile { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: linear-gradient(135deg, var(--mn-primary), var(--stitch-obsidian, #0a0d12)); color: var(--mn-on-primary); font-size: 2rem; font-weight: 800; }
.mn-cat-name { padding: 8px 10px 0; font-weight: 700; overflow-wrap: anywhere; }
.mn-cat-count { padding: 0 10px 10px; font-size: 0.8rem; color: var(--mn-text-2); }

/* ------------------------------------------------------------ G products */
.mn-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.mn-card { display: grid; grid-template-columns: 96px 1fr; grid-template-areas: "media body" "foot foot"; gap: 8px 12px; padding: 12px; background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); }
.mn-card.is-sold-out { opacity: 0.7; }
.mn-card-media { grid-area: media; aspect-ratio: 1 / 1; border-radius: var(--mn-radius-sm); overflow: hidden; background: var(--mn-surface-2); }
.mn-card-media picture, .mn-card-media img { width: 100%; height: 100%; object-fit: cover; }
.mn-card-body { grid-area: body; min-width: 0; }
.mn-card-title { margin: 0; font-size: 1rem; line-height: 1.3; }
.mn-card-desc { margin: 4px 0 0; font-size: 0.88rem; color: var(--mn-text-2); overflow-wrap: anywhere; }
.mn-card-meta { margin: 4px 0 0; font-size: 0.78rem; color: var(--mn-text-2); }
.mn-card-foot { grid-area: foot; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.mn-price { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 800; }
.mn-price-old { font-weight: 500; font-size: 0.85rem; color: var(--mn-text-2); }
.mn-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.mn-badge-off { background: #fef2f2; color: #991b1b; border: 1px solid #fca5a5; }
.mn-group.is-filtered-out, .mn-card.is-filtered-out, [data-mn-item].is-filtered-out, tr.is-filtered-out { display: none !important; }

/* ------------------------------------------------------------ G products as a table (shared by every skin: image | item | price | order)
 * One semantic <table> per category. Below 1024px the rows become CSS grids (the markup carries explicit ARIA roles, so the table
 * semantics survive display:grid/block); from 1024px it is a real table. Sizes come from the scale in :root and are overridden per breakpoint. */
:root {
    --mn-thumb: 112px;
    --mn-fs-name: 1.08rem;
    --mn-fs-desc: 0.9rem;
    --mn-fs-price: 1.15rem;
    --mn-fs-cap: 1.4rem;
    --mn-row-pad: 16px;
    --mn-pad-x: 16px;
    --mn-btn-h: 48px;
    --mn-lh-desc: 1.6;
    --mn-thumb-radius: 14px;
}
.mn-group { margin-block-start: 32px; scroll-margin-block-start: 70px; }
.mn-table-wrap { --mn-divider: var(--mn-border); --mn-row-hover: color-mix(in srgb, var(--mn-primary) 6%, var(--mn-surface)); overflow-x: auto; background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); box-shadow: 0 8px 28px -12px rgba(10, 13, 18, 0.16), 0 1px 3px rgba(10, 13, 18, 0.06); }
.mn-table { width: 100%; border-collapse: collapse; border-spacing: 0; }
.mn-caption { caption-side: top; text-align: start; padding: 20px var(--mn-pad-x) 8px; }
.mn-caption .mn-h3 { display: inline-block; margin: 0; font-size: var(--mn-fs-cap); line-height: 1.2; padding-block-end: 8px; border-block-end: 3px solid var(--mn-primary); }
.mn-table thead th { padding: 10px 14px; text-align: start; font-size: 0.78rem; font-weight: 700; color: var(--mn-text-2); background: var(--mn-surface-2); border-block: 1px solid var(--mn-divider); letter-spacing: 0.03em; }
.mn-table thead .mn-th-price { text-align: end; }
.mn-table tbody th, .mn-table tbody td { padding: var(--mn-row-pad) 14px; vertical-align: middle; text-align: start; font-weight: inherit; border: 0; }
.mn-table tbody > tr > :first-child { padding-inline-start: var(--mn-pad-x); }
.mn-table tbody > tr > :last-child { padding-inline-end: var(--mn-pad-x); }
.mn-row + .mn-row { border-block-start: 1px solid var(--mn-divider); }
.mn-row:hover, .mn-row:focus-within { background: var(--mn-row-hover); }
.mn-th-img, .mn-td-img, .mn-th-order, .mn-td-order { width: 1%; white-space: nowrap; }
.mn-th-img .mn-sr, .mn-th-order .mn-sr { position: absolute !important; }
.mn-thumb { display: block; width: var(--mn-thumb); height: var(--mn-thumb); border-radius: var(--mn-thumb-radius); overflow: hidden; background: linear-gradient(145deg, var(--mn-surface), var(--mn-surface-2)); border: 1px solid var(--mn-border); box-shadow: 0 2px 10px -2px rgba(10, 13, 18, 0.22); }
.mn-thumb picture, .mn-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mn-thumb-ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: calc(var(--mn-thumb) * 0.4); font-weight: 800; color: var(--mn-primary); background: var(--mn-surface-2); }
.mn-td-item { min-width: 0; overflow-wrap: anywhere; }
.mn-item-name, .mn-item-desc, .mn-item-meta { display: block; }
.mn-item-name { font-size: var(--mn-fs-name); line-height: 1.25; font-weight: 700; color: var(--mn-text); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-item-desc { margin-block-start: 6px; font-size: var(--mn-fs-desc); line-height: var(--mn-lh-desc); color: var(--mn-text-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mn-item-meta { margin-block-start: 6px; font-size: 0.84rem; line-height: 1.4; color: var(--mn-text-2); }
.mn-td-item .mn-badge { margin-block-start: 8px; margin-inline-end: 6px; padding: 3px 12px; font-size: 0.8rem; }
.mn-badge-offer { background: var(--mn-surface-2); color: var(--mn-text); border: 1px solid var(--mn-border); }
.mn-item-price { display: flex; margin-block-start: 12px; }
.mn-table .mn-price { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; line-height: 1.2; }
.mn-table .mn-price-now { font-size: var(--mn-fs-price); font-weight: 800; color: var(--mn-text); }
.mn-table .mn-price-old { font-size: 0.88rem; font-weight: 500; text-decoration: line-through; }
.mn-td-order .mq-add { display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; }
.mn-table .mq-add-btn { position: relative; width: 100%; min-width: 0; min-height: var(--mn-btn-h); padding-block: 10px; padding-inline: 14px; font-size: 1rem; line-height: 1.25; text-align: center; white-space: nowrap; }
.mn-table .mq-add-btn:disabled, .mn-table .mq-add-btn[aria-disabled="true"] { font-size: 0.92rem; white-space: normal; }
.mn-table .mq-stepper { width: 100%; min-height: var(--mn-btn-h); justify-content: space-between; }
.mn-table .mq-stepper-btn { width: var(--mn-btn-h); height: var(--mn-btn-h); }
.mn-table .mq-stepper-qty { min-width: 32px; font-size: 1.1rem; }
.mn-table .mq-limit { max-width: none; font-size: 0.82rem; text-align: start; }
.mn-table .mq-incart { max-width: none; font-size: 0.9rem; text-align: center; white-space: normal; }
.mn-row.is-sold-out .mn-thumb img { filter: grayscale(1); opacity: 0.6; }
.mn-row.is-sold-out .mn-thumb-ph { filter: grayscale(1); opacity: 0.75; }
.mn-row.is-sold-out .mn-item-name { color: var(--mn-text-2); }

/* tablet and phone: every row is a grid (header row stays in the DOM for assistive tech, hidden visually) */
@media (max-width: 1023px) {
    .mn-table, .mn-table tbody { display: block; width: 100%; }
    .mn-caption { display: block; }
    .mn-table thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
    .mn-row { display: grid; grid-template-columns: var(--mn-thumb) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "img item" "order order"; column-gap: 16px; row-gap: 8px; align-items: start; padding: var(--mn-row-pad) var(--mn-pad-x); }
    .mn-table tbody .mn-row > th, .mn-table tbody .mn-row > td { display: block; width: auto; min-width: 0; padding: 0; white-space: normal; }
    .mn-table tbody .mn-row > .mn-td-img { grid-area: img; }
    .mn-table tbody .mn-row > .mn-td-item { grid-area: item; }
    .mn-table tbody .mn-row > .mn-td-order { grid-area: order; margin-block-start: 4px; }
}
@media (min-width: 640px) {
    :root { --mn-thumb: 128px; --mn-fs-name: 1.2rem; --mn-fs-desc: 0.95rem; --mn-fs-price: 1.2rem; --mn-fs-cap: 1.5rem; --mn-row-pad: 20px; --mn-pad-x: 20px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
    .mn-row { grid-template-columns: var(--mn-thumb) minmax(0, 1fr) minmax(192px, 224px); grid-template-rows: auto; grid-template-areas: "img item order"; align-items: center; column-gap: 20px; }
    .mn-table tbody .mn-row > .mn-td-order { margin-block-start: 0; }
}
@media (min-width: 1024px) {
    :root { --mn-thumb: 160px; --mn-fs-name: 1.4rem; --mn-fs-desc: 1rem; --mn-fs-price: 1.5rem; --mn-fs-cap: 1.6rem; --mn-row-pad: 24px; --mn-pad-x: 28px; --mn-thumb-radius: 16px; }
    .mn-table thead th { padding: 12px 18px; }
    .mn-table tbody th, .mn-table tbody td { padding-inline: 18px; }
    .mn-table tbody > tr > :first-child { padding-inline-start: var(--mn-pad-x); }
    .mn-table tbody > tr > :last-child { padding-inline-end: var(--mn-pad-x); }
    .mn-caption { padding-block: 26px 10px; }
    .mn-td-order, .mn-th-order { min-width: 232px; }
    .mn-table .mq-add-btn { min-width: 184px; }
}
/* the price box is dir="ltr" (digits stay left-to-right), but .mn-item-price itself follows the page direction, so the price box sits on the inline-start edge, under the description */
@media (prefers-reduced-motion: no-preference) {
    .mn-table .mq-add-btn { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, filter 0.18s ease; }
    .mn-row { transition: background-color 0.15s ease; }
}

/* ------------------------------------------------------------ H reviews */
.mn-rating-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-block-end: 12px; }
.mn-rating-num { font-size: 2rem; font-weight: 800; }
.mn-rating-count { color: var(--mn-text-2); font-size: 0.9rem; }
.mn-stars { display: inline-flex; gap: 2px; }
.mn-star { fill: var(--mn-border); stroke: none; }
.mn-star.is-on { fill: var(--stitch-amber, #f59e0b); }
.mn-review-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mn-review { padding: 12px; background: var(--mn-surface); border: 1px solid var(--mn-border); border-radius: var(--mn-radius); }
.mn-review-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mn-review-avatar { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mn-surface-2); font-weight: 700; }
.mn-review-name { font-weight: 700; }
.mn-review-text { margin: 8px 0 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------ I footer */
.mn-footer { margin-block-start: 36px; padding-block-start: 18px; border-block-start: 1px solid var(--mn-border); text-align: center; color: var(--mn-text-2); font-size: 0.88rem; }
.mn-footer-links { justify-content: center; margin-block-end: 8px; }
.mn-footer p { margin: 4px 0; }

/* ------------------------------------------------------------ dialog */
.mn-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; border: 0; border-radius: var(--mn-radius); background: var(--mn-surface); color: var(--mn-text); box-shadow: 0 24px 60px rgba(10, 13, 18, 0.4); }
.mn-dialog::backdrop { background: rgba(10, 13, 18, 0.55); }
.mn-dialog:not([open]) { display: none; }
.mn-dialog-panel { display: flex; flex-direction: column; max-height: calc(100vh - 24px); }
.mn-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-block-end: 1px solid var(--mn-border); }
.mn-dialog-head .mn-h2 { margin: 0; }
.mn-dialog-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mn-surface-2); color: var(--mn-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mn-dialog-body { padding: 14px 16px 18px; overflow-y: auto; }
.mn-allergen { padding-block: 8px; border-block-end: 1px solid var(--mn-border); }
.mn-allergen:last-child { border-block-end: 0; }
.mn-allergen .mn-h3 { margin: 0; }

@media (min-width: 640px) {
    :root { --mn-gutter: 24px; }
    .mn-h1 { font-size: 2rem; }
    .mn-hero { margin-inline: 0; border-radius: var(--mn-radius); overflow: hidden; margin-block-start: 16px; }
    .mn-grid { grid-template-columns: repeat(2, 1fr); }
    .mn-card { grid-template-columns: 112px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------ guest forms (reserve / rate dialogs) */
.mn-form { display: grid; gap: 12px; }
.mn-field { display: grid; gap: 4px; min-width: 0; }
.mn-field-row { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.mn-field label, .mn-legend { font-weight: 600; font-size: 0.92rem; }
.mn-req { color: #b91c1c; }
.mn-opt { color: var(--mn-text-2); font-weight: 400; font-size: 0.82rem; }
.mn-input { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--mn-border); border-radius: var(--mn-radius-sm); background: var(--mn-surface); color: var(--mn-text); font: inherit; font-size: 1rem; }
textarea.mn-input { min-height: 88px; resize: vertical; }
.mn-input[dir="ltr"] { text-align: start; }
.mn-input[aria-invalid="true"] { border-color: #b91c1c; }
.mn-hint { margin: 0; color: var(--mn-text-2); font-size: 0.82rem; }
.mn-field-err { margin: 0; color: #b91c1c; font-size: 0.86rem; font-weight: 600; }
.mn-field-err[hidden], .mn-form-alert[hidden], .mn-form-success[hidden], .mn-form[hidden] { display: none; }
.mn-form-alert { padding: 10px 12px; border-radius: var(--mn-radius-sm); border: 1px solid #fca5a5; background: #fef2f2; color: #991b1b; font-weight: 600; }
.mn-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 20px; border: 0; border-radius: 999px; background: var(--mn-primary); color: var(--mn-on-primary); font: inherit; font-weight: 700; cursor: pointer; }
.mn-btn[disabled] { opacity: 0.6; cursor: progress; }
.mn-form-success { text-align: center; padding: 12px 4px; display: grid; gap: 10px; justify-items: center; }
.mn-form-success:focus { outline: none; }
.mn-form-success .mn-h3 { margin: 0; }
.mn-trap { position: absolute !important; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.mn-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.mn-stars-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.mn-stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.mn-stars-input label { display: inline-flex; padding: 6px; border-radius: var(--mn-radius-sm); cursor: pointer; line-height: 0; }
.mn-stars-input .mn-star { width: 32px; height: 32px; }
.mn-stars-input input:checked ~ label .mn-star, .mn-stars-input label:hover .mn-star, .mn-stars-input label:hover ~ label .mn-star { fill: var(--stitch-amber, #f59e0b); }
.mn-stars-input input:focus-visible + label { outline: 3px solid var(--mn-focus); outline-offset: 2px; }
/* survey: choice questions are pill radios (the real input stays focusable and keyboard operable), questions are separated cards */
.mn-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.mn-choice { position: relative; display: inline-flex; }
.mn-choice input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.mn-choice label { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px; border: 1px solid var(--mn-border); border-radius: 999px; background: var(--mn-surface); color: var(--mn-text); font-weight: 600; cursor: pointer; }
.mn-choice input:checked + label { background: var(--mn-primary); border-color: var(--mn-primary); color: var(--mn-on-primary); }
.mn-choice input:focus-visible + label { outline: 3px solid var(--mn-focus); outline-offset: 2px; }
form[data-mn-survey] .mn-legend { margin-block-end: 8px; padding: 0; }
form[data-mn-survey] [data-mn-q] { padding-block-end: 12px; border-block-end: 1px solid var(--mn-border); }
.mn-review-date { color: var(--mn-text-2); font-size: 0.82rem; margin-inline-start: auto; }

/* ------------------------------------------------------------ topbar menu button + navigation sheet (menu.partials.nav_*) */
.mn-menu-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-inline-start: -8px; padding: 0; border: 0; border-radius: var(--mn-radius-sm); background: transparent; color: inherit; cursor: pointer; }
.mn-menu-btn:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.mn-topbar-name, .mn-topbar-back { min-width: 0; }
.mn-topbar-actions { flex: 0 0 auto; }
html.mn-nav-open, html.mn-nav-open body { overflow: hidden; }
.mn-nav { position: fixed; inset: 0; margin: 0; padding: 0; width: min(86vw, 340px); max-width: none; height: 100%; max-height: none; border: 0; background: var(--mn-surface); color: var(--mn-text); box-shadow: 0 0 40px rgba(10, 13, 18, 0.35); overflow: hidden; }
.mn-nav:not([open]) { display: none; }
.mn-nav::backdrop { background: rgba(10, 13, 18, 0.55); }
.mn-nav { inset-inline-start: 0; inset-inline-end: auto; }
.mn-nav[open] { animation: mn-nav-in 0.2s ease-out; }
html[dir="rtl"] .mn-nav[open] { animation-name: mn-nav-in-rtl; }
@keyframes mn-nav-in { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes mn-nav-in-rtl { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mn-nav[open] { animation: none; } }
.mn-nav-panel { display: flex; flex-direction: column; height: 100%; }
.mn-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 16px; padding-inline: 16px 8px; min-height: 56px; border-block-end: 1px solid var(--mn-border); }
.mn-nav-title { font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-nav-close { flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--mn-surface-2); color: var(--mn-text); font-size: 1.5rem; line-height: 1; cursor: pointer; }
.mn-nav-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 8px 8px 24px; }
.mn-nav-h { margin: 16px 8px 4px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mn-text-2); }
html[dir="rtl"] .mn-nav-h { letter-spacing: 0; text-transform: none; font-size: 0.85rem; }
.mn-nav-list { list-style: none; margin: 0; padding: 0; }
.mn-nav-link { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px; border: 0; border-radius: var(--mn-radius-sm); background: transparent; color: var(--mn-text); font: inherit; font-size: 1rem; text-align: start; text-decoration: none; cursor: pointer; }
.mn-nav-link:hover, .mn-nav-link.is-active { background: var(--mn-surface-2); }
.mn-nav-link.is-active { font-weight: 700; }
.mn-nav-link:focus-visible { outline-color: var(--mn-focus); }