/*
  Owner dashboard styling.

  The palette and layout come from Heritage's own mockup in spec/. Their file is not edited
  and not copied wholesale; what is taken is the design decisions it expresses, because the
  mockup is how Heritage says the product should look and this is not the place to have an
  opinion about that.

  The one addition is the tone scale. The mockup colours figures by hand; here a figure's
  tone is decided by the presenter and carried onto the page, so MISSING has a look of its
  own rather than rendering as ordinary text. That matters: a figure that could not be
  computed should not sit on the page looking exactly like one that could.
*/

:root {
  --green: #667f28;
  --green-d: #4f6320;
  --brown: #a05f39;
  --ink: #1d2116;
  --muted: #6b7064;
  --line: #e4e6df;
  --bg: #f6f6f2;
  --card: #fff;
  --red: #b3402e;
  --amber: #c28a1e;
  --ok: #3f7d3a;
  --unknown: #7a6e58;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 14px/1.45 "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.preview {
  background: var(--brown);
  color: #fff;
  text-align: center;
  font-size: 12px;
  padding: 5px 12px;
  letter-spacing: 0.02em;
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; }
.hlogo { font-weight: 800; letter-spacing: 0.2em; color: var(--green); font-size: 15px; }
.x { color: #aaa; }
.clogo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.clogo .mark {
  width: 28px; height: 28px; border-radius: 6px;
  background: #2b3a55; color: #fff;
  display: grid; place-items: center; font-size: 12px;
}
.user { color: var(--muted); font-size: 13px; }

/* The banner. Full width, above everything, impossible to scroll past by accident. */
.banner {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 22px;
  font-size: 13px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.banner .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.banner-ok { background: #eef3e2; color: var(--green-d); }
.banner-ok .dot { background: var(--ok); }
.banner-warn { background: #f7ecd4; color: #7a5a10; }
.banner-warn .dot { background: var(--amber); }
.banner-bad { background: #f6e0db; color: var(--red); font-weight: 600; }
.banner-bad .dot { background: var(--red); }

.wrap { display: flex; min-height: calc(100vh - 160px); }

nav { width: 210px; background: var(--green-d); padding: 14px 10px; flex-shrink: 0; }
nav a {
  display: block; padding: 9px 12px; border-radius: 6px;
  color: #e9eedb; text-decoration: none; margin-bottom: 2px;
}
nav a:hover { background: rgba(255, 255, 255, 0.08); }
nav a.on { background: #fff; color: var(--green-d); font-weight: 600; }

main { flex: 1; padding: 20px 26px 40px; min-width: 0; }

h1 { font-size: 21px; margin: 0 0 4px; }
.sub { color: var(--muted); margin: 0 0 18px; }

.grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  margin-bottom: 16px;
}
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px 16px;
}
.table-card { margin-bottom: 14px; }
.k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.v { font-size: 24px; font-weight: 650; margin-top: 4px; }
.s { color: var(--muted); font-size: 12.5px; margin-top: 2px; }

.tbl { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left; color: var(--muted); font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n, th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.empty { color: var(--muted); text-align: center; padding: 18px; }

/*
  Tone. "unknown" is the important one: a figure that could not be computed is set in a
  different colour and letterspaced, so it reads as a statement rather than as a value.
*/
.tone-ok { color: var(--ok); }
.tone-bad { color: var(--red); }
.tone-warn { color: var(--amber); }
.tone-unknown {
  color: var(--unknown);
  font-variant: small-caps;
  letter-spacing: 0.04em;
}

.note { font-size: 12.5px; color: var(--muted); margin: 8px 0 0; }
.note.standalone {
  background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--brown);
  border-radius: 8px; padding: 10px 14px; margin-top: 12px;
}

.foot {
  padding: 16px 22px 28px; color: var(--muted); font-size: 12px;
  border-top: 1px solid var(--line); background: #fff;
}

@media (max-width: 760px) {
  .wrap { flex-direction: column; }
  nav { width: auto; display: flex; overflow-x: auto; gap: 4px; padding: 8px; }
  nav a { white-space: nowrap; margin: 0; }
  main { padding: 16px; }
}