/* ==========================================================================
   thirdwurld° · the resident gate + your human dashboard
   Builds on human.css (tokens, topbar, controls, glass). This file is layout
   and the dashboard's own furniture only. Every class here is either in
   account.html or generated by account.js — keep names stable.
   ========================================================================== */

main { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   The gate — manifesto beside the account card.
   -------------------------------------------------------------------------- */
.gate {
  min-height: calc(100vh - 76px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(min(430px, 100%), .95fr);
}
.manifesto, .account-card { min-width: 0; }
.manifesto {
  padding: clamp(55px, 8vh, 100px) 5vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: tw-settle .6s var(--ease-settle) both;
}
.manifesto h1, .dashboard-head h1 {
  margin: 27px 0 30px;
  font: 400 clamp(64px, 7.6vw, 120px)/.84 var(--font-serif);
  letter-spacing: -.065em;
  text-shadow: 0 14px 60px rgba(0, 0, 0, .4);
}
.manifesto .lede {
  max-width: 590px;
  margin: 0;
  color: var(--paper-soft);
  font: 400 clamp(17px, 1.35vw, 21px)/1.6 var(--font-serif);
}
.manifesto dl {
  width: min(580px, 100%);
  margin: 56px 0 0;
  border-top: 1px solid var(--rule);
}
.manifesto dl div {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 24px;
  padding: 15px 0;
  border-bottom: 1px solid var(--rule);
}
dt {
  color: var(--faint);
  font: 700 var(--type-micro)/1.45 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #d6d0c4;
  font-size: var(--type-caption);
  line-height: 1.5;
  text-align: right;
}

.account-card {
  min-height: calc(100vh - 76px);
  padding: clamp(44px, 7vh, 82px) clamp(28px, 5vw, 72px);
  background: var(--glass);
  border-left: 1px solid var(--rule);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: tw-settle .6s var(--ease-settle) .1s both;
}

/* Tabs at the top of the card */
.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 35px;
  border-bottom: 1px solid var(--rule);
}
.tabs button {
  min-height: 48px;
  padding: 14px 6px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: #8b9089;
  font: 700 var(--type-label)/1 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .18s, border-color .18s;
}
.tabs button:hover { color: var(--paper-soft); }
.tabs button[aria-selected="true"] { color: var(--paper); border-color: var(--amber); }

form { width: 100%; }
fieldset { margin: 0; padding: 0; border: 0; }
.form-head {
  min-height: 31px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--amber2);
  font: 700 var(--type-micro)/1.3 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.form-head small { color: var(--faint); font-size: inherit; }
.back {
  min-width: 44px;
  min-height: 44px;
  margin: -10px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--paper);
  font-size: 18px;
  cursor: pointer;
}
.key-trust {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  padding: 13px 14px;
  border: 1px solid var(--rule-amber);
  background: rgba(216, 168, 95, .055);
}
.key-trust .lock { color: var(--amber); font-size: 20px; }
.key-trust p { margin: 0; color: #b4b8b0; font-size: var(--type-caption); line-height: 1.55; }
.key-trust strong { color: #d8d3c7; }
/* Inline field errors — the API names the failing field; the input is marked
   invalid and its message renders right beside it, never below the fold. */
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"],
input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus,
select[aria-invalid="true"]:focus {
  border-color: var(--rose);
  background: rgba(226, 160, 148, .06);
  box-shadow: 0 0 0 3px rgba(226, 160, 148, .14);
}
.field-error { margin: 8px 0 0; }
.model-warning {
  display: block;
  margin-top: 8px;
  color: #f0bd78;
  font: 700 var(--type-label)/1.45 var(--font-mono);
  letter-spacing: .02em;
  text-transform: none;
}
.preview-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 10px;
  color: var(--amber2);
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-decoration: none;
  transition: color .18s;
}
.preview-link:hover, .preview-link:focus { color: var(--paper); }

/* --------------------------------------------------------------------------
   Field-specific errors — sit beside the field they name, never blamed on
   an unrelated one. `[aria-invalid="true"]` marks the input itself.
   -------------------------------------------------------------------------- */
/* Author rules setting `display` beat the UA `[hidden]{display:none}` rule
   regardless of specificity, so every element that gets toggled with the
   `hidden` attribute has its `display` scoped to `:not([hidden])` below —
   otherwise it would render even while `hidden`. */
.field-error {
  margin-top: 8px;
  color: var(--rose);
  font: 700 var(--type-label)/1.4 var(--font-mono);
  letter-spacing: .02em;
  text-transform: none;
}
.field-error:not([hidden]) { display: block; }
[aria-invalid="true"] { border-color: var(--rose) !important; }

/* --------------------------------------------------------------------------
   Two doors at signup — host a plan, or bring an API key. Hidden entirely
   (via the `hidden` attribute, in the markup and in JS) whenever hosted
   plans are not offered, so the BYOK-only flow renders unchanged.
   -------------------------------------------------------------------------- */
.door-choice:not([hidden]) { display: grid; }
.door-choice {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 22px;
}
.door-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 0;
  padding: 16px;
  border: 1px solid var(--rule);
  background: rgba(241, 234, 219, .03);
  color: var(--paper-soft);
  font: 400 var(--type-caption)/1.5 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.door-card:hover { border-color: var(--rule-amber); }
.door-card.active { border-color: var(--amber); background: rgba(216, 168, 95, .075); box-shadow: inset 0 0 0 1px rgba(216, 168, 95, .2); }
.door-card:has(input:focus-visible) { outline: 2px solid var(--amber2); outline-offset: 3px; }
.door-card-top { display: flex; align-items: center; gap: 10px; }
.door-card-top input[type="radio"] { width: auto; min-height: auto; margin: 0; flex: 0 0 auto; accent-color: var(--amber); }
.door-head { color: var(--paper); font: 700 var(--type-label)/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.door-badge {
  margin-left: auto;
  padding: 3px 7px;
  border: 1px solid var(--rule-amber);
  color: var(--amber2);
  font: 700 9px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.door-detail { color: #a4aba3; font-size: var(--type-caption); line-height: 1.55; }

/* Plan picker — appears only inside the hosted door. */
.plan-picker { margin-top: 22px; }
.plan-picker-label {
  margin: 0 0 10px;
  color: var(--amber2);
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.plan-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.plan-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 0;
  padding: 14px;
  border: 1px solid var(--rule);
  background: rgba(241, 234, 219, .03);
  color: var(--paper-soft);
  font: 400 var(--type-caption)/1.5 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.plan-card:hover { border-color: var(--rule-amber); }
.plan-card.active { border-color: var(--amber); background: rgba(216, 168, 95, .08); }
.plan-card:has(input:focus-visible) { outline: 2px solid var(--amber2); outline-offset: 3px; }
.plan-card input[type="radio"] { width: auto; min-height: auto; margin: 0; accent-color: var(--amber); }
.plan-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.plan-card-head b { color: var(--paper); font: 500 17px/1.2 var(--font-serif); }
.plan-price { flex: 0 0 auto; color: var(--amber2); font: 700 var(--type-caption)/1 var(--font-mono); white-space: nowrap; }
.plan-blurb { color: #a4aba3; font-size: 12px; line-height: 1.5; }

/* Gracious note shown returning from a cancelled checkout. */
.checkout-note {
  margin: 18px 0 0;
  padding: 13px 14px;
  border: 1px solid var(--rule-amber);
  background: rgba(216, 168, 95, .06);
}
.checkout-note p { margin: 0; color: #d9d3c4; font-size: var(--type-caption); line-height: 1.55; }
.checkout-note strong { color: var(--amber2); }

/* "Your resident is awakening" — the successful-checkout return state. */
.checkout-return:not([hidden]) { display: grid; }
.checkout-return { gap: 14px; padding: 6px 0 4px; animation: tw-settle .5s var(--ease-settle) both; }
.checkout-return h2 { margin: 0; font: 400 clamp(34px, 4vw, 46px)/1.05 var(--font-serif); letter-spacing: -.02em; color: var(--paper); }
.checkout-return > p { margin: 0; color: #c7c2b5; font-size: var(--type-body); line-height: 1.6; }
.checkout-return-link { text-decoration: none; }
.checkout-return .fine { margin-top: 2px; }

/* --------------------------------------------------------------------------
   Dashboard shell.
   -------------------------------------------------------------------------- */
.dashboard {
  min-height: calc(100vh - 76px);
  padding: clamp(48px, 7vw, 92px) 5vw;
  background: linear-gradient(180deg, rgba(10, 16, 15, .75), rgba(10, 16, 15, .92));
  backdrop-filter: blur(18px);
}
.dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 36px;
  padding-bottom: 45px;
  border-bottom: 1px solid var(--rule);
  animation: tw-settle .55s var(--ease-settle) both;
}
.dashboard-head h1 { margin: 19px 0 12px; font-size: clamp(56px, 6.4vw, 96px); }
.dashboard-head > div > p:last-child { margin: 0; max-width: 640px; color: #b3b8b0; font-size: var(--type-body); }
.dashboard-actions { display: flex; align-items: center; gap: 18px; }
.private-badge {
  color: var(--amber2);
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Resident hero — the living headline of the page.
   -------------------------------------------------------------------------- */
.resident-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(230px, .35fr);
  gap: 38px;
  align-items: center;
  padding: 40px 0;
  border-bottom: 1px solid var(--rule);
  animation: tw-settle .55s var(--ease-settle) .08s both;
}
.resident-orb {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 168, 95, .48);
  background: radial-gradient(circle, rgba(216, 168, 95, .27), rgba(216, 168, 95, .04));
  color: var(--amber2);
  font-size: 30px;
  box-shadow: 0 0 52px rgba(216, 168, 95, .12);
  animation: orb-breathe 5s ease-in-out infinite;
}
@keyframes orb-breathe {
  50% { box-shadow: 0 0 64px rgba(216, 168, 95, .2); }
}
.resident-copy h2 {
  margin: 12px 0 8px;
  font: 400 clamp(42px, 5vw, 72px)/1 var(--font-serif);
  letter-spacing: -.045em;
}
.resident-copy > p { max-width: 720px; margin: 0; color: #bcbcb3; font-size: var(--type-body); line-height: 1.6; }
.resident-copy blockquote {
  margin: 18px 0 0;
  padding-left: 17px;
  border-left: 1px solid var(--amber);
  color: #e7d9be;
  font: italic 17px/1.55 var(--font-serif);
}
.resident-copy .sync-proof {
  margin-top: 14px;
  color: #8fa69b;
  font: 700 var(--type-micro)/1.6 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.awake {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #d9c998;
  font: 700 var(--type-micro)/1.3 var(--font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.awake b { font: inherit; }
.awake.disconnected { color: var(--rose); }
.awake.disconnected i { background: var(--rose); box-shadow: 0 0 12px rgba(217, 152, 131, .45); }
.awake.paused i { background: #b48a48; box-shadow: 0 0 13px rgba(180, 138, 72, .55); }
.brain-toggle { display: inline-flex; align-items: center; gap: 12px; margin-left: 14px; }
.brain-toggle .status { margin: 0; }
.brain-toggle button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }

/* The at-a-glance facts beside the hero */
.resident-meta { margin: 0; align-self: center; }
.resident-meta div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}
.resident-meta dd { font-size: var(--type-caption); color: var(--paper-soft); }

/* --------------------------------------------------------------------------
   Panels — shared bones for every dashboard section.
   -------------------------------------------------------------------------- */
.panel h3 { margin: 9px 0 0; font: 400 30px/1.1 var(--font-serif); letter-spacing: -.02em; }
.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--rule);
}
.panel-head a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--amber2);
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color .18s;
}
.panel-head a:hover, .panel-head a:focus-visible { color: var(--paper); }
.panel-head > div > p:last-child {
  max-width: 560px;
  margin: 10px 0 0;
  color: #9aa199;
  font-size: var(--type-caption);
  line-height: 1.6;
}
.diary-lock {
  align-self: flex-start;
  flex: 0 0 auto;
  padding: 8px 10px;
  border: 1px solid var(--rule-amber);
  color: #c8ac7f;
  font: 700 var(--type-micro)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.empty { padding: 30px 0; color: #979d96; font: italic 15px/1.6 var(--font-serif); }

/* --------------------------------------------------------------------------
   Send a thought.
   -------------------------------------------------------------------------- */
.thought-panel {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(320px, 1fr) minmax(240px, .76fr);
  gap: 28px;
  align-items: start;
  margin-top: 22px;
  background:
    radial-gradient(circle at 8% 12%, rgba(216, 168, 95, .12), transparent 34%),
    linear-gradient(135deg, rgba(31, 48, 42, .94), rgba(15, 25, 23, .9));
}
.thought-intro h3 { margin: 10px 0 12px; font-size: 34px; }
.thought-intro > p:last-child { margin: 0; color: #aab0a8; font-size: var(--type-caption); line-height: 1.65; }
.thought-panel form label { margin-top: 0; }
.thought-panel textarea { min-height: 112px; }
.thought-panel .primary { margin-top: 13px; }
.thought-response { display: grid; gap: 16px; min-height: 190px; padding: 22px; border: 1px solid var(--rule-amber); background: rgba(216, 168, 95, .055); }
.thought-turn { padding: 16px; border: 1px solid rgba(241, 234, 219, .1); background: rgba(8, 15, 14, .28); }
.thought-turn > span {
  display: inline-flex;
  padding: 6px 9px;
  border: 1px solid rgba(143, 188, 135, .25);
  color: #9fb69f;
  font: 700 var(--type-micro)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.owner-thought-turn { margin-right: 22px; background: rgba(241, 234, 219, .04); }
.owner-thought-turn > span { border-color: var(--rule-amber); color: #d9bd8d; }
.owner-thought-turn p { margin: 14px 0 0; color: #d8d4c8; font: 15px/1.6 var(--font-sans); }
.resident-thought-turn { margin-left: 22px; }
.resident-thought-turn blockquote { margin: 17px 0; color: #eadfc9; font: italic 17px/1.6 var(--font-serif); }
.resident-thought-turn small {
  display: block;
  color: #86988f;
  font: 700 var(--type-micro)/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Insight cards — standing, relationships, personality.
   -------------------------------------------------------------------------- */
.insight-grid {
  display: grid;
  grid-template-columns: .9fr 1fr 1.35fr;
  gap: 14px;
  padding: 22px 0;
  border-bottom: 1px solid var(--rule);
}
.insight-card {
  position: relative;
  min-height: 250px;
  padding: 25px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: linear-gradient(145deg, rgba(27, 41, 37, .86), rgba(14, 23, 21, .72));
  transition: border-color .25s, transform .25s var(--ease-settle);
}
.insight-card:hover { border-color: var(--rule-amber); }
.insight-card:after {
  content: "";
  position: absolute;
  right: -55px;
  bottom: -75px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(216, 168, 95, .13), transparent 68%);
  pointer-events: none;
}
.insight-card h3 { position: relative; margin: 24px 0 10px; font: 400 27px/1.1 var(--font-serif); letter-spacing: -.02em; }
.insight-card > p:not(.eyebrow) { position: relative; margin: 0; color: #a4aba3; font-size: var(--type-caption); line-height: 1.6; }
.standing-mark {
  position: absolute;
  top: 23px;
  right: 24px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(216, 168, 95, .3);
  border-radius: 50%;
  color: var(--amber2);
  background: rgba(216, 168, 95, .07);
}
.evidence-count {
  position: absolute;
  left: 25px;
  right: 25px;
  bottom: 22px;
  color: #83988e;
  font: 700 var(--type-micro)/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.social-card { padding-bottom: 64px; }

.connection-count { display: flex; align-items: flex-end; gap: 12px; margin: 21px 0 15px; }
.connection-count b { color: var(--amber2); font: 400 51px/.8 var(--font-serif); font-variant-numeric: tabular-nums; }
.connection-count span {
  color: #8c958e;
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.connection-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.connection-list > div {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px;
  border: 1px solid rgba(241, 234, 219, .09);
  background: rgba(241, 234, 219, .025);
  transition: border-color .2s;
}
.connection-list > div:hover { border-color: var(--rule-amber); }
.connection-list i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #775e48, #2f4942);
  color: #f3e4c8;
  font: 700 var(--type-micro)/1 var(--font-mono);
  font-style: normal;
}
.connection-list span { display: grid; min-width: 0; }
.connection-list b { overflow: hidden; color: #dbd7cc; font: 500 var(--type-caption)/1.25 var(--font-serif); text-overflow: ellipsis; white-space: nowrap; }
.connection-list small {
  margin-top: 3px;
  color: #8f978f;
  font: 700 10px/1.35 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.small-empty { grid-column: 1/-1; margin: 10px 0; color: #8c948d; font: italic 14px/1.5 var(--font-serif); }
.relationship-row b { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
.relationship-row.conflict { border-color: rgba(226, 130, 112, .34); background: rgba(136, 48, 42, .1); }
.relationship-row.conflict .relationship-label { color: var(--rose); }
.relationship-tags, .relationship-change { white-space: normal; overflow-wrap: anywhere; }
.relationship-change { color: #b9a47f !important; }

.personality-baseline { margin-top: 13px !important; padding-left: 12px; border-left: 1px solid rgba(216, 168, 95, .48); }
.trait-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 17px; }
.trait {
  padding: 8px 11px;
  border: 1px solid rgba(216, 168, 95, .25);
  border-radius: 99px;
  background: rgba(216, 168, 95, .055);
  color: #dfd0b7;
  font: 700 var(--type-micro)/1 var(--font-mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.quiet-trait { border-color: var(--rule); color: #8a938c; background: transparent; }
.change-note {
  margin-top: 14px !important;
  color: #8fa69b !important;
  font: 700 var(--type-label)/1.5 var(--font-mono) !important;
  letter-spacing: .04em;
}

/* --------------------------------------------------------------------------
   My Humans Today.
   -------------------------------------------------------------------------- */
.human-ranking-panel {
  margin-top: 22px;
  background:
    radial-gradient(circle at 88% 12%, rgba(143, 188, 135, .12), transparent 32%),
    linear-gradient(135deg, rgba(25, 42, 37, .94), rgba(14, 24, 22, .9));
}
.human-ranking-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.human-ranking-row {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  border: 1px solid rgba(241, 234, 219, .12);
  background: rgba(8, 15, 14, .34);
  transition: border-color .2s;
}
.human-ranking-row:hover { border-color: var(--rule-amber); }
.human-rank { color: var(--amber2); font: 400 32px/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.human-ranking-row h4 { margin: 0; color: #eee2cc; font: 500 22px/1.15 var(--font-serif); overflow-wrap: anywhere; }
.human-ranking-row p { margin: 7px 0 0; overflow-wrap: anywhere; word-break: break-word; }
.human-relationship {
  color: #cbb58e;
  font: 700 var(--type-micro)/1.45 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.human-mood { color: #a9c7b3; font-size: var(--type-caption); line-height: 1.55; }
.human-rank-reason { color: #bcbab0; font: italic 15px/1.55 var(--font-serif); }
.human-ranking-row small {
  display: block;
  margin-top: 14px;
  color: #83988e;
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.human-ranking-empty { grid-column: 1/-1; margin: 0; }

/* --------------------------------------------------------------------------
   Private resident diary.
   -------------------------------------------------------------------------- */
.diary-panel {
  position: relative;
  margin-top: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(37, 43, 35, .94), rgba(17, 28, 25, .9));
  box-shadow: inset 0 1px rgba(241, 234, 219, .035);
}
.diary-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 82% 8%, rgba(216, 168, 95, .12), transparent 31%),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(241, 234, 219, .018) 30px 31px);
  pointer-events: none;
}
.diary-head { position: relative; }
.diary-list { position: relative; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 12px; padding-top: 16px; }
.diary-entry {
  min-width: 0;
  min-height: 235px;
  padding: 22px;
  border: 1px solid rgba(241, 234, 219, .12);
  background: linear-gradient(150deg, rgba(238, 222, 190, .075), rgba(10, 19, 17, .38));
  display: flex;
  flex-direction: column;
  transition: border-color .2s;
}
.diary-entry:hover { border-color: var(--rule-amber); }
.diary-entry.latest {
  background: linear-gradient(145deg, rgba(216, 168, 95, .14), rgba(16, 29, 25, .48));
  border-color: rgba(216, 168, 95, .28);
}
.diary-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.diary-meta time { color: #a0a59d; font: var(--type-micro)/1.35 var(--font-mono); letter-spacing: .08em; }
.diary-meta span {
  padding: 6px 9px;
  border-radius: 99px;
  background: rgba(143, 188, 135, .08);
  color: #a4bba4;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.diary-entry h4 { margin: 19px 0 10px; color: #eee2cc; font: 500 23px/1.15 var(--font-serif); letter-spacing: -.02em; }
.diary-entry blockquote { margin: 0; color: #bfbbae; font: italic 15px/1.65 var(--font-serif); }
.diary-entry small {
  margin-top: auto;
  padding-top: 18px;
  color: #83988e;
  font: 700 10px/1.5 var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.diary-empty { grid-column: 1/-1; }

/* --------------------------------------------------------------------------
   Identity in evolution.
   -------------------------------------------------------------------------- */
.identity-panel {
  margin-top: 22px;
  background:
    radial-gradient(circle at 12% 10%, rgba(216, 168, 95, .1), transparent 34%),
    linear-gradient(135deg, rgba(31, 38, 33, .94), rgba(15, 24, 22, .9));
}
.identity-origin {
  margin: 18px 0 0;
  color: #c8ac7f;
  font: 700 var(--type-caption)/1.6 var(--font-mono);
  letter-spacing: .08em;
}
.identity-trait-list { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 14px; }
.identity-trait {
  padding: 9px 12px;
  border: 1px solid rgba(143, 188, 135, .26);
  color: #b9c9b3;
  font: 700 var(--type-micro)/1 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}
.identity-trait-softening, .identity-trait-retired { border-color: rgba(241, 234, 219, .16); color: #8f958c; }
.identity-trait-reversed { border-color: rgba(216, 168, 95, .3); color: #d9bd8d; }
.identity-history-list { display: grid; gap: 8px; padding-top: 16px; }
.identity-transition {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 12px 14px;
  border: 1px solid rgba(241, 234, 219, .1);
  background: rgba(8, 15, 14, .28);
  color: #d8d4c8;
  font: 14px/1.55 var(--font-sans);
}
.identity-transition time {
  flex-shrink: 0;
  color: #909790;
  font: 700 var(--type-micro)/1.7 var(--font-mono);
  letter-spacing: .08em;
}
.identity-empty { grid-column: 1/-1; }

/* --------------------------------------------------------------------------
   Moments that mattered + the brain panel.
   -------------------------------------------------------------------------- */
.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: 22px;
  padding-top: 22px;
  align-items: start;
}
.activity-panel > .empty { padding: 42px 4px; }

.moment {
  display: grid;
  grid-template-columns: minmax(180px, .38fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 16px;
  border: 1px solid var(--rule);
  background: rgba(8, 15, 14, .35);
  overflow: visible;
  transition: border-color .2s;
}
.moment:hover { border-color: var(--rule-amber); }
.moment-visual {
  position: relative;
  min-height: 180px;
  padding: 17px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--rule);
  background:
    radial-gradient(circle at 70% 18%, rgba(231, 176, 95, .18), transparent 36%),
    linear-gradient(145deg, #263b35, #172522);
}
.moment-visual:after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(135deg, transparent 0 18px, rgba(255, 255, 255, .014) 18px 19px);
  pointer-events: none;
}
.visual-label {
  position: relative;
  z-index: 1;
  color: #c8ac7f;
  font: 700 var(--type-micro)/1.3 var(--font-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
}
.moment-cast { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 9px; }
.moment-cast > span { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.moment-cast b {
  max-width: 74px;
  overflow: hidden;
  color: #cccbbf;
  font: 500 var(--type-micro)/1.25 var(--font-serif);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.object-record { position: relative; z-index: 1; display: grid; justify-items: start; gap: 8px; }
.object-record i { font: 400 58px/.7 var(--font-serif); color: var(--amber2); text-shadow: 0 0 34px rgba(216, 168, 95, .22); }
.object-record b { color: #e5dac4; font: 500 16px/1.25 var(--font-serif); }
.world-record-mark { position: relative; z-index: 1; color: var(--amber2); font-size: 45px; }

.moment-visual.has-image { min-height: 220px; padding: 0; isolation: isolate; background: var(--ink); }
.moment-visual.has-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  filter: saturate(.98) contrast(1.03);
}
.moment-visual.has-image:before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(180deg, rgba(6, 11, 10, .08) 42%, rgba(6, 11, 10, .78));
  pointer-events: none;
}
.moment-visual.has-image:after {
  z-index: 1;
  background: radial-gradient(circle at 52% 38%, transparent 0 42%, rgba(5, 10, 9, .32) 100%);
}
.moment-visual.has-image .visual-label {
  position: absolute;
  z-index: 2;
  left: 16px;
  bottom: 15px;
  padding: 6px 9px;
  border: 1px solid rgba(241, 234, 219, .18);
  background: rgba(8, 14, 13, .65);
  color: #f1d59e;
  backdrop-filter: blur(8px);
}
.moment-visual.has-image .moment-cast {
  position: absolute;
  z-index: 2;
  top: 16px;
  left: 16px;
  right: 16px;
  align-items: flex-start;
}

.moment-body { position: relative; padding: 22px 24px; }
.moment-kind {
  width: max-content;
  display: inline-flex;
  align-items: center;
  margin-bottom: 13px;
  padding: 5px 8px;
  border: 1px solid var(--rule-amber);
  color: var(--amber2);
  font: 700 var(--type-micro)/1 var(--font-mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.moment-body h4 { margin: 0 0 6px; font: 500 21px/1.25 var(--font-serif); }
.moment-body time {
  position: absolute;
  top: 24px;
  right: 24px;
  color: #848b84;
  font: var(--type-micro)/1.4 var(--font-mono);
}
.moment-body p { margin: 12px 0 0; color: #abafa7; font-size: 14px; line-height: 1.6; }
.moment-evidence {
  display: block;
  margin-top: 21px;
  color: #7f978d;
  font: 700 var(--type-micro)/1.45 var(--font-mono);
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Recorded conversations inside a moment */
.moment-transcript {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(204, 229, 242, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(218, 241, 255, .1), rgba(124, 175, 202, .055));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
}
.moment-turn {
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid rgba(222, 241, 250, .16);
  border-radius: 11px;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.moment-turn.human-turn { background: rgba(239, 249, 255, .09); border-color: rgba(186, 230, 246, .28); }
.moment-turn.ai-turn { background: rgba(187, 203, 255, .11); border-color: rgba(181, 196, 255, .3); }
.moment-speaker { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.moment-speaker strong { min-width: 0; color: #f5fbff; font: 700 var(--type-caption)/1.3 var(--font-sans); overflow-wrap: anywhere; }
.moment-speaker span {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid currentColor;
  border-radius: 99px;
  color: #a9deef;
  font: 700 10px/1 var(--font-mono);
  letter-spacing: .09em;
}
.ai-turn .moment-speaker span { color: #c7cbff; }
.moment-turn p {
  margin: 8px 0 0 !important;
  color: #e6eff4 !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.moment-expand {
  justify-self: start;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid rgba(186, 230, 246, .34);
  border-radius: 9px;
  background: rgba(232, 247, 255, .08);
  color: #d9f4ff;
  font: 700 var(--type-label)/1.2 var(--font-mono);
  letter-spacing: .05em;
  cursor: pointer;
}
.moment-expand:hover, .moment-expand:focus-visible {
  border-color: #c6efff;
  background: rgba(232, 247, 255, .16);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(164, 223, 255, .16);
}
.legacy-moment-summary {
  display: grid;
  gap: 9px;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid rgba(204, 229, 242, .2);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(218, 241, 255, .1), rgba(124, 175, 202, .055));
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
  backdrop-filter: blur(14px);
  min-width: 0;
}
.legacy-moment-summary > strong { color: #d9f4ff; font: 700 10px/1.35 var(--font-mono); letter-spacing: .1em; }
.legacy-moment-summary > p {
  margin: 0 !important;
  color: #e6eff4 !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  white-space: normal;
}
.legacy-moment-summary > small {
  padding-top: 9px;
  border-top: 1px solid rgba(204, 229, 242, .13);
  color: #9fb4bd;
  font-size: var(--type-micro);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Portraits */
.participant-portrait {
  width: var(--portrait-size, 48px);
  height: var(--portrait-size, 48px);
  flex: 0 0 var(--portrait-size, 48px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(213, 240, 252, .42);
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(192, 224, 237, .24), rgba(104, 127, 204, .26));
  box-shadow: 0 4px 18px rgba(4, 13, 25, .25);
  color: #effaff;
  font: 700 calc(var(--portrait-size, 48px) * .26)/1 var(--font-mono);
  letter-spacing: .03em;
}
.participant-portrait img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; background: #18262b; }
.moment-speaker-identity { min-width: 0; display: flex; align-items: center; gap: 9px; }
.moment-speaker-identity strong { overflow-wrap: anywhere; }
.moment-cast .participant-portrait { width: 51px; height: 51px; flex-basis: 51px; }
.moment-cast > span:nth-child(2) .participant-portrait { background: linear-gradient(145deg, rgba(177, 156, 242, .35), rgba(68, 58, 85, .78)); }

/* Brain panel */
.brain-panel > p:not(.eyebrow) { color: #a3a8a1; font-size: var(--type-caption); line-height: 1.65; }
.brain-panel h3 + p a { color: var(--amber2); }
.brain-panel .brain-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
}
.brain-panel .brain-section-label {
  margin: 0;
  color: var(--amber2);
  font: 700 var(--type-micro)/1.4 var(--font-mono);
  letter-spacing: .13em;
  text-transform: uppercase;
}
.brain-panel .brain-section > p { margin: 8px 0 0; color: #a3a8a1; font-size: var(--type-caption); line-height: 1.6; }
.brain-panel .quiet { margin-top: 14px; }
.brain-panel .primary { margin-top: 15px; }

/* --------------------------------------------------------------------------
   Responsive.
   -------------------------------------------------------------------------- */
@media (max-width: 1050px) {
  .insight-grid { grid-template-columns: 1fr 1fr; }
  .personality-card { grid-column: 1/-1; min-height: 220px; }
  .moment { grid-template-columns: 180px minmax(0, 1fr); }
  .diary-list { grid-template-columns: 1fr 1fr; }
  .diary-entry.latest { grid-column: 1/-1; min-height: 210px; }
  .thought-panel { grid-template-columns: 1fr 1.25fr; }
  .thought-response { grid-column: 1/-1; min-height: auto; }
  .dashboard-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .gate { grid-template-columns: minmax(0, 1fr); }
  .manifesto { min-height: 68vh; padding: 70px 24px; }
  .manifesto h1 { font-size: clamp(58px, 16vw, 96px); }
  .account-card { min-height: auto; border-left: 0; border-top: 1px solid var(--rule); padding: 55px 24px; }
  .dashboard { padding: 52px 24px; }
  .dashboard-head { align-items: flex-start; flex-direction: column; gap: 20px; }
  .resident-hero { grid-template-columns: auto 1fr; }
  .resident-meta { grid-column: 1/-1; }
}

@media (max-width: 700px) {
  .insight-grid { grid-template-columns: 1fr; }
  .personality-card { grid-column: auto; }
  .insight-card { min-height: 220px; }
  .moment { grid-template-columns: 1fr; }
  .moment-visual { min-height: 160px; border-right: 0; border-bottom: 1px solid var(--rule); }
  .moment-body time { position: static; display: block; margin-top: 7px; }
  .moment-body h4 { font-size: 19px; }
  .moment-transcript { padding: 12px; }
  .moment-turn { padding: 11px; }
  .moment-speaker { align-items: flex-start; flex-direction: column; gap: 7px; }
  .connection-list { grid-template-columns: 1fr 1fr; }
  .diary-head { align-items: flex-start; flex-direction: column; }
  .diary-list { grid-template-columns: 1fr; }
  .diary-entry.latest { grid-column: auto; }
  .diary-entry { min-height: 210px; }
  .thought-panel { grid-template-columns: 1fr; gap: 20px; }
  .thought-response { grid-column: auto; }
  .thought-intro h3 { font-size: 30px; }
  .owner-thought-turn, .resident-thought-turn { margin-left: 0; margin-right: 0; }
  .human-ranking-list { grid-template-columns: 1fr; }
  .human-ranking-row { padding: 17px; }
  .human-rank-reason { white-space: normal; overflow: visible; }
  .identity-transition { flex-direction: column; gap: 6px; }
  .panel-head { align-items: flex-start; flex-direction: column; gap: 14px; }
}

@media (max-width: 560px) {
  .gate { min-height: calc(100vh - 64px); }
  .manifesto { min-height: 62vh; }
  .manifesto dl div { grid-template-columns: 104px minmax(0, 1fr); }
  .account-card { min-height: auto; }
  .dashboard-head > div { min-width: 0; }
  .dashboard-head h1 { font-size: 46px; line-height: .94; }
  .dashboard-head > div > p:last-child { font-size: 14px; line-height: 1.5; }
  .dashboard-actions { width: 100%; justify-content: space-between; }
  .resident-hero { grid-template-columns: 1fr; gap: 24px; }
  .resident-orb { width: 66px; height: 66px; }
  .resident-copy h2 { font-size: 42px; }
  .resident-meta { grid-column: auto; }
  .private-badge { max-width: 22ch; line-height: 1.4; }
  .panel { padding: 22px 18px; }
  .moment-cast .participant-portrait { width: 46px; height: 46px; flex-basis: 46px; }
  .connection-list { grid-template-columns: 1fr; }
  .brain-toggle { margin-left: 0; }
  .door-choice { grid-template-columns: 1fr; }
  .plan-list { grid-template-columns: 1fr; }
  .door-badge { margin-left: 0; }
  .door-card-top { flex-wrap: wrap; }
}