/*
 * Task F4.E6.T3 - the "app-" component vocabulary Zalacznik E names (cards,
 * tables-with-headers, status badges, alerts, buttons) plus a handful of
 * semantic-attribute rules ("[role=alert]"/"[role=status]") that dress the
 * SAME markup this codebase already emits everywhere (measured: 165
 * occurrences of role="alert"/role="status" across 55 ".razor" files - the
 * count of FILES read "54" until task F4.E6.T3b re-counted it; the 165 was
 * right) without adding a class to each one. Forms are deliberately NOT
 * re-styled here: base.css (task F4.E6.T1) already gives every bare
 * label/input/select/textarea/button/".validation-message" the full
 * Zalacznik E form treatment (label above field, paper-200 border, teal
 * focus, brick error text) - nothing in this file repeats or narrows that.
 *
 * Every color below is a custom property, never a literal. That sentence
 * used to read "no new hex value is introduced anywhere in this file" and was
 * FALSE when written: this file carried a raw white hex literal on four
 * lines (card background plus three button faces), at lines 47/247/258/265 of
 * the file as it shipped. Task F4.E6.T3b moved that one literal
 * into tokens.css as "--color-white" (see that file's own remark for why the
 * www palette has no white of its own) and pinned the rule with a test
 * instead of a sentence - BrandLayerColorTokenGuardTests reads this file,
 * base.css and app.css and fails on any hex/rgb()/hsl() literal in a
 * declaration value (Zalacznik E's own "brick ZAREZERWOWANY dla pilnosci ...
 * nie dekoracja" is why off-palette colors matter here at all).
 *
 * Two custom properties used below are deliberately NOT from tokens.css:
 * "--partner-primary-color"/"--partner-accent-color" are declared per request
 * on ":root" by Components/App.razor's own nonce'd <style> element (task
 * F2.E2.T2 - tenant branding), and "--branding-preview-*" likewise by
 * Components/Pages/Partners/PartnerBrandingEditor.razor. Both are tenant
 * DATA, not brand tokens; see the branding section at the foot of this file.
 *
 * AA contrast (WCAG 2.1 SC 1.4.3, >= 4.5:1 for normal-size text), computed
 * with the standard relative-luminance formula against the two backgrounds
 * this file actually paints text on - "measured", not asserted, values in
 * this task's own report:
 *   ink-950   #0b0f17 on paper-50  #f5f6f4 (page text)            17.69:1
 *   ink-950   #0b0f17 on paper-100 #ecefea (card/alert/badge text) 16.53:1
 *   teal-600  #0f766e on paper-100 #ecefea (badge "active" text)    4.72:1
 *   slate-600 #4b5563 on paper-100 #ecefea (badge "pending" text)   6.51:1
 *   brick-600 #9a3412 on paper-100 #ecefea (badge "urgent" text)    6.30:1
 *   paper-50  #f5f6f4 on teal-600  #0f766e (primary button text)    5.05:1
 * All six clear 4.5:1. brick-400 #c2540f on paper-100 is 3.96:1 (below
 * threshold) - that pair is used ONLY as a decorative border-left below
 * (".app-alert--warning"), never as text color, so SC 1.4.3 (text only)
 * does not apply to it; ink-950 carries all warning-alert TEXT instead.
 */

/* ---------------------------------------------------------------------- *
 * Cards (Zalacznik E: "karty biale/paper-50 z krawedzia paper-200 i
 * subtelnym cieniem"). Scoped to the bare <section> element rather than a
 * new class: every page this task touches already groups its own content in
 * <section> (measured before writing this rule - Home.razor,
 * UpcomingDeadlinesWidget.razor, PartnerSubscription.razor,
 * PartnerBrandingEditor.razor, PlatformMetricsDashboard.razor were the only
 * five files in the whole Components tree using it), so this one rule
 * dresses every existing and newly-added <section> the same way with zero
 * per-call-site class attribute.
 * ---------------------------------------------------------------------- */
section {
  background-color: var(--color-white);
  border: 1px solid var(--color-paper-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  margin: 0 0 var(--space-6);
}

section > h2:first-child,
section > h3:first-child {
  margin-top: 0;
}

section > :last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------- *
 * Tables in scroll containers (Zalacznik E: "tabele w overflow-x:auto";
 * this task's own DoD (b)). Deliberately carries NO border/background of its
 * own - every call site below wraps a table that already lives inside a
 * ".app-shell-content section" card, so a second border here would nest
 * uselessly; this class's only job is establishing the scroll boundary
 * MainLayout.razor.css's own ".app-shell-content" remarks describe (that
 * rule stays as the safety net, this container is what actually catches the
 * overflow now - see docs/tech-debt.md "F4.E6.T3" for the measured
 * before/after this produces on the two routes MainLayout.razor.css's own
 * comment named as still needing it).
 * ---------------------------------------------------------------------- */
.app-table-container {
  overflow-x: auto;
}

.app-table-container table {
  width: 100%;
  margin: 0;
}

/* Task F4.E6.T3's own first measured attempt applied "overflow-wrap: anywhere"
   to every cell in every wrapped table, on the theory that it would shrink
   the "Zmienione przez" e-mail column's contribution to the table's
   min-content width. Measured against a real 390px screenshot instead of
   reasoned about: it did the opposite of what a scroll container is FOR -
   the table's auto-layout algorithm shrank every OTHER column too (down to
   one letter per line on header text like "Krytycznosc"), because
   "anywhere" lets it break at any character, not only the one long token
   this was aimed at. Removed: with no "overflow-wrap" at all, the table
   keeps its natural min-content width and ".app-table-container"'s own
   "overflow-x: auto" scrolls it as a whole - measured unchanged after
   removing this rule (document.documentElement.scrollWidth still equals
   innerWidth on every route at both viewports, this task's own DoD (b); see
   this task's own report for the numbers). The 360px e-mail column is a
   genuine content fact - shrinking ITS presentation by breaking words is a
   change this task's own "ZERO zmian tresci" scope does not license doing
   at the expense of every other column's readability. */

/* ---------------------------------------------------------------------- *
 * Status badges (Zalacznik E: "badge statusow z tokenow (aktywne=teal,
 * w-toku=slate, pilne/przeterminowane=brick)"). Text-carrying (never color-
 * only - Zalacznik E: "zero informacji wylacznie kolorem"): the localized
 * status word is always the badge's own text content, this only adds a
 * color-coded pill around it.
 * ---------------------------------------------------------------------- */
.app-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.25;
  border: 1px solid transparent;
  background-color: var(--color-paper-100);
}

.app-badge--active {
  color: var(--color-teal-600);
  border-color: var(--color-teal-300);
}

.app-badge--pending {
  color: var(--color-slate-600);
  border-color: var(--color-paper-200);
}

.app-badge--urgent {
  color: var(--color-brick-600);
  border-color: var(--color-brick-400);
}

/* ---------------------------------------------------------------------- *
 * Alerts (Zalacznik E: "alerty 4 warianty (info=slate, sukces=teal,
 * ostrzezenie=brick-400, blad=brick-600)"). Keyed off the ARIA role this
 * codebase already puts on every one of these elements rather than a new
 * class - see this file's own header remarks for the measured occurrence
 * count. Scoped to <p>/<div>/<ul> (":where()" carries zero specificity of
 * its own, so the ".app-alert--success"/"--warning" modifiers below can
 * still override "border-left-color" by source order alone, no higher
 * specificity needed) - NOT <strong>, which this codebase uses exactly once
 * (RegisterSuppliersList.razor's inline "gap" marker inside a table cell) as
 * an inline emphasis, not a block callout; that one keeps its own narrower
 * rule further down.
 * ---------------------------------------------------------------------- */
:where(p, div, ul)[role="status"] {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-slate-600);
  background-color: var(--color-paper-100);
  color: var(--color-ink-950);
}

:where(p, div, ul)[role="alert"] {
  display: block;
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--color-brick-600);
  background-color: var(--color-paper-100);
  color: var(--color-ink-950);
}

/* The two roles above cover every existing call site as either "info"
   (role=status) or "blad" (role=alert, brick-600). "Sukces"/"ostrzezenie"
   are opt-in modifiers for the few call sites this task's own report names
   explicitly (PlanReadOnlyBanner.razor/ImpersonationBanner.razor keep
   role="alert" - an active billing/impersonation state is still the
   "interrupts" ARIA semantic - but read as the softer brick-400 tone, not
   the hard brick-600 error one). */
.app-alert--success {
  border-left-color: var(--color-teal-600);
}

.app-alert--warning {
  border-left-color: var(--color-brick-400);
}

/* RegisterSuppliersList.razor's own inline gap marker used to be selected
   here as strong[role="alert"] - color only, no box, so it stayed inline
   inside its <td> instead of breaking table layout. Session UI1 (finding Z-9)
   took the role off that element: it was an ARIA live region on a static
   cell repeated once per gap row, so a screen-reader user was interrupted
   once per row on entering the list. The rule is removed rather than left
   standing, because after that change nothing in this codebase matches it
   (measured: exactly one <strong role="alert"> existed, and it was that one).
   The paint it used to do now lives on ".app-flag--gap" further down, with
   the identical declaration. */

/* ---------------------------------------------------------------------- *
 * Row/line-item urgency (Zalacznik E: brick reserved for deadline urgency).
 * Replaces two identical inline "style=" attributes this task's own audit
 * found (OrgDeadlinesList.razor / UpcomingDeadlinesWidget.razor, both
 * "font-weight:bold;color:#b00020;" - an off-palette hex, and Zalacznik E's
 * own "ZAKAZY: inline style=" ban) with one shared class using the brick
 * token instead.
 * ---------------------------------------------------------------------- */
.app-text-urgent {
  color: var(--color-brick-600);
  font-weight: 600;
}

/* ---------------------------------------------------------------------- *
 * Risk-matrix cells (RegisterRiskMatrix.razor) - the same "urgent"/"ok"
 * distinction as the badges above, expressed as a cell border rather than a
 * badge (Zalacznik E's own vocabulary does not name a matrix-cell shape
 * explicitly; this reuses the badge palette rather than inventing a new
 * one).
 * ---------------------------------------------------------------------- */
.app-matrix-cell--risk {
  border: 2px solid var(--color-brick-600);
  color: var(--color-brick-600);
  font-weight: 600;
}

.app-matrix-cell--ok {
  color: var(--color-teal-600);
}

/* ---------------------------------------------------------------------- *
 * Buttons (Zalacznik E: "przyciski primary (teal-600, hover teal-500) /
 * secondary (obrys) / destructive (brick-600)"). base.css's own bare
 * <button> rule already IS "primary" (teal-600 fill, teal-500 hover) - nothing
 * repeats that here. These two modifiers are for the <a>-rendered row
 * actions (Edytuj/Usun and similar) this task dresses as buttons instead of
 * plain underlined links, so all three variants are visibly demonstrated on
 * the same screen (e.g. RegisterAssetsList.razor's own action column).
 * ---------------------------------------------------------------------- */
.app-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  min-height: 2rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.app-btn--secondary {
  background-color: var(--color-white);
  color: var(--color-ink-900);
  border-color: var(--color-paper-200);
}

.app-btn--secondary:hover {
  border-color: var(--color-slate-400);
  color: var(--color-ink-950);
}

.app-btn--destructive {
  background-color: var(--color-white);
  color: var(--color-brick-600);
  border-color: var(--color-brick-400);
}

.app-btn--destructive:hover {
  background-color: var(--color-brick-600);
  color: var(--color-white);
  border-color: var(--color-brick-600);
}

/* ---------------------------------------------------------------------- *
 * Form grouping (DocumentWizard.razor/QualificationWizard.razor/
 * OrganizationProfile.razor's own repeated <fieldset>/<legend> per
 * question/variable - bare elements base.css does not style, same
 * "component vocabulary belongs to T2/T3" boundary that file's own remarks
 * already draw for cards/badges/alerts).
 * ---------------------------------------------------------------------- */
fieldset {
  border: 1px solid var(--color-paper-200);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
}

legend {
  font-family: var(--font-display);
  font-weight: 500;
  padding: 0 var(--space-2);
}

/* ---------------------------------------------------------------------- *
 * Definition lists (RegisterIncidentDetail.razor/PartnerSubscription.razor's
 * own read-only "label: value" summaries) - another bare element base.css
 * leaves alone.
 * ---------------------------------------------------------------------- */
dl {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
}

dt {
  font-weight: 600;
  color: var(--color-slate-600);
}

dd {
  margin: 0;
}

/* ---------------------------------------------------------------------- *
 * Tenant branding - the two places this application paints with a PARTNER's
 * own colors rather than with brand tokens.
 *
 * Why these rules exist here at all (task F4.E6.T3b): both places used to
 * carry their colors in inline "style=" attributes, and this application's
 * Content-Security-Policy (SecurityHeadersMiddleware, task F4.E2.T1) serves
 * "style-src 'self' 'nonce-...'" with no 'unsafe-inline' - and a nonce
 * covers <style> ELEMENTS only, never a style ATTRIBUTE. Measured in real
 * Chromium against "http://demo-it.localhost:5077/login" before this task:
 * the partner header's "style" attribute was dropped entirely
 * (element.style.length === 0), its computed border-top was
 * "0px none rgb(11, 15, 23)" and the partner name rendered in the inherited
 * ink at weight 400, with two "Applying inline style ... violates the
 * following Content Security Policy directive" console violations. The CSS
 * custom properties resolved correctly the whole time - nothing was PAINTING
 * with them, because their only consumers were attributes the browser threw
 * away. Classes here are read from the very stylesheet the policy allows.
 *
 * "--partner-primary-color"/"--partner-accent-color" come from
 * Components/App.razor's own per-request nonce'd <style> on ":root" (task
 * F2.E2.T2). Contrast: the accent is used as text on the platform's own
 * light background, which is exactly the "checked against white" assumption
 * PartnerBrandingContrastEvaluator (task F2.E2.T1) warns the partner about in
 * the editor; the primary is a decorative border only, so SC 1.4.3 does not
 * apply to it.
 * ---------------------------------------------------------------------- */
.partner-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-top: 4px solid var(--partner-primary-color);
}

.partner-header__logo {
  max-height: 2rem;
}

.partner-header__name {
  color: var(--partner-accent-color);
  font-weight: 600;
}

/* The branding editor's own live preview (task F2.E2.T1). Its colors are the
   partner's not-yet-applied SAVED values, which need not equal the ":root"
   ones above (the editor is reachable on the apex host too, where no partner
   theme is resolved at all), so the page declares its own
   "--branding-preview-*" pair in its own nonce'd <style> element - see that
   file's own remarks. Every value it interpolates is re-validated to the
   strict #RRGGBB shape first. */
.branding-preview__logo {
  max-height: 4rem;
}

.branding-preview__name {
  color: var(--branding-preview-primary-color);
}

.branding-preview__swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: 1px solid var(--color-paper-200);
}

.branding-preview__swatch--primary {
  background-color: var(--branding-preview-primary-color);
}

.branding-preview__swatch--accent {
  background-color: var(--branding-preview-accent-color);
}

/* ---------------------------------------------------------------------- *
 * Session UI1 - the vocabulary this session adds. Every rule below exists
 * because a finding from the 2026-08-22 black-box click-through
 * (business-research/docs/2026-08-22-przeklikanie-app-szbihub-pl.md) needed
 * a CLASS rather than a repainted bare element; the bare-element half of
 * the same repairs lives in base.css, per that file's own scope boundary.
 * Zero hex/rgb literals here either - BrandLayerColorTokenGuardTests reads
 * this file.
 * ---------------------------------------------------------------------- */

/* Off-screen but announced (findings Z-9, E.10). Standard clip idiom -
   deliberately NOT "display: none"/"visibility: hidden", which remove the
   text from the accessibility tree, which is the opposite of the point.
   Used for <caption> elements (a table needs a name for a screen reader,
   but every one of these tables already sits under its own visible
   heading, so a second visible title would be noise) and for the
   supplier-register gap marker's screen-reader prefix. */
.app-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Przejdz do tresci" (finding E.10) - the first focusable element in the
   document, invisible until it takes keyboard focus. No JavaScript: a
   plain in-page anchor that moves focus to <main>. */
.app-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1001;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-white);
  color: var(--color-ink-950);
  border: 1px solid var(--color-paper-200);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
}

.app-skip-link:focus {
  left: var(--space-4);
  top: var(--space-2);
}

/* One field: its own <label for> and its own control (finding Z-6). The
   five register forms used to wrap EVERY single field in its own
   <fieldset>/<legend>, which drew a 1152px frame around a 241px control
   and left the control itself with no accessible name at all (measured on
   "/registers/assets/new": 5 of 5 fields with no id, no label[for], no
   aria-label; clicking the caption left document.activeElement on the H1).
   The <fieldset> rule above is untouched and still correct for what its
   own comment describes - a QUESTION with several answers, in the three
   wizards. Zalacznik E: "formularze: etykieta nad polem". */
.app-field {
  margin: 0 0 var(--space-4);
}

.app-field > input,
.app-field > select,
.app-field > textarea {
  display: block;
  width: 100%;
  max-width: 32rem;
}

.app-field > textarea {
  min-height: 6rem;
}

/* An inline marker appended to a sentence (finding Z-7). Blazor trims the
   whitespace-only text node between an expression and the block that
   follows it (this app declares no "preservewhitespace" directive
   anywhere), so "Dostawca chmurowej kopii zapasowej" and "(brak oceny
   ryzyka)" rendered glued together. The separator is a margin rather than
   a space character precisely so it cannot be trimmed away again.

   The call sites ALSO emit an explicit @(" ") - an expression, which the
   compiler never trims - immediately before the element. Both are needed and
   neither is redundant: the space is what a screen reader and a
   copy-and-paste get (the margin is invisible to both), and the margin is
   what makes the marker read as a separate thing rather than as the last
   word of the sentence. Hence one space step, not two. */
.app-inline-note {
  margin-left: var(--space-1);
}

/* The interactive half of the same finding: "Odhacz krok" is a link, and
   it was rendering inside a sentence about art. 12c. Its own block, under
   the step text, not appended to it. */
.app-step-action {
  display: block;
  margin-top: var(--space-1);
}

/* Progress indicators (finding Z-15). The census before this session found
   0 <progress>, 0 role="progressbar" and 0 progress/meter/bar classes in
   the whole application, so "77% pokrycia wymagan" - the number a customer
   opens the panel for - read as a note in a grey box.

   The bar is the NATIVE <progress> element, not a pair of divs, for one
   hard reason: a two-div bar needs its fill width set per instance, and
   the only ways to do that are an inline "style=" attribute (banned by
   Zalacznik E, pinned by InlineStyleAttributeGuardTests, and dropped
   outright by this app's own CSP, which carries no 'unsafe-inline') or new
   JavaScript (also banned). A <progress value max> carries its own value,
   its own implicit role="progressbar" and its own accessible value, with
   no attribute and no script. */
.app-progress {
  margin: 0 0 var(--space-4);
}

.app-progress__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  margin: 0;
}

.app-progress__caption {
  color: var(--color-slate-600);
  font-size: 0.875rem;
  margin: var(--space-1) 0 0;
}

.app-progress__track {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  max-width: 24rem;
  height: 0.5rem;
  margin-top: var(--space-2);
  border: 0;
  border-radius: 999px;
  background-color: var(--color-paper-200);
  color: var(--color-teal-600);
}

.app-progress__track::-webkit-progress-bar {
  background-color: var(--color-paper-200);
  border-radius: 999px;
}

.app-progress__track::-webkit-progress-value {
  background-color: var(--color-teal-600);
  border-radius: 999px;
}

.app-progress__track::-moz-progress-bar {
  background-color: var(--color-teal-600);
  border-radius: 999px;
}

/* The supplier-register gap marker (finding Z-9). It used to carry
   role="alert" - an ARIA live region - on a STATIC cell present from first
   paint and repeated on many rows, so a screen-reader user walking onto
   the list was interrupted once per gap row. The visual treatment its own
   earlier rule (the strong[role="alert"] rule above) gave it is kept
   verbatim, on a class instead of on the role. */
.app-flag--gap {
  color: var(--color-brick-600);
}

/* Wide register tables (finding Z-4). Two separate jobs.

   1. The sticky first column. At 1366px the "Akcje" column has been out of
      the panel since task F4.E6.T2 (retry) measured it there and named the
      arithmetic that puts it there (1141 + 240 > 1366). What the audit
      added is that scrolling the panel sideways to REACH those buttons
      scrolls the name column out of view, so the reviewer clicks "Usun" on
      a row whose name they cannot see. Pinning the first cell of each row
      fixes exactly that, and only that - it does not make the table
      narrower.

   2. The panel widening. At 1920px the panel is 1200px with 232px of empty
      margin on each side while 465px of table sits off-view (measured on
      production). The cap is lifted for the ONE case that needs it, keyed
      off the presence of a wide table rather than off a route list, so no
      layout code has to know which routes are registers - see
      MainLayout.razor.css for that half. */
.app-table-container--sticky-first th:first-child,
.app-table-container--sticky-first td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: var(--color-white);
}

.app-table-container--sticky-first th:first-child {
  background-color: var(--color-paper-100);
}

/* base.css's own "tbody tr:hover" paints the ROW, but a sticky cell paints
   its own background over that, so the hover has to be restated here or
   the pinned column would stay white while the rest of the row
   highlights. */
.app-table-container--sticky-first tbody tr:hover td:first-child {
  background-color: var(--color-paper-100);
}

/* Risk-matrix hierarchy (finding Z-16). Two things were wrong on
   "/registers/risks/matrix": the count and its description rendered at the
   same size (nothing for the eye to catch), and the red frame encodes the
   SCORE BAND, not whether anything is in it - so 10 of the 11 red-framed
   cells contained a zero and shouted about nothing. The band stays
   readable (the cell keeps its own "nieakceptowalne" text and its brick
   text color - Zalacznik E: "zero informacji wylacznie kolorem"), but an
   empty cell no longer wears the alarm frame. */
.app-matrix-cell__count {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  line-height: 1.2;
}

.app-matrix-cell--empty {
  border-color: var(--color-paper-200);
}

.app-matrix-cell--empty .app-matrix-cell__count {
  color: var(--color-slate-400);
}

/* Task S-L18 - the honeypot wrapper on the public NFR application form
   ("/nfr"). Off-screen rather than "display: none": the point is that an
   indiscriminate form-filling bot, which reads the DOM and not the
   stylesheet, still sees a plain text input and fills it, while no human
   ever does. A human is additionally protected by the field's own
   aria-hidden/tabindex="-1"/autocomplete="off" in the markup - this rule
   only moves it out of sight. */
.app-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------------- *
 * Empty state for "this page needs an active organization and the caller
 * has none" (session N21, block C - Components/Tenancy/
 * ActiveOrganizationRequiredView.razor, see docs/tech-debt.md's own
 * "N21 - triaz znalezisk N20.E" entry). Rendered on a <section>, so the card
 * rule at the top of this file already supplies background, border, radius
 * and padding; the only thing added here is the same slate accent edge the
 * info callout (:where(p, div, ul)[role="status"]) uses, so the block reads
 * as an explanation rather than as the error it is not. Deliberately NOT the
 * brick accent: nothing failed.
 *
 * The second class on that element, ".app-empty-state--no-organization",
 * carries no paint of its own on purpose. It is the stable,
 * culture-independent marker the completeness-pinning integration test
 * (IntegrationTests.Tenancy.ActiveOrganizationRequiredEmptyStateTests) matches
 * on across all seven routes, next to the localized heading itself.
 * ---------------------------------------------------------------------- */
.app-empty-state {
  border-left: 4px solid var(--color-slate-600);
}