/*
 * MYAI companion.
 *
 * The design system in docs/mockups/DESIGN.md, applied to a personal record rather than to a
 * catalogue. Its grammar carries over directly: near-monochrome chrome, one ink, one soft surface,
 * pill-shaped actions on an 8px grid, and a deliberately small set of semantic accents that are
 * spent only where a state genuinely differs. Colour is never decoration here — a green chip means
 * the person actually holds this thing, a red one means something has moved without them.
 *
 * Display type is set in a geometric sans and worn in the system's voice: uppercase, tight leading,
 * unapologetically large. Everything below it stays quiet so the one line that names the page can
 * be loud.
 */

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Inter:wght@400;500;600&display=swap");

:root {
  --ink: #111111;
  --on-ink: #ffffff;
  --canvas: #ffffff;
  --surface: #f5f5f5;
  --surface-sunk: #ebebeb;
  --charcoal: #39393b;
  --ash: #4b4b4d;
  --mute: #707072;
  --stone: #9e9ea0;
  --hairline: #cacacb;
  --hairline-soft: #e5e5e5;

  /* Spent only on meaning: held, moved on, MYAI's own hand. */
  --held: #007d48;
  --held-wash: #e6f3ec;
  --caution: #d30005;
  --caution-wash: #fdeaea;
  --myai: #1151ff;
  --myai-wash: #e8eeff;

  --display: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --text: "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --xxs: 2px; --xs: 4px; --sm: 8px; --md: 12px; --lg: 18px; --xl: 24px; --xxl: 30px; --section: 48px;
  --r-sm: 18px; --r-md: 24px; --r-lg: 30px; --r-full: 9999px;

  --column: 520px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f5f5f5;
    --on-ink: #111111;
    --canvas: #0c0c0d;
    --surface: #171718;
    --surface-sunk: #202022;
    --charcoal: #d8d8d9;
    --ash: #bcbcbe;
    --mute: #9e9ea0;
    --stone: #808083;
    --hairline: #35353a;
    --hairline-soft: #232326;
    --held: #1eaa52;
    --held-wash: #10251a;
    --caution: #ff6b6f;
    --caution-wash: #2a1416;
    --myai: #7fa2ff;
    --myai-wash: #131b32;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/*
 * Several elements below set `display`, which beats the user-agent rule for `[hidden]` and leaves a
 * hidden element on screen. The conditional chrome depends on `hidden` meaning hidden.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ------------------------------------------------------------------ chrome */

.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--md) var(--lg);
  background: var(--canvas);
  border-bottom: 1px solid var(--hairline-soft);
}

.brand {
  font-family: var(--display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}

.chrome-spacer { flex: 1; }

/*
 * The way back sits over the content, not in the frame — a breadcrumb, the way the design evidence
 * has it. It leaves the chrome to the two things that are about the whole surface rather than about
 * this page: what needs attention, and whose MYAI this is.
 */
.page-back {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  border: 0;
  background: none;
  color: var(--mute);
  font: inherit;
  font-size: 14px;
  padding: 0;
  margin: 0 0 var(--md);
  cursor: pointer;
}

.page-back:hover { color: var(--ink); }

/* Whose MYAI this is. One initial, because the answer is rarely in doubt and rarely needed. */
.account {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ash);
}

.account:hover { border-color: var(--ink); color: var(--ink); }

.account[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }

/* Signed out is a real state and says so, rather than showing an initial nobody has. It keeps
   saying so on the account page itself, where being current must not fill it in as though it were
   somebody. */
.account.is-signed-out { border-style: dashed; color: var(--stone); }

.account.is-signed-out[aria-current="page"] {
  background: var(--surface-sunk);
  border-color: var(--hairline);
  color: var(--ash);
}

/* The From MYAI attention: conditional, never a permanent destination. */
.attention {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  min-width: 0;
  padding: 6px var(--md);
  border-radius: var(--r-full);
  background: var(--myai-wash);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  /* The chrome has three tenants on a phone. This one yields first. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.attention::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--myai);
}

main {
  max-width: var(--column);
  margin: 0 auto;
  padding: var(--xl) var(--lg) 104px;
}

/* -------------------------------------------------------------------- type */

.display {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(38px, 12vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 var(--lg);
}

.page-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0 0 var(--sm);
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--stone);
  margin: var(--xxl) 0 var(--md);
}

.section-label:first-child { margin-top: 0; }

.lede { color: var(--ash); margin: 0 0 var(--lg); }

.note { color: var(--mute); font-size: 14px; margin: var(--sm) 0 0; }

.quiet { color: var(--stone); font-size: 14px; }

.dash { color: var(--stone); }

/* ------------------------------------------------------------------ search */

.find-field {
  display: flex;
  align-items: center;
  gap: var(--md);
  padding: var(--md) var(--lg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-full);
  background: var(--canvas);
}

.find-field:focus-within { border-color: var(--ink); }

.find-field input {
  flex: 1;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  padding: 0;
  min-width: 0;
}

.find-field input:focus { outline: none; }

.find-field input::placeholder { color: var(--stone); }

.scopes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  margin: var(--md) 0 var(--xl);
  padding: 0;
  list-style: none;
}

.scope {
  border: 1px solid var(--hairline-soft);
  background: var(--surface);
  color: var(--ash);
  border-radius: var(--r-full);
  padding: 6px var(--md);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.scope[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
}

/* ------------------------------------------------------------------ tiles */

.doors {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
}

.door {
  display: block;
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
  min-height: 104px;
}

.door:hover { background: var(--surface-sunk); }

.door h3 {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 var(--xs);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.door p { margin: 0; font-size: 14px; color: var(--ash); }

/* -------------------------------------------------------------------- rows */

.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sm); }

.row {
  display: flex;
  align-items: flex-start;
  gap: var(--md);
  padding: var(--md) var(--lg);
  border-radius: var(--r-md);
  background: var(--surface);
  text-decoration: none;
}

.row:hover { background: var(--surface-sunk); }

/* A world result: same row, same tap, visibly no history yet. */
.row.is-world {
  background: var(--canvas);
  border: 1px dashed var(--hairline);
}

.row-body { flex: 1; min-width: 0; }

.row-title { font-weight: 500; margin: 0; }

.row-sub { margin: var(--xxs) 0 0; font-size: 14px; color: var(--mute); }

.row-standing { margin: var(--xs) 0 0; font-size: 14px; color: var(--charcoal); }

.thumb {
  width: 44px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: 6px;
  background: var(--surface-sunk);
  object-fit: cover;
}

.row.is-world .thumb { border: 1px dashed var(--hairline); background: transparent; }

/* ------------------------------------------------------------------- chips */

.chips { display: flex; flex-wrap: wrap; gap: var(--xs); margin: var(--sm) 0 0; padding: 0; list-style: none; }

.chip {
  border-radius: var(--r-full);
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  background: var(--surface-sunk);
  color: var(--ash);
  white-space: nowrap;
}

.chip.is-held { background: var(--held-wash); color: var(--held); }
.chip.is-caution { background: var(--caution-wash); color: var(--caution); }
.chip.is-open { background: var(--surface-sunk); color: var(--ash); }
.chip.is-neutral { background: transparent; color: var(--mute); border: 1px solid var(--hairline-soft); }

/* ------------------------------------------------------------------ record */

.record-head { display: flex; gap: var(--lg); align-items: flex-start; margin-bottom: var(--xl); }

.record-head .thumb { width: 92px; height: 132px; border-radius: var(--sm); }

.record-title {
  font-family: var(--display);
  font-size: clamp(28px, 8vw, 38px);
  line-height: 1;
  font-weight: 600;
  margin: 0 0 var(--xs);
  text-transform: uppercase;
}

.record-sub { margin: 0; font-size: 14px; color: var(--mute); }

.unseen-dot { color: var(--held); font-size: 10px; margin-right: var(--sm); vertical-align: 1px; }

/* Standing leads the page: what the person's relationship currently is, before any metadata. */
.standing {
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--held-wash);
  margin-bottom: var(--lg);
}

.standing.is-unknown {
  background: var(--canvas);
  border: 1px dashed var(--hairline);
}

.standing p { margin: 0; }

.record-meaning { margin: var(--xl) 0; }
.record-meaning .section-label { margin-top: 0; }
.meaning-card { padding: var(--lg) 0; border-bottom: 1px solid var(--hairline-soft); }
.meaning-card:first-of-type { padding-top: 0; }
.meaning-card blockquote { margin: 0; font-size: 18px; line-height: 1.55; }
.meaning-card p { margin: 0; font-size: 17px; line-height: 1.55; }
.myai-meaning { padding: var(--lg); border-radius: var(--r-md); background: var(--surface); }
.meaning-actions { display: flex; gap: var(--md); margin-top: var(--sm); }
.text-action { border: 0; padding: 0; background: transparent; color: var(--held); font: inherit; font-size: 13px; cursor: pointer; }
.text-action.is-danger { color: var(--caution); }
.panel select, .panel input[type="number"] {
  display: block; width: 100%; margin: 0 0 var(--md); padding: 10px var(--md);
  border: 1px solid var(--hairline); border-radius: var(--r-sm); background: var(--canvas); font: inherit;
}

.moves { display: flex; flex-wrap: wrap; gap: var(--sm); margin-bottom: var(--xl); }

.button {
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  border-radius: var(--r-full);
  padding: 10px var(--lg);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
}

.button.secondary { background: var(--canvas); color: var(--ink); border-color: var(--hairline); }
.button.secondary:hover { border-color: var(--ink); }
.button.small { padding: 6px var(--md); font-size: 13px; }
.button[disabled] { opacity: 0.4; cursor: not-allowed; }

.ties { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--xs); }

/* One line that reads as a sentence: what the tie is, then what it says. Long details wrap under
   the label rather than squeezing it into a two-word column. */
.tie {
  display: block;
  padding: var(--md) var(--lg);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-decoration: none;
  font-size: 15px;
}

.tie .tie-detail { color: var(--mute); font-size: 14px; }

/* Trace collapses to one line with three marks, and opens only if asked. */
details.trace {
  margin-top: var(--xl);
  border-top: 1px solid var(--hairline-soft);
  padding-top: var(--md);
}

details.trace summary {
  cursor: pointer;
  font-size: 14px;
  color: var(--mute);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--md);
}

details.trace summary::-webkit-details-marker { display: none; }
details.trace summary::after { content: "Open"; color: var(--ink); font-weight: 500; }
details.trace[open] summary::after { content: "Close"; }

.trace-body { padding-top: var(--md); }

.trace-line {
  display: flex;
  justify-content: space-between;
  gap: var(--md);
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--hairline-soft);
  font-size: 14px;
}

.trace-line span:last-child { color: var(--mute); white-space: nowrap; }

.refs {
  margin: var(--md) 0 0;
  padding: var(--md);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  color: var(--mute);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---------------------------------------------------------------- timeline */

.day { margin-bottom: var(--xxl); }

.day-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm) var(--md);
  margin-bottom: var(--md);
}

.day-head h2 {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
}

.day-head span { font-size: 13px; color: var(--stone); }

.moments { list-style: none; margin: 0; padding: 0; }

.moment {
  position: relative;
  padding: 0 0 var(--lg) var(--xl);
  border-left: 1px solid var(--hairline-soft);
}

.moment:last-child { border-left-color: transparent; }

/* Authorship is a gutter dot, so life and MYAI's own work interleave in true chronology. */
.moment::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 6px;
  width: 9px;
  height: 9px;
  border-radius: var(--r-full);
  background: var(--canvas);
  border: 1.5px solid var(--stone);
}

.moment.is-record::before { border-color: var(--myai); background: var(--myai); }
.moment.is-cluster::before { border-color: var(--ink); background: var(--ink); }

.moment h3 { margin: 0; font-size: 16px; font-weight: 500; }
.moment p { margin: var(--xxs) 0 0; font-size: 14px; color: var(--mute); }

.moment details { margin-top: var(--xs); }
.moment summary { cursor: pointer; font-size: 13px; color: var(--myai); font-weight: 500; }
.moment summary::-webkit-details-marker { display: none; }

.evidence { list-style: none; margin: var(--sm) 0 0; padding: 0; display: grid; gap: var(--xxs); }

.evidence li {
  padding: var(--sm) var(--md);
  border-radius: 10px;
  background: var(--surface);
  font-size: 13px;
  color: var(--ash);
  display: flex;
  justify-content: space-between;
  gap: var(--md);
}

/* ---------------------------------------------------------------- artifact */

.artifact-head { margin-bottom: var(--xl); }

.maintained {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
  font-size: 13px;
  color: var(--mute);
  margin-bottom: var(--sm);
}

.maintained::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--myai);
}

.pick {
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--held-wash);
  margin-bottom: var(--md);
}

.pick .page-kicker { color: var(--held); }
.pick h3 { margin: 0 0 var(--xs); font-size: 20px; font-weight: 500; }
.pick p { margin: 0; font-size: 14px; color: var(--charcoal); }

.candidate {
  padding: var(--md) var(--lg);
  border-radius: var(--r-md);
  background: var(--surface);
  display: grid;
  gap: var(--xs);
}

.candidate-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--md); }
.candidate-head h3 { margin: 0; font-size: 17px; font-weight: 500; }
.candidate p { margin: 0; font-size: 14px; color: var(--mute); }

.candidate.is-ruled-out { opacity: 0.55; }
.candidate.is-ruled-out h3 { text-decoration: line-through; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--md); margin-bottom: var(--xl); }

.stat { padding: var(--md); border-radius: var(--r-sm); background: var(--surface); }
.stat strong { display: block; font-family: var(--display); font-size: 28px; font-weight: 600; line-height: 1; }
.stat span { font-size: 12px; color: var(--mute); }

.months { display: flex; align-items: flex-end; gap: 3px; height: 88px; margin-bottom: var(--sm); }
.month { flex: 1; background: var(--ink); border-radius: 3px 3px 0 0; min-height: 2px; }
.month.is-empty { background: var(--hairline-soft); }

.month-axis { display: flex; gap: 3px; font-size: 10px; color: var(--stone); margin-bottom: var(--xl); }
.month-axis span { flex: 1; text-align: center; }

/* ------------------------------------------------------------------ panels */

.panel {
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-top: var(--lg);
}

.panel h3 { margin: 0 0 var(--sm); font-size: 15px; font-weight: 600; }
.panel p { margin: 0 0 var(--sm); font-size: 14px; color: var(--ash); }
.panel p:last-child { margin-bottom: 0; }

.panel textarea {
  width: 100%;
  min-height: 148px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--canvas);
  color: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: var(--md);
  resize: vertical;
}

.panel textarea:focus { outline: none; border-color: var(--ink); }

.disclosure { list-style: none; margin: 0 0 var(--md); padding: 0; display: grid; gap: var(--xs); }

.disclosure li { font-size: 13px; color: var(--mute); display: grid; gap: 1px; }
.disclosure code { font-size: 12px; color: var(--ash); word-break: break-all; }

/* Honest absences. Quiet, present, never hidden. */
details.gaps { margin-top: var(--section); border-top: 1px solid var(--hairline-soft); padding-top: var(--md); }
details.gaps summary { cursor: pointer; font-size: 13px; color: var(--stone); }
details.gaps summary::-webkit-details-marker { display: none; }
details.gaps ul { margin: var(--md) 0 0; padding-left: var(--lg); }
details.gaps li { font-size: 13px; color: var(--mute); margin-bottom: var(--sm); }

/* The account surface: who MYAI thinks you are, and the only way out. */
.identity {
  display: flex;
  align-items: center;
  gap: var(--lg);
  padding: var(--lg);
  border-radius: var(--r-md);
  background: var(--surface);
  margin-bottom: var(--lg);
}

.identity .avatar {
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
}

.identity.is-signed-out .avatar { background: transparent; border: 1px dashed var(--hairline); color: var(--stone); }

.identity h2 { margin: 0; font-size: 18px; font-weight: 500; }
.identity p { margin: var(--xxs) 0 0; font-size: 14px; color: var(--mute); }

.empty {
  padding: var(--xl) var(--lg);
  border-radius: var(--r-md);
  border: 1px dashed var(--hairline);
  color: var(--mute);
  font-size: 15px;
  text-align: center;
}

.banner {
  padding: var(--md) var(--lg);
  border-radius: var(--r-sm);
  background: var(--caution-wash);
  color: var(--caution);
  font-size: 14px;
  margin-bottom: var(--lg);
}

.banner.is-done { background: var(--held-wash); color: var(--held); }

/* -------------------------------------------------------------------- dock */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  gap: var(--xs);
  padding: var(--sm) var(--lg) calc(var(--sm) + env(safe-area-inset-bottom, 0px));
  background: var(--canvas);
  border-top: 1px solid var(--hairline-soft);
}

.dock a {
  flex: 1;
  max-width: 152px;
  text-align: center;
  padding: var(--sm) var(--md);
  border-radius: var(--r-full);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--mute);
}

.dock a[aria-current="page"] { background: var(--surface); color: var(--ink); }

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