/* ==========================================================================
   KASNOV_DEV — переиспользуемые компоненты.
   Только токены из tokens.css; позиционирование — в стилях страниц.
   ========================================================================== */

/* --- Логотип ------------------------------------------------------------ */
.k-logo {
  font-family: var(--f-display);
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--c-ink);
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;
}

/* --- Наклонная плашка ---------------------------------------------------
   Параллелограмм: верхняя грань сдвинута вправо. Ширина и высота задаются
   снаружи, наклон — через --slant-plate (em) или --slant (px). */
.k-plate {
  display: inline-block;
  background: var(--c-navy);
  color: var(--c-paper);
  clip-path: polygon(var(--k-slant, var(--slant-plate)) 0, 100% 0,
                     calc(100% - var(--k-slant, var(--slant-plate))) 100%, 0 100%);
}

/* --- Кнопки -------------------------------------------------------------
   --primary: тёмно-синяя плашка, светлый текст.
   --ghost:   контур --c-steel 1px + заливка navy-line 3%, синий текст.
   Высота 65px / 53px (малая), наклон --slant. */
.k-btn {
  --k-slant: var(--slant);
  --k-h: 65px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--k-h);
  padding: 0 calc(var(--k-slant) + 46px);
  border: 0;
  font-family: var(--f-display);
  font-size: var(--fs-button);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  clip-path: polygon(var(--k-slant) 0, 100% 0, calc(100% - var(--k-slant)) 100%, 0 100%);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease);
}
.k-btn--sm { --k-h: 53px; font-size: var(--fs-nav); padding: 0 calc(var(--k-slant) + 28px); }

.k-btn--primary { background-color: var(--c-navy); color: var(--c-paper); }
.k-btn--primary:hover { background-color: var(--c-navy-line); filter: brightness(1.12); }

.k-btn--ghost {
  --k-edge: var(--c-steel);
  color: var(--c-navy);
  background: var(--c-glass);
  /* размытие фона ограничено той же clip-path, что и форма кнопки */
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
}
/* Контур — векторный (js/frame.js рисует его по фактическому размеру):
   наклонные грани сглажены на любой плотности пикселей. */
.k-btn__edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.k-btn__edge path {
  fill: none;
  stroke: var(--k-edge);
  stroke-width: var(--line);
  stroke-linejoin: miter;
  shape-rendering: geometricPrecision;
  transition: stroke var(--t-fast) var(--ease);
}
.k-btn--ghost:hover { --k-edge: var(--c-navy); }

.k-btn:focus-visible { outline: none; }
.k-btn:focus-visible::after {
  content: "";
  position: absolute;
  inset: 3px calc(var(--k-slant) - 2px);
  border: 1px dashed currentColor;
  pointer-events: none;
}
/* Кнопка без заданного адреса: выглядит как в макете, но честно неактивна. */
.k-btn[aria-disabled="true"] { cursor: default; }
.k-btn--primary[aria-disabled="true"]:hover { background-color: var(--c-navy); filter: none; }
.k-btn--ghost[aria-disabled="true"]:hover { --k-edge: var(--c-steel); }

/* --- Технические уголки -------------------------------------------------
   L-образные скобки 1px цвета --c-navy-line. */
.k-bracket {
  position: absolute;
  width: 44px;
  height: 38px;
  border: 0 solid var(--c-navy-line);
  pointer-events: none;
}
.k-bracket--tl { border-top-width: var(--line); border-left-width: var(--line); }
.k-bracket--tr { border-top-width: var(--line); border-right-width: var(--line); }
.k-bracket--bl { border-bottom-width: var(--line); border-left-width: var(--line); }
.k-bracket--br { border-bottom-width: var(--line); border-right-width: var(--line); }

/* --- Техническая рамка --------------------------------------------------
   Контур со срезанным верхним краем и вкладкой под подпись. Контур,
   уголки 2.5px и маску размытия рисует js/frame.js по одной геометрии:
   уголки лежат на контуре, размытие повторяет его форму. */
.k-frame { position: relative; }
/* Стекло лежит первым слоем: содержимое рамки должно быть позиционировано,
   иначе окажется под ним и размоется. */
.k-frame__glass {
  position: absolute;
  inset: 0;
  background: var(--c-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  pointer-events: none;
}
.k-frame__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.k-frame__line { fill: none; stroke: var(--c-steel); stroke-width: var(--line); }
.k-frame__accent {
  fill: none;
  stroke: var(--c-steel);
  stroke-width: var(--line-accent);
  stroke-linejoin: miter;
  stroke-linecap: butt;
}

/* --- Технические подписи ------------------------------------------------ */
.k-tech {
  font-family: var(--f-mono);
  font-size: var(--fs-body);
  line-height: 1;
  color: color-mix(in srgb, var(--c-ink) calc(var(--o-secondary-text) * 100%), transparent);
}
.k-tech--micro { font-size: var(--fs-micro); color: var(--c-ink); }

/* --- Соединительная линия ------------------------------------------------ */
.k-connector { position: absolute; overflow: visible; pointer-events: none; }
.k-connector polyline {
  fill: none;
  stroke: var(--c-steel);
  stroke-width: var(--line);
  vector-effect: non-scaling-stroke;
}

/* --- Служебное ------------------------------------------------------------ */
.k-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}