/*
  Zweck: Bearbeiten-Modus-Hinweis, Favoriten-Rail und restliche Komponenten.
  Zielpfad: /home/mckiede/public_html/design/components-edit.css
  Verantwortlich: mckie-Portal
  Abhängigkeit: tokens.css, base.css; Ladereihenfolge über index.html (Kaskade).
*/

/* Dezenter Hinweis, dass der Bearbeiten-Modus aktiv ist. */
body.is-edit-mode .main-console {
  outline: var(--segment-line) solid color-mix(in srgb, var(--orange) 45%, transparent);
  outline-offset: -2px;
}

/* Favoriten in der linken Rail (3+3, Desktop) — nutzt die vorhandene rail-button-Optik. */
.rail-fav {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.rail-fav[hidden] {
  display: none;
}

/* Sind Favoriten in der Rail, verschwinden Start/Module. */
.side-rail.is-rail-favorites [data-start-toggle],
.side-rail.is-rail-favorites [data-module-toggle] {
  display: none;
}

/* Lange Favoriten-Titel in der schmalen Rail kürzen. */
.rail-fav-btn .rail-fav-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nicht-verfügbarer Favorit in der Rail: durchgestrichen, nicht klickbar wirkend. */
.rail-fav-btn.rail-fav-unavailable {
  opacity: 0.6;
  cursor: not-allowed;
}

.rail-fav-btn.rail-fav-unavailable .rail-fav-label {
  text-decoration: line-through;
}

.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
  min-height: 0;
  overflow: visible;
}

/* Impressum: gleiche Cap-Logik; Body mit Umbruch (ResizeObserver in render.js). */
.legal-card.segment-link {
  align-items: stretch;
  min-height: auto;
  cursor: default;
  pointer-events: none;
}

.legal-card.segment-link .segment-link__body {
  align-self: stretch;
  justify-content: flex-start;
}

.legal-card.segment-link .segment-link__body h3 {
  position: relative;
  z-index: 1;
  margin: 0 0 0.75rem;
  color: var(--peach);
  font-size: 1.15rem;
  line-height: 1.2;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  hyphens: auto;
  text-transform: uppercase;
}

.legal-card.segment-link .segment-link__body p {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
}

.legal-card.segment-link:focus-within {
  outline: 0;
  box-shadow:
    0 0 0 var(--segment-line) color-mix(in srgb, var(--green) 54%, transparent),
    inset 0 -1.2rem 2.4rem var(--wash-black-18),
    0 0 1.35rem color-mix(in srgb, var(--green) 22%, transparent);
}

.legal-card.segment-link a {
  pointer-events: auto;
  cursor: pointer;
  color: var(--peach);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.legal-card.segment-link a:hover,
.legal-card.segment-link a:focus-visible {
  color: color-mix(in srgb, var(--green) 28%, var(--peach));
  text-shadow: 0 0 0.65rem color-mix(in srgb, var(--green) 30%, transparent);
}

.loading-card {
  padding: 1rem;
  color: var(--muted);
  background: var(--panel-soft);
  border: 1px solid var(--wash-white-12);
  border-radius: var(--radius-lg);
}

.loading-card.error {
  border-color: var(--red);
  color: var(--red);
}

.footer-button {
  position: relative;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: var(--radius-pill);
  clip-path: none;
  background: var(--wash-primary-12);
  color: var(--peach);
  cursor: pointer;
  font-weight: 900;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow:
    inset 0 0 0 var(--segment-line-thin) var(--wash-frame-34),
    inset 0.28rem 0 0 var(--wash-primary-24);
}

.footer-button::before {
  content: "";
  position: absolute;
  top: 0.28rem;
  left: 0.65rem;
  width: min(42%, var(--segment-guide-short));
  height: var(--segment-line-thin);
  background: linear-gradient(90deg, var(--orange), transparent);
  border-radius: var(--radius-pill);
}

.footer-button:hover,
.footer-button:focus-visible {
  background: var(--wash-primary-22);
}

/*
  Console block frames (mobile / tablet only)
  Solid = content panels; bracket = control matrix (Start/Module + tiles + sensor).
*/
@media (max-width: 1180px) {
  .command-panel-matrix.console-frame-bracket-red {
    display: flex;
    flex-direction: column;
    gap: var(--console-matrix-gap);
    padding-block: var(--console-matrix-gap);
    padding-inline: var(--console-bracket-inset);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--red) 10%, transparent), transparent 42%),
      var(--console-bg);
    box-shadow:
      inset var(--segment-rail-strong) 0 0 var(--red),
      inset calc(-1 * var(--segment-rail-strong)) 0 0 var(--red),
      inset 0 0 0 var(--segment-line-thin) color-mix(in srgb, var(--red) 34%, transparent);
  }

  .command-panel-matrix {
    align-self: start;
    height: auto;
  }

  .command-panel-matrix .side-rail {
    width: 100%;
    gap: var(--console-matrix-gap);
    padding: 0;
    margin: 0;
    border: 0;
  }

  .command-panel-matrix .module-rail {
    flex: 0 0 auto;
    gap: var(--console-matrix-gap);
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }

  .command-panel-matrix .module-buttons {
    gap: var(--console-matrix-gap);
  }

  .main-console.console-frame-solid-orange {
    padding: var(--console-panel-inset);
  }

  .main-console .status-strip {
    min-height: 3.45rem;
  }

  .main-console.is-sensor-active .status-strip {
    min-height: 3.45rem;
  }
}

@media (max-width: 680px) {
  .command-header.console-frame-solid-orange,
  .main-console.console-frame-solid-orange {
    border: var(--console-seam) solid var(--console-frame);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 var(--segment-line-thin) var(--segment-muted);
  }

  .command-header.console-frame-solid-orange {
    box-shadow: inset 0 0 0 var(--segment-line-thin) var(--segment-muted);
  }

  .command-footer.console-frame-solid-violet {
    border: var(--console-seam) solid var(--violet);
    border-radius: var(--radius-lg);
    box-shadow:
      inset 0 0 0 var(--segment-line-thin) color-mix(in srgb, var(--violet) 40%, transparent),
      inset 0 0 0 var(--segment-line) color-mix(in srgb, var(--violet) 22%, transparent);
  }
}

@media (min-width: 681px) and (max-width: 1180px) {
  .command-header.console-frame-solid-orange,
  .command-footer.console-frame-solid-violet {
    border: 0;
    box-shadow: none;
    border-radius: var(--radius-lg);
  }

  .command-panel-matrix .side-rail {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .main-console.console-frame-solid-orange {
    border: var(--console-seam) solid var(--console-frame);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 0 0 var(--segment-line-thin) var(--segment-muted);
    padding: var(--console-panel-inset);
  }
}

/* ── GPU hints for animated elements ──────────────────────────────────────── */
/* status-line-pulse / status-text-pulse animate color/box-shadow (not transform).
   will-change: opacity is the best we can do here without a structural refactor.
   TODO: refactor status-line-pulse to opacity-based animation on a separate layer
   for full compositor offloading (→ eliminates scroll jank on mobile completely). */
.status-strip::after,
.status-strip h2 {
  will-change: opacity;
}