/* SoCredit illustrative interface kit (round 4).
   Original, code-drawn credit review screens used as imagery in all three concepts.
   Every screen carries an "Illustrative · fictional data" tag. Each concept themes it with the --ui-* variables. */
:root{
  --ui-bg:#FFFFFF; --ui-panel:#F6F4F0; --ui-ink:#1D1C1A; --ui-ink-2:#6A655E; --ui-line:rgba(29,28,26,.1);
  --ui-accent:#1D1C1A; --ui-track:rgba(29,28,26,.1); --ui-flag:#9C5B2E; --ui-flag-bg:rgba(156,91,46,.1); --ui-ok:#3F6B55; --ui-ok-bg:rgba(63,107,85,.12);
  --ui-hl:rgba(214,196,150,.55);
  --ui-font:inherit; --ui-num:inherit;
  --ui-r:18px; --ui-r-sm:10px; --ui-pad:1.1rem; --ui-dot:8px; --ui-dial:9.5rem; --ui-bar-h:6px;
  --ui-pill:999px; --ui-ring:1.5px; --ui-device:#141414; --ui-metal-1:#cfccc6; --ui-metal-2:#a8a49d;
  --ui-shadow:0 1px 2px rgba(0,0,0,.05),0 30px 60px -30px rgba(0,0,0,.35);
}
.ui{font-family:var(--ui-font);color:var(--ui-ink);background:var(--ui-bg);border-radius:var(--ui-r);box-shadow:var(--ui-shadow);overflow:hidden;font-size:.875rem;line-height:1.45;text-align:left}
.ui *{box-sizing:border-box}
.ui-top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.85rem var(--ui-pad);border-bottom:var(--line) solid var(--ui-line)}
.ui-brand{font-weight:600;font-size:.875rem;letter-spacing:-.01em}
.ui-brand span{color:var(--ui-ink-2);font-weight:500}
.ui-tag{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ui-ink-2);background:var(--ui-panel);padding:.25rem .55rem;border-radius:var(--ui-pill);white-space:nowrap}
.ui-body{padding:var(--ui-pad);display:grid;gap:.9rem}
.ui-grid{display:grid;gap:.9rem}
@media (min-width:640px){.ui-grid.two{grid-template-columns:auto 1fr;align-items:center}}
.ui-card{background:var(--ui-panel);border-radius:var(--ui-r-sm);padding:.9rem 1rem}
.ui-h{font-size:.75rem;font-weight:600;letter-spacing:.04em;color:var(--ui-ink-2);margin-bottom:.55rem}

/* Score dial */
.ui-score{position:relative;width:var(--ui-dial);aspect-ratio:1;margin-inline:auto}
.ui-score svg{width:100%;height:100%;transform:rotate(135deg)}
.ui-score circle{fill:none;stroke-width:7;stroke-linecap:round}
.ui-score .trk{stroke:var(--ui-track);stroke-dasharray:75 100}
.ui-score .val{stroke:var(--ui-accent)}
.ui-score .read{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ui-score .num{font-family:var(--ui-num);font-size:2.4rem;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ui-score .cap{font-size:.75rem;color:var(--ui-ink-2);margin-top:.3rem}

/* Bureau bars */
.ui-bars{display:grid;gap:.6rem}
.ui-bar{display:grid;grid-template-columns:6.5rem 1fr 2.4rem;align-items:center;gap:.6rem;font-size:.8125rem}
.ui-bar .track{height:var(--ui-bar-h);border-radius:var(--ui-pill);background:var(--ui-track);overflow:hidden}
.ui-bar .bar-fill{height:100%;width:100%;border-radius:var(--ui-pill);background:var(--ui-accent)}
.ui-bar b{font-weight:600;text-align:right;font-variant-numeric:tabular-nums}

/* Items under review */
.ui-items{display:grid}
.ui-item{display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.65rem 0;border-top:var(--line) solid var(--ui-line)}
.ui-item:first-child{border-top:0;padding-top:0}
.ui-item i{width:var(--ui-dot);height:var(--ui-dot);border-radius:50%;background:var(--ui-flag)}
.ui-item i.ok{background:var(--ui-ok)}
.ui-item strong{display:block;font-weight:600;font-size:.8125rem}
.ui-item small{display:block;color:var(--ui-ink-2);font-size:.75rem}
.ui-pill{font-size:.75rem;font-weight:600;padding:.25rem .55rem;border-radius:var(--ui-pill);white-space:nowrap;background:var(--ui-flag-bg);color:var(--ui-flag)}
.ui-pill.ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.ui-pill.neutral{background:var(--ui-panel);color:var(--ui-ink-2)}

/* Dispute timeline (illustrative; no outcome implied) */
.ui-steps{list-style:none;padding:0;margin:0;display:grid;gap:0}
.ui-steps li{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:.7rem;align-items:center;padding:.55rem 0}
.ui-steps li::before{content:"";position:absolute;left:calc(var(--ui-dot) / 2 - .5px);top:1.6rem;bottom:-.4rem;width:var(--line);background:var(--ui-line)}
.ui-steps li:last-child::before{display:none}
.ui-steps i{position:relative;z-index:1;width:var(--ui-dot);height:var(--ui-dot);border-radius:50%;background:var(--ui-accent)}
.ui-steps li.next i{background:var(--ui-bg);box-shadow:inset 0 0 0 var(--ui-ring) var(--ui-ink-2)}
.ui-steps span{font-size:.8125rem;font-weight:500}
.ui-steps small{color:var(--ui-ink-2);font-size:.75rem;font-variant-numeric:tabular-nums}

/* Report sheet with highlighted lines */
.ui-report{font-size:.8125rem}
.ui-report table{width:100%;border-collapse:collapse}
.ui-report th{font-weight:500;font-size:.6875rem;letter-spacing:.04em;color:var(--ui-ink-2);text-align:left;padding:.4rem .4rem;border-bottom:var(--line) solid var(--ui-line)}
.ui-report td{padding:.55rem .4rem;border-bottom:var(--line) solid var(--ui-line);font-variant-numeric:tabular-nums}
.ui-report td:last-child,.ui-report th:last-child{text-align:right}
.hl-mark{background-image:linear-gradient(var(--ui-hl),var(--ui-hl));background-repeat:no-repeat;background-position:0 55%;background-size:100% 78%}
.ui-note{display:block;font-size:.75rem;font-weight:600;color:var(--ui-flag);margin-top:.15rem}

/* Devices */
.device-phone{position:relative;width:min(100%,18.5rem);aspect-ratio:9/19;border-radius:2.6rem;background:var(--ui-device);padding:.55rem;box-shadow:var(--ui-shadow)}
.device-phone::before{content:"";position:absolute;top:.9rem;left:50%;width:30%;height:1.3rem;transform:translateX(-50%);border-radius:var(--ui-pill);background:var(--ui-device);z-index:3}
.device-phone .ui{height:100%;border-radius:2.1rem;box-shadow:none;padding-top:1.9rem;overflow:hidden}
.device-laptop{position:relative;width:100%}
.device-laptop .screen{border-radius:1rem 1rem 0 0;background:var(--ui-device);padding:.6rem .6rem 0}
.device-laptop .screen .ui{border-radius:.55rem .55rem 0 0;box-shadow:none}
.device-laptop .base{height:.9rem;margin:0 -4%;border-radius:0 0 1rem 1rem;background:linear-gradient(var(--ui-metal-1),var(--ui-metal-2))}

/* Illustrative score journey (fictional; always shown with its disclaimer) */
.ui-ba{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.ui-ba small{display:block;font-size:.75rem;color:var(--ui-ink-2)}
.ui-ba b{font-family:var(--ui-num);font-size:2rem;font-weight:600;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.ui-ba svg{width:1.4rem;height:1.4rem;color:var(--ui-ink-2);flex:none}
.ui-ba div:last-child{text-align:right}
.ui-chart .chart{width:100%;height:auto;overflow:visible}
.ui-chart .grid{stroke:var(--ui-line);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.ui-chart .area{fill:var(--ui-accent);opacity:.08}
.ui-chart .line{fill:none;stroke:var(--ui-accent);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:0}
.js-motion .ui-chart .line{stroke-dashoffset:100;transition:stroke-dashoffset var(--d-dial,1600ms) var(--ease-out,ease-out)}
.js-motion .ui-chart .is-in .line{stroke-dashoffset:0}
.ui-months{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--ui-ink-2)}
.ui-disclaim{font-size:.75rem;line-height:1.4;color:var(--ui-ink-2);padding-top:.6rem;border-top:var(--line) solid var(--ui-line)}
@media (prefers-reduced-motion:reduce){.js-motion .ui-chart .line{transition:none;stroke-dashoffset:0}}