/* ============================================================
   MIDIOS TECHNOLOGIES — art direction
   ------------------------------------------------------------
   Layers over tokens.css. Overrides nothing the house owns:
   not the lockup, not the type scale, not the credit grid,
   not the colophon, not the return path.

   What it adds is a technical register — a monospace voice for
   machine-readable material, schematic surfaces, node graphs,
   and the two signature interactions. Where MMG shoots, this
   division diagrams.
   ============================================================ */

:root {
  --mono: "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .3, 1);

  /* Semantic state colours. Measured against --ground #0A0E12. */
  --ok:    #6FBF9B;   /* 7.4:1 — passing, verified, production */
  --wait:  #D7A64B;   /* 8.6:1 — pending, awaiting approval */
  --stop:  #E0806A;   /* 6.6:1 — blocked, failed, halted */
  --idle:  var(--type-3);

  --grid-line: rgba(127, 178, 201, .07);
}

/* ------------------------------------------------------------
   1. THE SUBSTRATE
   A drafting grid, not a decoration. It marks the column
   rhythm the schematics are laid out on, and it is faint
   enough to read as paper rather than as an effect.
   ------------------------------------------------------------ */

.grid-field {
  position: relative;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.grid-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 35%, var(--ground) 100%);
}
.grid-field > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   2. MACHINE VOICE
   Monospace is reserved for things a machine would emit:
   identifiers, statuses, counts, paths, timings, field names.
   Prose never uses it.
   ------------------------------------------------------------ */

.mono {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .02em;
  color: var(--type-2);
}
.tag {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .2rem .5rem;
  border: 1px solid var(--line);
  color: var(--type-2);
  white-space: nowrap;
  display: inline-block;
}
.tag[data-state="production"], .tag[data-state="operating"] { color: var(--ok);   border-color: color-mix(in srgb, var(--ok) 40%, var(--line)); }
.tag[data-state="development"]                               { color: var(--wait); border-color: color-mix(in srgb, var(--wait) 40%, var(--line)); }
.tag[data-state="research"], .tag[data-state="experimental"]  { color: var(--accent); border-color: var(--accent-dim); }
.tag[data-state="internal"]                                   { color: var(--type-2); }

.rule-label {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--type-2);
  margin: 0 0 1.5rem;
  max-width: none;
}
.rule-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

.nav .nav-cta {
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  padding: .48rem 1rem;
  letter-spacing: .02em;
}
.nav .nav-cta:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.pull {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.22;
  color: var(--type);
  max-width: 26ch;
  margin: 0;
  padding-left: clamp(1rem, 2vw, 1.75rem);
  border-left: 1px solid var(--accent);
}
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
}
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

/* ------------------------------------------------------------
   3. THE HEAD-END
   The homepage opening. Not a banner and not a paragraph
   claiming innovation: a schematic that assembles itself and
   a readout that describes what it is. Labelled as an
   illustration, because it is one.
   ------------------------------------------------------------ */

.headend {
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 5.5rem) var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.headend-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  max-width: 82rem;
}
@media (max-width: 900px) { .headend-grid { grid-template-columns: minmax(0, 1fr); } }

.headend-slug {
  font-family: var(--mono);
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.25rem;
}
.headend h1 {
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -.01em;
  max-width: 15ch;
  margin: 0;
}
.headend h1 em { font-style: italic; color: var(--accent); }
.headend-sub { color: var(--type-2); margin: 1.75rem 0 0; max-width: 46ch; }
.headend-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }

/* the schematic panel */
.panel {
  border: 1px solid var(--line);
  background: var(--ground-raised);
}
.panel-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--type-2);
}
.panel-bar .dot-live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .js .panel-bar .dot-live { animation: pulse 2.4s var(--ease) infinite; }
  @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
}
.panel-bar .spacer { flex: 1; }
.panel-body { padding: clamp(1rem, 2.5vw, 1.6rem); }
.panel-foot {
  border-top: 1px solid var(--line);
  padding: .65rem .9rem;
  font-family: var(--mono);
  font-size: .7rem;
  color: var(--type-2);
  letter-spacing: .04em;
}

/* the running trace inside the head-end panel */
.trace { display: block; width: 100%; height: auto; }
.trace .wire { stroke: var(--line); stroke-width: 1; fill: none; }
.trace .wire.is-live { stroke: var(--accent); }
.trace .box { fill: var(--ground); stroke: var(--line); stroke-width: 1; }
.trace .box.is-live { stroke: var(--accent); fill: color-mix(in srgb, var(--accent) 8%, var(--ground)); }
.trace text { font-family: var(--mono); font-size: 5px; fill: var(--type-2); letter-spacing: .04em; }
.trace .is-live + text, .trace text.is-live { fill: var(--type); }
.trace .pip { fill: var(--accent); }

.readout {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: .74rem;
  line-height: 1.9;
  color: var(--type-3);
}
.readout li { display: flex; gap: .75rem; }
.readout .t { color: var(--type-3); flex: none; }
.readout .m { color: var(--type-2); }
.readout li.is-new .m { color: var(--type); }
.readout .ok { color: var(--ok); }
.readout .wait { color: var(--wait); }

/* ------------------------------------------------------------
   4. SYSTEMS IN MOTION
   The eight-stage agentic loop. Renders as a labelled list
   with JS off; the sweep is enhancement only.
   ------------------------------------------------------------ */

.loop {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.loop > li {
  background: var(--ground);
  padding: 1.1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  transition: background-color .35s var(--ease);
}
.loop .step-no {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .14em;
  color: var(--type-3);
  margin: 0;
  max-width: none;
}
.loop .step-name {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--type-2);
  transition: color .35s var(--ease);
}
.loop .step-note { font-size: var(--step--1); color: var(--type-2); margin: 0; max-width: none; }
.loop > li.is-lit { background: var(--ground-raised); }
.loop > li.is-lit .step-name { color: var(--accent); }
.loop > li.is-lit .step-no { color: var(--accent-dim); }
.loop > li[data-gate="human"] .step-no::after {
  content: " · GATE";
  color: var(--wait);
}

/* ------------------------------------------------------------
   5. THE ARCHITECTURE EXPLORER — signature interaction
   Pick a business problem, watch the architecture assemble,
   open any component to inspect what it actually does.
   With JS off: every scenario renders in full as a nested
   ordered list. Nothing here is required to understand it.
   ------------------------------------------------------------ */

.explorer { border: 1px solid var(--line); background: var(--ground-raised); }

.explorer-pick {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}
.explorer-pick button {
  flex: 1 1 13rem;
  background: var(--ground-raised);
  border: 0;
  color: var(--type-2);
  font-family: var(--ui);
  font-size: .9rem;
  text-align: left;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease);
}
.explorer-pick button .p-no {
  display: block;
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .14em;
  color: var(--type-3);
  margin-bottom: .35rem;
}
.explorer-pick button:hover { background: var(--ground); color: var(--type); }
.explorer-pick button[aria-selected="true"] { background: var(--ground); color: var(--type); box-shadow: inset 0 -2px 0 var(--accent); }
.explorer-pick button[aria-selected="true"] .p-no { color: var(--accent); }

.explorer-stage { padding: clamp(1.25rem, 3vw, 2rem); }
.explorer-head { margin-bottom: 1.5rem; }
.explorer-head h3 { margin: 0 0 .4rem; }
.explorer-head p { color: var(--type-2); margin: 0; font-size: .95rem; }

/* the assembling chain */
.chain { list-style: none; margin: 0; padding: 0; }
.chain > li { position: relative; padding-left: 2.25rem; padding-bottom: 1rem; }
.chain > li::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 1.85rem;
  bottom: -.1rem;
  width: 1px;
  background: var(--line);
}
.chain > li:last-child::before { display: none; }
.chain > li::after {
  content: "";
  position: absolute;
  left: 2px;
  top: .95rem;
  width: 11px; height: 11px;
  border: 1px solid var(--accent-dim);
  background: var(--ground-raised);
}
.chain > li[data-actor="human"]::after { border-color: var(--wait); background: color-mix(in srgb, var(--wait) 25%, var(--ground-raised)); }
.chain > li[data-actor="record"]::after { border-color: var(--ok); }

.node {
  width: 100%;
  text-align: left;
  background: var(--ground);
  border: 1px solid var(--line);
  color: inherit;
  font-family: var(--ui);
  padding: .8rem 1rem;
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem .9rem;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.node:hover { border-color: var(--accent-dim); background: var(--ground-raised); }
.node[aria-expanded="true"] { border-color: var(--accent); }
.node .n-kind {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--type-2);
  flex: none;
}
.node .n-name { font-size: 1rem; color: var(--type); }
.node .n-open {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .68rem;
  color: var(--type-3);
  letter-spacing: .1em;
}
.node[aria-expanded="true"] .n-open { color: var(--accent); }

.node-detail {
  border: 1px solid var(--line);
  border-top: 0;
  background: var(--ground-raised);
  padding: 1rem;
}
.node-detail p { margin: 0 0 .75rem; color: var(--type-2); font-size: .95rem; max-width: 58ch; }
.node-detail p:last-child { margin-bottom: 0; }
.node-detail dl {
  margin: 0;
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: .4rem 1rem;
  font-size: .88rem;
}
.node-detail dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--type-2); padding-top: .15rem; }
.node-detail dd { margin: 0; color: var(--type-2); }
@media (max-width: 620px) {
  .node-detail dl { grid-template-columns: minmax(0, 1fr); gap: .1rem; }
  .node-detail dd { margin-bottom: .6rem; }
}

.explorer-foot {
  border-top: 1px solid var(--line);
  padding: .9rem clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: .72rem;
  color: var(--type-2);
}
.explorer-foot p { margin: 0; max-width: none; }

/* JS-off fallback: the scenarios as plain prose */
.explorer-static { border: 1px solid var(--line); padding: clamp(1.25rem, 3vw, 2rem); }
.js .explorer-static { display: none; }
.no-js .explorer-live, html:not(.js) .explorer-live { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .js .chain > li { opacity: 0; transform: translate3d(0, .5rem, 0); }
  .js .chain > li.is-in { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
}

/* ------------------------------------------------------------
   6. PRODUCT CARDS + CAPABILITY LEDGERS
   ------------------------------------------------------------ */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.card {
  background: var(--ground);
  padding: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: .75rem;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: background-color .25s var(--ease);
}
a.card:hover { background: var(--ground-raised); }
.card-top { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.card h3 { margin: 0; font-size: var(--step-1); }
.card p { margin: 0; color: var(--type-2); font-size: .95rem; }
.card .card-spec {
  margin-top: auto;
  padding-top: 1.1rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--type-2);
  text-transform: uppercase;
}
a.card:hover .card-spec { color: var(--accent); }

.spec { width: 100%; border-collapse: collapse; max-width: 62rem; }
.spec caption { text-align: left; color: var(--type-2); padding-bottom: 1rem; font-size: .95rem; }
.spec th, .spec td { text-align: left; padding: .9rem 1.25rem .9rem 0; border-bottom: 1px solid var(--line); vertical-align: top; font-weight: 400; }
.spec th { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--type-2); width: 13rem; }
.spec td { color: var(--type-2); font-size: .95rem; }
@media (max-width: 700px) {
  .spec th { display: block; width: auto; border-bottom: 0; padding-bottom: .2rem; }
  .spec td { display: block; padding-top: 0; }
}

/* ------------------------------------------------------------
   7. DOORS — conversion router
   ------------------------------------------------------------ */

.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  list-style: none;
  margin: 0;
  padding: 0;
}
.door {
  background: var(--ground);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  display: flex;
  flex-direction: column;
  gap: .7rem;
  text-decoration: none;
  color: inherit;
  transition: background-color .25s var(--ease);
}
.door:hover { background: var(--ground-raised); }
.door .door-no { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--accent); margin: 0; max-width: none; }
.door h3 { font-size: var(--step-1); line-height: 1.2; margin: 0; }
.door p { color: var(--type-2); font-size: .95rem; margin: 0; }
.door .door-go {
  margin-top: auto; padding-top: 1.1rem;
  font-family: var(--mono); font-size: .7rem; letter-spacing: .14em;
  color: var(--type-3); transition: color .25s var(--ease);
}
.door:hover .door-go { color: var(--accent); }

/* ------------------------------------------------------------
   8. ROUTED INTAKE
   ------------------------------------------------------------ */

.intake { max-width: 44rem; }
.intake fieldset { border: 0; margin: 0 0 1.75rem; padding: 0; }
.intake legend {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--type-2); padding: 0; margin-bottom: .9rem;
}
.routes { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.route { background: var(--ground); display: block; cursor: pointer; padding: .9rem 1.1rem; transition: background-color .2s var(--ease); }
.route:hover { background: var(--ground-raised); }
.route input { position: absolute; opacity: 0; width: 0; height: 0; }
.route .r-name { display: block; color: var(--type); font-size: 1rem; }
.route .r-note { display: block; color: var(--type-2); font-size: var(--step--1); margin-top: .2rem; }
.route:has(input:checked) { background: var(--ground-raised); box-shadow: inset 2px 0 0 var(--accent); }
.route:has(input:checked) .r-name { color: var(--accent); }
.route:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.field-group[hidden] { display: none; }

/* ------------------------------------------------------------
   9. LABS — production vs experimental must never blur
   ------------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.split > div { background: var(--ground); padding: clamp(1.4rem, 3vw, 2rem); }
.split > div.is-experimental { background: var(--ground-raised); }
.split h3 { margin: 0 0 .25rem; }
.split .split-rule { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--type-2); margin: 0 0 1rem; max-width: none; }
.split .is-experimental .split-rule { color: var(--accent); }
.split ul { margin: 1rem 0 0; padding-left: 1.1rem; color: var(--type-2); font-size: .95rem; }
.split li { margin-bottom: .4rem; }

.empty-state {
  border: 1px dashed var(--line);
  padding: clamp(1.4rem, 3vw, 2rem);
  color: var(--type-2);
  font-size: .95rem;
}
.empty-state .mono { display: block; margin-bottom: .5rem; color: var(--type-2); }

/* ------------------------------------------------------------
   10. ECOSYSTEM NAVIGATOR — house convention, division skin
   ------------------------------------------------------------ */

.ecosystem {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: 1.25rem 2rem; list-style: none; margin: 0; padding: 0; max-width: 78rem;
}
.ecosystem a { text-decoration: none; display: block; padding-top: .7rem; border-top: 1px solid var(--line); transition: border-color .25s var(--ease); }
.ecosystem a:hover { border-top-color: var(--accent); }
.ecosystem .e-name { display: block; font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; color: var(--type-2); }
.ecosystem a:hover .e-name { color: var(--type); }
.ecosystem .e-role { display: block; font-size: var(--step--1); color: var(--type-2); margin-top: .3rem; letter-spacing: 0; }
.ecosystem .is-self .e-name { color: var(--accent); }

/* ------------------------------------------------------------
   11. ENTRANCE MOTION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translate3d(0, 1rem, 0); transition: opacity .6s var(--ease), transform .6s var(--ease); }
  .js .rise.is-in { opacity: 1; transform: none; }
  .js .rise:nth-child(2) { transition-delay: .06s; }
  .js .rise:nth-child(3) { transition-delay: .12s; }
  .js .rise:nth-child(4) { transition-delay: .18s; }
}

/* ------------------------------------------------------------
   12. CONTRAST OVERRIDES
   --type-3 is a house constant measuring ~3.1:1 on this
   division's ground: correct for ordinals and decorative
   affordances, below WCAG AA for anything a reader has to
   act on. Text that carries meaning is moved up one tint
   here rather than by changing a shared token, which is a
   decision that belongs at system level.
   ------------------------------------------------------------ */

.form-note { color: var(--type-2); }
.ledger .detail.small { color: var(--type-2); }
.formstatus { margin-top: 1.25rem; padding: .9rem 1.1rem; border-left: 2px solid var(--accent); background: var(--ground-raised); }
.formstatus[hidden] { display: none; }
.formstatus--error { border-left-color: #D9795A; }