/* People's own part of its dashboard and its starter's page. The rest is the
   design kit (/ds.css, chassis 1.118.0; 3Sry's D-228): its tokens, the
   shell, the templates and their states. What is here is People's own: its
   colour as the kit's primary (Q-1118-1), the few parts the kit doesn't draw
   (a person's cards, the panel of what you asked to see, the wide table),
   and the chassis's provisional-calculation styles. Colours come only
   through the kit's tokens. No web fonts: the page loads from this machine
   only. */

/* People's catalogue colour, #6d4c9f, as the one primary (Q-1118-1). White
   on it reads 6.59:1, and as a link it reads 5.93:1 or more on every light
   surface. In dark mode the primary stays #6d4c9f (white on it is still
   6.59:1); its words on the dark surfaces would not pass, so the link and
   the rail's current place take the closest shade that does, #9c85be
   (4.71:1 or more). */
:root {
  --primary: #6d4c9f;
  --primary-hover: #60438c;
  --primary-tint: #f6f4f9;
  --primary-line: #d6cde4;
  --link: #6d4c9f;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #6d4c9f;
    --primary-hover: #60438c;
    --primary-tint: #262144;
    --primary-line: #413166;
    --link: #9c85be;
  }
}
:root[data-theme="light"] {
  --primary: #6d4c9f;
  --primary-hover: #60438c;
  --primary-tint: #f6f4f9;
  --primary-line: #d6cde4;
  --link: #6d4c9f;
}
:root[data-theme="dark"] {
  --primary: #6d4c9f;
  --primary-hover: #60438c;
  --primary-tint: #262144;
  --primary-line: #413166;
  --link: #9c85be;
}

h2 { font-size: var(--text-lg); margin-block: 24px 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.row select, .row input:not([type="checkbox"]) { inline-size: auto; flex: 1 1 180px; }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-block: 0 16px; }
.figure { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; }
.figure b { display: block; font-size: var(--text-2xl); }
.figure span { color: var(--ink-2); font-size: var(--text-sm); }
.views { margin-block: 0 12px; }
.chip { display: inline-block; padding-block: 2px; padding-inline: 8px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink); font-size: var(--text-xs); font-weight: 600; margin-block: 0 2px; margin-inline: 0 4px; }
.risk { color: var(--risk); }
.warn { color: var(--attention); }
.good { color: var(--good); }
.muted { color: var(--ink-2); }
.chip.risk { background: var(--risk-tint); }
.chip.warn { background: var(--attention-tint); }
.chip.good { background: var(--good-tint); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; margin-block: 0 12px; }
.card h3 { margin-block: 0 6px; font-size: var(--text-base); }
.text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-md); margin-block: 8px; }
.meta { color: var(--ink-2); font-size: var(--text-sm); }
.note { background: var(--surface-2); border-radius: var(--radius-md); padding-block: 10px; padding-inline: 12px; font-size: var(--text-sm); }
label { display: block; font-weight: 600; font-size: var(--text-sm); margin-block: 10px 4px; }
label.row, .t1-group-toggle { font-weight: 500; }
input:not([type="checkbox"]):not([type="radio"]), select, textarea { inline-size: 100%; }
textarea { min-block-size: 140px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 16px; }
.send { border: 2px solid var(--primary); }
.error, .saved { position: fixed; inset-inline: 16px; bottom: 76px; z-index: 60; max-inline-size: 760px; margin-inline: auto; padding-block: 12px; padding-inline: 14px; border-radius: var(--radius-md); font-weight: 600; }
.error { background: var(--risk-tint); color: var(--ink); border: 1px solid var(--risk); }
.saved { background: var(--good-tint); color: var(--ink); border: 1px solid var(--good); }
.ds-table-wrap { margin-block: 0 12px; }
@media (min-width: 769px) { .error, .saved { bottom: 16px; } }

/* A wide table scrolls sideways on a phone, and says so, rather than hiding columns (the walk's W-24). */
.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-inline-size: 100%; }
.scroll table { min-inline-size: 640px; }
.scroll-hint { display: none; }
@media (max-width: 700px) { .scroll-hint { display: block; } }
/* What you asked to see, in its own panel above the place (W-3). */
.ds-shell > .ds-rail { grid-row: 1 / span 2; }
.ds-shell > .shown, .ds-shell > main { grid-column: 2; }
.shown { padding-block: 12px 0; padding-inline: 24px; }
.shown .card { border: 2px solid var(--primary); }
.missing-rows { display: grid; gap: 8px; margin-block: 0 12px; }
.alarm { color: var(--risk); font-weight: 600; }
.t7-card .ds-brand { justify-content: center; }
.t7-card .ds-promise { border: 0; background: none; padding: 0; }

/* The provisional-calculation notice, its label and its sources: the chassis's styles (lib/provisional.mjs CSS). */
.pa-rev{font-size:.8em}
.pa-prov{display:inline-block;margin-inline-start:.4em;font-size:.8em;font-weight:600;white-space:nowrap}
.pa-fn{font-size:.75em;margin-inline-start:.15em}
.pa-notice{margin:1em 0;padding:.6em .8em;border:1px solid currentColor;font-size:.85em;line-height:1.4}
.pa-footnotes{font-size:.85em;margin:.8em 0 0;padding-inline-start:1.6em}
.pa-footnotes a{word-break:break-all}