/* Credit Predix — demo front end.
 *
 * Deliberately plain. This is a working demonstration of the platform, not a
 * design proposal: anything that looks like a finished visual identity would
 * invite a conversation about colour when the point is the behaviour underneath.
 */

:root {
  --ink: #14181f;
  --muted: #5d6773;
  --line: #dfe3e8;
  --bg: #f6f7f9;
  --panel: #ffffff;
  --brand: #1f4e79;
  --brand-soft: #eaf1f8;
  --warn: #8a5a00;
  --warn-soft: #fdf3e2;
  --deny: #8c2f2f;
  --deny-soft: #fbeceb;
  --ok: #1f6b3f;
  --ok-soft: #e9f5ee;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--brand);
  color: #fff;
}

header .product { font-weight: 600; letter-spacing: .02em; }
header .product span { opacity: .7; font-weight: 400; margin-left: 8px; }

/* The bank the session belongs to, shown at all times. Tenant isolation is the
 * platform's central claim, so which bank you are inside is never off screen. */
.bank {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
}
.bank strong { font-weight: 600; }

button {
  font: inherit;
  padding: 8px 14px;
  border: 1px solid var(--brand);
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  cursor: pointer;
}
button.secondary { background: transparent; color: var(--brand); }
/* More specific than `button.secondary`, deliberately. The header sits on the
 * brand colour, and `button.secondary` alone renders dark blue on dark blue —
 * which made Sign out an empty box until someone looked at it. */
header button,
header button.secondary { border-color: rgba(255,255,255,.5); background: transparent; color: #fff; }
button:disabled { opacity: .45; cursor: not-allowed; }

main { max-width: 1040px; margin: 28px auto; padding: 0 24px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 20px;
}

h1 { font-size: 20px; margin: 0 0 4px; }
h2 { font-size: 16px; margin: 0 0 14px; }
.hint { color: var(--muted); font-size: 13px; margin: 0 0 18px; }

label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password], select {
  font: inherit;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}
input:disabled { background: #f4f5f7; color: var(--muted); }

.row { display: flex; gap: 14px; align-items: flex-end; }
.row > * { flex: 1; }
.row > button { flex: 0 0 auto; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tbody tr.open { cursor: pointer; }
tbody tr.open:hover { background: var(--brand-soft); }
tbody tr.closed { color: var(--muted); background: #fbfbfc; }

.tag {
  display: inline-block;
  font-size: 12px;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag.ok { background: var(--ok-soft); color: var(--ok); }
.tag.closed { background: var(--deny-soft); color: var(--deny); }

.note {
  border-left: 3px solid var(--line);
  background: #fafbfc;
  padding: 10px 14px;
  margin: 16px 0 0;
  font-size: 13px;
  color: var(--muted);
}
.note.warn { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); }
.note.deny { border-color: var(--deny); background: var(--deny-soft); color: var(--deny); }
.note.ok { border-color: var(--ok); background: var(--ok-soft); color: var(--ok); }

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fields .wide { grid-column: 1 / -1; }

.meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.meta b { color: var(--ink); font-weight: 600; }

.hidden { display: none !important; }

/* Module bar. Everything not built says so, with the phase it belongs to, so
 * the shape of the platform is visible without implying more exists than does. */
nav#modules {
  display: flex;
  gap: 4px;
  padding: 0 24px;
  background: #17395a;
  overflow-x: auto;
}
.tab {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  padding: 11px 16px;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.tab.active { color: #fff; border-bottom-color: #fff; }
/* Not built, and clickable anyway. A greyed-out tab is a dead end; these open a
 * panel saying what the module is and what reading its specification already
 * turned up, which is a better answer than nothing when someone asks. */

.stats { display: flex; gap: 28px; flex-wrap: wrap; margin: 4px 0 18px; }
.stats div { display: flex; flex-direction: column; }
.stats b { font-size: 24px; color: var(--brand); }
.stats span { font-size: 12px; color: var(--muted); max-width: 220px; }

textarea {
  font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  resize: vertical;
}

.result {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--ok-soft);
  border-left: 3px solid var(--ok);
}
.result b { font-size: 24px; font-family: ui-monospace, Menlo, monospace; color: var(--ok); }
.result span { font-size: 13px; color: var(--muted); }


#view-roadmap ul { margin: 0; padding-left: 20px; }
#view-roadmap li { margin-bottom: 10px; }
#view-roadmap li b { color: var(--ink); }


/* Scorecard. A model defines Modules -> Factors -> Items -> Options, and this
 * renders whatever it is given rather than assuming a shape. */
.module-title { font-size: 15px; font-weight: 600; margin: 22px 0 2px; }
.factor {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  background: #fcfdfe;
}
.factor h3 { font-size: 14px; margin: 0 0 2px; }
.factor .weight { font-size: 12px; color: var(--muted); }
.item { margin-top: 14px; }
.item > label { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.choices { display: flex; flex-direction: column; gap: 4px; }
.choices label {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 13px;
  color: var(--ink);
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.choices .score { color: var(--muted); font-variant-numeric: tabular-nums; margin-left: auto; }
#grade-value { font-size: 32px; }


/* Rating model browser. Formulas are shown, because they are the model -- a
 * screen that hides them is a screen that hides what the bank actually does. */
.node { margin: 4px 0 4px 0; }
.node .head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.node .kind {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  min-width: 54px;
}
.node .short {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  background: var(--brand-soft);
  color: var(--brand);
  padding: 1px 6px;
  border-radius: 4px;
}
.node .weight { font-size: 12px; color: var(--muted); }
.node code {
  display: block;
  font-size: 12px;
  color: #334;
  background: #f7f8fa;
  border-left: 2px solid var(--line);
  padding: 5px 9px;
  margin: 4px 0 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}
.level-factor { margin-left: 18px; }
.level-item { margin-left: 36px; }
.level-option { margin-left: 54px; font-size: 13px; color: var(--muted); }

/* The financial spreadsheet.
 *
 * Figures are right-aligned and tabular-figured so that columns of numbers line
 * up on the decimal point. On a balance sheet that is not decoration: a total
 * that does not sit under its own components is hard to check by eye, which is
 * the first thing a credit officer does. */
#fss-sheet td.figure, #fss-sheet th.figure {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 180px;
}

#fss-sheet .figure-box {
  width: 140px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: 6px 8px;
}

/* A header line names a section and holds no figure; a total closes one. */
#fss-sheet tr.sheet-header td { background: var(--soft, #f5f6f8); }
#fss-sheet tr.sheet-total td { border-top: 2px solid var(--line); font-weight: 600; }

#fss-sheet td { padding: 6px 12px; }

/* The prior period sits beside this one, and reads as reference rather than as
 * something to change: it belongs to a statement that is already settled. */
#fss-sheet td.prior { color: var(--muted); }

/* A number on the model tree that can be typed into. Sized to its content so the
 * tree still reads as a tree rather than as a form. */
#model-tree input.weight {
  width: 90px;
  padding: 2px 6px;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* An item the model answers for itself. SCO005 calls these auto-select items:
 * every option carries a formula, and the accounts decide which one applies.
 * The options stay on screen and stay legible -- greying the whole block would
 * hide the bands, and the bands are how an analyst checks the figure landed
 * where it should. Only the control is unavailable. */
.choices.computed label { cursor: default; }
.choices.computed input[type="radio"] { accent-color: var(--muted); }

/* The System Value: the figure that decided the item, shown so a computed
 * answer can be checked rather than taken on trust. */
.system-values {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 6px;
}

.system-value {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* A line the model reads and the statement does not supply. Named rather than
 * left blank: "we needed this and did not get it" is the useful fact, and it is
 * what the scoring gate refuses on. */
.system-value.absent { color: var(--deny, #b3261e); }

.computed-note {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}