/* Case file layout. One renderer for every case; sections render only when they have content.
   Desktop: sticky section nav beside the body. Mobile: header, horizontal section pills, body. */

.case {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "head"
    "nav"
    "body";
  padding-block: var(--space-5) var(--space-6);
}

.case__head { grid-area: head; }
.case__nav { grid-area: nav; }
.case__body { grid-area: body; min-width: 0; }

@media (min-width: 64rem) {
  .case {
    grid-template-columns: 14rem minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "nav body";
    column-gap: var(--space-7);
    align-items: start;
  }

  .case__nav {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
  }
}

/* ---- header: the case file cover --------------------------------------------------- */

.case__head {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--tint-active), transparent 40%),
    linear-gradient(180deg, var(--color-surface-elevated), var(--color-surface));
  box-shadow: var(--shadow-md);
}

.case__head::before {
  content: "";
  position: absolute;
  inset: var(--space-3);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  pointer-events: none;
}

.case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.case__id { color: var(--color-accent-active); letter-spacing: var(--tracking-wider); font-weight: 600; }
.case__category { text-decoration: none; padding: 0.1em 0.5em; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); }
.case__type { text-transform: none; letter-spacing: 0; color: var(--color-text-muted); }

.case__title { font-size: var(--text-3xl); margin-bottom: var(--space-3); }
.case__summary { max-width: var(--measure); font-size: var(--text-md); margin-bottom: var(--space-4); }

.case__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--space-3) var(--space-5);
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px dashed var(--color-border);
  font-size: var(--text-sm);
}

.case__facts div { display: grid; gap: var(--space-1); }
.case__facts dt { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-text-muted); }
.case__facts dd { margin: 0; color: var(--color-text-secondary); }
.case__facts dd.cluster { gap: var(--space-1); }

/* ---- section navigation ------------------------------------------------------------ */

.case__nav ol {
  display: flex;
  gap: var(--space-1);
  margin: 0;
  padding: 0 0 var(--space-1);
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}

.case__nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.case__nav a:hover,
.case__nav a:focus-visible { border-color: var(--color-accent-active); color: var(--color-text-primary); }
.case__nav a .mono { color: var(--color-accent-active); font-size: var(--text-xs); }

@media (min-width: 64rem) {
  .case__nav ol { flex-direction: column; gap: 0; overflow: visible; }

  .case__nav a {
    width: 100%;
    border: 0;
    border-left: 2px solid var(--color-border);
    border-radius: 0;
    background: transparent;
    padding-block: var(--space-2);
  }

  .case__nav a:hover,
  .case__nav a:focus-visible { border-left-color: var(--color-accent-active); background: var(--tint-muted); }
}

/* ---- body ---------------------------------------------------------------------------- */

.case__section:first-child { padding-top: 0; border-top: 0; }
.case__section { scroll-margin-top: calc(var(--nav-height) + var(--space-4)); }

/* Sections are <details> so they can be collapsed on small screens; open by default. */
.fold > summary { list-style: none; cursor: pointer; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary .section__toggle { margin-left: auto; color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease); }
.fold[open] > summary .section__toggle { transform: rotate(90deg); }
.fold > summary:hover h2 { color: var(--color-accent-active); }
.fold__body { padding-top: var(--space-1); }
.case__section .eyebrow { margin: var(--space-4) 0 var(--space-2); }
.case__section .eyebrow:first-child { margin-top: 0; }

.breakdown { display: grid; gap: var(--space-5); }
.breakdown__part { padding-left: var(--space-4); border-left: 2px solid var(--color-border); }
.breakdown__title { margin: 0 0 var(--space-2); }
.breakdown__title .eyebrow { margin: 0; color: var(--color-accent-active); }

.stack-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--space-4);
}

.stack-group .eyebrow { margin: 0 0 var(--space-2); }

.related { display: grid; gap: var(--space-2); }
.related__shared { margin: 0; }

.evidence-grid { --grid-min: 16rem; }

/* ---- architecture: interactive SVG ------------------------------------------------- */

.arch { margin: 0; display: grid; gap: var(--space-3); }

.arch__scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background:
    radial-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 1.25rem 1.25rem,
    var(--color-background-deep);
}

.arch__svg {
  display: block;
  max-width: none;
  min-width: 100%;
  height: auto;
  font-family: var(--font-sans);
  overflow: visible;
}

.arch__group rect { fill: color-mix(in srgb, var(--color-surface) 70%, transparent); stroke: var(--color-border); stroke-dasharray: 4 4; }
.arch__group-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; fill: var(--color-text-muted); }

.arch__edge {
  fill: none;
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  transition: stroke var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}

.arch__edge.is-active { stroke: var(--color-accent-active); stroke-width: 2; }
.arch__edge.is-dim { opacity: 0.18; }
.arch__edge-label { font-family: var(--font-mono); font-size: 9.5px; fill: var(--color-text-secondary); paint-order: stroke; stroke: var(--color-background-deep); stroke-width: 4px; stroke-linejoin: round; }
.arch__edge-label.is-dim { opacity: 0.2; }

/* With scripting, labels appear only on the traced connections to keep dense diagrams clean. */
.js .arch__edge-label { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
.js .arch__edge-label.is-on { opacity: 1; }
#arch-arrow path { fill: var(--color-border-strong); }

.arch__node { cursor: pointer; outline: none; }
.arch__node rect { fill: var(--color-surface-elevated); stroke: var(--color-border-strong); stroke-width: 1.25; transition: stroke var(--dur-fast) var(--ease), fill var(--dur-fast) var(--ease); }
.arch__node-label { font-size: 12px; font-weight: 600; fill: var(--color-text-primary); }
.arch__node-service { font-family: var(--font-mono); font-size: 10px; fill: var(--color-text-muted); }
.arch__node-status { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--color-accent-warning); }
.arch__node--planned rect { stroke-dasharray: 5 4; fill: var(--color-surface); }
.arch__node--planned .arch__node-label { fill: var(--color-text-secondary); }
.arch__node--external rect,
.arch__node--provided rect { stroke: var(--color-text-muted); fill: var(--color-surface); }
.arch__node--not_documented rect { stroke-dasharray: 2 3; }
.arch__node:hover rect,
.arch__node:focus-visible rect,
.arch__node.is-active rect { stroke: var(--color-accent-active); stroke-width: 2; fill: var(--color-surface-overlay); }
.arch__node.is-linked rect { stroke: var(--line-active); }
.arch__node.is-dim { opacity: 0.3; }
.arch__node:focus-visible rect { outline: 2px solid var(--color-accent-active); }

.arch__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  color: var(--color-text-muted);
}

.arch__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.arch__swatch { width: 0.9rem; height: 0.6rem; border: 1px solid var(--color-border-strong); border-radius: 2px; background: var(--color-surface-elevated); }
.arch__swatch--planned { border-style: dashed; background: transparent; }
.arch__swatch--external { border-color: var(--color-text-muted); background: transparent; }
.arch__hint { flex-basis: 100%; }

.node-detail { display: grid; gap: var(--space-2); }
.node-detail__title { margin: 0; font-size: var(--text-md); }
.node-detail__text { margin: 0; }
.node-detail__edges,
.node-detail__cases { margin: 0; padding-left: 1.2em; }
.node-detail p { margin: 0; }

.arch-text > summary { list-style: none; width: max-content; }
.arch-text > summary::-webkit-details-marker { display: none; }
.arch-text > summary::before { content: "\25B8"; margin-right: var(--space-2); color: var(--color-accent-active); }
.arch-text[open] > summary::before { content: "\25BE"; }
.arch-text[open] > .arch-static { margin-top: var(--space-3); }

/* ---- architecture: readable static representation --------------------------------- */

.arch-static { display: grid; gap: var(--space-4); }
.arch-static__group { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.arch-static__label { margin: 0 0 var(--space-2); font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-active); }
.arch-static__nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.arch-static__node { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-2) var(--space-3); border-left: 2px solid var(--color-border-strong); }
.arch-static__node[data-status="planned"] { border-left-style: dashed; opacity: 0.85; }
.arch-static__node[data-status="external"] { border-left-color: var(--color-text-muted); }
.arch-static__node p { margin: 0; }
.arch-static__edges { columns: 2 18rem; column-gap: var(--space-5); margin: 0; padding: 0 0 0 1.2em; }
.arch-static__edges li { break-inside: avoid; margin-bottom: var(--space-1); }