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

/* ── Tokens ── */
:root {
  --topbar-h: 42px;
  --ruler-thick: 80px;      /* wider ruler strip */

  /* Light theme */
  --bg:         #f5f5f5;
  --surface:    #ffffff;
  --border:     #e0e0e0;
  --text:        #1a1a1a;
  --muted:       #6b7280;
  --blue:        #ff6154;
  --blue-lt:     #ffece9;
  --tick:        #374151;
  --tick-dim:    #9ca3af;
  --ruler-bg:    #ffffff;
  --ruler-border:#e0e0e0;
  --calib-bg:    #f0f6ff;
  --calib-border:#bfdbfe;
}

/* Dark theme */
body.theme-dark {
  --bg:          #141414;
  --surface:     #1e1e1e;
  --border:      #2e2e2e;
  --text:        #f0f0f0;
  --muted:       #9ca3af;
  --blue:        #ff6154;
  --blue-lt:     #3a1f1c;
  --tick:        #d1d5db;
  --tick-dim:    #4b5563;
  --ruler-bg:    #1e1e1e;
  --ruler-border:#2e2e2e;
  --calib-bg:    #1a2742;
  --calib-border:#2563eb;
}

html, body {
  height: 100%;
  overflow: hidden;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ── Controls row — in-flow, centered, sits above the H1 ── */
.toolbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
}

/* Toolbar buttons */
.tbtn {
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s;
  height: 40px;
  display: flex;
  align-items: center;
}
.tbtn:hover  { background: var(--blue-lt); border-color: var(--blue); color: var(--blue); }
.tbtn.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Direction button group — segmented toggle */
.dir-group {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 9px;
  overflow: hidden;
}
.dir-group .tbtn {
  border: none;
  border-right: 1px solid var(--border);
  border-radius: 0;
  padding: 8px 20px;
}
.dir-group .tbtn:last-child { border-right: none; }
.dir-group .tbtn:hover  { background: var(--blue-lt); color: var(--blue); }
.dir-group .tbtn.active { background: var(--blue); color: #fff; }

/* Status banner — full-width, replaces the old small toolbar badge */
.status-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: .88rem;
  font-weight: 600;
  margin-bottom: 24px;
  border: 1px solid transparent;
}
.status-banner-icon { font-size: 1.1rem; flex-shrink: 0; }
.status-banner-success {
  background: var(--success-bg, #eafaf0);
  color: var(--success-text, #1e7f43);
  border-color: rgba(30,127,67,.15);
}
.status-banner-info {
  background: var(--blue-lt);
  color: var(--blue);
  border-color: rgba(255,97,84,.2);
}
.status-banner-warning {
  background: #fef9c3;
  color: #92400e;
  border-color: rgba(146,64,14,.15);
}
body.theme-dark .status-banner-success { background: #113322; color: #4ade80; }
body.theme-dark .status-banner-warning { background: #3a3111; color: #fde68a; }

/* ── Calibration modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 17, 21, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  padding: 16px;
}
.modal-overlay[hidden] { display: none; }

.modal-card {
  background: var(--surface);
  color: var(--text);
  width: min(480px, 100%);
  max-height: min(640px, 90vh);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.modal-card-header h2 { font-size: 1.15rem; font-weight: 800; }
.modal-close {
  background: none; border: none;
  font-size: 1.4rem; line-height: 1;
  color: var(--muted); cursor: pointer;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }

.modal-tabs-row {
  display: flex;
  gap: 2px;
  padding: 10px 20px 0;
  flex-shrink: 0;
}
.mtab {
  flex: 1;
  padding: 8px 6px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.mtab.active { color: var(--text); border-bottom-color: var(--blue); }

.modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.mtab-panel p { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-bottom: 12px; }
.hidden { display: none !important; }

.input-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.input-row input[type="number"] {
  flex: 1; min-width: 100px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px;
  font-size: .9rem; background: var(--bg); color: var(--text);
  outline: none;
}
.input-row input[type="number"]:focus { border-color: var(--blue); }
.input-row input[type="range"] { flex:1; min-width:100px; accent-color: var(--blue); }
.input-row label, .input-row span { font-size: .8rem; color: var(--muted); }

.btn-primary-block {
  width: 100%;
  padding: 10px 14px;
  background: var(--text);
  color: var(--bg);
  border: none; border-radius: 10px;
  font-size: .9rem; font-weight: 700; cursor: pointer;
}
.btn-primary-block:hover { opacity: .88; }
.feedback { font-size: .8rem; color: #059669; margin-top: 8px; min-height: 16px; }

.card-stage {
  background: var(--bg); border: 2px dashed var(--border);
  border-radius: 8px; padding: 14px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 10px;
}
.card-guide {
  background: var(--blue); height: 46px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: width .07s; min-width: 50px;
}
.card-guide span { color:#fff; font-size:.7rem; font-weight:600; white-space:nowrap; padding: 0 8px; }

/* Device list — grouped, clickable rows (Device tab) */
.device-list {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 8px;
}
.device-group-header {
  background: var(--bg);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border);
}
.device-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 14px;
  border: none;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .85rem;
  text-align: left;
  cursor: pointer;
}
.device-row:last-child { border-bottom: none; }
.device-row:hover { background: var(--blue-lt); }
.device-ppi {
  color: var(--muted);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── Ruler canvas — edge pinned ── */
#ruler-canvas {
  position: fixed;
  z-index: 100;
  display: block;
  background: var(--ruler-bg);
  box-shadow: 2px 0 8px rgba(0,0,0,.08);
}

/* ── Content area — scrollable region beside/below ruler ── */
.content-area {
  position: fixed;
  top: var(--offset-top, 0px);
  left: var(--offset-left, 80px);
  right: var(--offset-right, 0px);
  bottom: var(--offset-bottom, 0px);
  overflow-y: auto;
  z-index: 10;
  background: var(--bg);
  transition: top .18s ease, left .18s ease, right .18s ease, bottom .18s ease;
}

/* Centred inner column — generous side padding */
.content-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

/* ── Coordinate tooltip ── */
.coord-tip {
  position: fixed;
  z-index: 300;
  background: #111;
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 5px;
  pointer-events: none;
  display: none;
  white-space: nowrap;
}

.hero-section {
  margin-bottom: 28px;
}
.hero-section h1 {
  font-size: clamp(1.25rem, 2.5vw, 1.7rem);
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.3;
}
.hero-sub { font-size: .93rem; color: var(--muted); line-height: 1.6; }

/* Real crawlable links between unit pages — not JS-only toggles */
.unit-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: .85rem;
}
.unit-links-label { color: var(--muted); }
.unit-link-pill {
  color: var(--blue);
  text-decoration: none;
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-weight: 600;
  cursor: default;
}
a.unit-link-pill { cursor: pointer; }
a.unit-link-pill:hover { background: var(--blue-lt); border-color: var(--blue); }
.unit-link-pill.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

/* Toolbar: allow wrapping on narrow screens instead of overflowing */
@media (max-width: 720px) {
  html, body {
    font-size: 14px;
    overflow-x: hidden; /* guard against any accidental horizontal scroll */
  }
  .toolbar-inline {
    gap: 8px;
    row-gap: 10px;
    margin-bottom: 18px;
  }
  .tbtn {
    padding: 10px 16px;
    font-size: .88rem;
    height: 48px;          /* generous real tap target */
    min-width: 48px;
  }
  .dir-group .tbtn { padding: 10px 18px; }
  .status-banner { font-size: .8rem; padding: 12px 14px; }

  /* Popup opens a separate window — not a useful mobile pattern */
  #btn-popup { display: none; }

  .content-area {
    /* NOTE: do NOT force left/right to 0 here — that would override the
       ruler's own offset (--offset-left/--offset-right) and cause page
       text to render behind the ruler strip, which is exactly the bug
       this used to cause. The offset is already correctly responsive
       via THICK shrinking to 44px on mobile in ruler.js. */
    padding-left: 6px; /* small safety margin beyond the ruler's edge */
    box-sizing: border-box;
  }
  .content-inner { padding: 20px 14px 56px; max-width: 100%; }
  .info-card { padding: 14px 16px; }
  .modal-card { max-height: 85vh; }
  .modal-card-header { padding: 14px 16px 10px; }
  .modal-tabs-row { padding: 8px 16px 0; }
  .modal-body { padding: 12px 16px 16px; }
}

.info-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
  margin-bottom: 14px;
}
.info-card h2 { font-size: .97rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.info-card p  { font-size: .88rem; color: var(--muted); line-height: 1.7; }

.steps { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
.steps li { font-size: .88rem; line-height: 1.65; color: var(--text); }

.section-list { padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.section-list li { font-size: .88rem; line-height: 1.65; color: var(--muted); }

/* Definition list for units */
.unit-dl { display: flex; flex-direction: column; gap: 10px; }
.unit-dl dt { font-weight: 700; font-size: .88rem; color: var(--blue); }
.unit-dl dd { font-size: .85rem; color: var(--muted); line-height: 1.6; margin-left: 0; padding-left: 12px; border-left: 2px solid var(--border); margin-top: 2px; }

/* ── FAQ section ── */
.faq-section { margin-bottom: 14px; }
.faq-section h2 { font-size: .97rem; font-weight: 700; margin-bottom: 12px; color: var(--text); }

.faq {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  overflow: hidden;
  background: var(--surface);
}
.faq summary {
  padding: 14px 16px;
  font-weight: 500;
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  color: var(--text);
  gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq-icon {
  width: 20px; height: 20px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.faq-icon::after {
  content: '';
  display: block;
  width: 8px; height: 8px;
  background: var(--muted);
  clip-path: polygon(50% 60%, 0% 20%, 100% 20%);
  transition: transform .2s;
}
.faq[open] .faq-icon::after { transform: rotate(180deg); }
.faq p {
  padding: 0 16px 14px;
  font-size: .87rem;
  color: var(--muted);
  line-height: 1.7;
  border-top: 1px solid var(--border);
  padding-top: 10px;
  background: var(--surface);
}

.calib-note { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* ── Fullscreen ── */
:fullscreen body, :-webkit-full-screen body { overflow: hidden; }

/* ── Site footer ── */
.site-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin-bottom: 16px;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: .85rem;
}
.footer-links a:hover { color: var(--blue); }

.lang-switcher { position: relative; display: inline-block; margin-bottom: 16px; }
.lang-switcher-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: .82rem;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lang-switcher-btn:hover { border-color: var(--blue); }
.lang-chevron { font-size: .7rem; color: var(--muted); }

.lang-switcher-list {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  list-style: none;
  padding: 6px;
  width: 220px;
  max-height: 300px;
  overflow-y: auto;
  z-index: 50;
  margin: 0;
}
.lang-switcher-list.hidden { display: none; }
.lang-switcher-list li { border-radius: 6px; }
.lang-switcher-list a,
.lang-switcher-list li.lang-disabled {
  display: block;
  padding: 8px 10px;
  font-size: .85rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 6px;
}
.lang-switcher-list a:hover { background: var(--blue-lt); }
.lang-switcher-list li[aria-selected="true"] a { color: var(--blue); font-weight: 700; }
.lang-switcher-list li.lang-disabled {
  color: var(--muted);
  cursor: not-allowed;
  opacity: .55;
}

.footer-copy { color: var(--muted); font-size: .8rem; }