/* Skin for the admin panel.
   Loaded on top of Tabler: the fonts and tokens first, then the pieces of
   chrome that Tabler compiles with hard-coded colours.

   The palette is the public site's (frontend/app/assets/css/main.css): the
   same deep green brand (#2c6e63) on an off-white ground with faint colour
   washes at the top, white surfaces with light borders, 8/12/16px radii and
   soft layered shadows, so the panel reads as the same product as the
   catalog. The site's names map onto the panel's older --o-* names below
   (--brand is --o-accent, --text-muted is --o-ink-muted, --border-light is
   --o-line-soft, ...), which every rule in this file is written against;
   the three other accent themes and the dark mode redefine the same tokens
   and nothing else. */

/* --- Fonts ---

   Inter Variable, self-hosted from statics/fonts: the site's face, in the
   same four subsets the site ships, with the unicode ranges of the
   @fontsource-variable/inter package so a browser downloads only the ones a
   page uses. Tabler's base template imports Inter from rsms.me; the
   --tblr-font-sans-serif token below points it at this face instead. */

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-cyrillic-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url(../fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

/* --- Tokens --- */

:root,
[data-bs-theme="light"] {
    color-scheme: light;
    /* text: the site's --text, --text-soft, --text-muted and --text-faint */
    --o-ink: #1a1f1d;
    --o-ink-soft: #3d383f;
    --o-ink-muted: #5e6a66;
    --o-ink-faint: #8c9793;
    /* lines and grounds: --border, --border-light, --surface, --page-bg */
    --o-line: #d6deda;
    --o-line-soft: #e6ece9;
    --o-surface: #ffffff;
    --o-canvas: #f6f9f8;
    --o-hover: #f1f5f3;
    --o-header-bg: #f6f9f8;
    /* the top bar is a light surface like the site's header; the pair of
       tokens stays so that nothing else in the file has to know */
    --o-navbar-bg: var(--o-surface);
    --o-navbar-ink: var(--o-ink);
    /* a sheet that stays white in dark mode: QR codes are read dark on light */
    --o-paper: #ffffff;
    /* the brand: primary actions, active states, links (--brand,
       --brand-hover, --brand-dark, --brand-bg, --brand-bg-strong, --brand-ring) */
    --o-accent: #2c6e63;
    --o-accent-strong: #255c53;
    --o-accent-dark: #1e4a43;
    --o-accent-soft: #ebf4f1;
    --o-accent-soft-strong: #daeae5;
    --o-accent-ring: rgba(44, 110, 99, 0.22);
    --o-accent-rgb: 44, 110, 99;
    --o-accent-soft-rgb: 235, 244, 241;
    --o-on-accent: #ffffff;
    /* the accent thinned out: chip borders, hovers, disabled primaries */
    --o-chip-border: #daeae5;
    --o-chip-hover: #daeae5;
    --o-accent-disabled: #96b9b2;
    /* neutral control borders */
    --o-btn-border: #d6deda;
    --o-btn-border-hover: #c2ccc7;
    /* semantic colour, used only where it carries meaning */
    --o-success-bg: #e4f4e9;
    --o-success-ink: #1e6b34;
    --o-danger: #b3261e;
    --o-danger-strong: #a3302a;
    --o-danger-bg: #fbe9e7;
    --o-danger-soft-bg: #fdf3f2;
    --o-danger-ring: rgba(179, 38, 30, 0.2);
    --o-warn-bg: #fff3d3;
    --o-warn-ink: #7a5a1e;
    --o-gold: #e6a800;
    /* the flat ground the city illustrations are drawn against (the site's
       --illustration-bg); the drawings are transparent and carry no backing */
    --o-illustration-bg: #e9f1ed;
    --o-overlay: rgba(26, 31, 29, 0.45);
    /* the washes at the top of the ground (body): the accent on the left,
       apricot on the right, a hint of sky blue between — the site's */
    --o-wash-1: rgba(var(--o-accent-rgb), 0.14);
    --o-wash-2: rgba(235, 170, 120, 0.16);
    --o-wash-3: rgba(110, 165, 195, 0.12);
    /* shape: the site's radii and shadows, plus the 10px of its controls */
    --o-radius-sm: 8px;
    --o-radius-control: 10px;
    --o-radius: 12px;
    --o-radius-lg: 16px;
    --o-shadow-sm: 0 1px 2px rgba(26, 31, 29, 0.05);
    --o-shadow: 0 1px 2px rgba(26, 31, 29, 0.04), 0 8px 24px -12px rgba(26, 31, 29, 0.14);
    --o-shadow-lift: 0 2px 4px rgba(26, 31, 29, 0.05), 0 16px 32px -14px rgba(26, 31, 29, 0.2);
    /* the heights the sticky pieces stack on: the top bar, then the page
       header under it, then the chatter column */
    --o-navbar-h: 56px;
    --o-header-h: 56px;

    --tblr-font-sans-serif: "Inter Variable", Inter, system-ui, -apple-system, "Segoe UI",
        Roboto, sans-serif;
    --tblr-body-bg: var(--o-canvas);
    --tblr-body-color: var(--o-ink);
    --tblr-body-font-size: 0.9375rem;
    --tblr-body-line-height: 1.5;
    --tblr-bg-surface: var(--o-surface);
    --tblr-bg-surface-secondary: var(--o-canvas);
    --tblr-bg-surface-tertiary: var(--o-canvas);
    --tblr-border-color: var(--o-line-soft);
    --tblr-border-color-translucent: var(--o-line-soft);
    --tblr-border-radius: var(--o-radius-control);
    --tblr-border-radius-sm: var(--o-radius-sm);
    --tblr-border-radius-lg: var(--o-radius);
    --tblr-primary: var(--o-accent);
    --tblr-primary-rgb: var(--o-accent-rgb);
    --tblr-secondary: var(--o-ink-muted);
    --tblr-secondary-rgb: 94, 106, 102;
    --tblr-muted: var(--o-ink-muted);
    --tblr-link-color: var(--o-accent);
    --tblr-link-color-rgb: var(--o-accent-rgb);
    --tblr-link-hover-color: var(--o-accent-strong);
    --tblr-link-hover-color-rgb: var(--o-accent-rgb);

    /* DataTables paints selected rows from these */
    --dt-row-selected: var(--o-accent-soft-rgb);
    --dt-row-selected-text: 26, 31, 29;
    --dt-row-selected-link: 26, 31, 29;
}

/* --- Themes (profile dialog, Appearance tab) ---

   layout.html stamps data-o-theme from the appearance.theme setting; every
   painted colour above derives from the tokens below, so a theme is nothing
   but this block. Petrol — the name the setting kept — is the untouched
   default, the site's green. The others are drawn in the same register:
   soft, desaturated accents, the neutrals warmed or cooled a shade. */

:root[data-o-theme="indigo"] {
    --o-ink: #1b1d26;
    --o-ink-soft: #3b3e4c;
    --o-ink-muted: #626878;
    --o-ink-faint: #8f94a3;
    --o-line: #d8dbe3;
    --o-line-soft: #e8eaf0;
    --o-canvas: #f6f7fa;
    --o-hover: #f1f2f7;
    --o-header-bg: #f6f7fa;
    --o-accent: #4a5491;
    --o-accent-strong: #3f4880;
    --o-accent-dark: #2f3762;
    --o-accent-soft: #ecedf6;
    --o-accent-soft-strong: #dcdff0;
    --o-accent-ring: rgba(74, 84, 145, 0.22);
    --o-accent-rgb: 74, 84, 145;
    --o-accent-soft-rgb: 236, 237, 246;
    --o-chip-border: #dcdff0;
    --o-chip-hover: #dcdff0;
    --o-accent-disabled: #a2a7cc;
    --o-btn-border: #d8dbe3;
    --o-btn-border-hover: #c3c7d3;
}

:root[data-o-theme="terracotta"] {
    --o-ink: #241d19;
    --o-ink-soft: #473c35;
    --o-ink-muted: #6f655d;
    --o-ink-faint: #9a8f86;
    --o-line: #e0d8d2;
    --o-line-soft: #ede7e2;
    --o-canvas: #f9f6f3;
    --o-hover: #f5f0ec;
    --o-header-bg: #f9f6f3;
    --o-accent: #a65d3f;
    --o-accent-strong: #8f4e33;
    --o-accent-dark: #6b3a26;
    --o-accent-soft: #f7ece6;
    --o-accent-soft-strong: #efdcd1;
    --o-accent-ring: rgba(166, 93, 63, 0.22);
    --o-accent-rgb: 166, 93, 63;
    --o-accent-soft-rgb: 247, 236, 230;
    --o-chip-border: #efdcd1;
    --o-chip-hover: #efdcd1;
    --o-accent-disabled: #d0a995;
    --o-btn-border: #e0d8d2;
    --o-btn-border-hover: #cdc3bb;
}

:root[data-o-theme="olive"] {
    --o-ink: #1d2017;
    --o-ink-soft: #3e4335;
    --o-ink-muted: #666c5a;
    --o-ink-faint: #929784;
    --o-line: #d8dbcf;
    --o-line-soft: #e7eadf;
    --o-canvas: #f6f8f2;
    --o-hover: #f1f4ea;
    --o-header-bg: #f6f8f2;
    --o-accent: #667a4a;
    --o-accent-strong: #566840;
    --o-accent-dark: #3f4d2d;
    --o-accent-soft: #eff2e8;
    --o-accent-soft-strong: #e0e6d4;
    --o-accent-ring: rgba(102, 122, 74, 0.22);
    --o-accent-rgb: 102, 122, 74;
    --o-accent-soft-rgb: 239, 242, 232;
    --o-chip-border: #e0e6d4;
    --o-chip-hover: #e0e6d4;
    --o-accent-disabled: #aab79a;
    --o-btn-border: #d8dbcf;
    --o-btn-border-hover: #c4c8b9;
}

/* --- Dark mode (profile dialog, Appearance tab) ---

   layout.html stamps data-o-mode (and mirrors it as data-bs-theme, which
   flips Tabler's own components). The block sits after the theme blocks and
   wins over them at equal specificity: the neutrals go dark once for every
   theme — the site's dark tokens — and the accent-derived tints are mixed
   from whichever --o-accent the theme block above set. Only the accents
   themselves need a per-theme lift for contrast on the dark canvas — the
   small blocks below. */

:root[data-o-mode="dark"] {
    color-scheme: dark;
    --o-ink: #e7ecea;
    --o-ink-soft: #cfd6d3;
    --o-ink-muted: #a6b1ad;
    --o-ink-faint: #7b8682;
    --o-line: #34403c;
    --o-line-soft: #27302d;
    --o-surface: #191f1d;
    --o-canvas: #101413;
    --o-hover: #202826;
    --o-header-bg: #1d2422;
    --o-accent-soft: color-mix(in srgb, var(--o-accent) 22%, var(--o-canvas));
    --o-accent-soft-strong: color-mix(in srgb, var(--o-accent) 32%, var(--o-canvas));
    --o-accent-ring: color-mix(in srgb, var(--o-accent) 28%, transparent);
    --o-chip-border: color-mix(in srgb, var(--o-accent) 40%, var(--o-canvas));
    --o-chip-hover: color-mix(in srgb, var(--o-accent) 30%, var(--o-canvas));
    --o-accent-disabled: color-mix(in srgb, var(--o-accent) 45%, var(--o-ink-faint));
    --o-btn-border: #34403c;
    --o-btn-border-hover: #45524d;
    --o-success-bg: #1e3327;
    --o-success-ink: #86c89a;
    --o-danger: #f0928b;
    --o-danger-strong: #e89f99;
    --o-danger-bg: #3a2523;
    --o-danger-soft-bg: #33211f;
    --o-danger-ring: rgba(240, 146, 139, 0.25);
    --o-warn-bg: #3a301b;
    --o-warn-ink: #dfc27a;
    --o-overlay: rgba(0, 0, 0, 0.6);
    /* the same washes, dimmed onto the dark ground */
    --o-wash-1: rgba(var(--o-accent-rgb), 0.12);
    --o-wash-2: rgba(210, 140, 90, 0.08);
    --o-wash-3: rgba(90, 140, 170, 0.08);
    --o-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --o-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.5);
    --o-shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -14px rgba(0, 0, 0, 0.6);
    /* a flat dark selection: the light pastel triples would glare here */
    --dt-row-selected: 32, 42, 39;
    --dt-row-selected-text: 231, 236, 234;
    --dt-row-selected-link: 231, 236, 234;
}

/* the accents, lifted for contrast on the dark canvas — the default is the
   site's dark --brand, the others are lifted the same way */
:root[data-o-mode="dark"]:not([data-o-theme="indigo"]):not([data-o-theme="terracotta"]):not([data-o-theme="olive"]) {
    --o-accent: #3f9284;
    --o-accent-strong: #4aa393;
    --o-accent-dark: #a5d6ca;
    --o-accent-rgb: 63, 146, 132;
}
:root[data-o-mode="dark"][data-o-theme="indigo"] {
    --o-accent: #8690d0;
    --o-accent-strong: #98a1db;
    --o-accent-dark: #c3c9ef;
    --o-accent-rgb: 134, 144, 208;
}
:root[data-o-mode="dark"][data-o-theme="terracotta"] {
    --o-accent: #cf8a6e;
    --o-accent-strong: #d99b82;
    --o-accent-dark: #f0c7b5;
    --o-accent-rgb: 207, 138, 110;
}
:root[data-o-mode="dark"][data-o-theme="olive"] {
    --o-accent: #9cb073;
    --o-accent-strong: #acbf86;
    --o-accent-dark: #d0dcb6;
    --o-accent-rgb: 156, 176, 115;
}

/* --- Base --- */

body {
    /* the ground with the site's soft colour washes at the top, fading out
       well before the content gets dense */
    background-color: var(--o-canvas);
    background-image:
        radial-gradient(55% 45% at 5% 0%, var(--o-wash-1), transparent 70%),
        radial-gradient(45% 40% at 95% 4%, var(--o-wash-2), transparent 70%),
        radial-gradient(40% 35% at 55% -8%, var(--o-wash-3), transparent 70%);
    background-repeat: no-repeat;
    background-size: 100% 1100px;
    color: var(--o-ink);
    font-size: 0.9375rem;
    line-height: 1.5;
    /* Tabler's base template switches Inter's alternate glyphs on; the site
       shows the face as it comes */
    font-feature-settings: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--o-ink);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

/* the site's focus ring, for the keyboard */
:focus-visible {
    outline: 2px solid var(--o-accent);
    outline-offset: 2px;
}

/* --- Top bar --- */

.o-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: var(--o-navbar-h);
    padding: 0 1rem;
    background: var(--o-navbar-bg);
    color: var(--o-navbar-ink);
    border-bottom: 1px solid var(--o-line-soft);
}

.o-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: var(--o-radius-control);
    background: transparent;
    color: var(--o-ink-muted);
    font-size: 1rem;
}

.o-burger:hover,
.o-burger[aria-expanded="true"] {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the title of the panel in the brand colour, with a small mark before it */
.o-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.25rem;
    color: var(--o-accent);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.o-brand::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--o-accent);
}

.o-brand:hover {
    color: var(--o-accent-strong);
}

.o-navbar-user {
    margin-left: auto;
}

/* the signed-in admin as a pill */
.o-navbar-user .o-user-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem 0.25rem 0.3rem;
    border: 1px solid var(--o-line-soft);
    border-radius: 999px;
    background: var(--o-surface);
    color: var(--o-ink);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.o-navbar-user .o-user-toggle:hover,
.o-navbar-user .o-user-toggle[aria-expanded="true"] {
    background: var(--o-hover);
    border-color: var(--o-line);
}

.o-navbar-user .avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
    font-size: 0.75rem;
}

/* the strip under the top bar of a superadmin who signs in without the
   second step (layout.html): a soft warning bar inside the page margin, the
   link to the setup as a quiet button */
.o-security-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 16px 24px 0;
    padding: 0.6rem 1rem;
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
    border: 1px solid color-mix(in srgb, var(--o-warn-ink) 18%, transparent);
    border-radius: var(--o-radius);
    font-size: 0.875rem;
}

.o-security-banner-link {
    padding: 0.25rem 0.75rem;
    border: 1px solid color-mix(in srgb, var(--o-warn-ink) 35%, transparent);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
}

.o-security-banner-link:hover {
    background: color-mix(in srgb, var(--o-warn-ink) 10%, transparent);
}

/* --- Apps menu (the burger drop-down) --- */

.o-apps-menu {
    width: 280px;
    margin-top: 0.5rem;
    padding: 0.375rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
}

.o-apps-search {
    margin: 0 0 0.25rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-sm);
    background: var(--o-canvas);
}

.o-apps-search:focus {
    border-color: var(--o-accent);
    background: var(--o-surface);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.o-apps-list {
    max-height: 60vh;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.o-apps-list .nav-item {
    display: block;
}

.o-apps-list .nav-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
    font-size: 0.875rem;
}

.o-apps-list .nav-link:hover {
    background: var(--o-hover);
}

.o-apps-list .nav-link.active {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the upstream macro hides menu icons below lg with a utility class */
.o-apps-list .nav-link-icon {
    display: inline-block !important;
    width: 1.1rem;
    text-align: center;
    color: var(--o-ink-muted);
}

.o-apps-list .nav-link.active .nav-link-icon {
    color: var(--o-accent);
}

/* a group of the menu (DropDown): heading above its entries */
.o-apps-group {
    margin-top: 0.375rem;
    padding-top: 0.375rem;
    border-top: 1px solid var(--o-line-soft);
}

/* the heading is the fold's button (js/apps_menu.js) */
.o-apps-group-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.3rem 0.65rem 0.15rem;
    border: 0;
    border-radius: var(--o-radius-sm, 6px);
    background: none;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--o-ink-faint);
    cursor: pointer;
}

.o-apps-group-label:hover {
    color: var(--o-ink);
}

.o-apps-group-chevron {
    margin-left: auto;
    font-size: 0.625rem;
    transition: transform 0.15s ease;
}

.o-apps-group-open .o-apps-group-chevron {
    transform: rotate(180deg);
}

.o-apps-group-list {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.o-apps-group-open .o-apps-group-list,
.o-apps-searching .o-apps-group-list {
    display: block;
}

/* --- Home: the app tiles --- */

/* a card per app, the icon in a tinted brand circle, lifting on hover */
.o-apps-grid {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 16px;
    margin-top: 0.5rem;
}

.o-app-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.75rem 1rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink);
    font-weight: 500;
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.o-app-tile i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--o-accent-soft);
    color: var(--o-accent);
    font-size: 1.125rem;
}

.o-app-tile:hover {
    transform: translateY(-2px);
    border-color: var(--o-line);
    box-shadow: var(--o-shadow-lift);
    color: var(--o-ink);
}

/* --- Agents screen: a card per built-in agent --- */

.o-agents-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

.o-agent-tile {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 1.5rem 1.375rem;
    text-align: left;
}

.o-agent-tile i {
    margin-bottom: 0.25rem;
}

.o-agent-tile span {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.o-agent-tile small {
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

/* the control panel of a runnable agent's page */
.o-agent-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.o-agent-panel-head h2 {
    margin: 0 0 0.25rem;
}

.o-agent-panel-head h2 i {
    margin-right: 0.4rem;
    color: var(--o-ink-soft);
}

.o-agent-panel-head p {
    margin: 0;
    max-width: 34rem;
    color: var(--o-ink-soft);
}

/* Configure beside Run now, and neither wrapping under the description */
.o-agent-panel-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: none;
}

.o-agent-runs-title {
    margin: 1.75rem 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--o-ink-muted);
}

.o-agent-runs {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.o-agent-runs th {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.o-agent-runs td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--o-line-soft);
    vertical-align: top;
}

.o-run-summary {
    overflow-wrap: anywhere;
}

/* a run whose result breaks down request by request opens on a click */
.o-run-row {
    cursor: pointer;
}

.o-run-row:hover {
    background: var(--o-hover);
}

.o-run-caret {
    margin-right: 0.35rem;
    font-size: 0.65rem;
    color: var(--o-ink-muted);
    transition: transform 0.15s ease;
}

.o-run-row-open .o-run-caret {
    transform: rotate(90deg);
}

.o-run-details td {
    padding: 0.5rem 0.6rem 0.9rem 1.6rem;
    background: var(--o-hover);
}

.o-run-group + .o-run-group {
    margin-top: 0.6rem;
}

.o-run-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.o-run-group-label {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.o-run-group-summary {
    color: var(--o-ink-muted);
    font-size: 0.75rem;
}

.o-run-group-lines {
    margin: 0.15rem 0 0;
    padding-left: 1.1rem;
    color: var(--o-ink-soft);
}

.o-run-group-lines li {
    overflow-wrap: anywhere;
}

/* token usage page */
.o-usage-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.o-usage-card {
    padding: 1rem 1.25rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-sm);
}

.o-usage-card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--o-ink);
    margin-bottom: 0.25rem;
}

.o-usage-card-label {
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}

.o-usage-section-title {
    margin: 1.75rem 0 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--o-ink);
}

.o-usage-chart-container {
    position: relative;
    height: 300px;
    margin: 1rem 0;
}

.o-usage-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-bottom: 2rem;
}

.o-usage-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 2px solid var(--o-line);
    background: var(--o-hover);
    font-weight: 600;
    color: var(--o-ink-soft);
}

.o-usage-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-usage-table .o-num {
    text-align: right;
}

.o-usage-table tbody tr:hover {
    background: var(--o-hover);
}

.o-usage-table code {
    background: var(--o-hover);
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--o-ink-soft);
}

.o-usage-empty {
    padding: 1rem;
    color: var(--o-ink-muted);
    font-style: italic;
}

.o-run-status {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background: var(--o-hover);
    color: var(--o-ink-soft);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}

.o-run-status-succeeded {
    background: var(--o-success-bg);
    color: var(--o-success-ink);
}

.o-run-status-permanently_failed {
    background: var(--o-danger-bg);
    color: var(--o-danger);
}

.o-run-status-running {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

.o-agent-runs-empty {
    padding: 0.75rem 0;
    color: var(--o-ink-muted);
}

/* the empty shell of one agent's page */
.o-agent-shell {
    padding: 3rem 2rem;
    text-align: center;
}

.o-agent-shell i {
    font-size: 2rem;
    color: var(--o-ink-soft);
}

.o-agent-shell h2 {
    margin: 0.75rem 0 0.25rem;
}

.o-agent-shell p {
    margin: 0 auto;
    max-width: 34rem;
    color: var(--o-ink-soft);
}

.o-agent-shell-note {
    margin-top: 1.5rem;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
}

/* --- Page frame --- */

/* the ground shows through: the washes are painted on body */
.page-wrapper {
    background: transparent;
}

.page-wrapper > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

/* the title row stays under the top bar while the page scrolls — the list's
   search box and the record's save buttons live in it — on a translucent
   slice of the ground, so the washes stay visible behind it */
.page-wrapper .page-header {
    position: sticky;
    top: var(--o-navbar-h);
    z-index: 20;
    min-height: var(--o-header-h);
    margin: 0;
    padding: 0.75rem 24px;
    background: color-mix(in srgb, var(--o-canvas) 60%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.page-header > * {
    flex: 1 1 auto;
}

.page-header h1 {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
}

.page-header .breadcrumb {
    margin: 0;
    font-size: 0.8125rem;
}

.page-wrapper .page-body {
    margin: 0;
}

/* the content keeps a margin from the edges and sits in cards */
.page-body .container-fluid {
    padding: 0.5rem 24px 2rem;
}

.page-body .row {
    --tblr-gutter-x: 0;
    margin-left: 0;
    margin-right: 0;
}

/* without this the columns grow with the table instead of scrolling it */
.page-body .row > * {
    min-width: 0;
}

/* --- Control panel --- */

.o-control-panel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.o-cp-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-cp-title {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.o-cp-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

/* the save and discard buttons of a record form, beside the record pager */
.o-record-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* --- Pager --- */

.o-pager {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    white-space: nowrap;
    color: var(--o-ink-muted);
    font-size: 0.875rem;
}

/* only the list's counter is also its page-size control; the record pager's
   counter is a plain number */
#o-cp-pager .o-pager-value {
    cursor: text;
    border-bottom: 1px solid transparent;
}

#o-cp-pager .o-pager-value:hover {
    border-bottom-color: var(--o-line);
}

/* sized on the range it shows, so the bar does not jump while it is edited */
.o-pager-input {
    width: 5.5em;
    padding: 0;
    color: var(--o-ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--o-accent);
    outline: 0;
}

.o-pager button {
    padding: 0.25rem 0.55rem;
}

/* --- Search view --- */

.o-searchview-group {
    display: flex;
    flex: 1 1 320px;
    max-width: 720px;
    border-radius: var(--o-radius-control);
    transition: box-shadow 0.15s;
}

/* the ring goes round the box and its toggler together */
.o-searchview-group:focus-within {
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

/* the toggler is wrapped in a .dropdown, which has to stretch with it */
.o-searchview-group .dropdown {
    display: flex;
}

.o-searchview {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 38px;
    padding: 0.25rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-right: 0;
    border-radius: var(--o-radius-control) 0 0 var(--o-radius-control);
    transition: border-color 0.15s;
}

.o-searchview-group:focus-within .o-searchview,
.o-searchview-group:focus-within .o-searchview-toggler {
    border-color: var(--o-accent);
}

.o-searchview-icon {
    color: var(--o-ink-faint);
}

.o-searchview-input-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 auto;
    min-width: 0;
}

.o-searchview-input {
    flex: 1 1 6rem;
    min-width: 0;
    padding: 0.15rem 0;
    border: 0;
    background: transparent;
    color: var(--o-ink);
    outline: none;
}

.o-searchview-input::placeholder {
    color: var(--o-ink-faint);
}

.o-searchview-toggler {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 0 var(--o-radius-control) var(--o-radius-control) 0;
    color: var(--o-ink-muted);
    transition: border-color 0.15s, background 0.15s;
}

.o-searchview-toggler::after {
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-left: 0.3em solid transparent;
}

.o-searchview-toggler:hover {
    background: var(--o-hover);
}

/* --- Facets --- */

/* the active filters, as pills in the search box: the field's icon, the
   value, a round × */
.o-facets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.o-facet {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    max-width: 22rem;
    padding: 0 0.25rem 0 0.6rem;
    background: var(--o-accent-soft);
    border: 1px solid var(--o-chip-border);
    border-radius: 999px;
    color: var(--o-accent-dark);
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.7;
    overflow: hidden;
}

.o-facet-label {
    display: flex;
    align-items: center;
    color: var(--o-accent);
}

.o-facet-value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.o-facet-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--o-ink-muted);
    font-size: 0.875rem;
    line-height: 1;
}

.o-facet-remove:hover {
    background: var(--o-chip-hover);
    color: var(--o-ink);
}

/* --- Search panel (filters / sort / favorites) --- */

/* .dropdown-menu keeps the panel hidden; Bootstrap adds .show when it opens */
.o-search-panel.show {
    display: flex;
}

.o-search-panel {
    gap: 0;
    min-width: 720px;
    max-width: 92vw;
    padding: 0.375rem 0;
    overflow-x: auto;
}

.o-search-panel-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.5rem 0;
    border-right: 1px solid var(--o-line-soft);
}

.o-search-panel-col:last-child {
    border-right: 0;
}

.o-search-panel-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.15rem 0.75rem 0.4rem;
    color: var(--o-ink-muted);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
}

.o-search-panel-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.875rem;
    border: 0;
    background: transparent;
    color: var(--o-ink);
    text-align: left;
}

.o-search-panel-item:hover {
    background: var(--o-hover);
}

.o-search-panel-item.active {
    color: var(--o-accent);
    font-weight: 600;
}

.o-search-panel-item.active i {
    color: var(--o-accent);
}

.o-search-panel-item i {
    width: 0.9rem;
    color: var(--o-ink-muted);
}

.o-search-panel-form {
    padding: 0.5rem 0.75rem 0.25rem;
}

.o-search-panel-empty {
    padding: 0.3rem 0.75rem;
    color: var(--o-ink-muted);
}

/* the search builder is a DataTables button moved into the Filters column */
#o-cp-filters .dt-buttons {
    display: block;
}

#o-cp-filters .btn {
    justify-content: flex-start;
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-bg: var(--o-hover);
    --tblr-btn-active-border-color: transparent;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    border-radius: 0;
    text-align: left;
}

/* --- Filter dialog: the search builder restyled as a custom filter ---

   The library draws a rotated And/Or tab hanging off the group on inline
   offsets it recomputes per draw, which is what made the control jump around.
   The dialog flattens everything into document flow instead: a modal header,
   a "Match all/any of the following rules:" line, one flat row per rule and a
   Search/Discard footer (rows and labels are decorated by list_view.js). */

.dt-button-collection.o-filter-dialog {
    position: fixed;
    top: 12vh;
    left: 50%;
    transform: translateX(-50%);
    width: min(64rem, 92vw);
    max-width: none;
    padding: 0;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
    overflow: hidden;
}

/* The vendor stylesheet paints every button collection (this dialog, the
   column and export menus) white with dark text, which in dark mode left a
   white sheet with near-invisible text: they take the theme's surface.
   dt.min.css loads after this file, so the selector has to outrank its
   `div.dt-button-collection`, not just repeat it. */
html div.dt-button-collection {
    background-color: var(--o-surface);
    color: var(--o-ink);
}

.o-filter-dialog .dtsb-title,
.o-filter-dialog .dtsb-titleRow,
.o-filter-dialog div.dtsb-criteria,
.o-filter-dialog .dtsb-data,
.o-filter-dialog .dtsb-condition,
.o-filter-dialog .dtsb-value {
    color: var(--o-ink);
}

.o-filter-dialog select option {
    background-color: var(--o-surface);
    color: var(--o-ink);
}

/* the library states its own width/padding with !important on
   `div.dt-button-collection div.dtsb-searchBuilder`, so the override has to
   outrank that selector, not just repeat it */
div.dt-button-collection.o-filter-dialog div.dtsb-searchBuilder {
    width: auto !important;
    margin: 0;
    padding: 0 !important;
}

/* header */

.o-filter-dialog .dtsb-titleRow {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-filter-dialog .dtsb-title {
    margin-right: auto;
    padding: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: left;
}

/* no separate reset control: rules are deleted per row and
   Discard puts the opening state back */
.o-filter-dialog .dtsb-clearAll {
    display: none;
}

.o-filter-dialog div.dtb-popover-close {
    top: 0.8rem;
    right: 1.1rem;
    width: 1.5rem;
    height: 1.5rem;
    border: 0;
    background: none;
    color: var(--o-ink-muted);
    font-size: 1rem;
    line-height: 1.5rem;
}

.o-filter-dialog div.dtb-popover-close:hover {
    color: var(--o-ink);
}

/* body */

.o-filter-dialog div.dtsb-group {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0 !important;
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group {
    width: 100%;
    padding: 1rem 1.25rem;
}

/* the And/Or control, flattened out of its rotated side tab; on the top
   level it reads as "Match all/any of the following rules:" */
.o-filter-dialog div.dtsb-logicContainer {
    position: static !important;
    transform: none !important;
    width: auto !important;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 0;
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer::before {
    content: "Match";
}

.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer::after {
    content: "of the following rules:";
}

/* deleting the whole top-level group is what Discard/facet-× are for */
.o-filter-dialog div.dtsb-searchBuilder > .dtsb-group > .dtsb-logicContainer .dtsb-clearGroup {
    display: none;
}

.o-filter-dialog button.dtsb-logic {
    --tblr-btn-bg: transparent;
    --tblr-btn-color: var(--o-ink);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-color: var(--o-ink);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-bg: var(--o-hover);
    --tblr-btn-active-color: var(--o-ink);
    --tblr-btn-active-border-color: transparent;
    padding: 0 0.25rem;
    font-weight: 600;
}

.o-filter-dialog .dtsb-logic > div::after {
    content: " ▾";
    font-size: 0.7em;
}

/* one flat row per rule */

.o-filter-dialog div.dtsb-criteria {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.o-filter-dialog select.dtsb-data {
    flex: 0 0 32%;
}

.o-filter-dialog select.dtsb-condition {
    flex: 0 0 18%;
}

.o-filter-dialog div.dtsb-inputCont {
    display: flex;
    flex: 1 1 auto;
    gap: 0.5rem;
    min-width: 0;
}

.o-filter-dialog .dtsb-inputCont .dtsb-value {
    flex: 1 1 auto;
    min-width: 0;
}

/* a nested branch is framed by its indent line */
.o-filter-dialog div.dtsb-group div.dtsb-group {
    align-self: stretch;
    padding: 0.25rem 0 0.25rem 0.75rem;
    border-left: 2px solid var(--o-line);
}

/* the library's indent control only shows up on rows with a previous
   sibling; the decorator's sitemap button replaces it on every row */
.o-filter-dialog .dtsb-buttonContainer .dtsb-right {
    display: none;
}

/* fields: bottom border only */
.o-filter-dialog .dtsb-data,
.o-filter-dialog .dtsb-condition,
.o-filter-dialog .dtsb-value {
    border: 0;
    border-bottom: 1px solid var(--o-line);
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    font-size: 0.8125rem;
}

.o-filter-dialog .dtsb-data:focus,
.o-filter-dialog .dtsb-condition:focus,
.o-filter-dialog .dtsb-value:focus {
    border-bottom-color: var(--o-accent);
    box-shadow: none;
}

/* the indent and delete controls as quiet icon buttons */
.o-filter-dialog div.dtsb-buttonContainer {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-button {
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    color: var(--o-ink-muted) !important;
    box-shadow: none;
}

.o-filter-dialog .dtsb-buttonContainer svg {
    width: 1rem;
    height: 1rem;
}

.o-filter-dialog .dtsb-buttonContainer .fa-solid {
    font-size: 0.9375rem;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-button:hover {
    color: var(--o-ink) !important;
}

/* the delete control is red, not only on hover */
.o-filter-dialog .dtsb-buttonContainer .dtsb-delete {
    color: var(--o-danger) !important;
}

.o-filter-dialog .dtsb-buttonContainer .dtsb-delete:hover {
    color: var(--o-danger-strong) !important;
}

/* "New Rule", styled as a link */
.o-filter-dialog button.dtsb-add {
    padding: 0;
    border: 0;
    background: none;
    color: var(--o-accent);
    font-weight: 500;
    text-decoration: none;
}

.o-filter-dialog button.dtsb-add:hover {
    text-decoration: underline;
}

/* footer, appended by list_view.js */
.o-filter-dialog .o-filter-footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.9rem 1.25rem;
    border-top: 1px solid var(--o-line-soft);
}

/* Everything behind the dialog is out of reach while it is open. The library's
   own rule carries the same specificity and is loaded later, so this one needs
   the extra element to win. */
body div.dt-button-background {
    z-index: 2001;
    background: var(--o-overlay);
}

/* --- List --- */

/* the table lives in a card: the header row is the card's top band and the
   gear sits in its corner. The optional-columns menu drops out of the card,
   so the corners are rounded on the first and last cells instead of clipped
   on the box. */
.o-list-view {
    position: relative;
    /* .row-deck makes the column a flex box: without this the list grows with
       the table instead of scrolling it */
    width: 100%;
    min-width: 0;
    margin-top: 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.table {
    --tblr-table-cell-padding-y: 0.5rem;
    --tblr-table-cell-padding-x: 0.6rem;
    --tblr-table-border-color: var(--o-line-soft);
    margin-bottom: 0;
    font-size: 0.875rem;
}

.table > thead > tr > th {
    background: var(--o-header-bg);
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

#dt > thead > tr > th:first-child {
    border-top-left-radius: calc(var(--o-radius-lg) - 1px);
}

#dt > thead > tr > th:last-child {
    border-top-right-radius: calc(var(--o-radius-lg) - 1px);
}

.table > tbody > tr > td {
    border-bottom: 1px solid var(--o-line-soft);
}

#dt > tbody > tr:last-child > td {
    border-bottom: 0;
}

#dt > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: calc(var(--o-radius-lg) - 1px);
}

#dt > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: calc(var(--o-radius-lg) - 1px);
}

/* the proportional widths list_view.js sets (fitColumnWidths) need the cells
   to truncate instead of forcing their column open */
#dt th,
#dt td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the checkbox and the star hold no text to shorten; the dots would show
   beside them whenever their columns are squeezed */
#dt > thead > tr > th:nth-child(-n+2),
#dt > tbody > tr > td:nth-child(-n+2) {
    text-overflow: clip;
}

/* the whole row opens the record (list_view.js) */
#dt tbody tr:not(.group-header) {
    cursor: pointer;
}

#dt tbody tr:not(.group-header):not(.selected):hover > td {
    background: var(--o-hover);
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* the favorite star of a row (render_favorite.js), set for one admin only */
.o-star {
    padding: 0 0.2rem;
    background: none;
    border: 0;
    color: var(--o-line);
    line-height: 1;
}

.o-star:hover {
    color: var(--o-gold);
}

.o-star.o-star-on {
    color: var(--o-gold);
}

/* the cell that opens the record (list_view.js) */
.o-record-link {
    color: var(--o-ink);
    font-weight: 500;
    text-decoration: none;
}

.o-record-link:hover {
    color: var(--o-accent);
    text-decoration: underline;
}

/* a cell without a value (render_favorite.js, displays/_null.html) */
.o-null {
    color: var(--o-ink-faint);
}

/* group headers injected by the Group By menu */
tr.group-header td {
    background: var(--o-accent-soft);
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-accent-dark);
    font-weight: 600;
    cursor: pointer;
}

tr.group-header .group-count {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    background: var(--o-accent-soft-strong);
    border-radius: 999px;
    color: var(--o-accent-dark);
    font-size: 0.6875rem;
}

/* --- Optional columns (the gear at the end of the header row) --- */

.o-optional-columns {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}

.o-optional-columns-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--o-header-bg);
    border: 0;
    border-left: 1px solid var(--o-line-soft);
    border-bottom: 1px solid var(--o-line-soft);
    border-top-right-radius: calc(var(--o-radius-lg) - 1px);
    color: var(--o-ink-muted);
}

.o-optional-columns-toggle:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-optional-columns-menu {
    max-height: 60vh;
    overflow-y: auto;
}

.o-optional-column {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.35rem 0.65rem;
    border-radius: var(--o-radius-sm);
    white-space: nowrap;
}

.o-optional-column:hover {
    background: var(--o-hover);
}

.o-optional-column .form-check-input {
    margin: 0;
}

/* --- Cards (detail, create, edit) --- */

.page-body .card {
    margin-top: 0.5rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.card-header {
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    background: var(--o-surface);
    border-bottom: 1px solid var(--o-line-soft);
}

.card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.card-body {
    padding: 1.25rem 1.5rem;
}

.card-footer {
    background: var(--o-canvas);
    border-top: 1px solid var(--o-line-soft);
}

/* form fields stay readable on wide screens */
.card-body > .mb-3 {
    max-width: 760px;
}

/* the attribute table of the library's detail page: light lines, the
   header on the tinted ground */
.table-bordered > :not(caption) > * > * {
    border-color: var(--o-line-soft);
}

.table-bordered {
    border-color: var(--o-line-soft);
}

/* --- Record view: the form with its chatter --- */

/* the sheet and the history are two cards side by side on the ground */
.o-record-view {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.o-record-form {
    flex: 1 1 auto;
    min-width: 0;
}

/* the library heads its read-only detail card with "#<id>", and ids are not
   displayed anywhere in the panel; the header's other half — row actions —
   is empty here (the views declare none), so the whole strip goes */
.o-record-form .card-header {
    display: none;
}

/* --- Record form: the button box --- */

/* the row of stat buttons above the sheet, centred over it */
.o-buttonbox {
    max-width: 960px;
    margin: 0.5rem auto 0.875rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* the container js/record_header.js fills — layout-transparent, so its
   buttons line up in the box's own row and share its gap */
#o-stat-buttons {
    display: contents;
}

.o-stat-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-control);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, color 0.15s;
}

.o-stat-button:hover {
    border-color: var(--o-line);
    box-shadow: var(--o-shadow);
    color: var(--o-ink);
    text-decoration: none;
}

.o-stat-button:disabled {
    opacity: 0.6;
    cursor: default;
}

/* a button that is a switch, while it is on (AdminUserView's 2FA) */
.o-stat-button-on,
.o-stat-button-on:hover {
    background: var(--o-success-bg);
    border-color: color-mix(in srgb, var(--o-success-ink) 30%, transparent);
    color: var(--o-success-ink);
}

.o-stat-button-on .o-stat-icon {
    color: var(--o-success-ink);
}

.o-stat-icon {
    color: var(--o-primary, var(--o-accent));
}

.o-stat-value {
    font-weight: 600;
}

/* --- Record form: the sheet --- */

.o-form-sheet {
    max-width: 960px;
    margin: 0 auto 1.5rem;
    padding: 1.5rem 2rem 2rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

/* the name of the record heads the form */
.o-form-title {
    margin: 0 0 1rem;
}

.o-form-title .form-control {
    padding: 0 0 0.15rem;
    border-bottom-color: transparent;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

/* the fields of a page: label beside value, two pairs to a row */
.o-group {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content minmax(0, 1fr);
    align-items: center;
    column-gap: 1.5rem;
    row-gap: 0.65rem;
}

.o-cell-label {
    max-width: 12rem;
    padding-right: 0.25rem;
}

.o-cell-label .form-label {
    margin: 0;
}

.o-cell-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.o-cell-value > .o-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* a block of its own — text, JSON, a list of values — spans the whole sheet */
.o-cell-wide {
    grid-column: 1 / -1;
    margin: 0.6rem 0;
}

.o-cell-wide .form-label {
    margin-bottom: 0.15rem;
}

/* the two halves of "Execute every [2] [days]" size themselves, not the cell */
.o-cell-value > .o-field-agent_interval_number {
    flex: 0 0 4.5rem;
}

.o-cell-value > .o-field-agent_interval_type {
    flex: 0 0 9rem;
}

/* one pair to a row once the sheet has no room for two */
@media (max-width: 1250px) {
    .o-group {
        grid-template-columns: max-content minmax(0, 1fr);
    }
}

/* Inputs: boxes. A field is a box with a border and a faint fill, its
   placeholder saying what goes in (base_views.RecordModelView.__init__), so
   an empty field is seen and the cursor has one place to go; it darkens as
   it is hovered and gets the brand ring as it is edited. */
.o-form-sheet .form-control,
.o-form-sheet .form-select,
.o-form-sheet .select2-container--default .select2-selection--single,
.o-form-sheet .select2-container--default .select2-selection--multiple {
    min-height: 38px;
    height: auto;
    padding: 0.45rem 0.7rem;
    background: var(--o-input-bg);
    border: 1px solid var(--o-input-border);
    border-radius: var(--o-radius-control);
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}

.o-form-sheet .form-control:hover,
.o-form-sheet .form-select:hover,
.o-form-sheet .select2-container--default .select2-selection--single:hover,
.o-form-sheet .select2-container--default .select2-selection--multiple:hover {
    border-color: var(--o-btn-border-hover);
}

.o-form-sheet .form-control:focus,
.o-form-sheet .form-select:focus,
.o-form-sheet .select2-container--default.select2-container--focus
    .select2-selection--single,
.o-form-sheet .select2-container--default.select2-container--open
    .select2-selection--single,
.o-form-sheet .select2-container--default.select2-container--focus
    .select2-selection--multiple {
    background: var(--o-surface);
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.o-form-sheet .form-control::placeholder {
    color: var(--o-ink-faint);
}

/* the hint that is too long for a placeholder stays under the box, small */
.o-form-sheet .form-hint {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--o-ink-muted);
}

.o-form-sheet textarea.form-control {
    min-height: 3rem;
}

/* a picker is as wide as the value it holds —
   not a line stretched to the far side of the cell. More specific than the
   width the notebook forces on a picker built while its page was hidden. */
.o-form-sheet .o-notebook .select2-container {
    width: auto !important;
    min-width: 9rem;
    max-width: 100%;
}

/* except in a block of its own, where the tags fill the width they are given */
.o-form-sheet .o-cell-wide .select2-container {
    width: 100% !important;
}

/* the value, not the widget, is what the field shows: select2 carries its own
   padding and a full-height arrow */
.o-form-sheet .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    padding-left: 0.25rem;
    padding-right: 2.5rem;
    line-height: 1.6;
}

.o-form-sheet .select2-container--default .select2-selection--single
    .select2-selection__arrow {
    height: 26px;
}

/* the panel writes its numbers itself — the spinners only take up room */
.o-form-sheet input[type="number"] {
    -moz-appearance: textfield;
}

.o-form-sheet input[type="number"]::-webkit-outer-spin-button,
.o-form-sheet input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.o-form-sheet .form-check {
    margin: 0;
}

/* a JSON column is edited as code (views.py), so the widget shows the editor
   and none of its own chrome */
.o-form-sheet .jsoneditor-menu,
.o-form-sheet .jsoneditor-statusbar {
    display: none;
}

.o-form-sheet .jsoneditor-outer.has-main-menu-bar {
    margin-top: 0;
    padding-top: 0;
}

.o-form-sheet .jsoneditor {
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
}

.o-form-sheet .ace_editor,
.o-form-sheet .ace-jsoneditor {
    font-size: 12px;
}

.o-form-sheet .ace-jsoneditor .ace_gutter {
    background: var(--o-header-bg);
    color: var(--o-ink-muted);
}

.o-form-sheet .ace-jsoneditor .ace_marker-layer .ace_active-line,
.o-form-sheet .ace-jsoneditor .ace_gutter-active-line {
    background: var(--o-hover);
}

.o-cp-crumb {
    color: var(--o-ink-muted);
    font-size: 1.375rem;
    font-weight: 500;
    letter-spacing: -0.015em;
    text-decoration: none;
}

.o-cp-crumb:hover {
    color: var(--o-ink);
}

.o-cp-crumb-sep {
    color: var(--o-ink-faint);
    font-size: 1.125rem;
}

/* save and discard, the only two things a form can do — and only while there
   is something to save (js/record_actions.js) */
.o-record-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--o-surface);
    border: 1px solid var(--o-btn-border);
    border-radius: var(--o-radius-control);
    color: var(--o-ink);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.o-record-action:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-record-action-save {
    background: var(--o-accent);
    border-color: var(--o-accent);
    color: var(--o-on-accent);
}

.o-record-action-save:hover {
    background: var(--o-accent-strong);
    border-color: var(--o-accent-strong);
    color: var(--o-on-accent);
}

/* --- Domain editor: the rules of a saved search --- */

.o-domain {
    max-width: 900px;
    padding: 0.5rem 0.75rem;
    background: var(--o-canvas);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-control);
}

.o-domain-node .o-domain-node {
    margin: 0.35rem 0;
    padding: 0.4rem 0.6rem;
    background: var(--o-surface);
    border-left: 2px solid var(--o-line);
}

.o-domain-connector {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--o-ink-soft);
}

.o-domain-rules {
    margin: 0.35rem 0;
}

.o-domain-rule {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
}

.o-domain-input {
    height: 30px;
    padding: 0.2rem 0.4rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
}

.o-domain-field {
    flex: 0 1 15rem;
}

.o-domain-condition {
    flex: 0 1 11rem;
}

.o-domain-value {
    flex: 1 1 10rem;
    min-width: 0;
}

.o-domain-logic {
    height: 26px;
    padding: 0 0.25rem;
    font-weight: 600;
}

.o-domain-controls {
    display: flex;
    margin-left: auto;
}

.o-domain-button {
    padding: 0 0.35rem;
    background: none;
    border: 0;
    color: var(--o-ink-muted);
}

.o-domain-button:hover {
    color: var(--o-ink);
}

.o-domain-remove:hover {
    color: var(--o-danger);
}

.o-domain-add {
    padding: 0;
    background: none;
    border: 0;
    color: var(--o-accent);
}

.o-domain-empty {
    padding: 0.2rem 0;
    color: var(--o-ink-muted);
}

/* --- Notebook: the pages of a form --- */

/* the site's underline tabs */
.o-notebook-headers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0 1.25rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-notebook-tab {
    margin-bottom: -1px;
    padding: 0.6rem 0.875rem;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--o-ink-muted);
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
}

.o-notebook-tab:hover {
    color: var(--o-ink);
}

.o-notebook-tab.active {
    border-bottom-color: var(--o-accent);
    color: var(--o-accent-dark);
    font-weight: 600;
}

/* a tab that is a link to another page (settings.html) */
.o-notebook-tab-link {
    display: inline-block;
    text-decoration: none;
}

.o-notebook-tab-link:hover {
    text-decoration: none;
}

.o-notebook-tab-link i {
    font-size: 0.7em;
    margin-left: 0.25rem;
    opacity: 0.6;
}

.o-notebook-page {
    display: none;
    padding: 1rem 1.25rem;
}

.o-notebook-page.active {
    display: block;
}

/* on a record form the notebook is the sheet itself, which carries the padding */
.o-form-sheet .o-notebook-headers {
    padding: 0;
}

.o-form-sheet .o-notebook-page {
    padding: 1.25rem 0 0;
}

/* select2 sizes itself when it is initialised, and a field on a page that is
   not open then has no width to measure */
.o-notebook .select2-container {
    width: 100% !important;
}

/* the history grows with every change, so it is a card of its own height:
   pinned under the page header, never taller than the screen, with the
   thread scrolling inside instead of the whole page */
.o-chatter {
    flex: 0 0 380px;
    align-self: flex-start;
    position: sticky;
    top: calc(var(--o-navbar-h) + var(--o-header-h) + 8px);
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--o-navbar-h) - var(--o-header-h) - 32px);
    margin-top: 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    overflow: hidden;
}

.o-chatter-thread {
    flex: 1 1 auto;
    overflow-y: auto;
}

/* the public-usage counters under the form sheet: tiles aligned with the
   sheet, the Activity button opening the chart dialog at the end */
.o-stats-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    max-width: 960px;
    margin: -1rem auto 2rem;
}

/* the same strip beside the search box of the opportunity list: part of the
   control panel's own flex flow, not the record page's sheet column */
.o-control-panel .o-stats-strip {
    max-width: none;
    margin: 0;
}

.o-stats-tile {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.85rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-control);
    box-shadow: var(--o-shadow-sm);
    color: var(--o-ink-soft);
    font-size: 0.875rem;
}

/* a tile that is a link (the user card's favorites and subscriptions open
   their lists filtered to the account) reads like the stat buttons do */
a.o-stats-tile {
    text-decoration: none;
}

a.o-stats-tile:hover {
    border-color: var(--o-line);
    box-shadow: var(--o-shadow);
    color: var(--o-ink);
    text-decoration: none;
}

/* the statistics page the strip's chart buttons switch to: a sheet-styled
   card in place of the record view */
.o-stats-page {
    max-width: 1100px;
    margin: 0.5rem auto 2rem;
    padding: 1.5rem 2rem 2rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.o-stats-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.o-stats-tabs {
    display: flex;
    gap: 0.25rem;
}

.o-stats-tab {
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    padding: 0.4rem 0.75rem;
    color: var(--o-ink-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.o-stats-tab:hover {
    color: var(--o-ink);
}

.o-stats-tab.active {
    color: var(--o-accent);
    border-bottom-color: var(--o-accent);
}

.o-stats-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
}

.o-stats-range {
    padding: 0.35rem 0.6rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
    font-size: 0.875rem;
}

.o-stats-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--o-ink-muted);
}

.o-stats-canvas {
    position: relative;
    height: 440px;
}

.o-chatter-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.625rem;
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-ink);
    font-weight: 600;
}

.o-chatter-day {
    margin: 1rem 0 0.5rem;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    text-align: center;
}

.o-chatter-entry {
    display: flex;
    gap: 0.6rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--o-line-soft);
}

.o-chatter-avatar {
    flex: 0 0 28px;
    height: 28px;
    background: var(--o-accent-soft);
    border-radius: 50%;
    color: var(--o-accent-dark);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}

.o-chatter-body {
    min-width: 0;
}

.o-chatter-meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.o-chatter-author {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.o-chatter-time {
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    white-space: nowrap;
}

.o-chatter-action {
    color: var(--o-ink-soft);
}

.o-chatter-changes {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
}

.o-chatter-changes li {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    overflow-wrap: anywhere;
}

.o-chatter-field {
    margin-right: 0.35rem;
    color: var(--o-ink-muted);
}

.o-chatter-old {
    color: var(--o-ink-muted);
    text-decoration: line-through;
}

.o-chatter-arrow {
    margin: 0 0.25rem;
    color: var(--o-ink-muted);
}

.o-chatter-new {
    color: var(--o-ink);
    font-weight: 500;
}

.o-chatter-empty {
    padding-top: 0.75rem;
    color: var(--o-ink-muted);
}

/* the chatter is a column only while there is room for one */
@media (max-width: 1100px) {
    .o-record-view {
        flex-direction: column;
        min-height: 0;
    }

    .o-chatter {
        flex: 1 1 auto;
        position: static;
        height: auto;
        max-height: 70vh;
        margin-top: 0;
    }
}

/* --- Settings screen --- */

/* the sections and the open one's pages share one card, the sidebar on the
   tinted ground of the table headers */
.o-settings {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - var(--o-navbar-h) - var(--o-header-h) - 3rem);
    margin-top: 0.5rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
    overflow: hidden;
}

.o-settings-sidebar {
    flex: 0 0 232px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.75rem 0.5rem;
    border-right: 1px solid var(--o-line-soft);
    background: var(--o-header-bg);
}

.o-settings-tab {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    background: none;
    border: 0;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink-soft);
    font-weight: 500;
    text-align: left;
    transition: background 0.15s, color 0.15s;
}

.o-settings-tab i {
    width: 1rem;
    color: var(--o-ink-muted);
    text-align: center;
}

.o-settings-tab:hover {
    background: var(--o-hover);
    color: var(--o-ink);
}

.o-settings-tab.active {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
    font-weight: 600;
}

.o-settings-tab.active i {
    color: var(--o-accent);
}

.o-settings-pages {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 1.5rem;
}

.o-settings-page {
    display: none;
}

.o-settings-page.active {
    display: block;
}

/* a section with more than one tab holds a notebook, the same one a record
   form uses — it spans the pane instead of sitting inside its padding */
.o-settings-page .o-notebook-headers {
    margin: -1.25rem -1.5rem 0;
    padding: 0 1.5rem;
}

.o-settings-page .o-notebook-page {
    padding: 1rem 0 0;
}

/* the group title is a band across the pane, as on a record form */
.o-settings-group-title {
    margin: 0 -1.5rem 1rem;
    padding: 0.5rem 1.5rem;
    background: var(--o-header-bg);
    border-top: 1px solid var(--o-line-soft);
    border-bottom: 1px solid var(--o-line-soft);
    font-size: 0.875rem;
    font-weight: 600;
}

.o-settings-page > .o-settings-group-title:first-child,
.o-notebook-page > .o-settings-group-title:first-child {
    margin-top: -1.25rem;
    border-top: 0;
}

/* two columns of settings while the pane is wide enough for them */
.o-settings-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem 2.5rem;
    margin-bottom: 1.75rem;
    max-width: 1100px;
}

.o-setting-label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--o-ink-soft);
    font-weight: 600;
}

.o-setting-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-setting-check .o-setting-label {
    margin-bottom: 0;
}

.o-setting-help {
    margin-top: 0.25rem;
    color: var(--o-ink-muted);
}

/* an image setting: the stored image beside the input that replaces it */
.o-setting-image {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.o-setting-image-preview {
    width: 32px;
    height: 32px;
    flex: none;
    object-fit: contain;
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
    background: var(--o-paper);
}

.o-setting-image-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* an interval setting: "run every [2] [Days]" on one line */
.o-setting-interval {
    display: flex;
    gap: 0.5rem;
}

.o-setting-interval input {
    width: 6rem;
    flex: none;
}

/* a multi-value setting: the picker fills the cell and grows with its tags,
   instead of the fixed width select2 measures from a hidden notebook page */
.o-setting .select2-container {
    width: 100% !important;
}

.o-setting .select2-container--default .select2-selection--multiple {
    min-height: 36px;
    border-color: var(--o-line);
    border-radius: var(--o-radius-sm);
}

/* a tab that opens a list instead of holding settings */
.o-settings-link {
    max-width: 640px;
    margin-bottom: 1rem;
}

/* the label row: the label, then the marker and the Reset of a setting
   whose value differs from its default */
.o-setting-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.o-setting-head .o-setting-label {
    margin-bottom: 0;
}

.o-setting-marker {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: var(--o-accent);
    cursor: help;
}

.o-setting-reset {
    padding: 0 0.5rem;
    background: none;
    border: 1px solid var(--o-line);
    border-radius: 999px;
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    line-height: 1.25rem;
}

.o-setting-reset:hover {
    border-color: var(--o-accent);
    color: var(--o-accent);
}

/* marked for reset: the field is disabled (js/settings.js) and shown as
   such; the save puts the default back */
.o-setting-reset-pending .o-setting-field,
.o-setting-reset-pending .o-setting-check {
    opacity: 0.45;
    pointer-events: none;
}

.o-setting-reset-pending .o-setting-help {
    opacity: 0.6;
}

/* the Advanced group folds up; the summary is the group title with a
   caret, and the group opens by itself while a value in it is changed */
.o-settings-advanced {
    margin-bottom: 1.75rem;
}

.o-settings-advanced > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.o-settings-advanced > summary::-webkit-details-marker {
    display: none;
}

.o-settings-advanced > summary::before {
    content: "\f054";
    display: inline-block;
    width: 1rem;
    margin-right: 0.25rem;
    font: var(--fa-font-solid);
    font-size: 0.75rem;
    color: var(--o-ink-muted);
    transition: transform 0.15s;
}

.o-settings-advanced[open] > summary::before {
    transform: rotate(90deg);
}

.o-settings-advanced > .o-settings-group {
    margin-bottom: 0;
}

/* the sidebar is a column only while there is room for one */
@media (max-width: 800px) {
    .o-settings {
        flex-direction: column;
        min-height: 0;
    }

    .o-settings-sidebar {
        flex: 1 1 auto;
        flex-direction: row;
        flex-wrap: wrap;
        border-right: 0;
        border-bottom: 1px solid var(--o-line-soft);
    }
}

/* --- Profile dialog (templates/_profile.html) --- */

/* the notebook carries its own indents, so the modal body drops its padding */
.o-profile-body {
    padding: 0;
}

.o-profile-footer {
    justify-content: space-between;
}

/* the light/dark segmented switch of the profile dialog — the same pill
   the public portal's theme picker uses */
.o-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--o-line-soft);
    border-radius: 999px;
    background: var(--o-surface);
}
.o-mode-option {
    border: 0;
    background: none;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.3rem 0.9rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.o-mode-option:hover {
    color: var(--o-ink);
}
.o-mode-option.active {
    background: var(--o-accent);
    color: var(--o-on-accent);
}

.o-profile-group {
    max-width: 30rem;
    margin-bottom: 1.75rem;
}

.o-profile-group:last-child {
    margin-bottom: 0;
}

.o-profile-title {
    margin: 0 0 0.25rem;
    font-size: 0.9375rem;
}

.o-profile-help {
    margin: 0 0 0.75rem;
    color: var(--o-ink-muted);
}

.o-profile form > * + * {
    margin-top: 0.5rem;
}

.o-profile-error {
    color: var(--o-danger);
    font-size: 0.8125rem;
}

.o-profile-2fa-columns {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin: 1rem 0 0.75rem;
}

#o-profile-2fa-qr {
    flex: none;
    padding: 0.4rem;
    background: var(--o-paper);
    border: 1px solid var(--o-line);
    border-radius: var(--o-radius-sm);
}

#o-profile-2fa-qr svg {
    display: block;
    width: 140px;
    height: 140px;
}

#o-profile-2fa-secret {
    overflow-wrap: anywhere;
}

.o-profile-logins {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.o-profile-logins th {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid var(--o-line);
    color: var(--o-ink-soft);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.o-profile-logins td {
    padding: 0.45rem 0.6rem;
    border-bottom: 1px solid var(--o-line-soft);
    vertical-align: top;
}

.o-profile-agent {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Buttons --- */
/* Tabler compiles button colours into each variant, so the neutral look is
   set on .btn and the emphasised one is put back on the variants below:
   the site's buttons, a filled brand primary and an outlined secondary on
   the surface, both on the 10px radius of its controls. */

.btn {
    --tblr-btn-border-radius: var(--o-radius-control);
    --tblr-btn-font-size: 0.875rem;
    --tblr-btn-padding-y: 0.45rem;
    --tblr-btn-padding-x: 0.9rem;
    --tblr-btn-bg: var(--o-surface);
    --tblr-btn-color: var(--o-ink);
    --tblr-btn-border-color: var(--o-btn-border);
    --tblr-btn-hover-bg: var(--o-hover);
    --tblr-btn-hover-color: var(--o-ink);
    --tblr-btn-hover-border-color: var(--o-btn-border-hover);
    --tblr-btn-active-bg: var(--o-accent-soft);
    --tblr-btn-active-color: var(--o-accent-dark);
    --tblr-btn-active-border-color: var(--o-btn-border-hover);
    box-shadow: none;
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.btn-primary,
.btn-success {
    --tblr-btn-bg: var(--o-accent);
    --tblr-btn-color: var(--o-on-accent);
    --tblr-btn-border-color: var(--o-accent);
    --tblr-btn-hover-bg: var(--o-accent-strong);
    --tblr-btn-hover-color: var(--o-on-accent);
    --tblr-btn-hover-border-color: var(--o-accent-strong);
    --tblr-btn-active-bg: var(--o-accent-strong);
    --tblr-btn-active-color: var(--o-on-accent);
    --tblr-btn-active-border-color: var(--o-accent-strong);
    --tblr-btn-disabled-bg: var(--o-accent-disabled);
    --tblr-btn-disabled-color: var(--o-on-accent);
    --tblr-btn-disabled-border-color: var(--o-accent-disabled);
}

/* a button that is only text (the pencil and the star of a saved search) */
.btn-link {
    --tblr-btn-color: var(--o-accent);
    --tblr-btn-hover-color: var(--o-accent-strong);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-hover-bg: transparent;
}

/* the only other red: confirming an actual delete */
#modal-delete-btn.btn-danger {
    --tblr-btn-bg: var(--o-danger);
    --tblr-btn-color: var(--o-on-accent);
    --tblr-btn-border-color: var(--o-danger);
    --tblr-btn-hover-bg: var(--o-danger-strong);
    --tblr-btn-hover-color: var(--o-on-accent);
    --tblr-btn-hover-border-color: var(--o-danger-strong);
}

/* --- Forms --- */

/* the site's inputs: 10px radius, a light border, the brand ring on focus */
.form-control,
.form-select {
    padding: 0.5rem 0.75rem;
    background-color: var(--o-surface);
    border-color: var(--o-btn-border);
    border-radius: var(--o-radius-control);
    color: var(--o-ink);
    font-size: 0.9375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control-sm,
.form-select-sm {
    padding: 0.35rem 0.6rem;
    border-radius: var(--o-radius-sm);
    font-size: 0.875rem;
}

.form-control::placeholder {
    color: var(--o-ink-faint);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.form-label {
    margin-bottom: 0.375rem;
    color: var(--o-ink-soft);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Tabler rounds a checkbox on --tblr-border-radius, which the tokens set to
   the 10px of the inputs — too round for a 20px box */
.form-check-input {
    border-color: var(--o-line);
}

.form-check-input[type="checkbox"] {
    border-radius: 5px;
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--o-accent);
    border-color: var(--o-accent);
}

.form-check-input:focus {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-color: var(--o-btn-border);
    border-radius: var(--o-radius-control);
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--o-accent);
    box-shadow: 0 0 0 3px var(--o-accent-ring);
}

/* The chosen value: select2's own #444 all but vanishes on a dark surface
   and reads as a placeholder. Ink for the value, muted ink for the real
   placeholder and the clear ×, so the two are told apart in both modes.
   The body prefix outranks the vendor stylesheet, which the record form
   links AFTER this one (starlette-admin edit.html head_css) and which
   states these same selectors. */
body .select2-container--default .select2-selection--single
    .select2-selection__rendered {
    color: var(--o-ink);
}

body .select2-container--default .select2-selection--single
    .select2-selection__placeholder {
    color: var(--o-ink-muted);
}

body .select2-container--default .select2-selection--single
    .select2-selection__clear,
body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove {
    color: var(--o-ink-muted);
}

body .select2-container--default .select2-selection--single
    .select2-selection__clear:hover,
body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    color: var(--o-ink);
}

/* the dropdown arrow, drawn as a css-triangle from a grey of its own */
body .select2-container--default .select2-selection--single
    .select2-selection__arrow b {
    border-top-color: var(--o-ink-muted);
}

body .select2-container--default.select2-container--open
    .select2-selection--single .select2-selection__arrow b {
    border-bottom-color: var(--o-ink-muted);
}

/* The dropdown select2 appends to <body>, outside the themed form: left to
   its own stylesheet it stays white with near-white options in dark mode.
   Painted from the tokens it follows both modes and every theme. */
body .select2-container--default .select2-dropdown {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
    color: var(--o-ink);
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    color: var(--o-ink);
}

body .select2-container--default .select2-results__option {
    color: var(--o-ink);
}

/* select2 marks the already-chosen value; its default pale grey vanishes on
   a dark surface */
body .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--o-hover);
    color: var(--o-ink);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the chosen values of a multi-select as pills; the body prefix outranks the
   vendor stylesheet, which the settings screen links after this one */
body .select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 0 0.6rem 0 1.35rem;
    background: var(--o-accent-soft);
    border: 1px solid var(--o-chip-border);
    border-radius: 999px;
    color: var(--o-accent-dark);
    font-size: 0.8125rem;
    font-weight: 500;
}

/* the × the library pins to the left edge of the chip, without its own box */
body .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 0 0 0.5rem;
    border: 0;
    background: transparent;
    color: var(--o-accent);
    font-weight: 600;
}

body .select2-container--default .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--o-accent-dark);
}

/* the boxes themselves: the vendor stylesheet paints them white, which
   glares in dark mode */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
    background: var(--o-surface);
}

body .select2-container--default .select2-selection--multiple .select2-search__field {
    color: var(--o-ink);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--o-accent);
    border-color: var(--o-accent);
}

/* --- Small chrome --- */

.dropdown-menu {
    padding: 0.375rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    background: var(--o-surface);
    box-shadow: var(--o-shadow-lift);
    font-size: 0.875rem;
}

.dropdown-item {
    padding: 0.4rem 0.65rem;
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active,
.dropdown-item:active {
    background: var(--o-hover);
    color: var(--o-ink);
}

/* The export entries of the "With selected" menu are DataTables buttons and
   carry the .btn look — a flex box that centers its content. Laid out as the
   plain menu items around them instead. */
.dropdown-menu .btn.dropdown-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    box-shadow: none;
}

.dropdown-menu .btn.dropdown-item i {
    margin-right: 0.5rem;
}

/* badges are the site's pills: tinted ground, dark text of the same hue */
.badge {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* starlette-admin renders relations and URLs as Tabler's blue badges; in a
   table they are quiet pills — a light border on the surface, brand text */
.badge.bg-blue,
.badge.bg-blue-lt {
    --tblr-badge-color: var(--o-accent-dark);
    background: var(--o-surface) !important;
    border: 1px solid var(--o-line-soft);
    color: var(--o-accent-dark) !important;
    font-weight: 500;
    transition: background 0.15s, border-color 0.15s;
}

a:hover > .badge.bg-blue,
a:hover > .badge.bg-blue-lt {
    background: var(--o-accent-soft) !important;
    border-color: var(--o-chip-border);
}

.badge.bg-blue a,
.badge.bg-blue-lt a {
    color: var(--o-accent-dark);
}

/* the semantic tints of Tabler's light badges, from the tokens */
.badge.bg-green-lt,
.badge.bg-success-lt,
.badge.bg-teal-lt {
    background: var(--o-success-bg) !important;
    color: var(--o-success-ink) !important;
}

.badge.bg-red-lt,
.badge.bg-danger-lt {
    background: var(--o-danger-bg) !important;
    color: var(--o-danger-strong) !important;
}

.badge.bg-yellow-lt,
.badge.bg-orange-lt,
.badge.bg-warning-lt {
    background: var(--o-warn-bg) !important;
    color: var(--o-warn-ink) !important;
}

.badge.bg-secondary-lt,
.badge.bg-gray-lt,
.badge.bg-muted-lt {
    background: var(--o-hover) !important;
    color: var(--o-ink-soft) !important;
}

.page-link {
    border-radius: var(--o-radius-sm);
    color: var(--o-ink);
}

.page-item.active .page-link {
    background-color: var(--o-accent);
    border-color: var(--o-accent);
    color: var(--o-on-accent);
}

/* modals on the site's overlay, with its large radius */
.modal-backdrop {
    --tblr-backdrop-bg: var(--o-overlay);
    --tblr-backdrop-opacity: 1;
}

.modal-content {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
}

.modal-header {
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.modal-title {
    font-size: 1.125rem;
    font-weight: 700;
}

.modal-footer {
    background: var(--o-canvas);
    border-top: 1px solid var(--o-line-soft);
}

/* alerts and the action toasts of the lists: soft tints, no solid bands */
.alert,
.alert-important {
    --tblr-alert-border-color: transparent;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--o-radius);
    box-shadow: none;
}

.alert-danger,
.alert-important.alert-danger {
    --tblr-alert-bg: var(--o-danger-bg);
    --tblr-alert-color: var(--o-danger);
    background: var(--o-danger-bg);
    color: var(--o-danger);
}

.alert-success,
.alert-important.alert-success {
    --tblr-alert-bg: var(--o-success-bg);
    --tblr-alert-color: var(--o-success-ink);
    background: var(--o-success-bg);
    color: var(--o-success-ink);
}

.alert-warning,
.alert-important.alert-warning {
    --tblr-alert-bg: var(--o-warn-bg);
    --tblr-alert-color: var(--o-warn-ink);
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
}

.alert-info,
.alert-important.alert-info {
    --tblr-alert-bg: var(--o-accent-soft);
    --tblr-alert-color: var(--o-accent-dark);
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* the library pairs its "important" alerts with a white close cross */
.alert-important .btn-close-white {
    filter: none;
}

.toast {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    box-shadow: var(--o-shadow-lift);
}

.tooltip-inner {
    border-radius: var(--o-radius-sm);
}

/* --- Login --- */

/* the site's auth card: centred, large radius, a left-aligned title, the
   brand button across the bottom */
.container-tight {
    max-width: 420px;
    margin: 56px auto 80px;
}

/* the login templates leave the page header empty — no empty bar on top of it */
.page-wrapper:has(.container-tight) .page-header {
    display: none;
}

.container-tight .card {
    margin: 0;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow);
}

.container-tight .card-body {
    padding: 32px;
}

/* the templates centre the title; the site's card does not */
.container-tight .card-title {
    margin: 0 0 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left !important;
}

.container-tight .form-label {
    margin-bottom: 0.375rem;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
    font-weight: 500;
}

.container-tight .form-control {
    padding: 10px 12px;
    font-size: 0.9375rem;
}

.container-tight .form-check-label {
    color: var(--o-ink-soft);
}

.container-tight .text-secondary {
    color: var(--o-ink-muted) !important;
    font-size: 0.875rem;
}

.container-tight .form-footer {
    margin-top: 1.5rem;
}

.container-tight .btn-primary {
    padding: 0.7rem 1rem;
    font-size: 0.9375rem;
}

/* --- Error dialog: the blocking modal of js/error_dialog.js --- */

.o-error-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--o-overlay);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 16px 16px;
}

.o-error-dialog {
    background: var(--o-surface);
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius-lg);
    box-shadow: var(--o-shadow-lift);
    width: 100%;
    max-width: 540px;
    max-height: 75vh;
    display: flex;
    flex-direction: column;
}

.o-error-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--o-line-soft);
    color: var(--o-danger);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.o-error-close {
    margin-left: auto;
    border: none;
    background: none;
    padding: 2px 6px;
    color: var(--o-ink-muted);
    font-size: 16px;
    cursor: pointer;
}

.o-error-close:hover {
    color: var(--o-ink);
}

.o-error-body {
    padding: 16px 20px;
    overflow-y: auto;
    color: var(--o-ink);
}

.o-error-body p {
    margin: 0 0 6px;
}

.o-error-body p:last-child {
    margin-bottom: 0;
}

.o-error-footer {
    padding: 12px 20px;
    border-top: 1px solid var(--o-line-soft);
    background: var(--o-canvas);
    border-radius: 0 0 var(--o-radius-lg) var(--o-radius-lg);
    display: flex;
    justify-content: flex-end;
}

.o-error-ok {
    border: none;
    border-radius: var(--o-radius-control);
    background: var(--o-accent);
    color: var(--o-on-accent);
    padding: 8px 22px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.o-error-ok:hover {
    background: var(--o-accent-strong);
}

/* the two-factor setup a superadmin runs for someone, in the same frame
   (js/record_header.js showTwoFactor) */
.o-two-factor-qr {
    width: 220px;
    margin: 10px auto;
    padding: 12px;
    /* a QR code is read dark on light, whatever the theme */
    background: var(--o-paper);
    border-radius: var(--o-radius-sm);
}

.o-two-factor-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.o-two-factor-form input {
    max-width: 12rem;
    margin: 6px 0;
    letter-spacing: 0.15em;
}

.o-two-factor-form .o-error-footer {
    gap: 8px;
}

/* --- The City Illustrations gallery (illustration_gallery.html) --- */

.o-gallery-lead {
    max-width: 44rem;
    color: var(--o-ink-soft);
}

.o-gallery-waiting {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: var(--o-warn-bg);
    color: var(--o-warn-ink);
    border-radius: var(--o-radius);
}

.o-gallery-waiting-city {
    white-space: nowrap;
}

.o-gallery-muted {
    font-size: 0.8125rem;
    color: var(--o-ink-muted);
}

.o-gallery-country {
    margin: 1.75rem 0 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--o-line);
}

.o-gallery-city {
    margin: 0.75rem 0 1.25rem;
}

.o-gallery-city-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.o-gallery-city-name {
    font-weight: 600;
    margin-right: 0.5rem;
}

.o-gallery-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.o-gallery-tile {
    margin: 0;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    overflow: hidden;
    background: var(--o-surface);
}

/* the card colour the drawings are made for: the wash reads wrong on white */
.o-gallery-tile img,
.o-gallery-tile-blank {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--o-illustration-bg);
}

.o-gallery-tile-blank {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    color: var(--o-ink-muted);
    font-size: 0.8125rem;
}

.o-gallery-tile-blank i {
    font-size: 1.5rem;
}

.o-gallery-tile figcaption {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 2.25rem 0.5rem 0.6rem;
    font-size: 0.8125rem;
}

.o-gallery-variant {
    font-weight: 600;
    color: var(--o-ink-soft);
}

.o-gallery-landmarks {
    color: var(--o-ink);
}

.o-gallery-tile figcaption form {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
}

.o-gallery-delete {
    padding: 0.15rem 0.4rem;
    color: var(--o-ink-muted);
}

.o-gallery-delete:hover {
    color: var(--o-danger);
}

.o-gallery-empty {
    color: var(--o-ink-soft);
}

/* the upload forms of the gallery: one at the top for any city, one per city */
.o-gallery-upload {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.75rem 1rem;
    margin: 1rem 0 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--o-hover);
    border-radius: var(--o-radius);
}

.o-gallery-upload label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}

.o-gallery-upload .form-control,
.o-gallery-upload .form-select {
    min-width: 12rem;
}

.o-gallery-city-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.o-gallery-add {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.o-gallery-add input[type="file"] {
    max-width: 14rem;
    font-size: 0.8125rem;
}

.o-gallery-badge {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.5rem;
    font-size: 0.6875rem;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
}

/* --- The Picture field of an opportunity (forms/illustration_picker.html) --- */

.o-picker-status {
    margin-bottom: 0.5rem;
}

.o-picker-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 0.75rem;
}

.o-picker-tile {
    position: relative;
    display: block;
    margin: 0;
    border: 2px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    overflow: hidden;
    background: var(--o-surface);
    cursor: pointer;
}

.o-picker-tile.selected {
    border-color: var(--o-accent-strong);
    box-shadow: 0 0 0 2px var(--o-accent-soft);
}

.o-picker-tile-slot {
    cursor: default;
    border-style: dashed;
}

.o-picker-tile input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* the card colour the drawings are made for, as in the gallery */
.o-picker-picture {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--o-illustration-bg);
    color: var(--o-ink-muted);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.25rem;
}

.o-picker-picture img {
    display: block;
    width: 100%;
    height: 100%;
}

.o-picker-picture-auto i,
.o-picker-picture-empty i {
    font-size: 1.5rem;
}

.o-picker-caption {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.4rem 0.5rem;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.o-illustration-thumb {
    display: block;
    width: 132px;
    height: 132px;
    border-radius: var(--o-radius);
    background: var(--o-illustration-bg);
}

/* the pending-runs banner and the per-city state of the gallery */
.o-gallery-runs {
    margin: 1rem 0 0;
    padding: 0.6rem 1rem;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark);
    border-radius: var(--o-radius);
}

.o-gallery-state {
    display: inline-block;
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    font-size: 0.75rem;
    line-height: 1.5;
    border-radius: 999px;
    background: var(--o-hover);
    color: var(--o-ink-soft);
}

.o-gallery-tile-empty .o-gallery-tile-blank form {
    position: static;
    margin-top: 0.35rem;
}

/* --- The AI connector (mcp_connections.html) --- */

.o-mcp-heading {
    margin: 2rem 0 0.5rem;
    padding-bottom: 0.25rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--o-line-soft);
}

.o-mcp-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1.25rem;
    margin: 0.75rem 0 1rem;
    font-size: 0.875rem;
}

.o-mcp-facts dt {
    color: var(--o-ink-soft);
}

.o-mcp-facts dd {
    margin: 0;
    word-break: break-all;
}

.o-mcp-alert {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--o-line-soft);
    border-radius: var(--o-radius);
    background: var(--o-hover);
    font-size: 0.875rem;
}

.o-mcp-alert p {
    margin: 0 0 0.5rem;
}

.o-mcp-alert p:last-child {
    margin-bottom: 0;
}

.o-mcp-alert-error {
    background: var(--o-danger-bg);
    border-color: transparent;
    color: var(--o-danger);
}

.o-mcp-alert-key {
    background: var(--o-warn-bg);
    border-color: transparent;
    color: var(--o-warn-ink);
}

/* the one time a new access key is on screen: selectable in one go */
.o-mcp-key {
    display: block;
    padding: 0.5rem 0.75rem;
    background: var(--o-surface);
    border: 1px solid var(--o-line);
    border-radius: 6px;
    font-size: 0.8125rem;
    word-break: break-all;
    user-select: all;
}

/* Settings / Technical / API Keys: the keys of one admin (api_keys.html) */
.o-api-key-holder {
    margin: 0.75rem 0 1.25rem;
}

.o-api-key-holder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    font-size: 0.875rem;
}

.o-api-key-dead {
    color: var(--o-danger);
}

.o-mcp-key-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1rem 0 0.5rem;
}

.o-mcp-key-form label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8125rem;
    color: var(--o-ink-soft);
}


/* --- Service KA additions: notes in the chatter --- */
.o-chatter-composer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--o-line-soft, #e6ece9);
  margin-bottom: 8px;
}
.o-chatter-composer textarea {
  resize: vertical;
  font-size: 13px;
}
.o-chatter-composer button {
  align-self: flex-end;
}
.o-chatter-note {
  white-space: pre-wrap;
  color: var(--o-ink, #1a1f1d);
  background: var(--o-canvas, #f6f9f8);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
  font-size: 13px;
}


/* --- Service KA additions: the pipeline --- */
.o-stagebar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0 0 12px;
}
.o-stage {
  border: 1px solid var(--o-line, #d6deda);
  background: var(--o-surface, #fff);
  color: var(--o-ink-soft, #4b5551);
  padding: 7px 14px 7px 18px;
  font-size: 13px;
  font-weight: 500;
  position: relative;
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.o-stage:first-child { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%); padding-left: 14px; border-radius: 6px 0 0 6px; }
.o-stage:last-child { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%); border-radius: 0 6px 6px 0; }
.o-stage:hover { background: var(--o-canvas, #f6f9f8); color: var(--o-ink, #1a1f1d); }
.o-stage-current { background: var(--o-accent, #2c6e63); border-color: var(--o-accent, #2c6e63); color: #fff; }
.o-stage-current.o-stage-lost { background: #b3423a; border-color: #b3423a; }
.o-stagebar-busy .o-stage { opacity: 0.6; pointer-events: none; }
.o-ribbon {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 8px; font-weight: 600; font-size: 13px; margin-bottom: 12px;
}
.o-ribbon-won { background: rgba(30, 107, 76, 0.14); color: #2f9a6e; }
.o-ribbon-lost { background: rgba(179, 66, 58, 0.14); color: #d2645b; }

.o-board {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px 0 16px;
  min-height: calc(100vh - 160px);
}
.o-board-column {
  flex: 0 0 290px;
  background: var(--o-canvas, #f6f9f8);
  border: 1px solid var(--o-line-soft, #e6ece9);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 170px);
}
.o-board-over { outline: 2px dashed var(--o-accent, #2c6e63); }
.o-board-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; border-bottom: 1px solid var(--o-line-soft, #e6ece9);
  font-weight: 600; font-size: 14px;
}
.o-board-count { background: var(--o-surface, #fff); color: var(--o-ink, #1a1f1d); border: 1px solid var(--o-line-soft, #e6ece9); border-radius: 999px; padding: 0 8px; font-size: 12px; }
.o-board-revenue { margin-left: auto; font-size: 12px; color: var(--o-ink-soft, #4b5551); font-weight: 500; }
.o-board-won .o-board-head { color: #1e6b4c; }
.o-board-lost .o-board-head { color: #a23a32; }
.o-board-folded { flex-basis: 48px; }
.o-board-folded .o-board-head { writing-mode: vertical-rl; transform: rotate(180deg); border-bottom: 0; border-left: 1px solid var(--o-line-soft, #e6ece9); }
.o-board-folded .o-board-cards { display: none; }
.o-board-folded .o-board-revenue { display: none; }
.o-board-unfold { border: 0; background: none; color: inherit; cursor: pointer; }
.o-board-cards { padding: 10px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }
.o-card {
  background: var(--o-surface, #fff); color: var(--o-ink, #1a1f1d); border: 1px solid var(--o-line-soft, #e6ece9); border-radius: 10px;
  padding: 10px 12px; cursor: grab; box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.o-card:hover { border-color: var(--o-accent, #2c6e63); }
.o-card-dragging { opacity: 0.5; }
.o-card-overdue { border-left: 3px solid #b3423a; }
.o-card-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.o-card-client { color: var(--o-ink-soft, #4b5551); font-size: 13px; margin-top: 2px; }
.o-card-line { font-size: 12px; color: var(--o-ink-soft, #4b5551); }
.o-card-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--o-ink-soft, #4b5551); flex-wrap: wrap; }
.o-card-stars { color: #e3a008; font-size: 11px; }
.o-star-off { color: #d6deda; }
.o-card-revenue { font-weight: 600; color: var(--o-ink, #1a1f1d); }
.o-card-days { margin-left: auto; }
.o-card-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--o-accent, #2c6e63); color: var(--o-on-accent, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.o-photo-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.o-photo-strip img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; border: 1px solid var(--o-line-soft, #e6ece9); }
.o-ribbon-waiting { background: var(--o-canvas, #f6f9f8); color: var(--o-ink-soft, #4b5551); }
.o-board-waiting { margin-left: 16px; font-size: 13px; color: var(--o-ink-soft, #4b5551); }
.o-board-waiting:hover { color: var(--o-accent, #2c6e63); }

/* --- Service KA additions: sections layout, appearance menu --- */
.o-sections { display: flex; flex-direction: column; gap: 4px; }
.o-section { padding: 10px 0 14px; border-top: 1px solid var(--o-line-soft, #e6ece9); }
.o-section:first-child { border-top: 0; padding-top: 0; }
.o-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--o-ink-soft, #4b5551); margin: 0 0 10px;
}
.o-appearance-menu { min-width: 220px; padding: 8px 0; }
.o-appearance-row { display: flex; gap: 6px; padding: 4px 12px 8px; }
.o-appearance-option {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--o-line, #d6deda);
  background: var(--o-surface, #fff); color: var(--o-ink, #1a1f1d); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.o-appearance-option:hover { border-color: var(--o-accent, #2c6e63); }
.o-appearance-current { outline: 2px solid var(--o-accent, #2c6e63); outline-offset: 1px; }
.o-swatch-petrol { background: #2c6e63; }
.o-swatch-indigo { background: #3f51b5; }
.o-swatch-terracotta { background: #b5543d; }
.o-swatch-olive { background: #6b7d3a; }
.o-card-next { color: var(--o-accent, #2c6e63); }
.o-card-next-overdue { color: #b3423a; font-weight: 600; }
.o-card-mode { color: var(--o-ink-soft, #4b5551); }
.o-config-keys { display: grid; gap: 10px; margin-bottom: 8px; }
.o-config-key label { font-size: 13px; font-weight: 500; display: block; margin-bottom: 2px; }

/* the stages managed on the board (templates/pipeline.html): a column's
   name opens the stage, the last column adds one */
.o-board-name-link { color: inherit; text-decoration: none; }
.o-board-name-link:hover { color: var(--o-accent); text-decoration: underline; }
.o-board-add { flex: 0 0 260px; }
.o-board-add-toggle {
  width: 100%;
  padding: 12px 14px;
  border: 1px dashed var(--o-line, #d5ddda);
  border-radius: 12px;
  background: none;
  color: var(--o-ink-muted);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}
.o-board-add-toggle:hover { color: var(--o-accent); border-color: var(--o-accent); }
.o-board-add-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--o-line-soft, #e6ece9);
  border-radius: 12px;
  background: var(--o-surface);
}
.o-board-add-form[hidden] { display: none; }
.o-board-add-actions { display: flex; gap: 6px; }

/* a client's tags in the list (render.tags): soft chips, six hues */
.o-tag {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background: color-mix(in srgb, var(--o-tag) 16%, var(--o-surface));
  color: color-mix(in srgb, var(--o-tag) 75%, var(--o-ink));
  border: 1px solid color-mix(in srgb, var(--o-tag) 35%, var(--o-surface));
}
.o-tag-0 { --o-tag: #2c6e63; }
.o-tag-1 { --o-tag: #4f5bb3; }
.o-tag-2 { --o-tag: #b5603d; }
.o-tag-3 { --o-tag: #7c8f3e; }
.o-tag-4 { --o-tag: #a3477a; }
.o-tag-5 { --o-tag: #3b7fa8; }

/* the gear menu of a record's control panel (record.html): Delete, away
   from the working buttons of the button box */
.o-cp-gear { margin-left: 0.5rem; }
.o-cp-gear-toggle {
  border: 0;
  background: none;
  padding: 0.25rem 0.4rem;
  border-radius: var(--o-radius-sm);
  color: var(--o-ink-muted);
  font-size: 1rem;
}
.o-cp-gear-toggle:hover { color: var(--o-ink); background: var(--o-hover); }
.o-cp-gear .dropdown-item.o-gear-danger { color: var(--o-danger); }

/* a link among the action buttons (Open in Pipeline-CRM) looks like them */
a.o-stat-button { text-decoration: none; color: inherit; }

/* the card the board was opened on (board_url, #lead-<id>) */
.o-card:target {
  outline: 2px solid var(--o-accent);
  outline-offset: 2px;
}

/* the Settings page (templates/settings.html): a section per area, a card
   per screen with its icon, name and one line on what it is for */
.o-settings { display: flex; flex-direction: column; gap: 28px; padding: 24px 28px 32px; }
.o-settings-title {
  margin: 0 0 12px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--o-ink-faint);
}
.o-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.o-settings-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: var(--o-surface);
  border: 1px solid var(--o-line-soft);
  border-radius: var(--o-radius);
  box-shadow: var(--o-shadow-sm);
  color: var(--o-ink);
  text-decoration: none;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.o-settings-card:hover {
  transform: translateY(-1px);
  border-color: var(--o-line);
  box-shadow: var(--o-shadow-lift);
  color: var(--o-ink);
}
.o-settings-card > i {
  flex: 0 0 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 50%;
  background: var(--o-accent-soft);
  color: var(--o-accent);
}
.o-settings-card-text { display: flex; flex-direction: column; gap: 2px; }
.o-settings-card-label { font-weight: 600; }
.o-settings-card-description { font-size: 0.8125rem; color: var(--o-ink-muted); }

/* the input tokens: a faint fill on the light ground, a lift on the dark */
:root {
    --o-input-bg: color-mix(in srgb, var(--o-canvas) 60%, var(--o-surface));
    --o-input-border: var(--o-line);
}
:root[data-o-mode="dark"] {
    --o-input-bg: #1f2624;
    --o-input-border: #3a4642;
}

/* the picker's text and arrow inside the taller box */
.o-form-sheet .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px;
    padding-left: 0;
}
.o-form-sheet .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
}
.o-form-sheet .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

/* the title of a record: one big box-less line, its placeholder saying what it is */
.o-form-title .form-control,
.o-form-title .form-control:hover,
.o-form-title .form-control:focus {
    padding: 0.1rem 0;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--o-line-soft);
    border-radius: 0;
    box-shadow: none;
}
.o-form-title .form-control:focus { border-bottom-color: var(--o-accent); }

/* a translated text (forms/translated.html): a row per language, the
   language as a chip in front of its box */
.o-translated { display: flex; flex-direction: column; gap: 0.4rem; }
.o-translated-row { display: flex; align-items: flex-start; gap: 0.5rem; }
.o-translated-input { flex: 1 1 auto; min-width: 0; }
.o-lang-chip {
    flex: 0 0 auto;
    margin-top: 0.55rem;
    min-width: 2.1rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: var(--o-accent-soft);
    color: var(--o-accent-dark, var(--o-accent));
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
}
.o-translated-wide .o-translated-row { gap: 0.6rem; }

/* a lead's priority as stars (forms/priority.html, render.priority) */
.o-priority { display: inline-flex; align-items: center; gap: 2px; min-height: 38px; }
.o-priority-star { cursor: pointer; margin: 0; color: var(--o-line); font-size: 1.1rem; line-height: 1; }
.o-priority-star input { position: absolute; opacity: 0; width: 0; height: 0; }
.o-priority-star:hover, .o-priority-star.o-priority-on { color: #e3a008; }
.o-priority:hover .o-priority-star { color: var(--o-line); }
.o-priority:hover .o-priority-star:hover, .o-priority:hover .o-priority-star:has(~ .o-priority-star:hover) { color: #e3a008; }
.o-priority-label { margin-left: 0.5rem; font-size: 0.8125rem; color: var(--o-ink-muted); }
.o-stars { color: #e3a008; font-size: 0.75rem; white-space: nowrap; }
.o-stars .o-star-off { color: var(--o-line); }

/* a photo whose file is gone (lead_record.html) */
.o-photo { position: relative; display: inline-block; }
.o-photo-missing-note { display: none; }
.o-photo-missing img { visibility: hidden; }
.o-photo-missing .o-photo-missing-note {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 4px; border: 1px dashed var(--o-line); border-radius: 8px;
  color: var(--o-ink-faint); font-size: 11px;
}

/* the dialog of an action that takes a form (js/action_dialog.js) */
.o-action-dialog .o-action-text { margin: 0 0 0.75rem; color: var(--o-ink-soft); }
.o-action-dialog .o-action-form .form-label { margin-bottom: 0.25rem; }
.o-action-dialog .o-action-form .mt-3:first-child { margin-top: 0 !important; }
.o-action-dialog .o-error-footer { display: flex; justify-content: flex-end; gap: 0.5rem; }

/* a record's photographs (forms/photos.html): thumbnails with a Remove
   tick, and the tile that adds more */
.o-photos { display: flex; flex-wrap: wrap; gap: 10px; }
.o-photos-item {
  position: relative; width: 132px; height: 99px; margin: 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--o-line-soft); cursor: pointer;
}
.o-photos-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-photos-remove {
  position: absolute; right: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 6px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 11px;
}
.o-photos-remove input { margin: 0; }
.o-photos-item:has(input:checked) { outline: 2px solid var(--o-danger); outline-offset: -2px; }
.o-photos-item:has(input:checked) img { opacity: 0.4; }
.o-photos-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 132px; height: 99px; margin: 0; border: 1px dashed var(--o-line); border-radius: 10px;
  color: var(--o-ink-muted); font-size: 12px; cursor: pointer;
}
.o-photos-add:hover { color: var(--o-accent); border-color: var(--o-accent); }
.o-photos-add input { display: none; }
.o-photos-add:has(input:not([value=""])) { color: var(--o-accent); }