/* ============== YOUR ORIGINAL (kept) ============== */
.button_styling {
    background-color:white;
    border:1px solid rgb(220,220,220);
    border-radius:4px;
    box-shadow:rgba(230,230,230, 0.5) 0 3px 7px 0;
    box-sizing:border-box;
    font-size:10px;
    color:rgb(90,90,90); 
}
.button_styling:hover {
    background-color:rgb(239, 239, 239);
}


.button-orange {
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 10px; border-radius:10px; font-size:12px; font-weight:650;
    background-color: #ff7300;
    border: none;
    color: white;
    transition: background .2s ease, border-color .2s ease;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* hover effect */
.button-orange:hover {
    background-color: #e65c00;   /* darker orange on hover */
}

.button-blue {
    background-color: #4d86dd;
    border: none;
    color: white;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}
/* hover effect */
.button-blue:hover {
    background-color: rgb(42, 109, 211);   /* darker orange on hover */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #111;
    background-color: #fff;
}

/* Hero section */
/* --- HERO --- */
/* --- HERO --- */

/* HERO (background image) */
.hero {
    position: relative;
    min-height: 420px;
    display: flex;
    align-items: center;     /* vertically center the container contents */
    padding: 80px 24px;
    overflow: hidden;
}
/* subtle dark overlay on top of the background image to help contrast */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.08) 65%);
    z-index: 1;
}
/* bring container contents above the overlay */
.hero .hero-container,
.hero .hero-container .row,
.hero .hero-container .col {
    position: relative;
    z-index: 2;
}
/* Left wrapper (ensures card hugs left on wide screens) */
.hero-left-wrap {
    display: flex;
    align-items: center;
    height: 100%;
}
/* The translucent hero card in front of the background */
.hero-card {
    max-width: 560px;
    padding: 32px;
    border-radius: 12px;
    background: rgba(255,255,255,0.78); /* translucent white */
    box-shadow: 0 10px 34px rgba(16,24,40,0.2);
    backdrop-filter: blur(6px); /* subtle blur behind card (supported browsers) */
    color: #0b0b0b;
}
/* Card typography */
/* UPDATED to match your requested scale: 48px instead of 44px */
.hero-card h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.02;
}
.hero-card p {
    margin: 0 0 20px 0;
    color: #333;
    font-size: 18px;
}
/* CTA button spacing */
.hero-cta {
    margin-top: 4px;
}
/* Right placeholder keeps spacing; you can tweak min-height */
.hero-right-placeholder {
    min-height: 260px;
}

/* Product cards */
.product-card {
    text-align: center;
    padding: 28px 18px;
    transition: transform 0.25s;
    background: #000000;
    border-radius: 12px;
    box-shadow: 0 6px 20px rgba(16,24,40,0.06);
    margin-bottom: 18px;
}
.product-card:hover {
    transform: translateY(-6px);
}
.product-card .prod-img {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 14px;
}

/* Footer */
.footer {
    background: #f5f5f7;
    text-align: center;
    padding: 36px 18px;
    color: #666;
    font-size: 14px;
}

/* Responsive tweaks */
@media (max-width: 767.98px) {
    .hero {
        padding: 48px 16px;
    }
    .hero-card h1 {
        font-size: 32px;
    }
    .hero-right-placeholder {
        display: none; /* let image background fill */
    }
    .hero-card {
        max-width: 100%;
    }
}

/* System font stack like Apple */
:root{
  --bg:#fff;
  --text:#111;
  --muted:#666;
  --brand:#4d86dd;
  --accent:#ff7300;
  --card:#ffffff;
  --border:#e7e7e9;
  --shadow:0 10px 30px rgba(16,24,40,.08);
  --radius:14px;
}

html, body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text","SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Layout helpers */
.container{max-width: 1200px; margin: 0 auto; padding: 0 18px}
.section{padding: 54px 0}
.section-alt{background: #f5f5f7}
/* UPDATED to match your requested scale: H2 = 28px instead of 32px */
.section-head h2{margin:0 0 6px 0; font-size:28px; font-weight:750}
.section-head p{margin:0 0 18px 0; color:var(--muted)}

/* Hero */
.hero{
  position:relative; min-height: 480px; display:flex; align-items:center; overflow:hidden;
  background: radial-gradient(1000px 500px at 75% 10%, #e7f0ff 0%, rgba(255,255,255,0) 60%), linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,0) 70%);
  pointer-events:none;
}
.hero-card{
  max-width: 620px; padding: 32px 32px 26px; border-radius: 16px;
  background: rgba(255,255,255,.75); backdrop-filter: blur(6px);
  box-shadow: var(--shadow);
}
.hero-card h1{margin:0 0 8px; font-size: 48px; font-weight: 750; letter-spacing: -.02em}
.hero-card p{margin:0 0 18px; color: #333; font-size: 18px}
.hero-cta a{margin-right:10px}

/* Cards */
.card, .glass{
  border:1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow);
}
/* UPDATED to align with H3 = 20px (for consistency when used) */
.card-title{font-size: 20px; font-weight: 700; margin: 0 0 6px}
.form-label{font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px}

/* Buttons */
.button-blue, .button-orange, .button-stroke{
  display:inline-block; border-radius: 12px; padding: 10px 16px; font-weight:600;
  text-decoration:none; transition: transform .06s ease, background .2s ease, box-shadow .2s ease; cursor:pointer;
}
.button-blue{background:#4d86dd; color:#fff}
.button-blue:hover{background:#2a6ddd}
.button-orange{background:#ff7300; color:#fff}
.button-orange:hover{background:#e65c00}
.button-stroke{background:#fff; color:#111; border:1px solid var(--border)}
.button-stroke:hover{background:#f5f5f7}
.button--sm{padding:6px 10px; border-radius:10px; font-size:12px}

/* Utilities */
.w-100{width:100%}
.btn-row{display:flex; gap:8px; flex-wrap:wrap}
.hero-right-placeholder{min-height:240px}

/* Plotly tweaks for consistent spacing */
.js-plotly-plot .plotly .modebar{border:0; background:transparent}

/* Pane & toolbar */
.pane { color:#0b0b0b; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif; padding:18px }
.toolbar {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px; margin-bottom:14px;
  border:1px solid var(--border); border-radius: var(--radius);
  background: var(--card); box-shadow: var(--shadow);
}
.toolbar-left { display:flex; flex-direction:column }
.pane-title { margin:0 0 2px 0; font-weight:750; letter-spacing:-.01em }
.pane-subtitle { margin:0; color:var(--muted); font-size:13px }

/* Grid layout */
.panel-grid{
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* keep your ratio */
  grid-auto-rows: auto;             /* rows grow to fit content */
  align-items: start;               /* don’t stretch items to equal height */
  align-content: start;             /* pack rows at the top; no compression */
  gap: 14px;
}

/* Stack on small screens */
@media (max-width: 992px){
  .panel-grid{ grid-template-columns: 1fr; }
}

/* Optional helpers for children */
.panel-grid > *{
  /* ensure children aren’t constrained by defaults elsewhere */
  height: auto;
  max-height: none;
  overflow: visible;   /* show all content */
}

/* If any child is a flex container (common with Plotly wrappers), let it grow */
.panel-grid > .card .card-body{
  min-height: unset;   /* or remove min-height entirely */
  max-height: none;
}

/* To let a specific item span full width when it needs more room */
.panel-grid .span-all{
  grid-column: 1 / -1;
}
/* Cards */
.card { border:1px solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); overflow:hidden }
.card-head { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); background:#fbfbfd }
.card-head h4 { margin:0; font-size:16px; font-weight:700 }
.card-body { padding:8px 10px }

/* Graph spacing */
.graph--tight .modebar { background:transparent!important; border:0!important }
.graph--tight { padding:4px }

/* Button row: layout only */
.btn-row { display:flex; gap:8px; flex-wrap:wrap }

/* DataTable polish */
.dash-table-container .dash-spreadsheet-container { border:none!important }
.dash-table-container table { border-collapse:separate!important; border-spacing:0 2px!important }
.dash-table-container th, .dash-table-container td { border-bottom:1px solid #eee!important }
.dash-table-container tr:hover td { background:#f7faff!important }

/* ============== NEW: TYPOGRAPHY SCALE & HELPERS (GLOBAL) ============== */
:root{
  --fs-display-1: 48px;   /* H1: hero */
  --fs-heading-2: 28px;   /* H2: section */
  --fs-heading-3: 20px;   /* H3: cards/panels */
  --fs-heading-5: 14px;   /* H5: small subheads/labels */
  --fs-body-lg: 18px;     /* large body (hero lead) */
  --fs-body: 12px;        /* default body in cards/panels */
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
}

/* Optional global helpers if you use utility classes */
h1, .h1 { font-size: var(--fs-display-1); font-weight: var(--fw-bold); }
h2, .h2 { font-size: var(--fs-heading-2); font-weight: var(--fw-bold); }
h3, .h3 { font-size: var(--fs-heading-3); font-weight: var(--fw-bold); }
h5, .h5 { font-size: var(--fs-heading-5); font-weight: var(--fw-semibold); }

/* ============== NEW: APPLE-LIKE OFFCANVAS (SCOPED .oc-*) ============== */
/* Colors & sizing for Offcanvas */
:root{
  --oc-bg: #fff;
  --oc-text: #111;
  --oc-muted: #666;
  --oc-border: #e5e5ea;
  --oc-shadow: 0 8px 30px rgba(16,24,40,.08);
  --oc-radius: 14px;
  --oc-primary: #0071e3;
  --oc-primary-hover: #0366cf;
  --oc-soft: #f5f5f7;
}

/* Header */
.oc-header{
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #fff, #fbfbfd);
  border-bottom: 1px solid var(--oc-border);
  padding: 18px 18px 14px;
}
.oc-title{
  margin: 0 0 4px;
  font-size: var(--fs-heading-3);   /* 20px */
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  color: var(--oc-text);
}
.oc-subtitle{
  margin: 0;
  font-size: var(--fs-heading-5);   /* 14px */
  color: #555;
  line-height: 1.4;
}

/* Tabs — segmented look */
.oc-tabs .nav-tabs{
  border-bottom: 1px solid #e5e5ea !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 12px;
  gap: 0;                /* no pill gaps */
}

.oc-tabs .nav-link{
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  margin: 0 10px;
  padding: 10px 2px;
  color: #2d2d2d;
  font-size: 14px;
  font-weight: 600;
  transition: border-color .15s ease, color .15s ease, opacity .15s ease;
}

.oc-tabs .nav-link:hover{
  color: #0b3a82;
  border-bottom-color: rgba(0,113,227,.35) !important; /* faint preview underline */
}

.oc-tabs .nav-link.active,
.oc-tabs .nav-item.show .nav-link,
.oc-tabs .nav-link[aria-selected="true"]{
  color: #0b3a82;
  border-bottom-color: rgba(0,113,227,.35) !important; /* same as hover */
}


/* focus ring for keyboard users */
.oc-tabs .nav-link:focus{
  outline: none;
  /* box-shadow: 0 0 0 3px rgba(0,113,227,.18); */
  border-radius: 6px; /* only visible on focus */
}

/* Pane layout */
.oc-pane{ padding: 12px 14px 16px; font-size: var(--fs-body); } /* 12px */
.oc-divider{ border: 0; border-top: 1px solid var(--oc-border); margin: 12px 0; }

.oc-group{ display: flex; flex-direction: column; gap: 12px; }
.oc-row{ display: flex; flex-direction: column; gap: 6px; }
.oc-label{
  font-size: var(--fs-heading-5);        /* 14px */
  font-weight: var(--fw-semibold);
  color: #2c2c2e; margin: 0 0 2px;
}
.oc-inputRow{ display: flex; align-items: center; gap: 8px; }
.oc-unit{ font-size: var(--fs-body); color: #6b7280; }
.oc-tag{ background: #f2f2f7; border: 1px solid #e6e6eb; padding: 2px 8px; border-radius: 999px; }

/* Grids */
.oc-grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc-grid-3{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
@media (max-width: 1280px){ .oc-grid-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 1180px){ .oc-grid-2, .oc-grid-3{ grid-template-columns: 1fr; } }

/* Inputs */
.oc-input{
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-heading-5);  /* 14px */
  line-height: 1.3;
  color: var(--oc-text); background: #fff;
  border: 1px solid #d2d2d7; border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.oc-input::placeholder{ color: #9aa0a6; }
.oc-input:focus{
  outline: none;
  border-color: var(--oc-primary);
  box-shadow: 0 0 0 3px rgba(0,113,227,.16);
}

/* Callout */
.oc-callout{
  border: 1px solid var(--oc-border);
  background: #fbfbfd;
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--oc-shadow);
}
.oc-calloutText{ margin: 0; font-size: var(--fs-body); color: #344054; }

/* Inline & centers */
.oc-inline{ display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.oc-note{ margin: 0; font-size: var(--fs-body); color: #3b3b3b; }
.oc-center{ display: flex; justify-content: center; }

/* Buttons (new styles for Offcanvas) */
.btn-cta{
  background: var(--oc-primary);
  color: #fff;
  border: 0;
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: 14px;                 /* matches .button-orange size */
  letter-spacing: .01em;
  transition: transform .06s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,113,227,.25);
  cursor: pointer;
}
.btn-cta:hover{ background: var(--oc-primary-hover); }
.btn-cta:active{ transform: translateY(1px); }

.btn-primary{
  background: #1c1c1e; color: #fff; border: 0;
  padding: 10px 14px; border-radius: 12px;
  font-weight: 650; font-size: 14px; cursor: pointer;
  transition: background .2s ease;
}
.btn-primary:hover{ background: #2c2c2e; }

.btn-neutral{
  background: #fff; color: #111;
  
  padding: 10px 14px; border-radius: 12px;
  font-weight: 650; font-size: 14px; cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.btn-neutral:hover{ background: #f5f5f7; border-color: #cfcfd3; }

/* Keep your existing .button-orange for other areas */

/* Button rows */
.oc-btnRow{ display: flex; gap: 8px; flex-wrap: wrap; }

/* Run bar (sticky within pane) */
.oc-runBar{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  position: sticky; bottom: 0; padding: 10px 0 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.6), #fff);
}
.oc-loading{ margin-left: 6px; }

/* Switch / checkbox */
.oc-switch{ font-size: var(--fs-heading-5); color: #2e2e2e; }

/* Progress */
.oc-progress.progress{ height: 10px; border-radius: 999px; background: #edeef1; }
.oc-progress .progress-bar{ border-radius: 999px; }

/* Scrollbar polish (panel only) */
.oc-pane ::-webkit-scrollbar{ width: 10px; height: 10px; }
.oc-pane ::-webkit-scrollbar-thumb{ background: #d2d2d7; border-radius: 999px; }
/* Smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* ---------- Docs root layout ---------- */
.docs-root { max-width: none;   /* was 1200px */
  margin: 0; }

/* Hero-style header inside Docs */
.docs-hero{
  background: #f5f5f7;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 22px;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}
.docs-title{ margin:0 0 6px; font-size: 28px; font-weight: 750; letter-spacing: -.01em; }
.docs-subtitle{ margin:0 0 12px; font-size: 14px; color: #555; }
.docs-cta-row{ display:flex; gap:8px; flex-wrap:wrap }

/* Use your existing button styles; add neutral & CTA variants (consistent with Offcanvas set) */
.btn-cta{
  background:#0071e3; color:#fff; border:0; padding:10px 16px; border-radius:999px;
  font-size:14px; font-weight:700; letter-spacing:.01em; cursor:pointer;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(0,113,227,.18);
}
.btn-cta:hover{ background:#0366cf }
.btn-cta:active{ transform: translateY(1px) }

.btn-neutral{
  background:#fff; color:#111; border:1px solid var(--border);
  padding:10px 16px; border-radius:12px; font-size:14px; font-weight:650; cursor:pointer;
}
.btn-neutral:hover{ background:#f5f5f7 }

/* ---------- Two-column docs layout ---------- */
.docs-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

/* Sidebar */
.docs-sidenav{
  position: sticky;
  top: 84px; /* sits under your app toolbar */
  align-self: start;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  padding: 14px;
  box-shadow: var(--shadow);
  height: fit-content;
}
.docs-sidenav-title{
  font-size: 14px; font-weight: 700; color: #333; margin-bottom: 8px;
}
.docs-sidenav-list{
  list-style: none; margin: 0; padding: 0; display:flex; flex-direction: column; gap: 6px;
}
.docs-sidenav a{
  display:block; padding: 8px 10px; border-radius: 10px; color:#222; text-decoration: none;
  transition: background .2s ease;
  font-size: 14px; font-weight: 600;
}
.docs-sidenav a:hover{ background: #f5f5f7 }

/* Content column */
.docs-content{ display:flex; flex-direction: column; gap: 18px; }

/* Sections */
.docs-section{ scroll-margin-top: 96px; } /* padding for sticky headers when jumping */

/* Panes: text + media side-by-side */
.docs-pane{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 14px;
  border:1px solid var(--border); border-radius:16px; background:#fff; box-shadow: var(--shadow);
  padding: 16px 16px;
}
.docs-pane--stack{ grid-template-columns: 1fr 1fr; }

.pane-text{ display:flex; flex-direction: column; gap: 10px; }
.pane-text h2{ font-size: 28px; font-weight: 750; margin: 0 0 4px; }
.pane-text h3{ font-size: 20px; font-weight: 700; margin: 0 0 4px; }
.pane-text p{ font-size: 12px; color:#333; margin: 0; line-height: 1.55; }
.pane-text ul, .pane-text ol{ margin: 4px 0 0; padding-left: 18px; }
.pane-text li{ font-size: 12px; color:#333; line-height: 1.5; }





.pane-media{ display:flex; align-items:center; justify-content:center; }
.pane-media .js-plotly-plot{ width:100%; }

/* Code blocks */
.code-block pre, .code-block code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
}
.code-block{
  border:1px solid var(--border); background:#fbfbfd; border-radius:12px; padding:10px 12px;
  overflow:auto;
}

/* FAQ details/summary */
details{ border:1px solid var(--border); border-radius:12px; padding:8px 10px; background:#fff; }
details + details{ margin-top:8px; }
summary{ font-size:14px; font-weight:700; cursor:pointer; color:#222; }
details p{ font-size:12px; margin:8px 0 0; color:#333; }

/* Responsive */
@media (max-width: 1100px){
  .docs-layout{ grid-template-columns: 1fr; }
  .docs-sidenav{ position: relative; top: 0; }
  .docs-pane, .docs-pane--stack{ grid-template-columns: 1fr; }
}

/* Pane variants */
.oc-pane--flush { padding-top: 8px; padding-bottom: 8px; }

/* 3-col grid for globals at roomy widths */
.oc-grid-3 { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px; }
@media (max-width: 1280px){ .oc-grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1024px){ .oc-grid-3 { grid-template-columns: 1fr; } }

/* Select (Dropdown) polish to match inputs */
.oc-select .Select-control, .oc-select .Select--single > .Select-control {
  border: 1px solid #d2d2d7; border-radius: 12px; min-height: 42px; box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}
.oc-select .Select-value-label, .oc-select .Select-placeholder { font-size: 14px; line-height: 40px; color:#333; padding-left: 6px; }
.oc-select .Select-arrow-zone { padding-right: 10px; }

/* Bigger, pill progress with label area */
.oc-progressBar { padding: 10px 16px; }
.oc-progress.progress { background: #edeef1; border-radius: 999px; }
.oc-progress--lg.progress { height: 14px; }             /* ← larger than before */
.oc-progress .progress-bar { border-radius: 999px; }
.oc-progressLabel { margin-top: 6px; font-size: 12px; color:#555; text-align: center; }

/* Link-style button for light secondary actions */
.btn-link{
  background: transparent; border: 0; color: #0b3a82; text-decoration: underline;
  padding: 6px 8px; border-radius: 8px; font-size: 12px; font-weight: 650; cursor: pointer;
}
.btn-link:hover{ color:#063a99; background: #eef3ff; }

/* Tighter table wrapper */
.oc-tableWrap{
  border:1px solid var(--oc-border); border-radius: 12px; background:#fff; padding: 6px 6px;
  box-shadow: var(--shadow);
}

/* Buttons: keep CTA/neutral from earlier, align height with inputs */
.btn-cta, .btn-neutral, .btn-primary{
  min-height: 42px;            /* matches .oc-input height */
  display:inline-flex; align-items:center; justify-content:center;
}

/* Tabs stay compact with new always-visible blocks above them */
.oc-tabs { margin-top: 6px; }

/* Apple-like neutral circular plus button */
.oc-iconbtn{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--oc-border);
  background: #fff;
  color: #111;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .06s ease;
}
.oc-iconbtn:hover{ background:#f5f5f7; border-color:#cfcfd3; }
.oc-iconbtn:active{ transform: translateY(1px); }


/* Make cards flex so their body can stretch, and graphs fill 100% */
.card { display: flex; flex-direction: column; }
.card--fill { height: 100%; }
.card-body { padding: 8px 10px; }
.card-body--fill { flex: 1 1 auto; min-height: 360px; display: flex; }
.fill-graph { flex: 1 1 auto; }

/* Optional: ensure the two plot cards try to match heights when possible */
@media (min-width: 1024px){
  .graph--tight { min-height: 360px; }
}

/* Circular Apple-like plus buttons */
.oc-iconbtn{
  display:inline-flex; align-items:center; justify-content:center;
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid #e5e5ea;
  background: #fff;
  font-size: 20px; line-height: 1; color: #111;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
}
.oc-iconbtn:hover{ background:#f5f5f7; }
.oc-iconbtn:active{ transform: translateY(1px); }


/* Make DataTable editors look less cramped (still single-line editor) */
.dash-table-container .dash-spreadsheet-container .dash-cell .dash-input {
  white-space: normal;
  line-height: 1.3;
  height: auto;
}
/* --- Map tool strip (banner) --- */
.toolstrip{
  display:flex; gap: 10px; align-items:flex-end;
}

.tool-btn{
  appearance:none; -webkit-appearance:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding: 10px 12px 8px;
  min-width: 72px;
  background: transparent;
  color: #1d1d1f;
  border: 1px solid transparent;          /* only visible on hover */
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .06s ease, box-shadow .18s ease;
}

.tool-btn:hover{
  background: #f5f5f7;
  border-color: #d2d2d7;
  box-shadow: 0 6px 18px rgba(16,24,40,.06);
}

.tool-btn:active{ transform: translateY(1px); }

.tool-icon{
  font-size: 18px; line-height: 1;
}

.tool-label{
  font-size: 12px; font-weight: 600; color:#3a3a3c;
}

/* High-contrast focus for keyboard users */
.tool-btn:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,113,227,.22);
  border-color:#b7d6ff;
}


/* === Ribbon-style grouping === */
.toolstrip{ display:flex; gap:14px; align-items:flex-end; }
.toolgroup{ display:flex; flex-direction:column; gap:6px; }
.toolrow{ display:flex; gap:10px; align-items:flex-end; }

.toolgroup-title{
  font-size:11px; font-weight:700; color:#6b7280;
  /* text-transform:uppercase; letter-spacing:.02em; */
  padding-left:4px;
}



.tool-sep{
  width:1px; height:70px; background:#e5e5ea; align-self:flex-end;
  margin:0 8px;
}

/* Base tile button used everywhere in the banner */
.tool-btn{
  appearance:none; -webkit-appearance:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:10px 12px 8px;
  min-width:72px; background:transparent; color:#1d1d1f;
  border:1px solid transparent; border-radius:12px;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .06s ease, box-shadow .18s ease;
}
.tool-btn:hover{ background:#f5f5f7; border-color:#d2d2d7; box-shadow:0 6px 18px rgba(16,24,40,.06); }
.tool-btn:active{ transform:translateY(1px); }
.tool-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(0,113,227,.22); border-color:#b7d6ff; }

.tool-btn--sm{ min-width:64px; padding:8px 10px 6px; }   /* compact Clear */

.tool-icon{ font-size:18px; line-height:1; }
.tool-label{ font-size:12px; font-weight:600; color:#3a3a3c; }

/* Right side controls */
.banner-right{ display:flex; align-items:flex-end; gap:12px; }

/* Small labeled dropdown */
.mini-field{ display:flex; flex-direction:column; gap:4px; }
.mini-label{ font-size:11px; font-weight:700; color:#6b7280; padding-left:2px; }

/* Shrink react-select (dcc.Dropdown) to match banner scale */
.mini-select .Select-control{
  min-height:34px; height:34px;
  border-radius:10px; border-color:#d2d2d7;
}
.mini-select .Select-value-label,
.mini-select .Select-placeholder{ font-size:12px; line-height:32px; }
.mini-select .Select-arrow-zone{ padding-right:8px; }
.mini-select .Select-clear-zone{ width:22px; } /* if ever clearable=True */
.mini-select .Select-menu-outer{ border-radius:10px; }

/* Stack the plot cards with spacing */
.plots-stack{ display:flex; flex-direction:column; gap:14px }

/* Make the wrapper span the entire viewport width (edge-to-edge) */
.fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Ensure each graph fills its card body */
.card-body--fill{ flex:1 1 auto; display:flex; }
.fill-graph{ flex:1 1 auto; width:100%; }


/* Stack with your usual spacing/margins */
.plots-stack { display:flex; flex-direction:column; gap:14px; }

/* Ensure the graph truly fills its card body */
.plot-card .card-body { padding: 0; }               /* optional: tighter edge-to-edge inside card */
.plot-card .plot-full { width: 100% !important; display: block !important; }

/* Force Plotly internals to respect 100% width/height */
.plot-card .js-plotly-plot,
.plot-card .plot-container,
.plot-card .svg-container {
  width: 100% !important;
}
.plot-card .svg-container { height: 100% !important; }

/* Keep the card layout flexible (you already have these, restated for clarity) */
.card-body--fill { flex: 1 1 auto; display: flex; }
/* Full-bleed plots inside cards */
.plots-stack .plot-card .card-body { padding: 0; }                 /* remove inner padding */
.plots-stack .plot-card .card-body .plot-wrap { 
  width: 100%; 
  min-height: 56vh;                                                /* flexible baseline height */
}

/* Force all Plotly inner containers to span 100% width */
.plot-full, 
.plot-full > .dash-graph, 
.plot-full .plot-container, 
.plot-full .js-plotly-plot {
  width: 100% !important;
  height: 100% !important;                                         /* let parent decide height */
}

/* Keep your normal card margins / page gutters */
.plots-stack { max-width: 1200px; margin: 0 auto; padding: 0 18px; }


/* Keep plots inside the card width */
.plot-card { overflow: hidden; }                     /* clip any render jitter */
.plot-card .card-body { padding: 0; }                /* we'll pad the inner wrap */

/* The plot wrapper provides gutters without changing total width */
.plot-wrap {
  width: 100%;
  min-height: 800px;                                 /* or 56vh, your choice */
  padding: 24px 32px;                                /* replaces margin:50px */
  box-sizing: border-box;                            /* include padding in width */
}

/* Ensure Plotly never exceeds the wrapper */
.plot-full,
.plot-full .plot-container,
.plot-full .js-plotly-plot {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* Optional: prevent any horizontal scroll in the stack */
.plots-stack { overflow-x: hidden; }

/* ===== Volumetric tab layout ===== */
.vol-root{ display:grid; grid-template-columns: 1.8fr .95fr; gap:14px; }
@media (max-width: 1200px){ .vol-root{ grid-template-columns: 1fr; } }

.panel { border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:#fbfbfd; border-bottom:1px solid var(--border); }
.panel-head h4 { margin:0; font-size:16px; font-weight:700; }
.panel-body { padding:12px 14px; }

/* Full-bleed plot container that respects card width */
.panel-body--zeroPad{ padding:0; }
.plot-wrap { width:100%; min-height: 560px; padding: 16px 18px; box-sizing:border-box; }
.plot-full, .plot-full .plot-container, .plot-full .js-plotly-plot { width:100% !important; height:100% !important; max-width:100% !important; }

/* Small, tidy control rows */
.toolrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.input-group{ display:flex; align-items:center; gap:8px; }
.label-sm{ font-size:12px; font-weight:600; color:#444; }

/* Micro inputs & buttons to match your design set */
.micro-input{
  width:90px; min-height:32px; padding:6px 10px; border:1px solid #d2d2d7; border-radius:10px;
  font-size:12px; color:#111; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.mini-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; font-size:12px; font-weight:650;
  border:1px solid var(--border); background:#fff; color:#111; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mini-btn:hover{ background:#f5f5f7; border-color:#cfcfd3; }

/* Map frame */
.map-wrap{ width:100%; height:520px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }

/* Sidebar form polish */
.form-block{ display:flex; flex-direction:column; gap:10px; }
.form-block .oc-label{ margin-bottom:2px; }
.sidebar-note{ font-size:12px; color:#666; margin:4px 0 0; }

/* Split preview row for 2D/3D */
.split-row{ display:grid; grid-template-columns: 1.2fr .9fr; gap:12px; }
@media (max-width: 1200px){ .split-row{ grid-template-columns:1fr; } }

/* Angle slider spacing */
.angle-wrap{ padding:10px 14px 14px; }

/* Keep cards aligned with your standard margins */
.plots-stack, .vol-root { margin: 0; }


/* Consistent panel & type */
.panel { border:1px solid var(--border); border-radius: var(--radius); background:#fff; box-shadow: var(--shadow); overflow:hidden; }
.panel-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; background:#fbfbfd; border-bottom:1px solid var(--border); }
.panel-head h4 { margin:0; font-size:16px; font-weight:700; letter-spacing:-.01em; }
.panel-body { padding:12px 14px; }
.panel-body--zeroPad{ padding:0; }

/* Plot containers */
.plot-wrap { width:100%; min-height: 560px; padding: 16px 18px; box-sizing:border-box; }
.plot-full, .plot-full .plot-container, .plot-full .js-plotly-plot { width:100% !important; height:100% !important; max-width:100% !important; }

/* Layout */
.vol-root{ display:grid; grid-template-columns: 1.8fr .95fr; gap:14px; }
@media (max-width: 1200px){ .vol-root{ grid-template-columns:1fr; } }
.split-row{ display:grid; grid-template-columns: 1.2fr .9fr; gap:12px; }
@media (max-width: 1200px){ .split-row{ grid-template-columns:1fr; } }

/* Map */
.map-wrap{ width:100%; height:520px; border-radius:12px; overflow:hidden; border:1px solid var(--border); }

/* Controls & inputs */
.toolrow{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.input-group{ display:flex; align-items:center; gap:8px; }
.label-sm{ font-size:12px; font-weight:600; color:#444; }
.micro-input{
  width:90px; min-height:32px; padding:6px 10px; border:1px solid #d2d2d7; border-radius:10px;
  font-size:12px; color:#111; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,.02) inset;
}
.mini-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; font-size:12px; font-weight:650;
  border:1px solid var(--border); background:#fff; color:#111; cursor:pointer;
  transition: background .2s ease, border-color .2s ease;
}
.mini-btn:hover{ background:#f5f5f7; border-color:#cfcfd3; }

/* Import Settings consistency */
.form-block{ display:flex; flex-direction:column; gap:10px; }
.form-block .oc-label{ margin-bottom:2px; font-size:12px; font-weight:600; color:#444; }
.sidebar-note{ font-size:12px; color:#666; margin:4px 0 0; }

/* Small select to match inputs */
.oc-select.oc-select--sm .Select-control{ min-height:34px; border-radius:10px; }
.oc-select.oc-select--sm .Select-value-label,
.oc-select.oc-select--sm .Select-placeholder{ font-size:12px; line-height:32px; padding-left: 6px; }

/* Slider spacing */
.angle-wrap{ padding:10px 14px 14px; }


/* Compact toolstrip (AutoCAD-ish) */
.toolstrip--compact{ display:flex; align-items:center; gap:10px; flex-wrap:wrap }
.tool-group{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:12px; background:#fff;
  border:1px solid var(--border); box-shadow: var(--shadow);
}
.group-title{ font-size:12px; font-weight:700; color:#555; margin-right:6px }

.tool-btn.tool-btn--icon{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  padding:6px 10px; border:1px solid transparent; border-radius:10px; background:transparent; cursor:pointer;
}
.tool-btn--icon:hover{ border-color:#d9d9de; background:#f8f9fb; }
.tool-icon{ font-size:16px; }
.tool-label{ font-size:11px; color:#333; }

.mini-btn{
  background:#fff; color:#111; border:1px solid var(--border);
  padding:6px 10px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer;
}
.mini-btn:hover{ background:#f5f5f7; border-color:#cfcfd3; }
.mini-btn--active{ background:#e7f0ff; border-color:#cfe0ff; color:#0b3a82 }

.input-group{ display:flex; align-items:center; gap:6px }
.label-sm{ font-size:12px; color:#555 }
.micro-input{
  width:90px; padding:6px 8px; font-size:12px; border:1px solid #d2d2d7; border-radius:10px;
  background:#fff; box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}

.tool-badge{
  font-size:11px; color:#0b3a82; background:#e7f0ff; border:1px solid #cfe0ff;
  padding:2px 8px; border-radius:999px;
}

/* Plot containers keep graphs inside */
.plot-full{ width:100% !important; height:100% !important; }
.panel-body--zeroPad{ padding:0 !important }
/* Tabs + logo row */
/* Make the dbc.Tabs bar a flex row and inject a logo before the tab items */
/* Base bar styling */
/* Whole tabs bar look */
.tabs-with-brand .nav.nav-tabs{
  display:flex; align-items:center; gap:6px;
  border-bottom:1px solid #e7e7e9;
  background:linear-gradient(180deg,#fff 0%, #f6f7fb 100%);
  box-shadow:0 10px 30px rgba(16,24,40,.08);
  /* padding:6px 10px; */
}

/* Generic tab polish */
.tabs-with-brand .nav.nav-tabs .nav-link{
  border-radius:12px !important;
  /* border:1px solid transparent !important; */
  /* padding:8px 12px; */
  font-weight:600;
  transition:background .2s ease, border-color .2s ease;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* BRAND TAB: target the actual link element inside our first tab */
.tabs-with-brand .brand-tab .nav-link{
  display:flex; align-items:center; gap:8px;
  background:#ffffff00;
  /* border:1px solid #e7e7e9 !important; */
  pointer-events:none;      /* stay non-interactive */
  opacity:1 !important;     /* override Bootstrap’s .disabled dimming */
  /* padding:6px 10px;         a bit tighter */
}

/* Logo (left) – make sure the file exists at /assets/gosep_logo.png */
.tabs-with-brand .brand-tab .nav-link::before{
  content:"";
  display:inline-block;
  width:30px; height:30px;
  background-image:url("/assets/website_images/GOSEP\ Logo.png");
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  border-radius:6px;
  box-shadow:0 1px 2px rgba(16,24,40,0.12);
}

/* Company name (right of logo) */
.tabs-with-brand .brand-tab .nav-link::after{
  content:"";     /* <- change this */
  font-weight:600; letter-spacing:+.01em; color:#111;
}

/* Root layout – two columns, full viewport height */
.landing-root{
  display:grid;
  grid-template-columns: 1fr 1fr;  /* left half, right half */
  min-height: 100vh;
}

/* Left side: black panel */
.landing-left{
  background: #000;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 28px;
}

.landing-left2{
  background: #000000;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 48px 28px;
}

/* Content card on black – airy but minimal */
.landing-card{
  max-width: 640px;
}
.landing-card h1{
  margin: 0 0 10px;
  font-size: 48px;      /* matches your hero scale */
  font-weight: 750;
  letter-spacing: -.02em;
  color: #fff;
}
.landing-card p{
  margin: 0 0 18px;
  font-size: 18px;      /* matches your body-lg */
  color: #d7d7d7;
}

/* Right side: background image with black->transparent gradient */
.landing-right{
  position: relative;
  overflow: hidden;
  /* First layer = gradient (to blend w/ black), second = image */
  background:
    linear-gradient(90deg, rgba(0,0,0,1) 0%,
                          rgba(0,0,0,0.65) 20%,
                          rgba(0,0,0,0.28) 45%,
                          rgba(0,0,0,0.08) 65%,
                          rgba(0,0,0,0) 82%),
    url("/assets/website_images/Mountain.png") center/cover no-repeat;
}

/* Optional overlay if you want to stack content on the image */
.landing-right-overlay{
  position:absolute;
  inset:0;
  /* keep empty or use for subtle pattern/brand glow if wanted */
}


.landing-right2{
  position: relative;
  overflow: hidden;
  /* First layer = gradient (to blend w/ black), second = image */
  background: linear-gradient(
        to left,
        rgba(0,0,0,1) 0%,
                          rgba(0,0,0,0.65) 20%,
                          rgba(0,0,0,0.28) 45%,
                          rgba(0,0,0,0.08) 65%,
                          rgba(0,0,0,0) 82%),    /* mostly transparent toward the left */
      
    url("/assets/website_images/Canyon2.png") center/cover no-repeat;
}

/* Optional overlay if you want to stack content on the image */
.landing-right2-overlay{
  position:absolute;
  inset:0;
  /* keep empty or use for subtle pattern/brand glow if wanted */
}

/* Keep your existing CTA look; ensure it pops on black */
.btn-cta{
  background:#0071e3;
  color:#fff;
  border:0;
  padding:12px 18px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  letter-spacing:.01em;
  box-shadow:0 6px 18px rgba(0,113,227,.25);
  cursor:pointer;
  transition: background .2s ease, transform .06s ease, box-shadow .2s ease;
}
.btn-cta:hover{ background:#0366cf }
.btn-cta:active{ transform: translateY(1px) }

/* Responsive: stack on narrow screens */
/* Mobile / narrow screens: stack and split 50/50 vertically */
/* EXACTLY half-screen landing band */
.landing-root{
  display: grid;
  grid-template-columns: 1fr 1fr; /* left/right halves */
  height: 50vh !important;        /* force half the viewport */
  min-height: 0 !important;       /* guard against earlier 100vh rules */
}

.landing-root2{
  display: grid;
  grid-template-columns: 1fr 1fr; /* left/right halves */
  height: 70vh !important;        /* force half the viewport */
  min-height: 0 !important;       /* guard against earlier 100vh rules */
}

/* Children fill the 50vh container */
.landing-left,
.landing-right{
  height: 100%;
  min-height: 0;
}

.landing-left2,
.landing-right{
  height: 100%;
  min-height: 0;
}

/* Optional: mobile stacking while still total 50vh */
@media (max-width: 992px){
  .landing-root{
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;  /* each half of 50vh */
  }
}

/* Top banner */
.credits-hero{
  position: relative;
  width: 100%;
  height: 240px;                 /* banner height; tweak (e.g., 200–320px) */
  overflow: hidden;
  
  background: #000;              /* fallback while image loads */
  box-shadow: var(--shadow);
  margin-bottom: 0px;           /* match your card spacing */
}

/* Image fills and crops elegantly */
.credits-hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;             /* key for banner crop */
  filter: blur(3px) brightness(0.95);  /* subtle blur like you asked */
  opacity: 0.92;
}

/* Gentle dark-to-transparent overlay for text legibility */
.credits-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.10) 45%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}

/* Optional title over banner */
.credits-hero-text{
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 18px 20px;
  display: flex;
  height: 100%;
  align-items: flex-end;          /* text sits near bottom */
}
.credits-hero-text h1{
  margin: 0 12px 2px 0;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -.01em;
}
.credits-hero-text p{
  margin: 0 0 4px 0;
  font-size: 14px;
  opacity: .9;
}

/* Responsive: shorter banner on small screens */
@media (max-width: 768px){
  .credits-hero { height: 180px; border-radius: 10px; }
  .credits-hero-text h1 { font-size: 22px; }
  .credits-hero-text p { font-size: 12px; }
}

/* --- Button height normalization (last-wins overrides) --- */
.mini-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:36px !important;         /* consistent height */
  line-height:1 !important;       /* avoid extra vertical space */
  padding:0 12px !important;      /* horizontal only */
  box-sizing:border-box !important;
}

/* Make the Upload wrapper behave like a regular button container */
#upload_wrapper{
  display:inline-flex !important;
  align-items:stretch !important;
}

/* Ensure the Upload’s inner container doesn’t collapse height */
#upload_wrapper > div{
  display:inline-flex !important;
  align-items:stretch !important;
}

/* And specifically the child button inside dcc.Upload */
#upload_wrapper .mini-btn{
  height:36px !important;
  line-height:1 !important;
  padding:0 12px !important;
}

/* Make map_div the positioning context */
#map_div { position: relative; }

/* Constrain dbc.Offcanvas to the map area */
.offcanvas-local {
  position: absolute !important;   /* override Bootstrap fixed */
  top: 0; 
  bottom: 0;                       /* match map height */
  height: 100% !important;
  max-height: 100%;
  z-index: 500;                    /* above the map */
}

/* Optional helpers to be explicit */
.offcanvas-left  { left: 0;  right: auto; }
.offcanvas-right { right: 0; left:  auto; }

/* You already set backdrop=False, but just in case */
.offcanvas-backdrop { display: none !important; }