/* =============================================================
   Organizational Frequency — Mission Capture  (Build 1A)
   =============================================================
   Its own place in the house. Same fonts, same restraint as
   /signal and /runtime, but a cooler "frequency" accent instead
   of KAIROS heat-amber — amber stays sacred to diagnosis. This
   is a capture surface, not a diagnostic chamber.
   ============================================================= */

:root {
  /* graphite ground — the house floor */
  --gr-0: #050608;
  --gr-1: #07080c;
  --gr-2: #0c0d12;
  --gr-3: #11131a;
  --gr-4: #181b25;

  /* ivory ink */
  --ink:   #ebe9e2;
  --ink-2: #b8b5ad;
  --ink-3: #6e6c66;
  --ink-4: #44433f;

  /* frequency accent — a cool resonant blue-grey, the OF tone.
     Distinct from KAIROS amber. Used sparingly, for the live
     pulse and the spine marks. */
  --freq:   #6f9bb5;
  --freq-2: #4f7388;
  --freq-3: #2c4150;
  --freq-4: #13202a;

  --rule:      #14161e;
  --rule-soft: #0e1016;
  --rule-edge: #1c2030;

  --serif: "Newsreader", "Noto Serif", Georgia, serif;
  --sans:  "Inter", "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --breath: 5500ms cubic-bezier(.4,0,.2,1);
  --slow:   1600ms cubic-bezier(.4,0,.2,1);
  --medium:  800ms cubic-bezier(.4,0,.2,1);
  --quick:   320ms cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--gr-1);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100%;
}

body {
  /* one warm-cool directional light at upper center — the axis */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(111,155,181,0.06), transparent 60%),
    var(--gr-1);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* faint draftsman grid at the base */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 64px 64px;
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
}

/* ============================ TOP ============================ */
.of-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 40px;
  border-bottom: 1px solid var(--rule);
}
.of-mark {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 12px;
}
.of-mark .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--freq);
  box-shadow: 0 0 10px rgba(111,155,181,0.6);
  animation: ofBreath var(--breath) infinite;
}
@keyframes ofBreath {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.25); }
}
.of-house {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.of-house a { color: var(--ink-2); text-decoration: none; }
.of-house a:hover { color: var(--ink); }

/* ============================ STAGE ========================== */
.of-stage {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 56px 32px 40px;
  display: flex;
  flex-direction: column;
}

.of-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--freq);
  margin-bottom: 18px;
}
.of-eyebrow em { color: var(--ink-2); font-style: italic; text-transform: none; letter-spacing: 0.04em; }

.of-lede {
  font-size: 25px;
  line-height: 1.5;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  text-wrap: pretty;
}
.of-lede em { font-style: italic; color: var(--ink); }
.of-sub {
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-3);
  margin-bottom: 36px;
  max-width: 56ch;
  text-wrap: pretty;
}

/* progress ticks — five quiet marks, not a bar */
.of-ticks {
  display: flex;
  gap: 8px;
  margin-bottom: 30px;
}
.of-tick {
  width: 26px; height: 2px;
  background: var(--rule-edge);
  transition: background var(--medium);
}
.of-tick.is-done { background: var(--freq-2); }
.of-tick.is-now  { background: var(--freq); box-shadow: 0 0 8px rgba(111,155,181,0.5); }

/* ===================== CONVERSATION STREAM ================== */
.of-stream {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-bottom: 28px;
}
/* Resting state is visible; the animation only fades it in, so
   reduced-motion and screenshot contexts (animations disabled)
   still show every turn. */
.of-turn { animation: ofRise var(--slow); }
@keyframes ofRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.of-turn.aeon .of-who,
.of-turn.reader .of-who {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.of-turn.aeon .of-who   { color: var(--freq); }
.of-turn.reader .of-who { color: var(--ink-4); }

.of-turn.aeon .of-said {
  font-size: 20px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.of-turn.aeon .of-said em { font-style: italic; }

.of-turn.reader .of-said {
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 300;
  color: var(--ink-2);
  padding-left: 16px;
  border-left: 1px solid var(--rule-edge);
}

/* thinking — three slow dots, no copy */
.of-thinking { display: flex; gap: 7px; padding: 6px 0; }
.of-thinking span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-4);
  animation: ofThink 1800ms ease-in-out infinite;
}
.of-thinking span:nth-child(2) { animation-delay: 300ms; }
.of-thinking span:nth-child(3) { animation-delay: 600ms; }
@keyframes ofThink {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  50%      { opacity: 0.9;  transform: translateY(-2px); }
}

/* ========================= COMPOSER ========================= */
.of-composer {
  position: relative;
  z-index: 2;
  margin-top: auto;
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  transition: opacity var(--medium);
}
.of-composer.is-held { opacity: 0.4; pointer-events: none; }
.of-field {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.of-input {
  flex: 1;
  background: var(--gr-2);
  border: 1px solid var(--rule-edge);
  border-radius: 2px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.6;
  padding: 14px 16px;
  resize: none;
  min-height: 52px;
  max-height: 180px;
  transition: border-color var(--quick), background var(--quick);
}
.of-input::placeholder { color: var(--ink-4); }
.of-input:focus {
  outline: none;
  border-color: var(--freq-3);
  background: var(--gr-3);
}
.of-send {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--freq-3);
  border-radius: 2px;
  color: var(--freq);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 16px 20px;
  cursor: pointer;
  transition: all var(--quick);
}
.of-send:hover { background: var(--freq-4); color: var(--ink); border-color: var(--freq-2); }
.of-send:disabled { opacity: 0.4; cursor: not-allowed; }
.of-hint {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--ink-4);
  margin-top: 10px;
  text-transform: uppercase;
}

/* ===================== SPINE / SUMMARY ====================== */
.of-spine {
  position: relative;
  z-index: 2;
  margin-top: 8px;
  animation: ofRise var(--slow);
}
.of-spine-head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--freq);
  margin-bottom: 6px;
}
.of-spine-title {
  font-size: 23px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 26px;
  text-wrap: pretty;
}
.of-spine-title em { font-style: italic; }

.of-cards { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; }
.of-card {
  border: 1px solid var(--rule-edge);
  border-radius: 2px;
  background: var(--gr-2);
  padding: 18px 20px;
}
.of-card .oc-kind {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--freq);
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.of-card .oc-kind .oc-id { color: var(--ink-4); }
.of-card .oc-name {
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  margin-bottom: 8px;
  line-height: 1.4;
}
.of-card .oc-row {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  display: flex;
  gap: 10px;
}
.of-card .oc-row .oc-k {
  color: var(--ink-4);
  flex: 0 0 132px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding-top: 3px;
}
.of-card .oc-row .oc-v { flex: 1; }
.of-pill {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--freq);
  border: 1px solid var(--freq-3);
  border-radius: 2px;
  padding: 2px 8px;
}

/* relationship line */
.of-rel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  text-align: center;
  padding: 12px 0;
  text-transform: uppercase;
}
.of-rel b { color: var(--ink); font-weight: 500; }
.of-rel .arr { color: var(--freq); margin: 0 8px; }

/* seeds */
.of-seeds { display: flex; flex-direction: column; gap: 10px; margin-bottom: 26px; }
.of-seed {
  border-left: 2px solid var(--freq-3);
  padding: 8px 0 8px 16px;
}
.of-seed .os-kind {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--freq-2);
  margin-bottom: 5px;
}
.of-seed .os-text {
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-2);
  text-wrap: pretty;
}

.of-foot-note {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-3);
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  text-wrap: pretty;
}
.of-foot-note a { color: var(--freq); text-decoration: none; border-bottom: 1px solid var(--freq-3); }
.of-foot-note a:hover { color: var(--ink); }

.of-restart {
  background: none;
  border: none;
  color: var(--ink-4);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 18px;
  padding: 0;
}
.of-restart:hover { color: var(--ink-2); }

.hidden { display: none !important; }

/* ===================== TIER-0 RESEARCH ====================== */
.of-research-slot { display: block; }
.of-rp-aeon { margin: 14px 0 18px; }
.of-who2 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--freq);
  margin-bottom: 9px;
}
.of-rp-say {
  font-size: 18px;
  line-height: 1.55;
  font-weight: 300;
  color: var(--ink);
  text-wrap: pretty;
}
.of-rp-narr {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* frequency dimensions */
.of-dims { display: flex; flex-direction: column; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: 2px; overflow: hidden; }
.of-dim { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 14px; align-items: center; background: var(--gr-2); padding: 11px 14px; }
.of-dim-name { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.of-dim-est { font-family: var(--sans); font-size: 13.5px; font-weight: 300; color: var(--ink); }
.of-dim-conf { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--freq); border: 1px solid var(--freq-3); border-radius: 2px; padding: 2px 7px; white-space: nowrap; }
.of-dim-foot { font-family: var(--sans); font-size: 12px; font-weight: 300; line-height: 1.6; color: var(--ink-3); margin-top: 12px; text-wrap: pretty; }

.of-risks { margin: 0; padding-left: 18px; }
.of-risks li { font-family: var(--sans); font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--ink-2); margin-bottom: 4px; }

/* confirm control */
.of-confirm { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 6px; }
.of-confirm-q { font-family: var(--sans); font-size: 14px; font-weight: 300; color: var(--ink-2); }
.of-cbtn {
  background: transparent;
  border: 1px solid var(--freq-3);
  border-radius: 2px;
  color: var(--freq);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: all var(--quick);
}
.of-cbtn:hover { background: var(--freq-4); color: var(--ink); border-color: var(--freq-2); }
.of-confirm-ack { font-family: var(--sans); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-3); text-wrap: pretty; max-width: 60ch; }

/* validation cards (1C) */
.of-vcard { border: 1px solid var(--rule-edge); border-radius: 2px; background: var(--gr-2); padding: 18px 20px; }
.of-vq { font-size: 17px; font-weight: 300; line-height: 1.5; color: var(--ink); margin-bottom: 4px; text-wrap: pretty; }
.of-vq em { font-style: italic; color: var(--ink); }
.of-vsub { font-family: var(--sans); font-size: 13px; font-weight: 300; color: var(--ink-3); margin-bottom: 14px; }
.of-vbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.of-vmeta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin-top: 14px; }

@media (max-width: 640px) {
  .of-top { padding: 20px 22px; }
  .of-stage { padding: 40px 22px 32px; }
  .of-lede { font-size: 22px; }
  .of-turn.aeon .of-said { font-size: 18px; }
  .of-card .oc-row { flex-direction: column; gap: 2px; }
  .of-card .oc-row .oc-k { flex: none; }
}