/* --------------------------------------------------------------------------
   Caenode — application styles

   Hand-written rather than Bootstrap. First-load size is the one real risk of
   a WASM app, and the framework CSS would be a larger download than everything
   this file needs.

   LIGHT ONLY, on purpose. There is deliberately no `prefers-color-scheme: dark`
   block: an engineer reading a pressure table wants the same paper-like page
   whatever their operating system is set to, and a dark variant that nobody
   reviewed is worse than none. `color-scheme: light` below also stops the
   browser from darkening form controls on a dark-mode machine — without it the
   inputs go black even though the page does not.

   Accent colours are sampled from the logo; the greys are warm rather than
   blue-grey, which keeps large light surfaces from looking clinical.
   -------------------------------------------------------------------------- */

:root {
    color-scheme: light;

    /* Brand, from the logo */
    --teal: #0e9ea8;
    --green: #6ed162;
    --purple: #7d5fee;
    --indigo: #2f2eb7;

    /* Softened for text and fills: the raw logo indigo is too heavy at body size */
    --brand-ink: #1d6f8b;
    --brand-gradient: linear-gradient(100deg, var(--teal), var(--green));
    --brand-wash: #eefaf8;

    /* Surfaces — warm, high-key */
    --bg: #fbfcfd;
    --surface: #ffffff;
    --surface-2: #f4f7f9;
    --surface-3: #eef3f6;
    --border: #e4eaee;
    --border-strong: #cfd9e0;

    /* Text — dark slate, never true black */
    --text: #263241;
    --text-muted: #5d6b7a;
    --text-faint: #8b98a5;

    /* Status — muted, not alarming */
    --danger: #b4453c;
    --danger-bg: #fdf0ee;
    --danger-border: #f2ccc6;
    --warn: #8a6212;
    --warn-bg: #fdf6e6;
    --warn-border: #efdfb8;
    --info-bg: #f0f6fb;
    --info-border: #d6e6f2;

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(38, 50, 65, .04);
    --shadow: 0 1px 2px rgba(38, 50, 65, .04), 0 6px 20px rgba(38, 50, 65, .05);

    --sidebar-w: 250px;

    --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--sans);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { line-height: 1.28; margin: 0 0 .5rem; font-weight: 640; letter-spacing: -.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 1rem; }
a { color: var(--brand-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- layout -- */

.shell { display: flex; min-height: 100vh; }

.shell-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.content {
    flex: 1;
    padding: 1.75rem 2rem 3rem;
    max-width: 1180px;
    width: 100%;
    margin-inline: auto;
}

.topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 2rem;
    border-bottom: 1px solid var(--border);
    background: rgba(255, 255, 255, .88);
    backdrop-filter: saturate(1.4) blur(6px);
    position: sticky;
    top: 0;
    z-index: 20;
}

.topbar-spacer { flex: 1; }

.account { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.account-name { font-size: .86rem; color: var(--text-muted); }
.account-link { display: flex; align-items: center; gap: .5rem; color: inherit; }
.account-link:hover { text-decoration: none; opacity: .8; }

.plan-chip {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    padding: .12rem .55rem;
    border-radius: 999px;
    background: var(--brand-gradient);
    color: #fff;
}

.footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 2rem;
    border-top: 1px solid var(--border);
    font-size: .78rem;
    color: var(--text-faint);
}

.footer-warning { font-style: italic; }

/* --------------------------------------------------------------- sidebar -- */

.sidebar {
    width: var(--sidebar-w);
    flex-shrink: 0;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    padding: 1.1rem .75rem;
    gap: 1.4rem;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.brand { display: block; padding: .2rem .5rem 0; }
.brand:hover { text-decoration: none; }
.brand-logo { width: 100%; max-width: 168px; height: auto; display: block; }

.nav-group { display: flex; flex-direction: column; gap: .12rem; }

.nav-group-title {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-faint);
    padding: 0 .65rem .35rem;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .48rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: .9rem;
    font-weight: 500;
}

.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }

.nav-item.active {
    background: var(--brand-wash);
    color: var(--brand-ink);
    font-weight: 600;
}

.nav-item.disabled { color: var(--text-faint); cursor: default; }
.nav-item.disabled:hover { background: none; color: var(--text-faint); }

.nav-icon { width: 1.1rem; text-align: center; opacity: .75; font-size: .95rem; }

.badge {
    margin-left: auto;
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .1rem .42rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-faint);
}

.nav-footer { margin-top: auto; padding: .65rem; }
.nav-note { font-size: .74rem; color: var(--text-faint); line-height: 1.5; }

.nav-toggle { display: none; }

/* --------------------------------------------------------------- buttons -- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    font-size: .88rem;
    cursor: pointer;
    transition: filter .12s ease, background .12s ease, border-color .12s ease;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: none; }

.btn-sm { padding: .36rem .75rem; font-size: .82rem; }

.btn-primary { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { filter: brightness(1.05); }

.btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--surface-2); }

.btn-ghost { background: var(--surface-2); color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }

.icon-btn { background: none; border: none; cursor: pointer; padding: .4rem; color: var(--text); }

/* ----------------------------------------------------------------- cards -- */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow);
}

.card + .card { margin-top: 1.25rem; }

.card-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .9rem;
}

.card-title h2 { margin: 0; }
.card-subtitle { font-size: .8rem; color: var(--text-faint); }

/* ----------------------------------------------------------------- forms -- */

.field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .9rem 1.1rem;
}

.field { display: flex; flex-direction: column; gap: .3rem; }

.field label { font-size: .8rem; font-weight: 600; color: var(--text-muted); }

.field .hint, .hint { font-size: .74rem; color: var(--text-faint); }

.field input,
.field select {
    font: inherit;
    font-size: .9rem;
    padding: .48rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    width: 100%;
}

.field input:hover,
.field select:hover { border-color: #b9c7d1; }

.field input:focus,
.field select:focus {
    outline: 3px solid rgba(14, 158, 168, .18);
    outline-offset: 0;
    border-color: var(--teal);
}

.symbol { font-family: var(--mono); font-size: .95em; }

/* ---------------------------------------------------------------- tables -- */

.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
    font-variant-numeric: tabular-nums;
}

table.data th,
table.data td {
    padding: .48rem .6rem;
    text-align: right;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

table.data th {
    font-size: .71rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-faint);
    font-weight: 700;
    border-bottom: 1px solid var(--border-strong);
    background: var(--surface-2);
}

table.data th:first-child,
table.data td:first-child { text-align: left; }

table.data tbody tr:hover { background: var(--surface-2); }

.zone-tag {
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
    font-family: var(--mono);
    font-weight: 700;
    padding: .05rem .38rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
}

/* A is the suction peak and D the pressure peak — the two rows an engineer
   looks for first, so they get a tint. The rest stay neutral. */
.zone-A { background: #fdefec; border-color: #f3d2cb; color: #a2493f; }
.zone-D { background: #ecf8f0; border-color: #c9e6d3; color: #2c7048; }

.num-negative { color: var(--danger); }

/* -------------------------------------------------------------- messages -- */

.messages { display: flex; flex-direction: column; gap: .45rem; margin-top: .9rem; }

.message {
    display: flex;
    gap: .55rem;
    padding: .58rem .8rem;
    border-radius: var(--radius-sm);
    font-size: .83rem;
    border: 1px solid transparent;
}

.message-error { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.message-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.message-info { background: var(--info-bg); border-color: var(--info-border); color: var(--text-muted); }

.message .clause { font-family: var(--mono); font-size: .76rem; opacity: .8; }

/* ----------------------------------------------------------------- trace -- */

details.trace { margin-top: 1rem; }

details.trace > summary {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: .4rem .6rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    list-style-position: inside;
}

details.trace > summary:hover { background: var(--surface-3); color: var(--text); }

table.trace-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: .78rem;
    margin-top: .6rem;
}

table.trace-table td {
    padding: .32rem .5rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

table.trace-table tr:nth-child(odd) td { background: var(--surface-2); }

table.trace-table .t-symbol { font-weight: 700; white-space: nowrap; color: var(--brand-ink); }
table.trace-table .t-expr { color: var(--text-muted); word-break: break-word; }
table.trace-table .t-value { text-align: right; white-space: nowrap; }
table.trace-table .t-clause { color: var(--text-faint); white-space: nowrap; font-size: .72rem; }

/* ------------------------------------------------------- language picker -- */

.lang { position: relative; }

.lang-button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.lang-button:hover { background: var(--surface-2); }

.flag {
    width: 20px;
    height: 14px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
    border: 1px solid rgba(38, 50, 65, .12);
}

.lang-code { letter-spacing: .02em; }
.caret { font-size: .6rem; opacity: .55; }

/* Catches the click that closes the menu, without any JS document listener. */
.lang-backdrop { position: fixed; inset: 0; z-index: 30; }

.lang-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 31;
    margin: 0;
    padding: .25rem;
    list-style: none;
    min-width: 168px;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.lang-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    width: 100%;
    padding: .4rem .5rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    text-align: left;
}

.lang-option:hover { background: var(--surface-2); }
.lang-option.selected { font-weight: 650; background: var(--brand-wash); color: var(--brand-ink); }

/* ------------------------------------------------------------- home page -- */

.hero {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: 2.5rem;
    align-items: center;
    padding: 1rem 0 2.5rem;
}

.hero h1 { font-size: 2.1rem; letter-spacing: -.02em; }

.hero-lead { font-size: 1rem; color: var(--text-muted); max-width: 48ch; }

.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }

.hero-art { display: flex; justify-content: center; }
.hero-art img { width: 100%; max-width: 300px; height: auto; }

.gradient-text {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.tile {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.15rem;
    box-shadow: var(--shadow-sm);
}

.tile h3 { margin-bottom: .35rem; }
.tile p { font-size: .87rem; color: var(--text-muted); margin: 0; }

a.tile-link { color: inherit; display: block; transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
a.tile-link:hover { text-decoration: none; border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow); }

.tile-status {
    display: inline-block;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .14rem .5rem;
    border-radius: 999px;
    margin-bottom: .6rem;
}

.status-ready { background: var(--brand-gradient); color: #fff; }
.status-new { background: var(--purple); color: #fff; }

.section { margin-top: 2.5rem; }
.section > h2 { margin-bottom: 1rem; }

/* ------------------------------------------------------------ empty state -- */

.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--text-muted); }
.empty-state h1 { margin-bottom: .5rem; color: var(--text); }
.empty-state p { max-width: 46ch; margin-inline: auto; }
.empty-state .btn { margin-top: 1rem; }

/* Session fault: two ordinary buttons side by side, not two full-width bars, and the
   request trace in a quiet monospace block a screenshot can carry. */
.session-fault-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin-top: .4rem; }
.session-fault-actions .btn { margin-top: 0; }
.session-fault-trace {
    max-width: 640px; margin: 1.6rem auto 0; text-align: left;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
}
.session-fault-trace-head {
    padding: .5rem .8rem; border-bottom: 1px solid var(--border);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
}
.session-fault-trace pre {
    margin: 0; padding: .7rem .8rem; white-space: pre-wrap; word-break: break-word;
    font: .78rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--text);
}

.summary-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .9rem;
    margin-bottom: 1.1rem;
}

.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem .9rem;
    box-shadow: var(--shadow-sm);
}

.stat-label { font-size: .71rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); font-weight: 700; }
.stat-value { font-size: 1.3rem; font-weight: 640; font-variant-numeric: tabular-nums; margin-top: .15rem; }
.stat-unit { font-size: .8rem; color: var(--text-faint); font-weight: 400; margin-left: .2rem; }

/* ------------------------------------------------------------ login page -- */

.login-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    /* Fills the space left between the sticky top bar and the footer, so the card sits
       in the optical centre of the page rather than clinging to the top of it. */
    min-height: calc(100vh - 180px);
    padding: 2rem 1rem 3rem;
}

.login-card {
    width: 100%;
    max-width: 430px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 1.9rem 1.6rem;
    text-align: center;
}

.login-logo { width: 176px; max-width: 70%; height: auto; margin-bottom: 1.4rem; }
.login-card h1 { font-size: 1.3rem; }
.login-body { color: var(--text-muted); font-size: .9rem; }

.login-actions { display: flex; flex-direction: column; gap: .6rem; margin: 1.4rem 0 1.1rem; }

.btn-provider {
    background: var(--surface);
    border: 1px solid var(--border-strong);
    color: var(--text);
    padding: .68rem 1rem;
    font-size: .92rem;
    justify-content: flex-start;
    gap: .7rem;
}

.btn-provider:hover { background: var(--surface-2); }

.provider-mark {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    font-size: .78rem;
    font-weight: 700;
    color: var(--text-muted);
    line-height: 1;
}

/*
   A neutral monogram, not the providers' own marks. Both are trademarks with
   published usage rules, and a hand-drawn look-alike is the wrong thing to ship.
   Download the official assets, save them as wwwroot/img/google.svg and
   wwwroot/img/microsoft.svg, and uncomment the two rules below — nothing else
   needs to change.

.provider-mark {
    background: none;
    border: none;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.provider-mark.google { background-image: url("../img/google.svg"); }
.provider-mark.microsoft { background-image: url("../img/microsoft.svg"); }
*/

.login-note { font-size: .76rem; color: var(--text-faint); margin: 0 0 1.1rem; }
.login-skip { font-size: .84rem; color: var(--text-muted); }

/* ----------------------------------------------------------- responsive -- */

@media (max-width: 900px) {
    .hero { grid-template-columns: 1fr; gap: 1.5rem; }
    .hero-art { order: -1; justify-content: flex-start; }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 40;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--shadow);
    }

    .shell.nav-open .sidebar { transform: none; }

    .nav-toggle { display: block; }
    .nav-toggle span {
        display: block;
        width: 20px;
        height: 2px;
        margin: 4px 0;
        background: var(--text-muted);
        border-radius: 2px;
    }

    .content { padding: 1.25rem 1rem 2.5rem; }
    .topbar { padding: .6rem 1rem; }
    .footer { padding: 1rem; }
}

/* ------------------------------------------------------------- start-up -- */

.loading-splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.1rem;
    min-height: 100vh;
    padding: 2rem;
    background: var(--bg);
}

.loading-splash img { width: 210px; max-width: 60vw; height: auto; }

.loading-bar {
    width: 210px;
    max-width: 60vw;
    height: 3px;
    border-radius: 3px;
    background: var(--surface-3);
    overflow: hidden;
}

.loading-bar::after {
    content: "";
    display: block;
    width: 40%;
    height: 100%;
    background: var(--brand-gradient);
    animation: slide 1.1s ease-in-out infinite;
}

@keyframes slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(250%); }
}

.loading-text { font-size: .82rem; color: var(--text-faint); }

/* Blazor's own error strip */
#blazor-error-ui {
    background: var(--warn-bg);
    border-top: 1px solid var(--warn-border);
    color: var(--warn);
    bottom: 0;
    display: none;
    left: 0;
    padding: .7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
    font-size: .85rem;
}

#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .6rem; font-size: 1.1rem; }

/* ============================================================================
   PRINT — the report sheet
   ============================================================================

   The PDF is produced by the browser's own print pipeline rather than by a
   JavaScript PDF library. Three reasons, in order of weight:

   1. Turkish. The base-14 PDF fonts use WinAnsi encoding, which has no ş, ğ, ı
      or İ. Getting them into a hand-built PDF means embedding and subsetting a
      TrueType font; getting them out of the browser means doing nothing at all.
   2. Weight. pdfmake plus its bundled font file is roughly 2 MB — on an app
      whose one real risk is first-load size, for a feature most sessions never
      use.
   3. Fidelity. What is printed is the same document that was reviewed on
      screen, laid out by the same engine. No second renderer to disagree with
      the first.

   The cost is that the user passes through the print dialog and picks
   "Save as PDF". If a one-click download is wanted later, this stylesheet stays
   as the fallback and the library goes alongside it.
   ============================================================================ */

.print-only { display: none; }

@media print {
    @page {
        size: A4 portrait;
        margin: 16mm 14mm;
    }

    /* Everything that exists to be clicked has no business on paper.
       .site-footer replaced the old .footer and was missing from this list, so four
       columns of navigation links were printing as a third page of every report. If a
       new piece of page furniture is added, it belongs here on the same commit. */
    .sidebar,
    .topbar,
    .footer,
    .site-footer,
    .consent-bar,
    .consent-panel,
    .consent-backdrop,
    .usermenu-panel,
    .usermenu-backdrop,
    .lang-menu,
    .lang-backdrop,
    .no-print,
    .offline-pill,
    .sw-update,
    #blazor-error-ui { display: none !important; }

    html, body {
        background: #fff;
        color: #000;
        font-size: 9.5pt;
        line-height: 1.35;
    }

    .shell { display: block; }
    .shell-main { display: block; }

    .content {
        display: block;
        padding: 0;
        margin: 0;
        max-width: none;
    }

    .print-only { display: block !important; }

    /* ---- report head ---- */

    .report-head {
        display: flex;
        align-items: center;
        gap: 10mm;
        border-bottom: 1.2pt solid #000;
        padding-bottom: 3mm;
        margin-bottom: 4mm;
    }

    .report-logo { width: 38mm; height: auto; }

    .report-head-text h1 {
        font-size: 15pt;
        margin: 0 0 1mm;
        letter-spacing: -.01em;
    }

    .report-standard { font-size: 8.5pt; color: #444; }

    /* ---- meta block ---- */

    .report-meta {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
        margin-bottom: 6mm;
    }

    .report-meta th,
    .report-meta td {
        border: .4pt solid #999;
        padding: 1.4mm 2mm;
        text-align: left;
        vertical-align: top;
    }

    .report-meta th {
        background: #f0f0f0;
        font-weight: 700;
        width: 22mm;
        white-space: nowrap;
    }

    /* ---- section headings ---- */

    .report h2 {
        font-size: 10.5pt;
        margin: 6mm 0 2mm;
        padding-bottom: 1mm;
        border-bottom: .6pt solid #666;
        break-after: avoid;
        page-break-after: avoid;
    }

    /* ---- tables ---- */

    .report-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8.5pt;
        margin-bottom: 2mm;
    }

    .report-table th,
    .report-table td {
        border: .4pt solid #999;
        padding: 1.1mm 1.8mm;
        text-align: left;
        vertical-align: top;
    }

    .report-table thead th {
        background: #ececec;
        font-weight: 700;
        white-space: nowrap;
    }

    .report-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .report-table .sym { font-family: var(--mono); font-size: 8pt; white-space: nowrap; }
    .report-table .expr { white-space: normal; word-break: break-word; }

    .report-table.two-col th { background: #f5f5f5; width: 26mm; font-weight: 700; }

    .report-table.trace { font-size: 7.8pt; }

    /* A header row repeated on every page is the difference between a report and
       a pile of numbers. Rows must not be sliced in half across a page break. */
    .report-table thead { display: table-header-group; }
    .report-table tfoot { display: table-footer-group; }
    .report-table tr { break-inside: avoid; page-break-inside: avoid; }

    .report-note {
        font-size: 8pt;
        color: #333;
        margin: 1mm 0 0;
    }

    /* ---- foot ---- */

    .report-foot {
        margin-top: 8mm;
        padding-top: 2.5mm;
        border-top: .6pt solid #666;
        font-size: 7.5pt;
        color: #333;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    .report-foot p { margin: 0 0 1mm; }
    .report-foot-meta { color: #666; }

    a { color: inherit; text-decoration: none; }
}

/* ------------------------------------------------------- project actions -- */

.card-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.save-status { font-size: .8rem; color: var(--text-muted); }

.row-actions { display: flex; gap: .35rem; justify-content: flex-end; white-space: nowrap; }

.btn-danger {
    background: var(--danger-bg);
    border-color: var(--danger-border);
    color: var(--danger);
}

.btn-danger:hover { background: #fbe3df; }

.login-local-note {
    font-size: .8rem;
    color: var(--text-muted);
    background: var(--brand-wash);
    border: 1px solid #cdeceb;
    border-radius: var(--radius-sm);
    padding: .6rem .75rem;
    margin: 0 0 1rem;
    text-align: left;
}


/* ============================================================================
   ICONS AND RICHER SURFACES

   The first pass used text glyphs for icons and one flat card for everything,
   which read as unfinished. What follows adds a real icon system and gives cards
   a hierarchy: an accent rail for sections that matter, a tinted medallion for
   the thing a card is about, and a lift on the ones you can click.

   Restraint still applies — this is a tool an engineer stares at for an hour,
   not a landing page. Nothing here animates on load, and nothing carries colour
   that does not mean something.
   ============================================================================ */

.icon { flex-shrink: 0; display: block; }

/* A tinted circle behind an icon. Size and hue say what kind of thing it marks. */
.icon-badge {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--brand-wash);
    color: var(--brand-ink);
    flex-shrink: 0;
}

.icon-badge.lg { width: 46px; height: 46px; border-radius: 13px; }
.icon-badge.sm { width: 30px; height: 30px; border-radius: 9px; }

.icon-badge.accent { background: var(--brand-gradient); color: #fff; }
.icon-badge.muted { background: var(--surface-2); color: var(--text-faint); border: 1px solid var(--border); }
.icon-badge.violet { background: #efeefc; color: #4b49c9; }
.icon-badge.warm { background: #fdf0ee; color: var(--danger); }
.icon-badge.amber { background: #fbf1de; color: #8a5a12; }

/* ---- cards with more structure ---- */

.card-head {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1rem;
}

.card-head .card-head-text { flex: 1; min-width: 0; }
.card-head h2 { margin: 0 0 .1rem; }
.card-head p { margin: 0; font-size: .82rem; color: var(--text-faint); }

/* An accent rail marks the card that carries the result, not the inputs. */
.card-accent {
    position: relative;
    overflow: hidden;
}

.card-accent::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: var(--brand-gradient);
}

.card-accent.warn::before { background: var(--warn); }
.card-accent.danger::before { background: var(--danger); }

/* ---- tiles ---- */

.tile {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.tile-icon { margin-bottom: .75rem; }

.tile-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .35rem;
}

.tile-head h3 { margin: 0; }

a.tile-link { position: relative; }

a.tile-link .tile-go {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    color: var(--text-faint);
    opacity: 0;
    transform: translateX(-3px);
    transition: opacity .12s ease, transform .12s ease;
}

a.tile-link:hover .tile-go { opacity: 1; transform: none; }

/* ---- stat tiles ---- */

.stat {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.stat-body { min-width: 0; }

.stat.is-good .icon-badge { background: #ecf8f0; color: #2c7048; }
.stat.is-warn .icon-badge { background: var(--warn-bg); color: var(--warn); }
.stat.is-bad .icon-badge { background: var(--danger-bg); color: var(--danger); }

/* ---- nav ---- */

.nav-item .icon { opacity: .7; }
.nav-item.active .icon { opacity: 1; }
.nav-item.disabled .icon { opacity: .45; }

/* ---- buttons carrying an icon ---- */

.btn .icon { margin-right: -.1rem; }

/* ---- inline message icons ---- */

.message { align-items: flex-start; }
.message .icon { margin-top: .1rem; }

/* ---- section heading with an icon ---- */

.section-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem;
}

.section-head h2 { margin: 0; }

/* ============================================================================
   CHARTS
   ============================================================================

   Palette validated with the dataviz colour checks against the card surface:
   lightness band, chroma floor, colour-vision separation (worst adjacent pair
   ΔE 18.2 deutan), normal-vision floor and contrast all pass. The logo indigo
   #2f2eb7 failed the lightness band and was lifted to #5a58e0 to pass.
   ============================================================================ */

:root {
    --series-1: #0e9ea8;   /* measured quantity — vapour pressure, temperature */
    --series-2: #5a58e0;   /* the limit it is judged against — saturation */
    --series-critical: #b4453c;
}

.chart { margin: 0 0 1.5rem; }

.chart figcaption {
    font-size: .8rem;
    font-weight: 650;
    color: var(--text-muted);
    margin-bottom: .4rem;
}

.chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.chart-svg .axis { stroke: var(--border-strong); stroke-width: 1; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .grid-zero { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 3; }

.chart-svg .tick {
    font-family: var(--sans);
    font-size: 10px;
    fill: var(--text-faint);
    text-anchor: end;
}

.chart-svg .tick-zero { text-anchor: start; }
.chart-svg .axis-title { text-anchor: start; font-size: 10px; }
.chart-svg .axis-title.end { text-anchor: end; }

.chart-svg .series { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-1 { stroke: var(--series-1); }
.chart-svg .series-2 { stroke: var(--series-2); }
.chart-svg .series-critical { stroke: var(--series-critical); }
.chart-svg .dashed { stroke-dasharray: 6 4; }

/* The allowable value a diagram is judged against: present, but never competing with
   the data for attention. Dashed so it reads as a rule rather than as a measurement. */
.chart-svg .grid-limit {
    stroke: var(--series-critical);
    stroke-width: 1;
    stroke-dasharray: 5 4;
    opacity: .7;
}

/* A surface-coloured ring keeps overlapping markers readable where the two
   lines meet — which on a Glaser diagram is exactly the interesting place. */
.chart-svg .marker { stroke: var(--surface); stroke-width: 2; }
.chart-svg .marker-1 { fill: var(--series-1); }
.chart-svg .marker-2 { fill: var(--series-2); }
.chart-svg .marker-critical { fill: var(--series-critical); }

.chart-svg .marker-condensation {
    fill: none;
    stroke: var(--series-critical);
    stroke-width: 2;
}

.chart-svg .direct-label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 650;
    text-anchor: start;
}

.chart-svg .direct-label.end { text-anchor: end; }
.chart-svg .label-1 { fill: var(--series-1); }
.chart-svg .label-2 { fill: var(--series-2); }

.chart-legend {
    display: flex;
    gap: 1.1rem;
    flex-wrap: wrap;
    font-size: .78rem;
    color: var(--text-muted);
    margin-top: .3rem;
}

.legend-item { display: inline-flex; align-items: center; gap: .4rem; }

.swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

.swatch-1 { background: var(--series-1); }

/* The dashes are the point: identity must survive greyscale and colour blindness. */
.swatch-2 {
    background: repeating-linear-gradient(
        to right, var(--series-2) 0 5px, transparent 5px 8px);
}

.swatch-condensation {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: none;
    border: 2px solid var(--series-critical);
}

/* ---------------------------------------------------------- layer editor -- */

table.layer-table input {
    font: inherit;
    font-size: .82rem;
    padding: .28rem .4rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    width: 100%;
    min-width: 68px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

table.layer-table input:focus {
    outline: 3px solid rgba(14, 158, 168, .18);
    border-color: var(--teal);
}

table.layer-table .cell-name { min-width: 190px; }
table.layer-table .cell-name input { text-align: left; }

/* Values the engine derives, not values you type — flat, so the difference is obvious. */
table.layer-table .cell-derived { color: var(--text-faint); font-variant-numeric: tabular-nums; }

.layer-add {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: center;
    margin: 1rem 0 .6rem;
}

.layer-add select {
    font: inherit;
    font-size: .86rem;
    padding: .38rem .55rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    min-width: 220px;
}

/* A row where the profile has been pulled onto the saturation curve. */
tr.row-alert td { background: var(--danger-bg); }
tr.row-alert:hover td { background: #fbe3df; }

/* --------------------------------------------------------------------------
   Project list: page header with actions, and the sync state chip.

   The chip carries an icon as well as a colour, because "not uploaded" and
   "synced" must be distinguishable without relying on colour alone — and on a
   printed or forced-colours page the colour is gone entirely.
   -------------------------------------------------------------------------- */

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-head h1 { margin-bottom: 0; }

.page-head-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
}

.sync-state {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .18rem .5rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-muted);
}

.sync-state.is-synced { background: #ecf8f0; border-color: #cbe8d6; color: #2c7048; }
.sync-state.is-pending { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.sync-state.is-cloud { background: #efeefc; border-color: #dedcf7; color: #4b49c9; }

/* ------------------------------------------------------------- top bar -- */
/* The account cluster: social links, language, avatar menu. Built to survive a
   narrow window — at phone width the name drops away and only the avatar stays,
   because a top bar that wraps onto two lines pushes the page content down. */

.social { display: inline-flex; align-items: center; gap: .25rem; }

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    opacity: .75;
    transition: opacity .12s ease, background .12s ease;
}

.social-link:hover { opacity: 1; background: var(--surface-2); }
.social-link img { display: block; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 999px;
    object-fit: cover;
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 650;
    letter-spacing: .02em;
    user-select: none;
}

.avatar-initials { line-height: 1; }

.usermenu { position: relative; }

.usermenu-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .22rem .5rem .22rem .22rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .86rem;
    cursor: pointer;
}

.usermenu-button:hover,
.usermenu-button.open { background: var(--surface-2); }

.usermenu-name {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 550;
}

.usermenu-backdrop { position: fixed; inset: 0; z-index: 30; }

.usermenu-panel {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 31;
    min-width: 258px;
    padding: .35rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.usermenu-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .6rem .6rem .5rem;
}

.usermenu-head-text { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.usermenu-head-text strong { font-size: .9rem; }

.usermenu-head-text strong,
.usermenu-head-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usermenu-head-text span { font-size: .78rem; color: var(--text-faint); }

.usermenu-plan { padding: 0 .6rem .5rem; }

.usermenu-items { display: flex; flex-direction: column; }

.usermenu-items a,
.usermenu-items button {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .6rem;
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--text);
    font: inherit;
    font-size: .86rem;
    text-align: start;
    cursor: pointer;
}

.usermenu-items a:hover,
.usermenu-items button:hover { background: var(--surface-2); text-decoration: none; }

.usermenu-items .usermenu-danger { color: var(--danger); }
.usermenu-items .usermenu-danger:hover { background: var(--danger-bg); }

.usermenu-sep { height: 1px; margin: .35rem .4rem; background: var(--border); }

@media (max-width: 640px) {
    .usermenu-name, .social-top { display: none; }
}

/* --------------------------------------------------------- site footer -- */

.site-footer {
    margin-top: auto;
    padding: 2.5rem 2rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    font-size: .82rem;
    color: var(--text-muted);
}

.site-footer-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(120px, 1fr));
    gap: 2rem;
    max-width: 1180px;
    margin-inline: auto;
}

.site-footer-brand { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; }
.site-footer-brand p { margin: 0; max-width: 38ch; font-size: .8rem; line-height: 1.6; }
/* The footer logo carries the brand at the one moment a visitor is deciding whether
   anyone is behind this, so it is sized like a signature, not a caption. Width rather
   than height: the mark is a wordmark, and constraining its height makes it shrink to
   nothing on a narrow column. */
.site-footer-brand .brand-logo { width: 190px; max-width: 100%; height: auto; }
.site-footer-mail { font-size: .82rem; }
.site-footer-social { margin-top: .1rem; margin-inline-start: -.4rem; }

.site-footer-col { display: flex; flex-direction: column; gap: .45rem; }

.site-footer-col h3 {
    margin: 0 0 .25rem;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.site-footer-col a { color: var(--text-muted); }
.site-footer-col a:hover { color: var(--brand-ink); }

.site-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: 1180px;
    margin: 2rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .76rem;
    color: var(--text-faint);
}

.site-footer-bar-right { display: flex; align-items: center; gap: 1rem; }
.site-footer-version { font-family: var(--mono); }

.linklike {
    padding: 0;
    border: none;
    background: none;
    color: var(--text-faint);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.linklike:hover { color: var(--brand-ink); }

.site-footer-warning {
    max-width: 1180px;
    margin: .75rem auto 0;
    font-size: .74rem;
    font-style: italic;
    color: var(--text-faint);
}

@media (max-width: 900px) {
    .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
    .site-footer-brand { grid-column: 1 / -1; }
}
/* The footer on the brand's night colour: every product, tool and field in six columns. */
.site-footer {
    --footer-bg: #0d1330;
    background: radial-gradient(1200px 400px at 85% -10%, rgba(47, 46, 183, .35), transparent 60%), var(--footer-bg);
    border-top: none;
    color: rgba(255, 255, 255, .62);
    padding-top: 3rem;
}
.site-footer-grid { grid-template-columns: minmax(200px, 1.4fr) repeat(5, minmax(120px, 1fr)); gap: 1.75rem; }
.site-footer-col h3 { color: #fff; font-size: .95rem; letter-spacing: 0; text-transform: none; font-weight: 650; margin-bottom: .5rem; }
.site-footer-col a, .site-footer-text { color: rgba(255, 255, 255, .7); font-size: .82rem; line-height: 1.35; }
.site-footer-col a:hover { color: #fff; text-decoration: none; }
.site-footer-text.is-soon { color: rgba(255, 255, 255, .42); }
.site-footer-text.is-soon em { font-style: normal; font-size: .68rem; margin-left: .3rem; padding: .05rem .35rem; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); }
.site-footer-brand p, .site-footer-mail { color: rgba(255, 255, 255, .78); }
.site-footer-brand .brand-logo { width: 150px; }
.site-footer-social a { color: rgba(255, 255, 255, .8); }
.site-footer-bar { border-top-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .5); font-family: var(--mono); letter-spacing: .04em; }
.site-footer .linklike { color: rgba(255, 255, 255, .6); }
.site-footer .linklike:hover { color: #fff; }
.site-footer-warning { color: rgba(255, 255, 255, .4); }

@media (max-width: 1100px) {
    .site-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .site-footer-brand { grid-column: 1 / -1; }
}


/* -------------------------------------------------------- cookie bar -- */

.consent-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    padding: .9rem 1.5rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(38, 50, 65, .07);
}

.consent-bar-text { max-width: 70ch; }
.consent-bar-text strong { display: block; font-size: .88rem; margin-bottom: .15rem; }
.consent-bar-text p { margin: 0; font-size: .8rem; color: var(--text-muted); line-height: 1.55; }

.consent-buttons { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

.consent-backdrop {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: rgba(38, 50, 65, .35);
}

.consent-panel {
    position: fixed;
    z-index: 46;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(560px, calc(100vw - 2rem));
    max-height: min(80vh, 44rem);
    overflow-y: auto;
    padding: 1.25rem;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 20px 60px rgba(38, 50, 65, .25);
}

.consent-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-panel-head h2 { margin: 0; font-size: 1.05rem; }

.consent-group {
    margin-top: .9rem;
    padding: .8rem .9rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.consent-group-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.consent-group .hint { margin: .35rem 0 0; }

.consent-switch { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; cursor: pointer; }

.consent-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.1rem;
}

.consent-link { font-size: .82rem; }

/* ------------------------------------------------------- legal pages -- */

.legal {
    max-width: 74ch;
    margin-inline: auto;
    font-size: .92rem;
    line-height: 1.72;
    color: var(--text);
}

.legal h1 { font-size: 1.7rem; margin-bottom: .35rem; }
.legal h2 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
.legal h3 { font-size: .95rem; margin: 1.3rem 0 .35rem; }
.legal p, .legal ul, .legal ol { margin: 0 0 .85rem; }
.legal ul, .legal ol { padding-inline-start: 1.3rem; }
.legal li { margin-bottom: .3rem; }
.legal code { font-family: var(--mono); font-size: .85em; }

.legal-updated { font-size: .8rem; color: var(--text-faint); }

.legal-summary {
    padding: .9rem 1rem;
    border: 1px solid var(--info-border);
    border-radius: var(--radius-sm);
    background: var(--info-bg);
    font-size: .88rem;
}

.legal-note { font-size: .82rem; color: var(--text-faint); font-style: italic; }

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: .5rem 0 1.1rem;
    font-size: .84rem;
}

.legal-table th, .legal-table td {
    padding: .5rem .6rem;
    border: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
}

.legal-table th { background: var(--surface-2); font-weight: 650; }

.legal-nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
    max-width: 74ch;
    margin: 2.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .82rem;
}

/* ------------------------------------------------------ small pieces -- */

.kv { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: .55rem 1.25rem; margin: 0; }
.kv dt { font-size: .8rem; color: var(--text-faint); }
.kv dd { margin: 0; font-size: .9rem; }

.btn-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* A numeric input inside a data table. The tables that carry these — glass plies, load
   cases — are editors, not read-outs, and a full-width field in a table cell pushes the
   row past the page. Sized by content, right-aligned so the digits line up down the
   column the way they would on paper. */
.cell {
    width: 100%;
    min-width: 4.5rem;
    max-width: 7rem;
    padding: .25rem .4rem;
    text-align: end;
}

/* ------------------------------------------------------ verification -- */
/* The one page a stranger lands on, often from a printed sheet, often on a phone,
   with no idea what Caenode is. It gets more air than the working pages and a
   verdict they can read from arm's length. */

.verify { max-width: 940px; margin-inline: auto; }
.verify-head { text-align: center; margin-bottom: 1.75rem; }
.verify-head .hero-lead { max-width: 60ch; margin-inline: auto; }

.verify-form { display: flex; align-items: flex-end; gap: .75rem; flex-wrap: wrap; }
.verify-form .field { flex: 1 1 18rem; margin: 0; }
.verify-where { margin: .75rem 0 0; font-size: .82rem; line-height: 1.5; }

.verify-input {
    font-family: var(--mono);
    font-size: 1.15rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.verify-verdict { display: flex; align-items: flex-start; gap: 1rem; }
.verify-verdict h2 { margin: 0 0 .2rem; font-size: 1.15rem; }
.verify-verdict p { margin: 0; color: var(--text-muted); }

.verify-verdict.is-published { border-color: #cbe8d6; background: #f6fcf8; }
.verify-verdict.is-revoked { border-color: var(--warn-border); background: var(--warn-bg); }
.verify-verdict.is-unknown { border-color: var(--border-strong); }

.verify-code { font-family: var(--mono); letter-spacing: .08em; font-size: .95rem; }

.verify-code-big {
    font-family: var(--mono);
    font-size: 1.9rem;
    letter-spacing: .16em;
    font-weight: 600;
    margin: .25rem 0 .5rem;
}

/* What the page proves, beside what it does not — deliberately the same weight.
   A verification page that lets the reassuring column shout is how a calculation
   tool turns into a rubber stamp. */
.verify-scope { background: var(--surface-2); }
.verify-scope h3 { margin-bottom: .9rem; }
.verify-scope h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
.verify-scope ul { margin: 0; padding-inline-start: 1.1rem; font-size: .88rem; }
.verify-scope li { margin-bottom: .45rem; }

.verify-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }

@media (max-width: 720px) {
    .verify-columns { grid-template-columns: 1fr; gap: 1.25rem; }
}

.row-muted { opacity: .55; }
.badge-warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }

/* ------------------------------------------------- verification stamp -- */
/* Printed in the footer of a report that was handed to somebody. It is the only
   route a third party has to the verification page, so it is sized to be read and
   typed from paper, not to be tasteful. The code is the largest thing on it. */

.verify-stamp {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    margin-top: 1.25rem;
    padding: .8rem 1rem;
    border: 1.5px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    break-inside: avoid;
}

.verify-stamp-mark { color: var(--brand-ink); padding-top: .15rem; }
.verify-stamp-body { min-width: 0; }
.verify-stamp-body strong { font-size: .8rem; letter-spacing: .03em; text-transform: uppercase; }

.verify-stamp-code {
    margin: .2rem 0 .1rem;
    font-family: var(--mono);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .14em;
}

.verify-stamp-url { margin: 0; font-family: var(--mono); font-size: .76rem; color: var(--text-muted); }
.verify-stamp-note { margin: .3rem 0 0; font-size: .72rem; color: var(--text-faint); }

/* On paper the grey disappears and the border does the work; a tinted panel costs
   toner and prints as a muddy block on most office printers. */
@media print {
    .verify-stamp { background: none; border-color: #000; }
    .verify-stamp-note, .verify-stamp-url { color: #000; }
}

/* ------------------------------------------------------------- admin -- */
.admin-filter {
    padding: .35rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: .84rem;
    min-width: 14rem;
}

.data th.num, .data td.num { text-align: end; }

/* The print instruction, on screen beside the results. Never on paper - it would be
   telling the reader of a printed report how to print it. */
.print-note {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: -.25rem 0 1rem;
    max-width: 78ch;
}

/* ---- offline support (drawn by js/caenode-sw.js, outside Blazor) ---------------- */

.offline-pill {
    position: fixed; left: 16px; bottom: 16px; z-index: 60; max-width: min(420px, calc(100vw - 32px));
    padding: .55rem .9rem; border-radius: 999px;
    background: var(--text); color: #fff; font-size: .82rem; line-height: 1.35;
    box-shadow: 0 6px 20px rgba(15, 30, 40, .22);
}
.offline-pill::before {
    content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem;
    border-radius: 50%; background: #f5a524; vertical-align: .05rem;
}

.sw-update {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 61;
    display: flex; align-items: center; gap: .9rem; max-width: calc(100vw - 32px);
    padding: .6rem .7rem .6rem 1rem; border-radius: 12px;
    background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); font-size: .88rem;
    box-shadow: 0 10px 28px rgba(15, 30, 40, .18);
}
.sw-update button {
    border: 0; border-radius: 8px; padding: .45rem .9rem; cursor: pointer;
    background: var(--brand-gradient); color: #fff; font: inherit; font-weight: 600;
}
.sw-update button:disabled { opacity: .6; cursor: default; }

/* ---- frame analysis ------------------------------------------------------------- */

.frame-templates { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 1rem; }

.frame-table input[type="number"] { width: 6.5rem; }
.frame-table .cell-narrow input[type="number"] { width: 5rem; }
.frame-table .cell-id input { width: 4.5rem; }
.frame-table .cell-checks { white-space: nowrap; }
.frame-table .cell-checks input { margin-right: .5rem; }
.frame-table td .hint { margin-left: .3rem; }
.row-selected td { background: var(--brand-wash); }
tr.is-clickable { cursor: pointer; }

.frame-case-tabs { display: flex; flex-wrap: wrap; gap: .35rem; margin: .2rem 0 1rem; border-bottom: 1px solid var(--border); }
.frame-case-tab {
    border: 0; background: none; padding: .5rem .85rem; font: inherit; color: var(--text-muted);
    border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px;
}
.frame-case-tab.is-active { color: var(--text); border-bottom-color: var(--teal); font-weight: 600; }

.field-check { display: flex; align-items: flex-end; }
.field-check label { display: flex; gap: .45rem; align-items: center; font-weight: 500; white-space: nowrap; }
.field-end { display: flex; align-items: flex-end; justify-content: flex-end; }

.frame-view-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 1.2rem 0 .6rem; }
.segmented { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 10px; overflow: hidden; flex-wrap: wrap; }
.segmented button {
    border: 0; background: var(--surface); padding: .45rem .8rem; font: inherit; font-size: .85rem;
    color: var(--text-muted); cursor: pointer; border-right: 1px solid var(--border);
}
.segmented button:last-child { border-right: 0; }
.segmented button.is-active { background: var(--brand-wash); color: var(--text); font-weight: 600; }
.inline-field { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--text-muted); }

.frame-canvas { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: .5rem; }
.frame-svg { display: block; width: 100%; height: auto; }
.frame-member { stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; }
.frame-member.is-thin { stroke-width: 1; stroke: var(--text-muted); }
.frame-axial { stroke-linecap: butt; stroke-opacity: .85; }
.frame-axial.is-tension { stroke: var(--teal); }
.frame-axial.is-compression { stroke: var(--purple); }
.frame-member.is-ghost { stroke: var(--text-faint); stroke-width: 1.4; stroke-dasharray: 5 4; }
.frame-member.is-highlight { stroke: var(--teal); stroke-width: 4; }
.frame-node { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.frame-hinge { fill: var(--surface); stroke: var(--text); stroke-width: 1.6; }
.frame-node-id, .frame-member-id { font-size: 11px; fill: var(--text-muted); font-family: inherit; }
.frame-member-id { font-weight: 600; }
.frame-support { fill: none; stroke: var(--text-muted); stroke-width: 1.6; stroke-linejoin: round; }
.frame-support.is-bar { stroke-width: 2.4; }
.frame-support.is-hatch { stroke-width: 1; }
.frame-diagram { fill: var(--teal); fill-opacity: .16; stroke: var(--teal); stroke-width: 1.4; stroke-linejoin: round; }
.frame-diagram.is-moment { fill: var(--purple); stroke: var(--purple); }
.frame-value { font-size: 10.5px; fill: var(--text); font-variant-numeric: tabular-nums; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.frame-deformed { fill: none; stroke: var(--teal); stroke-width: 2.2; stroke-linejoin: round; }
.frame-load { fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.frame-load-label { font-size: 10.5px; fill: var(--purple); font-weight: 600; paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.frame-note { font-size: 11px; fill: var(--text-muted); }
.frame-deformed.is-buckling { stroke: var(--purple); stroke-dasharray: none; }
.frame-load.is-outline { stroke-width: 1.2; }

.frame-table .cell-pair { display: inline-flex; align-items: center; gap: .25rem; white-space: nowrap; }
.frame-table .cell-pair input[type="number"] { width: 4.4rem; }
.frame-table .cell-pair .hint { margin: 0; }
.field-wide { grid-column: 1 / -1; }
.hint.is-warning {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0;
    padding: .5rem .7rem; border-radius: var(--radius-sm);
    background: var(--warn-bg); border: 1px solid var(--warn-border); color: var(--warn);
}

/* 3D view: the projection is done in C#, so this is only how lines and labels look. */
.view3d-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; }
.view3d-controls .hint { margin: 0; }
.frame-svg.view3d { cursor: grab; user-select: none; }
.frame-svg.view3d.is-dragging { cursor: grabbing; }
.frame-member.is-3d { stroke-width: 2.2; }
.frame-member.is-3d.is-bar { stroke-width: 1.4; stroke: var(--text-muted); }
.view3d-ground { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 4; }
.view3d-axis { stroke: var(--text-muted); stroke-width: 1.4; }
.view3d-axis-label { font-size: 10.5px; fill: var(--text-muted); font-weight: 600; }
.frame-support.is-fixed { fill: var(--surface-3); }

.frame-detail { margin: 1rem 0; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .9rem; }
.frame-detail summary { cursor: pointer; font-weight: 600; }

.report-figure { border: 1px solid #ccc; margin: .4rem 0 .8rem; padding: .3rem; break-inside: avoid; }

.data th.keep-case, .stat-label.keep-case { text-transform: none; }


/* =========================================================================== home -- */

.home-hero {
    position: relative;
    margin: -.5rem 0 0;
    padding: 3.4rem 3rem 0;
    border-radius: 22px;
    color: #fff;
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(900px 420px at 80% 10%, rgba(47, 46, 183, .75), transparent 65%),
        radial-gradient(700px 360px at 0% 100%, rgba(14, 158, 168, .35), transparent 60%),
        #0b1230;
}
.home-hero-text { max-width: 640px; }
.home-hero h1 { margin: .9rem 0 1rem; font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.08; letter-spacing: -.025em; font-weight: 640; color: #fff; }
.home-hero-text p { margin: 0; max-width: 46ch; color: rgba(255, 255, 255, .78); font-size: 1rem; line-height: 1.6; }
.home-hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.btn-hero { background: var(--brand-gradient); color: #06231f; font-weight: 650; padding: .75rem 1.3rem; border-radius: 8px; }
.btn-hero:hover { filter: brightness(1.06); color: #06231f; }
.btn-hero-ghost { background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff; padding: .72rem 1.25rem; border-radius: 8px; }
.btn-hero-ghost:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.home-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .82); }
.home-eyebrow.is-dark { color: var(--text-faint); }
.home-eyebrow-mark { width: 8px; height: 8px; background: var(--brand-gradient); border-radius: 1px; }

.home-hero-preview { position: relative; margin: 2.6rem -1rem -7rem; z-index: 1; }

/* ------------------------------------------------------------- hero window -- */

.hp-tabs {
    display: flex; gap: .25rem; width: max-content; margin: 0 0 .9rem auto; padding: .3rem;
    background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(10, 15, 50, .25);
}
.hp-tab {
    display: inline-flex; align-items: center; gap: .45rem; border: 0; background: none; cursor: pointer;
    padding: .55rem 1.1rem; border-radius: 9px; font: inherit; font-size: .9rem; color: var(--text-muted);
}
.hp-tab:hover { color: var(--text); }
.hp-tab.is-active { background: var(--brand-wash); color: var(--brand-ink); font-weight: 600; }

.hp-window, .ps-preview {
    background: #fff; border-radius: 16px; overflow: hidden; color: var(--text);
    box-shadow: 0 24px 60px rgba(10, 15, 50, .28), 0 2px 6px rgba(10, 15, 50, .08);
    border: 1px solid rgba(255, 255, 255, .6);
}
.hp-titlebar, .ps-preview-bar { display: flex; align-items: center; gap: .4rem; padding: .6rem .9rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.hp-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); }
.hp-title { margin-left: .6rem; font-family: var(--mono); font-size: .74rem; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-open { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; }

.hp-body { display: grid; grid-template-columns: 270px minmax(0, 1fr); min-height: 430px; }
.hp-side { display: flex; flex-direction: column; gap: 1rem; padding: 1.2rem; border-right: 1px solid var(--border); }
.hp-card { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.hp-card.is-accent { background: linear-gradient(135deg, #3b3ad6, #2f2eb7 60%, #26259a); border: 0; color: #fff; box-shadow: 0 10px 24px rgba(47, 46, 183, .35); }
.hp-card-label { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; opacity: .75; }
.hp-card-value { font-family: var(--mono); font-size: 2.3rem; line-height: 1.1; font-weight: 500; }
.hp-card.is-accent .hp-card-value { color: #7ef0b0; }
.hp-card-value small { font-size: 1rem; opacity: .7; }
.hp-card-sub { font-family: var(--mono); font-size: .74rem; opacity: .75; }

.hp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; font-size: .82rem; color: var(--text-muted); }
.hp-list li { display: flex; align-items: center; gap: .6rem; }
.hp-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 2.4rem; padding: .22rem .5rem; border-radius: 7px; font-family: var(--mono); font-size: .72rem; font-weight: 600; }
.hp-chip.is-neutral { background: var(--surface-3); color: var(--text); }
.hp-chip.is-pass { background: #b8f2c8; color: #165c33; }
.hp-chip.is-fail { background: #ffd0cb; color: #8f2219; }

.hp-table { display: flex; flex-direction: column; gap: .4rem; }
.hp-table-head { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; color: var(--text-faint); }
.hp-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: .5rem; font-family: var(--mono); font-size: .76rem; }
.hp-row-id { color: var(--text); }
.hp-row-eta { padding: .2rem .45rem; border-radius: 6px; background: #ecfbf0; color: #1f6b3e; }
.hp-live { margin: auto 0 0; display: flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--text-faint); }

.hp-view { background: linear-gradient(180deg, #fbfcfd, #f1f5f8); }
.hp-view .frame-svg, .ps-preview-body .frame-svg { height: 100%; }

/* Utilisation colours, as the design checks report them. */
.frame-member.util { stroke-width: 2.6; }
.frame-member.util.is-pass { stroke: #2f9e5a; }
.frame-member.util.is-warn { stroke: #d39b1c; }
.frame-member.util.is-fail { stroke: #c7453b; }
.frame-member.util.is-none { stroke: var(--text-faint); stroke-dasharray: 4 3; }
.util-legend { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; }
.util-legend.is-pass { fill: #2f9e5a; }
.util-legend.is-warn { fill: #c08a12; }
.util-legend.is-fail { fill: #c7453b; }

/* ---------------------------------------------------------------- codes strip -- */

.home-codes {
    display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 2rem;
    margin-top: 8.5rem; padding: 2rem 0; border-bottom: 1px solid var(--border);
}
.home-codes-label { font-family: var(--mono); font-size: .8rem; letter-spacing: .08em; color: var(--text-muted); line-height: 1.5; }
.home-codes-list { display: flex; flex-wrap: wrap; gap: .6rem; }
.home-code { padding: .5rem .8rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-family: var(--mono); font-size: .82rem; color: var(--text-muted); }

/* ---------------------------------------------------------------- sections -- */

.home-section { margin-top: 4rem; }
.home-title { margin: .7rem 0 1.8rem; font-size: clamp(1.7rem, 2.8vw, 2.3rem); font-weight: 560; letter-spacing: -.02em; line-height: 1.15; max-width: 22ch; }
.home-accent { display: block; background: linear-gradient(90deg, #2f2eb7, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ------------------------------------------------------------- the showcase -- */

.ps-tabs { display: inline-flex; gap: .25rem; padding: .3rem; border-radius: 12px; background: #e8edf8; margin-bottom: 1.6rem; }
.ps-tab { border: 0; background: none; cursor: pointer; font: inherit; font-weight: 600; font-size: .95rem; padding: .6rem 1.4rem; border-radius: 9px; color: var(--text); }
.ps-tab.is-active { background: #fff; box-shadow: var(--shadow-sm); }

.ps-body { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr); gap: 2.5rem; align-items: start; }
.ps-list { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--border); }
.ps-item { position: relative; }
.ps-item.is-open::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: #2f2eb7; }
.ps-item-head { display: flex; align-items: center; gap: .9rem; width: 100%; padding: .75rem 1rem 0.75rem 1.4rem; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; color: var(--text-muted); }
.ps-item-head:hover { color: var(--text); }
.ps-item.is-open .ps-item-head { color: var(--text); font-weight: 600; }
.ps-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 9px; background: #eef0fb; color: #2f2eb7; flex: none; }
.ps-item.is-open .ps-icon { background: #fff; border: 1.5px solid #2f2eb7; }
.ps-name { font-size: 1.05rem; }
.ps-soon { margin-left: auto; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 600; color: var(--text-faint); border: 1px solid var(--border-strong); white-space: nowrap; }
.ps-soon.is-large { margin: .4rem 0 0; font-size: .8rem; padding: .3rem .8rem; }
.ps-item-body { padding: 0 1rem 1rem calc(1.4rem + 36px + .9rem); }
.ps-item-body p { margin: 0 0 .8rem; color: var(--text-muted); line-height: 1.6; font-size: .92rem; }
.ps-standards-label { display: block; font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; color: var(--text-faint); margin-bottom: .2rem; }
.ps-standards { display: block; font-family: var(--mono); font-size: .76rem; color: var(--text-muted); line-height: 1.6; }
.ps-go { display: inline-flex; align-items: center; gap: .3rem; margin-top: .8rem; font-size: .8rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: #2f2eb7; }

.ps-preview { position: sticky; top: 80px; }
.ps-preview-body { min-height: 380px; display: flex; align-items: stretch; background: linear-gradient(180deg, #fbfcfd, #f1f5f8); }
.ps-preview-body > * { flex: 1; }
.ps-card { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .6rem; padding: 2.4rem; }
.ps-card h3 { margin: .3rem 0 0; font-size: 1.35rem; }
.ps-card p { margin: 0; color: var(--text-muted); line-height: 1.6; max-width: 46ch; }
.ps-card-icon { display: inline-flex; padding: .8rem; border-radius: 14px; background: #eef0fb; color: #2f2eb7; }

/* ---------------------------------------------------------------- why, faq, cta -- */

.home-why {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 4.5rem;
    border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
    background:
        linear-gradient(var(--border) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--border) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--surface);
    background-blend-mode: normal;
}
.home-why-item { padding: 1.8rem 1.5rem; background: rgba(255, 255, 255, .88); border-right: 1px solid var(--border); }
.home-why-item:last-child { border-right: none; }
.home-why-icon { display: inline-flex; color: #2f2eb7; margin-bottom: .8rem; }
.home-why-item h3 { margin: 0 0 .5rem; font-size: 1.12rem; }
.home-why-item p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }

.home-faq-list { display: flex; flex-direction: column; gap: .7rem; max-width: 820px; }
.home-faq-item { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 1rem 1.25rem; }
.home-faq-item summary { cursor: pointer; font-weight: 600; font-size: 1.02rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.home-faq-item summary::after { content: "+"; font-weight: 400; color: var(--text-faint); font-size: 1.3rem; line-height: 1; }
.home-faq-item[open] summary::after { content: "–"; }
.home-faq-item p { margin: .8rem 0 0; color: var(--text-muted); line-height: 1.65; font-size: .92rem; }

.home-cta {
    display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
    margin-top: 4.5rem; padding: 3rem; border-radius: 20px; color: #fff;
    background:
        radial-gradient(700px 300px at 100% 100%, rgba(47, 46, 183, .9), transparent 70%),
        #0b1230;
}
.home-cta h2 { margin: 0 0 .5rem; font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 560; letter-spacing: -.02em; color: #fff; }
.home-cta p { margin: 0; color: rgba(255, 255, 255, .7); }

@media (max-width: 1000px) {
    .hp-body { grid-template-columns: 1fr; min-height: 0; }
    .hp-side { border-right: none; border-bottom: 1px solid var(--border); }
    .hp-view { min-height: 0; }
    .ps-body { grid-template-columns: 1fr; }
    .ps-preview { position: static; }
    .home-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .home-why-item:nth-child(2) { border-right: none; }
}

@media (max-width: 640px) {
    .home-hero { padding: 2.2rem 1.25rem 0; border-radius: 16px; }
    .home-hero-preview { margin: 2rem -.5rem -5rem; }
    .hp-tabs { margin-inline: auto; }
    .hp-tab { padding: .5rem .7rem; }
    .home-codes { grid-template-columns: 1fr; gap: 1rem; margin-top: 6.5rem; }
    .home-why { grid-template-columns: 1fr; }
    .home-why-item { border-right: none; border-bottom: 1px solid var(--border); }
    .home-cta { padding: 2rem 1.5rem; }
    .ps-preview-body { min-height: 0; }
    .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* A social link shown by name until its platform's official mark is added. */
.social-name { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 600; white-space: nowrap; }
.social-link:has(.social-name) { width: auto; padding-inline: .6rem; }
.site-footer .social-link:has(.social-name) { border: 1px solid rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
.site-footer .social-link:has(.social-name):hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* FocusOnNavigate moves focus to the page's h1 (tabindex="-1") after every navigation, so
   a screen reader announces the new page. That focus is programmatic, not the visitor's:
   it must not draw a ring. Keyboard focus on real controls keeps its outline. */
h1[tabindex="-1"]:focus { outline: none; }

/* On the dark footer the platform marks keep their own colours: full strength, and a
   hover that suits the dark ground rather than the light top bar's. */
.site-footer .social-link { opacity: .92; }
.site-footer .social-link:hover { opacity: 1; background: rgba(255, 255, 255, .08); }

/* ------------------------------------------------------------ section builder -- */

.section-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.section-layout > .card { margin-bottom: 0; }
.section-stage { padding: .9rem; }
.section-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .6rem; }
.section-busy { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-muted); }
.spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--teal); animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.section-empty { display: grid; place-items: center; gap: .4rem; min-height: 260px; color: var(--text-muted); text-align: center; }

.section-svg { display: block; width: 100%; height: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); }
.sv-grid line { stroke: #eef2f5; stroke-width: 1; }
.sv-grid line.is-major { stroke: #e0e7ec; }
.sv-part { fill: #cfe9ec; stroke: #1d6f8b; stroke-width: 1.3; stroke-linejoin: round; transition: fill .12s ease; }
.sv-void { fill: #ffffff; stroke: #b4453c; stroke-width: 1.2; stroke-dasharray: 4 3; }
.section-svg.is-interactive .sv-part, .section-svg.is-interactive .sv-void { cursor: pointer; }
.section-svg.is-interactive .sv-part:hover { fill: #bfe2e6; }
.sv-part.is-selected { fill: #a9dde0; stroke: #0b5f73; stroke-width: 2; }
.sv-void.is-selected { stroke-width: 2; fill: #fff4f2; }
.sv-mesh { fill: none; stroke: #1d6f8b; stroke-opacity: .32; stroke-width: .6; pointer-events: none; }
.sv-axis { stroke: #5d6b7a; stroke-width: 1; stroke-dasharray: 10 3 2 3; pointer-events: none; }
.sv-axis.is-principal { stroke: var(--purple); stroke-width: 1.2; }
.sv-pna { stroke: #c27b12; stroke-width: 1.2; stroke-dasharray: 6 4; pointer-events: none; }
.sv-centroid { fill: #fff; stroke: #263241; stroke-width: 1.4; pointer-events: none; }
.sv-centroid-fill { fill: #263241; pointer-events: none; }
.sv-shear { fill: var(--purple); stroke: #fff; stroke-width: 1; pointer-events: none; }
.sv-label { font: 600 12px var(--font, system-ui), sans-serif; fill: #5d6b7a; pointer-events: none; }
.sv-label.is-centroid { fill: #263241; }
.sv-label.is-shear, .sv-label.is-principal { fill: var(--purple); }
.sv-label.is-pna { fill: #c27b12; font-size: 11px; }
.sv-label.is-dim { font-weight: 500; fill: #263241; }
.sv-label.is-scale { font-weight: 500; font-size: 11px; fill: #8b98a5; }
.sv-tag { font: 700 11px system-ui, sans-serif; fill: #1d6f8b; pointer-events: none; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.sv-tag.is-selected { fill: #0b5f73; }
.sv-dim line { stroke: #8b98a5; stroke-width: .9; }
.sv-triad line { stroke: #8b98a5; stroke-width: 1.4; }

.section-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: .55rem; font-size: .8rem; color: var(--text-muted); }
.section-legend > span { display: inline-flex; align-items: center; gap: .35rem; }
.sv-key { display: inline-block; width: 12px; height: 12px; }
.sv-key.is-centroid { border-radius: 50%; border: 1.5px solid #263241; background: linear-gradient(90deg, #263241 50%, #fff 50%); }
.sv-key.is-shear { background: var(--purple); transform: rotate(45deg) scale(.8); }
.sv-key.is-principal { height: 0; border-top: 2px dashed var(--purple); }
.sv-key.is-pna { height: 0; border-top: 2px dashed #c27b12; }

.section-key h2 { font-size: 1.05rem; margin: 0 0 .8rem; }
.section-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem .9rem; margin: 0; }
.section-figures > div { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.section-figures dt { font-size: .8rem; color: var(--text-muted); font-weight: 600; }
.section-figures dd { margin: .1rem 0 0; font-size: 1.08rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--text); }
.section-figures dd small { font-size: .72rem; font-weight: 500; color: var(--text-faint); }
.section-classes { margin-top: 1rem; display: grid; gap: .45rem; }
.section-class-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.class-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .65rem; border-radius: 999px; font-size: .82rem; border: 1px solid var(--border-strong); background: var(--surface); }
.class-chip strong { font-size: .95rem; }
.class-chip.is-1, .class-chip.is-2 { background: #e8f6ee; border-color: #bfe4cd; color: #1d6b45; }
.class-chip.is-3 { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn); }
.class-chip.is-4 { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.class-pill { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; font-size: .78rem; font-weight: 700; background: var(--surface-3); color: var(--text-muted); }
.class-pill.is-1, .class-pill.is-2 { background: #e2f4ea; color: #1d6b45; }
.class-pill.is-3 { background: var(--warn-bg); color: var(--warn); }
.class-pill.is-4 { background: var(--danger-bg); color: var(--danger); }
.section-case-tabs { margin: .2rem 0 .8rem; }
.section-case-tabs button { display: inline-flex; align-items: center; gap: .4rem; }

.section-parts td { vertical-align: middle; }
.section-parts select { max-width: 11rem; }
.section-parts .cell-id input { width: 4.5rem; }
.section-parts .cell-narrow input { width: 6.5rem; }
.section-parts td.cell-checks { text-align: center; }
.section-points .cell-narrow input { width: 7rem; }
table.data.section-class-table th:nth-child(2), table.data.section-class-table td:nth-child(2) { text-align: left; }
.section-describe { font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.section-editor-row > td { background: var(--surface-2); padding: .9rem 1rem !important; }
.section-editor-row:hover { background: transparent !important; }
.section-editor .field { max-width: 22rem; }
.section-dims { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.section-points { display: grid; gap: .6rem; max-width: 34rem; }
.section-paste textarea { width: 100%; font: 13px ui-monospace, SFMono-Regular, Menlo, monospace; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: .45rem .55rem; }
.section-paste label { display: block; font-size: .8rem; color: var(--text-muted); margin-bottom: .25rem; }
.section-add { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.section-add select { width: auto; }

.section-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem 1.4rem; margin-bottom: 1rem; }
.section-tables h3 { font-size: .9rem; margin: 0 0 .35rem; }
.section-tables > div { min-width: 0; overflow-x: auto; }
.section-layout.is-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
table.data.props td { padding-top: .32rem; padding-bottom: .32rem; text-align: left; }
table.data.props td.sym { font-weight: 650; white-space: nowrap; }
table.data.props td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
table.data.props td.unit { color: var(--text-faint); white-space: nowrap; width: 1%; }
td.limits { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text-muted); }

.inertia-shapes { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
.inertia-shape { display: grid; justify-items: center; gap: .35rem; padding: .7rem .4rem .55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; font-size: .78rem; color: var(--text-muted); text-align: center; }
.inertia-shape svg { width: 34px; height: 34px; fill: #9fc9cf; }
.inertia-shape:hover { border-color: var(--border-strong); }
.inertia-shape.is-active { border-color: var(--teal); background: var(--brand-wash); color: var(--text); font-weight: 600; }
.inertia-shape.is-active svg { fill: var(--teal); }

@media (max-width: 1000px) {
    .section-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .section-figures { grid-template-columns: 1fr 1fr; gap: .45rem; }
    .section-figures dd { font-size: .98rem; }
    .section-parts select { max-width: 8.5rem; }
    table.data.props td.hint { display: none; }
    .section-tables { grid-template-columns: 1fr; }
}

@media print {
    .report .section-svg { border: 0; }
    .report .sv-grid { display: none; }
}
.ps-preview-body .section-svg { border: 0; border-radius: 0; background: transparent; align-self: center; }

/* ---------------------------------------------------------------- sign-in gate -- */

.gate-checking { display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 40vh; color: var(--text-muted); }
.gate { max-width: 34rem; margin: 8vh auto; padding: 2.4rem 2rem; text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.gate-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--brand-wash); color: var(--brand-ink); margin-bottom: .8rem; }
.gate h1 { font-size: 1.45rem; margin: 0 0 .6rem; }
.gate p { color: var(--text-muted); margin: 0 auto 1.2rem; max-width: 28rem; }
.gate-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.gate .hint { margin: 0; font-size: .8rem; }

/* ------------------------------------------------- built sections in frames -- */

.built-sections { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .75rem; margin: .5rem 0 .6rem; }
.built-section { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem .85rem; background: var(--surface-2); display: grid; gap: .55rem; }
.built-section-head { display: flex; gap: .6rem; align-items: flex-start; }
.built-section-head .hint { font-size: .78rem; }
.built-section-figures { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .82rem; font-variant-numeric: tabular-nums; }
.built-section-figures small { color: var(--text-faint); }
.built-section-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.built-section-actions .hint { margin-right: auto; font-size: .78rem; }
.send-panel { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--brand-wash); padding: .9rem 1rem; margin: 0 0 1rem; display: grid; gap: .6rem; }
.send-panel .field { max-width: 22rem; margin: 0; }
.send-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* -------------------------------------------------------------- quick design -- */

.quick-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; }
.quick-layout > .card { margin-bottom: 0; }
.quick-stage { padding: .75rem; }
.quick-sketch { width: 100%; height: auto; display: block; background: var(--surface-2); border-radius: var(--radius-sm); }
.quick-sign { margin: .6rem .25rem 0; font-size: .78rem; }
.quick-kind { margin: 0 0 1rem; }
.quick-sets { margin: 0 0 1rem; }
.quick-loads td.cell-narrow input { max-width: 7.5rem; }
.quick-loads tr.row-muted input { opacity: .45; }
.quick-built { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0 .5rem; }
.quick-built-chip { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: .1rem .2rem .1rem .7rem; font-size: .82rem; }
.quick-built-chip.is-used { border-color: var(--teal); background: var(--brand-wash); }
.quick-suggest { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: .85rem 1rem; margin: 0 0 1.25rem; display: grid; gap: .7rem; }
.quick-suggest-head { display: flex; align-items: center; gap: .75rem; }
.quick-suggest-head > div { flex: 1; min-width: 0; }
.quick-suggest-head .hint { font-size: .8rem; }
.quick-best { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .55rem .8rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.quick-best > span:first-child { flex: 1; min-width: 14rem; }
.badge-ok { display: inline-flex; align-items: center; gap: .3rem; color: #2c7048; font-size: .85rem; font-weight: 600; }
.quick-candidates summary { cursor: pointer; font-size: .86rem; color: var(--text-muted); }
.quick-candidates .table-wrap { margin-top: .5rem; max-height: 22rem; overflow: auto; }
.util-bar { display: inline-block; width: 4.5rem; height: 6px; border-radius: 3px; background: var(--border); vertical-align: middle; margin-right: .45rem; overflow: hidden; }
.util-bar span { display: block; height: 100%; background: var(--teal); }
.util-bar span.is-over { background: var(--danger); }

.qs-member { stroke: var(--text); stroke-width: 5; stroke-linecap: round; }
.qs-load, .qs-point, .qs-axial { stroke: var(--indigo); stroke-width: 1.6; fill: none; }
.qs-point, .qs-axial { stroke-width: 2.2; }
.qs-head { fill: var(--indigo); stroke: none; }
.qs-moment { stroke: var(--purple); stroke-width: 2; fill: none; }
.qs-moment-head { fill: var(--purple); stroke: none; }
.qs-minor { fill: var(--surface); stroke: var(--teal); stroke-width: 1.4; }
.qs-minor-dot { fill: var(--teal); }
.qs-support { fill: var(--surface); stroke: var(--text-muted); stroke-width: 1.6; stroke-linejoin: round; }
.qs-ground, .qs-wall { stroke: var(--text-muted); stroke-width: 2; }
.qs-hatch { stroke: var(--text-faint); stroke-width: 1.2; }
.qs-dim { stroke: var(--text-faint); stroke-width: 1; }
.qs-label { font-size: 12.5px; fill: var(--text); font-variant-numeric: tabular-nums; }
.qs-label-minor { fill: var(--text-muted); }
.qs-node { font-size: 13px; font-weight: 700; fill: var(--text-muted); }

.chart-svg .member-line { stroke: var(--text-faint); stroke-width: 1.2; }
.chart-svg .area { stroke: none; fill-opacity: .12; }
.chart-svg .area-1 { fill: var(--series-1); }
.chart-svg .area-2 { fill: var(--series-2); }
.chart-svg .area-critical { fill: var(--series-critical); }

.report-verdict { font-weight: 700; padding: .4rem .6rem; border: 1px solid var(--border); border-radius: 6px; }
.report-verdict.is-good { border-color: #b9dfc6; }
.report-verdict.is-bad { border-color: var(--danger-border); color: var(--danger); }

@media (max-width: 1000px) {
    .quick-layout { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .quick-suggest-head { flex-wrap: wrap; }
    .quick-loads td.cell-narrow input { max-width: 5.5rem; }
}

@media print {
    .report .quick-sketch { background: none; }
}
.quick-results h3 { margin: 1.5rem 0 .6rem; }
.quick-charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.quick-loads thead th:nth-child(2), .quick-loads thead th:nth-child(3) { text-align: left; }
@media (max-width: 900px) {
    .quick-charts { grid-template-columns: 1fr; }
}
.quick-sketch-wrap { display: grid; gap: .5rem; }
.quick-legend { list-style: none; margin: 0; padding: 0 .25rem; display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font-size: .84rem; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.quick-legend strong { color: var(--indigo); margin-right: .2rem; }
.qs-symbol { font-weight: 700; fill: var(--indigo); font-style: italic; }
@media print {
    .report .chart { break-inside: avoid; }
    .report .quick-legend { color: #000; }
}

/* -------------------------------------------------------- reinforced concrete -- */

.rc-svg { width: 100%; height: auto; display: block; background: var(--surface-2); border-radius: var(--radius-sm); max-height: 440px; }
.rc-concrete { fill: #e6eaee; stroke: var(--text-muted); stroke-width: 1.5; stroke-linejoin: round; }
.rc-compressed { fill: var(--teal); fill-opacity: .22; stroke: none; }
.rc-link { fill: none; stroke: var(--text-faint); stroke-width: 1.4; stroke-dasharray: 5 3; }
.rc-na { stroke: var(--teal); stroke-width: 1.6; stroke-dasharray: 7 4; }
.rc-bar { fill: var(--text); stroke: var(--surface); stroke-width: 1; }
.rc-bar.is-tension { fill: var(--indigo); }
.rc-centroid line { stroke: var(--danger); stroke-width: 1.4; }
.rc-dim { stroke: var(--text-faint); stroke-width: 1; }
.rc-label { font-size: 11.5px; fill: var(--text-muted); font-variant-numeric: tabular-nums; }
.rc-axis { stroke: var(--text-faint); stroke-width: 1; }
.rc-axis-label { font-size: 11px; font-style: italic; fill: var(--text-faint); }
.sv-key.rc-key-bar { background: var(--text); border-radius: 50%; }
.sv-key.rc-key-tension { background: var(--indigo); border-radius: 50%; }
.sv-key.rc-key-compressed { background: rgba(14, 158, 168, .3); }
.rc-shapes { margin: 0 0 1rem; }
.rc-groups td.cell-narrow input, .rc-groups td.cell-narrow select { max-width: 5.5rem; }
.rc-coords { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .4rem; font-size: .82rem; color: var(--text-muted); }
.rc-coords input.rc-mm { width: 5.2rem; }
.rc-place label { display: inline-flex; align-items: center; gap: .4rem; }
.rc-loads td.cell-narrow input { max-width: 6.5rem; }
.chart-svg .rc-ray { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 4 4; }
.rc-chart .chart-svg .grid { stroke: var(--border); }
.rc-report-figure .rc-svg { max-width: 300px; margin: 0 auto; background: none; }
.rc-report-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rc-crack-detail { font-size: .85rem; }
@media print {
    .report .rc-svg { background: none; }
    .rc-report-charts .chart { break-inside: avoid; }
}
@media (max-width: 640px) {
    .section-points { min-width: 0; }
    .section-points > * { min-width: 0; }
    .section-points .cell-narrow input { width: 100%; max-width: 7rem; min-width: 3.5rem; }
}

/* ------------------------------------------------------------ top navigation -- */
/* The menus live in one dark bar across the top; the old sidebar rules above are no
   longer used by the layout. */

.shell { display: flex; flex-direction: column; min-height: 100vh; }

.topnav {
    --topnav-bg: #0b1230;
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--topnav-bg);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.topnav-inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 64px;
}

.topnav-brand { display: flex; align-items: center; flex-shrink: 0; }
.topnav-brand img { height: 46px; width: auto; display: block; }
.topnav-brand:hover { text-decoration: none; }

.topnav-menu { display: flex; align-items: stretch; height: 100%; gap: .2rem; flex: 1; justify-content: center; }
.topnav-item { display: flex; align-items: stretch; }

.topnav-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: 0 .85rem;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, .88);
    font: inherit;
    font-size: .93rem;
    font-weight: 550;
    cursor: pointer;
    white-space: nowrap;
}

.topnav-link:hover, .topnav-item.is-open > .topnav-link { color: #8fe3d9; text-decoration: none; }
.topnav-link .caret { opacity: .8; font-size: .62rem; }
a.topnav-link.active { color: #8fe3d9; }

/* The panel spans the bar's width, under it. A transparent band above it keeps the
   pointer "inside" while it crosses the gap from the menu name to the panel. */
.mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 2rem;
    right: 2rem;
    padding: 1.6rem 1.8rem 1.4rem;
    background: #fff;
    color: var(--text);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(5, 10, 35, .28);
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.6rem;
    margin-top: 6px;
}

.mega::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.mega.mega-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.topnav-menu:not(.is-suppressed) .topnav-item.has-panel:hover > .mega,
.topnav-item.has-panel.is-open > .mega { display: grid; }

.mega-col h3 {
    margin: 0 0 .75rem;
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--border);
    font-size: .95rem;
    font-weight: 650;
    color: var(--text);
}

.mega-link {
    display: flex;
    align-items: center;
    gap: .3rem;
    padding: .38rem 0;
    color: var(--text-muted);
    font-size: .9rem;
}

.mega-link:hover { color: var(--brand-ink); text-decoration: none; }
.mega-link.is-soon { color: var(--text-faint); cursor: default; }
.mega-link em { font-style: normal; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); color: var(--text-faint); }

.topnav-actions { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.topnav-login { padding: 0 .3rem; height: 40px; }
.topnav-signup { border: 1px solid rgba(255, 255, 255, .85); color: #fff; background: transparent; }
.topnav-signup:hover { background: rgba(255, 255, 255, .1); color: #fff; text-decoration: none; }

/* The language and account buttons, made for a light bar, on the dark one. */
.topnav .lang-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.topnav .lang-button:hover { background: rgba(255, 255, 255, .08); }
.topnav .usermenu-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.topnav .usermenu-button:hover, .topnav .usermenu-button.open { background: rgba(255, 255, 255, .08); }
.topnav .caret { color: inherit; }

.topnav-burger { display: none; width: 40px; height: 40px; padding: 9px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: none; cursor: pointer; }
.topnav-burger span { display: block; height: 2px; margin: 4px 0; background: #fff; border-radius: 2px; }

.topnav-drawer { display: none; }

@media (max-width: 1080px) {
    .topnav-menu, .topnav-dashboard, .topnav-login { display: none; }
    .topnav-inner { padding: 0 1rem; gap: .75rem; justify-content: space-between; }
    .topnav-burger { display: block; }

    .topnav-drawer {
        display: block;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        padding: .5rem 1rem 1.2rem;
        background: var(--topnav-bg);
        border-top: 1px solid rgba(255, 255, 255, .08);
    }

    .drawer-group { border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .drawer-group summary { padding: .85rem .2rem; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
    .drawer-group summary::after { content: "▾"; opacity: .7; }
    .drawer-group[open] summary::after { content: "▴"; }
    .drawer-group summary::-webkit-details-marker { display: none; }
    .drawer-col { padding: 0 .2rem .8rem; }
    .drawer-col h3 { margin: .4rem 0 .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .5); }
    .topnav-drawer .mega-link { color: rgba(255, 255, 255, .86); }
    .topnav-drawer .mega-link.is-soon { color: rgba(255, 255, 255, .45); }
    .topnav-drawer .mega-link em { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
    .drawer-link { display: block; padding: .85rem .2rem; color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, .1); }
    .drawer-signin { margin-top: 1rem; width: 100%; }
}

@media (max-width: 560px) {
    .topnav-signup { display: none; }
    .topnav-brand img { height: 40px; }
}

@media print {
    .topnav { display: none !important; }
    .shell { display: block; }
}

/* -------------------------------------------------------- contact and pricing -- */

.contact-hero, .pricing-hero {
    margin: -.5rem 0 2rem;
    padding: 2.8rem 3rem 2.6rem;
    border-radius: 22px;
    color: #fff;
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 44px 44px,
        radial-gradient(800px 360px at 80% 0%, rgba(47, 46, 183, .7), transparent 65%),
        #0b1230;
}
.contact-hero h1, .pricing-hero h1 { margin: .8rem 0 .7rem; font-size: clamp(1.8rem, 3.2vw, 2.6rem); letter-spacing: -.02em; color: #fff; }
.contact-hero p, .pricing-hero p { margin: 0; max-width: 62ch; color: rgba(255, 255, 255, .8); font-size: 1rem; }

.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 2.5rem; align-items: start; }
.contact-info h2 { font-size: 1.8rem; font-weight: 560; letter-spacing: -.02em; margin: .4rem 0 1.6rem; }
.contact-block { margin-bottom: 1.6rem; }
.contact-label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-faint); margin-bottom: .35rem; }
.contact-value { font-size: 1.1rem; font-style: normal; color: var(--text); line-height: 1.5; }
a.contact-value:hover { color: var(--brand-ink); }
.contact-social { justify-content: flex-start; }
.contact-form { padding: 1.6rem; }
.contact-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.contact-wide { grid-column: 1 / -1; }
.contact-form textarea { width: 100%; resize: vertical; min-height: 140px; font: inherit; padding: .6rem .7rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
.contact-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-consent { display: flex; gap: .6rem; align-items: flex-start; margin: .4rem 0 1rem; font-size: .88rem; color: var(--text-muted); }
.contact-consent input { margin-top: .25rem; }
.contact-send { min-width: 9rem; }
.contact-done { text-align: center; padding: 2rem 1rem; }
.contact-done .icon-badge { margin: 0 auto 1rem; }
.contact-done h2 { font-size: 1.3rem; }

.pricing-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 2rem; align-items: stretch; }
.plan-card { position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 1.5rem 1.3rem 1.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); }
.plan-card.is-featured { border: 2px solid var(--teal); box-shadow: 0 12px 34px rgba(14, 158, 168, .16); }
.plan-flag { position: absolute; top: -.75rem; left: 1.2rem; padding: .18rem .65rem; border-radius: 999px; background: var(--brand-gradient); color: #06231f; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.plan-icon { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-wash); color: var(--brand-ink); margin-bottom: .3rem; }
.plan-card h2 { margin: 0; font-size: 1.3rem; }
.plan-for { margin: 0 0 .6rem; color: var(--text-muted); font-size: .88rem; min-height: 2.6em; }
.plan-price { display: flex; flex-direction: column; gap: .15rem; padding: .7rem 0 .9rem; border-top: 1px solid var(--border); }
.plan-amount { font-size: 2rem; font-weight: 700; letter-spacing: -.02em; }
.plan-note { font-size: .76rem; color: var(--text-faint); }
.plan-cta { width: 100%; margin-bottom: .9rem; }
.plan-features { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; font-size: .88rem; color: var(--text-muted); }
.plan-features li { display: flex; gap: .45rem; align-items: flex-start; }
.plan-features .icon { color: var(--teal); flex-shrink: 0; margin-top: .2rem; }
.pricing-included { padding: 1.5rem 1.6rem; margin-bottom: 2.5rem; }
.pricing-modules { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .45rem 1.2rem; font-size: .9rem; }
.pricing-modules li { display: flex; gap: .45rem; align-items: center; }
.pricing-modules .icon { color: var(--teal); }
.pricing-faq { padding-top: 0; }

@media (max-width: 1080px) {
    .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.6rem; }
}

@media (max-width: 760px) {
    .contact-grid { grid-template-columns: 1fr; gap: 1.5rem; }
    .contact-hero, .pricing-hero { padding: 2rem 1.3rem; border-radius: 16px; }
    .contact-fields { grid-template-columns: 1fr; }
    .pricing-grid { grid-template-columns: 1fr; }
    .plan-for { min-height: 0; }
}

/* ======================================================= steel connections == */

.conn-kinds { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1.25rem; }
.conn-kind { display: grid; gap: .2rem; text-align: left; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; font: inherit; color: var(--text-muted); }
.conn-kind:hover { border-color: var(--border-strong); }
.conn-kind.is-active { border-color: var(--teal); background: var(--brand-wash); color: var(--text); }
.conn-kind-name { font-weight: 650; font-size: .92rem; color: var(--text); }
.conn-kind-hint { font-size: .76rem; line-height: 1.3; }

.conn-svg { width: 100%; height: auto; display: block; background: var(--surface-2); border-radius: var(--radius-sm); max-height: 460px; }
.cv-support { fill: #d6dde3; stroke: #5d6b7a; stroke-width: 1.1; }
.cv-support-body { fill: #edf1f4; stroke: #b7c2cc; stroke-width: .8; stroke-dasharray: 5 3; }
.cv-support-face { fill: #edf1f4; stroke: #9aa7b3; stroke-width: 1; stroke-dasharray: 6 4; }
.cv-member { fill: #cfe9ec; stroke: #1d6f8b; stroke-width: 1.2; }
.cv-member.is-brace { fill: rgba(125, 95, 238, .14); stroke: var(--purple); }
.cv-web { fill: #e6f4f5; stroke: #1d6f8b; stroke-width: .6; }
.cv-section { fill: rgba(29, 111, 139, .10); stroke: #1d6f8b; stroke-width: 1.1; stroke-linejoin: round; }
.cv-plate { fill: rgba(194, 123, 18, .20); stroke: #a8690e; stroke-width: 1.3; stroke-linejoin: round; }
.cv-plate.is-web { fill: rgba(194, 123, 18, .14); }
.cv-bolt { fill: #ffffff; stroke: #263241; stroke-width: 1.4; }
.cv-shank { stroke: #263241; stroke-width: 2.4; }
.cv-weld { stroke: #b4453c; stroke-width: 4; stroke-linecap: round; }
.cv-weld.is-group { stroke-width: 6; }
.cv-weld.is-thin { stroke-width: 2.2; opacity: .85; }
.cv-break { stroke: #8b98a5; stroke-width: 1; stroke-dasharray: 4 3; }
.cv-centre { stroke: var(--purple); stroke-width: 1; stroke-dasharray: 10 3 2 3; }
.cv-dim { stroke: #8b98a5; stroke-width: .9; }
.cv-force { stroke: var(--indigo); stroke-width: 1.8; }
.cv-force.is-worst { stroke: #b4453c; stroke-width: 2.4; }
.cv-arrowhead { fill: context-stroke; }
.cv-load { stroke: #263241; stroke-width: 2.2; }
.cv-loadpoint { fill: #263241; }
.cv-centroid { fill: #fff; stroke: #263241; stroke-width: 1.4; }
.cv-worst { fill: none; stroke: #b4453c; stroke-width: 2.2; }
.cv-label { font: 600 11.5px var(--font, system-ui), sans-serif; fill: #3f4c5a; paint-order: stroke; stroke: var(--surface-2); stroke-width: 3px; }
.cv-label.is-muted { fill: var(--text-faint); font-weight: 500; }
.cv-label.is-strong { fill: #263241; font-weight: 700; }

.sv-key.conn-key-plate { background: rgba(194, 123, 18, .35); border: 1px solid #a8690e; }
.sv-key.conn-key-bolt { border-radius: 50%; border: 1.6px solid #263241; background: #fff; }
.sv-key.conn-key-weld { height: 4px; background: #b4453c; border-radius: 2px; }
.sv-key.conn-key-force { height: 0; border-top: 2px solid var(--indigo); }
.sv-key.conn-key-load { height: 0; border-top: 2px solid #263241; }

.section-figures dd.is-good { color: #2c7048; }
.section-figures dd.is-bad { color: var(--danger); }
.hint.is-bad { color: var(--danger); }
tr.row-warn td { background: var(--warn-bg); }
.conn-detail { font-size: .74rem; color: var(--text-faint); font-variant-numeric: tabular-nums; margin-top: .15rem; line-height: 1.35; }
.conn-checks td:nth-child(3), .conn-checks td:nth-child(4) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.group-toolbar { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.conn-report-figure .conn-svg { max-width: 460px; margin: 0 auto; background: none; }
.conn-report-dims td.num { white-space: nowrap; }

@media (max-width: 1080px) {
    .conn-kinds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .conn-kinds { grid-template-columns: 1fr 1fr; }
    .conn-kind-hint { display: none; }
}

@media print {
    .report .conn-svg { background: none; }
}

/* ============================================================ the app frame == */
/* Signed in: a slim dark bar, the page using the full height, no site footer. */

.appbar { --appbar-bg: #0b1230; position: sticky; top: 0; z-index: 40; background: var(--appbar-bg); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.appbar-inner { display: flex; align-items: center; gap: 1.1rem; max-width: 1400px; margin: 0 auto; padding: 0 1.5rem; height: 56px; }
.appbar-brand { display: flex; align-items: center; flex-shrink: 0; }
.appbar-brand img { height: 38px; width: auto; display: block; }
.appbar-crumbs { display: flex; align-items: center; gap: .55rem; min-width: 0; flex: 1; font-size: .9rem; white-space: nowrap; overflow: hidden; }
.appbar-crumbs a { color: rgba(255, 255, 255, .72); }
.appbar-crumbs a:hover { color: #fff; text-decoration: none; }
.appbar-crumbs .is-current { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.appbar-sep { color: rgba(255, 255, 255, .35); }
.appbar-actions { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.appbar-apps { display: inline-flex; align-items: center; gap: .45rem; height: 36px; padding: 0 .8rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 8px; background: transparent; color: #fff; font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer; }
.appbar-apps:hover, .appbar-apps.is-open { background: rgba(255, 255, 255, .1); }
.appbar .lang-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.appbar .lang-button:hover { background: rgba(255, 255, 255, .08); }
.appbar .usermenu-button { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .25); }
.appbar .usermenu-button:hover, .appbar .usermenu-button.open { background: rgba(255, 255, 255, .08); }
.appbar .caret { color: inherit; }
.appbar-backdrop { position: fixed; inset: 56px 0 0; z-index: 1; background: rgba(11, 18, 48, .18); }
.appbar-panel { position: absolute; z-index: 2; top: 56px; right: 1.5rem; width: min(880px, calc(100vw - 2rem)); max-height: calc(100vh - 80px); overflow-y: auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; padding: 1.2rem 1.3rem; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 18px 40px rgba(11, 18, 48, .18); }
.appbar-col h3 { margin: 0 0 .5rem; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }
.appbar-app { display: flex; align-items: center; gap: .55rem; padding: .38rem .45rem; margin: 0 -.45rem; border-radius: var(--radius-sm); color: var(--text); font-size: .87rem; }
.appbar-app:hover { background: var(--surface-2); text-decoration: none; }
.appbar-app .icon-badge { width: 28px; height: 28px; flex-shrink: 0; }

.shell.is-app .app-content { max-width: 1400px; padding: 1.5rem 1.5rem 2.5rem; }

/* ------------------------------------------------------------- dashboard -- */

.dash-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; margin-bottom: 1.4rem; border-radius: var(--radius); background: linear-gradient(115deg, #0b1230 0%, #123a5a 62%, #0e6f78 100%); color: #fff; }
.dash-hero h1 { margin: 0 0 .3rem; color: #fff; font-size: 1.6rem; }
.dash-hero p { margin: 0; color: rgba(255, 255, 255, .78); max-width: 60ch; }
.dash-hero-meta { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; font-size: .85rem; color: rgba(255, 255, 255, .85); }
.dash-meta-item { display: inline-flex; align-items: center; gap: .35rem; }

.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.5rem; align-items: start; }
.dash-group { margin-bottom: 1.6rem; }
.dash-group h2 { font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 .7rem; }
.dash-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .75rem; }
.dash-app { position: relative; display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 2.2rem .9rem .9rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; box-shadow: var(--shadow-sm); transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease; }
.dash-app:hover { text-decoration: none; border-color: var(--teal); transform: translateY(-1px); box-shadow: var(--shadow); }
.dash-app .icon-badge { flex-shrink: 0; }
.dash-app-text { display: grid; gap: .2rem; min-width: 0; }
.dash-app-text strong { font-size: .95rem; color: var(--text); }
.dash-app-body { font-size: .8rem; line-height: 1.4; color: var(--text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash-app-codes { font-size: .7rem; color: var(--brand-ink); font-weight: 600; }
.dash-app-go { position: absolute; top: .95rem; right: .8rem; color: var(--text-faint); }
.dash-app:hover .dash-app-go { color: var(--teal); }
.dash-coming { display: flex; flex-wrap: wrap; gap: .45rem; }
.dash-soon { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px dashed var(--border-strong); border-radius: 999px; font-size: .78rem; color: var(--text-muted); background: var(--surface); }

.dash-side { display: grid; gap: 1rem; position: sticky; top: 72px; }
.dash-card { margin: 0; }
.dash-card h2 { font-size: 1rem; margin: 0; }
.dash-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; margin-bottom: .7rem; }
.dash-card-head a { font-size: .82rem; }
.dash-projects { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.dash-projects a { display: grid; gap: .2rem; padding: .5rem .55rem; margin: 0 -.55rem; border-radius: var(--radius-sm); color: inherit; }
.dash-projects a:hover { background: var(--surface-2); text-decoration: none; }
.dash-projects strong { font-size: .9rem; }
.dash-projects span { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .75rem; }
.dash-links { display: grid; gap: .1rem; }
.dash-links a { display: flex; align-items: center; gap: .65rem; padding: .45rem .55rem; margin: 0 -.55rem; border-radius: var(--radius-sm); color: inherit; }
.dash-links a:hover { background: var(--surface-2); text-decoration: none; }
.dash-links .icon-badge { width: 30px; height: 30px; flex-shrink: 0; }
.dash-links span { display: grid; }
.dash-links strong { font-size: .88rem; }
.dash-links small { font-size: .74rem; color: var(--text-muted); }
.dash-help p { margin: .35rem 0 .8rem; }
.dash-help-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.dash-foot { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-faint); }
.dash-foot a { color: var(--text-muted); }

@media (max-width: 1080px) {
    .dash-layout { grid-template-columns: 1fr; }
    .dash-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
    .appbar-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .appbar-inner { padding: 0 .9rem; gap: .6rem; }
    .appbar-crumbs, .appbar-apps-label { display: none; }
    .appbar-actions { margin-left: auto; }
    .appbar .usermenu-name { display: none; }
    .appbar-panel { right: .5rem; grid-template-columns: 1fr; }
    .shell.is-app .app-content { padding: 1rem .9rem 2rem; }
    .dash-hero { padding: 1.1rem; }
    .dash-hero h1 { font-size: 1.3rem; }
}

@media print {
    .appbar { display: none !important; }
}
.dash-side > .card { margin: 0; }
.dash-card-head a { white-space: nowrap; }
.conn-loads td.cell-narrow input { max-width: 8rem; }

/* ======================================================= home page, part 3 == */

.home-lead { max-width: 64ch; margin: -1rem 0 2rem; color: var(--text-muted); line-height: 1.65; }

/* numbers */
.home-numbers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 3rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.home-number { padding: 1.4rem 1.3rem; border-right: 1px solid var(--border); display: grid; gap: .25rem; }
.home-number:last-child { border-right: none; }
.home-number strong { font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 600; letter-spacing: -.02em; line-height: 1; background: linear-gradient(90deg, #2f2eb7, var(--teal)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.home-number span { font-size: .84rem; color: var(--text-muted); }

/* workflow */
.flow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; counter-reset: flow; }
.flow-step { position: relative; padding: 1.5rem 1.3rem 1.4rem; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.flow-step:not(:last-child)::after { content: ""; position: absolute; top: 2.55rem; right: -1rem; width: 1rem; height: 2px; background: linear-gradient(90deg, var(--teal), #2f2eb7); }
.flow-num { position: absolute; top: 1.1rem; right: 1.2rem; font-family: var(--mono); font-size: .8rem; color: var(--text-faint); }
.flow-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #2f2eb7, var(--teal)); margin-bottom: 1rem; }
.flow-step h3 { margin: 0 0 .45rem; font-size: 1.12rem; }
.flow-step p { margin: 0; color: var(--text-muted); font-size: .88rem; line-height: 1.6; }

/* spotlights */
.spot-list { display: grid; gap: 4rem; }
.spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.spot.is-flipped .spot-text { order: 2; }
.spot-kicker { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; color: #2f2eb7; }
.spot-text h3 { margin: .6rem 0 .7rem; font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.spot-text > p { margin: 0 0 1.1rem; color: var(--text-muted); line-height: 1.65; }
.spot-points { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .5rem; }
.spot-points li { display: flex; gap: .55rem; align-items: flex-start; font-size: .92rem; line-height: 1.5; }
.spot-points li svg { flex: none; margin-top: .15rem; color: var(--teal); }
.spot-steps { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }
.spot-steps li { display: flex; gap: .7rem; align-items: center; font-size: .92rem; }
.spot-steps li span { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #eef0fb; color: #2f2eb7; font-weight: 700; font-size: .8rem; }
.spot-links { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; }
.spot-go { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 650; letter-spacing: .03em; text-transform: uppercase; color: #2f2eb7; }
.spot-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.1rem; }
.spot-tags span { padding: .3rem .7rem; border-radius: 999px; background: #eef0fb; color: #2f2eb7; font-size: .78rem; font-weight: 600; }
.spot-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1.1rem; }
.spot-figures > div { padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.spot-figures dt { font-size: .76rem; color: var(--text-faint); font-weight: 600; }
.spot-figures dd { margin: .1rem 0 0; font-weight: 650; font-variant-numeric: tabular-nums; }
.spot-figures dd small { font-size: .7rem; font-weight: 500; color: var(--text-faint); }

.spot-visual { margin: 0; }
.spot-window { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface); box-shadow: 0 24px 60px rgba(11, 18, 48, .12); }
.spot-bar { display: flex; align-items: center; gap: .4rem; padding: .55rem .8rem; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.spot-bar .hp-title { margin-left: .5rem; }
.spot-canvas { padding: .8rem; background: linear-gradient(180deg, #fbfcfd, #f1f5f8); }
.spot-canvas svg { display: block; width: 100%; height: auto; max-height: 420px; }
.spot-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .6rem; align-items: center; }
.spot-pair figcaption { font-size: .76rem; color: var(--text-muted); text-align: center; margin-top: .3rem; }
.spot-pair .conn-svg { background: transparent; }
.spot-pair-section .rc-svg { background: transparent; }

/* the sample report page */
.spot-paper { position: relative; max-width: 470px; margin: 0 auto; padding: 1.6rem 1.6rem 1.3rem; background: #fff; border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 30px 60px rgba(11, 18, 48, .14), 14px 14px 0 -1px #eef0fb, 14px 14px 0 0 var(--border); transform: rotate(-1deg); }
.paper-head { display: flex; align-items: center; gap: .9rem; padding-bottom: .8rem; margin-bottom: .8rem; border-bottom: 2px solid #0b1230; }
.paper-head img { height: 30px; width: auto; }
.paper-head strong { display: block; font-size: .95rem; }
.paper-head span { font-size: .74rem; color: var(--text-muted); font-family: var(--mono); }
.paper-table { width: 100%; border-collapse: collapse; font-size: .72rem; }
.paper-table td { padding: .32rem .3rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.paper-table .sym { font-family: var(--mono); white-space: nowrap; color: #2f2eb7; }
.paper-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.paper-verdict { margin: .8rem 0; padding: .45rem .6rem; border: 1px solid #b9dfc6; border-radius: 6px; font-size: .8rem; font-weight: 600; color: #2c7048; background: #f1faf4; }
.paper-stamp { display: flex; align-items: center; gap: .8rem; padding-top: .7rem; border-top: 1px dashed var(--border-strong); }
.paper-stamp strong { display: block; font-size: .8rem; }
.paper-stamp small { font-family: var(--mono); font-size: .72rem; color: var(--text-muted); }
.paper-qr { display: grid; grid-template-columns: repeat(5, 8px); gap: 2px; padding: 4px; border: 1px solid var(--border); border-radius: 4px; }
.paper-qr i { width: 8px; height: 8px; background: #e7ebf3; }
.paper-qr i.on { background: #0b1230; }
.paper-sample { position: absolute; top: 1rem; right: -0.6rem; padding: .2rem .7rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; color: #fff; background: #c27b12; border-radius: 3px; transform: rotate(4deg); }

/* free tools */
.home-tools-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 3rem; flex-wrap: wrap; }
.home-tools-head .home-lead { margin: 0 0 1.8rem; max-width: 46ch; }
.home-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.home-tool { display: flex; align-items: center; gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text); font-weight: 600; font-size: .92rem; transition: border-color .12s ease, transform .12s ease; }
a.home-tool:hover { text-decoration: none; border-color: var(--teal); transform: translateY(-1px); }
.home-tool.is-soon { color: var(--text-faint); background: transparent; border-style: dashed; }
.home-tool-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: #fdf3e2; color: #a8690e; }
.home-tool.is-soon .home-tool-icon { background: var(--surface-2); color: var(--text-faint); }
.home-tool-name { flex: 1; min-width: 0; }
.home-tool-go { color: var(--text-faint); }
.home-tool .ps-soon { margin-left: 0; }

/* industries */
.home-ind-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.home-ind { display: flex; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.home-ind-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 11px; background: #eafaf7; color: #0b7f88; }
.home-ind h3 { margin: 0 0 .25rem; font-size: .98rem; }
.home-ind p { margin: 0; font-size: .82rem; line-height: 1.5; color: var(--text-muted); }

@media (max-width: 1000px) {
    .home-numbers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .home-number:nth-child(3) { border-right: none; }
    .home-number:nth-child(n+4) { border-top: 1px solid var(--border); }
    .flow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .flow-step::after { display: none; }
    .spot { grid-template-columns: 1fr; gap: 1.6rem; }
    .spot.is-flipped .spot-text { order: 0; }
}

@media (max-width: 640px) {
    .home-numbers { grid-template-columns: 1fr 1fr; }
    .home-number { border-right: 1px solid var(--border) !important; border-top: 1px solid var(--border); }
    .home-number:nth-child(-n+2) { border-top: none; }
    .home-number:nth-child(2n) { border-right: none !important; }
    .flow-steps { grid-template-columns: 1fr; }
    .spot-pair { grid-template-columns: 1fr; }
    .spot-figures { grid-template-columns: 1fr 1fr; }
    .spot-paper { transform: none; padding: 1.1rem; }
    .spot-list { gap: 3rem; }
}
.spot-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem 1rem; padding: .6rem .9rem; border-top: 1px solid var(--border); font-size: .78rem; color: var(--text-muted); background: var(--surface); }
.spot-canvas .conn-svg { background: transparent; max-height: 400px; }
.paper-head img { height: 34px; }