/* Industry — the skin a customer sees.
 *
 * The console is an instrument for people who use it all day; these pages
 * are for somebody who opened one to find out what they owe. Different
 * audience, different clothes, same application underneath.
 *
 * Everything here hangs off `data-skin="customer"` on the **root element** —
 * the same element the theme toggle writes `data-theme` to, which is the
 * whole reason the dark rules below can be guarded against an explicit light
 * choice. A page that does not ask for the skin is untouched. The rules below only ever redefine
 * app.css's own tokens — they do not restyle its components one by one —
 * which is why a panel, a chip, a table and a button all change together and
 * nothing has to be kept in step by hand.
 */

:root[data-skin="customer"] {
  /* The ground. Cooler and flatter than the console's warm paper. */
  --plane:     #f2f2f3;
  --surface-1: #e9e9ea;
  --ink:       #1d1f20;
  --ink-2:     #5d5d60;
  --muted:     #7a7a7d;
  --grid:      #d4d4d7;
  --baseline:  #b7b7ba;
  --border:    color-mix(in srgb, #1d1f20 16%, transparent);
  --track:     #e7e7ea;

  /* Slate blue, not the console's brighter civic blue; the rust is Corporate
     Mapper's own mark, kept for the one place a second colour is needed. */
  --series-1:  #5980a6;
  --series-2:  #9a4a2e;
  --series-3:  #627d98;
  --pos:       #5980a6;

  --accent-100: #eef6ff;
  --accent-800: #2c455d;

  /* Square. The system is drawn as wireframe objects and a rounded corner
     reads as a different family altogether. */
  --radius: 0px;
  --pad: 20px;

  --font-body:    "Barlow", system-ui, -apple-system, "Noto Sans Devanagari", sans-serif;
  --font-heading: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Guarded the way app.css guards its own, and on the same element. The skin
   used to live on the body while the theme lives on the root, so
   `:not([data-theme="light"])` was asking the body about an attribute it
   never has — always true, which pinned a dark-OS visitor into dark and left
   the toggle unable to do anything about it. */
@media (prefers-color-scheme: dark) {
  :root[data-skin="customer"]:where(:not([data-theme="light"])) {
    --plane:     #151719;
    --surface-1: #1c1f21;
    --ink:       #e4e5e7;
    --ink-2:     #b7b7ba;
    --muted:     #98989b;
    --grid:      #2f3336;
    --baseline:  #45494c;
    --border:    color-mix(in srgb, #e4e5e7 18%, transparent);
    --track:     #2b2e31;
    --series-1:  #7fa6cc;
    --series-2:  #e39a7e;
    --pos:       #7fa6cc;
    --accent-100: #1d2d3d;
    --accent-800: #d6ebff;
  }
}
:root[data-skin="customer"][data-theme="dark"] {
  --plane:     #151719;
  --surface-1: #1c1f21;
  --ink:       #e4e5e7;
  --ink-2:     #b7b7ba;
  --muted:     #98989b;
  --grid:      #2f3336;
  --baseline:  #45494c;
  --border:    color-mix(in srgb, #e4e5e7 18%, transparent);
  --track:     #2b2e31;
  --series-1:  #7fa6cc;
  --series-2:  #e39a7e;
  --pos:       #7fa6cc;
  --accent-100: #1d2d3d;
  --accent-800: #d6ebff;
}

/* ─────────────────────────────────────────────────────────── type */

:root[data-skin="customer"] body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
}
[data-skin="customer"] h1,
[data-skin="customer"] h2,
[data-skin="customer"] h3,
[data-skin="customer"] h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
}
[data-skin="customer"] h1 { font-size: 38px; }
[data-skin="customer"] h2 { font-size: 26px; }
[data-skin="customer"] h3 { font-size: 20px; }

/* A figure, a reference and a date are read as data, not as prose. */
[data-skin="customer"] code,
[data-skin="customer"] .mono,
[data-skin="customer"] .stat-value,
[data-skin="customer"] .due-table,
[data-skin="customer"] .fig-value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* A label above a figure, in the system's voice. */
[data-skin="customer"] .stat-label,
[data-skin="customer"] .fig-label {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ───────────────────────────────────────────────── the four figures */

/* The top of the page, and the whole of it on a phone. Each card answers one
   question, in the order somebody asks them: am I late, what is next, what
   can I still spend, what does the bank think of me. */
.figures {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  background: var(--grid);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.fig {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px var(--pad);
  background: var(--plane);
}
/* The one that means trouble wears it. */
.fig.bad { background: color-mix(in srgb, var(--status-critical) 9%, var(--plane)); }
.fig.bad .fig-label { color: var(--status-critical); }
.fig-value { font-size: 27px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; }
.fig-value .unit { font-size: 13px; font-weight: 400; color: var(--muted); margin-right: 4px; }
.fig-sub { font-size: 12.5px; color: var(--ink-2); }
.fig-foot { margin-top: auto; padding-top: 6px; font-size: 11px; color: var(--muted); }
.fig-foot code { font-size: 11px; }

/* A share of something, under a figure. */
.fig .bar { height: 4px; margin-top: 8px; }

@media (max-width: 560px) {
  .figures { grid-template-columns: 1fr; }
  [data-skin="customer"] h1 { font-size: 30px; }
  .fig-value { font-size: 24px; }
}

/* ───────────────────────────────────────── registration, sparingly */

/* The design draws its objects as wireframes with corner marks. Used on the
   one block that is the page's subject, it reads as considered; used on
   everything it reads as a theme. */
.plate { position: relative; }
.plate > .corner {
  position: absolute; width: 11px; height: 11px;
  color: color-mix(in srgb, var(--ink) 45%, transparent);
}
.plate > .corner::before,
.plate > .corner::after { content: ""; position: absolute; background: currentColor; }
.plate > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.plate > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.plate > .tl { top: -6px; left: -6px; }
.plate > .tr { top: -6px; right: -6px; transform: scaleX(-1); }
.plate > .bl { bottom: -6px; left: -6px; transform: scaleY(-1); }
.plate > .br { bottom: -6px; right: -6px; transform: scale(-1); }

/* ────────────────────────────────────────────────────── one loan */

.loan-ref { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.loan-ref code {
  font-size: 12px; letter-spacing: 0.04em; color: var(--ink-2);
  /* The reference is what somebody reads down a phone to their bank, so it
     is selectable and set in the face that makes a 0 and an O differ. */
  user-select: all;
}
.loan-aside { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.loan-facts { margin: 14px 0 0; }
.loan-facts dd.strong { color: var(--ink); }
.loan-facts dd.warn { color: var(--status-critical); }

/* A revolving loan before its first statement: a balance and no rows. Said
   plainly, because a panel with money in it and nothing under it reads as a
   fault rather than as how the product works. */
.no-sched {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 14px; padding: 14px var(--pad);
  border: 1px dashed var(--baseline); background: var(--plane);
}
.no-sched .desc { margin-top: 2px; max-width: 46ch; }