/* The PRINCIPAL MARKING VOCABULARY (M-665c/M-665g, epic M-665) — how the app says "this who is a team" and
   "this who is a person", in one place, for every surface that names a principal.

   It started as the picker's own (hence the file name) and is now the app's: the same `platform-principal-option`
   base + `--user`/`--group` modifier is written by the picker's `<option>` rows, by the grid's `principals`
   column (data_table_controller.js `principalsCell()`), and by the `<x-platform::principal-list>` partial the
   detail pages render. Nothing in those three decides what a marked principal looks like — they all name the
   same class, and it is drawn here, once, so a team cannot come to look like a team one way in a form and
   another way in a list. Layout is the shared form-field pattern (forms.css) and the widget is the shared
   SlimSelect skin (slimselect-theme.css).

   WHY A GLYPH AT ALL, next to the two <optgroup> headings: a heading groups the list, but it stops mattering
   the moment the reader's eye is on one row — and the row is what they are about to click. A person and a
   team are the same shape otherwise ("Jan Novák" / "Právní oddělení"), so the kind is drawn on the row.

   WHERE IT HAS TO REACH, which is the part the first cut got wrong: the open dropdown is the state a user
   spends the least time in. The state they read is the CLOSED control — the chosen owner sitting in a form,
   the chips of a responsibility list — and there a marker that only reaches the dropdown marks nothing. So the
   glyph is drawn on every element that stands for a principal: the option in the dropdown, the single
   select's value box, and each chip.

   HOW IT REACHES THEM: the markup puts the modifier on the native <option> (see
   partials/principal-option-rows.blade.php) and one class-mirroring seam in the SlimSelect facade
   (MultiSelectHelper.mirrorValueClasses) puts that same class on whatever the widget renders for it — the
   vendor does it for the dropdown itself, and the facade normalises the vendor's silence about the rest. So
   nothing here builds markup in JS and nothing here styles a vendor class to identify a kind (§4); the two
   `.ss-*` selectors below are host-context corrections, not the marking.

   A browser does not render ::before inside a real <option>, so an un-enhanced fallback shows the headings
   alone; that is the honest limit of a native control, not a missing rule.

   Both glyphs are token-coloured masks over one shared mask declaration, so they invert with every theme and
   need no second file. The mask pair is written ONCE and each kind points at the shared glyph token it differs
   by — the family form file-uploader.css uses for its file-type icons (§3): a third kind is one custom
   property, not another copy of two 300-character lines that can drift apart. */

/* ── The two glyphs, defined ONCE ────────────────────────────────────────────────────────────────────────
   A person and a group of people, as inline-SVG data URIs on :root, because more than one treatment draws
   them: the marked option/cell/row below (a bare glyph before the label) and the reminder overview's group
   PILL (`.platform-grid__chip--group` in table.css, an accent-filled chip in a cell that also carries red
   alarm badges and a head-count — a different shape for a different job, deliberately). Those two used to
   carry byte-identical copies of the same 300-character path under two names, which is exactly the drift
   §3 exists to prevent: a third treatment, or a redrawn icon, must not mean a second copy. Declared here
   because this file owns what the marking MEANS; table.css references them by name.

   Both are painted with a mask in `currentColor`, so they invert with every theme and need no dark variant. */
:root {
    --platform-glyph-person: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    --platform-glyph-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* The rendered option is a FLEX container (measured in the running app: `.ss-option` computes `display: flex`,
   and so does a `.ss-value` chip), so the glyph is a flex item beside the label's anonymous one — hence
   `flex: none` and `align-self`. A single select's value box is `display: block` instead, which ignores both;
   `vertical-align` is what centres the glyph there, and it is harmless in the flex contexts. */
.platform-principal-option::before {
    content: "";
    display: inline-block;
    flex: none;
    align-self: center;
    vertical-align: -0.125em;
    inline-size: 1em;
    block-size: 1em;
    margin-inline-end: var(--platform-space-xs, 0.25rem);
    background-color: var(--platform-principal-glyph-color, currentColor);
    opacity: var(--platform-principal-glyph-opacity, 0.6);
    -webkit-mask: var(--platform-principal-glyph) center / contain no-repeat;
    mask: var(--platform-principal-glyph) center / contain no-repeat;
}

/* One person. */
.platform-principal-option--user {
    --platform-principal-glyph: var(--platform-glyph-person);
}

/* Several people — a group/team. Drawn at full strength: this is the one the reader is scanning for. */
.platform-principal-option--group {
    --platform-principal-glyph: var(--platform-glyph-people);
    --platform-principal-glyph-opacity: 0.9;
}

/* The everyone sentinel carries no glyph: it is not a person or a team, and its label already says what it
   is in words ("All (everyone)"). Stated so a later author does not read the gap as an oversight. */
.platform-principal-option--everyone::before {
    content: none;
}

/* HOST-CONTEXT CORRECTION — the same marking, in READING prose (`<x-platform::principal-list>`: a detail
   page's Owner and Responsible rows). Several marked names on one line need something between them, and a
   comma cannot be it — a glyph already separates them, and a comma would read as part of the previous name.
   So the row is a wrapping flex line with a gap, which also keeps a long list from overflowing a narrow
   card on a phone. A single principal is simply a one-item line. */
.platform-principal-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem var(--platform-space-sm, 0.5rem);
    min-width: 0;
}

/* HOST-CONTEXT CORRECTION — the same glyph, in a multi-select CHIP. A chip paints its label on the accent
   fill and takes its inset from `.ss-value-text`'s own padding, which the glyph sits *before*: so here the
   glyph supplies the left inset itself and drops the right one (the text's padding already is that gap), and
   it draws in the chip's foreground token instead of the control's inherited text colour, which on an accent
   fill would be dark-on-dark. Nothing about the MARKING is here — only the two things a chip does differently
   from a row. A single select's value box needs no such correction: it inherits the control's own colour and
   sits on the control's own background. */
.ss-value.platform-principal-option {
    --platform-principal-glyph-color: var(--ss-bg-color);
    --platform-principal-glyph-opacity: 1;
}

.ss-value.platform-principal-option::before {
    margin-inline-start: var(--platform-space-sm, 0.5rem);
    margin-inline-end: 0;
}