/* ================================================
   LeafLife — Visualization styles
   Shared by visualisation.html and predict-*.html
   ================================================ */

:root {
    --c-bark:        #0F2A1D;
    --c-canopy:      #1F3A2E;
    --c-moss:        #2D5A3D;
    --c-leaf:        #4A6B4F;
    --c-sage:        #86A789;
    --c-mist:        #C8D4C5;
    --c-cream:       #F5F1E8;
    --c-paper:       #FAF8F2;
    --c-soil:        #B5651D;
    --c-amber:       #C9A96E;
    --c-rust:        #8B3A1F;
    --c-ink:         #142019;
    --c-line:        rgba(15, 42, 29, 0.12);
    --c-line-strong: rgba(15, 42, 29, 0.22);

    --r-sm: 4px;
    --r-md: 8px;
    --r-lg: 14px;

    --shadow-1: 0 1px 2px rgba(15,42,29,.06), 0 1px 1px rgba(15,42,29,.04);
    --shadow-2: 0 4px 14px rgba(15,42,29,.08), 0 2px 4px rgba(15,42,29,.04);
    --shadow-3: 0 18px 40px rgba(15,42,29,.12), 0 4px 10px rgba(15,42,29,.06);

    --f-serif: "Forum", Georgia, serif;
    --f-sans:  "Inter", -apple-system, system-ui, sans-serif;
    --f-mono:  "JetBrains Mono", ui-monospace, monospace;
}

/* === Page layout === */
.viz-page {
    background: var(--c-paper);
    min-height: calc(100vh - 200px);
    animation: viz-fadein .35s ease;
}
@keyframes viz-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }

.viz-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 36px;
}

/* === Typography === */
.v-eyebrow {
    font-family: var(--f-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--c-moss);
}
.v-h1 {
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: 38px;
    line-height: 1.12;
    letter-spacing: -0.018em;
    margin: 14px 0 0;
    color: var(--c-bark);
}
.v-h2 {
    font-family: var(--f-serif);
    font-weight: 500;
    font-size: 26px;
    line-height: 1.2;
    margin: 0;
    color: var(--c-bark);
    letter-spacing: -0.005em;
}
.v-lede {
    font-size: 17px;
    color: var(--c-leaf);
    line-height: 1.55;
    max-width: 60ch;
    margin: 12px 0 0;
}

/* === Page header === */
.v-page-header {
    padding: 48px 0 36px;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 36px;
}
.v-page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}

/* === Buttons === */
.v-btn {
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 14px;
    padding: 11px 20px;
    border-radius: var(--r-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s, background .15s, border-color .15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    line-height: 1;
    min-height: unset;
}
.v-btn:active { transform: translateY(1px); }
.v-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.v-btn:disabled { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

.v-btn-primary  { background: var(--c-bark); color: var(--c-cream) !important; }
.v-btn-primary:hover { background: var(--c-canopy); }

.v-btn-secondary { background: white; color: var(--c-bark) !important; border-color: var(--c-line-strong); }
.v-btn-secondary:hover { background: var(--c-cream); border-color: var(--c-leaf); }

.v-btn-accent { background: var(--c-soil); color: white !important; border-color: transparent; }
.v-btn-accent:hover { background: #9c5418; }

.v-btn-ghost { background: transparent; color: var(--c-moss) !important; padding: 9px 14px; }
.v-btn-ghost:hover { background: var(--c-cream); color: var(--c-bark) !important; }

/* === Badges === */
.v-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-sans);
    font-weight: 500;
    font-size: 11.5px;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
.v-badge-sage { background: rgba(134,167,137,0.22); color: var(--c-canopy); }
.v-badge-amber { background: rgba(201,169,110,0.28); color: #6f5520; }
.v-badge-rust  { background: rgba(139,58,31,0.14);  color: var(--c-rust); }
.v-badge-dot   { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* === Stats row === */
.v-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
}
.v-stat-tile {
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 20px 22px;
}
.v-stat-label {
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-moss);
    margin-bottom: 8px;
}
.v-stat-value {
    font-family: var(--f-serif);
    font-size: 36px;
    font-weight: 500;
    color: var(--c-bark);
    line-height: 1;
    letter-spacing: -0.01em;
}
.v-stat-meta {
    font-size: 12px;
    color: var(--c-leaf);
    margin-top: 6px;
}
@media (max-width: 900px) { .v-stats-row { grid-template-columns: repeat(2, 1fr); } }

/* === Filter pills === */
.v-filter-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 20px;
}
.v-filter-sep {
    width: 1px;
    height: 22px;
    background: var(--c-line-strong);
    flex-shrink: 0;
}
.v-pill {
    background: white;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    padding: 6px 14px 6px 12px;
    font-size: 12.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--f-sans);
    color: var(--c-leaf);
    transition: all .15s;
}
.v-pill:hover { border-color: var(--c-moss); color: var(--c-bark); }
.v-pill.active { background: var(--c-bark); color: var(--c-cream); border-color: var(--c-bark); }
.v-pill .pill-count { font-family: var(--f-mono); font-size: 10.5px; opacity: 0.7; }

/* === Split table / map === */
.v-split {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
@media (max-width: 1100px) { .v-split { grid-template-columns: 1fr; } }

/* === Table === */
.v-table-wrap {
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.v-table-toolbar {
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.v-search {
    flex: 1;
    min-width: 220px;
    position: relative;
}
.v-search input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-md);
    font-family: var(--f-sans);
    font-size: 13.5px;
    background: var(--c-paper);
    color: var(--c-ink);
    outline: none;
    transition: border-color .15s, background .15s;
}
.v-search input:focus { border-color: var(--c-moss); background: white; }
.v-search svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px; height: 16px;
    color: var(--c-leaf);
    pointer-events: none;
}
.v-count { font-family: var(--f-mono); font-size: 11px; color: var(--c-leaf); letter-spacing: 0.04em; white-space: nowrap; }
.v-table-scroll { overflow-x: auto; max-height: 520px; overflow-y: auto; }
.v-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.v-table thead { position: sticky; top: 0; background: var(--c-paper); z-index: 2; }
.v-table th {
    text-align: left;
    font-family: var(--f-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-moss);
    font-weight: 500;
    padding: 14px;
    border-bottom: 1px solid var(--c-line);
    white-space: nowrap;
}
.v-table td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--c-line);
    vertical-align: middle;
    white-space: nowrap;
}
.v-table tbody tr { transition: background .15s; cursor: pointer; }
.v-table tbody tr:hover { background: rgba(245,241,232,0.6); }
.v-table tbody tr.selected { background: rgba(134,167,137,0.16); }
.v-table .col-radio { width: 30px; }
.v-table .col-num { font-family: var(--f-mono); font-size: 11.5px; color: var(--c-leaf); }
.v-table .col-species { font-weight: 500; color: var(--c-bark); }
.v-table .col-num-data { font-family: var(--f-mono); font-size: 12px; color: var(--c-canopy); text-align: right; }
.v-table .col-coord { font-family: var(--f-mono); font-size: 11px; color: var(--c-leaf); }
.v-table .col-star { color: var(--c-soil); font-size: 14px; }

.v-radio {
    width: 16px; height: 16px;
    border: 1.5px solid var(--c-line-strong);
    border-radius: 50%;
    display: inline-block;
    position: relative;
    background: white;
    flex-shrink: 0;
}
.v-radio.checked { border-color: var(--c-moss); }
.v-radio.checked::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--c-moss); }

/* === Map === */
.v-map-shell {
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: var(--shadow-1);
}
.v-map-toolbar {
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.v-map-toolbar h3 { font-family: var(--f-serif); font-size: 18px; font-weight: 500; margin: 0; color: var(--c-bark); }
.v-map-toolbar .v-meta { font-family: var(--f-mono); font-size: 11px; color: var(--c-leaf); letter-spacing: 0.04em; }
.v-map-el { height: 480px; width: 100%; }
.v-map-legend { padding: 14px 20px; border-top: 1px solid var(--c-line); }
.v-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--c-leaf); }
.v-legend-item { display: flex; align-items: center; gap: 7px; }
.v-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* Leaflet popup */
.leaflet-popup-content-wrapper { background: white; border-radius: 14px !important; box-shadow: var(--shadow-3) !important; padding: 0 !important; }
.leaflet-popup-content { margin: 0 !important; font-family: var(--f-sans) !important; min-width: 240px; }
.leaflet-popup-tip { background: white; }
.tree-popup { padding: 16px 18px; }
.tree-popup .tp-eyebrow { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-moss); margin-bottom: 6px; }
.tree-popup .tp-title { font-family: var(--f-serif); font-size: 18px; font-weight: 500; color: var(--c-bark); margin-bottom: 10px; line-height: 1.2; }
.tree-popup .tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 10px; }
.tree-popup .tp-key { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-leaf); margin-bottom: 2px; }
.tree-popup .tp-val { font-size: 13px; color: var(--c-bark); font-weight: 500; }
.tree-popup .tp-coord { font-family: var(--f-mono); font-size: 10.5px; color: var(--c-leaf); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--c-line); }

.tree-marker { width: 14px; height: 14px; border-radius: 50%; background: var(--c-moss); border: 2px solid white; box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer; transition: transform .15s; }
.tree-marker:hover { transform: scale(1.3); }
.tree-marker.remarkable { background: var(--c-soil); width: 16px; height: 16px; box-shadow: 0 0 0 3px rgba(181,101,29,.25), 0 1px 3px rgba(0,0,0,.3); }
.tree-marker.cluster-0 { background: #2D5A3D; }
.tree-marker.cluster-1 { background: #86A789; }
.tree-marker.cluster-2 { background: #C9A96E; }
.tree-marker.cluster-3 { background: #B5651D; }
.tree-marker.cluster-4 { background: #8B3A1F; }

/* === Action bar === */
.v-action-bar {
    background: var(--c-bark);
    color: var(--c-cream);
    border-radius: var(--r-lg);
    padding: 22px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 32px;
    margin-bottom: 48px;
    box-shadow: var(--shadow-2);
    flex-wrap: wrap;
}
.v-ab-text h4 { font-family: var(--f-serif); font-size: 19px; font-weight: 500; margin: 0 0 4px; }
.v-ab-text p { margin: 0 0 6px; font-size: 13px; color: var(--c-mist); }
.v-ab-selected { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--c-amber); }
.v-ab-selected.muted { color: var(--c-mist); }
.v-ab-buttons { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
@media (max-width: 640px) {
    .v-ab-buttons { width: 100%; flex-direction: column; }
    .v-ab-buttons .v-btn { width: 100%; justify-content: center; }
}
.v-action-bar .v-btn-secondary {
    background: rgba(245,241,232,.08);
    color: var(--c-cream) !important;
    border-color: rgba(245,241,232,.2);
}
.v-action-bar .v-btn-secondary:hover { background: rgba(245,241,232,.16); border-color: var(--c-cream); }

/* === Loading === */
.v-loading { text-align: center; padding: 120px 40px; }
.v-spinner { width: 48px; height: 48px; border: 3px solid var(--c-mist); border-top-color: var(--c-moss); border-radius: 50%; margin: 0 auto 24px; animation: v-spin 1s linear infinite; }
@keyframes v-spin { to { transform: rotate(360deg); } }
.v-loading-text { font-family: var(--f-serif); font-size: 22px; color: var(--c-bark); margin-bottom: 8px; }
.v-loading-sub { font-family: var(--f-mono); font-size: 12px; color: var(--c-moss); letter-spacing: 0.08em; }

/* === Card === */
.v-card { background: white; border: 1px solid var(--c-line); border-radius: var(--r-lg); box-shadow: var(--shadow-1); }
.v-card-pad { padding: 28px; }

/* === Cluster page === */
.v-cluster-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    margin-bottom: 48px;
}
@media (max-width: 1100px) { .v-cluster-grid { grid-template-columns: 1fr; } }
.v-cluster-map-el { height: 560px; width: 100%; }

.v-cluster-bar-row { margin-bottom: 16px; }
.v-cluster-bar-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.v-cluster-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.v-cluster-name { font-size: 13px; font-weight: 500; color: var(--c-bark); }
.v-cluster-count { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--c-leaf); }
.v-cluster-sub { font-size: 11.5px; color: var(--c-leaf); margin-left: 22px; margin-bottom: 6px; }
.v-cluster-bar-track { height: 4px; background: var(--c-cream); border-radius: 999px; overflow: hidden; margin-left: 22px; }
.v-cluster-bar-fill { height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); }

.v-metric-card {
    background: var(--c-bark);
    color: var(--c-cream);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-top: 14px;
}
.v-metric-score { font-family: var(--f-serif); font-size: 28px; font-weight: 500; margin: 10px 0 4px; }
.v-metric-desc { font-size: 12px; color: var(--c-sage); }

/* === Prediction page === */
.v-pred-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 28px;
    margin-bottom: 48px;
}
@media (max-width: 1000px) { .v-pred-grid { grid-template-columns: 1fr; } }

.v-tree-card {
    background: linear-gradient(165deg, var(--c-bark) 0%, var(--c-canopy) 100%);
    color: var(--c-cream);
    border-radius: var(--r-lg);
    padding: 28px;
    position: sticky;
    top: 80px;
}
.v-tree-card .tc-eyebrow { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c-amber); margin-bottom: 14px; }
.v-tree-card .tc-species { font-family: var(--f-serif); font-size: 26px; font-weight: 500; margin-bottom: 6px; letter-spacing: -0.005em; }
.v-tree-card .tc-id { font-family: var(--f-mono); font-size: 12px; color: var(--c-sage); margin-bottom: 22px; }
.v-tree-card .tc-div { height: 1px; background: rgba(245,241,232,.15); margin: 18px 0; }
.v-tree-card .tc-row { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 12px; font-size: 13px; margin-bottom: 10px; }
.v-tree-card .tc-row .k { color: var(--c-sage); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; }
.v-tree-card .tc-row .v { color: var(--c-cream); font-weight: 500; text-align: right; white-space: nowrap; font-family: var(--f-sans); }
.v-tree-card .tc-row .v-mono { font-family: var(--f-mono); }

.v-methods-header { margin-bottom: 20px; }
.v-method-card {
    background: white;
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: 22px 24px;
    margin-bottom: 14px;
    box-shadow: var(--shadow-1);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    position: relative;
}
.v-method-card .mc-name { font-family: var(--f-serif); font-size: 18px; font-weight: 500; color: var(--c-bark); margin-bottom: 4px; }
.v-method-card .mc-sub { font-family: var(--f-mono); font-size: 11px; color: var(--c-leaf); letter-spacing: 0.04em; }
.v-method-card .mc-result { display: flex; flex-direction: column; align-items: flex-end; }
.v-method-card .mc-prediction { font-family: var(--f-serif); font-size: 30px; font-weight: 500; color: var(--c-bark); line-height: 1; letter-spacing: -0.01em; }
.v-method-card .mc-unit { font-family: var(--f-sans); font-size: 16px; color: var(--c-leaf); font-weight: 400; margin-left: 4px; }
.v-method-card .mc-confidence { font-family: var(--f-mono); font-size: 11px; color: var(--c-moss); margin-top: 4px; }

.v-conf-bar-wrap { width: 100px; height: 6px; background: var(--c-cream); border-radius: 999px; overflow: hidden; margin-top: 5px; }
.v-conf-bar { height: 100%; background: var(--c-moss); border-radius: 999px; transition: width .8s cubic-bezier(.2,.8,.2,1); }

.v-method-card.consensus { background: var(--c-bark); border: none; }
.v-method-card.consensus .mc-name { color: var(--c-cream); }
.v-method-card.consensus .mc-prediction { color: var(--c-cream); }
.v-method-card.consensus .mc-sub { color: var(--c-amber); }
.v-method-card.consensus .mc-confidence { color: var(--c-sage); }
.v-method-card.consensus .v-conf-bar-wrap { background: rgba(245,241,232,.15); }
.v-method-card.consensus .v-conf-bar { background: var(--c-amber); }
.v-method-card.consensus::before {
    content: "RECOMMANDÉ";
    position: absolute;
    top: -10px;
    left: 24px;
    background: var(--c-soil);
    color: white;
    font-family: var(--f-mono);
    font-size: 9.5px;
    letter-spacing: 0.16em;
    padding: 4px 10px;
    border-radius: 4px;
}

.v-interpretation {
    margin-top: 24px;
    padding: 20px;
    background: var(--c-cream);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--c-canopy);
    line-height: 1.6;
}
.v-interpretation strong { color: var(--c-bark); }

/* === Active nav === */
.nav-link.nav-active { color: var(--amber) !important; }

/* === No-tree state === */
.v-empty-state { text-align: center; padding: 80px 40px; }
.v-empty-state p { font-size: 15px; color: var(--c-leaf); margin-bottom: 24px; }