/* RF_STYLES_VERSION: 001 */
:root{
  --bg:#0b0f14;
  --panel:#101824;
  --panel2:#0e1620;
  --text:#e8eef7;
  --muted:#a6b3c4;
  --line:rgba(255,255,255,.10);
  --accent:#58a6ff;
  --accent2:#7ee787;
  --warn:#ffd479;
  --danger:#ff7b72;
  --shadow:0 10px 24px rgba(0,0,0,.35);
  --radius:16px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background-image: url("../assets/images/blueprint-bg.png");
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover;      /* Ensures the image covers the entire element */
  background-position: center;   /* Centers the image in the viewport */
  background-attachment: fixed;  /* Fixes the image position during scrolling (optional) */
  color:var(--text);
}

.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
.site-header{
  border-bottom:1px solid var(--line);
  background:rgba(7,11,16,.75);
  position:sticky;top:0;backdrop-filter: blur(10px);
  z-index:10;
}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 18px}
.brand{display:flex;gap:12px;align-items:center}
.logo{
  width:50px;height:50px;border-radius:10px;
  background-image: url('../images/RF_Profile_800x800_NoBorder.png');
  background-size: contain; /* Ensures the whole logo fits within the 36x36 area */
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: var(--shadow);
}
.title{font-weight:700}
.subtitle{color:var(--muted);font-size:13px;margin-top:2px}

.header-actions{display:flex;gap:14px}
.link{color:var(--muted);text-decoration:none;font-size:14px}
.link:hover{color:var(--text)}

.main{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:16px;
  padding:18px;
}

.panel{
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel2) 100%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow: var(--shadow);
  padding:16px;
}

.panel h2{margin:0 0 12px 0;font-size:18px}
.sep{border:none;border-top:1px solid var(--line);margin:14px 0}

.row{margin:10px 0}
.row label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.row input,.row select{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--text);
  border-radius:12px;
  padding:10px 11px;
  font-size:14px;
  outline:none;
}
.row input:focus,.row select:focus{border-color:rgba(88,166,255,.55);box-shadow:0 0 0 4px rgba(88,166,255,.14)}
.hint{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.35}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.inline{display:flex;gap:10px;align-items:center}
.inline input{flex:1}

.actions{display:flex;gap:10px;align-items:center;justify-content:flex-start}
.btn{
  appearance:none;border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;border-radius:12px;
  cursor:pointer;font-size:14px;
}
.btn:hover{border-color:rgba(255,255,255,.25)}
.btn.primary{border-color:rgba(88,166,255,.55);background:rgba(88,166,255,.12)}
.btn.primary:hover{background:rgba(88,166,255,.18)}

.kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.kpi{
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  border-radius:14px;padding:12px;
}
.kpi-label{color:var(--muted);font-size:12px}
.kpi-value{font-size:28px;font-weight:750;margin-top:4px;font-family:var(--mono)}
.kpi-sub{color:var(--muted);font-size:12px;margin-top:2px}

.warnings{margin:8px 0 12px 0}
.warn{
  border:1px solid rgba(255,212,121,.35);
  background:rgba(255,212,121,.08);
  padding:10px 12px;border-radius:12px;
  margin:8px 0;color:var(--warn);font-size:13px
}
.danger{
  border:1px solid rgba(255,123,114,.35);
  background:rgba(255,123,114,.08);
  color:var(--danger);
}

.chart-wrap{
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:10px;
}

/* Keep the chart from stretching to infinity when surrounding layout changes */
.chart-title{
  font-size:13px;
  color:var(--muted);
  margin:2px 2px 8px 2px;
}
.chart-canvas{
  height:200px; /* fixed drawing area */
}
.chart-canvas canvas{
  display:block;
  width:100% !important;
  height:100% !important;
}

.table-wrap{margin-top:12px}
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.02);
}
.table th,.table td{
  padding:10px 12px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.table th{color:var(--muted);text-align:left;background:rgba(255,255,255,.02)}
.table .num{text-align:right;font-family:var(--mono)}
.table tr:last-child td{border-bottom:none}
.table tr.strong td{font-weight:700}

.footnote{color:var(--muted);font-size:12px;margin:12px 2px 0 2px;line-height:1.35}

.calibration{margin-top:12px;border:1px dashed rgba(255,255,255,.18);border-radius:14px;padding:10px}
.calibration summary{cursor:pointer;color:var(--muted);font-size:13px}
.calibration-body{margin-top:10px;color:var(--text);font-size:13px;line-height:1.45}
.calibration .note{color:var(--muted);font-size:12px}

@media (max-width: 980px){
  .main{grid-template-columns:1fr}
}


.muted { opacity: 0.45; }

#limitBreakdown{ color: var(--muted); }

/* Adhesion cap block */
.adhesion-box{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
}
.check{
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  user-select:none;
}
.check input{ width:auto; }
.grid2.tight{ gap:10px; margin-top:8px; }
#adhesionInfo{ margin-top:8px; }


/* Resistance share bar */
.sharebar{
  margin-top:10px;
  height:12px;
  border-radius:999px;
  overflow:hidden;
  display:flex;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.sharebar .seg{ height:100%; }
.sharebar .seg.grade{ background:rgba(255,255,255,.35); }
.sharebar .seg.rolling{ background:rgba(255,255,255,.22); }
.sharebar .seg.curve{ background:rgba(255,255,255,.14); }

.sharebar-legend{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


.sharebar-label{
  margin-top:10px;
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
  text-transform:uppercase;
}
.share-actions{
  margin-top:8px;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}



.readonly{ padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); }

.grid3{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px; }
@media (max-width: 900px){ .grid3{ grid-template-columns: 1fr; } }


.row select, .row input{ width:100%; }

#trackType{ width:100%; }


/* ===============================
   RailForge Themed Select Fields
   Matches input styling exactly
================================= */

.row select,
.presets-row select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #e6edf5;
  font-size: 14px;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

/* Hover state */
.row select:hover,
.presets-row select:hover {
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.08);
}

/* Focus state */
.row select:focus,
.presets-row select:focus {
  outline: none;
  border-color: rgba(124, 180, 255, 0.6);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 2px rgba(124,180,255,0.15);
}

/* Dropdown options */
.row select option,
.presets-row select option {
  background: #1c1f26;
  color: #e6edf5;
}

/* Custom subtle arrow */
.row select,
.presets-row select {
  background-image:
    linear-gradient(45deg, transparent 50%, #9fb3c8 50%),
    linear-gradient(135deg, #9fb3c8 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 36px;
}


.muted label, .muted .hint { opacity: 0.6; }
.muted select, .muted input { opacity: 0.5; }


/* Track-type sub-panels */
.panel-sub{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.02);
  border-radius:14px;
  padding:12px;
}
.subhead{
  font-size:12px;
  letter-spacing:.02em;
  color:var(--muted);
  text-transform:uppercase;
  margin-bottom:8px;
}

/* Remove number input spin arrows (Chrome, Edge, Safari) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove number input arrows (Firefox) */
input[type="number"] {
  -moz-appearance: textfield;
}

/* ===============================
   Fix checkbox styling + alignment
   (prevents .row input styles from turning checkboxes into text fields)
================================= */
.row input[type="checkbox"],
.check input[type="checkbox"]{
  accent-color: var(--accent);
  width: auto;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  outline: none;
  appearance: auto;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
}

/* Keep checkbox + text left-aligned and side-by-side */
.check{
  justify-content: flex-start;
  align-items: center;
}

#primaryKpiLabel {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

/* SVG styling for Wheel/Rail Lab */
svg .gridLine {
  stroke: rgba(255,255,255,.06);
  stroke-width: .2;
}

/* SVG text + annotation styling (used by ui.js) */
svg .gridText{
  fill: rgba(232,238,247,.82);
  font-family: var(--mono);
  font-size: 11px; /* base; ui.js may override per-label */
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(7,11,16,.55);      /* subtle halo for readability */
  stroke-width: 2.2px;
  stroke-linejoin: round;
}
svg .gridText.good{ fill: rgba(126,231,135,.92); }
svg .gridText.warn{ fill: rgba(255,212,121,.92); }
svg .gridText.bad{  fill: rgba(255,123,114,.92); }

/* Optional faint guide lines for labels -> features */
svg .guideLine{
  stroke: rgba(255,255,255,.08);
  stroke-width: .35;
  stroke-dasharray: 2 2;
}



svg .guideLine {
  stroke: rgba(255,255,255,.18);
  stroke-width: .32;
  opacity: 0.45;
}

svg .dimGood { stroke: rgba(126,231,135,.95); fill: rgba(126,231,135,.95); }
svg .dimWarn { stroke: rgba(255,212,121,.95); fill: rgba(255,212,121,.95); }
svg .dimBad  { stroke: rgba(255,123,114,.95); fill: rgba(255,123,114,.95); }
svg .gridText {
  fill: rgba(255,255,255,.36);
  font-size: 4.8px;
  letter-spacing: .02em;
}
svg .railFill {
  fill: rgba(255,255,255,.12);
  stroke: rgba(255,255,255,.6);
  stroke-width: .5;
}

svg .wheelFill {
  fill: rgba(88,166,255,.18);
  stroke: rgba(88,166,255,.85);
  stroke-width: .6;
}

svg .contactDot {
  fill: #7ee787;
  stroke: rgba(0,0,0,.4);
  stroke-width: .3;
}

/* ===============================
   Grade Calculator: mode segmented control + hint
================================= */
.mode-block{ margin: 4px 0 2px; }

.segmented{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:6px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.03);
}
.segmented .seg-btn{
  appearance:none;
  border:1px solid transparent;
  background:transparent;
  color:var(--muted);
  padding:9px 8px;
  border-radius:9px;
  cursor:pointer;
  font-size:13px;
  font-weight:600;
  line-height:1.1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.segmented .seg-btn:hover{ color:var(--text); }
.segmented .seg-btn:focus-visible{
  outline:none;
  border-color:rgba(88,166,255,.55);
  box-shadow:0 0 0 3px rgba(88,166,255,.14);
}
.segmented .seg-btn.is-active{
  background:rgba(88,166,255,.14);
  border-color:rgba(88,166,255,.55);
  color:var(--text);
}

.mode-hint{
  margin:8px 2px 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.4;
}

/* ===============================
   Grade Calculator: advanced <details> groups
================================= */
details.advanced{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.02);
  padding:10px 12px;
}
details.advanced > summary{
  cursor:pointer;
  color:var(--text);
  font-size:13px;
  list-style:none;
}
details.advanced > summary::-webkit-details-marker{ display:none; }
details.advanced > summary::before{
  content:"\25B8"; /* right-pointing triangle */
  display:inline-block;
  margin-right:8px;
  color:var(--muted);
  transition:transform .15s ease;
}
details.advanced[open] > summary::before{ transform:rotate(90deg); }
details.advanced > summary:hover{ color:var(--text); }
.advanced-body{ margin-top:10px; }
.advanced-body .adhesion-box{ margin-top:0; }

/* Inline Export confirmation (sits next to the Export button in Results). */
.export-status{
  font-size:12px;
  color:var(--accent2);
  opacity:0;
  transition:opacity .2s ease;
  line-height:1.3;
}
.export-status.is-visible{ opacity:1; }

/* Lab tool <h1> — each tool page needs a real top-level heading for SEO/AEO +
   accessibility (H1 was missing). Sits on one flex row beside the compact
   .eyebrow label; given real rank (full --text color, weight 800, normal case)
   so it reads as the title rather than blending into the muted eyebrow label and
   the muted intro prose below it. Kept small + normal-case (not the huge
   site-wide h1) so it doesn't collide with the right-side .eyebrow span; dropping
   uppercase also shortens most titles, easing that collision.
   Scoped to the .wrap container so it beats the site-wide
   `h1 { font-size: clamp(2.7rem,6vw,4.4rem); max-width:10ch }` rule, which was
   rendering these as giant three-line headings. */
.wrap h1.lab-tool-h1{
  margin:0;
  max-width:none;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:0.005em;
  color:var(--text);
  text-align:left;
}

/* Rebuilt-tool template header (the calm Scalecoat-structure card). EVERY rebuilt
   tool uses <main class="wrap sc-wrap"> > <div class="sc-card"> > <h1>, so scope
   the small-header size to the card itself. This means a tool gets the correct
   (non-giant) H1 automatically just by using the sc-card template — no per-tool
   `lab-tool-h1` class to remember on each <h1>, and no per-file edit when a new
   tool is added. Beats the site-wide `h1 { font-size: clamp(2.7rem,6vw,4.4rem);
   max-width:10ch }` via the .wrap .sc-card descendant specificity. */
.wrap .sc-card h1{
  margin:0 0 6px;
  max-width:none;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:0.005em;
  color:var(--text);
  text-align:left;
}

/* Header layout override. Every per-tool *-eyebrow container shares the markup
   <h1.lab-tool-h1> + <span.eyebrow> and sets justify-content:space-between, which
   stranded the title far-left and the tagline far-right once the title became a
   real heading. Override to a single left-aligned stack: title, then the quieter
   tagline beneath it, both starting at the wrap's left edge so they line up with
   the intro and the panels. */
.wrap[class*="-eyebrow"]{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-start !important;
  text-align:left !important;
  gap:4px !important;
}
.wrap[class*="-eyebrow"] .eyebrow{
  margin:0 !important;
  font-size:0.78rem;
  letter-spacing:0.14em;
  text-align:left;
}

/* Lab tool intro — a short, crawlable prose block under the header that tells a
   first-time visitor (and search / AI-answer engines) what the tool does, how to
   use it, and the accuracy framing. Each tool's copy is unique (no duplicated
   body text). Sits in the same centered .wrap column as the eyebrow + panels. */
.lab-intro{
  margin:10px auto 2px;
  max-width:1120px;
  padding:0 18px;
  text-align:left;
}
/* Two-column text flow: fills the full width while keeping each line a
   comfortable reading length. Column-based (not a fixed count) so it collapses to
   a single column on narrow screens automatically. break-inside:avoid keeps a
   whole paragraph from being split across the column gap. */
.lab-intro{
  column-width:46ch;
  column-gap:48px;
}
.lab-intro p{
  max-width:none;
  margin:0 0 11px;
  color:var(--text);
  font-size:14.5px;
  line-height:1.6;
  text-align:left;
  break-inside:avoid;
}
.lab-intro p:last-child{ margin-bottom:0; }
.lab-intro strong{ color:#fff; font-weight:650; }
.lab-intro .lab-intro-how{ font-size:14.5px; }
/* The lead-in label of the how-to line, bumped on its own so the "How to use it:"
   header stands out without enlarging the paragraph text. */
.lab-intro .lab-intro-label{
  font-size:16px;
  color:#fff;
  font-weight:700;
}
/* The accuracy note spans the full width beneath both columns, so it reads as a
   closing caveat rather than being stranded at the bottom of the right column. */
.lab-intro .lab-intro-note{
  font-size:13.5px;
  column-span:all;
  margin-top:11px;
}