/* =====================================================================
 * LEAPS — Linear Elastic Analysis of Pavement Structures
 * Workspace stylesheet. Dark-first; light theme via [data-theme="light"].
 * ===================================================================== */

.LeapsApp {
    --lp-bg0: #0a111f;      /* viewport void            */
    --lp-bg1: #0f1829;      /* panels                   */
    --lp-bg2: #16223a;      /* cards, inputs            */
    --lp-bg3: #1d2c49;      /* hover targets            */
    --lp-line: #24344f;
    --lp-line-soft: #1b2941;
    --lp-ink: #e8eef9;
    --lp-ink2: #93a5c4;
    --lp-ink3: #5f7396;
    --lp-accent: #22d3d1;
    --lp-accent-deep: #0d9488;
    --lp-indigo: #6366f1;
    --lp-warn: #d97706;
    --lp-danger: #e05252;
    --lp-ok: #34d399;
    --lp-cat1: #0d9488;     /* validated categorical set (dark) */
    --lp-cat2: #6366f1;
    --lp-cat3: #d97706;
    --lp-cat4: #db2777;
    --lp-shadow: 0 10px 30px rgba(2, 6, 16, 0.55);
    --lp-radius: 10px;
    --lp-mono: ui-monospace, "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;
}

[data-theme="light"] .LeapsApp {
    --lp-bg0: #e8ecf3;
    --lp-bg1: #ffffff;
    --lp-bg2: #f2f5fa;
    --lp-bg3: #e7edf6;
    --lp-line: #d7dfeb;
    --lp-line-soft: #e4eaf3;
    --lp-ink: #17253c;
    --lp-ink2: #51637f;
    --lp-ink3: #8195b1;
    --lp-accent: #0d9488;
    --lp-accent-deep: #0d9488;
    --lp-cat1: #0d9488;     /* validated categorical set (light) */
    --lp-cat2: #4f46e5;
    --lp-cat3: #b45309;
    --lp-cat4: #be185d;
    --lp-shadow: 0 10px 26px rgba(23, 37, 60, 0.12);
}

/* ---------- App frame ---------- */
.lp-app { max-width: 1660px; margin: 0 auto; padding: 2em 1.25em 3em; }

.lp-app .app-header { margin-bottom: 1.4em; }
.lp-app .header-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1em; }
.lp-app .back-btn { font-size: 0.9em; color: var(--lp-ink2); border-bottom: none; }
.lp-app .back-btn:hover { color: var(--lp-accent); }
.lp-app .header-badges { display: flex; gap: 0.5em; }
.lp-app .header-badge {
    font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase;
    padding: 0.35em 0.9em; border-radius: 999px;
    border: 1px solid var(--lp-line); color: var(--lp-ink2); background: var(--lp-bg1);
}
.lp-app .header-badge-link { transition: color 0.15s, border-color 0.15s; border-bottom: 1px solid var(--lp-line); }
.lp-app .header-badge-link:hover { color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-app .header-content h1 {
    display: flex; align-items: center; gap: 0.4em;
    font-size: 2.1em; margin: 0 0 0.25em; letter-spacing: 0.01em;
}
.lp-app .header-content h1 .highlight { color: var(--lp-accent); }
.lp-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.5em; height: 1.5em; border-radius: 0.3em; font-size: 0.72em;
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    color: #fff;
}
.lp-app .header-content p { color: var(--lp-ink2); max-width: 64em; margin: 0; }

/* ---------- Workspace grid ---------- */
.lp-workspace {
    border: 1px solid var(--lp-line);
    border-radius: 14px;
    background: var(--lp-bg1);
    box-shadow: var(--lp-shadow);
    overflow: hidden;
}

.lp-body {
    display: grid;
    grid-template-columns: 300px minmax(420px, 1fr) 320px;
    min-height: 640px;
}

/* ---------- Top bar ---------- */
.lp-topbar {
    display: flex; align-items: center; gap: 0.6em;
    padding: 0.55em 0.9em;
    border-bottom: 1px solid var(--lp-line);
    background: var(--lp-bg1);
    flex-wrap: wrap;
}
.lp-topbar-group { display: flex; align-items: center; gap: 0.45em; }
.lp-topbar-spacer { flex: 1; }
.lp-project-name {
    background: transparent; border: 1px solid transparent; border-radius: 7px;
    color: var(--lp-ink); font-weight: 600; font-size: 0.95em;
    padding: 0.3em 0.55em; width: 15em;
}
.lp-project-name:hover { border-color: var(--lp-line); }
.lp-project-name:focus { border-color: var(--lp-accent); outline: none; background: var(--lp-bg2); }

.lp-tool {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4em;
    min-width: 2.1em; height: 2.1em; padding: 0 0.55em;
    border: 1px solid var(--lp-line); border-radius: 8px;
    background: var(--lp-bg2); color: var(--lp-ink2);
    font-size: 0.85em; cursor: pointer; box-shadow: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    line-height: 1;
}
.lp-tool:hover:not(:disabled) { color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-tool:disabled { opacity: 0.4; cursor: default; }

.lp-sep { width: 1px; height: 1.5em; background: var(--lp-line); display: inline-block; }

.lp-select {
    appearance: none; -webkit-appearance: none;
    background: var(--lp-bg2); color: var(--lp-ink);
    border: 1px solid var(--lp-line); border-radius: 8px;
    font-size: 0.82em; padding: 0.42em 1.8em 0.42em 0.7em; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--lp-ink3) 50%),
        linear-gradient(135deg, var(--lp-ink3) 50%, transparent 50%);
    background-position: calc(100% - 0.95em) 55%, calc(100% - 0.65em) 55%;
    background-size: 0.3em 0.3em;
    background-repeat: no-repeat;
    max-width: 100%;
}
.lp-select:focus { outline: none; border-color: var(--lp-accent); }

.lp-check {
    display: inline-flex; align-items: center; gap: 0.4em;
    font-size: 0.82em; color: var(--lp-ink2); cursor: pointer; user-select: none;
}
.lp-check input { accent-color: var(--lp-accent); cursor: pointer; }

.lp-run {
    display: inline-flex; align-items: center; gap: 0.5em;
    border: none; border-radius: 8px; cursor: pointer;
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    color: #fff; font-weight: 700; font-size: 0.85em;
    padding: 0.55em 1.2em; box-shadow: none; letter-spacing: 0.03em;
    transition: filter 0.15s, transform 0.1s;
}
.lp-run:hover { filter: brightness(1.15); }
.lp-run:active { transform: translateY(1px); }

.lp-progress {
    width: 110px; height: 5px; border-radius: 4px; overflow: hidden;
    background: var(--lp-bg3);
}
.lp-progress-fill { height: 100%; width: 0%; background: var(--lp-accent); transition: width 0.15s; }

/* ---------- Side panels ---------- */
.lp-left, .lp-right {
    background: var(--lp-bg1);
    overflow-y: auto; max-height: 78vh;
}
.lp-left { border-right: 1px solid var(--lp-line); }
.lp-right { border-left: 1px solid var(--lp-line); }

.lp-section { border-bottom: 1px solid var(--lp-line-soft); }
.lp-section > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 0.6em;
    padding: 0.75em 1em;
    font-size: 0.78em; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--lp-ink2);
}
.lp-section > summary::-webkit-details-marker { display: none; }
.lp-section > summary:hover { color: var(--lp-accent); }
.lp-section > summary i { width: 1.2em; text-align: center; color: var(--lp-accent-deep); }
.lp-section[open] > summary { color: var(--lp-ink); }
.lp-count { margin-left: auto; font-weight: 400; color: var(--lp-ink3); letter-spacing: 0; }
.lp-section-body { padding: 0.2em 0.9em 0.9em; }

.lp-hint { font-size: 0.74em; color: var(--lp-ink3); margin: 0.3em 0 0.6em; line-height: 1.5; }
.lp-h4 {
    font-size: 0.74em; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--lp-ink3); margin: 1.2em 0 0.5em;
}
.lp-row { display: flex; gap: 0.5em; align-items: center; }
.lp-grow { flex: 1; }

.lp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.45em;
    border: 1px solid var(--lp-line); border-radius: 8px;
    background: var(--lp-bg2); color: var(--lp-ink2);
    font-size: 0.78em; font-weight: 600; padding: 0.5em 0.8em;
    cursor: pointer; box-shadow: none; line-height: 1.2;
    transition: color 0.15s, border-color 0.15s;
    height: auto;
}
.lp-btn:hover { color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-btn-block { width: 100%; margin-top: 0.5em; }

.lp-field { display: block; margin: 0.55em 0; }
.lp-field > span {
    display: block; font-size: 0.7em; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--lp-ink3); margin-bottom: 0.25em;
}
.lp-field .lp-select, .lp-field input[type="number"], .lp-field input[type="text"] { width: 100%; }

.lp-num, .lp-app input[type="number"], .lp-app input[type="text"].lp-input {
    background: var(--lp-bg2); border: 1px solid var(--lp-line); border-radius: 7px;
    color: var(--lp-ink); font-family: var(--lp-mono); font-size: 0.8em;
    padding: 0.35em 0.5em; width: 100%;
    font-variant-numeric: tabular-nums;
}
.lp-app input[type="number"]:focus, .lp-app input[type="text"].lp-input:focus {
    outline: none; border-color: var(--lp-accent);
}
.lp-app input[type="number"]::-webkit-inner-spin-button { opacity: 0.35; }

/* ---------- Layer cards (inline editors) ---------- */
.lp-layer {
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: var(--lp-bg2); margin: 0.5em 0; overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.lp-layer.is-subgrade { background: color-mix(in srgb, var(--lp-bg2) 80%, var(--lp-accent-deep) 6%); }
.lp-layer.is-dragover { border-color: var(--lp-accent); box-shadow: inset 0 0 0 1px var(--lp-accent); }
.lp-layer.is-dragging { opacity: 0.45; }
.lp-layer-head {
    display: flex; align-items: center; gap: 0.45em;
    padding: 0.45em 0.55em 0.35em;
}
.lp-layer-grip { color: var(--lp-ink3); cursor: grab; font-size: 0.8em; padding: 0.1em 0.15em; flex: none; }
.lp-layer-grip:active { cursor: grabbing; }
.lp-layer-chip { width: 13px; height: 13px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,0.3); }
.lp-layer-idx {
    font-family: var(--lp-mono); font-size: 0.66em; color: var(--lp-ink3);
    min-width: 1.2em; text-align: center; flex: none;
}
.lp-layer-mat { flex: 1; min-width: 0; font-size: 0.78em; padding: 0.34em 1.6em 0.34em 0.55em; }
.lp-layer-more {
    flex: none; min-width: 1.9em; height: 1.9em; padding: 0;
    border: 1px solid var(--lp-line); border-radius: 7px;
    background: var(--lp-bg2); color: var(--lp-ink3); cursor: pointer;
    font-size: 0.78em; line-height: 1; box-shadow: none;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.lp-layer-more:hover { color: var(--lp-accent); border-color: var(--lp-accent); }
.lp-layer-more.is-open { color: var(--lp-accent); background: var(--lp-bg3); border-color: var(--lp-accent); }
.lp-layer-quick {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.35em 0.5em;
    padding: 0 0.55em 0.55em; align-items: end;
}
.lp-layer-quick.is-sub { grid-template-columns: 1.1fr 1fr 1fr; }
.lp-layer-quick .lp-field { margin: 0; }
.lp-layer-quick .lp-field > span { text-transform: none; letter-spacing: 0.03em; }
.lp-inf-tag {
    display: inline-flex; align-items: center; gap: 0.35em; align-self: center;
    font-size: 0.68em; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--lp-accent); font-weight: 600;
}
.lp-inf-tag i { font-size: 1.05em; }
.lp-layer-body { padding: 0.4em 0.55em 0.55em; border-top: 1px solid var(--lp-line-soft); }
.lp-layer-body .lp-field { margin: 0 0 0.5em; }
.lp-layer-actions { display: flex; gap: 0.35em; }
.lp-layer-actions .lp-tool { font-size: 0.72em; min-width: 1.9em; height: 1.9em; }

/* ---------- Insert-between-layers affordance ---------- */
.lp-layer-insert {
    display: flex; align-items: center; gap: 0.55em;
    height: 16px; margin: -0.32em 0; padding: 0 0.2em;
    cursor: pointer; position: relative; z-index: 1;
}
.lp-layer-insert-line {
    flex: 1; height: 1px; background: var(--lp-line);
    transition: background 0.15s; opacity: 0.5;
}
.lp-layer-insert-btn {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 18px; height: 18px; border-radius: 50%;
    border: 1px solid var(--lp-line); background: var(--lp-bg2); color: var(--lp-ink3);
    font-size: 0.6em; line-height: 1;
    opacity: 0.45; transform: scale(0.8);
    transition: opacity 0.15s, transform 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
}
.lp-layer-insert:hover .lp-layer-insert-line,
.lp-layer-insert:focus-visible .lp-layer-insert-line { opacity: 1; }
.lp-layer-insert:hover .lp-layer-insert-line,
.lp-layer-insert:focus-visible .lp-layer-insert-line { background: var(--lp-accent); }
.lp-layer-insert:hover .lp-layer-insert-btn,
.lp-layer-insert:focus-visible .lp-layer-insert-btn {
    opacity: 1; transform: scale(1);
    color: var(--lp-accent); border-color: var(--lp-accent); background: var(--lp-bg3);
}
.lp-layer-insert:focus-visible { outline: none; }
.lp-layer-insert:active .lp-layer-insert-btn { transform: scale(0.9); }

/* ---------- Interface rows ---------- */
.lp-itf {
    display: flex; align-items: center; gap: 0.5em; margin: 0.45em 0;
    font-size: 0.78em; color: var(--lp-ink2);
}
.lp-itf-label { font-family: var(--lp-mono); font-size: 0.85em; color: var(--lp-ink3); width: 6.5em; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-itf .lp-select { flex: 1; }
.lp-itf input[type="number"] { width: 5.5em; flex: none; }

/* ---------- Section sub-heads ---------- */
.lp-subhead {
    display: flex; align-items: center; gap: 0.45em;
    font-size: 0.68em; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--lp-ink3); margin: 0.7em 0 0.35em;
}
.lp-subhead:first-child { margin-top: 0.2em; }
.lp-subhead i { color: var(--lp-accent-deep); }
.lp-subhead-row { justify-content: space-between; }
.lp-linkbtn {
    background: none; border: none; box-shadow: none; cursor: pointer;
    color: var(--lp-accent); font-size: 0.92em; font-weight: 600; padding: 0.1em 0.3em;
    display: inline-flex; align-items: center; gap: 0.3em; letter-spacing: 0; text-transform: none;
}
.lp-linkbtn:hover { color: var(--lp-accent); filter: brightness(1.2); }

/* ---------- Gear generator ---------- */
.lp-gear-row { display: flex; gap: 0.5em; margin: 0.2em 0 0.4em; }
.lp-gear-params { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em 0.6em; margin-bottom: 0.2em; }
.lp-gear-params .lp-field { margin: 0; }

/* ---------- Wheels table ---------- */
.lp-wheels-editor { margin-top: 0.1em; }
.lp-app table.lp-wtable { width: 100%; border-collapse: collapse; }
.lp-app .lp-wtable th {
    font-size: 0.62em; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--lp-ink3); font-weight: 700; text-align: center;
    padding: 0.1em 0.15em 0.3em; vertical-align: bottom; line-height: 1.15;
}
.lp-app .lp-wtable th em { display: block; font-style: normal; font-weight: 400; opacity: 0.7; font-size: 0.9em; }
.lp-app .lp-wtable th.lp-wtag-h { width: 1.8em; }
.lp-app .lp-wtable td { padding: 0.12em 0.12em; text-align: center; }
.lp-wtag {
    font-family: var(--lp-mono); font-size: 0.72em; font-weight: 700;
    color: var(--lp-accent); white-space: nowrap;
}
.lp-app .lp-wtable td input[type="number"] {
    padding: 0.28em 0.2em; text-align: right; font-size: 0.74em; border-radius: 5px;
}
.lp-wdel { min-width: 1.5em; height: 1.6em; font-size: 0.72em; padding: 0; }
.lp-wfoot {
    font-family: var(--lp-mono); font-size: 0.62em; color: var(--lp-ink3);
    margin-top: 0.5em; line-height: 1.5; word-break: break-word;
}
.lp-wfoot i { color: var(--lp-accent-deep); margin-right: 0.3em; }

/* ---------- Points ---------- */
.lp-point {
    display: flex; align-items: center; gap: 0.45em; margin: 0.35em 0;
    font-family: var(--lp-mono); font-size: 0.72em; color: var(--lp-ink2);
}
.lp-point-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-cat3); flex: none; }
.lp-point span.lp-grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-point .lp-tool { font-size: 0.8em; min-width: 1.7em; height: 1.7em; }

/* ---------- Viewport ---------- */
.lp-viewport {
    position: relative; background: var(--lp-bg0); min-height: 640px;
    overflow: hidden; outline: none;
}
#lp-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }

.lp-vp-toolbar {
    position: absolute; top: 10px; left: 10px; z-index: 5;
    display: flex; align-items: center; gap: 0.35em;
    background: color-mix(in srgb, var(--lp-bg1) 88%, transparent);
    border: 1px solid var(--lp-line); border-radius: 10px;
    padding: 0.3em 0.45em; backdrop-filter: blur(6px);
}
.lp-check-tool { padding: 0.2em 0.3em; }
.lp-vp-field {
    position: absolute; top: 10px; right: 10px; z-index: 5;
    display: flex; align-items: center; gap: 0.5em;
    background: color-mix(in srgb, var(--lp-bg1) 88%, transparent);
    border: 1px solid var(--lp-line); border-radius: 10px;
    padding: 0.3em 0.5em; backdrop-filter: blur(6px);
}
.lp-vp-field input[type="range"] { width: 84px; accent-color: var(--lp-accent); }

#lp-colorbar { position: absolute; right: 12px; top: 64px; z-index: 4; pointer-events: none; }

.lp-plan-panel {
    position: absolute; right: 12px; bottom: 12px; z-index: 4;
    width: 300px;
    border: 1px solid var(--lp-line); border-radius: 12px; overflow: hidden;
    background: color-mix(in srgb, var(--lp-bg1) 92%, transparent);
    backdrop-filter: blur(6px);
    box-shadow: var(--lp-shadow);
}
.lp-plan-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35em 0.5em 0.35em 0.7em;
    font-size: 0.66em; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--lp-ink2); border-bottom: 1px solid var(--lp-line-soft);
    background: color-mix(in srgb, var(--lp-bg1) 70%, transparent);
}
.lp-plan-head i { color: var(--lp-accent); }
.lp-plan-head em { font-style: normal; color: var(--lp-ink3); font-weight: 400; letter-spacing: 0; text-transform: none; }
.lp-plan-btn {
    border: none; background: none; box-shadow: none; cursor: pointer;
    color: var(--lp-ink3); font-size: 1em; padding: 0.1em 0.3em; line-height: 1;
    transition: color 0.15s, transform 0.2s;
}
.lp-plan-btn:hover { color: var(--lp-accent); }
#lp-plan { display: block; width: 100%; height: 208px; cursor: ns-resize; }
.lp-plan-panel.is-collapsed #lp-plan { display: none; }
.lp-plan-panel.is-collapsed .lp-plan-btn i { transform: rotate(180deg); display: inline-block; }
.lp-plan-panel.is-collapsed .lp-plan-head { border-bottom: none; }
.lp-hover {
    position: absolute; z-index: 6; pointer-events: none;
    background: color-mix(in srgb, var(--lp-bg1) 94%, transparent);
    border: 1px solid var(--lp-line); border-radius: 8px;
    padding: 0.45em 0.65em; font-family: var(--lp-mono); font-size: 0.72em;
    color: var(--lp-ink); white-space: pre; line-height: 1.55;
    box-shadow: var(--lp-shadow);
}

/* ---------- Right panel: key responses + export ---------- */
.lp-right-scroll { padding: 0.9em; }
.lp-right-block { margin-bottom: 1.2em; }
.lp-right-block:last-child { margin-bottom: 0; }
.lp-right-block .lp-h4 { margin-top: 0; display: flex; align-items: center; gap: 0.45em; }
.lp-right-block .lp-h4 i { color: var(--lp-accent-deep); }
.lp-export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45em; margin-bottom: 0.5em; }
.lp-export-grid .lp-btn { width: 100%; margin: 0; }

/* ---------- Result cards ---------- */
.lp-card {
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: var(--lp-bg2); padding: 0.7em 0.85em; margin: 0 0 0.55em;
}
.lp-card-label { font-size: 0.68em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--lp-ink3); }
.lp-card-value {
    font-family: var(--lp-mono); font-size: 1.35em; font-weight: 700;
    color: var(--lp-ink); margin: 0.15em 0; font-variant-numeric: tabular-nums;
}
.lp-card-value small { font-size: 0.55em; font-weight: 400; color: var(--lp-ink2); margin-left: 0.3em; }
.lp-card-sub { font-family: var(--lp-mono); font-size: 0.68em; color: var(--lp-ink3); }
.lp-card.is-accent { border-left: 3px solid var(--lp-accent); }

/* ---------- Tables ---------- */
.lp-table-wrap { overflow: auto; max-height: 58vh; border: 1px solid var(--lp-line); border-radius: 8px; }
.lp-app table.lp-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 0.72em; }
.lp-app .lp-table th, .lp-app .lp-table td {
    padding: 0.45em 0.6em; text-align: right; white-space: nowrap;
    font-family: var(--lp-mono); font-variant-numeric: tabular-nums;
    border-bottom: 1px solid var(--lp-line-soft); color: var(--lp-ink2);
}
.lp-app .lp-table th {
    position: sticky; top: 0; background: var(--lp-bg2); color: var(--lp-ink3);
    font-family: inherit; font-size: 0.92em; letter-spacing: 0.04em; z-index: 1;
    border-bottom: 1px solid var(--lp-line);
}
.lp-app .lp-table td:first-child, .lp-app .lp-table th:first-child { text-align: left; }
.lp-app .lp-table tr:hover td { background: var(--lp-bg3); color: var(--lp-ink); }

/* ---------- Charts ---------- */
.lp-chart { width: 100%; height: 320px; }
.lp-chart-short { height: 260px; }

/* ---------- Bottom results dock ---------- */
.lp-dock { border-top: 1px solid var(--lp-line); background: var(--lp-bg1); }
.lp-dock-tabs {
    display: flex; align-items: center; gap: 0.15em;
    padding: 0 0.6em; border-bottom: 1px solid var(--lp-line);
    background: color-mix(in srgb, var(--lp-bg1) 60%, var(--lp-bg2));
}
.lp-dtab {
    border: none; background: transparent; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.45em;
    font-size: 0.78em; font-weight: 700; letter-spacing: 0.03em;
    color: var(--lp-ink3); padding: 0.85em 1.1em; box-shadow: none;
    border-bottom: 2px solid transparent; border-radius: 0; height: auto; line-height: 1.2;
}
.lp-dtab i { color: inherit; opacity: 0.8; }
.lp-dtab:hover { color: var(--lp-ink); }
.lp-dtab.is-active { color: var(--lp-accent); border-bottom-color: var(--lp-accent); }
.lp-dock-spacer { flex: 1; }
.lp-dock-collapse {
    border: none; background: none; box-shadow: none; cursor: pointer;
    color: var(--lp-ink3); font-size: 0.9em; padding: 0.4em 0.5em; line-height: 1;
    transition: color 0.15s, transform 0.2s;
}
.lp-dock-collapse:hover { color: var(--lp-accent); }
.lp-dock.is-collapsed .lp-dock-collapse i { transform: rotate(180deg); display: inline-block; }
.lp-dock-body { padding: 1em 1.1em 1.2em; }
.lp-dock.is-collapsed .lp-dock-body { display: none; }
.lp-dpane { display: none; }
.lp-dpane.is-active { display: block; }

.lp-prof-controls { display: flex; align-items: flex-end; gap: 1em; margin-bottom: 0.9em; flex-wrap: wrap; }
.lp-field-inline { margin: 0; min-width: 15em; }
.lp-prof-controls .lp-hint { margin: 0; align-self: center; max-width: 60ch; }
.lp-prof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1em; margin-bottom: 1em; }
.lp-chart-card {
    position: relative;
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: var(--lp-bg1); padding: 0.75em 0.8em 0.6em;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.lp-chart-card:hover { border-color: color-mix(in srgb, var(--lp-ink3) 45%, var(--lp-line)); box-shadow: var(--lp-shadow); }
/* the two charts wired to the Field selector carry a quiet accent keyline */
.lp-chart-card.is-linked { border-color: color-mix(in srgb, var(--lp-accent) 32%, var(--lp-line)); }
.lp-chart-card.is-linked::before {
    content: ""; position: absolute; left: 0; top: 0.7em; bottom: 0.7em; width: 2px;
    border-radius: 2px; background: var(--lp-accent); opacity: 0.55;
}
.lp-chart-card.is-linked:hover { border-color: color-mix(in srgb, var(--lp-accent) 55%, var(--lp-line)); }
.lp-chart-card.is-flash { animation: lpCardFlash 0.7s ease; }
@keyframes lpCardFlash {
    0%   { border-color: var(--lp-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lp-accent) 22%, transparent); }
    100% { border-color: color-mix(in srgb, var(--lp-accent) 32%, var(--lp-line)); box-shadow: none; }
}
.lp-chart-card-wide { margin-top: 0.2em; }
.lp-chart-head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7em;
    margin-bottom: 0.45em;
}
.lp-chart-title {
    font-size: 0.74em; font-weight: 700; letter-spacing: 0.05em;
    color: var(--lp-ink2); margin-bottom: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-chart-title .lp-chart-sub { font-weight: 400; color: var(--lp-ink3); letter-spacing: 0; }
.lp-chart-flag {
    display: inline-flex; align-items: center; gap: 0.35em; flex: none;
    font-size: 0.62em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.24em 0.62em; border-radius: 999px; white-space: nowrap; line-height: 1.4;
    border: 1px solid var(--lp-line); color: var(--lp-ink3); background: var(--lp-bg2);
}
.lp-chart-flag i { font-size: 0.9em; opacity: 0.9; }
.lp-chart-flag.is-linked {
    color: var(--lp-accent);
    border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line));
    background: color-mix(in srgb, var(--lp-accent) 12%, transparent);
}
.lp-smallmults { width: 100%; height: 430px; }

/* linked / fixed labelling on the field control + hint */
.lp-field-linked > span { color: var(--lp-accent); display: inline-flex; align-items: center; gap: 0.35em; }
.lp-field-linked > span i { font-size: 0.92em; }
.lp-field-linked .lp-select { border-color: color-mix(in srgb, var(--lp-accent) 40%, var(--lp-line)); }
.lp-tag-linked, .lp-tag-fixed {
    display: inline-block; padding: 0.05em 0.45em; border-radius: 999px;
    font-size: 0.86em; font-weight: 700; letter-spacing: 0.03em;
    border: 1px solid var(--lp-line); vertical-align: baseline;
}
.lp-tag-linked { color: var(--lp-accent); border-color: color-mix(in srgb, var(--lp-accent) 45%, var(--lp-line)); background: color-mix(in srgb, var(--lp-accent) 12%, transparent); }
.lp-tag-fixed { color: var(--lp-ink3); background: var(--lp-bg2); }

/* ---------- Performance panel ---------- */
.lp-perf-grid { display: grid; grid-template-columns: minmax(260px, 1fr) 2fr; gap: 1.2em; align-items: start; }
.lp-perf-cards { display: flex; flex-direction: column; gap: 0.7em; }
.lp-perf-card {
    display: flex; align-items: center; gap: 0.8em;
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: var(--lp-bg2); padding: 0.8em 0.9em;
}
.lp-perf-card.is-gov { border-color: var(--lp-accent); box-shadow: inset 3px 0 0 var(--lp-accent); }
.lp-perf-icon {
    width: 2.4em; height: 2.4em; flex: none; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--lp-accent-deep) 18%, transparent);
    color: var(--lp-accent); font-size: 1em;
}
.lp-perf-label { font-size: 0.68em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lp-ink3); }
.lp-perf-value {
    font-family: var(--lp-mono); font-size: 1.4em; font-weight: 700;
    color: var(--lp-ink); margin: 0.1em 0; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.lp-perf-sub { font-family: var(--lp-mono); font-size: 0.66em; color: var(--lp-ink3); }
.lp-perf-chart {
    border: 1px solid var(--lp-line); border-radius: var(--lp-radius);
    background: var(--lp-bg1); padding: 0.75em 0.8em 0.6em;
}
.lp-perf-chart .lp-chart { height: 260px; }
#lp-perf > .lp-hint { margin-top: 1em; max-width: 90ch; }
#lp-perf .lp-hint a { color: var(--lp-accent); border-bottom: 1px solid var(--lp-line); }

/* ---------- Status bar ---------- */
.lp-statusbar {
    display: flex; align-items: center; gap: 1em;
    border-top: 1px solid var(--lp-line);
    background: var(--lp-bg1);
    padding: 0.4em 0.9em; font-size: 0.72em; color: var(--lp-ink3);
    flex-wrap: wrap;
}
.lp-status-badge { display: inline-flex; align-items: center; gap: 0.45em; color: var(--lp-ink2); }
.lp-status-badge.is-ok i { color: var(--lp-ok); }
.lp-status-badge.is-bad i { color: var(--lp-danger); }
.lp-status-item { white-space: nowrap; }
.lp-status-spacer { flex: 1; }
.lp-mono { font-family: var(--lp-mono); font-variant-numeric: tabular-nums; }

/* ---------- About strip ---------- */
.lp-about {
    display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 1.6em; align-items: center;
    margin-top: 1.6em; padding-top: 1.4em; border-top: 1px solid var(--lp-line-soft);
}
.lp-about-col h3 {
    font-size: 0.85em; letter-spacing: 0.08em; text-transform: uppercase;
    display: flex; align-items: center; gap: 0.5em; margin-bottom: 0.4em;
}
.lp-about-col h3 i { color: var(--lp-accent); }
.lp-about-col p { font-size: 0.82em; color: var(--lp-ink2); line-height: 1.65; margin: 0; }
.lp-about-cta { display: flex; flex-direction: column; gap: 0.5em; align-items: flex-start; }
.lp-doc-link {
    display: inline-flex; align-items: center; gap: 0.5em;
    padding: 0.6em 1.1em; border-radius: 9px; white-space: nowrap;
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    color: #fff; font-weight: 700; font-size: 0.82em; border-bottom: none;
    transition: filter 0.15s, transform 0.1s;
}
.lp-doc-link:hover { filter: brightness(1.12); color: #fff; }
.lp-doc-link:active { transform: translateY(1px); }
.lp-about-cta-note { font-size: 0.72em; color: var(--lp-ink3); line-height: 1.5; max-width: 22em; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
    .lp-body { grid-template-columns: 264px minmax(360px, 1fr) 300px; }
    .lp-prof-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1080px) {
    .lp-body { grid-template-columns: 1fr; }
    .lp-left { order: 2; max-height: none; border-right: none; border-top: 1px solid var(--lp-line); }
    .lp-viewport { order: 1; min-height: 62vh; }
    .lp-right { order: 3; max-height: none; border-left: none; border-top: 1px solid var(--lp-line); }
    .lp-about { grid-template-columns: 1fr; text-align: left; }
    .lp-prof-grid { grid-template-columns: 1fr; }
    .lp-perf-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .lp-app { padding: 1em 0.5em 2em; }
    .lp-project-name { width: 9em; }
    .lp-plan-panel { display: none; }
    .lp-dtab { padding: 0.75em 0.6em; font-size: 0.72em; }
}

/* ---------- Hard overrides vs site-wide button styling ----------
 * main.css styles bare <button> with background + `color:#fff !important`
 * (and a teal background in dark mode at 0,1,1 specificity). Re-assert
 * the workspace look at .LeapsApp scope. */
.LeapsApp .lp-tool,
[data-theme="dark"] .LeapsApp .lp-tool {
    background: var(--lp-bg2); color: var(--lp-ink2) !important;
    box-shadow: none; font-size: 0.85em; padding: 0 0.55em; height: 2.1em;
}
.LeapsApp .lp-tool:hover:not(:disabled),
[data-theme="dark"] .LeapsApp .lp-tool:hover:not(:disabled) {
    background: var(--lp-bg3); color: var(--lp-accent) !important;
}
.LeapsApp .lp-btn,
[data-theme="dark"] .LeapsApp .lp-btn {
    background: var(--lp-bg2); color: var(--lp-ink2) !important;
    box-shadow: none; font-size: 0.78em; padding: 0.5em 0.8em;
}
.LeapsApp .lp-btn:hover,
[data-theme="dark"] .LeapsApp .lp-btn:hover {
    background: var(--lp-bg3); color: var(--lp-accent) !important;
}
.LeapsApp .lp-tab,
[data-theme="dark"] .LeapsApp .lp-tab {
    background: transparent; color: var(--lp-ink3) !important;
    box-shadow: none; border-radius: 0; padding: 0.85em 0.4em; font-size: 0.78em;
}
.LeapsApp .lp-tab:hover,
[data-theme="dark"] .LeapsApp .lp-tab:hover { background: transparent; color: var(--lp-ink) !important; }
.LeapsApp .lp-tab.is-active,
[data-theme="dark"] .LeapsApp .lp-tab.is-active { color: var(--lp-accent) !important; }
.LeapsApp .lp-run,
[data-theme="dark"] .LeapsApp .lp-run {
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    color: #fff !important; box-shadow: none; font-size: 0.85em; padding: 0.55em 1.2em;
}
.LeapsApp .lp-run:hover,
[data-theme="dark"] .LeapsApp .lp-run:hover {
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    filter: brightness(1.15);
}
/* new v1.1 buttons */
.LeapsApp .lp-dtab,
[data-theme="dark"] .LeapsApp .lp-dtab {
    background: transparent; color: var(--lp-ink3) !important;
    box-shadow: none; border-radius: 0; padding: 0.85em 1.1em; font-size: 0.78em;
}
.LeapsApp .lp-dtab:hover,
[data-theme="dark"] .LeapsApp .lp-dtab:hover { background: transparent; color: var(--lp-ink) !important; }
.LeapsApp .lp-dtab.is-active,
[data-theme="dark"] .LeapsApp .lp-dtab.is-active { color: var(--lp-accent) !important; }
.LeapsApp .lp-layer-more,
[data-theme="dark"] .LeapsApp .lp-layer-more {
    background: var(--lp-bg2); color: var(--lp-ink3) !important; box-shadow: none;
}
.LeapsApp .lp-layer-more:hover,
.LeapsApp .lp-layer-more.is-open,
[data-theme="dark"] .LeapsApp .lp-layer-more:hover,
[data-theme="dark"] .LeapsApp .lp-layer-more.is-open { color: var(--lp-accent) !important; background: var(--lp-bg3); }
.LeapsApp .lp-linkbtn,
.LeapsApp .lp-dock-collapse,
.LeapsApp .lp-plan-btn,
[data-theme="dark"] .LeapsApp .lp-linkbtn,
[data-theme="dark"] .LeapsApp .lp-dock-collapse,
[data-theme="dark"] .LeapsApp .lp-plan-btn {
    background: none; box-shadow: none;
}
.LeapsApp .lp-linkbtn,
[data-theme="dark"] .LeapsApp .lp-linkbtn { color: var(--lp-accent) !important; }
.LeapsApp .lp-dock-collapse,
.LeapsApp .lp-plan-btn,
[data-theme="dark"] .LeapsApp .lp-dock-collapse,
[data-theme="dark"] .LeapsApp .lp-plan-btn { color: var(--lp-ink3) !important; }
.LeapsApp .lp-dock-collapse:hover,
.LeapsApp .lp-plan-btn:hover,
[data-theme="dark"] .LeapsApp .lp-dock-collapse:hover,
[data-theme="dark"] .LeapsApp .lp-plan-btn:hover { color: var(--lp-accent) !important; }
.LeapsApp .lp-doc-link,
[data-theme="dark"] .LeapsApp .lp-doc-link {
    background: linear-gradient(135deg, var(--lp-accent-deep), var(--lp-indigo));
    color: #fff !important; box-shadow: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .lp-run, .lp-tool, .lp-btn, .lp-tab, .lp-dtab, .lp-progress-fill { transition: none; }
}