/* ─────────────────────────────────────────────────────────────────────────
   View switch — between an object's registered views (METIS-pub#375)

   Two controls and the frame one of them sits in:

     .view-switch               shared base: a quiet icon-only link
     .view-switch--tab          G3: a grey tab hanging from the top edge of
                                .detail-main, gear only, leading to the
                                object's configuration view
     .view-switch--notch        X2: a round close set into the configuration
                                frame's top border, opposite the legend
     .view-switch__icon         the sprite icon inside either
     .config-page               the configuration page's content column
     .config-frame              the grey ruled frame configuration renders in
     .config-frame__legend      the "⚙ Configuration" pill in the top border
     .config-frame__header/__kind/__name/__meta/__gate

   Platform tier, not an app's: two object kinds (holon, person) use it.
   Colours are the --color-config-* tokens (tokens/semantic.css), which derive
   from the surface and text tokens. No literal colour, size, radius, shadow
   or duration.
   ───────────────────────────────────────────────────────────────────────── */

@layer components {
  .view-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-config-ink);
    background: var(--color-config-ground);
    border: 1px solid var(--color-config-frame);
    text-decoration: none;
    transition: height var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
  }

  .view-switch:hover {
    color: var(--color-text);
    border-color: var(--color-accent);
  }

  .view-switch__icon {
    width: var(--space-4);
    height: var(--space-4);
    fill: none;
    stroke: currentColor;
    flex: none;
  }

  /* ── G3: the hanging tab ─────────────────────────────────────────── */
  .detail-main:has(> .view-switch--tab) {
    position: relative;
  }

  .view-switch--tab {
    position: absolute;
    top: 0;
    right: var(--space-4);
    z-index: 1;
    width: var(--space-8);
    height: var(--space-8);
    align-items: flex-end;
    padding-bottom: var(--space-2);
    border-top: none;
    border-radius: var(--radius-md);
    /* Hangs from the edge: square where it meets it. */
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  .view-switch--tab:hover,
  .view-switch--tab:focus-visible {
    height: calc(var(--space-8) + var(--space-1));
  }

  /* So a long name never runs under the tab. */
  .view-switch--tab ~ .detail-header {
    padding-right: calc(var(--space-8) + var(--space-4));
  }

  /* ── The configuration frame ─────────────────────────────────────── */
  .config-page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-4);
  }

  .config-frame {
    position: relative;
    background: var(--color-config-ground);
    border: 1px solid var(--color-config-frame);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6) var(--space-6);
  }

  .config-frame__legend {
    position: absolute;
    top: 0;
    left: var(--space-6);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--color-config-ground);
    border: 1px solid var(--color-config-frame);
    border-radius: var(--radius-full);
    color: var(--color-config-ink);
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  /* ── X2: the close, notched into the top border ──────────────────── */
  .view-switch--notch {
    position: absolute;
    top: 0;
    right: var(--space-6);
    transform: translateY(-50%);
    width: var(--space-8);
    height: var(--space-8);
    background: var(--color-surface);
    border-radius: var(--radius-full);
  }

  .config-frame__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
  }

  .config-frame__kind {
    color: var(--color-config-ink);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }

  .config-frame__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--color-text);
  }

  .config-frame__meta,
  .config-frame__gate {
    margin: 0;
  }

  .config-frame__gate {
    color: var(--color-config-ink);
    font-size: var(--text-sm);
  }

  /* Section headings read as structure in configuration, not as content. */
  .config-frame h2 {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-config-ink);
  }
}