/* Deliberately plain: this page is embedded in an iframe inside the MapCraft app, so it
   should read as part of the app rather than as a framed dashboard of its own. */

/* blueprint.css (loaded first, see index.html) already supplies the typography, the
   box-sizing reset and all of the table styling, so none of that is repeated here. What
   is left is page layout, the numeric alignment Blueprint does not do, and the few
   elements Blueprint has no opinion about. Colours are Blueprint's own palette values so
   anything added here stays in step with it. */
:root {
  --fg: #1c2127; /* Blueprint $black-ish body colour */
  --fg-muted: #5f6b7c; /* $gray1 */
  --rule: rgba(17, 20, 24, 0.15); /* the divider Blueprint's own tables use */
  --bg: #ffffff;
}

body {
  margin: 0;
  background: var(--bg);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.5rem;
}

h1 {
  font-size: 1.75rem;
  margin: 0.5rem 0 1rem;
}

h2 {
  font-size: 1.375rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--fg-muted);
  margin: 1rem 0 0.5rem;
}

/* Embedded mode: no page chrome, tighter headings, no section rules. Mirrors
   ui_helpers.apply_embed_styles in the Streamlit app. */
body.embed main {
  padding: 0.5rem 0.75rem 1.5rem;
}

body.embed h1,
body.embed h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0.25rem 0 0.5rem;
  line-height: 1.3;
}

body.embed hr,
body.embed h3 {
  display: none;
}

/* Unembedded, the rule between sections does the separating. Embedded there is no rule and
   no table heading either, so a table ran straight into the next section's title with only
   the table's own half-rem under it -- the two read as one block. This is the space the
   rule was providing. */
body.embed main > section {
  margin-bottom: 1.75rem;
}

body.embed main > section:last-child {
  margin-bottom: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2rem 0;
}

/* Every section ends with a rule so the next one is separated from it; the last section
   has nothing to be separated from, and its rule plus margin was leaving a stray line
   over an inch of dead space at the foot of the page. Done in CSS rather than JS because
   which section renders last depends on which aggregations the payload happens to carry. */
main > section:last-child > hr:last-child {
  display: none;
}

.status {
  padding: 1rem 0;
  color: var(--fg-muted);
}

.error {
  border: 1px solid #f3c2c2;
  background: #fdf2f2;
  color: #8a1f1f;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  margin: 0.5rem 0;
}

.error pre {
  white-space: pre-wrap;
  margin: 0.5rem 0 0;
  font-size: 12px;
}

.chart {
  width: 100%;
}

/* Tables are Blueprint's .bp6-html-table (see js/tables.js); everything below is the
   delta. Rows are categories, columns are scenarios — the transpose the Streamlit app got
   from `st.dataframe(df.T)`. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 0.5rem;
}

table.bp6-html-table {
  width: 100%;
}

/* Figures right-align under right-aligned headers, which is the one thing Blueprint's
   tables do not do — they left-align every cell. The row-label column stays left. */
table.bp6-html-table th,
table.bp6-html-table td {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

table.bp6-html-table th:first-child,
table.bp6-html-table td:first-child {
  text-align: left;
}

/* Blueprint stripes and hover-highlights tbody `td` only, but the row label in these
   tables is a `th` — so without these the tint stops short of the first column, which is
   exactly the column you are reading across from. Same colours Blueprint uses. */
table.bp6-html-table.bp6-html-table-striped tbody tr:nth-child(odd) th {
  background: rgba(143, 153, 168, 0.15);
}

table.bp6-html-table.bp6-interactive tbody tr:hover th {
  background-color: rgba(143, 153, 168, 0.3);
}

/* bp6-interactive also makes rows look clickable. They are not. */
table.bp6-html-table.bp6-interactive tbody tr:hover td,
table.bp6-html-table.bp6-interactive tbody tr:hover th {
  cursor: default;
}

/* Column headers read as labels rather than as data. */
table.bp6-html-table thead th {
  color: var(--fg-muted);
}

/* All-prose tables (Simulation Details): headers and cells align together, and long
   descriptions wrap rather than widening the table. */
table.bp6-html-table.text th,
table.bp6-html-table.text td {
  text-align: left;
  white-space: normal;
}

table.bp6-html-table.text td {
  font-weight: 400;
}

.missing-note {
  color: var(--fg-muted);
  font-size: 12px;
  margin: 0.25rem 0 0;
}