/* ===========================================================================
   Wynk Credit — signed-in console.
   The partner and data-subject engines emit the same class vocabulary. This
   stylesheet is the single skin for both, written against the site's design
   tokens so the application a customer signs into is visibly the same product
   as the site that sold it. It replaces portal.css and client.css entirely —
   neither is loaded here, so nothing can reach back and restyle the marketing
   chrome behind it.
   Everything is scoped under .console except the overlays, which the engines
   append at document level.
   =========================================================================== */

.console { display: block; }
.console .hidden, .hidden { display: none !important; }

/* -------------------------------------------------------------- Door picker */
.door-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 760px) { .door-grid { grid-template-columns: 1fr; } }

.door {
  display: block; text-align: left; width: 100%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 26px; font: inherit; color: inherit;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.door:hover { border-color: rgba(21, 184, 166, .55); transform: translateY(-3px); }
.door h3 { margin: 14px 0 8px; }
.door p { font-size: 14.5px; }
.door ul { list-style: none; margin-top: 16px; }
.door li { font-size: 13.25px; color: var(--text-3); padding: 5px 0 5px 18px; position: relative; }
.door li::before { content: "—"; position: absolute; left: 0; }
.door .go { margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--teal); }

/* ---------------------------------------------------------------- Sign-in ---
   #login is the element the engines toggle. Ours, in the site's language. */
.console #login { max-width: 460px; margin-inline: auto; }
.console .login-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 36px 34px; box-shadow: var(--shadow-lg);
}
.console .login-card h2 { font-size: 24px; margin-bottom: 6px; }
.console .login-card .sub { color: var(--text-3); font-size: 13.5px; margin-bottom: 24px; }
.console .login-card label {
  display: block; margin: 18px 0 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--text-3);
}
.console .login-card input {
  width: 100%; font: inherit; font-size: 15px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.console .login-card input:focus { outline: none; border-color: var(--teal); box-shadow: var(--ring); }
.console .login-card .btn { margin-top: 26px; }
.console .error {
  margin-top: 16px; padding: 11px 14px; border-radius: var(--r-sm); font-size: 13.75px;
  background: rgba(224, 112, 100, .1); border: 1px solid rgba(224, 112, 100, .32); color: var(--red);
}
.console .demo-hint {
  margin-top: 26px; padding-top: 20px; border-top: 1px dashed var(--line);
  font-size: 12.5px; color: var(--text-3);
}
.console .demo-hint b {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--text-3); font-weight: 700;
}
.console .demo-hint code {
  display: block; padding: 3px 0; font-family: var(--mono); font-size: 12px; color: var(--text-2);
}

/* ------------------------------------------------------------- App shell ---
   When the engine reveals #app, console.js sets body.app-open and the app
   takes the full viewport: the marketing nav and footer step out of the way. */
body.app-open .nav,
body.app-open .foot,
body.app-open #consoleIntro,
body.app-open #consoleFootnote { display: none; }
body.app-open main#content > section { padding: 0; }
body.app-open .console-wrap { max-width: none; padding: 0; }

.console .app { display: grid; grid-template-columns: 244px 1fr; min-height: 100vh; }
.console .sidebar {
  background: var(--bg-2); border-right: 1px solid var(--line);
  padding: 20px 15px; display: flex; flex-direction: column; gap: 22px;
  position: sticky; top: 0; height: 100vh;
}
.console .sidebar .logo { display: flex; align-items: center; padding: 6px 8px 2px; }
.console .sidebar nav { display: grid; gap: 2px; flex: 1; align-content: start; overflow-y: auto; }
.console .sidebar nav a {
  display: flex; align-items: center; gap: 11px;
  color: var(--text-2); padding: 9px 12px; border-radius: 9px; font-size: 14px;
  border-left: 2px solid transparent;
}
.console .sidebar nav a i { font-style: normal; width: 18px; text-align: center; opacity: .75; }
.console .sidebar nav a:hover { background: var(--surface); color: var(--text); }
.console .sidebar nav a.active {
  background: linear-gradient(90deg, rgba(21, 184, 166, .16), rgba(21, 184, 166, .04));
  color: var(--teal-bright); border-left-color: var(--teal);
}
.console .side-foot { display: grid; gap: 9px; }
.console .whoami { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.console .whoami b { display: block; color: var(--text); font-size: 13.5px; }
.console .main { padding: 28px 34px 64px; max-width: 1400px; }

.console .acting-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; font-size: 12px;
}
.console .acting-box .label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.console .acting-box .name { font-weight: 600; color: var(--text); margin-top: 2px; }
.console .acting-box select {
  width: 100%; margin-top: 7px; font: inherit; font-size: 12px;
  background: var(--bg-2); color: var(--text); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px;
}
.console .acting-box.poa { border-color: var(--teal); }
.console .poa-notice {
  background: linear-gradient(160deg, rgba(232, 180, 90, .1), var(--surface));
  border: 1px solid rgba(232, 180, 90, .5); border-radius: 12px;
  padding: 14px 18px; font-size: 13.25px; color: var(--text); margin-bottom: 16px;
}
.console .poa-notice b { color: var(--amber); }

/* ---------------------------------------------------------- Page furniture */
.console .page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 24px; flex-wrap: wrap;
}
.console .page-head h1 { font-size: 29px; font-weight: 500; letter-spacing: -.025em; }
.console .page-head .sub { color: var(--text-3); font-size: 13.5px; margin-top: 5px; }
.console .section-gap { height: 18px; }
.console .foot { margin-top: 18px; text-align: center; color: var(--text-3); }

/* Console cards use their own grid vocabulary (.cards.cN), distinct from the
   marketing .grid — the engines emit these names. */
.console .cards { display: grid; gap: 14px; }
.console .cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.console .cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.console .cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.console .cards.c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.console .card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px;
}
.console .card h3 {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; margin-bottom: 12px;
}
.console .kpi .n {
  font-size: 30px; font-weight: 500; color: var(--teal); line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.console .kpi .l { color: var(--text-3); font-size: 12.5px; margin-top: 5px; line-height: 1.45; }
.console .scorering { font-size: 42px; font-weight: 500; color: var(--teal); letter-spacing: -.03em; }

/* ------------------------------------------------------------ App buttons --
   The engines emit .btn.gold / .btn.ghost / .btn.danger / .btn.sm / .btn.wide.
   Mapped onto the site's button shapes rather than a second button system. */
.console .btn {
  display: inline-block; padding: 9px 18px; border-radius: 100px;
  background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; border: 1px solid transparent;
  cursor: pointer; text-align: center; white-space: nowrap; transition: all .16s ease;
}
.console .btn.gold { background: var(--teal); color: #04122c; }
.console .btn.gold:hover:not(:disabled) { background: var(--teal-bright); }
.console .btn.ghost { border-color: var(--line); color: var(--text); background: transparent; }
.console .btn.ghost:hover { border-color: var(--teal); color: var(--teal); }
.console .btn.danger { border-color: rgba(224, 112, 100, .6); color: var(--red); background: transparent; }
.console .btn.danger:hover { background: rgba(224, 112, 100, .1); }
.console .btn.sm { padding: 6px 14px; font-size: 12.5px; }
.console .btn.wide { width: 100%; }
.console .btn:disabled { opacity: .5; cursor: wait; }

/* ------------------------------------------------------------- App tables */
.console table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.console table.t th {
  text-align: left; padding: 9px 12px; white-space: nowrap;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--text-3); border-bottom: 1px solid var(--line);
}
.console table.t td {
  padding: 10px 12px; border-bottom: 1px solid var(--line-soft);
  color: var(--text-2); vertical-align: middle;
}
.console table.t td:first-child { color: var(--text); }
.console table.t tr.click { cursor: pointer; }
.console table.t tr.click:hover td { background: rgba(21, 184, 166, .05); }

/* -------------------------------------------------------- App pills & bars */
.console .pill {
  display: inline-block; padding: 3px 11px; border-radius: 100px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em; border: 0;
}
.console .pill.gold  { background: rgba(21, 184, 166, .16);  color: var(--teal-bright); }
.console .pill.green { background: rgba(95, 190, 139, .16);  color: var(--green); }
.console .pill.teal  { background: rgba(124, 136, 255, .16); color: var(--violet); }
.console .pill.red   { background: rgba(224, 112, 100, .16); color: var(--red); }
.console .pill.terra { background: rgba(232, 180, 90, .16);  color: var(--amber); }
.console .pill.grey  { background: rgba(125, 136, 152, .14); color: var(--text-3); }
.console .bar { height: 8px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.console .bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }

/* -------------------------------------------------------------- App forms */
.console .field { margin-bottom: 14px; }
.console .field label {
  display: block; margin: 0 0 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3);
}
.console input.in, .console select.in, .console textarea.in {
  width: 100%; font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
}
.console input.in:focus, .console select.in:focus, .console textarea.in:focus {
  outline: none; border-color: var(--teal); box-shadow: var(--ring);
}
.console textarea.in { min-height: 110px; font-family: var(--mono); font-size: 12.5px; }
.console .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.console .row > * { flex: 1; }
.console .row .fix { flex: 0 0 auto; }

/* ---------------------------------------------------------- App utilities */
.console .muted { color: var(--text-3); }
.console .small { font-size: 12.5px; }
.console .mono { font-family: var(--mono); font-size: 12px; }
.console .gold-t { color: var(--teal); }
.console .teal-t { color: var(--violet); }
.console .red-t { color: var(--red); }
.console .green-t { color: var(--green); }
.console .empty { padding: 50px; text-align: center; color: var(--text-3); }
.console pre.json {
  background: #070b1c; border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; font-family: var(--mono); font-size: 12px;
  overflow: auto; max-height: 380px; color: #ccd5e4;
}
.console .chartbox svg { width: 100%; height: auto; display: block; }
.console .reason {
  display: grid; grid-template-columns: 64px 1fr 90px; gap: 12px; align-items: center;
  padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 13px;
}
.console .reason .pts { text-align: right; font-weight: 700; }
.console .tabbtns { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.console .tabbtns button {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-2);
  border-radius: 100px; padding: 7px 16px; font: inherit; font-size: 12.5px; cursor: pointer;
}
.console .tabbtns button.on { border-color: var(--teal); color: var(--teal-bright); background: rgba(21, 184, 166, .08); }
.console .chat { display: grid; gap: 12px; max-height: 460px; overflow-y: auto; }
.console .msg { padding: 14px 18px; border-radius: 14px; max-width: 85%; font-size: 14px; white-space: pre-wrap; }
.console .msg.q { background: var(--surface-2); border: 1px solid var(--line); justify-self: end; }
.console .msg.a {
  background: linear-gradient(160deg, rgba(21, 184, 166, .1), var(--surface));
  border: 1px solid rgba(21, 184, 166, .35); justify-self: start;
}
.console .msg .eng { display: block; margin-top: 8px; font-size: 11px; color: var(--text-3); }

/* ------------------------------------------------------------- Overlays ---
   The engines write into #toast and #modal, which live at document level. */
#toast {
  position: fixed; bottom: 26px; right: 26px; z-index: 120; max-width: 420px;
  background: var(--surface-2); border: 1px solid var(--teal); border-radius: 12px;
  padding: 14px 20px; font-size: 13.5px; color: var(--text); box-shadow: var(--shadow-lg);
}
#toast.err { border-color: var(--red); }
#modal {
  position: fixed; inset: 0; z-index: 110; padding: 24px;
  display: grid; place-items: center;
  background: rgba(4, 6, 18, .74); backdrop-filter: blur(5px);
}
#modal .modal-box {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px;
  padding: 30px; width: 760px; max-width: 100%; max-height: 88vh; overflow: auto;
  box-shadow: var(--shadow-lg);
}
#modal .modal-box h2 { font-size: 22px; font-weight: 500; margin-bottom: 14px; }
#modal .modal-box .field label,
#modal .modal-box .row { color: var(--text-2); }

@media (max-width: 1000px) {
  .console .app { grid-template-columns: 1fr; }
  .console .sidebar { position: static; height: auto; }
  .console .sidebar nav { display: flex; flex-wrap: wrap; }
  .console .cards.c3, .console .cards.c4, .console .cards.c5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console .main { padding: 20px; }
}
@media (max-width: 620px) {
  .console .cards.c2, .console .cards.c3, .console .cards.c4, .console .cards.c5 { grid-template-columns: 1fr; }
}