/* AURA - shared styles. Bootstrap 5 comes from the CDN; this file sets the theme on top of it.
   Sections: 1 fonts and tokens, 2 Bootstrap theme, 3 application frame, 4 page helpers, 5 landing page and dialog. */

/* ---- 1. Fonts (Barlow, SIL Open Font License - see assets/fonts/LICENSE.txt) and tokens ---- */
@font-face { font-family: "Barlow"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }

:root {
    --cm-ink: #0c2b36;          /* deep petrol: navigation, hero, headings */
    --cm-petrol: #14485a;
    --cm-teal: #0f7c82;         /* actions and links */
    --cm-teal-dark: #0a5f64;
    --cm-paper: #eff4f5;        /* page background */
    --cm-line: #d3dde0;
    --cm-muted: #55707a;
    --cm-red: #d4342a;          /* the three contour colours: highest to lowest level */
    --cm-amber: #f39a12;
    --cm-yellow: #f5c518;
    --cm-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
    --cm-ramp: linear-gradient(90deg, var(--cm-red) 0 33.4%, var(--cm-amber) 33.4% 66.7%, var(--cm-yellow) 66.7% 100%);

    --bs-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: #17333d;
    --bs-body-color-rgb: 23, 51, 61;
    --bs-secondary-color: rgba(23, 51, 61, .72);
    --bs-tertiary-bg: var(--cm-paper);
    --bs-tertiary-bg-rgb: 239, 244, 245;
    --bs-primary: #0f7c82;
    --bs-primary-rgb: 15, 124, 130;
    --bs-link-color: #0a6a70;
    --bs-link-color-rgb: 10, 106, 112;
    --bs-link-hover-color: #07494d;
    --bs-link-hover-color-rgb: 7, 73, 77;
    --bs-border-color: var(--cm-line);
    --bs-border-radius: .45rem;
    --bs-border-radius-sm: .35rem;
    --bs-border-radius-lg: .7rem;
    --bs-focus-ring-color: rgba(15, 124, 130, .3);
}

/* ---- 2. Bootstrap theme ---- */
h1, h2, h3, .h1, .h2, .h3, .h4, .h5, .modal-title, .card-header, .display-6 { font-family: var(--cm-display); font-weight: 600; letter-spacing: .005em; color: var(--cm-ink); }
h1, .h1, .h2, .h3, .h4 { line-height: 1.1; }
.h4 { font-size: 1.75rem; }
.h5 { font-size: 1.4rem; }
.h6 { font-weight: 600; }
.card-header { font-size: 1.15rem; background: #f7fafa; border-bottom-color: var(--cm-line); }
.card-header .h5, .card-header .h6 { font-family: inherit; }
.card { --bs-card-border-color: var(--cm-line); --bs-card-cap-bg: #f7fafa; }
.shadow-sm { box-shadow: 0 1px 2px rgba(12, 43, 54, .07), 0 4px 14px -8px rgba(12, 43, 54, .18) !important; }

.btn { --bs-btn-font-weight: 500; }
.btn-primary { --bs-btn-bg: var(--cm-teal); --bs-btn-border-color: var(--cm-teal); --bs-btn-hover-bg: var(--cm-teal-dark); --bs-btn-hover-border-color: var(--cm-teal-dark);
    --bs-btn-active-bg: #084d51; --bs-btn-active-border-color: #084d51; --bs-btn-disabled-bg: var(--cm-teal); --bs-btn-disabled-border-color: var(--cm-teal);
    --bs-btn-focus-shadow-rgb: 15, 124, 130; }
.btn-outline-primary { --bs-btn-color: var(--cm-teal-dark); --bs-btn-border-color: var(--cm-teal); --bs-btn-hover-bg: var(--cm-teal); --bs-btn-hover-border-color: var(--cm-teal);
    --bs-btn-active-bg: var(--cm-teal-dark); --bs-btn-active-border-color: var(--cm-teal-dark); --bs-btn-disabled-color: var(--cm-teal); --bs-btn-disabled-border-color: var(--cm-teal);
    --bs-btn-focus-shadow-rgb: 15, 124, 130; }
.btn-warning { --bs-btn-bg: var(--cm-amber); --bs-btn-border-color: var(--cm-amber); --bs-btn-color: #1b1300; --bs-btn-hover-bg: #ffb02e; --bs-btn-hover-border-color: #ffb02e;
    --bs-btn-hover-color: #1b1300; --bs-btn-active-bg: #e08a05; --bs-btn-active-border-color: #e08a05; --bs-btn-active-color: #1b1300; --bs-btn-focus-shadow-rgb: 243, 154, 18; }
.btn-link { --bs-btn-color: var(--bs-link-color); --bs-btn-hover-color: var(--bs-link-hover-color); }
.text-bg-primary { background-color: var(--cm-teal) !important; }
.text-bg-info { background-color: #d5eef0 !important; color: #07494d !important; }
.badge { font-weight: 600; letter-spacing: .01em; }

.form-control:focus, .form-select:focus { border-color: var(--cm-teal); box-shadow: 0 0 0 .2rem rgba(15, 124, 130, .2); }
.form-check-input:checked { background-color: var(--cm-teal); border-color: var(--cm-teal); }
.form-check-input:focus { border-color: var(--cm-teal); box-shadow: 0 0 0 .2rem rgba(15, 124, 130, .2); }
.form-label { font-weight: 500; }
.input-group-text { background: var(--cm-paper); }

.table { font-variant-numeric: tabular-nums; }
.table > thead th { background: var(--cm-paper); color: var(--cm-muted); font-weight: 600; font-size: .9rem; border-bottom-color: var(--cm-line); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--cm-ink); --bs-nav-link-color: var(--cm-teal-dark); --bs-nav-link-hover-color: var(--cm-ink); }
.nav-pills .nav-link { font-weight: 500; }
.nav-tabs { --bs-nav-link-color: var(--cm-teal-dark); --bs-nav-link-hover-color: var(--cm-ink); --bs-nav-tabs-link-active-color: var(--cm-ink); }
.nav-tabs .nav-link.active { font-weight: 600; box-shadow: inset 0 3px 0 var(--cm-amber); }
.pagination { --bs-pagination-color: var(--cm-teal-dark); --bs-pagination-hover-color: var(--cm-ink); --bs-pagination-active-bg: var(--cm-teal); --bs-pagination-active-border-color: var(--cm-teal); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--cm-teal); --bs-dropdown-border-color: var(--cm-line); box-shadow: 0 10px 30px -12px rgba(12, 43, 54, .35); }
.list-group { --bs-list-group-border-color: var(--cm-line); --bs-list-group-active-bg: var(--cm-teal); --bs-list-group-active-border-color: var(--cm-teal); }
.alert { border-left-width: 4px; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--cm-amber); outline-offset: 2px; }

/* ---- 3. Application frame: navigation bar, brand, footer ---- */
.cm-navbar { background: var(--cm-ink); border-bottom: 3px solid transparent; border-image: var(--cm-ramp) 1; padding-block: .35rem; }
.cm-navbar .nav-link { color: rgba(255, 255, 255, .78); font-weight: 500; padding-inline: .8rem !important; border-radius: .35rem; }
.cm-navbar .nav-link:hover, .cm-navbar .nav-link:focus { color: #fff; }
.cm-navbar .nav-link.active { color: #fff; background: rgba(255, 255, 255, .1); }
.cm-brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--cm-display); font-weight: 600; font-size: 1.6rem; line-height: 1;
    letter-spacing: .04em; color: #fff; text-decoration: none; }
.cm-brand:hover { color: #fff; }
.cm-brand-dark, .cm-brand-dark:hover { color: var(--cm-ink); font-size: 2rem; }
.cm-mark { width: 2.5rem; height: 1.5rem; flex: none; }
.cm-mark path { stroke-width: 1.4; stroke-linejoin: round; }
.cm-mark-3 { fill: rgba(245, 197, 24, .22); stroke: var(--cm-yellow); }
.cm-mark-2 { fill: rgba(243, 154, 18, .35); stroke: var(--cm-amber); }
.cm-mark-1 { fill: var(--cm-red); stroke: var(--cm-red); }
.cm-mark-0 { fill: #fff; }
.cm-brand-dark .cm-mark-0, .cm-access .cm-mark-0 { fill: var(--cm-ink); }
.cm-role { background: rgba(255, 255, 255, .14); color: #fff; font-weight: 500; }
.cm-auth-card { max-width: 26rem; }
.cm-footer { background: #fff; border-top: 1px solid var(--cm-line); color: var(--cm-muted); }
.cm-tiles .card { border-top: 3px solid var(--cm-teal); }
.cm-tiles .fs-3 { font-family: var(--cm-display); font-size: 2.4rem !important; line-height: 1; color: var(--cm-ink); }

/* ---- 4. Page helpers ---- */
.cm-wrap { white-space: pre-wrap; word-break: break-word; }
.cm-num { text-align: right; font-variant-numeric: tabular-nums; }

.cm-prop-table td:first-child, .cm-prop-form td:first-child { min-width: 14rem; }
.cm-prop-table td:last-child { min-width: 18rem; }
.cm-prop-form input[type="text"] { min-width: 6.5rem; }
.cm-prop-form td:nth-child(4) input[type="text"] { min-width: 20rem; }

.input-group > .cm-unit { flex: 0 0 auto; width: auto; max-width: 7rem; }

.cm-chart { position: relative; height: 16rem; }
.cm-chart.cm-chart-plan { height: 24rem; }    /* plan views drawn to scale */
details > summary.card-header { cursor: pointer; }

@media print {
    body { background: #fff !important; }
    .cm-footer { border-top: 1px solid #999; }
}

.cm-narrow { max-width: 7rem; }

/* Plan views on the summary page (assets/js/isopleths.js) */
canvas.cm-plan { display: block; width: 100%; height: 18rem; }
canvas.cm-plan-square { height: 22rem; }
.cm-swatch { display: inline-block; width: 1.4rem; height: 0; border-top: 3px solid; vertical-align: middle; margin-right: .35rem; }
.cm-c1 { border-color: #b3261e; }
.cm-c2 { border-color: #d9730d; border-top-style: dashed; }
.cm-c3 { border-color: #b89600; border-top-style: dotted; }
.cm-c4 { border-color: #2e8b57; border-top-style: dashed; }
.cm-c5 { border-color: #2a78d6; }
.cm-c6 { border-color: #6f42c1; border-top-style: dashed; }

/* Printable reports (layouts/report.php) */
.cm-report { font-size: .95rem; }
.cm-report-head th { width: 12%; white-space: nowrap; background: var(--cm-paper); }
.cm-report-head td { width: 38%; }
.cm-report-label { width: 14rem; }
.cm-report-small { font-size: .85rem; }
@media print {
    .cm-report { font-size: 10pt; }
    .cm-report .container { max-width: none; padding: 0; }
    .cm-report h2, .cm-report h3 { break-after: avoid; }
    .cm-report tr { break-inside: avoid; }
    .cm-report-disclaimer { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; }
    .cm-report a { color: inherit; text-decoration: none; }
}

/* Settings and audit log (module 19) */
.cm-setting { min-width: 9rem; max-width: 14rem; }
.cm-audit-values { max-width: 48rem; }

/* Note page "What AURA is used for" (Views/about/index.php). Colours follow the Bootstrap theme variables. */
.cm-about { max-width: 68rem; margin: 0 auto; padding-block: 1rem 2rem; display: flex; flex-direction: column; gap: 2.5rem; }
.cm-about header, .cm-about section { display: flex; flex-direction: column; gap: 1rem; }
.cm-about h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin: 0; }
.cm-about h2 { font-size: 1.4rem; font-weight: 600; margin: 0; padding-bottom: .4rem; border-bottom: 2px solid var(--cm-ink); }
.cm-about h3 { font-size: 1.1rem; font-weight: 600; margin: 0; }
.cm-about p { margin: 0; }
.cm-about-expand { color: var(--cm-teal); font-weight: 600; }
.cm-about-lede { max-width: 44rem; font-size: 1.15rem; }
.cm-about-note { max-width: 44rem; color: var(--bs-secondary-color); }
.cm-about-chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.cm-about-chain > div { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-top: 3px solid var(--cm-teal);
    padding: .75rem .8rem .9rem; min-width: 0; display: flex; flex-direction: column; gap: .3rem; }
.cm-about-chain > div.cm-about-out { border-top-color: #b8660a; }
.cm-about-chain .k { font-size: .82rem; color: var(--bs-secondary-color); }
.cm-about-chain .t { font-size: 1.1rem; font-weight: 600; line-height: 1.15; }
.cm-about-chain .d { font-size: .9rem; color: var(--bs-secondary-color); }
.cm-about-uses { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2.5rem; }
.cm-about-use { padding-block: 1rem; border-bottom: 1px solid var(--bs-border-color); display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.cm-about-use .q { font-style: italic; color: var(--bs-secondary-color); }
.cm-about-use .p { font-size: .82rem; color: var(--cm-teal); font-weight: 600; }
.cm-about-scroll { overflow-x: auto; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.cm-about-scroll table { border-collapse: collapse; width: 100%; min-width: 38rem; font-size: .95rem; }
.cm-about-scroll th, .cm-about-scroll td { text-align: left; padding: .5rem .75rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: top; }
.cm-about-scroll thead th { font-size: .85rem; color: var(--cm-muted); background: var(--cm-paper); }
.cm-about-scroll tbody tr:last-child td { border-bottom: 0; }
.cm-about-scroll td:first-child { font-weight: 600; }
.cm-about-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-about-limits { background: #fbefdd; border-left: 4px solid #b8660a; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.cm-about-limits h2 { border: 0; padding: 0; color: #8a4b05; }
.cm-about-limits ul { margin: 0; padding-left: 1.2rem; max-width: 46rem; }
.cm-about-limits li + li { margin-top: .3rem; }
@media (max-width: 56rem) { .cm-about-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 48rem) { .cm-about-uses { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .cm-about-chain { grid-template-columns: minmax(0, 1fr); } }

/* ---- 5. Landing page (Views/home/index.php) and the sign-in / registration dialog ---- */
.cm-landing { background: #fff; }
.cm-land-wrap { width: 100%; max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem; }
.cm-skip { position: absolute; z-index: 20; left: .5rem; top: .5rem; background: #fff; padding: .4rem .7rem; border-radius: .35rem; }
.cm-land-head { background: var(--cm-ink); padding-block: .8rem; position: sticky; top: 0; z-index: 10; }
.cm-land-nav { gap: 1.6rem; }
.cm-land-nav a { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 500; }
.cm-land-nav a:hover, .cm-land-nav a:focus { color: #fff; }
.cm-landing .btn-outline-light { --bs-btn-border-color: rgba(255, 255, 255, .45); }

.cm-hero { color: #fff; background-color: var(--cm-ink);
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(60rem 30rem at 85% 40%, var(--cm-petrol), transparent 70%);
    background-size: 3rem 3rem, 3rem 3rem, auto; border-bottom: 4px solid transparent; border-image: var(--cm-ramp) 1; }
.cm-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 2.5rem; align-items: center; padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.cm-hero-name { color: var(--cm-yellow); font-weight: 600; font-size: 1.05rem; margin: 0 0 .9rem; }
.cm-hero h1 { color: #fff; font-size: clamp(2.9rem, 6.4vw, 5rem); line-height: .98; letter-spacing: -.005em; margin: 0 0 1.2rem; text-wrap: balance; }
.cm-hero-lede { color: #c6d8dd; font-size: 1.2rem; line-height: 1.5; max-width: 34rem; margin: 0 0 1.8rem; }
.cm-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.cm-hero-actions .btn-lg { --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1.1rem; }
.cm-hero-flash { display: inline-block; background: rgba(255, 255, 255, .12); border-left: 3px solid var(--cm-yellow); padding: .4rem .8rem; margin: 0 0 1.2rem; }
.cm-hero-noscript { margin: 1rem 0 0; color: #c6d8dd; }
.cm-hero-noscript a { color: #fff; }
.cm-hero-figure { margin: 0; min-width: 0; }
.cm-hero-figure figcaption { color: #9fb8bf; font-size: .9rem; max-width: 36rem; margin-top: .4rem; }
.cm-plume { display: block; width: 100%; height: auto; overflow: visible; }
.cm-plume polygon { stroke-width: 1.6; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-plume-c3 { fill: rgba(245, 197, 24, .13); stroke: var(--cm-yellow); }
.cm-plume-c2 { fill: rgba(243, 154, 18, .22); stroke: var(--cm-amber); }
.cm-plume-c1 { fill: rgba(212, 52, 42, .5); stroke: #ff6a5c; }
.cm-plume-source { fill: #fff; }
.cm-plume-axis line, .cm-plume-wind line, .cm-plume-wind polyline { stroke: rgba(255, 255, 255, .45); stroke-width: 1; fill: none; }
.cm-plume-axis .cm-plume-centre { stroke: rgba(255, 255, 255, .18); stroke-dasharray: 3 5; }
.cm-plume text { fill: #b9ccd2; font-size: 12px; font-family: var(--bs-body-font-family); }
.cm-plume-labels text { fill: #fff; font-weight: 600; font-size: 13px; }
.cm-plume-labels .cm-plume-t3 { fill: var(--cm-yellow); }
@media (prefers-reduced-motion: no-preference) {
    .cm-plume polygon { animation: cm-draw 1.5s ease-out both, cm-fill 1.1s ease-out both; }
    .cm-plume-c2 { animation-delay: .25s, .55s; }
    .cm-plume-c3 { animation-delay: .5s, .9s; }
    .cm-plume-c1 { animation-delay: 0s, .25s; }
    @keyframes cm-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
    @keyframes cm-fill { from { fill-opacity: 0; } to { fill-opacity: 1; } }
}

.cm-band { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.cm-band-tint { background: var(--cm-paper); }
.cm-band h2, .cm-cta h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); margin: 0 0 .5rem; }
.cm-band-lede { color: var(--cm-muted); font-size: 1.1rem; max-width: 42rem; margin: 0 0 2rem; }
.cm-band [id], .cm-band[id] { scroll-margin-top: 5rem; }

.cm-steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; }
.cm-steps li { counter-increment: step; position: relative; padding: 1.1rem 1.25rem 0 0; border-top: 2px solid var(--cm-ink); }
.cm-steps li::before { content: counter(step); display: block; font-family: var(--cm-display); font-weight: 600; font-size: 2.6rem; line-height: 1; color: var(--cm-teal); margin-bottom: .5rem; }
.cm-steps li::after { content: ""; position: absolute; left: 0; top: -7px; width: 12px; height: 12px; border-radius: 50%; background: var(--cm-ink); }
.cm-steps li.cm-steps-out { border-top-color: var(--cm-amber); }
.cm-steps li.cm-steps-out::before { color: #b66a00; }
.cm-steps li.cm-steps-out::after { background: var(--cm-amber); }
.cm-steps h3 { font-size: 1.35rem; margin: 0 0 .3rem; }
.cm-steps p { margin: 0; color: var(--cm-muted); }

.cm-models { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.cm-model-group { background: #fff; border: 1px solid var(--cm-line); border-top: 4px solid var(--cm-teal); border-radius: 0 0 .6rem .6rem; padding: 1.1rem 1.25rem 1.25rem; min-width: 0; }
.cm-g-cloud { border-top-color: var(--cm-yellow); }
.cm-g-fire { border-top-color: var(--cm-amber); }
.cm-g-blast { border-top-color: var(--cm-red); }
.cm-model-group h3 { font-size: 1.5rem; margin: 0 0 .8rem; }
.cm-model-group dl { margin: 0; }
.cm-model-group dt { font-weight: 600; color: var(--cm-ink); }
.cm-model-group dd { margin: 0 0 .9rem; color: var(--cm-muted); }
.cm-model-group dd:last-child { margin-bottom: 0; }

.cm-uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem 2.5rem; margin-top: 1.6rem; }
.cm-uses > div { border-left: 3px solid var(--cm-line); padding-left: 1.1rem; min-width: 0; }
.cm-uses p { margin: 0; color: var(--cm-muted); }
.cm-uses .cm-q { font-family: var(--cm-display); font-weight: 500; font-size: 1.45rem; line-height: 1.15; color: var(--cm-ink); margin-bottom: .5rem; }
.cm-more { margin: 2rem 0 0; font-weight: 500; }

.cm-limits { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem 3rem; align-items: start; }
.cm-limits ul { margin: 0; padding: 0 0 0 1.5rem; border-left: 4px solid var(--cm-amber); list-style: none; max-width: 46rem; }
.cm-limits li { padding-left: 0; }
.cm-limits li + li { margin-top: .7rem; }
.cm-limits li:first-child { font-weight: 600; color: var(--cm-ink); font-size: 1.1rem; }

.cm-cta { background: var(--cm-ink); color: #fff; padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.cm-cta .cm-land-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem; }
.cm-cta h2 { color: #fff; margin: 0; }

.cm-access .modal-content { border: 0; border-radius: .8rem; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(4, 20, 26, .6); }
.cm-access-band { height: 5px; background: var(--cm-ramp); }
.cm-access .modal-header { border: 0; padding: 1.4rem 1.6rem .4rem; }
.cm-access .modal-title { font-size: 1.9rem; line-height: 1; }
.cm-access .modal-body { padding: .9rem 1.6rem 1.6rem; }
.cm-access .btn-primary { --bs-btn-padding-y: .6rem; }
.cm-access-switch { margin: 1.1rem 0 0; text-align: center; color: var(--cm-muted); }
.cm-access-switch .btn-link { padding: 0; vertical-align: baseline; font-weight: 600; }
.cm-access-terms { color: var(--cm-muted); font-size: .92rem; margin: 0 0 1rem; }
.cm-access-done { font-size: 1.1rem; margin: 0 0 1.4rem; }
.cm-access .invalid-feedback:empty { display: none; }
.cm-hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.modal-backdrop { --bs-backdrop-bg: #04141a; --bs-backdrop-opacity: .65; }

@media (max-width: 62rem) {
    .cm-hero-grid { grid-template-columns: minmax(0, 1fr); }
    .cm-models { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cm-steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .cm-steps li { border-top: 0; border-left: 2px solid var(--cm-ink); padding: 0 0 1.5rem 1.4rem; }
    .cm-steps li::after { left: -7px; top: 0; }
    .cm-steps li.cm-steps-out { border-left-color: var(--cm-amber); }
    .cm-steps li:last-child { padding-bottom: 0; }
    .cm-limits { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) {
    .cm-models, .cm-uses { grid-template-columns: minmax(0, 1fr); }
    .cm-brand { font-size: 1.4rem; }
}
@media print {
    .cm-navbar, .cm-land-head { display: none; }
}

/* Order of work on the project page, and the weather-case tabs of the calculation pages */
.cm-step { display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; border-radius: 50%;
    background: var(--cm-ink); color: #fff; font-family: var(--cm-display); font-weight: 600; font-size: .9em; margin-right: .35em; vertical-align: .05em; }
.cm-flow-step { display: inline-flex; align-items: center; padding: .3rem .7rem .3rem .35rem; border: 1px solid var(--cm-line); border-radius: 2rem;
    background: #fff; color: var(--cm-ink); text-decoration: none; }
a.cm-flow-step:hover { border-color: var(--cm-teal); color: var(--cm-teal-dark); }
.cm-weather-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem .75rem; margin-bottom: 1rem;
    background: #fff; border: 1px solid var(--cm-line); border-left: 4px solid var(--cm-teal); border-radius: .375rem; }
.cm-weather-bar .nav-link { padding: .25rem .7rem; }
.cm-weather-bar .cm-weather-text { color: var(--cm-muted); font-size: .875rem; }
.cm-worst { font-weight: 600 !important; color: #a1261e !important; }
.cm-run-steps { padding-left: 1.4rem; margin-bottom: 0; }
.cm-run-steps li { padding: .1rem 0; }
.cm-project-tabs .nav-link { font-family: var(--cm-display); font-weight: 600; font-size: 1.1rem; color: var(--cm-teal-dark); }
.cm-project-tabs .nav-link.active { color: var(--cm-ink); background: #fff; }
.cm-equip-card .card-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.cm-equip-meta { font-family: var(--bs-body-font-family); font-weight: 400; font-size: .875rem; color: var(--cm-muted); }
.cm-summary-table td.cm-scn { vertical-align: top; background: #fafcfc; }
/* Charts of the printed reports */
.cm-chart-box { position: relative; width: 100%; }
.cm-chart-s { height: 220px; } .cm-chart-m { height: 300px; } .cm-chart-l { height: 460px; }
.cm-chart-xl { height: 640px; } .cm-chart-xxl { height: 860px; }
.cm-report-chart { break-inside: avoid; page-break-inside: avoid; }
@media print { .cm-report-chart canvas { max-width: 100% !important; } }

/* Map pages (GIS) and the location picker */
.cm-map { width: 100%; background: #e8ecef; }
.cm-map-main { height: 70vh; min-height: 420px; }
.cm-map-pick { height: 340px; border: 1px solid var(--bs-border-color); border-radius: .375rem; }
.cm-pick-dot { background: #ffd23f; border: 2px solid #111; border-radius: 50%; }
/* place search of the location picker: a list under the search box; the pointer shows what can be chosen */
.cm-place-wrap { position: relative; }
.cm-place-list { position: absolute; z-index: 1100; left: 0; right: 0; top: 100%; max-height: 18rem; overflow-y: auto;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15); }
.cm-place { cursor: pointer; }
.cm-place.active .text-body-secondary { color: rgba(255, 255, 255, .85) !important; }
.cm-map-pick, .cm-map-pick .leaflet-grab, .cm-map-pick .leaflet-interactive { cursor: crosshair; }
.cm-map-pick .leaflet-marker-icon.cm-pick-dot { cursor: move; }
.cm-map-pick .leaflet-dragging .leaflet-grab { cursor: grabbing; }
.cm-map-card.is-full { display: flex; flex-direction: column; margin: 0 !important; border-radius: 0; background: var(--bs-body-bg); }
.cm-map-card.is-full > .card-body { flex: 0 0 auto; }
.cm-map-card.is-full > .card-body:last-child { display: none; }
.cm-map-card.is-full .cm-map-main { flex: 1 1 auto; height: auto; min-height: 0; }
.cm-map-card.cm-map-full { position: fixed; inset: 0; z-index: 2000; }
.cm-map-card:fullscreen { width: 100%; height: 100%; }
body.cm-noscroll { overflow: hidden; }
.cm-full-btn { font-size: 18px; line-height: 30px !important; text-align: center; font-weight: 700; color: #222 !important; }
.cm-map-legend { background: rgba(255, 255, 255, .94); color: #1b1f23; padding: .35rem .6rem; font-size: .78rem; line-height: 1.25;
                 max-width: 300px; max-height: 45vh; overflow-y: auto; }
.cm-map-legend summary { cursor: pointer; font-weight: 600; }
.cm-legend-body { margin-top: .25rem; }
.cm-legend-row { display: flex; align-items: center; gap: .4rem; padding: .08rem 0; }
.cm-legend-group { font-weight: 700; margin-top: .35rem; border-top: 1px solid #ccd; padding-top: .3rem; }
.cm-legend-title { font-weight: 600; margin-top: .25rem; color: #333; }
.cm-legend-key { margin-top: .15rem; }
.cm-legend-hint { color: #666; font-style: italic; margin-bottom: .15rem; }
.cm-legend-toggle { cursor: pointer; user-select: none; border-radius: .2rem; }
.cm-legend-toggle:hover { background: rgba(0, 0, 0, .06); }
.cm-legend-toggle:focus-visible { outline: 2px solid #2a78d6; outline-offset: 1px; }
.cm-legend-toggle.is-off { opacity: .45; text-decoration: line-through; }
.cm-legend-note { margin-left: auto; padding-left: .6rem; color: #555; white-space: nowrap; }
.cm-legend-swatch { flex: 0 0 auto; width: 18px; height: 10px; border: 2px solid; }
.cm-legend-dot { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #111; }
.cm-legend-release { background: #fff; }
.cm-legend-equipment { background: #ffd23f; border-width: 1px; }
.cm-legend-arrow { flex: 0 0 auto; width: 18px; height: 3px; background: #0b3d91; position: relative; }
.cm-legend-arrow::after { content: ''; position: absolute; right: -2px; top: -4px; border-left: 7px solid #0b3d91;
                          border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
@media print {
    .cm-map-main { height: 180mm; page-break-inside: avoid; }
    .leaflet-control-layers, .leaflet-control-zoom { display: none; }
    .cm-map-legend { max-height: none; overflow: visible; }
    .cm-legend-hint { display: none; }
}

/* Support requests */
.cm-break { overflow-wrap: anywhere; word-break: break-word; }
.cm-thread .cm-msg-staff { border-left: 4px solid var(--bs-success); }
.cm-thread .cm-msg-req { border-left: 4px solid var(--bs-warning); }
.cm-msg-body { white-space: normal; overflow-wrap: anywhere; }
.cm-footer a { color: inherit; }

/* Sign in with Google */
.cm-google { display: flex; align-items: center; justify-content: center; gap: .6rem; background: #fff; color: #1f1f1f; border-color: #c4c7c5; }
.cm-google:hover, .cm-google:focus { background: #f2f2f2; color: #1f1f1f; border-color: #a8abaa; }
.cm-or { display: flex; align-items: center; gap: .75rem; margin: 1rem 0; color: var(--bs-secondary-color); font-size: .85rem; }
.cm-or::before, .cm-or::after { content: ""; flex: 1; border-top: 1px solid var(--bs-border-color); }

/* Plans & billing: usage bars (width in steps of 5 %, no inline styles) */
.cm-w-0 { width: 0%; }
.cm-w-5 { width: 5%; }
.cm-w-10 { width: 10%; }
.cm-w-15 { width: 15%; }
.cm-w-20 { width: 20%; }
.cm-w-25 { width: 25%; }
.cm-w-30 { width: 30%; }
.cm-w-35 { width: 35%; }
.cm-w-40 { width: 40%; }
.cm-w-45 { width: 45%; }
.cm-w-50 { width: 50%; }
.cm-w-55 { width: 55%; }
.cm-w-60 { width: 60%; }
.cm-w-65 { width: 65%; }
.cm-w-70 { width: 70%; }
.cm-w-75 { width: 75%; }
.cm-w-80 { width: 80%; }
.cm-w-85 { width: 85%; }
.cm-w-90 { width: 90%; }
.cm-w-95 { width: 95%; }
.cm-w-100 { width: 100%; }
.cm-plan-features li { padding: .1rem 0; }
.cm-receipt { max-width: 760px; }

/* Icons (Bootstrap Icons): one colour per group - navigation teal, equipment and release blue, cloud yellow,
   fire amber, explosion red, toxic purple */
.cm-ico { display: inline-block; line-height: 1; vertical-align: -.125em; margin-right: .4rem; }
.cm-ico-teal { color: #0f8a8a; } .cm-ico-blue { color: #2b6cb0; } .cm-ico-yellow { color: #c99a06; } .cm-ico-amber { color: #dd6b20; }
.cm-ico-red { color: #c0392b; } .cm-ico-purple { color: #7b3fb5; } .cm-ico-green { color: #2f855a; } .cm-ico-grey { color: #5f7480; }
.cm-ico-inherit { color: inherit; }
.cm-navbar .nav-link .cm-ico, .cm-navbar .navbar-nav > .nav-item > .nav-link .cm-ico { color: #ffd23f; opacity: .95; }
.dropdown-item .cm-ico { width: 1.15rem; text-align: center; }
.dropdown-item:active .cm-ico, .dropdown-item.active .cm-ico, .nav-link.active .cm-ico-inherit, .btn .cm-ico-inherit { color: inherit; }
.btn .cm-ico { margin-right: .35rem; }
.cm-icobox { display: inline-flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border-radius: .7rem;
    background: #eef6f6; flex: 0 0 auto; }
.cm-icobox .cm-ico { margin: 0; font-size: 1.2rem; }
.cm-icobox-lg { width: 3.2rem; height: 3.2rem; border-radius: .9rem; }
.cm-icobox-lg .cm-ico { font-size: 1.6rem; }
.cm-icobox:has(.cm-ico-blue) { background: #eaf2fb; } .cm-icobox:has(.cm-ico-yellow) { background: #fdf6dc; }
.cm-icobox:has(.cm-ico-amber) { background: #fdeee2; } .cm-icobox:has(.cm-ico-red) { background: #fbe9e7; }
.cm-icobox:has(.cm-ico-purple) { background: #f3ebfa; } .cm-icobox:has(.cm-ico-green) { background: #e8f5ee; }
.cm-icobox:has(.cm-ico-grey) { background: #eef2f4; }
.cm-tiles .card-body { display: flex; align-items: center; gap: .9rem; }
.cm-start-item { display: flex; gap: .9rem; align-items: flex-start; }
.cm-project-tabs .nav-link .cm-ico { margin-right: .3rem; }
.cm-outcome { display: inline-flex; align-items: center; white-space: nowrap; margin-right: .5rem; }
.cm-outcome .cm-ico { margin-right: .2rem; }
.cm-equip-card .card-header .cm-icobox { width: 2rem; height: 2rem; border-radius: .55rem; margin-right: .5rem; }
.cm-equip-card .card-header .cm-icobox .cm-ico { font-size: 1rem; }
h2 .cm-ico { font-size: .95em; }
.btn-primary .cm-ico, .btn-danger .cm-ico, .btn-success .cm-ico, .btn-warning .cm-ico, .nav-pills .nav-link.active .cm-ico { color: inherit; }

/* Guided tour (partials/tour.php) */
.cm-tour .modal-body { background: #f4f8f9; }
.cm-tour-grid { display: grid; grid-template-columns: 17rem minmax(0, 1fr); min-height: 32rem; }
.cm-tour-steps { border-right: 1px solid var(--bs-border-color); background: #fff; padding: .75rem; overflow-y: auto; max-height: 75vh; }
.cm-tour-step { display: flex; align-items: center; gap: .65rem; width: 100%; border: 0; background: transparent; text-align: left;
    padding: .45rem .55rem; border-radius: .6rem; color: var(--bs-body-color); font-size: .9rem; cursor: pointer; }
.cm-tour-step:hover { background: #eef6f6; }
.cm-tour-step.active { background: #0c2b36; color: #fff; }
.cm-tour-step.active .cm-icobox { background: rgba(255, 255, 255, .12); }
.cm-tour-step.active .cm-ico { color: #ffd23f; }
.cm-tour-step .cm-icobox { width: 2rem; height: 2rem; border-radius: .55rem; }
.cm-tour-step .cm-icobox .cm-ico { font-size: 1rem; }
.cm-tour-num { font-weight: 600; margin-right: .35rem; opacity: .7; }
.cm-tour-stage { padding: 1.25rem 1.5rem; }
.cm-tour-shot { margin: 0; border-radius: .6rem; overflow: hidden; border: 1px solid var(--bs-border-color);
    box-shadow: 0 .6rem 1.6rem rgba(12, 43, 54, .16); background: #fff; aspect-ratio: 16 / 10; }
.cm-tour-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cm-tour-dots { display: flex; gap: .3rem; margin-right: .5rem; }
.cm-tour-dots span { width: .5rem; height: .5rem; border-radius: 50%; background: #c9d6da; }
.cm-tour-dots span.active { background: #0f8a8a; width: 1.2rem; border-radius: .25rem; }
@media (max-width: 62rem) {
    .cm-tour-grid { grid-template-columns: minmax(0, 1fr); }
    .cm-tour-steps { display: none; }
    .cm-tour-stage { padding: 1rem; }
    .cm-tour-dots { display: none; }
}

/* Visitor analytics */
.cm-analytics-map { height: 430px; }
.cm-ana-chart { position: relative; height: 240px; }
.cm-bars li { margin-bottom: .55rem; }
.cm-bar { height: .45rem; background: #edf2f4; border-radius: .25rem; overflow: hidden; margin-top: .15rem; }
.cm-bar span { display: block; height: 100%; background: #0f8a8a; border-radius: .25rem; }
.cm-ana-legend { background: rgba(255, 255, 255, .92); padding: .25rem .5rem; border-radius: .35rem; font-size: .75rem; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.cm-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; border: 1px solid #0c2b36; vertical-align: -.1em; }
.cm-dot-user { background: #0f8a8a; } .cm-dot-visitor { background: #dd6b20; }
.cm-ana-recent { max-height: 32rem; overflow-y: auto; }
.cm-navbar .navbar-nav .nav-link { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1499.98px) {
    .cm-navbar .navbar-nav .nav-link { padding-left: .4rem; padding-right: .4rem; }
    .cm-navbar .navbar-nav .nav-link > .cm-ico { margin-right: .25rem; }
    .cm-navbar .cm-user-name { display: inline-block; max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
    .cm-navbar .cm-role { display: none; }
}
@media (min-width: 1200px) and (max-width: 1359.98px) {
    .cm-navbar .navbar-nav .nav-link > .cm-ico { display: none; }
    .cm-navbar .navbar-nav .nav-link { padding-left: .35rem; padding-right: .35rem; }
    .cm-navbar .cm-user-name { max-width: 7rem; }
}