/* sales-service — rep area (W-1b). Implementation of the designer's package, NOT a design.
   Sources: Admin Kit.html (v4: shell, sidebar, top bar, KPI, dense table, dropdown, login),
            UI Kit.html (buttons, fields, checkbox, select, alerts, confirm dialog, empty state),
            Block Pages.html (details card), README v2-v8.1 (rules), Brand Book §06 (RTL).
   Rules:   every colour / font / radius = var(--st-*) from tokens.css (data-brand on <html>).
            Sizes and spacing: the Kit's px values (the package has no size/spacing tokens).
            Radii with a token of the exact value use it: 999 pill · 20 card · 16 alert · 14 input · 8 small;
            other Kit radii (12 nav item / code, 9 menu item, 6 checkbox) are the Kit's px.
            Logical properties only. No shadows / gradients / blur (one exception: the dropdown, README v4 #9).
   Kit colours that have NO token (row divider, row hover, sidebar hover, app chip text, KPI circle tints,
   alert title/body shades, checkbox border, empty-state icon, dropdown shadow) are mapped to the nearest
   token and listed as designer questions in docs/sales-design-questions.md (#20) — no literal colour here.
   AA: warning-coloured TEXT uses --st-warning-text (the Kit's warning text colour is 3.3:1 on white);
   the warning dot keeps --st-warning. The checkbox mask SVG uses the keyword 'black' only as mask
   alpha (never rendered as a colour). */

/* Heebo + Assistant — the same variable woff2 files the live Spitzer page serves (public/fonts/SOURCE). */
@font-face { font-family: "Heebo"; font-weight: 100 900; font-display: swap;
  src: url(/fonts/Heebo-hebrew.woff2?v=f1f7cfaef594) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Heebo"; font-weight: 100 900; font-display: swap;
  src: url(/fonts/Heebo-latin.woff2?v=50dae2e12dae) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: "Assistant"; font-weight: 200 800; font-display: swap;
  src: url(/fonts/Assistant-hebrew.woff2?v=f9805e7a16e1) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: "Assistant"; font-weight: 200 800; font-display: swap;
  src: url(/fonts/Assistant-latin.woff2?v=26b77cc3179a) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }

/* ------------------------------------------------------------------ base */
.rep, .rep *, .rep *::before, .rep *::after { box-sizing: border-box; }
html[data-brand] { -webkit-text-size-adjust: 100%; }
body.rep { margin: 0; font-family: var(--st-font-body); color: var(--st-ink); font-size: 13.5px; line-height: 1.5; }
.rep a { text-decoration: none; }
.rep h1, .rep h2, .rep p, .rep dl, .rep dd { margin: 0; }
.rep button, .rep input, .rep select { font-family: var(--st-font-body); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rep svg.i { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.muted { color: var(--st-text-muted); }

/* wordmark: Heebo 900, "סייפ" + "טק" (README · Logo) */
.wordmark { font-family: var(--st-font-head); font-weight: 900; letter-spacing: -.045em; line-height: 1; white-space: nowrap; }
.wordmark__a { color: var(--st-brand); }
.wordmark__b { color: var(--st-ink); }

/* ------------------------------------------------------------------ auth layout (Admin Kit · התחברות) */
body.rep--auth { background: var(--st-ink); min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 56px 24px; }
.auth-card { background: var(--st-white); border-radius: var(--st-r-card); padding: 36px 34px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.lockup { display: flex; align-items: center; gap: 9px; justify-content: center; margin-block-end: 6px; }
.lockup__mark { width: 34px; height: 32px; }
.lockup .wordmark { font-size: 25px; }
.auth-head { text-align: center; }
.rep .auth-title { font-family: var(--st-font-head); font-size: 19px; font-weight: 800; letter-spacing: normal; }
.rep .auth-sub { font-size: 13.5px; color: var(--st-text-muted); margin-block-start: 2px; }
.auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-group { display: flex; flex-direction: column; gap: 6px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.auth-input { font-size: 14.5px; padding: 11px 14px; border: 1px solid var(--st-input-border); border-radius: var(--st-r-input); background: var(--st-white); color: var(--st-ink); width: 100%; text-align: start; }
.auth-input:focus { border-color: var(--st-brand); }
.auth-submit { line-height: normal; font-size: 15px; font-weight: 700; padding: 13px; border-radius: var(--st-r-pill); border: none; background: var(--st-brand); color: var(--st-white); cursor: pointer; margin-block-start: 4px; width: 100%; }
.auth-submit:hover { background: var(--st-brand-hover); }
.auth-foot { text-align: center; font-size: 13.5px; }

/* ------------------------------------------------------------------ app shell (Admin Kit · דשבורד) */
body.rep--app { background: var(--st-surface); }
.app { display: grid; grid-template-columns: 240px minmax(0, 1fr); min-height: 100dvh; }
.side { background: var(--st-ink); display: flex; flex-direction: column; padding: 18px 14px; gap: 6px; border-inline-end: 1px solid var(--st-dark-border); position: sticky; inset-block-start: 0; height: 100dvh; }
.side__head { display: flex; align-items: center; gap: 8px; padding: 6px 10px 20px; }
.side__mark { width: 28px; height: 27px; }
.side .wordmark { font-size: 19px; }
.side .wordmark__a { color: var(--st-sky); }
.side .wordmark__b { color: var(--st-white); }
.side__chip { font-size: 11px; font-weight: 600; color: var(--st-dark-text2); margin-inline-start: auto; border: 1px solid var(--st-dark-border); border-radius: var(--st-r-pill); padding: 2px 8px; white-space: nowrap; }
.nav { display: flex; flex-direction: column; gap: 6px; }
.rep .nav__item { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: 12px; color: var(--st-dark-text2); font-size: 14.5px; font-weight: 500; }
.rep .nav__item:hover { background: var(--st-dark-border); color: var(--st-white); }
.rep .nav__item[aria-current="page"] { background: var(--st-brand); color: var(--st-white); font-weight: 700; }
.side :focus-visible, .burger__panel :focus-visible { outline-color: var(--st-sky); }

.main { display: flex; flex-direction: column; min-width: 0; }
.topbar { height: 56px; background: var(--st-white); border-block-end: 1px solid var(--st-border); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; gap: 12px; position: relative; }
.topbar__start { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--st-text-muted); min-width: 0; }
.crumb ol { display: flex; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.crumb li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb__cur { color: var(--st-ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__end { display: flex; align-items: center; gap: 14px; }
.bell { width: 36px; height: 36px; border-radius: var(--st-r-pill); border: 1px solid var(--st-input-border); display: flex; align-items: center; justify-content: center; color: var(--st-text-muted); position: relative; }
.bell svg.i { width: 17px; height: 17px; }
.bell__dot { position: absolute; inset-block-start: 6px; inset-inline-end: 7px; width: 7px; height: 7px; border-radius: var(--st-r-pill); background: var(--st-danger); border: 1.5px solid var(--st-white); }

/* user pill + dropdown (Admin Kit top bar + "תפריט נפתח"); native popover (Esc closes, focus returns), no JS */
.user { display: flex; align-items: center; gap: 10px; padding-block: 4px; padding-inline: 6px 12px; border-radius: var(--st-r-pill); border: 1px solid var(--st-input-border); background: var(--st-white); color: var(--st-ink); font: inherit; cursor: pointer; }
.user:hover { background: var(--st-surface); }
.user__name { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.avatar { width: 30px; height: 30px; border-radius: var(--st-r-pill); background: var(--st-brand); color: var(--st-white); font-family: var(--st-font-head); font-size: 12.5px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.menu { position: absolute; inset: auto; inset-block-start: 54px; inset-inline-end: 24px; margin: 0; color: var(--st-ink); background: var(--st-white); border: 1px solid var(--st-input-border); border-radius: var(--st-r-input); padding: 6px; min-width: 170px; box-shadow: 0 8px 24px color-mix(in srgb, var(--st-ink) 8%, transparent); z-index: 10; }
.menu__head { padding: 8px 12px; font-size: 12px; color: var(--st-text-muted); border-block-end: 1px solid var(--st-border); margin-block-end: 4px; }
.menu__role { display: block; font-weight: 600; color: var(--st-ink); }
.menu form { margin: 0; }
.menu__item { display: block; width: 100%; text-align: start; padding: 8px 12px; font-size: 13.5px; border-radius: 9px; background: none; border: 0; color: var(--st-ink); cursor: pointer; }
.menu__item:hover { background: var(--st-surface); }
.menu__item--danger { color: var(--st-danger); }
.menu__item--danger:hover { background: var(--st-danger-bg); }

/* mobile hamburger (README v2/v4: "Hamburger on mobile, 44px target"); native popover, no JS */
.burger { display: none; min-width: 44px; min-height: 44px; padding: 10px; align-items: center; justify-content: center; background: var(--st-white); border: 1px solid var(--st-input-border); border-radius: 12px; color: var(--st-ink); cursor: pointer; }
.burger svg.i { width: 20px; height: 20px; stroke-width: 2; }
/* phone top bar: logo top-right (Brand Book §06; Mobile Home: mark 32 + wordmark 20) */
.topbar__brand { display: none; align-items: center; gap: 8px; }
.topbar__mark { width: 32px; height: 30px; }
.topbar__brand .wordmark { font-size: 20px; }
/* a closed popover stays hidden even when a class gives it a display (.nav is flex) */
.rep [popover]:not(:popover-open) { display: none; }
/* a browser without popover drops the rule above (unknown selector) ⇒ never show the panels open */
@supports not selector(:popover-open) { .rep [popover] { display: none; } }
.burger__panel { position: absolute; inset: 56px 0 auto 0; margin: 0; border: 0; width: auto; height: auto; background: var(--st-ink); padding: 10px 14px 14px; z-index: 20; }

.content { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rep .page-title { font-family: var(--st-font-head); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.rep .page-sub { font-size: 13.5px; font-weight: 300; color: var(--st-text-muted); margin-block-start: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ buttons (Admin Kit dense; UI Kit dialog sizes) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; line-height: normal; font-size: 13.5px; font-weight: 700; padding: 9px 18px; border-radius: var(--st-r-pill); border: 1px solid var(--st-brand); background: var(--st-brand); color: var(--st-white); cursor: pointer; white-space: nowrap; }
.rep a.btn { color: var(--st-white); }
.rep .btn svg.i { width: 14px; height: 14px; }
.rep .btn:hover { background: var(--st-brand-hover); border-color: var(--st-brand-hover); color: var(--st-white); }
.btn--secondary, .rep a.btn--secondary { font-weight: 600; border-color: var(--st-input-border); background: var(--st-white); color: var(--st-ink); }
.rep .btn--secondary:hover { background: var(--st-white); border-color: var(--st-brand); color: var(--st-brand); }
/* UI Kit · חלון אישור: danger + cancel, 14.5/700, padding 11/24 */
.btn--dialog { font-size: 14.5px; padding: 11px 24px; }
.btn--danger { background: var(--st-danger); border-color: var(--st-danger); }
.rep .btn--danger:hover { background: var(--st-danger-text); border-color: var(--st-danger-text); }
.btn--cancel, .rep a.btn--cancel { background: var(--st-white); color: var(--st-text); border-color: var(--st-input-border); }
.rep .btn--cancel:hover { background: var(--st-white); color: var(--st-text); border-color: var(--st-brand); }

/* ------------------------------------------------------------------ KPI + feature tiles (Admin Kit KPI geometry) */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rep .kpi { background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-r-alert); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; color: var(--st-ink); }
.kpi__top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.kpi__label { font-size: 13px; font-weight: 600; color: var(--st-text-muted); }
.kpi__num { font-family: var(--st-font-head); font-size: 30px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.kpi__sec { font-size: 12.5px; color: var(--st-text-muted); }
.kpi__title { font-family: var(--st-font-head); font-size: 16px; font-weight: 800; }
.ico { width: 32px; height: 32px; border-radius: var(--st-r-pill); display: flex; align-items: center; justify-content: center; background: var(--st-info-bg); color: var(--st-accent); flex: 0 0 auto; }
.ico svg.i { width: 16px; height: 16px; }
.rep a.kpi:hover { border-color: var(--st-brand); color: var(--st-ink); }
/* "בקרוב" tile = README 2a disabled rule: surface bg + 1px border + muted text, never opacity */
.rep .kpi--soon { background: var(--st-surface); }
.kpi__soon { white-space: nowrap; }
.kpi__soon .cat { font-family: var(--st-font-body); } /* same pill as everywhere else, not the heading font */
.kpi--soon .kpi__title { color: var(--st-text-muted); }

/* ------------------------------------------------------------------ table card + dense table (Admin Kit) */
.tcard { background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-r-alert); overflow: hidden; }
.tcard__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-block-end: 1px solid var(--st-border); gap: 12px; flex-wrap: wrap; }
.rep .tcard__title { font-family: var(--st-font-head); font-size: 16px; font-weight: 800; letter-spacing: normal; }
.tcard__body { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-block-start: 1px solid var(--st-border); font-size: 13px; color: var(--st-text-muted); }
.tscroll { overflow-x: auto; position: relative; } /* positioned: keeps .sr-only (absolute) labels inside the scroller */
.dtable { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 760px; }
.dtable th { background: var(--st-surface); color: var(--st-text-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-align: start; padding: 10px 12px; }
.dtable td { padding: 6px 12px; height: 48px; border-block-start: 1px solid var(--st-border); }
.dtable th:first-child, .dtable td:first-child { padding-inline-start: 18px; }
.dtable th:last-child, .dtable td:last-child { padding-inline-end: 18px; }
.dtable tbody tr:hover { background: var(--st-surface); }
.dtable .strong { font-weight: 600; }
.nowrap { white-space: nowrap; }
/* status = 7px dot + coloured text, no pill (README v4 #5) */
.status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; white-space: nowrap; }
.status::before { content: ""; width: 7px; height: 7px; border-radius: var(--st-r-pill); background: currentColor; flex: 0 0 auto; }
.status--success { color: var(--st-success); }
.status--danger { color: var(--st-danger); }
.status--warning { color: var(--st-warning-text); }
.status--warning::before { background: var(--st-warning); }
/* category pill (README v4 #5) */
.cat { display: inline-block; background: var(--st-info-bg); color: var(--st-info); font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--st-r-pill); white-space: nowrap; margin-inline-end: 4px; }
/* empty state inside a table card (README v4 #14) */
.empty { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 48px 18px; font-size: 14px; color: var(--st-text-muted); }
.empty svg.i { width: 32px; height: 32px; color: var(--st-decor); }

/* ------------------------------------------------------------------ alerts (UI Kit 03) */
.alert { display: flex; gap: 14px; align-items: flex-start; border-inline-start: 3px solid; border-radius: var(--st-r-alert); padding: 16px 18px; }
.alert svg.i { width: 20px; height: 20px; margin-block-start: 1px; stroke-width: 1.9; }
.alert__title { font-size: 15.5px; font-weight: 700; }
.alert__body { font-size: 14.5px; font-weight: 300; margin-block-start: 3px; }
.alert--success { background: var(--st-success-bg); border-color: var(--st-success); color: var(--st-success); }
.alert--warning { background: var(--st-warning-bg); border-color: var(--st-warning); color: var(--st-warning-text); }
.alert--warning svg.i { color: var(--st-warning); }
.alert--danger { background: var(--st-danger-bg); border-color: var(--st-danger); color: var(--st-danger-text); }
.alert--danger svg.i { color: var(--st-danger); }
.alert--info { background: var(--st-info-bg); border-color: var(--st-accent); color: var(--st-info); }
.alert--info svg.i { color: var(--st-accent); }

/* ------------------------------------------------------------------ form fields (UI Kit 02) */
.form { display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 600; }
.input { font-size: 15.5px; padding: 12px 14px; border: 1px solid var(--st-input-border); border-radius: var(--st-r-input); background: var(--st-white); color: var(--st-ink); width: 100%; }
.input[dir="ltr"] { text-align: end; }
.input:focus { border-color: var(--st-brand); }
.input[readonly] { background: var(--st-surface); border-color: var(--st-border); color: var(--st-text-muted); }
.field__error { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--st-danger); }
.field__error svg.i { width: 14px; height: 14px; }
.input[aria-invalid="true"], .auth-input[aria-invalid="true"] { border-color: var(--st-danger); background: var(--st-danger-bg); }
.field__hint { font-size: 13px; font-weight: 300; color: var(--st-text-muted); }
.select-wrap { position: relative; display: flex; align-items: center; }
.select-wrap .input { appearance: none; padding-inline-end: 40px; }
.select-wrap svg.i { position: absolute; inset-inline-end: 12px; pointer-events: none; color: var(--st-decor); stroke-width: 1.9; }
.group { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.group > legend { font-size: 13px; font-weight: 600; color: var(--st-text-muted); padding: 0; margin-block-end: 12px; }
.check { display: flex; align-items: center; gap: 11px; font-size: 15px; cursor: pointer; }
.check input { appearance: none; margin: 0; width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid var(--st-border-strong); background: var(--st-white); display: grid; place-content: center; cursor: pointer; flex: 0 0 auto; }
.check input:checked { background: var(--st-brand); border-color: var(--st-brand); }
.check input:checked::before { content: ""; width: 13px; height: 13px; background: var(--st-white);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------ details card (Block Pages, dl/dt/dd) */
.details { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: var(--st-r-card); padding: 6px 18px; }
.details__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-block-end: 1px solid var(--st-border); font-size: 14px; }
.details__row:last-child { border-block-end: 0; }
.details dt { color: var(--st-text-muted); font-weight: 400; flex: 0 0 auto; }
.details dd { font-weight: 600; text-align: end; min-width: 0; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ confirm dialog as a page (UI Kit · חלון אישור) */
.dialog { background: var(--st-white); border: 1px solid var(--st-border); border-radius: var(--st-r-card); padding: 26px 24px; max-width: 560px; }
.rep .dialog__title { font-family: var(--st-font-head); font-size: 21px; font-weight: 800; letter-spacing: normal; margin-block-end: 8px; }
.dialog__text { font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--st-text-muted); }
.dialog__actions { display: flex; gap: 10px; margin-block-start: 22px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ link / code block (Admin Kit · Code, dir=ltr) */
.code { background: var(--st-surface); border: 1px solid var(--st-border); border-radius: 12px; padding: 12px 14px; font-size: 12px; line-height: 1.6; color: var(--st-ink); text-align: start; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ responsive (README v2: mandatory; v4 #1 collapsed 80px; tap targets >= 44px) */
/* the phone panel belongs to the phone layout: still open after a rotate to landscape ⇒ not shown */
@media (min-width: 768px) { .rep .burger__panel { display: none; } }
@media (max-width: 1023px) {
  .app { grid-template-columns: 80px minmax(0, 1fr); }
  .side { padding: 18px 12px; }
  .side__head { justify-content: center; padding: 6px 0 20px; }
  .side .wordmark, .side__chip { display: none; }
  .nav__item { justify-content: center; padding: 0; }
  .nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .menu { inset-block-start: 56px; inset-inline-end: 70px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { display: none; }
  .burger { display: flex; }
  .burger__panel .nav__item { justify-content: flex-start; padding: 0 12px; min-height: 44px; }
  .burger__panel .nav__label { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
  /* open menu replaces the page content, so focus can never move under the overlay */
  .main:has(#nav-panel:popover-open) > .content { display: none; }
  .topbar { padding: 0 12px; }
  .topbar__brand { display: flex; }
  .crumb { display: none; }
  .user__name { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .kpis { grid-template-columns: minmax(0, 1fr); }
  /* README v2: tap targets >= 44px on mobile */
  .btn, .auth-submit, .menu__item, .user, .check, .auth-input, .input { min-height: 44px; }
  .auth-foot a, .dtable td a, .content > p > a { display: inline-flex; align-items: center; min-height: 44px; }
  .bell { width: 44px; height: 44px; }
}

/* ------------------------------------------------------------------ forced colors (README 24/09: text buttons read as buttons; no forced-color-adjust:none) */
@media (forced-colors: active) {
  .check input { border-color: CanvasText; }
  .check input:checked { background: Highlight; border-color: Highlight; }
  .check input:checked::before { background: HighlightText; }
  .rep .nav__item[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
  .menu__item { border: 1px solid ButtonText; border-radius: var(--st-r-pill); color: ButtonText; background: ButtonFace; }
  .menu__item:focus-visible { outline: 2px solid Highlight; }
}