/* tools.css: the parts the vehicle tool (charging time and savings tabs, views of the vehicles module) and the
   tariffs page share: form fields, segmented control, range input, charging curve, method texts, dated notes,
   the savings teaser block. The breadcrumb is part of the site's page head band (site.css). The vehicle
   tool's own UI is in vehicles.css. Tokens only (base.css + brand theme); full width layouts, no centred
   containers. */

/* ---------- Form fields ---------- */
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld-set { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.fld-label { display: block; padding: 0; color: var(--ink); font-size: var(--fs-small); font-weight: var(--fw-semibold); line-height: 1.4; }
.fld-help { color: var(--muted); font-size: .8125rem; line-height: 1.45; }
.fld-pair { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .fld-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inp {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.3;
}
.inp:hover { border-color: var(--ink-2); }
.inp:focus-visible { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 2px; border-color: var(--ink); }
.inp--sm { width: 4.75em; min-height: 40px; padding: 0 var(--sp-2); text-align: right; }
.inp[type="number"] { font-variant-numeric: tabular-nums; }
.sel-wrap { position: relative; display: block; }
.sel-wrap .sel { appearance: none; -webkit-appearance: none; padding-right: 44px; text-overflow: ellipsis; cursor: pointer; }
.sel-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 18px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}
.check { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: var(--tap); padding: 10px 0; color: var(--ink-2); font-size: .9375rem; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }

/* Segmented control: tint capsule, white active cell (DESIGN-PLAN §2.12 "Sekmeler", tool variant). */
.segctl { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border-radius: var(--r-sm); background: var(--bg-tint); max-width: 100%; }
.segctl-opt { position: relative; display: flex; }
.segctl-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segctl-opt span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--sp-4);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: .9375rem;
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.segctl-opt input:checked + span { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.segctl-opt input:focus-visible + span { outline: var(--bw-focus) solid var(--focus-ring); outline-offset: 1px; }
.segctl-opt:hover span { color: var(--ink); }

/* Selected chips (filter chip pattern): navy fill. */
:is(.tool-sec, .svt-sec, .charge-sec, .idle-sec) .chip.is-on { background: var(--secondary); border-color: var(--secondary); color: var(--on-band); }
:is(.tool-sec, .charge-sec) .chip { cursor: pointer; }

/* Range inputs (single) */
.range { width: 100%; height: var(--tap); margin: 0; accent-color: var(--ink); cursor: pointer; background: transparent; }

/* Controls that only the no-JavaScript form needs (the page updates live with JavaScript). */
html.js [data-js-hide] { display: none; }
.is-pending { opacity: .6; cursor: default; text-decoration: none; }

/* ---------- Charging curve: SVG lines + HTML labels ---------- */
.curve { margin: var(--sp-5) 0 0; padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.curve-title { font-size: var(--fs-h4); font-stretch: var(--stretch-text); letter-spacing: 0; }
.curve-desc { margin: 4px 0 var(--sp-4); color: var(--muted); font-size: .8125rem; }
.curve-plot { position: relative; height: 220px; margin: 30px 0 30px 40px; }
@media (min-width: 1024px) { .curve-plot { height: 240px; } }
.curve-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.curve-window { fill: var(--bg-tint); }
.curve-gridline { stroke: var(--viz-grid, var(--line)); stroke-width: 1; vector-effect: non-scaling-stroke; }
.curve-stline { stroke: var(--viz-context, var(--line-strong)); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.curve-stline.is-extra { opacity: .45; }
.curve-line { fill: none; stroke: var(--viz-ev, var(--ink)); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.curve-ylab, .curve-xlab, .curve-stlab, .curve-unit { position: absolute; color: var(--muted); font-size: 12px; line-height: 1; white-space: nowrap; pointer-events: none; }
.curve-ylab { right: calc(100% + 8px); top: var(--y); transform: translateY(-50%); }
.curve-xlab { top: calc(100% + 10px); left: var(--x); transform: translateX(-50%); }
.curve-unit { right: calc(100% + 8px); top: -28px; font-weight: var(--fw-semibold); }
.curve-stlab { right: 0; top: var(--y); transform: translateY(calc(-100% - 3px)); padding: 0 4px; border-radius: 4px; background: var(--surface); color: var(--ink-2); font-weight: var(--fw-semibold); }
.curve-stlab.is-extra { opacity: .7; }
.curve-table, .method-body .curve-table { margin-top: var(--sp-2); }
.curve-table summary, .index-table summary { cursor: pointer; }
.curve-table summary { width: max-content; color: var(--ink); font-size: .875rem; font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
.curve-table table { width: 100%; max-width: 360px; margin-top: var(--sp-3); font-size: .875rem; }
.curve-table th, .curve-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.curve-table td { text-align: right; }

/* ---------- Method panel and notes ---------- */
.method-body { display: flex; flex-direction: column; gap: var(--sp-3); padding: 0 var(--sp-5) var(--sp-5); color: var(--ink-2); font-size: .9375rem; }
.method-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding-left: 1.1em; }
.method-list li::marker { color: var(--line-strong); }
.method-list--src { padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: .875rem; }
.method-sources a { color: var(--ink); }
.method-disclaimer { color: var(--muted); font-size: .8125rem; }
.veh-notes { margin-bottom: var(--grid-gap); padding: var(--sp-5); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); }
.veh-notes-title { font-size: var(--fs-h4); font-stretch: var(--stretch-text); letter-spacing: 0; margin-bottom: var(--sp-3); }
.veh-notes ul { display: flex; flex-direction: column; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.veh-notes li { display: flex; flex-direction: column; gap: 2px; padding-left: var(--sp-3); border-left: 1px solid var(--line-strong); }
.veh-notes time { color: var(--muted); font-size: var(--fs-micro); font-weight: var(--fw-semibold); }
.veh-notes p { color: var(--ink-2); font-size: .9375rem; }

/* ---------- vehicles.savings-teaser block ---------- */
.svt-grid { align-items: center; row-gap: var(--sp-6); }
.svt-text { display: flex; flex-direction: column; gap: var(--sp-4); }
.svt-intro { color: var(--ink-2); font-size: var(--fs-intro); line-height: 1.5; }
.svt-form { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 768px) { .svt-form { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .svt-form .fld-set { grid-column: 1; } .svt-form .btn { justify-self: start; } }

@media (max-width: 479.98px) {
  .curve { padding: var(--sp-4); }
  .segctl { width: 100%; }
  .segctl-opt { flex: 1; }
  .segctl-opt span { justify-content: center; width: 100%; padding: 0 var(--sp-2); }
}