/* ============================================
   OkraML Predictor — Unified Stylesheet
   Exact colour palette from brand guide:
     #494623  — dark olive/brown  (nav, footer, headings)
     #C3892B  — amber/gold        (accents, CTA buttons)
     #8e883d  — olive green       (primary interactive)
     #8f7c2f  — muted olive       (secondary)
     #AB7100  — deep amber        (hover states)
     #828200  — yellow-olive      (highlights)
     #666666  — mid-grey          (muted text)
     #E6F2CC  — near-white green  (alt-section background)
     #E9E7D8  — near-white cream  (main page background)
     #ffffff  — white             (cards)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Core brand colours */
  --brown:    #494623;   /* dark olive/brown — nav, footer, headings */
  --gold:     #C3892B;   /* amber/gold — CTA, accent, links */
  --olive:    #8e883d;   /* olive green — primary interactive */
  --olive-d:  #6b6a2a;   /* darker olive for hover */
  --olive-m:  #8f7c2f;   /* muted olive — secondary */
  --amber:    #AB7100;   /* deep amber — hover on gold */
  --yellow-o: #828200;   /* yellow-olive — subtle highlights */
  --grey:     #666666;   /* mid-grey — muted/body text */

  /* Background colours — near-white from palette */
  --bg:       #E9E7D8;   /* near-white cream — main page background */
  --bg-alt:   #E6F2CC;   /* near-white green — alternate sections */
  --bg-card:  #f7f6f0;   /* slightly lighter cream — inner card fill for inputs */
  --card:     #ffffff;   /* pure white — card surfaces */

  /* UI accents derived from palette */
  --gold-l:   #f5e9cc;   /* light amber tint — badge/notice backgrounds */
  --olive-l:  #edf0da;   /* light olive tint — hover rows, pill backgrounds */

  /* Neutrals */
  --text:     #2a2a18;   /* near-black with olive tint */
  --border:   #d4d0b8;   /* warm grey-cream border */

  /* Spacing / shape */
  --radius:   12px;
  --shadow:   0 4px 24px rgba(73,70,35,0.10);
  --shadow-h: 0 8px 40px rgba(73,70,35,0.18);

  /* Typography */
  --font-b:   'Inter', sans-serif;
  --font-h:   'Playfair Display', serif;
  --max-w:    1200px;
}

html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: var(--font-b); background: var(--bg); color: var(--text); line-height: 1.65; }
img  { max-width: 100%; display: block; }
a    { color: var(--olive); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }

/* ---- Typography ---- */
h1,h2,h3,h4,h5 { font-family: var(--font-h); color: var(--brown); line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; font-family: var(--font-b); font-weight: 600; }
p  { margin-bottom: 1rem; }
.lead { font-size: 1.15rem; color: var(--grey); }

/* ---- Layout ---- */
.container { max-width: var(--max-w); margin: 0 auto; padding: 0 1.5rem; }
.section    { padding: 5rem 0; background: var(--bg); }
.section-alt  { background: var(--bg-alt); }
.section-dark { background: var(--brown); color: #f0eed8; }
.section-dark h2, .section-dark h3 { color: #f0eed8; }

/* ---- Navigation ---- */
.navbar {
  position: sticky; top: 0; z-index: 100;
  background: rgba(233,231,216,0.97);   /* --bg with slight opacity */
  backdrop-filter: blur(10px);
  border-bottom: 2px solid var(--border);
  padding: .75rem 0;
}
.navbar .container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-brand {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-h); font-size: 1.35rem;
  color: var(--brown); font-weight: 700;
}
.nav-brand .brand-icon { font-size: 1.8rem; }
.nav-links { display: flex; align-items: center; gap: .25rem; list-style: none; flex-wrap: wrap; }
.nav-links a {
  padding: .45rem .85rem; border-radius: 8px;
  font-size: .9rem; font-weight: 500; color: var(--text);
  transition: background .2s, color .2s;
}
.nav-links a:hover, .nav-links a.active {
  background: var(--brown); color: #fff;
}
.nav-links a.btn-nav {
  background: var(--gold); color: #fff; font-weight: 600;
  padding: .45rem 1.1rem;
}
.nav-links a.btn-nav:hover { background: var(--amber); }

/* Hamburger */
.nav-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: .4rem; background: none; border: none; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--brown); border-radius: 2px; transition: .3s; }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(135deg, var(--brown) 0%, #5c5a1e 45%, var(--olive) 100%);
  color: #fff; padding: 6rem 0 5rem; overflow: hidden; position: relative;
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero .container { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3);
  border-radius: 50px; padding: .35rem 1rem; font-size: .85rem; margin-bottom: 1.2rem;
}
.hero h1    { color: #fff; margin-bottom: 1rem; }
.hero .lead { color: rgba(255,255,255,.88); font-size: 1.2rem; margin-bottom: 2rem; }
.hero-cta   { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.hero-stat {
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; padding: 1rem; text-align: center;
}
.hero-stat .val { font-size: 1.8rem; font-weight: 700; font-family: var(--font-h); color: var(--gold); display: block; }
.hero-stat .lbl { font-size: .78rem; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .05em; }
.hero-graphic   { font-size: 8rem; opacity: .18; user-select: none; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .7rem 1.6rem; border-radius: 8px;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: transform .15s, box-shadow .15s, background .2s;
  border: none; text-decoration: none; white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }

.btn-primary        { background: var(--olive);  color: #fff; }
.btn-primary:hover  { background: var(--olive-d); color: #fff; }
.btn-accent         { background: var(--gold);   color: #fff; }
.btn-accent:hover   { background: var(--amber);  color: #fff; }
.btn-outline        { background: transparent; border: 2px solid rgba(255,255,255,.6); color: #fff; }
.btn-outline:hover  { background: rgba(255,255,255,.15); color: #fff; }
.btn-sm   { padding: .45rem 1rem; font-size: .85rem; }
.btn-lg   { padding: .9rem 2rem; font-size: 1.05rem; }
.btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }

/* ---- Cards ---- */
.card {
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.8rem;
  transition: transform .2s, box-shadow .2s;
  border: 1px solid var(--border);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-h); }
.card-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.card-title { margin-bottom: .5rem; }
.card-text  { color: var(--grey); font-size: .95rem; }

.card-badge      { display: inline-block; background: var(--olive-l); color: var(--brown); font-size: .78rem; font-weight: 600; padding: .25rem .7rem; border-radius: 50px; margin-bottom: .75rem; }
.card-badge.gold { background: var(--gold-l); color: #5a3800; }
.card-badge.warn { background: #f5e8c0; color: #5a3800; }

.r2-badge { display: flex; align-items: center; gap: .5rem; margin-top: 1rem; font-size: .9rem; }
.r2-bar   { flex: 1; height: 6px; background: var(--olive-l); border-radius: 3px; overflow: hidden; }
.r2-fill  { height: 100%; background: var(--olive); border-radius: 3px; transition: width 1s ease; }

/* ---- Domain Grid ---- */
.domain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; }

/* ---- Performance Tables ---- */
.perf-table-wrap { overflow-x: auto; margin-top: 2rem; }
.perf-table      { width: 100%; border-collapse: collapse; font-size: .9rem; }
.perf-table th   { background: var(--brown); color: #fff; padding: .7rem 1rem; text-align: left; font-weight: 600; }
.perf-table td   { padding: .65rem 1rem; border-bottom: 1px solid var(--border); background: var(--card); }
.perf-table tr:hover td     { background: var(--olive-l); }
.perf-table .best           { color: var(--olive); font-weight: 700; }
.perf-table .poor           { color: #9b2525; }
.perf-table .domain-row td:first-child { font-weight: 600; color: var(--brown); }
.perf-table .ensemble-row   { }
.perf-table .ensemble-row td { border-bottom: 2px solid var(--gold); background: #fdf5e4; }

/* ---- Section Headers ---- */
.section-header            { text-align: center; margin-bottom: 3rem; }
.section-header .overline  { display: inline-block; color: var(--olive); font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .5rem; }
.section-header h2         { margin-bottom: 1rem; }
.section-header p          { max-width: 650px; margin: 0 auto; color: var(--grey); }

/* ---- Tabs ---- */
.tabs-container { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--border); }
.tab-nav        { display: flex; border-bottom: 2px solid var(--border); overflow-x: auto; scrollbar-width: none; background: var(--bg); }
.tab-nav::-webkit-scrollbar { display: none; }
.tab-btn {
  flex: 1; min-width: 150px; padding: 1rem 1.2rem;
  font-size: .9rem; font-weight: 600; cursor: pointer;
  background: none; border: none; border-bottom: 3px solid transparent;
  color: var(--grey); transition: all .2s; white-space: nowrap;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
}
.tab-btn:hover          { color: var(--brown); background: var(--olive-l); }
.tab-btn.active         { color: var(--brown); border-bottom-color: var(--gold); background: var(--bg-alt); }
.tab-pane               { display: none; padding: 2rem; background: var(--card); }
.tab-pane.active        { display: block; }

/* ---- Form Controls ---- */
.form-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-bottom: 1.5rem; }
.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label    { font-size: .875rem; font-weight: 600; color: var(--brown); }
.form-group .hint    { font-size: .78rem; color: var(--grey); }
.form-group .shap-tag {
  font-size: .75rem; background: var(--gold-l); color: #5a3800;
  padding: .15rem .5rem; border-radius: 4px;
  display: inline-block; width: fit-content;
}

input[type="number"], input[type="text"], select {
  width: 100%; padding: .6rem .85rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .95rem; font-family: var(--font-b);
  background: var(--bg-card); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
input[type="number"]:focus, input[type="text"]:focus, select:focus {
  outline: none; border-color: var(--olive);
  box-shadow: 0 0 0 3px rgba(142,136,61,.15);
}

/* Range slider */
.slider-wrap { display: flex; flex-direction: column; gap: .3rem; }
input[type="range"] {
  -webkit-appearance: none; width: 100%; height: 6px;
  border-radius: 3px; background: var(--olive-l);
  outline: none; cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px;
  border-radius: 50%; background: var(--olive);
  box-shadow: 0 1px 6px rgba(142,136,61,.4); cursor: pointer;
  transition: box-shadow .2s;
}
input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 10px rgba(142,136,61,.6);
}
.slider-val    { min-width: 60px; text-align: right; font-weight: 600; font-size: .9rem; color: var(--olive); }
.slider-limits { display: flex; justify-content: space-between; font-size: .72rem; color: var(--grey); }

/* ---- Prediction Result ---- */
.predict-section  { margin-top: 2rem; }
.predict-btn-row  { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }

.result-card {
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--card) 100%);
  border: 2px solid var(--olive); border-radius: var(--radius);
  padding: 1.8rem; display: none; opacity: 0;
  transform: translateY(10px);
  transition: opacity .4s ease, transform .4s ease;
}
.result-card.visible { display: block; opacity: 1; transform: translateY(0); }

.result-main  { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.result-value { font-family: var(--font-h); font-size: 3rem; font-weight: 700; color: var(--brown); line-height: 1; }
.result-unit  { font-size: 1rem; color: var(--grey); margin-top: .25rem; }
.result-meta  { flex: 1; min-width: 200px; }
.result-meta h4 { margin-bottom: .5rem; color: var(--brown); }
.conf-range   { display: inline-block; background: var(--gold-l); color: #5a3800; font-size: .9rem; padding: .25rem .75rem; border-radius: 6px; margin-bottom: .5rem; font-weight: 600; }
.result-badges { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.quality-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; padding: .25rem .75rem; border-radius: 50px; }
.quality-badge.high   { background: var(--olive-l); color: var(--brown); }
.quality-badge.medium { background: var(--gold-l);  color: #5a3800; }
.quality-badge.low    { background: #f5dada;         color: #7a1414; }

.shap-insight        { background: var(--gold-l); border-left: 4px solid var(--gold); padding: 1rem 1.2rem; border-radius: 0 8px 8px 0; margin-top: 1rem; font-size: .9rem; }
.shap-insight strong { color: var(--brown); }
.disclaimer          { margin-top: 1rem; font-size: .82rem; color: var(--grey); display: flex; align-items: flex-start; gap: .5rem; padding: .75rem 1rem; background: var(--bg); border-radius: 8px; border: 1px solid var(--border); }

/* ---- Loading Spinner ---- */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Methodology / About method cards ---- */
.method-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.method-card { border-left: 4px solid var(--olive); padding-left: 1.2rem; }
.method-card h4 { margin-bottom: .5rem; }

.step-list    { list-style: none; counter-reset: step; }
.step-list li { counter-increment: step; display: flex; gap: 1rem; margin-bottom: 1.2rem; }
.step-list li::before {
  content: counter(step); min-width: 32px; height: 32px;
  background: var(--olive); color: #fff; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem;
}

.shap-table    { width: 100%; border-collapse: collapse; font-size: .9rem; margin-top: 1rem; }
.shap-table th { background: var(--olive); color: #fff; padding: .6rem .9rem; text-align: left; }
.shap-table td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); background: var(--card); }
.shap-table tr:hover td { background: var(--olive-l); }
.rank-1 { color: var(--gold); font-weight: 700; }

/* ---- Footer ---- */
footer { background: var(--brown); color: rgba(240,238,216,.75); padding: 3rem 0 2rem; }
footer .container { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; }
footer h4  { color: #f0eed8; margin-bottom: 1rem; font-family: var(--font-b); font-size: 1rem; font-weight: 600; }
footer p, footer li { font-size: .9rem; }
footer ul  { list-style: none; }
footer ul li { margin-bottom: .5rem; }
footer ul li a { color: rgba(240,238,216,.65); }
footer ul li a:hover { color: var(--gold); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); margin-top: 2rem; padding-top: 1.5rem; text-align: center; font-size: .82rem; color: rgba(240,238,216,.45); }
.footer-brand  { font-size: 1.5rem; font-family: var(--font-h); color: #f0eed8; margin-bottom: .75rem; }

/* ---- Pill labels ---- */
.pill       { display: inline-block; padding: .2rem .65rem; border-radius: 50px; font-size: .78rem; font-weight: 600; }
.pill-green { background: var(--olive-l); color: var(--brown); }
.pill-gold  { background: var(--gold-l);  color: #5a3800; }
.pill-red   { background: #f5dada;        color: #7a1414; }

/* ---- Alert / Notice ---- */
.notice       { display: flex; align-items: flex-start; gap: .75rem; padding: 1rem 1.25rem; border-radius: 8px; font-size: .9rem; margin-bottom: 1.5rem; }
.notice-warn  { background: var(--gold-l);  border-left: 4px solid var(--gold); }
.notice-info  { background: var(--bg-alt);  border-left: 4px solid var(--olive); }
.notice-icon  { font-size: 1.2rem; flex-shrink: 0; }

/* ---- Methodology pipeline ---- */
.pipeline-flow  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 2rem 0; }
.pipeline-step  { background: var(--card); border: 2px solid var(--olive); border-radius: 10px; padding: .7rem 1.2rem; font-size: .9rem; font-weight: 600; color: var(--brown); }
.pipeline-arrow { color: var(--gold); font-size: 1.4rem; }

.ensemble-diagram { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; margin: 2rem 0; text-align: center; }
.ensemble-model   { background: var(--card); border: 1.5px solid var(--border); border-radius: 10px; padding: 1rem; }
.ensemble-model h5 { color: var(--brown); font-family: var(--font-b); margin-bottom: .3rem; }
.ensemble-arrow-down { text-align: center; font-size: 2rem; color: var(--gold); margin: 0 0 .5rem; }
.ensemble-output  { background: var(--brown); color: #f0eed8; border-radius: 10px; padding: 1rem; text-align: center; max-width: 250px; margin: 0 auto; }

/* ---- Cite block ---- */
.cite-box  { background: var(--bg); border: 1.5px solid var(--border); border-radius: 10px; padding: 1.5rem; font-family: monospace; font-size: .88rem; line-height: 1.8; position: relative; }
.cite-copy { position: absolute; top: .75rem; right: .75rem; }

/* ---- Mobile Responsive ---- */
@media (max-width: 900px) {
  footer .container   { grid-template-columns: 1fr 1fr; }
  .hero .container    { grid-template-columns: 1fr; }
  .hero-graphic       { display: none; }
  .ensemble-diagram   { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .section            { padding: 3rem 0; }
  .nav-links          { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg); border-bottom: 2px solid var(--border); padding: 1rem; gap: .25rem; }
  .nav-links.open     { display: flex; }
  .nav-toggle         { display: flex; }
  .navbar .container  { position: relative; }
  .hero               { padding: 4rem 0 3rem; }
  .hero-stats         { grid-template-columns: 1fr 1fr; }
  footer .container   { grid-template-columns: 1fr; gap: 2rem; }
  .form-grid          { grid-template-columns: 1fr; }
  .tab-btn            { min-width: 120px; font-size: .8rem; padding: .75rem .8rem; }
  .domain-grid        { grid-template-columns: 1fr 1fr; }
  .result-value       { font-size: 2.2rem; }
  .pipeline-flow      { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 400px) {
  .domain-grid  { grid-template-columns: 1fr; }
  .hero-stats   { grid-template-columns: 1fr; }
}