/* RayTen Introducer Portal — components
   Rules that are build failures, not preferences:
   no text-transform, no box-shadow, no borders on cards, no colour behind
   white text except --btn, status is never colour alone. */

/* ---------- app shell ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
  gap: var(--gap);
  padding: var(--gap);
  max-width: 1360px;
  margin: 0 auto;
}

/* The rail sits on canvas so it recedes. No panel behind it. */
.rail {
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 12px 0 12px 4px;
}

.brand { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.brand-sub { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.nav { display: flex; flex-direction: column; gap: 2px; }

.nav-group + .nav-group { margin-top: 24px; }

.nav-group-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 0 12px 8px;
}

.nav-item {
  display: block;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background var(--t), color var(--t);
}

.nav-item:hover { background: var(--sunken); }

/* One solid dark pill. The only place colour sits behind white text. */
.nav-item[aria-current="page"] {
  background: var(--btn);
  color: #FFFFFF;
}
.nav-item[aria-current="page"]:hover { background: var(--btn); }

.rail-foot { margin-top: auto; padding: 0 12px; display: flex; flex-direction: column; gap: 6px; }
.rail-email { font-size: 13px; font-weight: 500; color: var(--ink-2); word-break: break-all; }

/* ---------- main ---------- */

.main { min-width: 0; padding: 12px 0; }

.page-head { margin-bottom: 24px; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); font-size: 15px; }

.stack { display: flex; flex-direction: column; gap: var(--gap); }

/* ---------- cards ---------- */
/* White on canvas. Tone is the whole hierarchy. No border, no shadow. */

.card {
  background: var(--raised);
  border-radius: var(--r-card);
  padding: 24px;
}

.card-head { margin-bottom: 16px; }
.card-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 500; }

.card-inner {
  background: var(--sunken);
  border-radius: var(--r-inner);
  padding: 16px;
}

.tint {
  border-radius: var(--r-inner);
  padding: 16px;
  background: var(--accent-soft);
  color: var(--ink-on-tint);
}
.tint strong { color: var(--ink); font-weight: 600; }

/* ---------- the standing money line ---------- */
/* Always visible. Never a tooltip. Never paraphrased. */

.money-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  max-width: 62ch;
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--btn);
  color: #FFFFFF;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.btn:hover { background: var(--btn-2); }
.btn:disabled { background: var(--sunken); color: var(--ink-2); cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--accent-ink);
  padding: 6px 0;
  justify-content: flex-start;
  align-self: flex-start;
}
.btn-quiet:hover { background: transparent; color: var(--ink); }

/* ---------- inputs ---------- */

.field { display: flex; flex-direction: column; gap: 8px; }

.label { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  transition: border-color var(--t), background var(--t);
}
.input:hover { border-color: var(--accent-soft); }
.input::placeholder { color: var(--ink-2); }

/* ---------- chips. Status is never colour alone: the chip carries a word. ---------- */

.chip {
  display: inline-flex;
  align-items: center;
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.chip-paid { background: var(--paid-b); color: var(--paid-i); }
.chip-wait { background: var(--wait-b); color: var(--wait-i); }
.chip-over { background: var(--over-b); color: var(--over-i); }

/* pipeline ramp. Position means progress. Ink text on tints. */
.chip-pl-1 { background: var(--pl-1); color: var(--ink-on-tint); }
.chip-pl-2 { background: var(--pl-2); color: var(--ink-on-tint); }
.chip-pl-3 { background: var(--pl-3); color: var(--ink-on-tint); }
.chip-pl-4 { background: var(--pl-4); color: var(--ink-on-tint); }
.chip-pl-5 { background: var(--pl-5); color: var(--ink-on-tint); }

/* ---------- table. One hairline colour, rows only. ---------- */

.table { width: 100%; border-collapse: collapse; }

.table th {
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  padding: 0 12px 10px;
}

.table td {
  padding: 14px 12px;
  border-top: 1px solid var(--hairline);
  font-size: 15px;
}

.table .num { text-align: right; }

/* Wide tables scroll inside their own container. The page never scrolls
   sideways. */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }
.table-wrap table { min-width: 880px; }

.cell-main { font-size: 15px; }
.cell-sub { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 3px; }

/* An empty cell is a faint dash, never a repeated sentence. */
.dash { color: var(--hairline); }

.reason { display: block; font-size: 13px; font-weight: 500; color: var(--ink-2); margin-top: 6px; }

/* Keeping one warm. A reward, never a countdown. */
.warm-days { display: flex; align-items: baseline; gap: 10px; margin: 0 0 4px; }
.warm-count { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.warm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.warm-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.warm-form textarea {
  width: 100%;
  min-height: 92px;
  padding: 12px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-input);
  background: var(--raised);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  resize: vertical;
}
.said {
  border-radius: var(--r-inner);
  padding: 12px 14px;
  background: var(--paid-b);
  color: var(--paid-i);
  font-size: 13px;
  font-weight: 500;
  margin-top: 16px;
}

/* ---------- centred states: sign in, check inbox, not set up ---------- */

/* Flex column, not grid: the sign-in note is a sibling of the card and must
   sit directly beneath it, rather than being centred in its own grid row. */
.centred {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.centred-card {
  background: var(--raised);
  border-radius: var(--r-card);
  padding: 32px;
  width: 100%;
  max-width: 420px;
}

.centred-card h1 { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.centred-card p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; }
.centred-card form { display: flex; flex-direction: column; gap: 16px; }

.form-note { margin: 16px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* Sits on canvas beneath the sign-in card, not inside it. */
.signin-note {
  margin: 18px auto 0;
  max-width: 420px;
  padding: 0 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
}
.signin-note a { color: var(--accent-ink); }

.error {
  border-radius: var(--r-inner);
  padding: 12px 14px;
  background: var(--over-b);
  color: var(--over-i);
  font-size: 13px;
  font-weight: 500;
}

.muted { color: var(--ink-2); }

.empty { padding: 8px 0; color: var(--ink-2); font-size: 15px; }

/* ---------- the ladder ---------- */
/* Three rungs in strictly descending certainty. They are never summed into
   one total, so there is deliberately no combined figure in this block. */

.ladder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
}
/* Rung 1 leads: it is the only one with something to do. */
.ladder > .rung-now { grid-column: 1 / -1; }

@media (max-width: 720px) {
  .ladder { grid-template-columns: minmax(0, 1fr); }
}

.rung {
  background: var(--raised);
  border-radius: var(--r-card);
  padding: 24px;
}

/* Rung 1. Cleared money, and the only rung with something to do. */
.rung-now { background: var(--accent-soft); }

.rung-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin: 0 0 10px;
}
/* On a tint, step DOWN from --ink rather than up from --ink-2. */
.rung-now .rung-label { color: var(--ink-on-tint); }

.rung-amount { font-size: 44px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; margin: 0; }

.rung-caption {
  margin: 12px 0 0;
  font-size: 15px;
  color: var(--ink-2);
  max-width: 56ch;
}
.rung-now .rung-caption { color: var(--ink-on-tint); }

.rung-lines { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.rung-lines li { font-size: 15px; color: var(--ink-2); }
.rung-now .rung-lines li { color: var(--ink-on-tint); }
.rung-lines strong { color: var(--ink); font-weight: 600; }

/* "already invoiced, in Friday's run" — same rung, never its own block, so
   money never disappears between invoicing on Tuesday and Friday clearing. */
.rung-sub {
  margin: 16px 0 0;
  padding-top: 14px;
  font-size: 15px;
  color: var(--ink-on-tint);
}
.rung-sub strong { color: var(--ink); font-weight: 600; }

.rung-actions { margin-top: 20px; }

/* ---------- payment history chart ---------- */

.chart-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 24px;
}

.chart-stats { display: flex; gap: 28px; }
.chart-stat-label { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2); margin: 0 0 4px; }
.chart-stat-value { font-size: 17px; font-weight: 600; margin: 0; }

.chart {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 152px;
  padding-top: 8px;
}

.chart-col { flex: 1 1 0; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-width: 0; }

.bar {
  background: var(--accent-soft);
  border-radius: 8px 8px 4px 4px;
  min-height: 4px;
  transition: background var(--t);
}
/* The peak month is solid, so the shape of a good month is readable. */
.bar-peak { background: var(--accent); }

.chart-labels { display: flex; gap: 6px; margin-top: 10px; }
.chart-label {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- the agreement ---------- */

/* Scrollable in the page. Not a download, not an iframe: they read the words
   we hash, in the page that hashes them. */
.agreement-body {
  max-height: 60vh;
  overflow-y: auto;
  padding: 22px 24px;
  border-radius: var(--r-inner);
  background: var(--sunken);
  font-size: 15px;
  line-height: 1.6;
}
.agreement-body-read { max-height: 42vh; }
.agreement-body h1 { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 8px; }
.agreement-body h2 { font-size: 17px; font-weight: 600; margin: 28px 0 8px; }
.agreement-body p { margin: 0 0 12px; }
.agreement-body ul, .agreement-body ol { margin: 0 0 12px; padding-left: 20px; }
.agreement-body li { margin-bottom: 6px; }
.agreement-body blockquote {
  margin: 0 0 12px; padding: 12px 16px;
  background: var(--raised); border-radius: var(--r-input); color: var(--ink-2);
}
.agreement-body hr { border: 0; height: 1px; background: var(--hairline); margin: 24px 0; }

.read-state { margin: 14px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }
.read-state-done { color: var(--paid-i); }

/* The sentence that is stored. It sits with the box it belongs to. */
.intent {
  margin: 0;
  padding: 14px 16px;
  border-radius: var(--r-inner);
  background: var(--accent-soft);
  color: var(--ink-on-tint);
  font-size: 15px;
  max-width: 62ch;
}

.hash {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  overflow-wrap: anywhere;
}

/* ---------- materials ---------- */

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.asset { background: var(--sunken); border-radius: var(--r-inner); padding: 18px; }
.asset-title { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.asset-blurb { margin: 0 0 16px; font-size: 15px; color: var(--ink-2); }
.asset-actions { display: flex; align-items: center; gap: 14px; }
.asset .btn-copy { background: var(--raised); }
.asset:hover .btn-copy { background: var(--accent-soft); }

/* ---------- approvals queue ---------- */

.queue-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; }
.queue-code { font-size: 13px; font-weight: 500; color: var(--ink-2); }

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.meta-key { display: block; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--ink-2); margin-bottom: 3px; }
.meta-val { display: block; font-size: 15px; overflow-wrap: anywhere; }

.checks { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.check {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-items: baseline;
  padding: 12px 14px;
  border-radius: var(--r-inner);
  background: var(--sunken);
}
.check-what { font-size: 13px; font-weight: 500; color: var(--ink-2); flex: 1 1 200px; }
.check-detail { flex: 1 1 100%; font-size: 13px; font-weight: 500; color: var(--ink-2); }

.queue-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.panel { margin-top: 18px; border-radius: var(--r-inner); background: var(--sunken); padding: 18px; }
.panel-title { font-size: 15px; font-weight: 600; margin: 0 0 14px; }

.split-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.split-name { flex: 1 1 auto; font-size: 15px; }
.split-share { flex: 0 0 92px; }
.split-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 13px; font-weight: 500; }
.split-bad { color: var(--over-i); }
.split-ok { color: var(--paid-i); }

/* ---------- log form ---------- */

.log-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: start;
}
@media (max-width: 900px) {
  .log-grid { grid-template-columns: minmax(0, 1fr); }
}

.form-stack { display: flex; flex-direction: column; gap: 18px; }
.form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .form-pair { grid-template-columns: 1fr; } }

.hint { font-size: 13px; font-weight: 500; color: var(--ink-2); margin: 0; }

select.input { appearance: none; background-image: none; }

textarea.input { min-height: 96px; resize: vertical; }

/* A warning, never a block. They may be right and the record may be wrong. */
.notice { border-radius: var(--r-inner); padding: 12px 14px; font-size: 15px; }
.notice-info { background: var(--accent-soft); color: var(--ink-on-tint); }
.notice-wait { background: var(--wait-b); color: var(--wait-i); }

.asks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
.asks li { font-size: 15px; color: var(--ink-2); }
.asks strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 2px; }

.route-code {
  display: inline-block;
  margin-top: 4px;
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- modal ---------- */
/* Depth is still tone: a dimmed canvas behind, a white card in front. */

.modal {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(640px, calc(100vw - 32px));
  width: 100%;
  max-height: calc(100vh - 48px);
  margin: auto;
  color: var(--ink);
}
.modal::backdrop { background: rgba(27, 27, 58, 0.44); }

.modal-card {
  background: var(--raised);
  border-radius: var(--r-card);
  padding: 28px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.modal-close {
  float: right;
  border: 0;
  background: transparent;
  color: var(--accent-ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  padding: 4px 0 4px 12px;
  cursor: pointer;
  transition: color var(--t);
}
.modal-close:hover { color: var(--ink); }

.modal-title { margin: 0 0 8px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.modal-intro { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; max-width: 52ch; }
.modal-foot { margin: 24px 0 0; font-size: 13px; font-weight: 500; color: var(--ink-2); }

/* ---------- copy fields ---------- */

.fields { display: flex; flex-direction: column; gap: 2px; }

.field-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: var(--r-inner);
  background: var(--raised);
  transition: background var(--t);
}
.field-row:hover { background: var(--sunken); }

.field-text { min-width: 0; flex: 1 1 auto; }
.field-key {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: 3px;
}
.field-value { display: block; font-size: 15px; overflow-wrap: anywhere; }
.field-value-big { font-size: 17px; font-weight: 600; }

.btn-copy {
  flex: 0 0 auto;
  border: 0;
  border-radius: var(--r-pill);
  padding: 7px 14px;
  background: var(--sunken);
  color: var(--ink);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t), color var(--t);
}
.field-row:hover .btn-copy { background: var(--accent-soft); }
.btn-copy[data-copied] { background: var(--paid-b); color: var(--paid-i); }

.guidance {
  margin-top: 24px;
  border-radius: var(--r-inner);
  padding: 16px;
  background: var(--sunken);
}
.guidance p { margin: 0; font-size: 15px; color: var(--ink-2); }
.guidance p + p { margin-top: 8px; }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
  .shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    padding: 12px;
    gap: 12px;
  }

  .rail { gap: 16px; padding: 8px 0 0; }

  /* One scrolling row of pills. display:contents lifts the group's children
     into the row so the groups do not become side-by-side columns. */
  .nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-group { display: contents; }
  .nav-group + .nav-group { margin-top: 0; }
  .nav-item { white-space: nowrap; }
  .nav-group-label {
    padding: 0 2px 0 10px;
    align-self: center;
    white-space: nowrap;
  }

  .rail-foot {
    margin-top: 4px;
    padding: 0 4px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .rail-email { word-break: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .main { padding: 4px 0; }
  .card { padding: 20px; }
  .centred-card { padding: 24px; }
}