/* Рабочий инструмент: пыль, солнце, одна рука. Контраст предмета и фона ΔL* ≥ 30 — test/contrast.test.mjs */
:root {
  --bg: #e9e6df;
  --surface: #fbfaf7;
  --ink: #1b1f24;
  --muted: #4d5560;
  --line: #8a8f96;
  --accent: #0a5566;
  --on-accent: #ffffff;
  --warn-bg: #fbe4c8;
  --warn-ink: #5e2c00;
  --plane: #2a3038;
  --on-plane: #f6f3ec;
  --hatch: #8d97a3;
  --tile: #f6f3ec;
  --tile-cut: #f4c766;
  --tile-narrow: #ef8f7e;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}
h1, h2, p, ul, figure, fieldset, legend { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ul { list-style: none; }
a { color: var(--accent); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

.app-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 20px;
  padding-top: calc(8px + env(safe-area-inset-top));
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.app-bar h1 { font-size: 20px; line-height: 1.2; }
.langs { display: flex; gap: 2px; }
.langs a {
  display: grid; place-items: center; min-width: 44px; min-height: 44px;
  border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--muted); text-decoration: none;
}
.langs a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.app {
  display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(340px, 400px) minmax(0, 1fr);
  max-width: 1500px; margin: 0 auto; padding: 16px 20px 32px;
}
.side { display: grid; gap: 16px; min-width: 0; }
.main { display: grid; gap: 16px; min-width: 0; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 16px; min-width: 0; }
.card > h2, legend { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
legend { float: left; width: 100%; }
legend + * { clear: both; }
.lede { color: var(--muted); }
.privacy { color: var(--muted); font-size: 14px; margin-top: 6px; }

.fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.field { display: grid; gap: 4px; min-width: 0; align-content: start; }
.field label, .field .lbl { font-size: 14px; color: var(--muted); font-weight: 500; }
input { width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.stepper { display: grid; grid-template-columns: 44px minmax(44px, 1fr) 44px; gap: 4px; }
.stepper input { text-align: center; padding: 8px 2px; }
.step {
  min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg);
  font-size: 22px; font-weight: 700; line-height: 1; transition: transform .15s var(--ease);
}
.step:active { transform: scale(.92); }
.seg { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
.seg button {
  flex: 1 1 auto; min-height: 44px; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--line);
  background: var(--surface); font-weight: 600; font-size: 15px;
}
.seg button.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.seg:last-child { margin-bottom: 0; }
.seg.top { margin-top: 12px; }
.field.name { margin-top: 12px; }
.hint { font-size: 14px; color: var(--muted); margin-top: 8px; }

.hole { border-top: 1px solid var(--line); padding: 12px 0; }
.hole-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.del { min-height: 44px; padding: 4px 12px; background: none; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; }
.adds { display: flex; flex-wrap: wrap; gap: 4px; }
.adds button { flex: 1 1 auto; min-height: 44px; padding: 6px 12px; border-radius: 8px; border: 1px dashed var(--muted); background: var(--bg); font-weight: 600; font-size: 15px; }

.error { background: var(--warn-bg); color: var(--warn-ink); padding: 12px 16px; border-radius: 12px; font-weight: 600; }
.warn { background: var(--warn-bg); color: var(--warn-ink); padding: 10px 12px; border-radius: 8px; font-size: 15px; margin-top: 10px; }
.spec { font-size: 14px; color: var(--muted); margin-bottom: 10px; overflow-wrap: anywhere; }
#plan-box { min-width: 0; }
#plan { display: block; max-width: 100%; height: auto; margin: 0 auto; }
.plane { fill: var(--plane); }
.hole-fill { fill: url(#hatch); }
.hatch { stroke: var(--hatch); stroke-width: 2; }
.pc { stroke: var(--plane); stroke-width: .8; }
.pc.solid { stroke: none; }
.pc-line { fill: none; stroke: var(--plane); stroke-width: .8; }
.pc.full { fill: var(--tile); }
.pc.cut { fill: var(--tile-cut); }
.pc.narrow { fill: var(--tile-narrow); }
.edge { fill: none; stroke: var(--plane); stroke-width: 1.5; }
#plan text { text-anchor: middle; font-family: inherit; }
.pl { font-size: 12.5px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--tile); stroke-width: 3px; stroke-linejoin: round; }
.pd { font-size: 11px; fill: var(--ink); }
.hl { font-size: 12.5px; font-weight: 600; fill: var(--on-plane); paint-order: stroke; stroke: var(--plane); stroke-width: 4px; stroke-linejoin: round; }
.dim { font-size: 13px; font-weight: 600; fill: var(--ink); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; font-size: 14px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 18px; height: 14px; border: 1px solid var(--plane); }
.legend .c-full { background: var(--tile); }
.legend .c-cut { background: var(--tile-cut); }
.legend .c-narrow { background: var(--tile-narrow); }
.legend .c-hole { background: var(--plane); }
.marking { margin-top: 10px; }

.buy { display: grid; gap: 2px; margin-bottom: 14px; }
.buy .lbl { font-size: 14px; color: var(--muted); }
.buy strong { font-size: 36px; line-height: 1.1; }
.buy .box { font-size: 24px; font-weight: 700; }
.kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.kpi div { border-top: 1px solid var(--line); padding-top: 6px; }
.kpi span { display: block; font-size: 14px; color: var(--muted); }
.kpi b { font-size: 22px; }
.cuts-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cuts-table th, .cuts-table td { text-align: left; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); }
.cuts-table thead th { font-size: 14px; font-weight: 500; color: var(--muted); }
.cuts-table tbody th { font-weight: 700; }
.cuts-table td:nth-child(2) { white-space: nowrap; }
.cuts-table .is-narrow td:last-child { color: var(--warn-ink); font-weight: 600; }
.notes { display: grid; gap: 6px; font-size: 15px; padding-left: 18px; list-style: disc; }
.disclaimer { font-weight: 600; margin-top: 12px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.btn { flex: 1 1 200px; min-height: 48px; padding: 10px 16px; border-radius: 8px; font-weight: 700; border: 2px solid var(--accent); background: var(--accent); color: var(--on-accent); }
.btn.alt { background: var(--surface); color: var(--accent); }
#link-status { font-size: 14px; margin-top: 8px; }
#link-copy { margin-top: 8px; font-size: 16px; }

.tabs { display: none; }
.foot { max-width: 1500px; margin: 0 auto; padding: 0 20px 24px; font-size: 14px; color: var(--muted); }

@media (min-width: 761px) and (max-width: 1100px) and (min-height: 501px), (min-width: 761px) and (max-width: 1100px) and (pointer: fine) {
  .app { grid-template-columns: minmax(320px, 360px) minmax(0, 1fr); padding: 12px; gap: 12px; }
}

@media (max-width: 760px), (pointer: coarse) and (max-height: 500px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .app-bar { position: sticky; top: 0; z-index: 50; padding-left: 12px; padding-right: 8px; padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; }
  .app-bar h1 { font-size: 18px; }
  .app { display: block; padding: 10px; }
  .side, .main { gap: 10px; }
  .card { padding: 12px; }
  body[data-tab="data"] .main,
  body[data-tab="plan"] .side, body[data-tab="plan"] #view-count,
  body[data-tab="count"] .side, body[data-tab="count"] #view-plan { display: none; }
  .foot { padding: 0 12px 12px; }
  body:not([data-tab="count"]) .foot { display: none; }
  .tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: 1px solid var(--line);
  }
  .tabs button {
    display: grid; align-content: center; justify-items: center; gap: 1px; min-height: 60px; padding: 4px 2px;
    background: none; border: 0; border-top: 3px solid transparent; color: var(--muted); font-weight: 600; font-size: 14px;
  }
  .tabs button[aria-current="true"] { color: var(--ink); border-top-color: var(--accent); }
  .tabs small { font-size: 14px; font-weight: 700; color: var(--accent); min-height: 19px; }
}

@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff; }
  body { padding: 0; font-size: 11pt; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .side, .tabs, .langs, #view-actions { display: none !important; }
  .app, body[data-tab] .main { display: block !important; padding: 0; max-width: none; }
  body[data-tab] #view-plan, body[data-tab] #view-count { display: block !important; }
  .main { gap: 0; }
  .card { border: 0; padding: 0; margin-bottom: 6mm; background: none; }
  .app-bar { border: 0; padding: 0 0 2mm; position: static; background: none; }
  #plan { max-height: 150mm; width: auto; max-width: 100%; }
  #view-plan { break-inside: avoid; }
  .buy strong { font-size: 22pt; }
  .kpi { grid-template-columns: repeat(3, 1fr); }
  .cuts-table tr { break-inside: avoid; }
  .cuts-table th, .cuts-table td { padding: 2px 8px 2px 0; }
  .foot { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}