/* ==========================================================================
   Lens explorer — state3enterprise/index.html
   --------------------------------------------------------------------------
   One illustrative payroll example read through five lenses. Behaviour is in
   js/animations.js. Flat fills throughout: the identity uses no gradients.
   ========================================================================== */

/* It follows the page hero inside the same section. */
.hero + .explorer { margin-top: var(--space-12); }

/* ---- Explorer card ---- */
.explorer {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-xl);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
}
.explorer__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-dark);
}
.explorer__title { display: flex; align-items: center; gap: var(--space-3); }
.explorer__title img { width: 22px; height: 29px; flex: none; }
.explorer__title strong { display: block; font-size: 0.9375rem; font-weight: 600; }
.explorer__title small { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-light); }
.explorer__tag {
  padding: 5px 10px; white-space: nowrap;
  font-size: var(--text-xs); color: var(--color-text-light);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
}

.explorer__lenses {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-dark);
}
.explorer__lens-label { font-size: var(--text-xs); color: var(--color-text-light); }
.explorer__buttons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.explorer__buttons button {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 42px; padding: 7px 14px;
  font: inherit; font-size: var(--text-sm); color: #C6D3E6;
  background: transparent; cursor: pointer;
  border: 1px solid #3A4A65; border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.explorer__buttons button:hover { background: #1E2B43; color: var(--color-text-white); }
/* Selected: fill, lighter border, heavier text and a marker, so it does not rest on colour alone. */
.explorer__buttons button[aria-pressed="true"] {
  background: #284573; border-color: var(--color-accent-hover);
  color: var(--color-text-white); font-weight: 600;
}
.explorer__buttons button[aria-pressed="true"]::before {
  content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--color-accent-hover);
}
.explorer__buttons button:focus-visible { outline: 2px solid var(--color-text-white); outline-offset: 3px; }
.explorer__nojs { padding: var(--space-3) var(--space-6); font-size: var(--text-xs); color: var(--color-text-light); }

.explorer__body { display: grid; grid-template-columns: 1fr; }
.explorer__stage { min-width: 0; padding: var(--space-4) var(--space-3) var(--space-2); }
.explorer__svg { display: block; width: 100%; height: auto; max-height: 480px; margin-inline: auto; overflow: visible; }
.explorer__key {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3) var(--space-3);
  font-size: var(--text-xs); color: var(--color-text-light); text-align: center;
}
.explorer__key::before { content: ""; flex: none; width: 24px; height: 2px; background: #A1C5FF; }

.explorer__panel {
  display: flex; flex-direction: column;
  padding: var(--space-6);
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid var(--color-border-dark);
}
.explorer__kicker {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-accent);
}
.explorer__panel h2 { font-size: var(--text-h3); line-height: var(--leading-snug); margin-bottom: var(--space-3); }
.explorer__copy { font-size: var(--text-sm); line-height: var(--leading-relaxed); color: #BECDDF; margin-bottom: var(--space-5); }
.explorer__path-heading {
  margin-bottom: var(--space-3);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-text-light);
}
.explorer__path { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.explorer__path li { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: 42px; font-size: var(--text-sm); }
.explorer__path li + li::before { content: ""; position: absolute; left: 8px; top: -12px; width: 1px; height: 24px; background: #597AA8; }
.explorer__path .dot { position: relative; z-index: 1; flex: none; width: 17px; height: 17px; border: 1px solid #87ABE5; border-radius: 5px; background: #1F3658; }
.explorer__path small { display: block; font-size: var(--text-xs); line-height: 1.3; color: #A7BCD8; }
.explorer__link { margin-top: auto; font-size: var(--text-sm); font-weight: 600; }
/* Non-breaking space: the arrow never wraps onto a line of its own. */
.explorer__link::after { content: "\00a0→"; }

@media (min-width: 620px) and (max-width: 919px) {
  .explorer__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); }
  .explorer__link { grid-column: 1 / -1; }
}
@media (min-width: 920px) {
  .explorer__body { grid-template-columns: minmax(0, 1fr) 320px; align-items: stretch; }
  .explorer__panel { border-top: 0; border-left: 1px solid var(--color-border-dark); padding: var(--space-8) var(--space-6); }
  .explorer__panel h2 { min-height: 2.5em; }
}

.explorer__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-dark);
  font-size: var(--text-xs); color: var(--color-text-light);
}
.explorer__foot strong { color: #D8E6FA; font-weight: 600; }

/* ---- The model drawing (inline SVG) ---- */
.m-shelf { fill: rgba(96, 121, 157, 0.07); stroke: #34445C; stroke-width: 1; }
.m-edge {
  fill: none; stroke: #6585B4; stroke-width: 2; stroke-linecap: round; opacity: 0.6;
  transition: stroke var(--transition-base), stroke-width var(--transition-base), opacity var(--transition-base);
}
.m-edge.is-active { stroke: #A1C5FF; stroke-width: 3.5; opacity: 1; }
.m-node { transition: opacity var(--transition-base); }
.m-node__base { fill: #070B15; stroke: #293951; }
.m-node__face { fill: #1D2A41; stroke: #455A78; stroke-width: 1; transition: fill var(--transition-base), stroke var(--transition-base); }
.m-node__icon { fill: none; stroke: #9ABEF7; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.m-node__type { font: 600 10px var(--font-sans); letter-spacing: 0.1em; fill: #AFC5E4; }
.m-node__name { font: 600 17px var(--font-sans); letter-spacing: -0.02em; fill: #F4F7FC; }
.m-node__detail { font: 12px var(--font-sans); fill: #B6C5DA; }
.m-node--app .m-node__face { fill: #26426B; stroke: #82ACF0; stroke-width: 1.5; }
.m-node--app .m-node__type { fill: #C8DFFF; }
.m-node.is-active .m-node__face { fill: #2B446C; stroke: #A1C5FF; stroke-width: 2.5; }
.explorer__svg.has-selection .m-node:not(.is-active) { opacity: 0.62; }
.explorer__svg.has-selection .m-edge:not(.is-active) { opacity: 0.25; }

@media (max-width: 540px) {
  .explorer__head, .explorer__lenses, .explorer__foot { padding-inline: var(--space-4); }
  .explorer__stage { padding: var(--space-2) var(--space-1); }
  /* animations.js re-lays the nine records in two columns at this width */
  .explorer__svg { max-height: none; }
  .m-node__name { font-size: 18px; }
  .m-node__type { font-size: 11px; }
  .m-node__detail { font-size: 13px; }
  .explorer__svg.has-selection .m-node:not(.is-active) { opacity: 0.75; }
  .explorer__panel { padding: var(--space-6) var(--space-5); }
}

@media (prefers-reduced-motion: reduce) {
  .m-node, .m-node__face, .m-edge, .explorer__buttons button { transition: none; }
}