/* ==========================================================================
   Utility templates  (pages/utility.html)
   404 · status · thank you · cookie consent · maintenance · legal
   ========================================================================== */

/* Template index (sticky) ------------------------------------------------ */

.ut-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px var(--w-gutter);
  border-bottom: 1px solid var(--w-line);
  background: rgba(10, 13, 16, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ut-nav__title {
  align-self: center;
  margin-right: 12px;
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

.ut-nav__link {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--w-line-2);
  border-radius: 999px;
  color: var(--w-text);
  font: 13px var(--w-sans);
}

.ut-nav__link:hover {
  background: var(--w-surface-2);
  color: var(--w-text);
}

/* Shared section frame ---------------------------------------------------- */

.ut-section {
  padding: 80px var(--w-gutter);
  border-bottom: 1px solid var(--w-line);
}

.ut-kicker {
  margin-bottom: 20px;
  font: 13px var(--w-mono);
  color: var(--w-text-3);
}

.ut-lead {
  max-width: 44ch;
  font: 18px/1.6 var(--w-sans);
  color: var(--w-text-2);
}

/* 01 · 404 ---------------------------------------------------------------- */

.ut-404 {
  display: flex;
  align-items: center;
  min-height: calc(80vh + 160px);
}

.ut-404__inner {
  width: 100%;
}

.ut-404__title {
  max-width: 14ch;
  font: 300 clamp(48px, 7vw, 108px)/.94 var(--w-sans);
  letter-spacing: -.045em;
}

.ut-404__lead {
  margin: 28px 0 36px;
}

/* 02 · Status page -------------------------------------------------------- */

.ut-status {
  max-width: 960px;
}

.ut-status__eyebrow {
  margin-bottom: 16px;
}

.ut-status__banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid rgba(76, 195, 138, .4);
  border-radius: 8px;
  background: rgba(76, 195, 138, .08);
}

.ut-status__banner-dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--w-ok);
}

.ut-status__banner-title {
  font: 400 24px var(--w-sans);
}

.ut-status__banner-meta {
  margin-top: 4px;
  font: 13px var(--w-mono);
  color: var(--w-text-2);
}

.ut-services {
  margin-bottom: 40px;
  border-top: 1px solid var(--w-line-2);
}

.ut-services__item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--w-line);
  font: 15px var(--w-sans);
}

/* State label with a round (ok) or square (degraded) marker */
.ut-services__state {
  --state: var(--w-ok);
  display: flex;
  align-items: center;
  gap: 8px;
  font: 13px var(--w-mono);
  color: var(--state);
}

.ut-services__state::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--state);
}

.ut-services__state--degraded {
  --state: var(--w-warn);
}

.ut-services__state--degraded::before {
  border-radius: 0;
}

.ut-status__subhead {
  margin-bottom: 16px;
  font: 400 12px var(--w-mono);
  color: var(--w-text-3);
}

.ut-incident {
  padding: 20px;
  border: 1px solid var(--w-line-2);
  border-radius: 8px;
}

.ut-incident__title {
  margin-bottom: 14px;
  font: 500 16px var(--w-sans);
}

.ut-incident__log {
  display: grid;
  gap: 10px;
  font: 14px/1.5 var(--w-sans);
  color: var(--w-text-2);
}

.ut-incident__t {
  font-family: var(--w-mono);
  color: var(--w-text);
}

.ut-incident__t--resolved {
  color: var(--w-action);
}

/* 03 · Thank you ---------------------------------------------------------- */

.ut-thanks {
  padding-block: 96px;
}

.ut-thanks__inner {
  max-width: 760px;
}

.ut-thanks__received {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  font: 13px var(--w-mono);
  color: var(--w-action);
}

.ut-thanks__check {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--w-action);
  border-radius: 50%;
  font: 600 10px var(--w-sans);
}

.ut-thanks__title {
  margin-bottom: 20px;
  font: 300 clamp(40px, 5vw, 72px)/.98 var(--w-sans);
  letter-spacing: -.04em;
}

.ut-thanks__lead {
  max-width: none;
  margin-bottom: 28px;
}

.ut-thanks__ref {
  font-family: var(--w-mono);
  color: var(--w-text);
}

.ut-thanks__note {
  font: 15px/1.6 var(--w-sans);
  color: var(--w-text-2);
}

/* 04 · Cookie consent ----------------------------------------------------- */

.ut-cookies {
  position: relative;
  min-height: 720px;
  background: repeating-linear-gradient(135deg, #0E1317 0 12px, #0B1014 12px 24px);
}

.consent {
  position: absolute;
  left: 50%;
  bottom: 40px;
  width: min(640px, calc(100% - 40px));
  padding: 28px;
  transform: translateX(-50%);
  border: 1px solid var(--w-line-2);
  border-radius: 8px;
  background: var(--w-surface-1);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.consent__title {
  margin-bottom: 10px;
  font: 500 20px var(--w-sans);
}

.consent__text {
  margin-bottom: 20px;
  font: 15px/1.6 var(--w-sans);
  color: var(--w-text-2);
}

.consent__options {
  display: grid;
  gap: 4px;
  margin-bottom: 20px;
}

.consent__option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--w-line);
  background: none;
  color: var(--w-text);
  font: 15px var(--w-sans);
  text-align: left;
}

.consent__sub {
  font: 12px var(--w-mono);
  color: var(--w-text-3);
}

/* Toggle track + knob; state comes from the parent's aria-checked */
.switch {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: var(--w-surface-3);
}

.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--w-text-2);
  transition: transform 160ms;
}

[aria-checked="true"] > .switch {
  background: var(--w-action);
}

[aria-checked="true"] > .switch::after {
  background: var(--w-on-action);
  transform: translateX(18px);
}

.consent__option:disabled {
  cursor: default;
}

.consent__option:disabled > .switch {
  opacity: .6;
}

.consent__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.consent__foot {
  margin-top: 14px;
  font: 12px/1.5 var(--w-sans);
  color: var(--w-text-3);
}

/* 05 · Maintenance -------------------------------------------------------- */

.ut-maint {
  display: flex;
  align-items: center;
  min-height: calc(70vh + 160px);
}

.ut-maint__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 40px 80px;
  align-items: end;
  width: 100%;
}

.ut-maint__title {
  font: 300 clamp(44px, 6vw, 92px)/.95 var(--w-sans);
  letter-spacing: -.045em;
}

.ut-maint__lead {
  margin-top: 24px;
}

.ut-maint__row {
  display: flex;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid var(--w-line-2);
  border-radius: 4px;
  font: 14px var(--w-mono);
}

.ut-maint__hotline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-radius: 4px;
  background: var(--w-emergency);
  color: #fff;
  font: 500 15px var(--w-sans);
}

.ut-maint__hotline:hover {
  color: #fff;
}

/* 06 · Legal (audit theme) ------------------------------------------------ */

.ut-legal {
  border-bottom: 0;
  background: var(--w-canvas);
  color: var(--w-text);
}

.ut-legal__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 48px;
}

.ut-legal__nav {
  display: grid;
  gap: 8px;
  align-content: start;
  font: 14px var(--w-sans);
}

.ut-legal__nav-title {
  margin-bottom: 6px;
}

.ut-legal__nav a {
  color: var(--w-text-2);
}

.ut-legal__nav a[aria-current] {
  color: var(--w-action);
}

.ut-legal__article {
  grid-column: span 2;
  max-width: 68ch;
  font: 16px/1.7 var(--w-sans);
  color: var(--w-text-2);
}

.ut-legal__title {
  margin-bottom: 8px;
  font: 300 44px/1.05 var(--w-sans);
  letter-spacing: -.03em;
  color: var(--w-text);
}

.ut-legal__article h3 {
  margin-bottom: 8px;
  font: 500 18px var(--w-sans);
  color: var(--w-text);
}

.ut-legal__article p {
  margin-bottom: 24px;
}

.ut-legal__article p:last-child {
  margin-bottom: 0;
}

.ut-legal__article > .ut-legal__updated {
  margin-bottom: 32px;
}