/*
 * Rootstone theme: mid-century modern, after the apiary icon set (core/static/core/icons.svg). A warm cream page
 * with a faint dot grid, paper cards with an ink outline and a hard offset shadow, an ink sidebar, and the set's
 * palette: Ink, Cream, Honey, Mustard, Rust, Teal and Moss. Light and dark modes follow Bootstrap's
 * data-bs-theme on <html> (set by base.html from the top bar's theme menu); sections can set their own.
 * Bootstrap 5.3 is loaded ready-built from its CDN (no Sass build), so this overrides its CSS variables, and the
 * components that hard-code its colours, rather than its Sass variables. Solid colours that carry white text are
 * a shade deeper than the palette's (e.g. rust, moss) to keep 4.5:1 contrast.
 */

:root, [data-bs-theme="light"] {
  --rs-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The icon set's palette. */
  --rs-ink: #2E2A26;
  --rs-cream: #F7EFE2;
  --rs-paper: #FFF9EF;
  --rs-honey: #F2C14E;
  --rs-mustard: #E8A33D;
  --rs-rust: #D96C3F;
  --rs-teal: #2A7F7A;
  --rs-moss: #6B8F4E;

  --rs-page-bg: var(--rs-cream);
  --rs-page-dots: rgba(46, 42, 38, 0.08);
  --rs-surface: var(--rs-paper);
  --rs-surface-2: #F3E8D6;                     /* table heads, the search field, quiet fills */
  --rs-line: var(--rs-ink);                    /* the outline on cards, buttons, menus */
  --rs-shadow-color: var(--rs-ink);            /* their hard offset shadow */
  --rs-hairline: rgba(46, 42, 38, 0.14);       /* rules inside a card */
  --rs-input-border: rgba(46, 42, 38, 0.38);
  --rs-heading: var(--rs-ink);
  --rs-icon-line: var(--rs-ink);               /* the icons' outline (currentColor in the sprite) */
  --rs-sidebar-width: 264px;
  --rs-sidebar-bg: #2E2A26;
  --rs-sidebar-dots: rgba(247, 239, 226, 0.05);
  --rs-shadow: 4px 4px 0 var(--rs-shadow-color);
  --rs-shadow-sm: 3px 3px 0 var(--rs-shadow-color);

  --bs-primary: #2A7F7A;
  --bs-primary-rgb: 42, 127, 122;
  --bs-primary-text-emphasis: #1D5C58;
  --bs-primary-bg-subtle: #D9ECE9;
  --bs-primary-border-subtle: #9CCAC5;
  --bs-secondary: #7A6F63;
  --bs-secondary-rgb: 122, 111, 99;
  --bs-secondary-text-emphasis: #4E463E;
  --bs-secondary-bg-subtle: #EFE6D7;
  --bs-secondary-border-subtle: #D3C6B2;
  --bs-success: #5A7A40;
  --bs-success-rgb: 90, 122, 64;
  --bs-success-text-emphasis: #405A2C;
  --bs-success-bg-subtle: #E4ECD9;
  --bs-success-border-subtle: #BCCFA6;
  --bs-danger: #B9532B;
  --bs-danger-rgb: 185, 83, 43;
  --bs-danger-text-emphasis: #93401F;
  --bs-danger-bg-subtle: #F8E0D4;
  --bs-danger-border-subtle: #EBAF95;
  --bs-warning: #E8A33D;
  --bs-warning-rgb: 232, 163, 61;
  --bs-warning-text-emphasis: #8A5A0E;
  --bs-warning-bg-subtle: #FBEBCB;
  --bs-warning-border-subtle: #F0CB85;
  --bs-info: #3F6E8C;
  --bs-info-rgb: 63, 110, 140;
  --bs-info-text-emphasis: #2D536B;
  --bs-info-bg-subtle: #DCE7EE;
  --bs-info-border-subtle: #A6C0D1;
  --bs-dark: #2E2A26;
  --bs-dark-rgb: 46, 42, 38;
  --bs-dark-text-emphasis: #2E2A26;
  --bs-dark-bg-subtle: #E2D9CB;
  --bs-dark-border-subtle: #B5AA9A;
  --bs-light: #FFF9EF;
  --bs-light-rgb: 255, 249, 239;

  --bs-body-font-family: var(--rs-font);
  --bs-body-font-size: 0.9375rem;
  --bs-body-bg: var(--rs-surface);
  --bs-body-bg-rgb: 255, 249, 239;
  --bs-body-color: #3F3933;
  --bs-body-color-rgb: 63, 57, 51;
  --bs-heading-color: var(--rs-heading);
  --bs-emphasis-color: #2E2A26;
  --bs-emphasis-color-rgb: 46, 42, 38;
  --bs-secondary-color: rgba(63, 57, 51, 0.74);
  --bs-secondary-color-rgb: 63, 57, 51;
  --bs-secondary-bg: var(--rs-surface-2);
  --bs-secondary-bg-rgb: 243, 232, 214;
  --bs-tertiary-color: rgba(63, 57, 51, 0.55);
  --bs-tertiary-bg: var(--rs-page-bg);
  --bs-tertiary-bg-rgb: 247, 239, 226;
  --bs-border-color: rgba(46, 42, 38, 0.18);
  --bs-border-color-translucent: rgba(46, 42, 38, 0.14);
  --bs-border-radius: 0.6rem;
  --bs-border-radius-sm: 0.45rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-link-color: #1F6A65;
  --bs-link-color-rgb: 31, 106, 101;
  --bs-link-hover-color: #B9532B;
  --bs-link-hover-color-rgb: 185, 83, 43;
  --bs-focus-ring-color: rgba(42, 127, 122, 0.3);
  --bs-highlight-bg: #FBE3A6;
}

[data-bs-theme="dark"] {
  --rs-page-bg: #1E1B18;
  --rs-page-dots: rgba(247, 239, 226, 0.05);
  --rs-surface: #29241F;
  --rs-surface-2: #332D27;
  --rs-line: #4F463D;
  --rs-shadow-color: #0D0B09;
  --rs-hairline: rgba(247, 239, 226, 0.1);
  --rs-input-border: rgba(247, 239, 226, 0.26);
  --rs-heading: #F7EFE2;
  --rs-icon-line: #F2E7D5;
  --rs-sidebar-bg: #15120F;
  --rs-sidebar-dots: rgba(247, 239, 226, 0.04);
  /* Variables built from others resolve where they're declared, so these repeat for dark sections in a light page. */
  --rs-shadow: 4px 4px 0 var(--rs-shadow-color);
  --rs-shadow-sm: 3px 3px 0 var(--rs-shadow-color);
  --bs-heading-color: var(--rs-heading);

  --bs-primary: #2A7F7A;
  --bs-primary-rgb: 42, 127, 122;
  --bs-primary-text-emphasis: #7FCBC3;
  --bs-primary-bg-subtle: #16302D;
  --bs-primary-border-subtle: #255C57;
  --bs-secondary: #9A8E80;
  --bs-secondary-rgb: 154, 142, 128;
  --bs-secondary-text-emphasis: #CFC4B5;
  --bs-secondary-bg-subtle: #2E2924;
  --bs-secondary-border-subtle: #50473E;
  --bs-success: #5A7A40;
  --bs-success-rgb: 90, 122, 64;
  --bs-success-text-emphasis: #A9C98C;
  --bs-success-bg-subtle: #222B1A;
  --bs-success-border-subtle: #3F5530;
  --bs-danger: #B9532B;
  --bs-danger-rgb: 185, 83, 43;
  --bs-danger-text-emphasis: #F0A584;
  --bs-danger-bg-subtle: #3A2219;
  --bs-danger-border-subtle: #6E3820;
  --bs-warning: #E8A33D;
  --bs-warning-rgb: 232, 163, 61;
  --bs-warning-text-emphasis: #F2C46E;
  --bs-warning-bg-subtle: #3A2D15;
  --bs-warning-border-subtle: #6B5021;
  --bs-info: #3F6E8C;
  --bs-info-rgb: 63, 110, 140;
  --bs-info-text-emphasis: #9DC2DA;
  --bs-info-bg-subtle: #1A2731;
  --bs-info-border-subtle: #2F4C60;
  --bs-dark: #F2E7D5;
  --bs-dark-rgb: 242, 231, 213;
  --bs-dark-text-emphasis: #F2E7D5;
  --bs-dark-bg-subtle: #1A1714;
  --bs-dark-border-subtle: #4F463D;
  --bs-light: #332D27;
  --bs-light-rgb: 51, 45, 39;

  --bs-body-bg: var(--rs-surface);
  --bs-body-bg-rgb: 41, 36, 31;
  --bs-body-color: #E6DCCB;
  --bs-body-color-rgb: 230, 220, 203;
  --bs-emphasis-color: #FFF9EF;
  --bs-emphasis-color-rgb: 255, 249, 239;
  --bs-secondary-color: rgba(230, 220, 203, 0.7);
  --bs-secondary-color-rgb: 230, 220, 203;
  --bs-secondary-bg: var(--rs-surface-2);
  --bs-secondary-bg-rgb: 51, 45, 39;
  --bs-tertiary-color: rgba(230, 220, 203, 0.5);
  --bs-tertiary-bg: var(--rs-page-bg);
  --bs-tertiary-bg-rgb: 30, 27, 24;
  --bs-border-color: rgba(247, 239, 226, 0.16);
  --bs-border-color-translucent: rgba(247, 239, 226, 0.12);
  --bs-link-color: #6CC0B8;
  --bs-link-color-rgb: 108, 192, 184;
  --bs-link-hover-color: #F2C14E;
  --bs-link-hover-color-rgb: 242, 193, 78;
  --bs-focus-ring-color: rgba(108, 192, 184, 0.35);
  --bs-highlight-bg: #5A4514;
  color-scheme: dark;
}

/* Type: Montserrat, bold headings in ink; small labels in spaced capitals, as in the icon set. */
body { letter-spacing: 0.005em; }
h1, .h1 { font-size: 1.75rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.35rem; }
h4, .h4 { font-size: 1.2rem; }
h5, .h5 { font-size: 1.05rem; }
h6, .h6 { font-size: 0.95rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: 0.005em; }
.fw-semibold { font-weight: 600 !important; }
::selection { background: rgba(var(--bs-warning-rgb), 0.45); }

/* Icons from core/static/core/icons.svg ({% icon %} in core/templatetags/icons.py). */
.rs-icon { display: inline-block; flex-shrink: 0; vertical-align: -0.25em; color: var(--rs-icon-line); overflow: visible; }
/* A cream tile behind an icon, so its colours read the same on any background. */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem;
             border-radius: 0.65rem; background: var(--rs-paper); border: 2px solid var(--rs-ink); box-shadow: 2px 2px 0 var(--rs-shadow-color); }
.icon-tile .rs-icon { color: var(--rs-ink); }

/* Page: cream, with the icon set's faint dot grid. */
.app-body, body.bg-body-tertiary {
  background-color: var(--rs-page-bg) !important;
  background-image: radial-gradient(var(--rs-page-dots) 1.3px, transparent 1.4px);
  background-size: 24px 24px;
}
.app-main { min-width: 0; }
.app-content { max-width: 1400px; }

/* Sidebar: ink, fixed beside the content from lg (992px) up; below that an offcanvas opened from the top bar. */
/* It always carries data-bs-theme="dark", so its colour is set by the page's mode (on <html>), not its own. */
.app-sidebar { --rs-sidebar-bg: #2E2A26; }
[data-bs-theme="dark"] .app-sidebar { --rs-sidebar-bg: #15120F; }
.app-sidebar { --bs-offcanvas-width: var(--rs-sidebar-width); --bs-offcanvas-bg: var(--rs-sidebar-bg); background-color: var(--rs-sidebar-bg) !important;
               background-image: radial-gradient(var(--rs-sidebar-dots) 1.3px, transparent 1.4px); background-size: 24px 24px; color: rgba(247, 239, 226, 0.8); }
@media (min-width: 992px) {
  .app-sidebar { width: var(--rs-sidebar-width); flex: 0 0 var(--rs-sidebar-width); position: sticky; top: 0; height: 100vh; border-right: 3px solid var(--rs-honey); }
  .app-sidebar .offcanvas-body { overflow-y: auto; }
}
.app-sidebar .sidebar-brand { display: flex; align-items: center; gap: 0.65rem; height: 4.25rem; padding: 0 1.3rem; color: var(--rs-cream); text-decoration: none;
                              font-weight: 700; font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; }
.app-sidebar .sidebar-brand .rs-icon { color: var(--rs-cream); }
.app-sidebar .nav-link { color: rgba(247, 239, 226, 0.78); border: 2px solid transparent; border-radius: 0.75rem; padding: 0.35rem 0.6rem; display: flex; align-items: center;
                         gap: 0.7rem; font-size: 0.875rem; font-weight: 600; transition: background-color 0.15s, color 0.15s, transform 0.15s; }
.app-sidebar .nav-link .nav-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.55rem;
                                   background: var(--rs-paper); border: 2px solid var(--rs-ink); }
.app-sidebar .nav-link .nav-icon .rs-icon { color: var(--rs-ink); }
.app-sidebar .nav-link:hover, .app-sidebar .nav-link:focus-visible { color: var(--rs-cream); background: rgba(247, 239, 226, 0.07); }
.app-sidebar .nav-link.active { color: var(--rs-ink); background: var(--rs-honey); border-color: var(--rs-ink); box-shadow: 3px 3px 0 #0D0B09; }
.app-sidebar .sidebar-heading { display: flex; align-items: center; gap: 0.6rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
                                color: rgba(247, 239, 226, 0.5); padding: 0 0.6rem; margin: 1.5rem 0 0.6rem; }
.app-sidebar .sidebar-heading::after { content: ""; flex: 1; border-top: 2px solid rgba(247, 239, 226, 0.14); }
.app-sidebar .operation-switcher { background: rgba(247, 239, 226, 0.06); border: 2px solid rgba(247, 239, 226, 0.2); border-radius: 0.75rem; color: var(--rs-cream); font-size: 0.875rem; font-weight: 600; }
.app-sidebar .operation-switcher:hover, .app-sidebar .operation-switcher[aria-expanded="true"] { background: rgba(247, 239, 226, 0.12); border-color: var(--rs-honey); color: var(--rs-cream); }
.app-sidebar .offcanvas-header { height: 4.25rem; border-bottom: 2px solid rgba(247, 239, 226, 0.12); }
.app-sidebar .badge.text-bg-primary { color: var(--rs-ink) !important; background-color: var(--rs-rust) !important; }
.app-sidebar .nav-link.active .badge.text-bg-primary { color: var(--rs-cream) !important; background-color: var(--rs-ink) !important; }

/* Top bar: paper, sticky over the content, with an ink rule under it. */
.app-navbar { position: sticky; top: 0; z-index: 1020; min-height: 4.25rem; background: var(--rs-surface); border-bottom: 2px solid var(--rs-line); }
.app-navbar .navbar-brand { color: var(--rs-heading); text-transform: uppercase; letter-spacing: 0.14em; }
.app-navbar .navbar-search { position: relative; max-width: 22rem; width: 100%; }
.app-navbar .navbar-search .bi-search { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); pointer-events: none; }
.app-navbar .navbar-search .form-control { padding-left: 2.5rem; border-radius: 50rem; border-color: var(--rs-input-border); background: var(--rs-surface-2); min-height: 2.3rem; }
.app-navbar .navbar-search .form-control:focus { background: var(--rs-surface); border-color: var(--rs-line); }
.app-navbar .navbar-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
                           color: var(--bs-body-color); font-size: 1.15rem; border: 2px solid transparent; background: transparent; }
.app-navbar .navbar-icon:hover, .app-navbar .navbar-icon[aria-expanded="true"] { background: var(--rs-surface-2); border-color: var(--rs-line); color: var(--rs-heading); }
.app-navbar .navbar-icon .badge { position: absolute; top: -0.1rem; right: -0.2rem; font-size: 0.62rem; padding: 0.22em 0.45em; color: #fff !important;
                                  background-color: var(--bs-danger) !important; box-shadow: 0 0 0 2px var(--rs-surface); }
.app-navbar .navbar-user { display: inline-flex; align-items: center; gap: 0.6rem; border: 2px solid transparent; background: transparent; padding: 0.2rem 0.35rem; border-radius: 2rem; color: var(--bs-body-color); }
.app-navbar .navbar-user:hover, .app-navbar .navbar-user[aria-expanded="true"] { background: var(--rs-surface-2); border-color: var(--rs-line); }
.app-navbar .navbar-user .user-name { font-weight: 700; font-size: 0.875rem; color: var(--rs-heading); line-height: 1.1; }
.app-navbar .navbar-user .user-role { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bs-secondary-color); }
.app-navbar .navbar-user .rounded-circle, .app-navbar .navbar-user .bi-person-circle { box-shadow: 0 0 0 2px var(--rs-line); border-radius: 50%; }
.app-navbar .notification-item { white-space: normal; display: flex; gap: 0.75rem; align-items: center; padding: 0.6rem 1rem; }
.app-navbar .notification-icon { flex: 0 0 2.2rem; height: 2.2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 2px solid currentColor; }

/* Cards: paper, an ink outline and a hard offset shadow, like the icon set's tiles. */
.card { --bs-card-bg: var(--rs-surface); --bs-card-border-color: var(--rs-line); --bs-card-border-width: 2px; --bs-card-border-radius: 0.875rem;
        --bs-card-inner-border-radius: calc(0.875rem - 2px); --bs-card-spacer-y: 1.25rem; --bs-card-spacer-x: 1.35rem; --bs-card-cap-padding-y: 0.9rem;
        --bs-card-cap-padding-x: 1.35rem; --bs-card-cap-bg: var(--rs-surface); box-shadow: var(--rs-shadow); }
.card.shadow-sm, .card.shadow { box-shadow: var(--rs-shadow) !important; }
.card .card { box-shadow: var(--rs-shadow-sm); }
.card-header { border-bottom: 2px solid var(--rs-hairline); }
.card-header .h6, .card-header h2.h6, .card-header h3.h6 { font-weight: 700; color: var(--rs-heading); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.8rem; }
.card-footer { border-top: 2px solid var(--rs-hairline); background: var(--rs-surface); }
a.card, .card a.stretched-link { transition: transform 0.15s ease, box-shadow 0.15s ease; }
a.card:hover, .card:has(> .card-body .stretched-link:hover), .card:has(.stretched-link:hover) { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--rs-shadow-color) !important; }
.row.g-3, .row.g-4 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* Tables in cards: a tinted header row in spaced capitals and a warm hover. */
.table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--rs-hairline); --bs-table-hover-bg: rgba(var(--bs-warning-rgb), 0.1);
         --bs-table-striped-bg: rgba(var(--bs-warning-rgb), 0.06); margin-bottom: 0; }
.table > thead > tr > th { background-color: var(--rs-surface-2); color: var(--rs-heading); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
                           padding-top: 0.8rem; padding-bottom: 0.8rem; border-bottom: 2px solid var(--rs-hairline); white-space: nowrap; }
.table > :not(caption) > * > * { padding-left: 1rem; padding-right: 1rem; }
.table > :not(caption) > * > *:first-child { padding-left: 1.35rem; }
.table > :not(caption) > * > *:last-child { padding-right: 1.35rem; }
.table.table-sm > :not(caption) > * > * { padding-left: 0.6rem; padding-right: 0.6rem; }
.card .table > tbody > tr { transition: background-color 0.12s; }
.card .table > tbody > tr:hover > * { --bs-table-bg-state: rgba(var(--bs-warning-rgb), 0.1); }
.table .thumb { border-radius: 50% !important; }

/* Buttons: pills with an ink outline and a hard shadow that presses in. */
.btn { --bs-btn-padding-x: 1.05rem; --bs-btn-padding-y: 0.42rem; --bs-btn-font-size: 0.875rem; --bs-btn-font-weight: 600; --bs-btn-border-radius: 50rem;
       --bs-btn-border-width: 2px; letter-spacing: 0.01em; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s, color 0.12s, border-color 0.12s; }
.btn-sm { --bs-btn-padding-x: 0.75rem; --bs-btn-padding-y: 0.24rem; --bs-btn-font-size: 0.8rem; --bs-btn-border-radius: 50rem; }
.btn-lg { --bs-btn-border-radius: 50rem; }
.btn-link { box-shadow: none !important; font-weight: 600; border-color: transparent !important; }
.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark {
  --bs-btn-border-color: var(--rs-line); --bs-btn-hover-border-color: var(--rs-line); --bs-btn-active-border-color: var(--rs-line); --bs-btn-disabled-border-color: var(--rs-line);
  box-shadow: 2px 2px 0 var(--rs-shadow-color);
}
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-danger:hover, .btn-warning:hover, .btn-info:hover, .btn-dark:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--rs-shadow-color); }
.btn-primary:active, .btn-secondary:active, .btn-success:active, .btn-danger:active, .btn-warning:active, .btn-info:active, .btn-dark:active { transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled, .btn.disabled { transform: none; box-shadow: none; }
.btn-primary {
  --bs-btn-color: #fff; --bs-btn-bg: #2A7F7A; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #23706B;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #1E625E; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #2A7F7A; --bs-btn-focus-shadow-rgb: 42, 127, 122;
}
.btn-secondary {
  --bs-btn-color: var(--rs-ink); --bs-btn-bg: var(--rs-cream); --bs-btn-hover-color: var(--rs-ink); --bs-btn-hover-bg: #EFE2CC;
  --bs-btn-active-color: var(--rs-ink); --bs-btn-active-bg: #E6D6BC; --bs-btn-disabled-color: var(--rs-ink); --bs-btn-disabled-bg: var(--rs-cream); --bs-btn-focus-shadow-rgb: 122, 111, 99;
}
.btn-success {
  --bs-btn-color: #fff; --bs-btn-bg: #5A7A40; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #506D39;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #466032; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #5A7A40; --bs-btn-focus-shadow-rgb: 90, 122, 64;
}
.btn-danger {
  --bs-btn-color: #fff; --bs-btn-bg: #B9532B; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #A84A25;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #964120; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #B9532B; --bs-btn-focus-shadow-rgb: 185, 83, 43;
}
.btn-warning {
  --bs-btn-color: var(--rs-ink); --bs-btn-bg: #F2C14E; --bs-btn-hover-color: var(--rs-ink); --bs-btn-hover-bg: #EDB43A;
  --bs-btn-active-color: var(--rs-ink); --bs-btn-active-bg: #E8A33D; --bs-btn-disabled-color: var(--rs-ink); --bs-btn-disabled-bg: #F2C14E; --bs-btn-focus-shadow-rgb: 232, 163, 61;
}
.btn-info {
  --bs-btn-color: #fff; --bs-btn-bg: #3F6E8C; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #38627D;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #31566E; --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #3F6E8C; --bs-btn-focus-shadow-rgb: 63, 110, 140;
}
.btn-dark {
  --bs-btn-color: var(--rs-cream); --bs-btn-bg: #2E2A26; --bs-btn-hover-color: var(--rs-cream); --bs-btn-hover-bg: #403A34;
  --bs-btn-active-color: var(--rs-cream); --bs-btn-active-bg: #1F1C19; --bs-btn-disabled-color: var(--rs-cream); --bs-btn-disabled-bg: #2E2A26; --bs-btn-focus-shadow-rgb: 46, 42, 38;
}
[data-bs-theme="dark"] .btn-dark { --bs-btn-color: var(--rs-ink); --bs-btn-bg: var(--rs-cream); --bs-btn-hover-color: var(--rs-ink); --bs-btn-hover-bg: #EFE2CC;
                                   --bs-btn-active-color: var(--rs-ink); --bs-btn-active-bg: #E6D6BC; --bs-btn-disabled-color: var(--rs-ink); --bs-btn-disabled-bg: var(--rs-cream); }
/* Outline buttons: an outline in the colour's text tone, filled on hover. */
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-info, .btn-outline-dark { --bs-btn-bg: transparent; }
.btn-outline-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #2A7F7A; --bs-btn-hover-border-color: #2A7F7A;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #1E625E; --bs-btn-active-border-color: #1E625E; --bs-btn-disabled-color: var(--bs-primary-text-emphasis); --bs-btn-disabled-border-color: var(--bs-primary);
  --bs-btn-focus-shadow-rgb: 42, 127, 122;
}
.btn-outline-secondary {
  --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--rs-input-border); --bs-btn-hover-color: var(--rs-heading); --bs-btn-hover-bg: var(--rs-surface-2); --bs-btn-hover-border-color: var(--rs-line);
  --bs-btn-active-color: var(--rs-heading); --bs-btn-active-bg: var(--bs-secondary-bg-subtle); --bs-btn-active-border-color: var(--rs-line); --bs-btn-disabled-color: var(--bs-secondary-color);
  --bs-btn-disabled-border-color: var(--rs-input-border); --bs-btn-focus-shadow-rgb: 122, 111, 99;
}
.btn-outline-success {
  --bs-btn-color: var(--bs-success-text-emphasis); --bs-btn-border-color: var(--bs-success); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #5A7A40; --bs-btn-hover-border-color: #5A7A40;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #466032; --bs-btn-active-border-color: #466032; --bs-btn-disabled-color: var(--bs-success-text-emphasis); --bs-btn-disabled-border-color: var(--bs-success);
  --bs-btn-focus-shadow-rgb: 90, 122, 64;
}
.btn-outline-danger {
  --bs-btn-color: var(--bs-danger-text-emphasis); --bs-btn-border-color: var(--bs-danger); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #B9532B; --bs-btn-hover-border-color: #B9532B;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #964120; --bs-btn-active-border-color: #964120; --bs-btn-disabled-color: var(--bs-danger-text-emphasis); --bs-btn-disabled-border-color: var(--bs-danger);
  --bs-btn-focus-shadow-rgb: 185, 83, 43;
}
.btn-outline-warning {
  --bs-btn-color: var(--bs-warning-text-emphasis); --bs-btn-border-color: var(--bs-warning); --bs-btn-hover-color: var(--rs-ink); --bs-btn-hover-bg: #F2C14E; --bs-btn-hover-border-color: #E8A33D;
  --bs-btn-active-color: var(--rs-ink); --bs-btn-active-bg: #E8A33D; --bs-btn-active-border-color: #E8A33D; --bs-btn-disabled-color: var(--bs-warning-text-emphasis); --bs-btn-disabled-border-color: var(--bs-warning);
  --bs-btn-focus-shadow-rgb: 232, 163, 61;
}
.btn-outline-info {
  --bs-btn-color: var(--bs-info-text-emphasis); --bs-btn-border-color: var(--bs-info); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #3F6E8C; --bs-btn-hover-border-color: #3F6E8C;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #31566E; --bs-btn-active-border-color: #31566E; --bs-btn-disabled-color: var(--bs-info-text-emphasis); --bs-btn-disabled-border-color: var(--bs-info);
  --bs-btn-focus-shadow-rgb: 63, 110, 140;
}
.btn-outline-dark {
  --bs-btn-color: var(--rs-heading); --bs-btn-border-color: var(--rs-line); --bs-btn-hover-color: var(--rs-cream); --bs-btn-hover-bg: #2E2A26; --bs-btn-hover-border-color: #2E2A26;
  --bs-btn-active-color: var(--rs-cream); --bs-btn-active-bg: #1F1C19; --bs-btn-active-border-color: #1F1C19; --bs-btn-disabled-color: var(--rs-heading); --bs-btn-disabled-border-color: var(--rs-line);
  --bs-btn-focus-shadow-rgb: 46, 42, 38;
}
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.18); }
/* Round icon buttons with a light outline, for row actions. */
.btn-icon { --bs-btn-padding-x: 0; --bs-btn-padding-y: 0; --bs-btn-border-radius: 50%; width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center;
            border: 2px solid var(--rs-input-border); color: var(--bs-secondary-color); background: var(--rs-surface); }
.btn-icon:hover { color: var(--rs-heading); border-color: var(--rs-line); background: var(--rs-honey); }
[data-bs-theme="dark"] .btn-icon:hover { color: var(--rs-ink); }
.btn-close { --bs-btn-close-focus-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }

/* Badges and status pills: tinted, with an outline in their own tone. */
.badge { font-weight: 700; letter-spacing: 0.03em; padding: 0.36em 0.7em; border-radius: 50rem; }
.badge.text-bg-primary { color: var(--bs-primary-text-emphasis) !important; background-color: var(--bs-primary-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-primary-border-subtle); }
.badge.text-bg-secondary { color: var(--bs-secondary-text-emphasis) !important; background-color: var(--bs-secondary-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-secondary-border-subtle); }
.badge.text-bg-success { color: var(--bs-success-text-emphasis) !important; background-color: var(--bs-success-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-success-border-subtle); }
.badge.text-bg-danger { color: var(--bs-danger-text-emphasis) !important; background-color: var(--bs-danger-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-danger-border-subtle); }
.badge.text-bg-warning { color: var(--bs-warning-text-emphasis) !important; background-color: var(--bs-warning-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-warning-border-subtle); }
.badge.text-bg-info { color: var(--bs-info-text-emphasis) !important; background-color: var(--bs-info-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-info-border-subtle); }
.badge.text-bg-dark { color: var(--bs-dark-text-emphasis) !important; background-color: var(--bs-dark-bg-subtle) !important; box-shadow: inset 0 0 0 1.5px var(--bs-dark-border-subtle); }
.badge.text-bg-light { color: var(--bs-body-color) !important; background-color: var(--rs-surface-2) !important; }
.badge.text-bg-light.border { border-color: var(--rs-hairline) !important; }

/* Inputs and selects: a soft outline that goes ink on focus, with a teal ring. */
.form-control, .form-select { background-color: var(--rs-surface); border: 2px solid var(--rs-input-border); border-radius: 0.6rem; color: var(--bs-body-color); }
.form-control:not(.form-control-sm):not(.form-control-lg):not([type="file"]):not(textarea), .form-select:not(.form-select-sm):not(.form-select-lg) { min-height: 2.45rem; }
.form-control::placeholder { color: var(--bs-tertiary-color); }
.form-control:focus, .form-select:focus { background-color: var(--rs-surface); border-color: var(--rs-line); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); color: var(--bs-body-color); }
[data-bs-theme="dark"] .form-control:focus, [data-bs-theme="dark"] .form-select:focus { border-color: #6CC0B8; }
.form-control:disabled, .form-select:disabled { background-color: var(--rs-surface-2); }
.input-group-text { background-color: var(--rs-surface-2); border: 2px solid var(--rs-input-border); color: var(--bs-secondary-color); }
.form-check-input { border: 2px solid var(--rs-input-border); background-color: var(--rs-surface); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--rs-line); }
[data-bs-theme="dark"] .form-check-input:checked { border-color: var(--bs-primary); }
.form-check-input:focus { border-color: var(--rs-line); box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); }
.form-label { font-weight: 600; font-size: 0.85rem; color: var(--rs-heading); }
.form-text { color: var(--bs-secondary-color); }
.form-range::-webkit-slider-thumb { background-color: var(--bs-primary); }
.form-range::-moz-range-thumb { background-color: var(--bs-primary); }

/* Menus, tabs, lists: ink outlines, honey for the active item. */
.dropdown-menu { --bs-dropdown-bg: var(--rs-surface); --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-link-hover-bg: var(--rs-surface-2); --bs-dropdown-link-hover-color: var(--rs-heading);
                 --bs-dropdown-link-active-bg: var(--rs-honey); --bs-dropdown-link-active-color: var(--rs-ink); --bs-dropdown-border-color: var(--rs-line); --bs-dropdown-border-width: 2px;
                 --bs-dropdown-border-radius: 0.75rem; --bs-dropdown-font-size: 0.875rem; --bs-dropdown-divider-bg: var(--rs-hairline); box-shadow: var(--rs-shadow) !important; padding: 0.35rem; }
.dropdown-item { border-radius: 0.5rem; }
.app-sidebar .dropdown-menu { --bs-dropdown-bg: #F7EFE2; --bs-dropdown-link-color: #2E2A26; --bs-dropdown-link-hover-bg: #EFE2CC; --bs-dropdown-link-hover-color: #2E2A26;
                              --bs-dropdown-border-color: #2E2A26; --bs-dropdown-divider-bg: rgba(46, 42, 38, 0.14); color: #2E2A26; box-shadow: 4px 4px 0 #0D0B09 !important; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--rs-honey); --bs-nav-pills-link-active-color: var(--rs-ink); --bs-nav-pills-border-radius: 50rem; }
.nav-pills .nav-link { font-weight: 600; border: 2px solid transparent; }
.nav-pills .nav-link.active { border-color: var(--rs-ink); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--rs-heading); --bs-nav-tabs-link-active-bg: var(--rs-surface); --bs-nav-tabs-border-color: var(--rs-line); --bs-nav-tabs-border-width: 2px;
            --bs-nav-tabs-link-active-border-color: var(--rs-line) var(--rs-line) var(--rs-surface); --bs-nav-tabs-border-radius: 0.75rem; }
.nav-tabs .nav-link { font-weight: 600; color: var(--bs-secondary-color); }
.nav-tabs .nav-link:hover { color: var(--rs-heading); }
.nav-tabs .nav-link.active { box-shadow: inset 0 3px 0 var(--rs-rust); }
.list-group { --bs-list-group-bg: var(--rs-surface); --bs-list-group-color: var(--bs-body-color); --bs-list-group-active-bg: var(--rs-honey); --bs-list-group-active-color: var(--rs-ink);
              --bs-list-group-active-border-color: var(--rs-line); --bs-list-group-border-color: var(--rs-hairline); --bs-list-group-action-hover-bg: var(--rs-surface-2); }
.progress { --bs-progress-bar-bg: var(--bs-primary); --bs-progress-bg: var(--rs-surface-2); --bs-progress-border-radius: 50rem; box-shadow: inset 0 0 0 1.5px var(--rs-hairline); }
.popover { --bs-popover-bg: var(--rs-surface); --bs-popover-border-color: var(--rs-line); --bs-popover-border-width: 2px; --bs-popover-header-bg: var(--rs-surface-2); box-shadow: var(--rs-shadow); }
.tooltip { --bs-tooltip-bg: var(--rs-ink); --bs-tooltip-color: var(--rs-cream); }
.modal { --bs-modal-bg: var(--rs-surface); --bs-modal-border-color: var(--rs-line); --bs-modal-border-width: 2px; --bs-modal-border-radius: 0.875rem; }
.modal-content { box-shadow: 6px 6px 0 var(--rs-shadow-color); }
.offcanvas:not(.app-sidebar) { --bs-offcanvas-bg: var(--rs-surface); }
.accordion { --bs-accordion-bg: var(--rs-surface); --bs-accordion-border-color: var(--rs-hairline); --bs-accordion-active-bg: var(--rs-surface-2); --bs-accordion-active-color: var(--rs-heading); }

/* Pagination: numbered pills. */
.pagination { --bs-pagination-color: var(--bs-body-color); --bs-pagination-bg: var(--rs-surface); --bs-pagination-border-color: var(--rs-input-border); --bs-pagination-border-width: 2px;
              --bs-pagination-hover-bg: var(--rs-surface-2); --bs-pagination-hover-color: var(--rs-heading); --bs-pagination-hover-border-color: var(--rs-line);
              --bs-pagination-active-bg: var(--rs-honey); --bs-pagination-active-color: var(--rs-ink); --bs-pagination-active-border-color: var(--rs-ink);
              --bs-pagination-disabled-bg: transparent; --bs-pagination-focus-box-shadow: 0 0 0 0.2rem var(--bs-focus-ring-color); gap: 0.3rem; }
.pagination .page-link { border-radius: 50rem !important; min-width: 2.1rem; text-align: center; font-weight: 600; }
.page-item.active .page-link { box-shadow: 2px 2px 0 var(--rs-shadow-color); }

/* Alerts and breadcrumbs */
.alert { border-radius: 0.875rem; border: 2px solid var(--rs-line); box-shadow: var(--rs-shadow-sm); }
.alert-primary { --bs-alert-border-color: var(--rs-line); }
.alert-light { --bs-alert-bg: var(--rs-surface); --bs-alert-color: var(--bs-body-color); }
.breadcrumb { --bs-breadcrumb-divider-color: var(--bs-tertiary-color); --bs-breadcrumb-item-active-color: var(--bs-secondary-color); font-size: 0.75rem; font-weight: 600;
              letter-spacing: 0.08em; text-transform: uppercase; }
.breadcrumb a { text-decoration: none; }

/* Coloured text: the solid tones are too dim on the dark surface (and mustard too pale on cream), so use the text tones. */
.text-warning { color: var(--bs-warning-text-emphasis) !important; }
[data-bs-theme="dark"] .text-primary { color: var(--bs-primary-text-emphasis) !important; }
[data-bs-theme="dark"] .text-success { color: var(--bs-success-text-emphasis) !important; }
[data-bs-theme="dark"] .text-danger { color: var(--bs-danger-text-emphasis) !important; }
[data-bs-theme="dark"] .text-info { color: var(--bs-info-text-emphasis) !important; }

/* Light-coloured bits Bootstrap's dark mode doesn't reach (.bg-white stays: it's behind uploaded logos). */
[data-bs-theme="dark"] .bg-light { background-color: var(--rs-surface-2) !important; }
[data-bs-theme="dark"] .text-dark { color: var(--bs-emphasis-color) !important; }
hr { border-top: 2px solid var(--rs-hairline); opacity: 1; }

/* The Icons page (core/templates/core/icon_list.html, icon_form.html). */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 1.25rem; }
.icon-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1.25rem 0.5rem 1rem; text-align: center; }
.icon-card-name { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rs-heading); word-break: break-word; }
.icon-preview { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-width: 6.5rem; min-height: 6.5rem; padding: 0.75rem;
                border-radius: 0.75rem; border: 2px solid var(--rs-line); background: var(--rs-surface); color: var(--bs-body-color); }
.icon-preview > span { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bs-secondary-color); }

/* Sidebar: modules still to come (tenancy.modules.NAV_SECTIONS), and Settings set apart at the bottom. */
.app-sidebar .nav-link.disabled { color: rgba(247, 239, 226, 0.45); }
.app-sidebar .nav-link.disabled .nav-icon { opacity: 0.55; }
.app-sidebar .nav-soon { font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(247, 239, 226, 0.7); background: rgba(247, 239, 226, 0.1); }
.app-sidebar .sidebar-footer-nav { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 2px solid rgba(247, 239, 226, 0.12); }

/* The landing page (landing/templates/landing/home.html): full-width bands on the dotted cream page. */
.landing { overflow-x: clip; }
.landing-hero { padding: 4.5rem 0 4rem; border-bottom: 2px solid var(--rs-line); }
.landing-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bs-danger-text-emphasis); margin-bottom: 0.9rem; }
.landing-title { font-size: clamp(2.3rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; margin-bottom: 1.2rem; }
.landing-title span { color: var(--bs-primary-text-emphasis); }
.landing-lead { font-size: 1.12rem; line-height: 1.6; color: var(--bs-body-color); margin-bottom: 1.8rem; max-width: 36rem; }
.landing-note { display: flex; align-items: center; gap: 0.5rem; margin: 1.3rem 0 0; font-size: 0.85rem; color: var(--bs-secondary-color); }
.landing-section { padding: 4.5rem 0; }
.landing-section-alt { background: var(--rs-surface-2); border-top: 2px solid var(--rs-line); border-bottom: 2px solid var(--rs-line); }
.landing-section-cta { background: var(--rs-honey); border-top: 2px solid var(--rs-line); color: var(--rs-ink); }
.landing-section-cta .landing-heading, .landing-section-cta .landing-lead, .landing-section-cta .landing-cta-note { color: var(--rs-ink); }
.landing-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; text-align: center; margin-bottom: 0.75rem; }
.landing-sub { text-align: center; color: var(--bs-secondary-color); max-width: 40rem; margin: 0 auto 2.75rem; font-size: 1.05rem; }

/* The hero's sketch of the app. */
.landing-window { border: 2px solid var(--rs-line); border-radius: 1rem; background: var(--rs-surface); box-shadow: 8px 8px 0 var(--rs-shadow-color); overflow: hidden; transform: rotate(1deg); }
.landing-window-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 0.9rem; background: #2E2A26; color: #F7EFE2; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; }
.landing-window-bar span { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--rs-rust); }
.landing-window-bar span:nth-child(2) { background: var(--rs-honey); }
.landing-window-bar span:nth-child(3) { background: var(--rs-teal); }
.landing-window-bar b { margin-left: 0.6rem; font-weight: 700; }
.landing-window-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; padding: 1.1rem; background-image: radial-gradient(var(--rs-page-dots) 1.3px, transparent 1.4px); background-size: 20px 20px; }
.landing-mini { border: 2px solid var(--rs-line); border-radius: 0.75rem; background: var(--rs-surface); box-shadow: 3px 3px 0 var(--rs-shadow-color); padding: 0.8rem; font-size: 0.8rem; min-width: 0; }
.landing-mini small { display: block; color: var(--bs-secondary-color); }
.landing-mini strong { color: var(--rs-heading); }
.landing-mini-head { display: flex; align-items: center; gap: 0.4rem; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rs-heading); margin-bottom: 0.5rem; }
.landing-mini-weather, .landing-mini-hive { display: flex; align-items: center; gap: 0.7rem; }
.landing-mini-weather { background: #2F4A63; }
.landing-mini-weather strong { color: #FFF9EF; font-size: 1.3rem; }
.landing-mini-weather small { color: rgba(247, 239, 226, 0.75); }
.landing-mini-weather .rs-icon { color: #F7EFE2; }
.landing-mini-hive .badge { margin-top: 0.3rem; }
.landing-checks { list-style: none; margin: 0; padding: 0; }
.landing-checks li { position: relative; padding-left: 1.3rem; margin-bottom: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.landing-checks li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 0.85rem; height: 0.85rem; border: 2px solid var(--rs-line); border-radius: 0.25rem; }
.landing-checks li.done { text-decoration: line-through; color: var(--bs-secondary-color); }
.landing-checks li.done::before { background: var(--rs-teal); }
.landing-bars { display: grid; gap: 0.35rem; }
.landing-bars i { display: block; height: 0.7rem; margin-left: var(--s); width: var(--w); border-radius: 1rem; border: 1.5px solid var(--rs-line);
                  background: linear-gradient(90deg, #D6E3C6 0 30%, #9DBB7E 30% 75%, #F2C14E 75%); }

/* Outcomes, features, points, steps. */
.landing-outcome, .landing-point { text-align: center; padding: 0 0.5rem; }
.landing-outcome h3, .landing-point h3, .landing-steps h3 { font-size: 1.05rem; font-weight: 700; margin: 0.9rem 0 0.45rem; }
.landing-outcome p, .landing-point p, .landing-steps p { color: var(--bs-secondary-color); margin: 0; }
.landing-features { list-style: none; margin: 0; padding: 0.4rem 1.35rem 1rem; }
.landing-features li { display: flex; gap: 1rem; align-items: flex-start; padding: 0.8rem 0; border-bottom: 2px solid var(--rs-hairline); }
.landing-features li:last-child { border-bottom: 0; }
.landing-features strong { display: block; color: var(--rs-heading); margin-bottom: 0.15rem; }
.landing-features span:not(.badge) { color: var(--bs-secondary-color); font-size: 0.9rem; }
.landing-features li.soon > .rs-icon { opacity: 0.6; }
.landing-ticks { list-style: none; padding: 0; margin: 1.5rem 0 0; }
.landing-ticks li { position: relative; padding-left: 2rem; margin-bottom: 0.8rem; }
.landing-ticks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.25rem; height: 1.25rem; border-radius: 50%; border: 2px solid var(--rs-line);
                            background: var(--rs-honey); box-shadow: inset 0 0 0 3px var(--rs-surface); }
.landing-hives { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 0.75rem; padding: 2.5rem 1.5rem; border: 2px solid var(--rs-line);
                 border-radius: 1rem; background: var(--rs-surface); box-shadow: var(--rs-shadow); }
.landing-hive-tools { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding-top: 1.5rem; margin-top: 0.75rem; border-top: 2px dashed var(--rs-hairline); }
.landing-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; }
.landing-steps li { text-align: center; }
.landing-steps li > span { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: var(--rs-honey); color: var(--rs-ink);
                           border: 2px solid var(--rs-line); box-shadow: 3px 3px 0 var(--rs-shadow-color); font-weight: 700; font-size: 1.2rem; }

/* The form and the footer. */
.landing-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.landing-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.landing-footer { padding: 2rem 0; font-size: 0.9rem; color: var(--bs-secondary-color); border-top: 2px solid var(--rs-line); background: var(--rs-surface); }
@media (max-width: 575.98px) { .landing-window-body { grid-template-columns: 1fr; } .landing-window { transform: none; } }