/* ==========================================================================
   frame-parts.css — the per-layer interiors
   Same --u contract as frame.css. Each block is one section's payload; the
   surrounding chrome never changes.
   ========================================================================== */

/* --- §2 the schema behind the columns ------------------------------------ */
.schema { display: grid; grid-template-columns: 1fr 1fr; }
.schema__col { padding: calc(1.1 * var(--u)); }
.schema__col + .schema__col { border-left: 1px solid var(--fr-line); }
.schema__h {
  font-family: var(--font-mono); font-size: calc(0.66 * var(--u));
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--fr-text-4);
  margin-bottom: calc(0.85 * var(--u));
}
.fld {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  gap: calc(0.7 * var(--u));
  height: calc(2.2 * var(--u));
  border-bottom: 1px solid var(--fr-line);
  font-size: calc(0.88 * var(--u));
}
.fld:last-child { border-bottom: 0; }
.fld b { font-weight: 500; color: var(--fr-text); }
.fld__t {
  font-family: var(--font-mono); font-size: calc(0.68 * var(--u));
  letter-spacing: 0.06em; color: var(--fr-text-4);
  padding: calc(0.15 * var(--u)) calc(0.45 * var(--u));
  border: 1px solid var(--fr-line-2); border-radius: calc(0.25 * var(--u));
}
.fld--new { background: var(--fr-soft); margin: 0 calc(-0.5 * var(--u));
  padding: 0 calc(0.5 * var(--u)); border-radius: calc(0.3 * var(--u)); }
.fld--new .fld__t { border-color: var(--fr-accent); color: var(--fr-accent); }

/* --- §3 the same data, other shapes -------------------------------------- */
.shapes {
  display: flex; align-items: center; gap: calc(0.4 * var(--u));
  padding: calc(0.75 * var(--u)) calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line);
}
.kb { display: flex; gap: calc(0.8 * var(--u)); padding: calc(1.1 * var(--u));
  align-items: flex-start; overflow: hidden; }
.kb__c {
  flex: 1 1 0; min-width: 0;
  background: var(--fr-bg-2); border: 1px solid var(--fr-line);
  border-radius: calc(0.5 * var(--u)); padding: calc(0.6 * var(--u));
}
.kb__h {
  display: flex; align-items: center; justify-content: space-between;
  font-size: calc(0.8 * var(--u)); font-weight: 500; color: var(--fr-text-2);
  padding: calc(0.15 * var(--u)) calc(0.3 * var(--u)) calc(0.65 * var(--u));
}
.kb__h span { font-family: var(--font-mono); color: var(--fr-text-4); }
.kb__k {
  background: var(--fr-bg); border: 1px solid var(--fr-line);
  border-radius: calc(0.35 * var(--u));
  padding: calc(0.6 * var(--u)); margin-bottom: calc(0.45 * var(--u));
}
.kb__k b { display: block; font-weight: 500; font-size: calc(0.85 * var(--u));
  color: var(--fr-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb__k div { display: flex; align-items: center; justify-content: space-between;
  margin-top: calc(0.4 * var(--u)); font-size: calc(0.74 * var(--u));
  color: var(--fr-text-4); }
.kb__k--on { box-shadow: inset 0 0 0 1px var(--fr-accent); }

/* --- §4 one record ------------------------------------------------------- */
.rec { display: grid; grid-template-columns: 1fr calc(19 * var(--u)); }
.rec__side { border-left: 1px solid var(--fr-line); padding: calc(1.1 * var(--u)); }
.rec__hd { display: flex; align-items: center; gap: calc(0.8 * var(--u));
  padding: calc(1.1 * var(--u)); border-bottom: 1px solid var(--fr-line); }
.rec__hd .av { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u));
  font-size: calc(1 * var(--u)); }
.rec__hd h4 { font-family: var(--font-display); font-weight: 500;
  font-size: calc(1.35 * var(--u)); letter-spacing: -0.025em; color: var(--fr-text); }
.kv { display: grid; grid-template-columns: calc(7 * var(--u)) 1fr;
  gap: calc(0.5 * var(--u)) calc(0.8 * var(--u)); font-size: calc(0.85 * var(--u)); }
.kv dt { font-family: var(--font-mono); font-size: calc(0.7 * var(--u));
  letter-spacing: 0.06em; color: var(--fr-text-4); padding: calc(0.3 * var(--u)) 0; }
.kv dd { color: var(--fr-text); padding: calc(0.3 * var(--u)) 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.rgraph { position: relative; height: calc(19 * var(--u)); margin: calc(1.1 * var(--u)); }
.rgraph svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.rgraph line { stroke: var(--fr-line-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.rgraph__n {
  position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: calc(0.4 * var(--u));
  padding: calc(0.35 * var(--u)) calc(0.6 * var(--u));
  background: var(--fr-bg); border: 1px solid var(--fr-line-2);
  border-radius: calc(0.35 * var(--u));
  font-size: calc(0.76 * var(--u)); color: var(--fr-text-2); white-space: nowrap;
}
.rgraph__n--c { border-color: var(--fr-accent); color: var(--fr-text); font-weight: 500; }

/* --- §5 the numbers ----------------------------------------------------- */
.pills { display: flex; align-items: center; gap: calc(0.4 * var(--u)); flex-wrap: wrap;
  padding: calc(0.75 * var(--u)) calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line); }
.mgrid { width: 100%; font-size: calc(0.85 * var(--u)); }
.mgrid__r {
  display: grid; grid-template-columns: 1.7fr repeat(5, 1fr);
  align-items: center; gap: calc(0.6 * var(--u));
  height: calc(2.3 * var(--u)); padding: 0 calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line);
}
.mgrid__r > * { text-align: right; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.mgrid__r > *:first-child { text-align: left; }
.mgrid__r--h { height: calc(2 * var(--u)); background: var(--fr-bg-2);
  font-family: var(--font-mono); font-size: calc(0.68 * var(--u));
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--fr-text-4); }
.mgrid__r--sum { font-weight: 500; color: var(--fr-text); background: var(--fr-bg-2); }
.mgrid__r--sub > *:first-child { padding-left: calc(1.1 * var(--u)); color: var(--fr-text-3); }

/* --- §6 the AI layer ---------------------------------------------------- */
.cop { padding: calc(1.1 * var(--u)); }
.cop__ask {
  display: flex; align-items: center; gap: calc(0.6 * var(--u));
  height: calc(2.6 * var(--u)); padding: 0 calc(0.85 * var(--u));
  border: 1px solid var(--fr-accent); border-radius: calc(0.45 * var(--u));
  background: var(--fr-soft);
  font-size: calc(0.95 * var(--u)); color: var(--fr-text);
}
.cop__ask .k { font-family: var(--font-mono); font-size: calc(0.7 * var(--u));
  letter-spacing: 0.08em; color: var(--fr-accent); flex: none; }
.cop__q { overflow: hidden; white-space: nowrap; }
.cop__caret { display: inline-block; width: 1px; height: calc(1.1 * var(--u));
  background: var(--fr-accent); vertical-align: -0.2em; }
.cop__out { margin-top: calc(0.9 * var(--u)); border: 1px solid var(--fr-line);
  border-radius: calc(0.5 * var(--u)); overflow: hidden; }
.cop__note { padding: calc(0.8 * var(--u)) calc(1 * var(--u));
  font-size: calc(0.85 * var(--u)); color: var(--fr-text-2);
  border-bottom: 1px solid var(--fr-line); }
.cop__blocks { display: grid; grid-template-columns: 1fr 1fr; }
.cop__blocks > * { padding: calc(1 * var(--u)); }
.cop__blocks > * + * { border-left: 1px solid var(--fr-line); }

/* --- §7 automation ------------------------------------------------------ */
.dag { display: flex; align-items: center; gap: 0; padding: calc(1.3 * var(--u));
  flex-wrap: wrap; row-gap: calc(0.8 * var(--u)); }
.node {
  display: flex; align-items: center; gap: calc(0.5 * var(--u));
  padding: calc(0.55 * var(--u)) calc(0.75 * var(--u));
  background: var(--fr-bg); border: 1px solid var(--fr-line-2);
  border-radius: calc(0.4 * var(--u));
  font-size: calc(0.82 * var(--u)); color: var(--fr-text); white-space: nowrap;
}
.node i { width: calc(0.5 * var(--u)); height: calc(0.5 * var(--u)); border-radius: 50%;
  background: var(--fr-text-4); flex: none; }
.node--gate { border-color: var(--fr-accent); }
.node--gate i { background: var(--fr-accent); }
.wire { width: calc(1.6 * var(--u)); height: 1px; background: var(--fr-line-2); flex: none; }

/* --- §8 the audit ledger ----------------------------------------------- */
.led__r {
  display: grid; grid-template-columns: calc(7.5 * var(--u)) 1fr auto;
  align-items: center; gap: calc(0.9 * var(--u));
  height: calc(2.4 * var(--u)); padding: 0 calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line);
  font-size: calc(0.84 * var(--u));
}
.led__r > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led__t { font-family: var(--font-mono); font-size: calc(0.7 * var(--u));
  letter-spacing: 0.04em; color: var(--fr-text-4); }
.led__d b { font-weight: 500; color: var(--fr-text); }
.was { color: var(--fr-text-4); text-decoration: line-through; }

/* --- §9 what flows in --------------------------------------------------- */
.src { display: grid; grid-template-columns: 1.25fr 1fr; }
.src > * + * { border-left: 1px solid var(--fr-line); }
.src__url {
  display: flex; align-items: center; gap: calc(0.5 * var(--u));
  margin: calc(1.1 * var(--u)) calc(1.1 * var(--u)) calc(0.8 * var(--u));
  padding: calc(0.5 * var(--u)) calc(0.6 * var(--u));
  background: var(--fr-bg-2); border: 1px solid var(--fr-line);
  border-radius: calc(0.35 * var(--u));
  font-family: var(--font-mono); font-size: calc(0.74 * var(--u));
  color: var(--fr-text-2); overflow: hidden;
}
.src__url b { color: var(--fr-accent); font-weight: 700; flex: none; }
.src__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail {
  display: grid; grid-template-columns: 1fr auto; gap: calc(0.5 * var(--u));
  padding: calc(0.65 * var(--u)) calc(1.1 * var(--u));
  border-bottom: 1px solid var(--fr-line); font-size: calc(0.82 * var(--u));
}
.mail > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail b { font-weight: 500; color: var(--fr-text); }
.mail em { font-style: normal; color: var(--fr-text-4); }