/* ========================================================================
   Optiservo design tokens — "papier d'ingénieur moderne"
   Base réutilisable pour aircmic (Optiservo, Chronoflight, futures apps).
   ======================================================================== */

:root {
    /* Palette */
    --paper:         #F0F2EE;   /* surface principale, cool paper */
    --surface:       #FFFFFF;   /* cartes/panels surélevés */
    --carbon:        #131721;   /* texte principal, header */
    --graphite:      #3D4757;   /* texte secondaire */
    --pencil:        #6B7684;   /* muted, hints */
    --wire:          #D0D5D0;   /* dividers, contours fins */
    --wire-strong:   #B0B7B0;   /* dividers accentués */
    --thermal:       #EC5B0F;   /* accent unique (thermique ↑) */
    --thermal-hover: #D14E0C;
    --thermal-soft:  rgba(236, 91, 15, 0.10);
    --thermal-line:  rgba(236, 91, 15, 0.45);
    --balsa:         #EADFC8;   /* warm neutral, cartes landing */
    --success:       #2F855A;
    --warn:          #B7791F;
    --danger:        #C53030;

    /* Type */
    --font-display: "IBM Plex Sans Condensed", "Helvetica Neue", sans-serif;
    --font-body:    "IBM Plex Sans", "Helvetica Neue", sans-serif;
    --font-mono:    "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Spacing (4-based, jamais 10 ou 14) */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-12: 48px;

    /* Radii */
    --r-sm: 3px;
    --r-md: 6px;
    --r-lg: 10px;

    /* Ombres discrètes */
    --shadow-1: 0 1px 2px rgba(19, 23, 33, 0.05);
    --shadow-2: 0 4px 12px rgba(19, 23, 33, 0.08);
    --shadow-3: 0 12px 32px rgba(19, 23, 33, 0.16);

    /* Divers */
    --header-h: 52px;
}

* { box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

/* ---------- Use-case picker + visibility rules ---------- */
/* Each section / subsection tagged with `data-usecase="..."` lists the
   use cases in which it should appear. If the current usecase-<key> body
   class is NOT in that list, hide it.
   Scoped to `main` : the header picker buttons and the landing cards also
   carry `data-usecase` (as click targets) but must always be visible. */
body.usecase-simple   main [data-usecase]:not([data-usecase~="simple"])   { display: none !important; }
body.usecase-wing     main [data-usecase]:not([data-usecase~="wing"])     { display: none !important; }
body.usecase-wing_ext main [data-usecase]:not([data-usecase~="wing_ext"]) { display: none !important; }

/* Note : all `.usecase-picker` styling now lives under `header .usecase-picker`
   below (design system token pass). Legacy standalone rules removed to avoid
   specificity conflicts. */

/* Kinematic-type filter : lever-only fields hidden in cable mode, and vice
   versa. Body class is set by app.js on select change. */
body.kinematic-lever [data-kinematic="cable"] { display: none !important; }
body.kinematic-cable [data-kinematic="lever"] { display: none !important; }

/* Small "mode" tag next to the section title (e.g., "Servo — bras" / "Servo — poulie") */
.section-mode {
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: lowercase;
    letter-spacing: 0.02em;
    color: var(--pencil);
    margin-left: 6px;
}
.section-mode::before { content: "· "; opacity: 0.5; }

/* Subsection wrapper — visually grouped block inside a section.
   Left rule provides the "nested content" cue ; the title gets a hairline
   underline like a mini-section header. */
.subsection {
    margin: var(--sp-4) var(--sp-3) 0;
    padding-left: var(--sp-3);
    border-left: 2px solid var(--wire);
}
.subsection:first-child { margin-top: var(--sp-3); }
.subsection > .grid-form,
.subsection > .pos-row,
.subsection > p { margin-left: 0; margin-right: 0; }

/* "Aile & profil" is placed FIRST in HTML source order (see index.html) so
   that on wing / wing_ext it's the first thing the user sees. On simple it
   is hidden via the data-usecase filter, so Template naturally moves up. */

/* ---------- Landing screen (use case picker on first visit) ---------- */

.landing {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--carbon);
    background-image:
        radial-gradient(circle at 20% 30%, rgba(236, 91, 15, 0.08), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(122, 155, 173, 0.05), transparent 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-6);
    overflow-y: auto;
}
.landing.hidden { display: none; }
.landing-inner {
    max-width: 1100px;
    width: 100%;
    color: var(--paper);
    text-align: left;
}
.landing h2 {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    color: var(--paper);
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.landing-sub {
    font-family: var(--font-body);
    font-size: 14px;
    color: rgba(240, 242, 238, 0.55);
    margin: 0 0 var(--sp-8);
    max-width: 620px;
}
.landing-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-4);
    align-items: stretch;
}
.landing-card {
    position: relative;
    background: var(--surface);
    border: 1px solid transparent;
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-6) var(--sp-6);
    text-align: left;
    cursor: pointer;
    color: var(--carbon);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    font-family: var(--font-body);
    overflow: hidden;
}
.landing-card:hover {
    transform: translateY(-2px);
    border-color: var(--thermal);
    box-shadow: var(--shadow-3);
}
.landing-card:focus-visible {
    outline: none;
    border-color: var(--thermal);
    box-shadow: 0 0 0 3px var(--thermal-soft), var(--shadow-3);
}
/* Signature n°3 : micro-airfoil silhouette in the corner of wing / wing_ext
   cards, visible only on hover (subtle nod to the underlying subject) */
.landing-card[data-usecase="wing"]::before,
.landing-card[data-usecase="wing_ext"]::before {
    content: "";
    position: absolute;
    top: var(--sp-3);
    right: var(--sp-3);
    width: 60px;
    height: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 14'><path d='M 2 8 Q 8 2 22 3 T 50 6 Q 55 7 58 8' fill='none' stroke='%23EC5B0F' stroke-width='1' stroke-linecap='round' opacity='0.6'/><path d='M 2 8 Q 10 10 24 10 T 50 8 Q 55 8 58 8' fill='none' stroke='%23EC5B0F' stroke-width='1' stroke-linecap='round' opacity='0.35'/></svg>");
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 0.25s ease;
}
.landing-card[data-usecase="wing"]:hover::before,
.landing-card[data-usecase="wing_ext"]:hover::before {
    opacity: 1;
}
.lc-icon {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--thermal);
    line-height: 1;
    margin-bottom: var(--sp-1);
    font-weight: 700;
}
.lc-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: var(--carbon);
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.lc-desc {
    font-size: 13px;
    color: var(--graphite);
    line-height: 1.5;
    flex: 1;
}
.lc-features {
    list-style: none;
    margin: 0;
    padding: var(--sp-3) 0 0;
    font-size: 11.5px;
    color: var(--pencil);
    border-top: 1px solid var(--wire);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.lc-features li {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.lc-features li::before {
    content: "—";
    color: var(--thermal);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

/* When landing is shown, hide the rest of the app. */
body.landing-open main,
body.landing-open .warnings,
body.landing-open .usecase-label,
body.landing-open .usecase-picker,
body.landing-open #change-usecase-btn { visibility: hidden; }

@media (max-width: 820px) {
    .landing-cards { grid-template-columns: 1fr; }
    .landing h2 { font-size: 22px; }
    .landing-card { padding: 20px 16px; }
}


body {
    font-family: var(--font-body);
    font-feature-settings: "ss01", "cv08";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
    background: var(--paper);
    color: var(--carbon);
    display: flex;
    flex-direction: column;
    font-size: 13px;
    line-height: 1.45;
}

/* All numbers, everywhere : tabular mono. This is the visual signature.
   Applied via a utility class on inputs/values that hold measurements. */
input[type="number"], .num, .mono, code {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
}

/* ---------- Header (papier d'ingénieur) --------------------------------- */

header {
    height: var(--header-h);
    padding: 0 var(--sp-6);
    background: var(--carbon);
    color: var(--paper);
    display: flex;
    align-items: center;
    gap: var(--sp-8);
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Wordmark : lowercase, condensed, letter-spaced tight. The "o" at the end
   is drawn thicker as an anchor, and the airfoil trace flows out of it. */
header .brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    text-decoration: none;
    color: var(--paper);
}
header .brand-name {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    letter-spacing: -0.02em;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
/* Signature n°1 : the final "o" of "optiservo" is drawn as a servo pivot
   mark — outer ring in paper color, inner filled dot in thermal. Mirrors
   the pivot symbol used in engineering kinematic diagrams. */
header .brand-pivot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--paper);
    background: var(--carbon);
    position: relative;
    transform: translateY(1px);
}
header .brand-pivot::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--thermal);
}

/* Use-case picker : plain text separated by dots, underline for active.
   No segmented control, no fill background — precision underline is the tell. */
header .usecase-picker {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
}
header .uc-btn {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 500;
    color: rgba(240, 242, 238, 0.55);
    background: transparent;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
    letter-spacing: -0.005em;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    transition: color 0.12s ease, border-color 0.12s ease;
}
header .uc-btn:hover { color: var(--paper); }
header .uc-btn.active {
    color: var(--paper);
    border-bottom-color: var(--thermal);
}
header .uc-sep {
    color: rgba(240, 242, 238, 0.25);
    font-size: 13px;
    user-select: none;
}

header .header-spacer { flex: 1; }

/* Actions on the right — text-only, wide-spaced, subtle. Primary is the
   only one with the thermal accent. */
header .header-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
}
header .hd-action {
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    color: var(--paper);
    background: transparent;
    border: none;
    padding: 6px 0;
    cursor: pointer;
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid transparent;
    transition: color 0.12s ease, border-color 0.12s ease;
}
header .hd-action:hover {
    color: var(--paper);
    border-bottom-color: rgba(240, 242, 238, 0.5);
}
header .hd-action.hd-muted {
    color: rgba(240, 242, 238, 0.55);
}
header .hd-action.hd-muted:hover {
    color: var(--paper);
    border-bottom-color: rgba(240, 242, 238, 0.35);
}
header .hd-action:disabled { opacity: 0.35; cursor: default; }
header .hd-action:disabled:hover { border-bottom-color: transparent; }
header .hd-action svg { flex-shrink: 0; opacity: 0.7; }
header a.hd-action { text-decoration: none; }
#account-link { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; }
#account-link.hidden { display: none !important; }

/* EN | FR language switcher — compact, the active language is highlighted. */
header .lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
}
header .lang-switch button {
    background: transparent;
    border: none;
    padding: 4px 3px;
    color: rgba(240, 242, 238, 0.45);
    font: inherit;
    cursor: pointer;
}
header .lang-switch button:hover { color: var(--paper); }
header .lang-switch button.active { color: var(--paper); font-weight: 600; cursor: default; }
header .lang-switch .lang-sep { color: rgba(240, 242, 238, 0.25); user-select: none; }

/* Icon-only header actions (undo, redo) — SVG-based, square-ish. */
header .hd-action.hd-icon {
    padding: 5px 6px;
    color: rgba(240, 242, 238, 0.7);
    border-bottom: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
header .hd-action.hd-icon svg { opacity: 1; }
header .hd-action.hd-icon:hover:not(:disabled) {
    color: var(--paper);
    background: rgba(240, 242, 238, 0.08);
    border-radius: var(--r-sm);
    border-bottom: none;
}
header .hd-action.hd-icon:disabled { opacity: 0.3; }

/* Status : tiny colored dot. All info in the tooltip. */
header .status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: var(--sp-2);
    text-indent: -9999px;
    overflow: hidden;
    transition: background 0.15s ease;
}
header .status.done    { background: var(--success); }
header .status.pending { background: var(--thermal); animation: pulse 1.2s ease-in-out infinite; }
header .status.waiting { background: var(--pencil); }
header .status.error   { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
    header .status.pending { animation: none; }
}

main {
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--sp-3);
    padding: var(--sp-3);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.panel {
    background: var(--surface);
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--wire);
    box-shadow: var(--shadow-1);
    min-width: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* View panel needs flex for the tab bar (fixed) + tab body (flex:1) layout. */
.view-panel {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ---------- Collapsible sections in the form panel ---------- */

.section {
    border: 1px solid var(--wire);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-2);
    background: var(--surface);
    overflow: hidden;
}

/* Summary : an engineering annotation. Uppercase Plex Condensed, bracket
   marks that ONLY appear on the section title (the one structural device
   we allow ourselves — never elsewhere in the app). */
.section > summary {
    cursor: pointer;
    list-style: none;
    padding: 10px var(--sp-3);
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--carbon);
    background: var(--paper);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    user-select: none;
    transition: background 0.12s ease;
}
.section > summary::-webkit-details-marker { display: none; }
.section > summary::before {
    content: "[";
    color: var(--thermal);
    font-family: var(--font-mono);
    font-weight: 500;
    opacity: 0.55;
    transition: transform 0.15s ease, opacity 0.15s ease;
}
.section > summary::after {
    content: "]";
    color: var(--thermal);
    font-family: var(--font-mono);
    font-weight: 500;
    opacity: 0.55;
    margin-left: auto;
    transition: opacity 0.15s ease;
}
.section[open] > summary { border-bottom-color: var(--wire); }
.section[open] > summary::before,
.section[open] > summary::after { opacity: 1; }
.section > summary:hover { background: var(--balsa); }
.section > summary:hover::before,
.section > summary:hover::after { opacity: 1; }
.section.advanced > summary { background: rgba(236, 91, 15, 0.04); }
.section.advanced > summary::before { content: "["; color: var(--thermal); }

.section > .grid-form,
.section > p,
.section > .subsection-title,
.section > .row,
.section > button,
.section > div,
.section > label {
    margin-left: 12px;
    margin-right: 12px;
}
.section > .grid-form:first-of-type { margin-top: 10px; }
.section > .grid-form:last-of-type,
.section > button:last-of-type,
.section > div:last-of-type { margin-bottom: 12px; }
.section > .grid-form + .grid-form { margin-top: 8px; }

.section-block {
    padding: var(--sp-3);
    border: 1px solid var(--wire);
    border-radius: var(--r-md);
    margin-bottom: var(--sp-2);
    background: var(--surface);
}
.section-title {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--graphite);
    margin-bottom: var(--sp-2);
}

.section-desc {
    font-size: 11px;
    color: var(--pencil);
    font-style: normal;
    margin: var(--sp-2) var(--sp-3);
    line-height: 1.5;
}
.section-desc b { color: var(--graphite); font-weight: 500; }
.section-desc code {
    background: var(--paper);
    padding: 1px 5px;
    border-radius: var(--r-sm);
    font-size: 10.5px;
    color: var(--carbon);
}

.subsection-title {
    font-family: var(--font-display);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--carbon);
    font-weight: 700;
    margin: 0 0 var(--sp-2);
    padding-bottom: 5px;
    border-bottom: 1px solid var(--wire);
    display: flex;
    align-items: center;
    gap: var(--sp-1);
}
/* Small readout on the right of a subsection title (e.g., Y auto value) */
.subsection-value {
    margin-left: auto;
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    color: var(--pencil);
    font-weight: 500;
}
.subsection-value .mono { color: var(--carbon); font-weight: 600; }

/* Hint tooltip — small "?" circle inline in a title, reveals a dark tooltip
   on hover / focus. CSS-only, no JS. Reusable component. */
.hint-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: transparent;
    color: var(--pencil);
    border: 1px solid var(--wire-strong);
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-body);
    cursor: help;
    position: relative;
    user-select: none;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1;
    padding: 0;
    transition: color 0.12s ease, border-color 0.12s ease;
}
.hint-tip:hover, .hint-tip:focus {
    color: var(--thermal);
    border-color: var(--thermal);
    outline: none;
}
.hint-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 260px;
    padding: 8px 10px;
    background: var(--carbon);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
    border-radius: var(--r-sm);
    box-shadow: var(--shadow-2);
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0;
    pointer-events: none;
    z-index: 60;
    transition: opacity 0.14s ease;
    white-space: normal;
}
.hint-tip::before {
    content: "";
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: var(--carbon);
    opacity: 0;
    pointer-events: none;
    z-index: 61;
    transition: opacity 0.14s ease;
}
.hint-tip:hover::after, .hint-tip:hover::before,
.hint-tip:focus::after, .hint-tip:focus::before {
    opacity: 1;
}

.badge {
    font-family: var(--font-body);
    font-size: 9.5px;
    padding: 1px 6px;
    background: var(--thermal-soft);
    color: var(--thermal);
    border-radius: var(--r-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    margin-left: var(--sp-1);
}

/* Right-panel h2 : eyebrow labels for charts, results, exports. */
.view-panel h2 {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pencil);
    margin: var(--sp-4) 0 var(--sp-2);
    font-weight: 700;
}
.view-panel h2:first-child { margin-top: 0; }

/* ---------- Form controls ---------- */

.grid-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
}

label {
    display: block;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--pencil);
    line-height: 1.35;
    min-width: 0;
}
/* Inputs/selects/toggles inside labels : block width:100% + top margin. */
label > input,
label > select,
label > button {
    display: block;
    width: 100%;
    margin-top: 3px;
}
/* Inline <sub> / <sup> stay on the same line as the label text, not
   promoted to block-level elements. */
label sub, label sup {
    display: inline-block;
    text-transform: none;
    letter-spacing: 0;
}

input[type="number"], select, input[type="text"] {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--wire);
    border-radius: var(--r-sm);
    background: var(--surface);
    color: var(--carbon);
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type="number"]:hover, select:hover, input[type="text"]:hover {
    border-color: var(--wire-strong);
}
input[type="number"]:focus, select:focus, input[type="text"]:focus {
    outline: none;
    border-color: var(--thermal);
    box-shadow: 0 0 0 3px var(--thermal-soft);
}
input[readonly] { color: var(--pencil); background: var(--paper); }

button {
    font-family: var(--font-body);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--surface);
    color: var(--carbon);
    border: 1px solid var(--wire);
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
button:hover { background: var(--paper); border-color: var(--wire-strong); }

button.primary {
    background: var(--thermal);
    color: var(--surface);
    border-color: var(--thermal);
    padding: 10px 16px;
    margin-top: var(--sp-2);
    width: 100%;
    font-weight: 600;
    letter-spacing: 0.02em;
}
button.primary:hover { background: var(--thermal-hover); border-color: var(--thermal-hover); }

/* Toggle buttons — inactive = ghost, active = thermal accent (border-left
   as the "signal" mark rather than a filled bg). */
button.toggle {
    padding: 6px 10px;
    background: var(--surface);
    color: var(--graphite);
    border: 1px solid var(--wire);
    text-align: left;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    border-left-width: 3px;
    border-left-color: var(--wire);
    transition: all 0.12s ease;
}
button.toggle:hover { background: var(--paper); border-color: var(--wire-strong); }
button.toggle[data-value="true"] {
    color: var(--carbon);
    border-left-color: var(--thermal);
    background: var(--surface);
}
button.toggle[data-value="false"] {
    color: var(--pencil);
    border-left-color: var(--wire);
}
button.toggle[data-value="false"]:hover { background: var(--paper); }

/* ---------- Preset rows ---------- */

#presets-list { display: flex; flex-direction: column; gap: 5px; margin: var(--sp-2) 0; }
.preset-row {
    display: grid;
    grid-template-columns: 1fr 80px 48px 22px;
    gap: 4px;
    align-items: center;
}
.preset-row input, .preset-row select {
    font-size: 12px;
    padding: 4px 6px;
}
.preset-row .remove {
    background: transparent;
    border: none;
    color: var(--pencil);
    cursor: pointer;
    font-size: 15px;
    padding: 0;
    line-height: 1;
    border-radius: var(--r-sm);
    transition: color 0.12s ease, background 0.12s ease;
}
.preset-row .remove:hover { color: var(--danger); background: rgba(197, 48, 48, 0.08); }
#add-preset { font-size: 11px; padding: 5px 12px; }

/* ---------- Global warnings banner ---------- */

.warnings {
    margin: 0 var(--sp-3) var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--thermal-soft);
    border-left: 3px solid var(--thermal);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--carbon);
    display: none;
}
.warnings.show { display: block; }
.warnings strong { display: block; margin-bottom: 4px; color: var(--thermal); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; }
.warnings ul, .warnings .warn-list { margin: 4px 0 0 20px; padding: 0; }
.warnings .warn-line { margin: 4px 0; line-height: 1.5; }
.warnings .warn-line b { font-family: var(--font-mono); color: var(--thermal); font-weight: 600; }
.warnings .warn-details { display: inline; margin-left: 6px; }
.warnings .warn-details summary {
    display: inline;
    color: var(--pencil);
    font-size: 11px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    list-style: none;
}
.warnings .warn-details summary::-webkit-details-marker { display: none; }
.warnings .warn-details[open] summary { color: var(--carbon); }
.warnings .warn-details ul {
    margin-top: 6px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--graphite);
}

/* ---------- Tabs (right panel) ---------- */

.tabs {
    display: flex;
    background: var(--paper);
    border-bottom: 1px solid var(--wire);
    padding: 0 var(--sp-3);
    flex-shrink: 0;
    gap: 2px;
}
.tab {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--pencil);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    padding: 12px 16px;
    cursor: pointer;
    margin-bottom: -1px;
    border-radius: 0;
    transition: color 0.12s ease, border-color 0.12s ease;
    letter-spacing: 0.01em;
}
.tab:hover { color: var(--carbon); }
.tab.active {
    color: var(--carbon);
    border-bottom-color: var(--thermal);
    font-weight: 600;
    background: transparent;
}

.tab-body {
    padding: var(--sp-4);
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--surface);
}
.tab-body.hidden { display: none; }

/* ---------- SVG diagram ---------- */

/* Signature n°2 : the SVG viz sits on subtle engineering graph paper.
   Faint dotted grid — never overpowering the diagram itself. */
#mech-svg {
    width: 100%;
    flex: 1;
    min-height: 320px;
    background-color: var(--surface);
    background-image: radial-gradient(circle, var(--wire) 0.6px, transparent 0.6px);
    background-size: 12px 12px;
    background-position: 0 0;
    border-radius: var(--r-md);
    border: 1px solid var(--wire);
}

.anim-controls {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}
#preset-buttons { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
#preset-buttons button {
    font-size: 11px;
    padding: 6px 10px;
    border-left: 3px solid var(--wire);
}
#preset-buttons button:hover { border-left-color: var(--wire-strong); }
#preset-buttons button.active {
    background: var(--carbon);
    color: var(--paper);
    border-color: var(--carbon);
    border-left-color: var(--thermal);
}
#preset-buttons button.endpoint-btn {
    background: var(--thermal-soft);
    border-color: var(--wire);
    color: var(--thermal);
    border-left-color: var(--thermal);
}
#preset-buttons button.endpoint-btn:hover { background: rgba(236, 91, 15, 0.16); }
#preset-buttons button.endpoint-btn.active {
    background: var(--thermal);
    color: var(--surface);
    border-color: var(--thermal);
}
#preset-buttons button.unsafe {
    color: var(--danger);
    border-left-color: var(--danger);
    text-decoration: line-through;
    opacity: 0.75;
}
#preset-buttons button.unsafe:hover { opacity: 1; }

.scrub {
    display: flex;
    flex-direction: column;
    font-family: var(--font-body);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pencil);
    flex: 1;
    min-width: 200px;
    gap: 4px;
}
.scrub input[type="range"] {
    width: 100%;
    accent-color: var(--thermal);
}
.scrub b {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--carbon);
    font-weight: 500;
    font-size: 12px;
    text-transform: none;
    letter-spacing: 0;
}

/* ---------- Charts ---------- */

.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 12px;
    flex: 1;
    min-height: 0;
}
.chart-cell {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}
.chart-cell h2 { margin: 0 0 4px; }
.chart {
    width: 100%;
    flex: 1;
    min-height: 0;
}

/* ---------- Info panels ---------- */

.info {
    font-size: 12px;
    color: var(--graphite);
    margin-top: var(--sp-2);
    line-height: 1.55;
}
.info .hint {
    color: var(--pencil);
    font-size: 10.5px;
}
.info b { color: var(--carbon); font-weight: 600; }

textarea {
    width: 100%;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: var(--sp-2);
    border: 1px solid var(--wire);
    border-radius: var(--r-sm);
    resize: vertical;
    background: var(--paper);
    color: var(--carbon);
    min-height: 120px;
    line-height: 1.4;
}
textarea:focus {
    outline: none;
    border-color: var(--thermal);
    box-shadow: 0 0 0 3px var(--thermal-soft);
}
.row { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0; flex-wrap: wrap; }

/* ---------- Preset results table ---------- */

#preset-results {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    margin-top: var(--sp-1);
}
#preset-results th, #preset-results td {
    padding: 7px var(--sp-2);
    border-bottom: 1px solid var(--wire);
    text-align: left;
}
#preset-results th {
    background: var(--paper);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 10px;
    color: var(--pencil);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
#preset-results td.num {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--carbon);
}
#preset-results td.ok { color: var(--success); }
#preset-results td.notok { color: var(--danger); }
#preset-results td.warn { color: var(--warn); font-style: normal; font-size: 10.5px; }

/* ---------- Position servo — slider + numeric row ----------
   Replaces the old 5-button "nudge pad" which was cluttered and redundant
   with the "Servo contre" toggle. */

.pos-row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    margin: var(--sp-3) 0 var(--sp-3);
}
.pos-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-body);
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pencil);
    margin-bottom: 3px;
}
.pos-value {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    text-transform: none;
    letter-spacing: 0;
}
.pos-value input[type="number"] {
    width: 62px;
    padding: 3px 6px;
    font-size: 12px;
    text-align: right;
}
.pos-value em {
    font-style: normal;
    font-family: var(--font-body);
    font-weight: 500;
    color: var(--pencil);
    font-size: 11px;
}

/* Native range styled thermal — precise, no chrome */
.pos-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: var(--wire);
    border-radius: 2px;
    outline: none;
    margin: 6px 0 2px;
    cursor: pointer;
}
.pos-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: var(--thermal);
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(19, 23, 33, 0.25);
    cursor: grab;
    transition: transform 0.1s ease;
}
.pos-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pos-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.05); }
.pos-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: var(--thermal);
    border: 2px solid var(--surface);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(19, 23, 33, 0.25);
    cursor: grab;
}
.pos-slider:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px var(--thermal-soft), 0 1px 3px rgba(19, 23, 33, 0.25);
}

.pos-ends {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pencil);
    padding: 0 2px;
}

/* ---------- Airfoil source ---------- */

.hidden { display: none !important; }
.airfoil-results {
    margin-top: var(--sp-2);
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--wire);
    border-radius: var(--r-sm);
    background: var(--paper);
}
.airfoil-results .row-item {
    padding: 7px var(--sp-3);
    border-bottom: 1px solid var(--wire);
    cursor: pointer;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.1s ease;
}
.airfoil-results .row-item:last-child { border-bottom: none; }
.airfoil-results .row-item:hover { background: var(--thermal-soft); }
.airfoil-results .row-item .aid {
    font-family: var(--font-mono);
    color: var(--pencil);
    font-size: 10.5px;
}
.airfoil-results .empty {
    padding: var(--sp-3);
    color: var(--pencil);
    font-size: 12px;
    text-align: center;
}
.airfoil-loaded {
    margin-top: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--thermal-soft);
    border-left: 3px solid var(--thermal);
    border-radius: var(--r-sm);
    font-size: 12px;
    color: var(--carbon);
}
.airfoil-loaded .clear-btn {
    float: right;
    background: transparent;
    border: none;
    color: var(--pencil);
    cursor: pointer;
    font-size: 14px;
    padding: 0 4px;
    border-radius: var(--r-sm);
}
.airfoil-loaded .clear-btn:hover { color: var(--danger); }

/* ---------- Help modal ---------- */

.modal { position: fixed; inset: 0; z-index: 100; }
.modal.hidden { display: none; }
.modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(19, 23, 33, 0.62);
    backdrop-filter: blur(3px);
}
.modal-content {
    position: relative;
    max-width: 720px;
    max-height: 88vh;
    margin: 5vh auto;
    background: var(--surface);
    border-radius: var(--r-lg);
    padding: var(--sp-6) var(--sp-8);
    box-shadow: var(--shadow-3);
    overflow-y: auto;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--carbon);
    border: 1px solid var(--wire);
}
.modal-close {
    position: absolute;
    top: var(--sp-2); right: var(--sp-3);
    background: transparent;
    border: none;
    font-size: 22px;
    color: var(--pencil);
    cursor: pointer;
    line-height: 1;
    padding: 4px 10px;
    border-radius: var(--r-sm);
}
.modal-close:hover { color: var(--carbon); background: var(--paper); }
.modal-content h2 {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 var(--sp-3);
    color: var(--carbon);
    letter-spacing: -0.015em;
}
.modal-content h3 {
    font-family: var(--font-display);
    font-size: 11px;
    margin: var(--sp-6) 0 var(--sp-2);
    color: var(--thermal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
.modal-content ul, .modal-content ol { margin: 4px 0 var(--sp-2) 22px; padding: 0; }
.modal-content li { margin-bottom: 3px; }
.modal-content p { margin: 6px 0; }
.modal-content .hint { color: var(--pencil); font-size: 11px; margin-top: var(--sp-6); }

/* ---------- Configs modal ---------- */

.configs-modal-content { max-width: 560px; }
.configs-section {
    margin-top: var(--sp-6);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--wire);
}
.configs-section:first-of-type { border-top: none; padding-top: 0; margin-top: var(--sp-3); }
.configs-section h3 {
    font-family: var(--font-display);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pencil);
    margin: 0 0 var(--sp-2);
    font-weight: 700;
}
.configs-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 260px;
    overflow-y: auto;
}
.configs-empty {
    color: var(--pencil);
    font-size: 12px;
    padding: var(--sp-2);
    text-align: center;
}
.configs-item {
    display: flex;
    gap: 4px;
    align-items: stretch;
}
.config-load {
    flex: 1;
    text-align: left;
    padding: 9px var(--sp-3);
    background: var(--surface);
    color: var(--carbon);
    border: 1px solid var(--wire);
    border-left: 3px solid var(--wire);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}
.config-load:hover {
    background: var(--paper);
    border-left-color: var(--thermal);
}
.config-delete {
    background: transparent;
    border: 1px solid transparent;
    color: var(--pencil);
    padding: 0 var(--sp-3);
    font-size: 16px;
    cursor: pointer;
    border-radius: var(--r-sm);
    transition: all 0.12s ease;
}
.config-delete:hover { background: rgba(197, 48, 48, 0.08); color: var(--danger); }
.import-label {
    display: inline-block;
    padding: 6px 12px;
    background: var(--surface);
    color: var(--carbon);
    border: 1px solid var(--wire);
    border-radius: var(--r-sm);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s ease;
}
.import-label:hover { background: var(--paper); border-color: var(--wire-strong); }

/* ---------- Scrollbars ---------- */

.panel::-webkit-scrollbar, .tab-body::-webkit-scrollbar { width: 8px; }
.panel::-webkit-scrollbar-thumb, .tab-body::-webkit-scrollbar-thumb {
    background: var(--wire); border-radius: var(--r-sm);
}
.panel::-webkit-scrollbar-thumb:hover, .tab-body::-webkit-scrollbar-thumb:hover {
    background: var(--wire-strong);
}

/* ---------- Responsive : tablette paysage / narrow desktop ---------- */

@media (max-width: 1100px) {
    main { grid-template-columns: 320px minmax(0, 1fr); gap: 8px; padding: 8px; }
    .usecase-picker .uc-btn { padding: 4px 8px; font-size: 11px; }
}

/* ---------- Responsive : tablette portrait / large mobile ---------- */

@media (max-width: 820px) {
    html, body { overflow: auto; height: auto; }
    body { min-height: 100vh; }
    header {
        flex-wrap: wrap;
        row-gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-3);
        height: auto;
        gap: var(--sp-4);
    }
    header .brand-airfoil { display: none; }
    header .brand-name { font-size: 18px; }
    header .header-spacer { display: none; }
    header .header-actions { margin-left: auto; gap: var(--sp-3); flex-wrap: wrap; row-gap: 2px; }
    header .usecase-picker {
        order: 10;
        flex-basis: 100%;
        justify-content: flex-start;
    }
    main {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        overflow: visible;
        padding: 8px;
    }
    .panel { overflow: visible; }
    .view-panel { min-height: 60vh; }
    .tab-body { overflow: visible; }
    #mech-svg { min-height: 260px; }
}

/* ---------- Responsive : mobile portrait ---------- */

@media (max-width: 520px) {
    header .brand-name { font-size: 16px; }
    header .hd-action { font-size: 11px; }
    header .uc-btn { font-size: 12px; }
    .grid-form { grid-template-columns: 1fr; }
    main { padding: 6px; gap: 6px; }
    .panel { padding: 10px; }
    .section > summary { padding: 8px 10px; font-size: 12px; }
    .tab { padding: 10px 8px; font-size: 12px; }
    .charts-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
    .chart { min-height: 220px; }
    #preset-results { font-size: 11px; }
    #preset-results th, #preset-results td { padding: 4px 5px; }
}

/* ---------- Responsive : phone ---------- */
/* The action bar (undo/redo, share, setups, account, help, EN | FR, status)
   is wider than a phone: give it its own full-width row and let it wrap. */
@media (max-width: 480px) {
    header .header-actions {
        flex-basis: 100%;
        margin-left: 0;
        column-gap: var(--sp-3);
    }
}