/* «Эскизы v2» — стили общего модуля assets/js/weld-sketch.js.
   Палитра эскизов --rs-sk-* — те же значения, что в raschety-shov.css
   (docs/brand/website.md, «Эскиз шва: цвета слоёв»); raschety-shov.css не
   меняется, пока шов не переведён на модуль. Три оттенка стали для вида
   «В объёме» — от основы --rs-sk-base светлее и темнее. Цвета в разметке
   SVG не пишутся: только классы, поэтому рисунок лёгкий и печатается теми
   же цветами. */
.ws-sketch,
.ws-svg {
  --rs-sk-base: #dce2e1;
  --rs-sk-base-hatch: #7f8c90;
  --rs-sk-bevel: #c8742a;
  --rs-sk-cap: #e3a061;
  --rs-sk-ink: var(--ink);
  --rs-sk-muted: var(--muted);
  --rs-sk-line: var(--line);
  --ws-steel-top: #eef1f1;
  --ws-steel-end: #c3cbcc;
}

.ws-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.ws-tabs {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}

.ws-tab {
  min-height: 34px;
  padding: 4px 14px;
  border: 0;
  background: var(--panel);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.ws-tab + .ws-tab {
  border-left: 1px solid var(--line);
}

.ws-tab[aria-pressed="true"] {
  background: var(--soft);
  color: var(--blue-dark);
  font-weight: 700;
}

.ws-tab:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

.ws-badge {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.ws-svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 520px;
  max-height: 460px;
  margin: 0 auto;
  font-family: Arial, Helvetica, sans-serif;
}

/* металл */
.ws-f { stroke: none; }
.ws-st { fill: var(--rs-sk-base); }
.ws-sth { stroke: var(--rs-sk-base-hatch); stroke-width: 1; }
.ws-q1 { fill: var(--ws-steel-top); }
.ws-q2 { fill: var(--rs-sk-base); }
.ws-q3 { fill: var(--ws-steel-end); }
/* шов */
.ws-w { fill: var(--rs-sk-bevel); }
.ws-c { fill: var(--rs-sk-cap); }
.ws-wh { fill: var(--rs-sk-bevel); }
.ws-whh { stroke: var(--rs-sk-cap); stroke-width: 1.2; }
.ws-p { fill: none; stroke: var(--rs-sk-cap); stroke-width: 1.2; }
.ws-wf { stroke: var(--rs-sk-bevel); stroke-width: .6; stroke-linejoin: round; }
.ws-r { fill: none; stroke: var(--rs-sk-cap); stroke-width: 1.1; stroke-linejoin: round; }
.ws-z { fill: var(--amber-soft); fill-opacity: .7; }
/* линии */
.ws-o { stroke: var(--rs-sk-ink); stroke-width: 1; stroke-linejoin: round; }
.ws-n { fill: none; }
.ws-a { fill: none; stroke: var(--blue-dark); stroke-width: 1.2; stroke-dasharray: 3 2; }
.ws-m { fill: none; stroke: var(--rs-sk-muted); stroke-width: 1; stroke-dasharray: 6 4; }
.ws-e { fill: none; stroke: var(--rs-sk-line); stroke-width: 1; }
.ws-d { fill: none; stroke: var(--rs-sk-muted); stroke-width: 1; }
.ws-ar { fill: var(--rs-sk-muted); }
/* подписи: кегль — атрибутом font-size от модуля (пересчёт от ширины
   контейнера, на экране ≥ 12 px), поэтому здесь его нет */
.ws-t { fill: var(--rs-sk-ink); }
.ws-tm { fill: var(--rs-sk-muted); }

@media print {
  .ws-tabs { display: none; }
  .ws-svg { max-height: 80mm; }
}