/* ==========================================================================
   IE Toolkit — style.css
   1. Design tokens
   2. Base
   3. Layout helpers and notebook details
   4. Components (nav, buttons, hero, preview, directory, converter, OEE, inventory, capacity, pricing, footer)
   5. Illustrations
   6. Motion
   7. Responsive
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Every colour in this file comes from these variables.
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --bg: #f8fafc;
  --bg-tint: #eaf2ff;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --border: #d8e1ee;
  --border-strong: #b6c3d8;
  --nav-bg: rgba(248, 250, 252, 0.9);

  /* Text */
  --ink: #172554;
  --text: #334155;
  --text-muted: #475569;
  --text-on-accent: #ffffff;

  /* Accent */
  --accent: #4f46e5;
  --accent-hover: #4338ca;
  --accent-soft: #eef2ff;
  --focus-ring: rgba(79, 70, 229, 0.3);
  --danger: #b42318;
  --warning: #a34708;

  /* Notebook details */
  --grid-line: rgba(23, 37, 84, 0.055);
  --tick: rgba(23, 37, 84, 0.16);
  --tick-strong: rgba(23, 37, 84, 0.34);

  /* Illustration line art */
  --ill-line: #172554;
  --ill-line-soft: #94a3c4;
  --ill-fill: #ffffff;
  --ill-accent: #4f46e5;
  --ill-accent-soft: #c7d2fe;
  --ill-note: #64748b;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(23, 37, 84, 0.05);
  --shadow-md: 0 1px 2px rgba(23, 37, 84, 0.05), 0 6px 16px rgba(23, 37, 84, 0.06);

  /* Shape and spacing */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --gutter: 24px;
  --section-space: clamp(48px, 6.5vw, 80px);

  /* Type */
  --font-heading: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Dark theme: deep navy surfaces, ice-blue accents. Only tokens change here;
   the attribute is set by the inline script in index.html and by app.js. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0b1226;
  --bg-tint: #0f1936;
  --surface: #141f42;
  --surface-soft: #101a39;
  --border: #26345a;
  --border-strong: #3d4e80;
  --nav-bg: rgba(11, 18, 38, 0.9);

  --ink: #eaf2ff;
  --text: #cbd5e1;
  --text-muted: #a3b3cf;
  --text-on-accent: #0b1226;

  --accent: #a9c4ff;
  --accent-hover: #c8daff;
  --accent-soft: #1b2a57;
  --focus-ring: rgba(169, 196, 255, 0.45);
  --danger: #ffa4a4;
  --warning: #fbbf24;

  --grid-line: rgba(234, 242, 255, 0.045);
  --tick: rgba(234, 242, 255, 0.2);
  --tick-strong: rgba(234, 242, 255, 0.4);

  --ill-line: #dbe7ff;
  --ill-line-soft: #5d6f9e;
  --ill-fill: #141f42;
  --ill-accent: #a9c4ff;
  --ill-accent-soft: #2c3d7a;
  --ill-note: #9fb0cc;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 20px rgba(0, 0, 0, 0.28);
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-heading);
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2rem, 4.2vw, 2.75rem);
  font-weight: 800;
}

h2 {
  font-size: clamp(1.5rem, 2.6vw, 1.75rem);
  font-weight: 700;
}

h3 {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

p,
figure,
dl,
dd {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

svg {
  display: block;
}

button,
input,
select {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

/* Set by the inline script in index.html while a saved non-English language is
   waiting to be applied; removed by app.js as soon as the text is translated. */
.i18n-pending body {
  visibility: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.svg-defs {
  position: absolute;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 12px;
}

/* --------------------------------------------------------------------------
   3. Layout helpers and notebook details
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-space);
  border-top: 1px solid var(--border);
}

.section-tint {
  background: var(--bg-tint);
}

.section-head {
  max-width: 620px;
  margin-bottom: 28px;
}

.section-head h2 {
  margin-top: 8px;
}

.section-head p:not(.tech-label) {
  margin-top: 8px;
  color: var(--text-muted);
}

/* Small technical label: drawing captions, tool numbers, field names */
.tech-label {
  display: block;
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* Measurement marks: minor tick every 8px, major every 40px */
.ticks {
  height: 8px;
  background:
    linear-gradient(90deg, var(--tick-strong) 1px, transparent 1px) 0 0 / 40px 8px repeat-x,
    linear-gradient(90deg, var(--tick) 1px, transparent 1px) 0 0 / 8px 4px repeat-x;
}

.readout {
  min-height: 40px;
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--bg-tint);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.readout:empty {
  visibility: hidden;
}

.readout.is-error {
  border-left-color: var(--danger);
  color: var(--danger);
  font-weight: 500;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  white-space: nowrap;
}

.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.status-live {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-hover);
}

.status-live::before {
  background: currentColor;
}

.text-link {
  display: inline-block;
  color: var(--accent-hover);
  font-size: 0.9rem;
  font-weight: 600;
}

a.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Components
   -------------------------------------------------------------------------- */

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.site-header .ticks {
  height: 5px;
  background-size: 40px 5px, 8px 3px;
  opacity: 0.8;
}

/* On desktop .nav-menu dissolves (display: contents) so its links and button
   line up with the controls as one row, in the same order as the markup. */
.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: 58px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  border-radius: var(--radius-sm);
  color: var(--ink);
}

.brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
}

.brand-name {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.nav-menu {
  display: contents;
}

.nav-menu a:not(.btn) {
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

.nav-menu a:not(.btn):hover {
  background: var(--bg-tint);
}

.nav-menu .btn {
  margin-left: 12px;
}

.nav-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 12px;
}

/* Language selector: two-segment control */
.lang-switch {
  display: flex;
  flex: none;
  height: 30px;
  padding: 2px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--bg-tint);
}

.lang-btn {
  position: relative;
  min-width: 32px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Taller hit area for touch without changing the visual size */
.lang-btn::before {
  content: "";
  position: absolute;
  inset: -9px 0;
}

.lang-btn:hover {
  color: var(--ink);
}

.lang-btn[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Theme switch: the thumb slides under the sun (light) or the moon (dark) */
.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  width: 56px;
  height: 30px;
  padding: 0 7px;
  border: 1px solid var(--border-strong);
  border-radius: 15px;
  background: var(--bg-tint);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.theme-switch:hover {
  border-color: var(--accent);
}

/* Larger hit area for touch without changing the visual size */
.theme-switch::before {
  content: "";
  position: absolute;
  inset: -8px -4px;
}

.theme-icon {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  transition: color 0.2s ease;
}

.theme-switch[aria-checked="false"] .theme-icon:first-of-type,
.theme-switch[aria-checked="true"] .theme-icon:last-of-type {
  color: var(--accent);
}

.theme-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch[aria-checked="true"] .theme-thumb {
  transform: translateX(26px);
}

.nav-toggle {
  display: none;
  margin-left: 10px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.btn-primary {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--accent-hover);
}

.btn-secondary {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.btn-secondary:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.btn-small {
  min-height: 36px;
  padding: 7px 14px;
  font-size: 0.88rem;
}

.btn-block {
  width: 100%;
}

.btn:disabled {
  background: var(--surface-soft);
  border-color: var(--border);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed;
}

/* Hero / workspace */
.hero {
  position: relative;
  padding-block: clamp(40px, 6vw, 72px);
}

/* Faint engineering grid, fading out towards the bottom of the hero */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 56px;
}

.hero-copy h1 {
  margin-top: 12px;
}

.lead {
  max-width: 44ch;
  margin-top: 14px;
  color: var(--text-muted);
  font-size: 1.08rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.spec-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: 32px;
  border-top: 1px solid var(--border-strong);
}

.spec-row > div {
  padding: 10px 28px 0 0;
}

.spec-row > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.spec-row dt {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.spec-row dd {
  color: var(--ink);
  font-size: 1.15rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.spec-row dd span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

/* ConvertLab preview panel */
.preview {
  position: relative;
  padding: 22px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

/* Blueprint-style crop marks just outside the panel corners */
.crop {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 0 solid var(--tick-strong);
  pointer-events: none;
}

.crop-tl { top: -9px; left: -9px; border-top-width: 1px; border-left-width: 1px; }
.crop-tr { top: -9px; right: -9px; border-top-width: 1px; border-right-width: 1px; }
.crop-bl { bottom: -9px; left: -9px; border-bottom-width: 1px; border-left-width: 1px; }
.crop-br { bottom: -9px; right: -9px; border-bottom-width: 1px; border-right-width: 1px; }

.preview-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.preview-title {
  margin-top: 2px;
  font-size: 1.2rem;
}

.preview-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  align-items: end;
  gap: 12px;
  margin-top: 16px;
}

.preview-field .tech-label {
  margin-bottom: 6px;
}

.preview-arrow {
  width: 22px;
  height: 22px;
  margin-bottom: 13px;
  color: var(--text-muted);
}

.inline-field {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inline-field:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.inline-field:has([aria-invalid="true"]) {
  border-color: var(--danger);
}

.inline-field-result {
  border-color: var(--border);
  background: var(--bg-tint);
}

.inline-field input,
.inline-field output {
  flex: 1;
  min-width: 0;
  padding: 8px 4px 8px 12px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.inline-field input:focus {
  outline: none;
}

.unit-tag {
  flex: none;
  padding: 0 12px 0 6px;
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 600;
}

.preview .readout {
  margin-top: 12px;
}

.preview-figure {
  margin-top: 16px;
  padding: 12px 14px 10px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.preview-figure svg {
  width: 100%;
  height: auto;
}

.preview-figure figcaption {
  margin-top: 6px;
}

.preview .text-link {
  margin-top: 14px;
}

/* Tool directory */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.tool-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 14px 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tool-card-live {
  border-color: var(--border-strong);
}

.tool-card-live:hover,
.tool-card-live:focus-within {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.tool-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.tool-art {
  margin: 12px 0 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background-color: var(--surface-soft);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 12px 12px;
}

.tool-art svg {
  width: 100%;
  height: auto;
}

.tool-card p {
  flex: 1;
  margin-top: 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.tool-card .text-link {
  margin-top: 12px;
}

.stretched-link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}

.stretched-link:focus-visible {
  outline: none;
}

.stretched-link:focus-visible::after {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ConvertLab */
.converter {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.85fr);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.converter-main {
  padding: clamp(16px, 2.6vw, 28px);
}

.converter-art {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-left: 1px solid var(--border);
  background-color: var(--surface-soft);
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 16px 16px;
}

.converter-art svg {
  width: 100%;
  max-width: 320px;
  height: auto;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
}

.tab {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tab:hover {
  background: var(--bg-tint);
  color: var(--ink);
}

.tab[aria-selected="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}

.converter-panel {
  margin-top: 20px;
}

.field .tech-label {
  margin-bottom: 6px;
}

.field-box {
  display: flex;
  align-items: stretch;
  min-height: 52px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.field-box:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.field-box:has([aria-invalid="true"]) {
  border-color: var(--danger);
}

.field-box-result {
  min-height: 64px;
  border-color: var(--border);
  background: var(--bg-tint);
}

.field-value {
  flex: 1;
  min-width: 0;
  padding: 8px 8px 8px 14px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

output.field-value {
  align-self: center;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.field-value:focus {
  outline: none;
}

.field-unit {
  flex: 0 1 auto;
  width: 44%;
  max-width: 230px;
  min-width: 0;
  padding: 8px 30px 8px 12px;
  border: 0;
  border-left: 1px solid var(--border);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-overflow: ellipsis;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.field-unit:focus {
  outline: none;
}

.field-unit option {
  background: var(--surface);
  color: var(--text);
}

/* Swap button sits on a thin construction line between the two fields */
.swap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-block: 10px;
}

.swap-row::before,
.swap-row::after {
  content: "";
  flex: 1;
  border-top: 1px dashed var(--border-strong);
}

.swap-btn {
  width: 40px;
  height: 40px;
  padding: 9px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.swap-btn:hover {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.swap-btn svg {
  transition: transform 0.25s ease;
}

.swap-btn.is-flipped svg {
  transform: rotate(180deg);
}

.converter-message {
  min-height: 1.5em;
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.converter-message.is-error {
  color: var(--danger);
  font-weight: 500;
}

.converter-panel .readout {
  margin-top: 6px;
}

/* Calculator layout (OEE and inventory): inputs on the left, dashboard on the right.
   The .oee-* names are the OEE module; .calc-* are the same rules for other modules. */
.oee,
.calc {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.oee-inputs,
.calc-inputs {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: clamp(16px, 2.6vw, 28px);
  border-right: 1px solid var(--border);
  background: var(--surface-soft);
}

/* Lets a field shrink with its grid column instead of holding the input's default width */
.field {
  min-width: 0;
}

.field-label {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}

.oee-inputs .field-box,
.calc-inputs .field-box {
  min-height: 44px;
}

.oee-inputs .field-value,
.calc-inputs .field-value {
  font-size: 1.05rem;
}

.field-box .unit-tag {
  align-self: center;
  padding-right: 14px;
}

.field-error {
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 500;
}

.field-error:not(:empty) {
  margin-top: 5px;
}

.oee-results,
.calc-results {
  display: grid;
  align-content: start;
  gap: 20px;
  padding: clamp(16px, 2.6vw, 28px);
}

.oee-figure {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 4px;
  color: var(--ink);
  font-size: clamp(2.4rem, 5vw, 3.25rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.oee-figure-name {
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.oee-formula-label {
  margin-top: 14px;
}

.oee-headline .readout {
  margin-top: 6px;
}

/* Progress bar. The fill width is set from app.js; is-over marks a value
   above 100% with a cap at the end, since the bar itself cannot grow further. */
.meter {
  position: relative;
  height: 6px;
  margin-top: 10px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
}

.meter-lg {
  height: 10px;
  border-radius: 5px;
}

.meter-fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
  transition: width 0.3s ease;
}

.meter.is-over::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 8px;
  height: 100%;
  background: var(--warning);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.metric {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color 0.15s ease;
}

.metric.is-lowest {
  border-color: var(--accent);
}

.metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 24px;
}

.metric-head h3 {
  font-size: 0.92rem;
}

.metric-value {
  margin-top: 6px;
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.metric-detail {
  min-height: 1.4em;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.oee-facts,
.calc-facts {
  display: flex;
  flex-wrap: wrap;
  border-top: 1px solid var(--border);
}

.oee-facts > div,
.calc-facts > div {
  padding: 10px 28px 0 0;
}

.oee-facts > div + div,
.calc-facts > div + div {
  padding-left: 20px;
  border-left: 1px solid var(--border);
}

.oee-facts dt,
.calc-facts dt {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.oee-facts dd,
.calc-facts dd {
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.oee-facts dd span + span,
.calc-facts dd span + span {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 500;
}

.oee-analysis,
.calc-notes {
  padding: 14px 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  font-size: 0.93rem;
}

.oee-analysis-title {
  margin-top: 6px;
  color: var(--ink);
  font-weight: 600;
}

.oee-warning,
.calc-warning {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 2px solid var(--warning);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface);
  color: var(--warning);
  font-weight: 500;
}

.oee-disclaimer,
.calc-muted {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

/* Inventory calculator: additions to the shared calculator styles above */
.field-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field-group > legend {
  margin-bottom: 12px;
  padding: 0;
}

/* Divider under the first input group (a bottom border, so it never cuts through a legend) */
.calc-inputs > .field-group:first-child {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.field-hint {
  margin-top: 5px;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.field-select {
  flex: 1;
  min-width: 0;
  padding: 8px 34px 8px 14px;
  border: 0;
  border-radius: var(--radius-md);
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--ink);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.field-select:focus {
  outline: none;
}

.field-select option {
  background: var(--surface);
  color: var(--text);
}

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}

.check input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.calc-status {
  padding: 8px 12px;
  border-left: 2px solid var(--danger);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
  color: var(--danger);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Neutral note: something is unfinished, nothing is wrong */
.calc-pending {
  padding: 8px 12px;
  border-left: 2px solid var(--border-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 0.9rem;
}

.metric-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.metric-value {
  overflow-wrap: anywhere;
}

.metric-unit {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0;
}

/* Fact rows as an even grid: they wrap cleanly, and labels keep their case
   because symbols such as d and D mean different things. */
.calc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 2px 20px;
  margin-top: 6px;
}

.calc-facts > div,
.calc-facts > div + div {
  padding: 10px 0 0;
  border-left: 0;
}

.calc-facts dt {
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  text-transform: none;
}

.calc-results > .calc-warning,
.calc-results .calc-muted {
  margin-top: 0;
}

.calc-results .calc-muted {
  margin-top: 10px;
}

.calc-notes-text {
  margin-top: 6px;
}

.calc-notes-heading {
  margin-top: 14px;
}

.calc-list {
  display: grid;
  gap: 4px;
  margin: 6px 0 0;
  padding-left: 18px;
}

/* Capacity planning: station rows and the station capacity bar chart */
.station-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.station {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding: 10px 12px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.station-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 28px;
}

.station-tag {
  color: var(--ink);
}

.station-remove {
  position: relative;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

/* Larger hit area for touch without changing the visual size */
.station-remove::before {
  content: "";
  position: absolute;
  inset: -8px;
}

.station-remove:hover:not(:disabled) {
  border-color: var(--danger);
  color: var(--danger);
}

.station-remove:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.station-pair {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 10px;
}

.station .field-label {
  font-size: 0.8rem;
}

.station-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
}

.station-actions .field-hint {
  margin-top: 0;
}

.metric-value-text {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
}

.bar-list {
  display: grid;
  gap: 10px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.9rem;
}

.bar-name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  color: var(--ink);
  font-weight: 600;
}

.bar-name-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.bar-row .meter {
  display: block;
  height: 10px;
  margin-top: 0;
  border-radius: 5px;
}

.bar-value {
  min-width: 5.5rem;
  color: var(--ink);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* The bottleneck is marked by its tag text as well as by colour */
.bar-row.is-bottleneck .meter-fill {
  background: var(--warning);
}

.bar-tag {
  border-color: var(--warning);
  color: var(--warning);
}

/* Pricing */
.demo-note {
  padding: 8px 12px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.9rem;
}

.demo-note strong {
  color: var(--ink);
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 16px;
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.price-card-featured {
  border-color: var(--accent);
}

.price-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.price-head h3 {
  font-size: 1.1rem;
}

.price-amount {
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.price-period {
  margin-left: 2px;
  color: var(--text-muted);
  font-size: 0.88rem;
  font-weight: 500;
}

.price-desc {
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.feature-list {
  display: grid;
  align-content: start;
  gap: 6px;
  flex: 1;
  margin: 12px 0 16px;
  padding: 0;
  list-style: none;
  font-size: 0.92rem;
}

.feature-list li {
  position: relative;
  padding-left: 22px;
}

.feature-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 10px;
  height: 5px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* Footer */
.site-footer {
  padding-block: 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.92rem;
}

.footer-links a {
  color: var(--text-muted);
  font-weight: 500;
}

.footer-links a:hover {
  color: var(--accent-hover);
}

.footer-note,
.footer-credit {
  flex-basis: 100%;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.footer-credit {
  margin-top: -6px;
}

.footer-credit a {
  color: var(--accent-hover);
  font-weight: 600;
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.15s ease;
}

.footer-credit a:hover {
  text-decoration-color: currentColor;
}

/* --------------------------------------------------------------------------
   5. Illustrations
   Thin line art. Shapes default to an unfilled ink stroke; modifier classes
   pick other roles from the --ill-* tokens.
   -------------------------------------------------------------------------- */
.ill {
  fill: none;
  stroke: var(--ill-line);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ill .fill { fill: var(--ill-fill); }
.ill .soft { stroke: var(--ill-line-soft); }
.ill .dash { stroke-dasharray: 3 3; }
.ill .accent { stroke: var(--ill-accent); }
.ill .accent-fill { fill: var(--ill-accent-soft); stroke: var(--ill-accent); }
.ill .tick { fill: none; stroke-linecap: butt; }
.ill .dim { stroke: var(--ill-note); stroke-width: 1; }

.ill .note,
.ill .ruler-num {
  stroke: none;
  font-family: var(--font-body);
  font-weight: 600;
}

.ill .note {
  fill: var(--ill-note);
  font-size: 8px;
  letter-spacing: 0.06em;
}

.ill .ruler-num {
  fill: var(--ill-line);
  font-size: 9px;
}

.m-note { fill: var(--ill-note); }
.m-accent { fill: var(--ill-accent); }

.logo-bg { fill: var(--accent); }
.logo-line { stroke: var(--text-on-accent); opacity: 0.8; }
.logo-node { fill: var(--text-on-accent); }

/* --------------------------------------------------------------------------
   6. Motion
   -------------------------------------------------------------------------- */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

.tool-grid .reveal:nth-child(2),
.pricing-grid .reveal:nth-child(2) {
  transition-delay: 0.06s;
}

.tool-grid .reveal:nth-child(3) {
  transition-delay: 0.12s;
}

.tool-grid .reveal:nth-child(4) {
  transition-delay: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .hero-grid {
    gap: 36px;
  }

  .tool-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .converter {
    grid-template-columns: minmax(0, 1fr);
  }

  .converter-art {
    border-left: 0;
    border-top: 1px solid var(--border);
  }

  .converter-art svg {
    max-width: 300px;
  }

  .oee,
  .calc {
    grid-template-columns: minmax(0, 1fr);
  }

  .oee-inputs,
  .calc-inputs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .oee-inputs > .tech-label,
  .calc-inputs > .tech-label {
    grid-column: 1 / -1;
  }

  .calc-inputs > .field-group:first-child {
    padding-bottom: 0;
    border-bottom: 0;
  }
}

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview {
    max-width: 560px;
  }
}

@media (max-width: 720px) {
  :root {
    --gutter: 20px;
  }

  .pricing-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Collapsed navigation: links move into the menu; the theme and language
   controls stay in the bar beside the menu button. */
@media (max-width: 1100px) {
  .nav-toggle {
    display: block;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px var(--gutter) 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    box-shadow: var(--shadow-md);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-menu a:not(.btn) {
    padding: 12px;
  }

  .nav-menu .btn {
    min-height: 44px;
    margin: 8px 0 0;
  }

  .nav-controls {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .brand-name {
    display: none;
  }
}

@media (max-width: 640px) {
  .calc-inputs > .field-group:first-child {
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
  }

  .metric-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }

  .oee-inputs,
  .calc-inputs,
  .metric-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 520px) {
  .bar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .bar-row .meter {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .tool-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview {
    padding: 16px;
  }

  .preview-fields {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .preview-arrow {
    margin: 0 auto;
    transform: rotate(90deg);
  }

  .field-unit {
    width: 46%;
  }

  output.field-value {
    font-size: 1.5rem;
  }
}