/*
 * DataShaper styles, following the Mercury design system: tokens from
 * shared_elm_modules/tailwind.config.js, components after ElmViewComponents.elm
 * and the mercury_header micro frontend (white 44px header, full-width content,
 * Roboto Condensed, cyan as the single accent, borderless cards, uppercase
 * bold buttons, solid pills). Sizes are in rem on a 16px root, as there.
 */

@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 300; font-display: swap; src: url("/fonts/roboto-condensed-v19-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/roboto-condensed-v19-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/roboto-condensed-v19-latin-700.woff2") format("woff2"); }

:root {
  --cyan: #11B1C3;
  --cyan-hover: #35BDCC;
  --cyan-pressed: #0C828F;
  --cyan-soft: rgba(17, 177, 195, 0.1);
  --red: #D44C42;
  --red-hover: #DA675E;
  --orange: #DC8245;
  --green: #00C27C;
  --text: #303030;
  --muted: #737373;
  --meta: #999999;
  --page: #F7F7F7;
  --surface: #fff;
  --sunken: #F1F1F1;
  --border: #D9D9D9;
  --input-border: #BFBFBF;
  --divider: #F1F1F1;
  --radius-sm: 0.125rem;
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-card: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  --transition: all 300ms ease-in-out;
  --header: 44px;
  --container: 90rem;
  --gutter: 2rem;
  --mono: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

html { font-size: 16px; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--text); font-family: "Roboto Condensed", "Nunito", "Helvetica Neue", Arial, "Noto Sans", sans-serif; font-size: 0.875rem; line-height: 1.4; }
a { color: var(--cyan); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--cyan-hover); }
code { font-family: var(--mono); font-size: 0.75rem; background: var(--sunken); padding: 0.0625rem 0.25rem; border-radius: var(--radius-sm); }
pre { margin: 0; white-space: pre-wrap; font-family: inherit; }
h1 { font-size: 1.5rem; font-weight: 700; margin: 0.25rem 0; display: flex; align-items: center; gap: 0.75rem; }
h2 { font-size: 1rem; font-weight: 700; text-transform: uppercase; color: var(--muted); margin: 0; }
h3 { font-size: 1rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 0.5rem; }
p { margin: 0.5rem 0; }

/* header */
/* Header and page share one centred container, so the logo lines up with the
   content and wide screens keep a margin on both sides. */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--header); background: var(--surface); box-shadow: var(--shadow); }
.topbar-inner { height: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; }
.topbar-left { display: flex; align-items: center; min-width: 0; }
.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { height: 20px; width: 90px; display: block; }
.breadcrumbs { margin-left: 1.5rem; font-size: 0.75rem; font-weight: 300; color: var(--text); display: flex; align-items: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumbs a { color: var(--text); }
.breadcrumbs a:hover { color: var(--cyan); }
.breadcrumbs .sep { margin: 0 0.5rem; color: var(--meta); }
.topbar .tagline { color: var(--meta); font-size: 0.75rem; }

/* layout */
.page { max-width: var(--container); margin: var(--header) auto 0; padding: 1.5rem var(--gutter) 3rem; }
.page-header { display: flex; justify-content: space-between; align-items: flex-start; min-height: 72px; margin-bottom: 0.5rem; }
.header-actions { display: flex; gap: 0.5rem; align-items: center; }
.header-actions > span { display: flex; gap: 0.5rem; }
.back { font-size: 0.75rem; font-weight: 300; color: var(--text); }
.back:hover { color: var(--cyan); }

.card { background: var(--surface); border-radius: var(--radius-lg); padding: 1.5rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); position: relative; }
.card-title { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.card-title > div { display: flex; gap: 0.5rem; align-items: center; }
.muted { color: var(--muted); }
.hint { background: var(--cyan-soft); border: 1px solid rgba(17, 177, 195, 0.25); padding: 0.5rem 0.75rem; border-radius: var(--radius); }
.error { color: var(--red); }

.banner { border-radius: var(--radius); padding: 0.75rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border: 1px solid transparent; }
.banner.error { background: rgba(212, 76, 66, 0.1); border-color: rgba(212, 76, 66, 0.25); color: var(--red); }
.banner.notice { background: var(--cyan-soft); border-color: rgba(17, 177, 195, 0.25); color: var(--text); }

/* buttons */
button, .button { height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.25rem 1rem; border: 0; border-radius: var(--radius); background: var(--sunken); color: var(--cyan); font-family: inherit; font-size: 0.75rem; font-weight: 700; line-height: normal; text-transform: uppercase; white-space: nowrap; cursor: pointer; outline: none; transition: var(--transition); }
button:hover, .button:hover { background: var(--cyan-hover); color: #fff; }
button:disabled { pointer-events: none; cursor: not-allowed; opacity: 0.25; filter: grayscale(1); }
button.primary { background: var(--cyan); color: #fff; }
button.primary:hover { background: var(--cyan-hover); }
button.primary:active { background: var(--cyan-pressed); }
button.danger { background: rgba(212, 76, 66, 0.1); color: var(--red); }
button.danger:hover { background: rgba(212, 76, 66, 0.15); color: var(--red); }
button.small, .button.small { height: 1.75rem; padding: 0 0.75rem; }
button.link { height: auto; background: none; padding: 0; color: var(--cyan); text-transform: none; font-weight: 400; font-size: inherit; }
button.link:hover { background: none; color: var(--cyan-hover); }
button.link.danger { color: var(--red); }
label.button { display: inline-flex; }
.row-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.row-form.centered { justify-content: center; margin: 0.75rem 0; }

/* fields */
input, select { height: 2.5rem; padding: 0.25rem 0.5rem; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: #fff; color: var(--text); font-family: inherit; font-size: 0.875rem; outline: none; transition: var(--transition); }
input::placeholder { color: var(--input-border); }
input:hover, select:hover { border-color: var(--cyan-hover); }
input:focus, select:focus { border-color: var(--cyan); }
input[type="checkbox"] { height: 1rem; width: 1rem; padding: 0; accent-color: var(--cyan); }
input.param { width: 8rem; height: 2rem; }
table input, table select { height: 2rem; }
select.inline { height: 1.5rem; padding: 0 0.25rem; font-size: 0.75rem; }
.checkbox { display: inline-flex; align-items: center; gap: 0.375rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* tables */
table { border-collapse: separate; border-spacing: 0; width: 100%; }
th, td { text-align: left; padding: 0.5rem 0.75rem; vertical-align: top; }
th { font-size: 0.75rem; font-weight: 700; color: var(--text); line-height: 1.25; white-space: nowrap; }
td { border-top: 1px solid var(--divider); line-height: 1.25; }
tbody tr { transition: background 150ms ease-in-out; }
table.list tbody tr:hover td, table.runs tbody tr:hover td { background: var(--sunken); }
table.compact td, table.compact th { padding: 0.375rem 0.75rem; }
table.list td.actions { text-align: right; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-scroll { overflow-x: auto; }

/* pills */
.status, .level, .verdict-pill, .confidence, .score-pill { display: inline-block; border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.75rem; font-weight: 700; line-height: 1.25; color: #fff; background: var(--muted); white-space: nowrap; }
.status { text-transform: uppercase; }
.status-ready { background: var(--green); }
.status-failed { background: var(--red); }
.status-review { background: var(--orange); }
.status-planning, .status-running, .status-profiling { background: var(--cyan); }
.level-ok, .confidence-high { background: var(--green); }
.level-info, .confidence-confirmed { background: var(--cyan); }
.level-warning, .confidence-medium { background: var(--orange); }
.level-error, .confidence-low { background: var(--red); }
.verdict-pill.tone-ok { background: var(--green); color: #fff; }
.verdict-pill.tone-info { background: var(--cyan); color: #fff; }
.verdict-pill.tone-warning { background: var(--orange); color: #fff; }
.verdict-pill.tone-error { background: var(--red); color: #fff; }
.chip { display: inline-flex; gap: 0.375rem; align-items: baseline; background: var(--cyan-soft); color: var(--cyan-pressed); border-radius: 9999px; padding: 0.125rem 0.625rem; font-size: 0.8125rem; }
.chip-detail { color: var(--muted); font-size: 0.6875rem; }

/* sources and mapping review */
.source { border-top: 1px solid var(--divider); padding: 0.75rem 0; }
.source-head { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.profile summary { cursor: pointer; padding: 0.25rem 0; color: var(--cyan); }
.profile table { margin: 0.5rem 0 0.75rem; }
.plan-source { border-top: 1px solid var(--divider); padding: 0.75rem 0; }
.plan-source.unused { opacity: 0.6; }
table.mappings tr.low td { background: rgba(220, 130, 69, 0.08); }
table.mappings tr.dropped td { color: var(--meta); }
table.mappings .reason { max-width: 22rem; }
.kind { font-size: 0.6875rem; }
.string-list summary { cursor: pointer; color: var(--cyan); }
.string-list ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.notes { margin-bottom: 0.75rem; }

.checks { list-style: none; padding: 0; margin: 0.5rem 0; }
.checks li { padding: 0.375rem 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.25rem; background: #FAFAFA; }
.checks li.level-ok { border-color: var(--green); background: #FAFAFA; }
.checks li.level-info { border-color: var(--cyan); background: #FAFAFA; }
.checks li.level-warning { border-color: var(--orange); background: rgba(220, 130, 69, 0.08); }
.checks li.level-error { border-color: var(--red); background: rgba(212, 76, 66, 0.08); }
.check-name { display: inline-block; min-width: 11rem; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }

/* result grid */
.grid-wrap { margin-top: 0.75rem; }
.grid-scroll { overflow-x: auto; border: 1px solid rgba(217, 217, 217, 0.75); border-radius: var(--radius); }
table.grid { font-size: 0.75rem; white-space: nowrap; }
table.grid th { position: sticky; top: 0; background: #fff; }
table.grid td { cursor: text; }
table.grid td:hover { background: var(--sunken); }
table.grid tr.edited td { background: rgba(17, 177, 195, 0.15); }
table.grid td.editing { padding: 0; }
table.grid td.editing input { width: 100%; height: 2rem; border: 1px solid var(--cyan); border-radius: 0; }
.pager { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.5rem; }

/* scores */
.assessment-head { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 0.75rem; }
.scores { display: flex; gap: 0.75rem; align-items: center; }
.score { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 5.5rem; height: 5.5rem; border-radius: var(--radius-lg); background: var(--sunken); color: var(--text); }
.score-number { font-size: 2rem; font-weight: 700; line-height: 1; }
.score-grade { font-size: 0.75rem; font-weight: 700; margin-top: 0.25rem; }
.score-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; margin-top: 0.125rem; color: var(--muted); }
.score.secondary { min-width: 4.5rem; height: 4.5rem; }
.score.secondary .score-number { font-size: 1.5rem; }
.score.grade-A { background: rgba(0, 194, 124, 0.15); color: #00875a; }
.score.grade-B { background: rgba(17, 177, 195, 0.15); color: var(--cyan-pressed); }
.score.grade-C { background: rgba(220, 130, 69, 0.15); color: #b05f25; }
.score.grade-D { background: rgba(212, 76, 66, 0.15); color: var(--red); }
.score-pill.grade-A { background: var(--green); }
.score-pill.grade-B { background: var(--cyan); }
.score-pill.grade-C { background: var(--orange); }
.score-pill.grade-D { background: var(--red); }
.assessment-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.assessment-columns ul { margin: 0.25rem 0 0.5rem; padding-left: 1.25rem; }
.assessment-columns li { margin-bottom: 0.25rem; }
table.components td { border-top: none; padding: 0.25rem 0.5rem; }
.component-label { white-space: nowrap; width: 1%; }
.component-bar { width: 8rem; }
.component-points { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; font-weight: 700; }
.component-detail { font-size: 0.75rem; }
.bar { background: var(--sunken); height: 0.375rem; border-radius: 9999px; overflow: hidden; margin-top: 0.375rem; }
.bar > span { display: block; height: 100%; background: var(--cyan); }

/* runs */
tr.current-run td { background: rgba(17, 177, 195, 0.08); }
table.runs tbody tr { cursor: pointer; }
tr.selected-run td { background: rgba(17, 177, 195, 0.15) !important; }
tr.pending td { background: rgba(220, 130, 69, 0.08); }
.run-actions { text-align: right; white-space: nowrap; }
.small-link { font-size: 0.75rem; font-weight: 400; text-transform: none; }
table.checks-by-run td:not(:first-child), table.checks-by-run th:not(:first-child) { text-align: center; }
tr.group-row td { font-weight: 700; color: var(--muted); font-size: 0.75rem; text-transform: uppercase; padding-top: 1rem; border-top: none; }

/* delivery report */
.report .verdict { display: flex; gap: 1rem; align-items: flex-start; padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; border: 1px solid transparent; }
.verdict-label { font-size: 1.25rem; font-weight: 700; min-width: 10rem; text-transform: uppercase; }
.verdict-body { flex: 1; color: var(--text); }
.verdict-body ul { margin: 0 0 0.25rem; padding-left: 1.125rem; }
.verdict-body p { margin: 0; }
.verdict-actions { display: flex; flex-direction: column; gap: 0.375rem; align-items: flex-end; max-width: 17rem; text-align: right; font-size: 0.75rem; }
.verdict.tone-ok { background: rgba(0, 194, 124, 0.1); border-color: rgba(0, 194, 124, 0.25); }
.verdict.tone-ok .verdict-label { color: #00875a; }
.verdict.tone-info { background: var(--cyan-soft); border-color: rgba(17, 177, 195, 0.25); }
.verdict.tone-info .verdict-label { color: var(--cyan-pressed); }
.verdict.tone-warning { background: rgba(244, 158, 64, 0.15); border-color: rgba(244, 158, 64, 0.25); }
.verdict.tone-warning .verdict-label { color: #b05f25; }
.verdict.tone-error { background: rgba(212, 76, 66, 0.1); border-color: rgba(212, 76, 66, 0.25); }
.verdict.tone-error .verdict-label { color: var(--red); }
.report-summary { font-size: 1rem; margin: 0.25rem 0 1rem; }
.report-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.report-grid h3 { margin-top: 0; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin: 0; }
dl.facts dt { color: var(--muted); font-size: 0.75rem; padding-top: 0.125rem; }
dl.facts dd { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
ul.expected, ul.limits { list-style: none; padding: 0; margin: 0.5rem 0; }
ul.limits li { color: var(--muted); font-size: 0.8125rem; padding-left: 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.25rem; }
ul.expected li { padding: 0.125rem 0; }
ul.expected .mark { display: inline-block; width: 1.25rem; font-weight: 700; }
.expected-present .mark { color: var(--green); }
.expected-missing { color: var(--muted); }
.expected-missing .mark { color: var(--orange); }
tr.unused-source td { color: var(--meta); }
.counts { font-weight: 400; font-size: 0.8125rem; margin-left: 0.5rem; }
.file-issues { margin: 0.75rem 0; }
.file-name { font-weight: 700; margin-bottom: 0.25rem; }
ul.issues { list-style: none; padding: 0; margin: 0; }
.issue { padding: 0.5rem 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.375rem; background: #FAFAFA; }
.issue-error { border-color: var(--red); background: rgba(212, 76, 66, 0.08); }
.issue-warning { border-color: var(--orange); background: rgba(220, 130, 69, 0.08); }
.issue-info { border-color: var(--cyan); }
.issue-examples { margin-top: 0.25rem; display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: center; font-size: 0.8125rem; }
.issue-action { margin-top: 0.25rem; font-size: 0.8125rem; color: var(--cyan-pressed); }
.notes-list { margin-top: 0.5rem; }
.notes-list summary { cursor: pointer; color: var(--cyan); }
.rejects p { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.report-footer { margin: 1rem 0 0; font-size: 0.75rem; color: var(--meta); }

/* advertiser page */

.dropzone.hover { border-color: var(--cyan); background: #e2f4f7; }
.dropzone.busy { opacity: 0.6; }


@media (max-width: 900px) {
  .assessment-columns, .report-grid { grid-template-columns: 1fr; }
  .report .verdict { flex-direction: column; }
  .verdict-actions { align-items: flex-start; text-align: left; }
  .tagline { display: none; }
  :root { --gutter: 1rem; }
}

/* tabs (Mercury tab bar) */
.tabbar { display: flex; align-items: center; gap: 0.25rem; height: 2.5rem; background: var(--sunken); border-radius: var(--radius); margin-bottom: 1rem; padding: 0 0.25rem; }
.tabbar .tab { height: 2rem; padding: 0 1.5rem; border-radius: var(--radius-sm); background: transparent; color: var(--muted); font-size: 0.875rem; font-weight: 400; text-transform: none; }
.tabbar .tab:hover, .tabbar .tab.active { background: #fff; color: var(--muted); }
.tabbar .tab.active { color: var(--cyan); font-weight: 700; }

/* task list */
.task-progress { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-bottom: 0.5rem; }
.task-progress-bar { display: flex; align-items: center; gap: 0.75rem; min-width: 18rem; }
.task-progress-bar .bar { flex: 1; margin-top: 0; }
.task-group h3 { margin-top: 1.25rem; margin-bottom: 0.125rem; }
.task-group > p { margin-top: 0; }
.task { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: var(--radius); padding: 0.875rem 1rem; margin: 0.75rem 0; background: #fff; }
.task.task-fix { border-left-color: var(--orange); }
.task-meta { font-size: 0.75rem; margin-bottom: 0.375rem; }
.task-question { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.task-why { margin: 0.25rem 0 0; color: var(--muted); }
.task-detail { margin-top: 0.375rem; font-size: 0.8125rem; }
.task-detail summary { cursor: pointer; color: var(--cyan); }
.task-detail p { margin: 0.25rem 0 0; color: var(--muted); }
.task-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.task-options button { height: auto; min-height: 2.25rem; white-space: normal; text-align: left; text-transform: none; font-size: 0.8125rem; padding: 0.375rem 0.875rem; }
.task-fold { margin-top: 1rem; }
.task-fold summary { cursor: pointer; color: var(--cyan); font-weight: 700; }
ul.task-done, ul.task-notes { list-style: none; padding: 0; margin: 0.5rem 0 0; }
ul.task-done li { display: flex; gap: 0.5rem; padding: 0.375rem 0; border-top: 1px solid var(--divider); }
ul.task-done .mark { color: var(--green); font-weight: 700; }
ul.task-notes li { padding: 0.375rem 0.75rem; border-left: 2px solid var(--border); margin-bottom: 0.25rem; color: var(--muted); font-size: 0.8125rem; }
.verdict-open { margin: 0 0 0.25rem; font-weight: 700; }

/* a delivery without a report: what it is waiting for */
.stage { padding: 2rem; }
.stage h2 { margin-top: 0; }
.stage-steps { list-style: none; padding: 0; margin: 1.25rem 0; }
.stage-steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.375rem 0; color: var(--muted); }
.stage-steps .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sunken); font-size: 0.75rem; font-weight: 700; }
.stage-steps li.now { color: inherit; font-weight: 700; }
.stage-steps li.now .mark { background: var(--cyan); color: #fff; }
.stage-steps li.done .mark { background: var(--green); color: #fff; }
.stage-now { display: flex; align-items: center; gap: 0.625rem; margin: 0; color: var(--muted); font-size: 0.8125rem; }
.spinner { width: 0.875rem; height: 0.875rem; border: 2px solid var(--border); border-top-color: var(--cyan); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.stage-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.stage-timer { font-size: 1.25rem; font-weight: 700; color: var(--cyan); font-variant-numeric: tabular-nums; }
.stage-steps li { gap: 0.75rem; }
.stage-steps li .spinner { margin: 0 0.3125rem; }
.stage-steps .stage-text { flex: 1; }
.stage-steps .stage-took { font-variant-numeric: tabular-nums; font-size: 0.8125rem; color: var(--muted); font-weight: 400; }
.stage-steps li.done { color: var(--muted); }

/* the steps of one upload, and what there is to look into */
.journey { margin-bottom: 1rem; }
.stepper { display: block; width: 100%; height: auto; padding: 0.875rem 1.25rem; background: #fff; border: 1px solid transparent; border-radius: var(--radius); text-transform: none; font-weight: 400; cursor: pointer; }
.stepper:hover { background: #fff; }
.stepper.active { border-color: var(--border); }
.stepper ol { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0.5rem; }
.stepper li { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; white-space: nowrap; }
.stepper li:not(:last-child)::after { content: ""; display: block; width: 3rem; height: 2px; background: var(--border); margin: 0 0.5rem; }
.stepper li.done:not(:last-child)::after { background: var(--green); }
.stepper .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--sunken); font-size: 0.75rem; font-weight: 700; }
.stepper li.done .mark { background: var(--green); color: #fff; }
.stepper li.now { color: var(--text, #333); font-weight: 700; }
.stepper li.now .mark { background: var(--cyan); color: #fff; }
.inside-nav { display: flex; align-items: center; gap: 0.25rem; margin-top: 0.5rem; padding: 0 0.25rem; font-size: 0.8125rem; }
.inside-nav .inside { height: 1.75rem; padding: 0 0.75rem; background: transparent; color: var(--cyan); text-transform: none; font-weight: 400; font-size: 0.8125rem; border-radius: var(--radius-sm); }
.inside-nav .inside:hover { background: var(--sunken); }
.inside-nav .inside.active { background: var(--cyan); color: #fff; font-weight: 700; }
.inside-nav .back-to-steps { margin-left: auto; }
.stage-reasons { margin: 0.5rem 0; padding-left: 1.25rem; }
.step-ready h2 { color: #00875a; }
ul.next-steps { list-style: none; padding: 0; margin: 1rem 0 0; }
ul.next-steps li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.875rem 0; border-top: 1px solid var(--divider); }
details.analyst > summary { cursor: pointer; color: var(--cyan); font-weight: 700; }
details.analyst .card { box-shadow: none; padding-left: 0; padding-right: 0; }

/* how the table is built */
.flow { display: flex; align-items: stretch; gap: 1rem; margin-top: 1rem; }
.flow-files { flex: 3; display: flex; flex-direction: column; gap: 0.75rem; }
.flow-arrow { display: flex; align-items: flex-start; padding-top: 1.5rem; font-size: 1.75rem; color: var(--cyan); }
.flow-node { border: 1px solid var(--border); border-left: 3px solid var(--cyan); border-radius: var(--radius); padding: 0.75rem 1rem; background: #fff; }
.flow-combine { flex: 2; align-self: flex-start; position: sticky; top: 1rem; border-left-color: var(--green); }
.flow-title { font-weight: 700; margin-bottom: 0.375rem; }
.flow-title .muted { font-weight: 400; font-size: 0.75rem; }
ol.flow-steps { margin: 0; padding-left: 1.25rem; font-size: 0.8125rem; line-height: 1.5; }
ol.flow-steps li.step-unit, ol.flow-steps li.step-filter { color: #b05f25; }
.flow-gives { margin: 0.375rem 0 0; font-size: 0.8125rem; }
.flow-result { margin: 0.5rem 0 0; font-weight: 700; }
.flow-unused { margin-top: 1rem; font-size: 0.8125rem; }

/* the two scores, side by side and alike */
.score-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; align-items: stretch; }
.score-card { margin: 0; }
.score-card-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 0.75rem; }
.score-card-head h2 { margin: 0 0 0.25rem; }
.score-card-head p { margin: 0; }
.score-card .score { min-width: 5.5rem; padding: 0.75rem 0.5rem; border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; }
.score-card .score .score-number { font-size: 2.25rem; }
@media (max-width: 1100px) { .score-cards { grid-template-columns: 1fr; } .flow { flex-direction: column; } .flow-arrow { justify-content: center; transform: rotate(90deg); } }

.score-card { display: flex; flex-direction: column; }
.score-card h3 { margin: 1rem 0 0.25rem; }
ul.improve { margin: 0; padding-left: 1.25rem; font-size: 0.8125rem; line-height: 1.5; }

/* how much of the delivered data is used */
.usage-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 0.5rem 0; }
.usage-figure { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
.usage-percent { font-size: 1.75rem; font-weight: 700; color: var(--cyan-pressed); line-height: 1.1; }
.usage-figure .bar { margin-top: 0.5rem; }

/* a dialog that asks before something is deleted */
.modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: var(--radius); padding: 1.5rem; width: min(32rem, calc(100vw - 2rem)); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25); }
.modal h2 { margin-top: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.25rem; }
button.danger-link { color: var(--red); }
.inside-nav .inside:disabled { color: var(--muted); opacity: 0.5; cursor: not-allowed; background: transparent; }

/* the last step: what there is, the one thing to do, and next time */
.ready-head { display: flex; align-items: center; gap: 1rem; }
.ready-head h2 { margin: 0 0 0.125rem; }
.ready-head p { margin: 0; }
.ready-check { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--green); color: #fff; font-size: 1.5rem; font-weight: 700; flex: none; }
.fact-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin: 1.5rem 0; }
.fact-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; }
.fact-value { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.ready-action { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.25rem; background: var(--sunken); border-radius: var(--radius); }
.ready-action h3 { margin: 0 0 0.125rem; }
.ready-action p { margin: 0; }
.ready-buttons { display: flex; flex-direction: column; align-items: flex-end; gap: 0.375rem; flex: none; }
a.button.large { height: 3rem; padding: 0 1.75rem; font-size: 0.9375rem; display: inline-flex; align-items: center; }
.next-time { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.next-time h3 { margin: 0 0 0.25rem; }
.next-time p { margin: 0; max-width: 46rem; }
@media (max-width: 1100px) { .fact-tiles { grid-template-columns: repeat(2, 1fr); } .ready-action, .next-time { flex-direction: column; align-items: flex-start; } .ready-buttons { align-items: flex-start; } }
.filter-select { width: 16rem; }
a.button.primary { background: var(--cyan); color: #fff; }
a.button.primary:hover { background: var(--cyan-hover); color: #fff; }
/* Mercury's select brings its own field; the page's input styling must not stack on it */
.filter-select input { height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; }
.filter-select input:hover, .filter-select input:focus { border: 0; }
th button.sort { height: auto; padding: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-transform: none; cursor: pointer; }
th button.sort:hover { background: transparent; color: var(--cyan); }
th .sort-arrow { color: var(--cyan); font-size: 0.625rem; }

/* handing files over: the drop area, and beside it what happens to them */
.upload { display: grid; grid-template-columns: 3fr 2fr; gap: 2rem; align-items: stretch; }
.dropzone { border: 2px dashed var(--input-border); border-radius: var(--radius); text-align: center; padding: 2rem 1.5rem; transition: var(--transition); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; }
.drop-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; background: #e2f4f7; color: var(--cyan); font-size: 1.5rem; font-weight: 700; }
.drop-title { font-size: 1.125rem; font-weight: 700; }
.drop-or { color: var(--muted); font-size: 0.8125rem; }
.drop-formats { color: var(--muted); font-size: 0.75rem; margin-top: 0.5rem; }
.upload-steps h2 { margin-top: 0.25rem; }
.upload-steps ol { list-style: none; margin: 0; padding: 0; }
.upload-steps li { display: flex; gap: 0.75rem; padding: 0.625rem 0; align-items: flex-start; }
.upload-steps li + li { border-top: 1px solid var(--divider); }
.upload-steps .mark { display: inline-flex; align-items: center; justify-content: center; width: 1.625rem; height: 1.625rem; border-radius: 50%; background: var(--sunken); font-size: 0.75rem; font-weight: 700; flex: none; }
@media (max-width: 1000px) { .upload { grid-template-columns: 1fr; } }

/* a question mark next to a label, with its explanation on hover or focus */
.help { position: relative; display: inline-flex; align-items: center; margin-left: 0.375rem; vertical-align: middle; cursor: help; outline: none; text-transform: none; letter-spacing: normal; }
.help-mark { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; border-radius: 50%; border: 1px solid var(--input-border); color: var(--muted); font-size: 0.6875rem; font-weight: 700; line-height: 1; background: #fff; }
.help:hover .help-mark, .help:focus .help-mark { border-color: var(--cyan); color: var(--cyan); }
.help-pop { position: absolute; top: calc(100% + 0.375rem); left: 50%; transform: translateX(-50%); z-index: 50; width: 20rem; max-width: 80vw; padding: 0.625rem 0.75rem; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); font-size: 0.75rem; font-weight: 400; line-height: 1.45; text-align: left; white-space: normal; opacity: 0; visibility: hidden; transition: opacity 0.15s; }
.help:hover .help-pop, .help:focus .help-pop { opacity: 1; visibility: visible; }
.help-line { display: block; }
.help-line + .help-line { margin-top: 0.375rem; }
th.num .help-pop, td.num .help-pop { left: auto; right: 0; transform: none; }
.table-scroll { overflow: visible; }

/* column widths: a period or a short header never wraps; a long file name breaks where it can */
.nowrap { white-space: nowrap; }
td.file-name { min-width: 20rem; max-width: 30rem; }
td.file-name code { overflow-wrap: anywhere; white-space: normal; }
ul.task-done li { align-items: flex-start; }
ul.task-done .task-done-text { flex: 1; }
ul.task-done button.link { flex: none; white-space: nowrap; }

/* a choice of three, each with what it means */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.mode { display: flex; gap: 0.625rem; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius); padding: 0.875rem 1rem; cursor: pointer; }
.mode.chosen { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan); }
.mode input { height: 1rem; width: 1rem; margin-top: 0.125rem; accent-color: var(--cyan); flex: none; }
.mode .muted { font-size: 0.8125rem; margin-top: 0.25rem; }
@media (max-width: 1000px) { .modes { grid-template-columns: 1fr; } }

/* the tenant is chosen first; everything below belongs to it */
.tenant-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; border-left: 3px solid var(--cyan); }
.tenant-choice { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.tenant-choice h2 { margin: 0; }

/* who is signed in, and the page that asks for it */
.topbar .signed-in { display: flex; gap: 1rem; align-items: center; color: var(--meta); font-size: 0.8rem; }
.sign-in { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.sign-in .card { max-width: 26rem; text-align: center; padding: 2.5rem; }
.sign-in .error { color: var(--red, #c0392b); }
.sign-in a.button { display: inline-block; margin-top: 1rem; padding: 0.6rem 1.6rem; border-radius: 4px; background: var(--cyan); color: #fff; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; text-decoration: none; }