/* Box sizing rules */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent font size inflation */
html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
    margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
    list-style: none;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
    line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
    text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    color: currentColor;
}

/* Make images easier to work with */
img,
picture {
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
    font-family: inherit;
    font-size: inherit;

}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
    min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}
/**
 * SAM v3 — default theme
 *
 * Single stylesheet for both colour themes: every colour token is defined
 * once with light-dark(). Which side applies is driven by the color-scheme
 * property on :root — the theme-switch plugin overrides it (e.g. html
 * [data-theme="dark"] { color-scheme: dark }); until then the OS decides.
 *
 * Load order (ScriptLoader): reset.css → css/plugins/*.css → app.css →
 * module CSS. Bundled into one cached file, so all asset URLs are absolute.
 *
 * Contents:
 *   01 Fonts               07 Top bar            13 Buttons
 *   02 Tokens              08 Footer action bar  14 Forms
 *   03 Base                09 Drawers            15 Toggles & flag chips
 *   04 Side nav            10 Page layout        16 Re-value table
 *   05 Submenu panel       11 Identity + stepper 17 Photo grid
 *   06 Records rail        12 Cards
 */

/* ── 01 FONTS ──────────────────────────────────────────────────── */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/inter-variable.woff2") format("woff2");
}
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/inter-italic.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/application/themes/default/assets/fonts/ibm-plex-mono-700.woff2") format("woff2");
}

/* ── 02 TOKENS ─────────────────────────────────────────────────── */
:root {
    color-scheme: light dark;

    /* surfaces */
    --bg:     light-dark(#eef1f2, #0f1117);   /* page background            */
    --sur:    light-dark(#ffffff, #181c27);   /* card / control surface     */
    --s2:     light-dark(#f7f9f9, #1e2436);   /* inset surface (inputs)     */
    --s3:     light-dark(#ffffff, #1a2235);   /* input surface when focused */
    --chrome: light-dark(#ffffff, #0d1020);   /* top bar / side nav / footer*/
    --panel:  light-dark(#ffffff, #141824);   /* submenu panel / rail / drawer */
    --hov:    light-dark(#f7f9f9, #1a2035);   /* hover fill on chrome       */

    /* text */
    --ink: light-dark(#16242b, #dde3f0);      /* primary text               */
    --mu:  light-dark(#697b83, #7e8faa);      /* muted text                 */
    --fa:  light-dark(#9aa9af, #4e5e78);      /* faint text                 */

    /* lines */
    --ln:  light-dark(#e4e8ea, #242d40);      /* hairline borders           */
    --ln2: light-dark(#cfd6d9, #2e3a52);      /* stronger borders           */
    --gray: var(--ln);                        /* framework-view alias       */

    /* theme accent (selection, emphasis) */
    --te:     light-dark(#303030, #c8d0e0);   /* accent                     */
    --ted:    light-dark(#111111, #eef1f7);   /* accent, darker/stronger    */
    --tes:    light-dark(#f2f2f2, #1e2a40);   /* accent, subtle fill        */
    --te-ink: light-dark(#ffffff, #0d1020);   /* text on --te               */

    /* accent states (current item, on-toggles, chips) */
    --acc-bg:     light-dark(#f2f2f2, #131e2e);
    --acc-bd:     light-dark(#bfe3dc, #1e3250);
    --acc-ink:    light-dark(#111111, #7aacdc);
    --acc-strong: light-dark(#303030, #2e5f96); /* badges, toggle track on  */
    --acc-knob:   light-dark(#ffffff, #c8ddf5); /* toggle knob on           */

    /* primary button */
    --pri-bg:    light-dark(#303030, #2a3f6a);
    --pri-bd:    light-dark(#303030, #3a5490);
    --pri-ink:   light-dark(#ffffff, #a8c4f8);
    --pri-bg-h:  light-dark(#111111, #334d80);
    --pri-ink-h: light-dark(#ffffff, #c8dcff);

    /* status */
    --blue:   light-dark(#2a5fcf, #4c7cf3);  /* charts / info accent      */
    --red:    light-dark(#d24545, #e05252);
    --red-bg: light-dark(#fbeaea, #2e1818);
    --red-bd: light-dark(#eccaca, #3a1e1e);
    --am:     light-dark(#d9a206, #d49a0e);
    --am-bg:  light-dark(#fbf3dd, #2a2010);
    --am-ink: light-dark(#a87d04, #d49a0e);
    --gr:     light-dark(#2f9b5c, #30a86a);
    --gr-bg:  light-dark(#e7f5ec, #102a1e);

    /* confirmed / current-version green */
    --ok-bg:    light-dark(#e7f5ec, #10241a);
    --ok-bg-h:  light-dark(#dcefe3, #143020);
    --ok-bd:    light-dark(#bfe0cd, #1f5c3a);
    --ok-bd-h:  light-dark(#9fd3b4, #2a7a4e);
    --ok-ink:   light-dark(#1e7a48, #6ee0a0);
    --ok-no-bg: light-dark(#d6ecdf, #123324);

    /* focus */
    --focus:      light-dark(#303030, #4c7cf3);
    --net:        light-dark(#111111, #7aa7ff);   /* network activity bar */
    --focus-ring: light-dark(rgba(48, 48, 48, 0.10), rgba(76, 124, 243, 0.15));

    /* avatars */
    --avatar-bg:  light-dark(#16242b, #2a3552);
    --avatar-ink: light-dark(#ffffff, #dde3f0);

    /* shadows */
    --sh: 0 1px 3px light-dark(rgba(22, 36, 43, 0.04), rgba(0, 0, 0, 0.3)),
          0 4px 16px light-dark(rgba(22, 36, 43, 0.06), rgba(0, 0, 0, 0.4));

    /* type */
    --font-ui: "Inter", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    /* layout */
    --r: 9px;          /* card radius        */
    --rs: 6px;         /* small radius       */
    --gap: 12px;       /* card gap           */
    --sidew: 76px;     /* icon side nav      */
    --listw: 240px;    /* records rail       */
    --subw: 240px;     /* submenu panel — matches the rail (--listw) so
                          it fully covers one when opened over it      */
    --tbh: 50px;       /* top bar height     */
}

/* ── 03 BASE ───────────────────────────────────────────────────── */
* {
    scrollbar-color: light-dark(#cfd6d9, #2a3348) var(--bg);
    scrollbar-width: thin;
}
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: light-dark(#cfd6d9, #2a3348); border-radius: 3px; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }

/* the hidden attribute must always win — display rules on styled
   components (.btn, popovers, …) otherwise silently defeat it */
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* inlined SVG assets (AssetHelper) — colour comes from the context's
   `color`, so one icon file serves both themes */
.icn { display: block; width: 1em; height: 1em; }

/* ── 04 SIDE NAV ───────────────────────────────────────────────── */
.side-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidew);
    background: var(--chrome);
    border-right: 1px solid var(--ln);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 0 18px;
    z-index: 50;
}
.snav-logo {
    width: 32px; height: 32px;
    border-radius: 9px;
    outline: 1px solid var(--fa);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 18px; flex-shrink: 0;
}
.snav-logo svg { width: 18px; height: 18px; color: var(--te); }
.snav-list {
    display: flex; flex-direction: column; gap: 4px;
    width: 100%; align-items: center;
}
.snav-list.snav-bottom {
    margin-top: auto;
    padding-bottom: 12px;
}
.snav-item {
    position: relative; width: 62px;
    display: flex; flex-direction: column; align-items: center;
    gap: 5px; padding: 9px 4px 8px;
    border-radius: 9px; cursor: pointer;
    color: light-dark(#697b83, #4e5e78);
    user-select: none; transition: 0.12s;
    text-decoration: none;
}
.snav-item:hover { background: var(--hov); color: light-dark(#16242b, #7e8faa); }
.snav-item.active,
.snav-item.open { background: var(--tes); color: var(--ink); }
.snav-item svg { width: 19px; height: 19px; flex-shrink: 0; }
.snav-label {
    font-size: 9px; font-weight: 700; letter-spacing: 0.01em;
    text-align: center; line-height: 1.2;
}

/* ── 05 SUBMENU PANEL ──────────────────────────────────────────── */
.snav-panel {
    position: fixed; top: 0; left: var(--sidew); bottom: 0;
    width: var(--subw);
    background: var(--panel);
    border-right: 1px solid var(--ln);
    z-index: 48;
    display: flex; flex-direction: column;
    transform: translateX(-100%); opacity: 0; pointer-events: none;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
body.panel-open .snav-panel { transform: translateX(0); opacity: 1; pointer-events: auto; }
/* suppress the slide-in while a persisted panel is restored on page load */
body.no-anim .snav-panel,
body.no-anim .app-main,
body.no-anim .footer { transition: none; }
.snav-panel-head {
    flex-shrink: 0; padding: 14px 14px 11px;
    border-bottom: 1px solid var(--ln);
    display: flex; align-items: center; justify-content: space-between;
}
.snav-panel-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--ted);
}
.snav-panel-close {
    width: 22px; height: 22px; border-radius: 6px;
    border: 1px solid var(--ln2); background: var(--sur);
    color: var(--mu); font-size: 14px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.snav-panel-close:hover { background: var(--s2); color: var(--ink); }
.snav-panel-body { flex: 1; overflow-y: auto; padding: 14px; }
.snav-panel-inner { display: none; }
.snav-panel-inner.open { display: block; }
.snav-flyout-title {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fa); margin: 0 0 8px;
}
.snav-flyout-title + .snav-flyout-title { margin-top: 14px; }
.snav-flyout-link {
    display: block; width: 100%; text-align: left; font: inherit;
    font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 7px; padding: 8px 10px; margin-bottom: 6px;
    cursor: pointer; text-decoration: none;
}
.snav-flyout-link:last-child { margin-bottom: 0; }
.snav-flyout-link:hover,
.snav-flyout-link.sel { border-color: var(--ln2); background: light-dark(#ffffff, #242d40); }
.snav-flyout-link.cur { background: var(--te); border-color: var(--te); color: var(--te-ink); }

/* ── 06 RECORDS RAIL ───────────────────────────────────────────── */
/* The rail and the submenu panel never show together: pages that render
   a rail get body.has-rail; the panel overlays everything else. */
.records-rail {
    position: fixed; top: 0; left: var(--sidew); bottom: 0;
    width: var(--listw);
    background: var(--panel);
    border-right: 1px solid var(--ln);
    display: flex; flex-direction: column;
    z-index: 45;
    transition: transform 0.18s ease, opacity 0.18s ease;
}
body.list-collapsed .records-rail { transform: translateX(-100%); opacity: 0; pointer-events: none; }
.rr-head {
    flex-shrink: 0; padding: 14px 14px 11px;
    border-bottom: 1px solid var(--ln);
    display: flex; flex-direction: column; gap: 9px;
}
.rr-title {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--ted); display: flex; align-items: center; justify-content: space-between;
}
.rr-count {
    font-size: 10px; color: var(--fa); font-weight: 600;
    background: var(--s2); border-radius: 5px; padding: 1px 6px;
}
.rr-search {
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 7px; padding: 6px 9px; font: inherit;
    font-size: 12px; color: var(--ink); width: 100%;
}
.rr-search:focus { background: var(--s3); border-color: var(--focus); outline: none; }
.rr-search::placeholder { color: var(--fa); }
/* rail filter — funnel button (in .rr-actions) + popover menu */
.rr-filter { position: relative; display: flex; }
.rr-filter-btn { width: 22px; height: 22px; color: var(--fa); }
.rr-filter-btn svg { width: 13px; height: 13px; display: block; }
.rr-filter-btn.on { color: var(--te); }
.rr-filter-pop {
    position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
    display: flex; flex-direction: column; gap: 1px; min-width: 132px;
    background: var(--sur); border: 1px solid var(--ln);
    border-radius: 9px; box-shadow: var(--sh); padding: 4px;
}
.rr-filter-pop button {
    font: inherit; font-size: 12px; text-align: left;
    padding: 6px 9px; border: none; border-radius: 6px;
    background: transparent; color: var(--mu); cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.rr-filter-pop button:hover { background: var(--s2); color: var(--ink); }
.rr-filter-pop button.on { background: var(--acc-bg); color: var(--acc-ink); font-weight: 600; }
.rr-list { flex: 1; overflow-y: auto; padding: 7px; }
.rr-item {
    display: flex; flex-direction: column; gap: 4px;
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
    margin-bottom: 3px; border: 1px solid transparent;
    color: inherit; text-decoration: none;
}
.rr-item:hover { background: var(--s2); }
.rr-item.cur { background: var(--tes); border-color: var(--acc-bd); }
.rr-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.rr-name { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.rr-item.cur .rr-name { color: var(--ted); }
.rr-id { font-size: 10px; color: var(--fa); font-family: var(--font-mono); flex-shrink: 0; }
.rr-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mu); }
.rr-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.rr-dot.r { background: var(--red); }
.rr-dot.a { background: var(--am); }
.rr-dot.g { background: var(--gr); }
/* browse-rail parent picker, zone chips, pager — shared by the
   records and inspections rails */
.rec-location {
    font: inherit; font-size: 12.5px; font-weight: 600; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 7px; padding: 6px 8px; width: 100%;
    margin: 8px 0 6px; cursor: pointer;
}
.rec-location:hover { border-color: var(--ln2); }
.rec-location-row { display: flex; gap: 6px; align-items: center; }
.rec-location-row .rec-location { flex: 1; min-width: 0; }
.rec-plan-btn {
    width: 30px; height: 30px; border-radius: 7px; flex-shrink: 0;
    border: 1px solid var(--ln); background: var(--s2); color: var(--mu);
    display: inline-flex; align-items: center; justify-content: center;
    margin: 8px 0 6px;
}
.rec-plan-btn:hover { border-color: var(--ln2); color: var(--ink); }
.rec-plan-btn svg { width: 15px; height: 15px; }
.rec-plan-btn.ghost { opacity: 0.45; border-style: dashed; }
/* search sits above the location funnel; the rule bleeds to the rail
   edges like the rr-head border on the users/orgs rails */
.rec-search-rule { border-bottom: 1px solid var(--ln); margin: 0 -14px; }

/* many zones must never bury the list — capped to ~2 chip rows behind
   a Show all expander */
.rec-zones { display: flex; flex-wrap: wrap; gap: 4px; }
.rec-zones.capped { max-height: 48px; overflow: hidden; }
.rec-zones-more {
    font: inherit; font-size: 10.5px; font-weight: 600; color: var(--mu);
    background: none; border: 0; padding: 0; cursor: pointer;
    align-self: flex-start; margin-top: -3px;
}
.rec-zones-more:hover { color: var(--ink); text-decoration: underline; }
.rec-zone {
    font: inherit; font-size: 10.5px; font-weight: 600; color: var(--mu);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 999px; padding: 3px 9px; cursor: pointer; transition: 0.12s;
}
.rec-zone:hover { border-color: var(--ln2); color: var(--ink); }
.rec-zone.on { background: var(--acc-bg); border-color: var(--acc-bd); color: var(--acc-ink); }
.rec-zone-n { opacity: 0.65; margin-left: 2px; }
.rec-pager {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 8px; border-top: 1px solid var(--ln); flex-shrink: 0;
}
.rec-pager-info { font-size: 11px; color: var(--mu); }

/* traffic-light stages beyond the theme's r/a/g: yellow, blue, grey */
.rr-dot.y { background: light-dark(#ca9a04, #eab308); }
.rr-dot.b { background: var(--blue); }
.rr-dot.x { background: var(--fa); }

/* rail collapse toggle — sits on the rail's right edge */
.rr-toggle {
    position: fixed; top: 50%; transform: translateY(-50%);
    left: calc(var(--sidew) + var(--listw) - 1px);
    width: 16px; height: 44px;
    background: var(--panel); border: 1px solid var(--ln2);
    border-left: none; border-radius: 0 8px 8px 0;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: var(--mu); z-index: 46;
    box-shadow: var(--sh); transition: left 0.18s ease;
    padding: 0;
}
.rr-toggle:hover { background: var(--s2); color: var(--ink); }
.rr-toggle svg { width: 11px; height: 11px; transition: transform 0.15s ease; }
body.list-collapsed .rr-toggle { left: calc(var(--sidew) - 1px); }
body.list-collapsed .rr-toggle svg { transform: rotate(180deg); }
/* the toggle pokes past the submenu panel's edge — hide it while the
   panel is open over the rail */
body.panel-open .rr-toggle { opacity: 0; pointer-events: none; }

/* rail header action buttons (sort / expand) */
.rr-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.rr-sort-btn,
.rr-expand-btn,
.rr-filter-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border: none; background: transparent;
    color: var(--ln2); cursor: pointer;
    border-radius: 5px; padding: 0; flex-shrink: 0;
    transition: color 0.12s, background 0.12s;
    margin-left: 2px;
}
.rr-expand-btn { width: 22px; height: 22px; margin-left: 4px; color: var(--fa); }
.rr-sort-btn:hover,
.rr-expand-btn:hover,
.rr-filter-btn:hover { color: var(--mu); background: var(--s2); }
.rr-sort-btn.active { color: var(--te); }
.rr-sort-btn svg { width: 10px; height: 6px; display: block; }
.rr-expand-btn svg { width: 14px; height: 14px; display: block; }
body.rr-expanded .rr-expand-btn { color: light-dark(#303030, #7e8faa); }

/* expanded (table) state */
.rr-table { display: none; flex: 1; overflow-y: auto; }
body.rr-expanded .records-rail { width: calc(100vw - var(--sidew)); z-index: 47; }
body.rr-expanded .rr-list { display: none; }
body.rr-expanded .rr-table { display: block; }
body.rr-expanded .rr-toggle { display: none; }

.rr-table table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.rr-table th {
    position: sticky; top: 0;
    background: var(--s2);
    text-align: left; padding: 8px 12px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--mu);
    border-bottom: 1px solid var(--ln);
    white-space: nowrap; cursor: pointer; user-select: none;
}
.rr-table th:hover { color: var(--te); }
.rr-table td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--ln);
    color: var(--ink); white-space: nowrap;
}
.rr-table td.mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--mu); }
.rr-table td:nth-child(2) { width: 24px; padding-right: 0; }
.rr-table tbody tr { cursor: pointer; transition: background 0.1s; }
.rr-table tbody tr:hover td { background: var(--s2); }
.rr-table tbody tr.cur td { background: var(--acc-bg); color: var(--acc-ink); }
.rr-table .rr-dot { display: inline-block; }

/* ── 07 APP MAIN + TOP BAR ─────────────────────────────────────── */
.app-main {
    margin-left: var(--sidew);
    transition: margin-left 0.18s ease;
}
body.has-rail .app-main { margin-left: calc(var(--sidew) + var(--listw)); }
body.has-rail.list-collapsed .app-main { margin-left: var(--sidew); }
body.panel-open .app-main { margin-left: calc(var(--sidew) + var(--subw)); }

.tb {
    position: sticky; top: 0; z-index: 40;
    background: var(--chrome);
    border-bottom: 1px solid var(--ln);
    display: flex; align-items: center; gap: 16px;
    padding: 0 20px; height: var(--tbh);
}
.brand {
    display: flex; align-items: center; gap: 8px;
    font-weight: 700; font-size: 16px; letter-spacing: -0.02em;
}
.brand .dot { width: 8px; height: 16px; border-radius: 2px; background: var(--te); }
.crumbs { font-size: 12px; color: var(--mu); display: flex; gap: 5px; align-items: center; }
.crumbs a { color: var(--mu); text-decoration: none; }
.crumbs a:hover { color: var(--ink); }
.crumbs b { color: var(--ink); }
.sep { color: var(--fa); }
.sp { flex: 1; }
.srch {
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 7px; padding: 6px 10px; font: inherit;
    font-size: 12px; color: var(--mu); width: 160px;
}
.srch::placeholder { color: var(--fa); }
.srch:focus { border-color: var(--ln2); outline: none; color: var(--ink); }

.me { font-size: 12px; color: var(--mu); display: flex; align-items: center; position: relative; }
.me a { display: flex; text-decoration: none; }
.me .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--avatar-bg); color: var(--avatar-ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.me .notif {
    position: absolute; top: -4px; right: -4px;
    min-width: 18px; height: 18px; padding: 0 3px;
    border-radius: 999px; background: var(--red);
    border: 1.5px solid var(--chrome);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700; line-height: 1;
}
.company-client { font-size: 12px; color: var(--mu); display: flex; align-items: center; }
.company-client .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: light-dark(#ffffff, #1e2436); outline: 1px solid var(--ln);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; flex-shrink: 0;
}
.company-icon { width: 70%; height: 70%; display: block; }

/* icon button in the top bar */
.tb-icon {
    width: 34px; height: 34px; border-radius: 8px;
    border: 1px solid var(--ln2); background: var(--sur);
    color: var(--mu); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative; flex-shrink: 0;
}
.tb-icon:hover { background: var(--s2); color: var(--ink); }
.tb-icon svg { width: 17px; height: 17px; }

/* count badge shared by tb-icon / foot-icon */
.tb-icon .badge,
.foot-icon .badge {
    position: absolute; top: -5px; right: -5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: var(--acc-strong); color: #fff;
    font-size: 9px; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--chrome);
}

.shell { max-width: 1380px; margin: 0 auto; padding: 14px 20px 86px; }

/* ── 08 FOOTER ACTION BAR ──────────────────────────────────────── */
.footer {
    position: fixed; bottom: 0;
    left: var(--sidew); right: 0;
    z-index: 35; background: var(--chrome);
    border-top: 1px solid var(--ln);
    box-shadow: 0 -3px 12px light-dark(rgba(22, 36, 43, 0.05), rgba(0, 0, 0, 0.3));
    transition: left 0.18s ease;
}
body.has-rail .footer { left: calc(var(--sidew) + var(--listw)); }
body.has-rail.list-collapsed .footer { left: var(--sidew); }
body.panel-open .footer { left: calc(var(--sidew) + var(--subw)); }
.fin {
    max-width: 1380px; margin: 0 auto; padding: 8px 20px;
    display: flex; align-items: center; gap: 7px;
}
.foot-tools { display: flex; align-items: center; gap: 7px; margin-left: auto; }
/* push a footer action to the far right (before .foot-tools) */
.fin .push-right { margin-left: auto; }
.foot-icon {
    width: 32px; height: 32px; border-radius: 7px;
    border: 1px solid var(--ln2); background: var(--s2);
    color: var(--mu); cursor: pointer; position: relative;
    display: inline-flex; align-items: center; justify-content: center;
}
.foot-icon:hover { background: var(--ln2); color: var(--ink); }
.foot-icon svg { width: 16px; height: 16px; }
.fin .nav {
    display: flex; gap: 7px; margin-left: 18px; align-items: center;
    font-size: 11.5px; color: var(--mu);
}
.fin .nav button {
    width: 30px; height: 30px; border: 1px solid var(--ln2);
    background: var(--s2); border-radius: 7px; cursor: pointer;
    font-size: 14px; color: var(--ink);
}
.fin .nav button:hover { background: var(--ln2); }
.fin .nav span { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }

/* ── 09 DRAWERS ────────────────────────────────────────────────── */
.drawer-scrim {
    position: fixed; inset: 0;
    background: light-dark(rgba(22, 36, 43, 0.35), rgba(0, 0, 0, 0.5));
    opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: 55;
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 410px; max-width: 92vw;
    background: var(--panel); border-left: 1px solid var(--ln2);
    box-shadow: -8px 0 34px light-dark(rgba(22, 36, 43, 0.18), rgba(0, 0, 0, 0.5));
    z-index: 60; display: flex; flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
    flex-shrink: 0; padding: 15px 18px; border-bottom: 1px solid var(--ln);
    display: flex; align-items: center; justify-content: space-between;
}
.drawer-title {
    font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--ted); display: flex; align-items: center; gap: 9px;
}
.drawer-title svg { width: 16px; height: 16px; color: var(--mu); }
.drawer-close {
    width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ln2);
    background: var(--sur); color: var(--mu); font-size: 16px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.drawer-close:hover { background: var(--s2); color: var(--ink); }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }
.drawer-sh {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fa); margin: 18px 0 10px; padding-top: 16px; border-top: 1px solid var(--ln);
}
.drawer .narr textarea { min-height: 66px; padding: 8px 10px; line-height: 1.5; }

/* note thread */
.note-thread { display: flex; flex-direction: column; gap: 9px; }
.note { background: var(--s2); border: 1px solid var(--ln); border-radius: 8px; padding: 10px 12px; }
.note-meta {
    font-size: 10.5px; color: var(--fa); margin-bottom: 5px;
    display: flex; gap: 9px; align-items: baseline;
}
.note-meta b { white-space: nowrap; color: var(--mu); }
.note-meta span { margin-left: auto; white-space: nowrap; font-family: var(--font-mono); }
.note-body { font-size: 12.5px; color: var(--ink); line-height: 1.5; white-space: pre-wrap; }
.note-empty { font-size: 12px; color: var(--fa); font-style: italic; text-align: center; padding: 22px 0; }

/* version list */
.ver-list { display: flex; flex-direction: column; gap: 6px; }
.ver {
    display: grid; grid-template-columns: auto 1fr auto; gap: 5px 10px;
    padding: 10px 12px; background: var(--s2); border: 1px solid var(--ln);
    border-radius: 8px; cursor: pointer; align-items: center;
}
.ver:hover { border-color: var(--ln2); background: light-dark(#f2f2f2, #202839); }
.ver.sel {
    border-color: var(--focus);
    box-shadow: 0 0 0 2px light-dark(rgba(48, 48, 48, 0.22), rgba(76, 124, 243, 0.4));
}
.ver.current { border-color: var(--ok-bd); background: var(--ok-bg); }
.ver.current:hover { background: var(--ok-bg-h); border-color: var(--ok-bd-h); }
.ver.current .ver-no { color: var(--ok-ink); background: var(--ok-no-bg); }
.ver-tag {
    font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
    text-transform: uppercase; color: var(--ok-ink);
}
.ver-no {
    font-family: var(--font-mono); font-size: 11px; font-weight: 700;
    color: var(--te); background: var(--tes); padding: 2px 7px; border-radius: 5px;
}
.ver-date { font-family: var(--font-mono); font-size: 11px; color: var(--mu); text-align: right; }
.ver-desc { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink); line-height: 1.4; }
.ver-author { grid-column: 1 / -1; font-size: 10.5px; color: var(--fa); }

/* ── 10 PAGE LAYOUT ────────────────────────────────────────────── */
.page { display: grid; grid-template-columns: 1fr 340px; gap: var(--gap); align-items: start; }
.col-left { display: flex; flex-direction: column; gap: var(--gap); }
.col-right { display: flex; flex-direction: column; }

@media (min-width: 1041px) {
    .col-right {
        position: sticky;
        top: calc(var(--tbh) + 14px);
        max-height: calc(100vh - var(--tbh) - 28px);
        overflow-y: auto;
    }
}
@media (orientation: portrait), (max-width: 1040px) {
    .page { grid-template-columns: 1fr; }
    .col-right { position: static; width: 100%; }
    .photo-card { height: auto; }
}

/* ── 11 IDENTITY + STEPPER ─────────────────────────────────────── */
.ident {
    background: var(--sur); border: 1px solid var(--ln);
    border-radius: var(--r); box-shadow: var(--sh);
    padding: 13px 18px; margin-bottom: var(--gap);
}
.it { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ident h1 {
    font-size: 18px; letter-spacing: -0.02em; font-weight: 700;
    display: flex; align-items: center; gap: 10px;
}
.pid {
    font-size: 11px; color: var(--mu);
    background: var(--s2); padding: 3px 8px;
    border-radius: 6px; font-weight: 600; font-family: var(--font-mono);
    border: 1px solid var(--ln);
}
.meta { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 5px; }
.meta div { font-size: 11.5px; color: var(--mu); }
.meta b { color: var(--ink); font-weight: 600; }
.ha { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }

.stepper {
    display: flex; margin-top: 12px;
    border-top: 1px solid var(--ln); padding-top: 12px;
}
.step {
    flex: 1; position: relative; display: flex; flex-direction: column;
    align-items: center; gap: 5px; text-align: center;
}
.step .bar {
    position: absolute; top: 10px; left: -50%;
    width: 100%; height: 2px; background: var(--ln2); z-index: 0;
}
.step:first-child .bar { display: none; }
.snode {
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--s2); border: 2px solid var(--ln2);
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700; color: var(--fa);
    z-index: 1; position: relative;
}
.slbl {
    font-size: 10.5px; font-weight: 600;
    color: light-dark(#697b83, #4e5e78); letter-spacing: 0.03em;
}
.step.done .bar { background: var(--te); }
.step.done .snode {
    background: light-dark(#303030, #2a3552);
    border-color: var(--te);
    color: light-dark(#ffffff, #c8d0e0);
}
.step.cur .snode {
    border-color: var(--te); color: var(--ted); background: var(--tes);
    box-shadow: 0 0 0 4px light-dark(#f2f2f2, #1a2438);
}
.step.cur .slbl { color: var(--ted); font-weight: 700; }
.step.cur .bar { background: var(--te); }

/* ── 12 CARDS ──────────────────────────────────────────────────── */
.card {
    background: var(--sur); border: 1px solid var(--ln);
    border-radius: var(--r); box-shadow: var(--sh);
    padding: 12px 14px; display: flex; flex-direction: column;
}
.card h2 {
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--mu); display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; flex-shrink: 0;
    border-bottom: 1px solid var(--ln); padding-bottom: 8px;
}
.card h2:has(.collapse-btn) { cursor: pointer; }
.ix { font-family: var(--font-mono); color: var(--fa); font-weight: 500; }
.grow { flex: 1; }

.card.collapsed .card-body { display: none; }
.collapse-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto;
    width: 20px; height: 20px;
    border: none; border-radius: 5px;
    background: transparent; color: var(--ln2);
    cursor: pointer; padding: 0; flex-shrink: 0;
}
.collapse-btn:hover { color: var(--fa); }
.collapse-btn svg {
    width: 10px; height: 6px; display: block;
    transition: transform 0.22s ease;
}
.card.collapsed .collapse-btn svg { transform: rotate(-90deg); }

/* ── 13 BUTTONS ────────────────────────────────────────────────── */
.btn {
    font: inherit; font-size: 12px; font-weight: 600;
    border-radius: 7px; padding: 7px 12px; cursor: pointer;
    border: 1px solid var(--ln2); background: var(--sur);
    color: var(--ink); transition: 0.12s; white-space: nowrap;
    text-decoration: none; display: inline-block;
}
.btn:hover { background: var(--s2); }

/* native file inputs: skin the picker button like a .btn and quieten
   the filename text — the input row itself keeps the .fr control frame */
.fr input[type="file"] { padding: 4px 6px; color: var(--mu); cursor: pointer; }
.fr input[type="file"]::file-selector-button {
    font: inherit; font-size: 12px; font-weight: 600;
    border-radius: 7px; padding: 5px 12px; cursor: pointer;
    border: 1px solid var(--ln2); background: var(--sur);
    color: var(--ink); transition: 0.12s; margin-right: 10px;
}
.fr input[type="file"]::file-selector-button:hover { background: var(--s2); }

.btn.pri { background: var(--pri-bg); border-color: var(--pri-bd); color: var(--pri-ink); }
.btn.pri:hover { background: var(--pri-bg-h); color: var(--pri-ink-h); }
.btn.gh { background: transparent; border-color: var(--ln); color: var(--mu); }
.btn.gh:hover { background: var(--s2); color: var(--ink); }
.btn.del { color: var(--red); border-color: var(--red-bd); }
.btn.del:hover { background: var(--red-bg); }
.btn.sm { padding: 4px 8px; font-size: 11px; }

/* RAG status group */
.rag { display: inline-flex; border: 1px solid var(--ln2); border-radius: 7px; overflow: hidden; }
.rag button {
    border: 0; background: light-dark(#ffffff, #1e2436);
    padding: 6px 11px; font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--mu); cursor: pointer;
    border-right: 1px solid var(--ln);
    display: flex; align-items: center; gap: 6px;
}
.rag button:last-child { border-right: 0; }
.rag button:hover { background: light-dark(#f7f9f9, #252e44); color: var(--ink); }
.rag .sw { width: 8px; height: 8px; border-radius: 50%; }
.rag .rr .sw { background: var(--red); }
.rag .ra .sw { background: var(--am); }
.rag .rg .sw { background: var(--gr); }
.rag button[aria-pressed="true"].rr { background: var(--red-bg); color: var(--red); }
.rag button[aria-pressed="true"].ra { background: var(--am-bg); color: var(--am-ink); }
.rag button[aria-pressed="true"].rg { background: var(--gr-bg); color: var(--gr); }

/* ── 14 FORMS ──────────────────────────────────────────────────── */
/* field row: right-aligned label + control(s) */
.fr {
    display: grid; grid-template-columns: 130px 1fr;
    align-items: center; column-gap: 8px; margin-bottom: 6px;
}
.fr:last-child { margin-bottom: 0; }
.fr > label {
    font-size: 11px; color: var(--mu); text-align: right;
    font-weight: 600; line-height: 1.3;
}
.fr.t2 { grid-template-columns: 130px 1fr 1fr; }
.fr input,
.fr select,
.fr textarea {
    font: inherit; font-size: 12.5px; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: var(--rs); padding: 5px 8px; width: 100%; min-width: 0;
}
.fr input:hover,
.fr select:hover,
.fr textarea:hover { border-color: var(--ln2); }
.fr input:focus,
.fr select:focus,
.fr textarea:focus {
    background: var(--s3); border-color: var(--focus); outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.fr input::placeholder { color: var(--fa); }
.fr input.num,
.fr input.code { font-family: var(--font-mono); }

/* input with a unit suffix */
.unit { position: relative; display: block; }
.unit input { padding-right: 34px; width: 100%; }
.unit .u {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 10.5px; color: var(--fa); font-weight: 600; pointer-events: none;
}

select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237d8a94' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
    padding-right: 22px; cursor: pointer;
}
select option { background: var(--s2); color: var(--ink); }

/* two-column layout inside a card */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
@media (max-width: 820px) {
    .two-col { grid-template-columns: 1fr; }
}

/* labelled textarea block */
.ta { margin-bottom: 7px; }
.ta:last-child { margin-bottom: 0; }
.ta label {
    display: block; font-size: 11px; color: var(--mu);
    font-weight: 600; margin-bottom: 3px;
}
.ta textarea,
.narr textarea {
    font: inherit; font-size: 12.5px; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: var(--rs); padding: 6px 8px; width: 100%;
    resize: vertical; min-height: 52px; line-height: 1.45;
}
.ta textarea:focus,
.narr textarea:focus {
    background: var(--s3); border-color: var(--focus); outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.ta textarea::placeholder,
.narr textarea::placeholder { color: var(--fa); }

/* inline composer: textarea + button */
.narr { display: flex; gap: 10px; align-items: flex-end; }
.narr textarea { flex: 1; min-height: 42px; }

/* card sub-headings */
.sh {
    font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--fa); margin: 10px 0 7px; padding-top: 10px; border-top: 1px solid var(--ln);
}
.sh:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* two-column history grid */
.hist { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }

/* FormManager output: <div class="{name} form-group"><label>…</label><input>…
   Same control skin as .fr, stacked label like .ta. */
.form-group { margin-bottom: 10px; }
.form-group label {
    display: block; font-size: 11px; color: var(--mu);
    font-weight: 600; margin-bottom: 3px;
}
.form-group input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.form-group select,
.form-group textarea {
    font: inherit; font-size: 12.5px; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: var(--rs); padding: 5px 8px; width: 100%; min-width: 0;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover { border-color: var(--ln2); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    background: var(--s3); border-color: var(--focus); outline: none;
    box-shadow: 0 0 0 3px var(--focus-ring);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--fa); }
.form-group textarea { resize: vertical; min-height: 52px; line-height: 1.45; }
.form-error { display: block; font-size: 11px; color: var(--red); margin-bottom: 3px; }
.form-group.error input,
.form-group.error select,
.form-group.error textarea { border-color: var(--red); }
/* selects already get a CSS chevron; hide the renderer's duplicate arrow */
.form-arrow { display: none; }

/* ── 15 TOGGLES & FLAG CHIPS ───────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.flag-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 6px; }

/* switch-style checkbox */
.chk {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 11.5px; cursor: pointer;
    padding: 5px 10px 5px 8px;
    border: 1px solid var(--ln); border-radius: 6px;
    background: var(--s2); transition: 0.12s;
    white-space: nowrap; user-select: none;
    color: var(--mu); position: relative;
}
.chk:hover { border-color: var(--ln2); color: var(--ink); }
.chk input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.chk::before {
    content: "";
    display: inline-block; flex-shrink: 0;
    width: 28px; height: 16px; border-radius: 999px;
    background: var(--ln2); border: 1px solid var(--ln);
    transition: background 0.18s, border-color 0.18s;
}
.chk::after {
    content: "";
    position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--mu);
    transition: transform 0.18s, background 0.18s;
    pointer-events: none;
}
.chk.on { background: var(--acc-bg); border-color: var(--acc-bd); color: var(--acc-ink); font-weight: 600; }
.chk.on::before { background: var(--acc-strong); border-color: var(--acc-strong); }
.chk.on::after { transform: translateY(-50%) translateX(12px); background: var(--acc-knob); }

/* set flags shown as removable chips; picker reveals the full set */
.flag-tame { display: flex; flex-direction: column; gap: 11px; }
.flag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.flag-chip {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11.5px; font-weight: 600; color: var(--acc-ink);
    background: var(--acc-bg); border: 1px solid var(--acc-bd);
    border-radius: 7px; padding: 5px 6px 5px 11px;
}
.flag-chip button {
    border: 0; background: transparent;
    color: light-dark(#9aa9af, #4e6a8a);
    font-size: 15px; line-height: 1; cursor: pointer; padding: 0 3px;
}
.flag-chip button:hover { color: var(--acc-ink); }
.flag-none { font-size: 12px; color: var(--fa); font-style: italic; }
.flag-edit {
    font: inherit; font-size: 11.5px; font-weight: 600;
    color: var(--mu); background: transparent;
    border: 1px dashed var(--ln2); border-radius: 7px;
    padding: 5px 12px; cursor: pointer;
}
.flag-edit:hover { color: var(--ink); border-color: var(--fa); }
.flag-picker {
    padding: 12px;
    background: light-dark(#f7f9f9, #12151f);
    border: 1px solid var(--ln); border-radius: 9px;
}
.flag-picker[hidden] { display: none; }

/* ── 16 RE-VALUE TABLE ─────────────────────────────────────────── */
.re-tbl { border: 1px solid var(--ln); border-radius: var(--rs); overflow: hidden; margin: 4px 0 8px; }
.re-row { display: grid; grid-template-columns: 60px 1fr 56px; border-bottom: 1px solid var(--ln); }
.re-row:last-child { border-bottom: 0; }
.re-row > div { padding: 5px 8px; font-size: 11.5px; display: flex; align-items: center; }
.re-row .k {
    background: var(--s2); font-weight: 600; color: var(--mu);
    border-right: 1px solid var(--ln);
}
.re-row .v { border-right: 1px solid var(--ln); font-family: var(--font-mono); color: var(--ink); }
.re-row .n { font-family: var(--font-mono); justify-content: flex-end; color: var(--ink); }
.re-row.e .v,
.re-row.e .n { color: var(--fa); }

/* ── 17 PHOTO GRID ─────────────────────────────────────────────── */
.photo-card { height: calc(100vh - var(--tbh) - 28px); display: flex; flex-direction: column; }
.pgrid {
    flex: 1; display: grid;
    grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr);
    gap: 8px; min-height: 0;
}
.pcell {
    position: relative; border: 1px solid var(--ln);
    border-radius: var(--rs); overflow: hidden;
    background: var(--s2); min-height: 0;
}
.pcell .inn {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 5px;
    cursor: pointer; transition: 0.12s;
}
.pcell .inn:hover { background: light-dark(#f2f2f2, rgba(76, 124, 243, 0.07)); }
.pcell .ic { font-size: 24px; color: var(--fa); line-height: 1; }
.pcell .ic svg { width: 24px; height: 24px; display: block; }
.pcell .pl { font-size: 10px; color: var(--fa); font-weight: 600; }
.pcell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcell .pcap {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 4px 6px; font-size: 10px; font-weight: 600; color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.65));
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.olay {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: linear-gradient(transparent, light-dark(rgba(22, 36, 43, 0.55), rgba(0, 0, 0, 0.7)));
    padding: 5px; display: flex; gap: 4px; opacity: 0; transition: 0.15s;
}
.pcell:hover .olay { opacity: 1; }
.olay button {
    flex: 1; font-size: 10px; padding: 4px; border: 0;
    background: light-dark(rgba(255, 255, 255, 0.9), rgba(30, 36, 54, 0.92));
    border-radius: 4px; cursor: pointer; font-weight: 600; color: var(--ink);
}
.olay button:hover { background: light-dark(#ffffff, rgba(44, 54, 80, 0.95)); }

/* ── 18 TOAST ──────────────────────────────────────────────────── */
/* Created on demand by samToast() (app.js). Sits just above the
   footer action bar; solid green/red fill. */
.toast {
    position: fixed;
    right: 20px;
    bottom: 62px;
    z-index: 70;
    display: flex; align-items: center; gap: 9px;
    background: var(--gr);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px; font-weight: 600; color: #fff;
    box-shadow: 0 6px 24px light-dark(rgba(22, 36, 43, 0.22), rgba(0, 0, 0, 0.5));
    opacity: 0; transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    max-width: 360px;
}
.toast.show { opacity: 1; transform: none; pointer-events: auto; }
.toast.error { background: var(--red); }
.toast-ic { display: flex; flex-shrink: 0; color: #fff; }
.toast-ic svg { width: 15px; height: 15px; }

/* ── 19 AUTH PAGE (auth.php) ───────────────────────────────────── */
/* 50/50 split: brand visual left, logo + auth module content right. */
.auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
}
.auth-visual { position: relative; overflow: hidden; }
.auth-visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.auth-panel {
    display: flex; align-items: center; justify-content: center;
    padding: 40px 24px;
}
.auth-box { width: 100%; max-width: 360px; }
.auth-logo { margin-bottom: 26px; }
.auth-logo .icn-logo-full { width: 300px; max-width: 100%; height: auto; color: var(--ink); }

@media (orientation: portrait), (max-width: 1040px) {
    .auth { grid-template-columns: 1fr; }
    .auth-visual { display: none; }
}

/* auth module views (.login, .reset, …) rendered into the panel */
.auth-box h1 { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 14px; }
.auth-box fieldset { border: 0; padding: 0; margin: 0; }
.auth-box p { font-size: 12.5px; color: var(--mu); margin-top: 14px; }
.auth-box p a { color: var(--ink); font-weight: 600; }
.auth-box p.error,
.auth-box .error { color: var(--red); }
.auth-box .action_link { margin-top: 16px; }
.auth-box .action_link input[type="submit"] {
    font: inherit; font-size: 12.5px; font-weight: 600;
    width: 100%; padding: 9px 12px; cursor: pointer;
    border-radius: 7px; border: 1px solid var(--pri-bd);
    background: var(--pri-bg); color: var(--pri-ink);
    transition: 0.12s;
}
.auth-box .action_link input[type="submit"]:hover {
    background: var(--pri-bg-h); color: var(--pri-ink-h);
}

/* ── network activity bar ────────────────────────────────────────
   Driven by the fetch wrapper in app.js: appears 150ms into any AJAX
   call, hides when the last one settles. Purely decorative, so it is
   aria-hidden and sits above everything except the session modal. */
.net-bar {
    position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 8500;
    overflow: hidden; pointer-events: none;
    /* a faint track keeps the bar readable between sweeps */
    background: color-mix(in srgb, var(--net) 20%, transparent);
    opacity: 0; transition: opacity 0.2s ease;
}
.net-bar.on { opacity: 1; }
.net-bar::before {
    content: ''; display: block; height: 100%; width: 45%;
    /* mostly solid — a fully soft gradient disappears at this height */
    background: linear-gradient(90deg,
        transparent 0%, var(--net) 18%, var(--net) 82%, transparent 100%);
    animation: net-sweep 1.05s ease-in-out infinite;
}
@keyframes net-sweep {
    from { transform: translateX(-100%); }
    to   { transform: translateX(400%); }
}
@media (prefers-reduced-motion: reduce) {
    /* no sweep — a static hairline still says "working" */
    .net-bar::before { width: 100%; animation: none; background: var(--net); opacity: 0.65; }
}

/* session-watcher modal (auth module JS builds .sw-overlay/.sw-dialog;
   framework ships no styles — the theme owns the look) */
.sw-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    backdrop-filter: blur(3px);
}
.sw-dialog {
    width: min(420px, calc(100vw - 40px));
    background: var(--sur); border: 1px solid var(--ln2);
    border-radius: 12px; padding: 22px 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.sw-dialog h2 { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: var(--ink); }
.sw-dialog p { font-size: 12.5px; color: var(--mu); line-height: 1.5; margin: 0 0 16px; }
.sw-dialog .sw-time { color: var(--ink); font-family: var(--font-mono); }
.sw-actions { display: flex; gap: 8px; justify-content: flex-end; }
.sw-actions .btn-primary {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 8px 14px; border-radius: 7px;
    border: 1px solid var(--pri-bd); background: var(--pri-bg); color: var(--pri-ink);
}
.sw-actions .btn-primary:hover { background: var(--pri-bg-h); color: var(--pri-ink-h); }
.sw-actions .btn-secondary {
    font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
    padding: 8px 14px; border-radius: 7px;
    border: 1px solid var(--ln2); background: var(--s2); color: var(--ink);
}
.sw-actions .btn-secondary:hover { background: var(--s3); }

/* passkey sign-in (auth) + passkey list (profile) */
.passkey-login {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-size: 12.5px; font-weight: 600;
    width: 100%; margin-top: 12px; padding: 9px 12px; cursor: pointer;
    border-radius: 7px; border: 1px solid var(--ln2);
    background: var(--s2); color: var(--ink); transition: 0.12s;
}
.passkey-login:hover { background: var(--s3); border-color: var(--focus); }
.passkey-login svg { width: 16px; height: 16px; }
.passkey-msg { font-size: 12px; margin-top: 10px; }
.passkey-msg.error { color: var(--red); }

.passkey-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--ln);
}
.passkey-row:last-child { border-bottom: 0; }
.passkey-row .pk-name { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.passkey-row .pk-meta { font-size: 11px; color: var(--mu); }
.passkey-row .sp { flex: 1; }
.passkey-empty { font-size: 12px; color: var(--fa); margin-bottom: 10px; }
#passkeyAdd { margin-top: 12px; }

/* ── header organisation scope switcher ─────────────────────────── */
.scope-switch {
    font: inherit; font-size: 12px; font-weight: 600; color: var(--ink);
    background: var(--s2); border: 1px solid var(--ln);
    border-radius: 7px; padding: 6px 8px; cursor: pointer;
    max-width: 220px; transition: 0.12s;
}
.scope-switch:hover { border-color: var(--ln2); background: var(--s3); }
.scope-switch:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }

/* org-domain hosts: the scope is fixed — a chip replaces the switcher */
.scope-locked {
    display: inline-flex; align-items: center;
    font-size: 12px; font-weight: 700; color: var(--ted);
    background: var(--tes); border: 1px solid var(--ln2);
    border-radius: 7px; padding: 5px 11px; cursor: default;
}

/* rich scope switcher (Chromium base-select) — logos in the options */
@supports (appearance: base-select) {
    .scope-switch.scope-rich,
    .scope-switch.scope-rich::picker(select) { appearance: base-select; }
    .scope-switch.scope-rich::picker-icon { display: none; }
    .scope-switch.scope-rich > button {
        display: inline-flex; align-items: center; gap: 7px;
        font: inherit; color: inherit; background: none; border: 0;
        padding: 0; cursor: pointer;
    }
    .scope-switch.scope-rich::picker(select) {
        background: var(--sur); border: 1px solid var(--ln2);
        border-radius: 9px; box-shadow: var(--sh); padding: 4px;
        max-height: 60vh;
    }
    .scope-switch.scope-rich option {
        display: flex; align-items: center; gap: 8px;
        font-size: 12px; color: var(--ink);
        padding: 5px 8px; border-radius: 6px; cursor: pointer;
    }
    .scope-switch.scope-rich option:hover,
    .scope-switch.scope-rich option:focus { background: var(--s2); }
    .scope-switch.scope-rich option:checked { background: var(--tes); color: var(--ted); font-weight: 600; }
    .scope-opt-logo {
        width: 20px; height: 20px; border-radius: 5px; flex-shrink: 0;
        background: var(--s2); border: 1px solid var(--ln);
        display: inline-flex; align-items: center; justify-content: center;
        font-size: 8px; font-weight: 800; color: var(--mu); overflow: hidden;
    }
    .scope-opt-logo img { width: 100%; height: 100%; object-fit: contain; }
    .scope-switch.scope-rich selectedcontent .scope-opt-logo { width: 16px; height: 16px; }
}

/* ── Impersonation banner (Login As User) ────────────────────────── */
.impersonation-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 16px; font-size: 12.5px;
    background: color-mix(in srgb, var(--amber, #b45309) 14%, var(--s2));
    border-bottom: 1px solid color-mix(in srgb, var(--amber, #b45309) 40%, var(--ln));
    color: var(--ink);
}
.impersonation-bar svg { width: 15px; height: 15px; flex: none; color: var(--amber, #b45309); }
.impersonation-bar .btn { margin-left: auto; }

/* ── Photo lightbox ─────────────────────────────────────────────── */
.lightbox {
    position: fixed; inset: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8, 12, 18, 0.9);
}
.lightbox figure { margin: 0; max-width: 92vw; text-align: center; }
.lightbox img {
    max-width: 92vw; max-height: 82vh; object-fit: contain;
    border-radius: var(--rs); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
    cursor: default;
}
.lightbox figcaption {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    padding: 12px 6px 0; color: rgba(255, 255, 255, 0.92);
    font-size: 13px; font-weight: 600;
}
.lightbox .lb-n { color: rgba(255, 255, 255, 0.55); font-weight: 500; }
.lb-btn {
    position: absolute; z-index: 1;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s;
}
.lb-btn:hover { background: rgba(255, 255, 255, 0.24); }
.lb-close { top: 18px; right: 22px; font-size: 22px; }
.lb-prev { left: 22px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 22px; top: 50%; transform: translateY(-50%); }
img[data-lightbox] { cursor: zoom-in; }

/* editable caption input (grid strip + lightbox) */
.cap-input {
    width: 100%; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 4px;
    background: rgba(0, 0, 0, 0.55); color: #fff;
    font: inherit; font-size: 11px; padding: 2px 6px; outline: none;
}
.lightbox .cap-input { max-width: 420px; font-size: 13px; text-align: center; }
.pcap[data-file] { cursor: text; }

/* ── narrative drawer (shared: records, workpack, …) ────────────── */
/* composer stacks: full-width RTE with Save note beneath it */
#narrativeDrawer .narr { flex-direction: column; align-items: stretch; }
#narrativeDrawer .narr .rte, #narrativeDrawer .narr textarea { width: 100%; flex: none; }
#narrativeDrawer #saveNote { align-self: flex-end; }
.narr .rte__surface { min-height: 66px; font-size: 12.5px; }

/* mention chips inside rendered notes (the editor styles its own) */
.note-body .rte-mention {
    display: inline-block; padding: 0 0.35em; border-radius: 4px;
    background: var(--acc-bg); color: var(--acc-ink); font-weight: 500;
    white-space: nowrap;
}
.note-title { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }

/* composer buttons sit under the editor, right-aligned */
.narr-actions { display: flex; gap: 7px; justify-content: flex-end; }

/* own-note controls: quiet until the note is hovered */
.note-edited { font-size: 10px; color: var(--fa); font-style: italic; }
.note-actions { display: flex; gap: 10px; margin-top: 6px; opacity: 0; transition: 0.12s; }
.note:hover .note-actions, .note:focus-within .note-actions { opacity: 1; }
.note-actions button {
    font: inherit; font-size: 10.5px; font-weight: 600; color: var(--mu);
    background: none; border: 0; padding: 0; cursor: pointer;
}
.note-actions button:hover { color: var(--ink); text-decoration: underline; }
.note-actions .note-del:hover { color: var(--red); }

/**
 * Appearance plugin — toggle styles.
 *
 * The color-scheme overrides are what actually switch the theme: the
 * plugin JS sets a `light`/`dark` class on <html>, and every
 * light-dark() token in the theme resolves accordingly. No class = auto
 * (OS preference).
 *
 * The toggle renders as a segmented pill (sun / auto / moon). Icons are
 * alpha masks, so their colour comes from background-color and follows
 * the theme's colour tokens (--ln2, --s2, --fa, --mu, --ink, --focus) —
 * themes without those tokens should override these rules.
 */
html.light { color-scheme: light; }
html.dark { color-scheme: dark; }

.themeModeSwitch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0;
    padding: 3px;
    border: 1px solid var(--ln2);
    border-radius: 999px;
    background: var(--s2);
}
/* keyboard focus ring on the pill — a mask would clip it on the inputs */
.themeModeSwitch:has(.themeModeSwitchBtn:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.themeModeSwitchBtn {
    appearance: none;
    margin: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    background-color: var(--fa);
    -webkit-mask: var(--icon) center / 15px 15px no-repeat;
    mask: var(--icon) center / 15px 15px no-repeat;
    transition: background-color 0.12s;
    outline: none;
}
.themeModeSwitchBtn:hover { background-color: var(--mu); }
.themeModeSwitchBtn:checked { background-color: var(--ink); }
.themeModeSwitchBtn[value="light"] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4' fill='black'/%3E%3Cpath d='M12 2v3M12 19v3M4.2 4.2l2.1 2.1M17.7 17.7l2.1 2.1M2 12h3M19 12h3M4.2 19.8l2.1-2.1M17.7 6.3l2.1-2.1'/%3E%3C/svg%3E");
}
.themeModeSwitchBtn[value=""] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' stroke='black' stroke-width='2' fill='none'/%3E%3Cpath d='M12 3a9 9 0 0 1 0 18z' fill='black'/%3E%3C/svg%3E");
}
.themeModeSwitchBtn[value="dark"] {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z' fill='black'/%3E%3C/svg%3E");
}