/* Jev case study (design system v2 "Atlas"). Tokens, type, header, buttons and footer come from /syberlabs.css. */

/* Hero: copy column + the Jev sigil in a plate frame */
.jev-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); column-gap: var(--space-8); align-items: center; padding-top: var(--space-9); padding-bottom: var(--space-9); }
.jev-hero__title { max-width: 10em; margin-top: var(--space-5); }
.jev-hero__lede { max-width: 560px; margin-top: var(--space-6); }
.jev-hero__actions { margin-top: var(--space-6); }
.jev-hero__note { max-width: 560px; margin: var(--space-5) 0 0; }
.jev-hero__note a { text-decoration: underline; }

/* Sections: label in the first column, content across the other two, over a hairline on the content width */
.jev-section { padding-top: var(--space-9); padding-bottom: var(--space-9); background: linear-gradient(var(--sy-rule), var(--sy-rule)) center top / calc(100% - 2 * var(--sy-gutter)) 1px no-repeat; }
.jev-split { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: baseline; }
.jev-split__main { grid-column: 2 / 4; padding-left: var(--space-6); }
.jev-copy { max-width: var(--measure); margin: var(--space-5) 0 0; color: var(--sy-body); }
.jev-link { min-height: 44px; margin-top: var(--space-4); }
.jev-status { padding-bottom: var(--space-10); }

/* Question types: tabs, readout, example payload */
.primitive-console { margin-top: var(--space-8); border: 1px solid var(--sy-rule-2); border-radius: var(--sy-r-panel); background: var(--sy-ink-2); overflow: hidden; }
.primitive-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--sy-rule); }
.primitive-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0;
  padding: var(--space-5); border: 0; border-top: 2px solid transparent; background: transparent;
  color: var(--sy-mist); font: inherit; text-align: left; cursor: pointer;
  transition: background-color var(--sy-t-hover) var(--sy-ease), border-color var(--sy-t-hover) var(--sy-ease);
}
.primitive-tab + .primitive-tab { border-left: 1px solid var(--sy-rule); }
.primitive-tab:hover { background: var(--sy-ink-3); }
.primitive-tab.selected { border-top-color: var(--sy-accent); background: var(--sy-ink-3); }
.primitive-tab:focus-visible { outline: 2px solid var(--sy-ice); outline-offset: -4px; }
.primitive-tab span { font: 500 12px/16px var(--sy-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sy-dim); }
.primitive-tab.selected span { color: var(--sy-accent); }
.primitive-tab strong { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--sy-vellum); }
.primitive-tab small { font-size: 14px; line-height: 20px; color: var(--sy-mist); }

.primitive-readout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: var(--space-7); align-items: center; padding: var(--space-6); }
.primitive-readout h3 { margin-top: var(--space-3); }
.primitive-readout p:not(.sy-label) { margin: var(--space-2) 0 0; font-size: 14px; line-height: 20px; color: var(--sy-mist); }
.distribution { display: grid; gap: var(--space-3); }
.sy-label + .distribution { margin-top: var(--space-3); }
.distribution-row { display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-areas: 'label percent' 'track track'; gap: var(--space-1) var(--space-3); align-items: center; font: 500 12px/16px var(--sy-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--sy-mist); }
.distribution-row > span:first-child { grid-area: label; }
.distribution-row .track { grid-area: track; display: block; height: 4px; border-radius: var(--sy-r-sm); background: var(--sy-rule); overflow: hidden; }
.distribution-row .fill { display: block; height: 100%; width: var(--width); border-radius: var(--sy-r-sm); background: var(--sy-accent); }
.distribution-row .percent { grid-area: percent; text-align: right; color: var(--sy-vellum); font-variant-numeric: tabular-nums; }

.contract-code { border-top: 1px solid var(--sy-rule); }
.code-title { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-bottom: 1px solid var(--sy-rule); font: 500 12px/16px var(--sy-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--sy-dim); }
.contract-code pre { margin: 0; padding: var(--space-5) var(--space-6); max-height: 480px; overflow: auto; background: var(--sy-ink); color: var(--sy-mist); font: 400 13px/1.7 var(--sy-mono); tab-size: 2; }

@media (max-width: 1023px) {
  .jev-split { grid-template-columns: 1fr; row-gap: var(--space-4); }
  .jev-split__main { grid-column: 1; padding-left: 0; }
  .primitive-readout { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 720px) {
  .jev-hero { grid-template-columns: 1fr; padding-top: var(--space-7); padding-bottom: var(--space-8); }
  .jev-sigil { order: -1; justify-self: start; display: grid; grid-template-columns: 112px 1fr; gap: 20px; align-items: center; margin-bottom: var(--space-6); max-width: none; }
  .jev-sigil .sy-plate { margin: 6px; }
  .jev-sigil figcaption { margin: 0; }
}
@media (max-width: 640px) {
  .jev-section { padding-top: var(--space-8); padding-bottom: var(--space-8); }
  .primitive-console { margin-top: var(--space-6); }
  .primitive-rail { grid-template-columns: 1fr; }
  .primitive-tab { padding: var(--space-4); gap: var(--space-1); border-top: 0; border-left: 2px solid transparent; }
  .primitive-tab + .primitive-tab { border-left: 2px solid transparent; border-top: 1px solid var(--sy-rule); }
  .primitive-tab.selected { border-left-color: var(--sy-accent); }
  .primitive-readout { padding: var(--space-4); }
  .code-title { flex-direction: column; gap: var(--space-1); padding: var(--space-3) var(--space-4); }
  .contract-code pre { padding: var(--space-4); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
}