/* ==========================================================================
   Page chrome: back-to-top, scrollbar
   ========================================================================== */

/* --- Back to top · V3: a quiet vertical utility on the right edge, centred
   on the viewport height. Arrow + "NACH OBEN" + a hairline track that fills
   with the reading progress. No fill; colour follows the surface underneath
   (js/totop.js → [data-surface]). Hit area 44 px wide. */
.to-top {
  --progress: 0;
  --c: var(--c-ink);
  --c-hover: var(--c-tech);
  position: fixed;
  top: 50%;
  right: max(6px, calc(var(--gutter) * 0.5 - 22px));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 44px;
  padding-block: 12px;
  color: var(--c);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition:
    opacity 400ms var(--ease-out),
    transform 400ms var(--ease-out),
    color 300ms var(--ease-out);
  --focus: currentColor;
}
.to-top[data-surface='dark'],
.to-top[data-surface='blue'] {
  --c: var(--c-white);
  --c-hover: var(--c-blue-tint);
}
.to-top[data-surface='image'] {
  --c: var(--c-white);
  --c-hover: var(--c-blue-tint);
  background: rgb(0 0 0 / 0.42);
}
.to-top.is-visible {
  opacity: 1;
  transform: translate(0, -50%);
  pointer-events: auto;
}
.to-top:hover,
.to-top:focus-visible {
  color: var(--c-hover);
}
.to-top:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
/* V4.1: the supplied arrow (sageata-style.svg) turned to point up */
.to-top__arrow {
  --sg-size: 15px;
}
.to-top:hover .to-top__arrow,
.to-top:focus-visible .to-top__arrow {
  transform: translateY(-3px) rotate(var(--rot));
}
.to-top__label {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* reads bottom → top, like a book spine */
  font-family: var(--f-text);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
/* track: hairline in the surface tone, copper fill = reading progress,
   ending in a cut on the site diagonal */
.to-top__track {
  position: relative;
  width: 1px;
  height: 64px;
  background: color-mix(in srgb, currentColor 32%, transparent);
}
.to-top__progress {
  position: absolute;
  inset: 0;
  width: 2px;
  margin-left: -0.5px;
  background: var(--c-precision);
  transform: scaleY(var(--progress));
  transform-origin: top;
}
.to-top[data-surface='blue'] .to-top__progress,
.to-top[data-surface='image'] .to-top__progress {
  background: #fff;
}
.menu-open .to-top,
.menu-open .wa {
  display: none;
}

/* --- WhatsApp quick contact (V4) — one coordinated floating system with
   NACH OBEN: WhatsApp lower right, NACH OBEN vertically centred on the right
   edge (desktop) / stacked above WhatsApp (phones). Never overlapping. */
.wa {
  position: fixed;
  right: max(14px, calc(var(--gutter) * 0.5 - 24px));
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition:
    opacity var(--t-mid) var(--ease-out),
    transform var(--t-mid) var(--ease-out);
}
.wa.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.wa__btn {
  order: 2;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 13px;
  gap: 0;
  color: #fff;
  background: var(--c-black);
  border: 1px solid rgb(255 255 255 / 0.22);
  box-shadow: 0 10px 26px -12px rgb(0 0 0 / 0.6);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
  transition:
    background-color var(--t-mid) var(--ease-out),
    gap var(--t-mid) var(--ease-out);
}
.wa__icon {
  flex: none;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.wa__handset {
  fill: currentColor;
  stroke: none;
}
.wa__label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: max-width var(--t-mid) var(--ease-out);
}
.wa__btn:hover,
.wa__btn:focus-visible,
.wa__btn[aria-expanded='true'] {
  gap: 10px;
  background: #128c4a; /* WhatsApp-adjacent green, white text 4.6:1 */
}
.wa__btn:hover .wa__label,
.wa__btn:focus-visible .wa__label,
.wa__btn[aria-expanded='true'] .wa__label {
  max-width: 120px;
}
.wa__btn:focus-visible {
  outline: 2px solid var(--c-precision);
  outline-offset: 3px;
}
.wa__panel {
  order: 1;
  width: min(300px, calc(100vw - 32px));
  padding: 18px 18px 10px;
  background: var(--c-white);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  box-shadow: 0 20px 50px -20px rgb(0 0 0 / 0.45);
  animation: fade-in 200ms var(--ease-out);
}
.wa__panel[hidden] {
  display: none;
}
.wa__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 0.875rem;
  text-transform: uppercase;
}
.wa__note {
  margin: 8px 0 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--c-steel-500);
}
.wa__link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  align-items: center;
  border-top: 1px solid var(--c-line);
  font-size: 0.875rem;
  font-weight: 600;
}
.wa__link span:first-child {
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-steel-500);
}
.wa__link:hover span:last-child {
  color: var(--c-precision);
}

/* phones (V4): a compact 44 px square directly above the WhatsApp button —
   same footprint and chamfer, so the two read as one floating system and the
   vertical tab no longer covers running text */
@media (max-width: 767px) {
  .to-top {
    top: auto;
    right: 14px;
    bottom: calc(18px + 48px + 10px + env(safe-area-inset-bottom));
    width: 48px;
    height: 48px;
    padding: 0;
    gap: 0;
    justify-content: center;
    color: #fff;
    background: var(--c-black);
    border: 1px solid rgb(255 255 255 / 0.22);
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
    transform: translate(0, 10px);
  }
  .to-top.is-visible {
    transform: none;
  }
  .to-top[data-surface='image'] {
    background: var(--c-black);
  }
  .to-top__label,
  .to-top__track {
    display: none;
  }
  .wa {
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top.is-visible {
    transition: opacity 1ms;
  }
}

/* --- Scrollbar: graphite track, Technical-Blue thumb.
   Standard properties (Chrome 121+, Firefox) win where supported; the WebKit
   pseudo-elements add the copper hover state for Safari. Native scrolling. */
html {
  scrollbar-color: var(--c-tech) var(--c-graphite);
  scrollbar-width: thin;
}
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  ::-webkit-scrollbar-track {
    background: var(--c-graphite);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--c-tech);
    border: 2px solid var(--c-graphite);
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active {
    background: var(--c-copper);
  }
}