/* ============================================================
   MIDIOS ENERGY — division component layer
   ------------------------------------------------------------
   Loads AFTER tokens.css. Adds only what Energy needs.
   Overrides no house constant: the lockup, type scale,
   colophon and return path are untouched.

   Art direction: survey and strata. Topographic contours,
   stratigraphic bands, a flow line through the energy chain.
   Copper is the only colour signal; status is carried by
   shape as well as colour so it survives greyscale.
   ============================================================ */

[data-division="energy"] {
  --copper-hi: #D08A4A;   /* copper lifted for small text on dark ground (AA) */
  --label:     #A7AEA8;   /* small-label grey that clears AA, unlike --type-3 */
  --topo:      rgba(184, 115, 51, .16);
  --topo-idx:  rgba(184, 115, 51, .34);
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nav CTA ---------- */
.nav .nav-cta { color: var(--copper-hi); }
.nav .nav-cta:hover, .nav .nav-cta[aria-current="page"] { color: var(--type); border-bottom-color: var(--accent); }

/* ---------- hero: topographic field ---------- */
.hero { position: relative; overflow: hidden; }
.hero > .credit { position: relative; z-index: 1; }
.topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  fill: none; stroke: var(--topo); stroke-width: 1; pointer-events: none;
}
.topo .idx { stroke: var(--topo-idx); stroke-width: 1.25; }
.hero--topo::after {   /* keep type legible over the contours */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--ground) 0%, rgba(12,16,14,.86) 45%, rgba(12,16,14,.2) 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .topo path { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: survey 2.4s cubic-bezier(.3,.6,.3,1) forwards; }
  .topo path:nth-child(odd) { animation-delay: .25s; }
  @keyframes survey { to { stroke-dashoffset: 0; } }
}
.actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.hero-status { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

/* ---------- survey strip (Energy's title block) ---------- */
.survey {
  margin: 0 var(--gutter); display: flex; flex-wrap: wrap; gap: 0;
  border: 1px solid var(--line); border-top: 0;
  font-size: var(--step--1); color: var(--label); letter-spacing: .04em;
}
.survey span { padding: .75rem 1.1rem; border-right: 1px solid var(--line); flex: 1 1 auto; }
.survey span:last-child { border-right: 0; }
.survey strong { color: var(--type); font-weight: 500; }

/* ---------- status pills ---------- */
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--ui); font-size: .72rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; line-height: 1.2;
  color: var(--label); border: 1px solid var(--line);
  padding: .32rem .7rem .32rem .6rem; white-space: nowrap;
}
.status::before { content: ""; width: .5rem; height: .5rem; flex: none; }
.status--active       { color: var(--copper-hi); border-color: var(--accent); }
.status--active::before       { background: var(--accent); border-radius: 50%; }
.status--development  { color: var(--copper-hi); border-color: var(--accent-dim); }
.status--development::before  { background: var(--accent); transform: rotate(45deg); width: .42rem; height: .42rem; }
.status--research::before     { border: 1.5px solid var(--copper-hi); border-radius: 50%; }
.status--notactivated { color: var(--type-2); }
.status--notactivated::before { border: 1px dashed var(--type-2); border-radius: 50%; }

.legend { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.legend li { display: grid; grid-template-columns: 11rem minmax(0,1fr); gap: 1rem; align-items: center; font-size: var(--step--1); color: var(--type-2); }

/* ---------- two columns of prose ---------- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.5rem 3rem; margin-top: 1.5rem; }
.cols p { margin: 0; }

/* ---------- verbs ---------- */
.verbs { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border-top: 1px solid var(--line); }
.verbs li { padding: 1.5rem 1.5rem 0 0; }
.verbs li + li { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.verb { font-family: var(--display); font-size: var(--step-2); color: var(--copper-hi); display: block; line-height: 1.1; }
.verbs p { color: var(--type-2); margin: .75rem 0 0; }

/* ---------- strata: business areas as geological bands ---------- */
.strata { list-style: none; margin: 2rem 0 0; padding: 0; border-top: 1px solid var(--line); }
.stratum a {
  display: grid; grid-template-columns: 2.75rem minmax(0, 18rem) minmax(0, 1fr) auto;
  gap: .5rem 1.5rem; align-items: baseline;
  padding: 1.35rem 1rem 1.35rem 0; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--line); position: relative;
  transition: background-color .2s ease, padding-left .2s ease;
}
.stratum a::before {        /* the band's edge: solid, hatched or dashed by status */
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: transparent;
}
.stratum--development a::before { background: var(--accent); }
.stratum--research a::before    { background: repeating-linear-gradient(180deg, var(--accent) 0 4px, transparent 4px 8px); }
.stratum--notactivated a::before{ background: repeating-linear-gradient(180deg, var(--type-3) 0 2px, transparent 2px 8px); }
.stratum a:hover, .stratum a:focus-visible { background: var(--ground-raised); padding-left: .75rem; }
.band--raised .stratum a:hover { background: var(--ground); }
.stratum-no { font-size: .78rem; letter-spacing: .1em; color: var(--label); padding-left: .9rem; }
.stratum-name { font-family: var(--display); font-size: var(--step-1); line-height: 1.25; }
.stratum-short { color: var(--type-2); font-size: .95rem; }
.stratum-status { justify-self: end; }

/* ---------- ENERGY SYSTEMS MAP (signature) ---------- */
.sysmap { margin-top: 2rem; }
.map-note { font-size: var(--step--1); color: var(--label); border-left: 1px solid var(--accent-dim); padding-left: 1rem; max-width: 46rem; margin: 0 0 2.25rem; }
.map-rail {
  list-style: none; margin: 0; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(8, minmax(0,1fr));
}
.map-rail::before {       /* the flow line */
  content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 1px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent) 50%, var(--accent-dim));
}
.map-rail::after {        /* the return arc: recovery feeds resource */
  content: "\21BA"; position: absolute; right: -.1rem; top: -.35rem; color: var(--copper-hi); font-size: 1rem;
}
.node {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  width: 100%; background: none; border: 0; padding: .55rem .5rem .75rem 0; margin: 0;
  font-family: var(--ui); color: var(--type-2); text-align: left; cursor: pointer;
}
.node-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--ground); border: 1.5px solid var(--type-2); display: inline-block; flex: none; position: relative; z-index: 1; }
.band--raised .node-dot { background: var(--ground-raised); }
.node--research .node-dot, .node-dot--research { border-color: var(--copper-hi); }
.node--development .node-dot, .node-dot--development { background: var(--accent) !important; border-color: var(--accent); border-radius: 2px; transform: rotate(45deg) scale(.85); }
.node--sibling .node-dot, .node-dot--sibling { border-color: var(--type); border-style: double; border-width: 3px; }
.node--notactivated .node-dot, .node-dot--notactivated { border-style: dashed; }
.node-no { font-size: .72rem; letter-spacing: .12em; color: var(--label); }
.node-name { font-size: .95rem; line-height: 1.3; }
.node:hover { color: var(--type); }
.node[aria-selected="true"] { color: var(--type); }
.node[aria-selected="true"] .node-name { box-shadow: inset 0 -2px 0 var(--accent); }
.node[aria-selected="true"] .node-dot { box-shadow: 0 0 0 5px rgba(184,115,51,.22); }
.map-key { list-style: none; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: .6rem 1.75rem; font-size: var(--step--1); color: var(--type-2); }
.map-key li { display: inline-flex; align-items: center; gap: .6rem; }
.map-key .node-dot { width: .85rem; height: .85rem; }
.map-panel { margin-top: 2rem; padding: 1.75rem 0 0; border-top: 1px solid var(--accent-dim); max-width: 50rem; min-height: 15rem; }
.map-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.map-panel h3 { font-size: var(--step-2); margin-bottom: .75rem; }
.map-kicker { font-size: var(--step--1); color: var(--label); letter-spacing: .06em; margin: 0 0 .75rem; }
.role { color: var(--copper-hi); }
.role--notactivated { color: var(--type-2); }
.role--sibling { color: var(--type); }
.map-what { color: var(--type); }
.map-us { color: var(--type-2); }
.map-us strong { color: var(--type); font-weight: 500; }
.no-js .map-panel[hidden], .sysmap:not(.is-live) .map-panel[hidden] { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .map-panel > * { animation: rise 320ms cubic-bezier(.2,.7,.3,1) both; }
  @keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
}

/* ---------- principles, gates, checklists ---------- */
.principles { list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: pr; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 3rem; }
.principles li { counter-increment: pr; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.principles li::before { content: counter(pr, decimal-leading-zero); display: block; font-size: .75rem; letter-spacing: .12em; color: var(--copper-hi); margin-bottom: .5rem; }
.principles p { color: var(--type-2); margin: 0; }

.checklist, .gates { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.checklist li, .gates li { position: relative; padding: .85rem 0 .85rem 2.25rem; border-top: 1px solid var(--line); color: var(--type-2); max-width: var(--measure); }
.checklist li:last-child, .gates li:last-child { border-bottom: 1px solid var(--line); }
.checklist li::before { content: ""; position: absolute; left: .2rem; top: 1.45rem; width: .9rem; height: 1px; background: var(--accent); }
.gates { counter-reset: g; }
.gates li { counter-increment: g; }
.gates li::before { content: "G" counter(g); position: absolute; left: 0; top: .9rem; font-size: .75rem; letter-spacing: .08em; color: var(--copper-hi); }

/* ---------- siblings (ecosystem) ---------- */
.siblings { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0 2.5rem; }
.siblings li { padding: 1.25rem 0; border-top: 1px solid var(--line); }
.siblings .textlink { font-family: var(--display); font-size: var(--step-1); }
.siblings p { color: var(--type-2); margin: .6rem 0 0; font-size: .95rem; }

/* ---------- pathway tiles ---------- */
.tiles { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tile { display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.5rem 1.4rem 1.25rem; background: var(--ground); text-decoration: none; color: inherit; transition: background-color .18s ease; }
.band--raised .tile { background: var(--ground-raised); }
.tile:hover, .tile:focus-visible, .band--raised .tile:hover { background: var(--ground); box-shadow: inset 0 -2px 0 var(--accent); }
.band--raised .tile:hover { background: #18201c; }
.tile-title { font-family: var(--display); font-size: var(--step-1); line-height: 1.25; }
.tile-text { color: var(--type-2); font-size: .92rem; flex: 1; }
.tile-go { color: var(--copper-hi); }

/* ---------- partner groups ---------- */
.groups { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 0 2.5rem; }
.groups li { padding: 1.5rem 0; border-top: 1px solid var(--line); }
.groups p { color: var(--type-2); margin: .5rem 0 0; font-size: .95rem; }
.groups .k { display: inline-block; min-width: 4.25rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }

/* ---------- register + empty states ---------- */
.empty { border: 1px dashed var(--accent-dim); padding: clamp(1.5rem, 4vw, 2.5rem); max-width: 50rem; }
.empty-label { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-hi); margin: 0 0 1rem; }
.empty h2 { margin-bottom: .75rem; }
.register { width: 100%; border-collapse: collapse; }
.register caption { text-align: left; color: var(--type-2); padding-bottom: 1rem; }
.register th, .register td { text-align: left; padding: .9rem 1rem .9rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.register thead th { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--label); }
.pstages { list-style: none; margin: 1.5rem 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; counter-reset: ps; }
.pstages li { counter-increment: ps; flex: 1 1 8rem; border-top: 2px solid var(--accent-dim); padding: .75rem .75rem 0 0; }
.pstages li::before { content: counter(ps, decimal-leading-zero); display: block; font-size: .72rem; color: var(--label); letter-spacing: .1em; }
.pstage { font-size: .95rem; }
.timeline { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--accent-dim); }
.timeline li { padding: .5rem 0 1rem 1.5rem; position: relative; color: var(--type-2); }
.timeline li::before { content: ""; position: absolute; left: -4px; top: 1rem; width: 7px; height: 7px; background: var(--accent); border-radius: 50%; }
.t-date { display: block; font-size: .8rem; color: var(--label); letter-spacing: .06em; }
.placeholder { display: inline; background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(184,115,51,.08) 6px 12px); border: 1px dashed var(--accent-dim); padding: .1rem .45rem; color: var(--type-2); font-size: .92rem; }

/* ---------- forms ---------- */
.form--wide { max-width: 46rem; }
.formsec { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-hi); margin: 2.25rem 0 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.form-legend { font-size: var(--step--1); color: var(--label); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 1.25rem; }
.field .hint { display: block; font-size: var(--step--1); color: var(--label); margin-top: .45rem; }
.field label { color: var(--label); }
.form-note { color: var(--label); }
.trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formstatus { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 2px solid var(--accent); background: var(--ground-raised); }
.formstatus--error { border-left-color: #D9795A; }
.cta[disabled] { opacity: .6; cursor: progress; }

/* ---------- ledger term with a pill ---------- */
.ledger .term .status { margin-top: .6rem; }

/* ---------- footer: ecosystem navigator + disclosure ---------- */
.footer-h { font-family: var(--ui); font-size: var(--step--1); font-weight: 500; letter-spacing: .14em; color: var(--label); margin: 0 0 .9rem; max-width: none; }
.eco-nav { max-width: 78rem; padding-bottom: 2rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; }
.eco-label { margin: 0; font-size: var(--step--1); letter-spacing: .08em; color: var(--label); }
.eco-label a { color: var(--type-2); }
.eco-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.eco-nav a { color: var(--type-2); font-size: .9rem; text-decoration: none; }
.eco-nav a:hover { color: var(--type); }
.eco-nav a[aria-current="true"] { color: var(--copper-hi); }
.footer-disclosure { max-width: 78rem; padding: 1.75rem 0 .25rem; font-size: var(--step--1); color: var(--label); }
.footer-disclosure p { max-width: 70rem; margin: 0 0 .75rem; }
.footer a { color: var(--type-2); }
.colophon { color: var(--label); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .map-rail { grid-template-columns: repeat(4, minmax(0,1fr)); row-gap: 1rem; }
  .map-rail::before, .map-rail::after { display: none; }
  .node { border-top: 1px solid var(--accent-dim); }
  .stratum a { grid-template-columns: 2.75rem minmax(0,1fr) auto; }
  .stratum-short { grid-column: 2 / -1; }
  .stratum-status { grid-column: 3; grid-row: 1; }
}
@media (max-width: 760px) {
  .cols, .principles, .field-row { grid-template-columns: minmax(0,1fr); }
  .verbs { grid-template-columns: minmax(0,1fr); }
  .verbs li + li { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 1.25rem; }
  .map-rail { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .stratum a { grid-template-columns: 2.25rem minmax(0,1fr); }
  .stratum-status { grid-column: 2; grid-row: auto; justify-self: start; }
  .legend li { grid-template-columns: minmax(0,1fr); gap: .35rem; }
  .survey span { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  .survey span:last-child { border-bottom: 0; }
  .hero--topo::after { background: rgba(12,16,14,.78); }
  .register thead { display: none; }
  .register tr, .register th, .register td { display: block; }
}