/* ═══════════════════════════════════════════════════════════════════════════
   Plan 248 — lk-ui.css: shared utilities + global chrome for the canonical
   Designer UI primitives (Components/Ui).

   Spec: SubAgents/Design/DESIGN_DECISIONS.md (all CHOSEN 2026-07-11).
   Loaded from index.html, before the theme stylesheets.

   Lives in wwwroot/css (NOT Components/Ui) because Blazor WASM only serves
   static assets from wwwroot — treat Components/Ui as its logical home.

   Contents:
   0. Shared chrome tokens     (plan 251 — single source for values that scoped
      .razor.css files must not copy: menu skin, focus ring, hover pair)
   1. Text overflow utilities  (Group 9 — .lk-ellipsis / .lk-clamp-2)
   2. Ghost icon button        (Group 3 — .lk-iconbtn)
   3. Dialog chrome            (Group 6 — .lk-dialog, used by LkDialog.razor;
      global because the .k-window root is rendered by Telerik outside any
      scoped-CSS component markup)
   4. Dropdown menus           (Group 11 — .lk-menu / .lk-menu__item)
   5. Telerik TabStrip restyle (Group 5 — .lk-tabstrip: the ONE shared class
      that gives panel-level TelerikTabStrips the filled-pill-on-grey-track
      look of LkTabs)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Shared chrome tokens (plan 251) ────────────────────────────────────
   Scoped .razor.css files reference these instead of copying raw values
   (the chrome gate counts raw hex/radius/shadow). One definition each.     */

:root {
    /* Group 1 hover/pressed greens (LkButton spec). */
    --lk-primary-hover: #06641f;
    --lk-primary-active: #054f16;
    /* Group 3/5 focus ring — the ONE focus treatment. */
    --lk-focus-ring: 0 0 0 2px rgba(8, 120, 27, 0.3);
    /* Group 3 green-tint hover pair. */
    --lk-hover-tint: rgba(8, 120, 27, 0.08);
    /* Group 4 danger pair. */
    --lk-danger-text: #b42318;
    --lk-danger-bg: #fdecea;
    /* Group 11 menu skin. */
    --lk-menu-radius: 12px;
    --lk-menu-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    --lk-menu-item-radius: 8px;
    --lk-menu-item-hover: #e7f1e8;
    /* Fix-246 overflow « attention » amber (SelectionToolbar signal). */
    --lk-attention-text: #b45309;
    --lk-attention-text-strong: #8a3e06;
    --lk-attention-bg: rgba(180, 83, 9, 0.14);
    --lk-attention-bg-strong: rgba(180, 83, 9, 0.26);
}

/* ── 1. Text overflow (Group 9) ────────────────────────────────────────────
   .lk-ellipsis — ALWAYS the full triad + min-width:0 (flex/grid shrink).
   Rule: user-authored names (documents, elements, categories, presets, fonts)
   get .lk-ellipsis + a title attribute. Fixed chrome labels must FIT — never
   truncate chrome vocabulary, collapse to icon-only instead.               */

.lk-ellipsis {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 2-line clamp — the navbar document title ONLY keeps this treatment. */
.lk-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

/* ── 2. Ghost icon button (Group 3) ────────────────────────────────────────
   Merges the two 28px families; green-tint hover; the yellow appbar hover
   (#ffe34d) is RETIRED. Modifiers: --bordered (toggle affordance, + .active),
   --danger (Group 4 pair).                                                  */

.lk-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.875rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease),
        color var(--linkooc-transition-fast, 150ms ease),
        border-color var(--linkooc-transition-fast, 150ms ease),
        transform 130ms var(--linkooc-ease-out, ease-out);
}

.lk-iconbtn:hover:not(:disabled) {
    background: rgba(8, 120, 27, 0.08);
    color: var(--linkooc-button-primary, #08781B);
}

.lk-iconbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.3);
}

.lk-iconbtn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.lk-iconbtn:active:not(:disabled) {
    transform: scale(0.97);
}

.lk-iconbtn--bordered {
    border: 1px solid #dee2e6;
    background: #fff;
}

.lk-iconbtn--bordered.active {
    border-color: var(--linkooc-button-primary, #08781B);
    color: var(--linkooc-button-primary, #08781B);
    background: rgba(8, 120, 27, 0.1);
}

.lk-iconbtn--danger:hover:not(:disabled) {
    background: #fdecea;
    color: #b42318;
}

.lk-iconbtn--danger:focus-visible {
    box-shadow: 0 0 0 2px rgba(180, 35, 24, 0.25);
}

/* ── 3. Dialog chrome (Group 6) — LkDialog.razor ───────────────────────────
   .k-window.lk-dialog out-specifies the global « .k-window { box-shadow:
   none } » kill in linkooc-theme.css:1692 — floating windows must not blend
   into the canvas.                                                          */

.k-window.lk-dialog {
    border: 0;
    border-radius: 14px; /* match inspector-section */
    background: var(--linkooc-bg, #fff);
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    overflow: hidden;
}

.lk-dialog .k-window-titlebar {
    background: var(--linkooc-bg, #fff);
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1.25rem;
    color: var(--linkooc-text, #000601);
}

.lk-dialog__titlebar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.lk-dialog__title-icon {
    color: var(--linkooc-button-primary, #08781B);
    flex-shrink: 0;
}

.lk-dialog .k-window-content {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.lk-dialog__body {
    padding: 1rem 1.25rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* REQUIRED footer slot: LkButtons, right-aligned, gap .5rem (Group 6). */
.lk-dialog__footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1rem;
    flex-shrink: 0;
}

/* ── 4. Dropdown menus (Group 11 — CHOSEN 2026-07-11) ──────────────────────
   THE menu skin: white panel, radius 12px, soft shadow; rows radius 8px with
   the green #e7f1e8 hover; danger rows = the Group 4 pair. Positioning stays
   with the caller (each menu anchors differently); this class is skin only. */

.lk-menu {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0.35rem;
    background: var(--linkooc-bg, #fff);
    border-radius: var(--lk-menu-radius);
    box-shadow: var(--lk-menu-shadow);
}

.lk-menu__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--lk-menu-item-radius);
    background: transparent;
    color: var(--linkooc-text, #000601);
    font-size: 0.8125rem;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--linkooc-transition-fast, 150ms ease);
}

.lk-menu__item i {
    width: 1rem;
    text-align: center;
    color: var(--linkooc-button-primary, #08781B);
}

.lk-menu__item:not(:disabled):hover {
    background: var(--lk-menu-item-hover);
}

.lk-menu__item:disabled {
    opacity: 0.45;
    cursor: default;
}

.lk-menu__item--danger,
.lk-menu__item--danger i {
    color: var(--lk-danger-text);
}

.lk-menu__item--danger:not(:disabled):hover {
    background: var(--lk-danger-bg);
}

.lk-menu__sep {
    height: 1px;
    margin: 3px 4px;
    background: var(--linkooc-border-color, #dee2e6);
}

/* Direct fix 2026-07-13 — LkMenu portal (rendered by LkMenuOutlet at the
   layout root). Fixed + z-index 11000: above the fixed z-20 side panels and
   Telerik dialogs (~10002), below the tooltip bubble (12000). Starts hidden;
   js/lk-menu.js positions it against the trigger then reveals it. */
.lk-menu--portal {
    position: fixed;
    z-index: 11000;
    min-width: 220px;
    visibility: hidden;
}

.lk-menu--portal:focus {
    outline: none;
}

/* Full-viewport click-catcher under the portal — closes the menu. */
.lk-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 10999;
    background: transparent;
}

/* The LkMenu trigger wrapper — must not disturb the host row's flex layout. */
.lk-menu-trigger {
    display: inline-flex;
}

/* Section header: .7rem/700 uppercase, optional right-slot help link. */
.lk-menu__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

/* ── 5. Telerik TabStrip restyle (Group 5) ─────────────────────────────────
   Panel-level TelerikTabStrips (wizard left panel, styling dialog) can't be
   swapped for LkTabs without losing their tab-content plumbing, so they get
   the ONE shared restyle class reproducing the LkTabs look: filled green
   pill on a grey 999px track. Values mirror LkTabs.razor.css exactly.      */

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper {
    border: 0;
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-tabstrip-items {
    display: flex;
    width: 100%;
    gap: 2px;
    padding: 2px;
    background: var(--linkooc-hover-bg, #f3f4f6);
    border-radius: 999px;
}

/* Operator 2026-07-13 — the tabs stretch to fill the track (each an equal share)
   so this panel strip reads full-width like the LkTabs strips (Sélection/
   Retouches, MISE EN PAGE, TAGS) instead of a left-aligned huddle with dead
   space on the right. Only usage is Apparence/Éléments. */
.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item {
    flex: 1 1 0;
    min-width: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item .k-link {
    justify-content: center;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item:hover:not(.k-active) {
    background: rgba(255, 255, 255, 0.7);
    color: var(--linkooc-text, #111827);
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item:focus-visible,
.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item.k-focus {
    outline: none;
    box-shadow: var(--lk-focus-ring);
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item.k-active,
.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item.k-selected {
    background: var(--linkooc-button-primary, #08781B);
    color: #fff;
}

.lk-tabstrip.k-tabstrip > .k-tabstrip-items-wrapper .k-item.k-active:hover {
    background: var(--lk-primary-hover);
}

/* The pill track replaces the kendo underline — kill the content top border
   so the panel body starts clean under the track. */
.lk-tabstrip.k-tabstrip > .k-content {
    border: 0;
    background: transparent;
}

/* ── 6. Switch (Group 8 — CHOSEN operator override 2026-07-11) ──────────────
   THE on/off switch (LkSwitch.razor): the enlarged 3rem « form-toggle » recipe
   (« plus jolie »), promoted OUT of the document stylesheet (Theme.css) into
   the primitive layer. Layers over Bootstrap's .form-switch base for the pill +
   thumb; only size / colour / label change.

   The `input` element qualifier lifts specificity ABOVE Bootstrap's
   `.form-switch .form-check-input` so the 3rem size wins regardless of
   stylesheet load order (lk-ui.css loads before bootstrap via HeadOutlet).
   Colour is the secondary-green token, as the retired .form-toggle used.     */

.lk-switch input.form-check-input {
    width: 3rem;
    height: 1.4rem;
    cursor: pointer;
    border-color: var(--linkooc-button-secondary);
}

.lk-switch input.form-check-input:focus {
    box-shadow: 0 0 0 0.2rem rgba(5, 72, 16, 0.25);
}

.lk-switch input.form-check-input:checked {
    background-color: var(--linkooc-button-secondary);
    border-color: var(--linkooc-button-secondary);
}

.lk-switch input.form-check-input:disabled {
    cursor: not-allowed;
}

/* Label = the retired .form-toggle-label (secondary-green, 600) + the fst-small
   size baked in so migrated call sites drop the utility class and stay identical. */
.lk-switch__label {
    color: var(--linkooc-button-secondary);
    font-weight: 600;
    margin-left: 0.5rem;
    font-size: clamp(0.675rem, 0.5rem + 1vw, 0.875rem);
}

/* ── 7. Badges (Group 10 — CHOSEN 2026-07-11) — LkBadge.razor ──────────────
   The QUIET, non-interactive metadata chip. Never a control: no hover, no
   pointer, cursor:default. Three read-only intents; the Type intent carries a
   per-type hue keyed by data-type (the element-card__badge palette — the only
   per-type recipe). This is what de-greens CAT / PAGE n in the inspector header
   so metadata stops reading as clickable buttons. */

.lk-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    line-height: 1.2;
    white-space: nowrap;
    cursor: default;
}

.lk-badge i {
    font-size: 0.85em;
}

/* --type: element/category type — rounded-rect, soft tint, per-type hue. */
.lk-badge--type {
    padding: 0.125rem 0.375rem;
    border-radius: 6px;
    background: var(--linkooc-primary-subtle, rgba(8, 120, 27, 0.1));
    color: var(--linkooc-primary, #08781B);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Per-type hues keyed by ElementTypeId (mirror .linkooc-element-card__badge /
   the add-element palette): 1=PIC 2=CAT 3=LOG 7=QRC 12=TXT 13=ITM 14=SHP
   10/15=border. Others keep the default green above. */
.lk-badge--type[data-type="1"] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--linkooc-success, #198754);
}

.lk-badge--type[data-type="2"] {
    background: rgba(13, 202, 240, 0.12);
    color: #0b96b3;
}

.lk-badge--type[data-type="3"] {
    background: rgba(255, 193, 7, 0.14);
    color: #b58600;
}

.lk-badge--type[data-type="7"] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--linkooc-danger, #dc3545);
}

.lk-badge--type[data-type="12"] {
    background: rgba(111, 66, 193, 0.1);
    color: var(--linkooc-purple, #6f42c1);
}

.lk-badge--type[data-type="13"] {
    background: rgba(255, 153, 0, 0.12);
    color: #cc7a00;
}

.lk-badge--type[data-type="14"] {
    background: rgba(32, 201, 151, 0.12);
    color: #17936f;
}

.lk-badge--type[data-type="10"],
.lk-badge--type[data-type="15"] {
    background: rgba(108, 117, 125, 0.12);
    color: #6c757d;
}

/* --state-custom: overrides present — amber fill pill. */
.lk-badge--state-custom {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--linkooc-amber, #f59e0b);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

/* --context: PAGE n / « Courante » / scope — grey-outline muted pill. */
.lk-badge--context {
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* ── 8. Tooltip (plan 271) — .lk-tt anchor + .lk-tipbubble portal ──────────
   THE Designer tooltip. ONE bubble element, body-portaled and positioned by
   wwwroot/js/designer-tooltips.js (delegated pointerover/focusin; hijacks
   native title=). LkTooltip (Components/Ui) is the thin anchor wrapper that
   emits data-tip-title / data-tip / data-tip-kbd / data-tip-place.
   Look ported from the retired pure-CSS LkTooltip.razor.css bubble (plan 198).

   The bubble lives in document.body, OUTSIDE any component subtree, but reset
   text-transform / letter-spacing / font-weight anyway — the old scoped bubble
   inherited `.inspector-section__title-text` uppercase (operator SS3 bug) and
   this reset is the structural guarantee it never comes back.                */

.lk-tt {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lk-tipbubble {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 12000; /* above Telerik dialogs (~10002) and toasts (10100) */
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: max-content;
    max-width: 240px;
    padding: 8px 10px;
    border-radius: var(--linkooc-radius-sm, 0.5rem);
    background: var(--linkooc-text, #000601);
    color: #fff;
    box-shadow: var(--linkooc-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.18));
    font-family: var(--linkooc-font-family, inherit);
    font-size: var(--linkooc-small-size, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 1;
    /* ~120ms fade-IN only (plan 198 feel); hiding is instant (JS contract). */
    transition: opacity 120ms ease;
}

.lk-tipbubble:not(.is-visible) {
    opacity: 0;
    visibility: hidden;
    transition: none;
}

/* Arrow — kept pointing at the target via --lk-tip-arrow-x even when the
   bubble is clamped against a viewport edge. */
.lk-tipbubble::after {
    content: "";
    position: absolute;
    left: var(--lk-tip-arrow-x, 50%);
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}

.lk-tipbubble[data-place="top"]::after {
    top: 100%;
    margin-top: -4px;
}

.lk-tipbubble[data-place="bottom"]::after {
    bottom: 100%;
    margin-bottom: -4px;
}

/* Side placements — arrow on the target-facing edge, tracking the target's
   vertical center via --lk-tip-arrow-y. */
.lk-tipbubble[data-place="left"]::after,
.lk-tipbubble[data-place="right"]::after {
    top: var(--lk-tip-arrow-y, 50%);
    transform: translateY(-50%) rotate(45deg);
}

.lk-tipbubble[data-place="left"]::after {
    left: 100%;
    margin-left: -4px;
}

.lk-tipbubble[data-place="right"]::after {
    left: auto;
    right: 100%;
    margin-right: -4px;
}

.lk-tipbubble__title {
    font-weight: 600;
}

.lk-tipbubble__text {
    color: rgba(255, 255, 255, 0.92);
}

/* Keyboard chips (plan 199 registry — data-tip-kbd="Ctrl|Z"). */
.lk-tipbubble__keys {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 2px;
}

.lk-tipbubble__kbd {
    display: inline-flex;
    align-items: center;
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-family: var(--linkooc-font-family, inherit);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
}

/* ── Fold-scope badge (plans 223 / 279) ────────────────────────────────────
   The « sur le volet » badge shown on the Alignement buttons (plan 223) and the
   Avancé margin inputs (plan 279) when the document is folded. Lives here (the
   global chrome stylesheet) so both inspector panels share one definition and
   the styling is robust regardless of which panel is mounted. */
.linkooc-fold-scope-badge {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.25rem;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    background: #fff4e6;
    border: 1px solid #f0c98a;
}

.linkooc-fold-scope-badge__chip {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a5a00;
    white-space: nowrap;
}

.linkooc-fold-scope-badge__hint {
    font-size: 0.68rem;
    line-height: 1.2;
    color: #6b4a10;
}

/* ── Align popover (plan 283) — the « Aligner » toolbar dropdown ────────────
   Portaled via LkMenu (inherits the .lk-menu skin). The 6-way align grid is a
   3-column pack of the shared .lk-iconbtn--bordered buttons; the space-evenly
   rows reuse .lk-menu__item. Lives here (global chrome) so the popover renders
   correctly from the LkMenuOutlet portal, outside any scoped component subtree. */
.lk-align-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 2px 4px 4px;
}

.lk-align-grid .lk-iconbtn {
    width: 100%;
}

/* « sur le volet » caption shown on a folded document. */
.lk-align-volet-note {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: 2px 4px;
    padding: 0.3rem 0.4rem;
    border-radius: 6px;
    background: var(--linkooc-hover-bg, #f3f4f6);
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.68rem;
    line-height: 1.2;
}

.lk-align-volet-note i {
    flex: 0 0 auto;
}

/* ── Margin popover (plan 310) — the « Marges égales » toolbar dropdown ──────
   Portaled via LkMenu (inherits the .lk-menu skin). A number field + « Copier
   depuis » reference picker to give a multi-selection the same left margin.
   Lives here (global chrome) so it renders correctly from the LkMenuOutlet
   portal, outside any scoped component subtree. */
.lk-margin-menu {
    display: inline-flex;
}

.lk-margin-pop {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 2px 8px 6px;
    min-width: 240px;
}

.lk-margin-pop__label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--linkooc-text-secondary, #6d6d6d);
    margin: 0.15rem 0 0;
}

.lk-margin-pop__row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lk-margin-pop__input {
    width: 5rem;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.85rem;
    text-align: right;
}

.lk-margin-pop__input:focus {
    outline: none;
    border-color: var(--linkooc-button-primary, #08781B);
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.18);
}

.lk-margin-pop__unit {
    font-size: 0.75rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
}

.lk-margin-pop__row .lk-btn {
    margin-left: auto;
}

.lk-margin-pop__select {
    width: 100%;
    padding: 0.3rem 0.45rem;
    border: 1px solid var(--linkooc-border-color, #dee2e6);
    border-radius: 8px;
    background: var(--linkooc-bg, #fff);
    color: var(--linkooc-text, #000601);
    font-size: 0.82rem;
}

.lk-margin-pop__select:focus {
    outline: none;
    border-color: var(--linkooc-button-primary, #08781B);
    box-shadow: 0 0 0 2px rgba(8, 120, 27, 0.18);
}

.lk-margin-pop__hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.15rem;
    color: var(--linkooc-text-secondary, #6d6d6d);
    font-size: 0.68rem;
    line-height: 1.2;
}

.lk-margin-pop__hint i {
    flex: 0 0 auto;
}

/* ── Plan 292 — face controls folded into the zoom bar ───────────────────────
   The separate bottom-left .lk-volet-nav pill (plans 285/289) is gone; its ‹ label ›
   + order + Ranger controls now live INSIDE the zoom appbar as btn-appbar icon
   buttons. Only two extra bits need styling: a thin divider separating the zoom
   cluster from the face cluster, and the compact face label between the ‹ › steppers.
   Tokens/rgba only (the scoped chrome gate excludes wwwroot, but stay consistent). */
.zoom-face-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.15rem;
    background: rgba(255, 255, 255, 0.35);
}

.zoom-face-label {
    text-align: center;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0 0.35rem;
    white-space: nowrap;
}

/* ── Reduced motion (plan 258) ─────────────────────────────────────────────
   Drop movement app-wide for the canonical primitives; color/opacity fades
   stay (they aid comprehension). Entrance keyframes added by later plans are
   neutralized here too. */
@media (prefers-reduced-motion: reduce) {
    .lk-btn:active:not(:disabled),
    .lk-iconbtn:active:not(:disabled) {
        transform: none;
    }
}