/* hosted.css — blued steel; matches Forecaster style.css tokens; no noisy badges. */
@font-face { font-family: "Archivo"; src: url("../fonts/Archivo-Variable.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("../fonts/IBMPlexMono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --ink-0: #242527;
  --ink-1: #1c1d1f;
  --ink-2: #28292c;
  --line: rgba(214, 214, 212, 0.14);
  --line-strong: rgba(214, 214, 212, 0.32);
  --text: #eceae4;
  --muted: #c0c0bf;
  --cyan: #eceae4;
  --teal: #16263a;
  --warn: #ffb547;
  --bad: #ff5470;
  --f-display: "Archivo", "Bahnschrift", sans-serif;
  --f-body: "Archivo", "Segoe UI", sans-serif;
  --f-mono: "IBM Plex Mono", "Consolas", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-body);
  font-size: 15px;
  color: var(--text);
  background: var(--ink-0);
  font-variant-numeric: tabular-nums;
  min-height: 100vh;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.err { color: var(--bad); }
.hidden { display: none !important; }

.htop {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px;
  padding: 14px 28px; border-bottom: 1px solid var(--line); background: var(--ink-1);
  position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--text); text-decoration: none; }
.brand b { font-family: var(--f-display); letter-spacing: 0.18em; font-size: 18px; }
.brand i { font-style: normal; font-family: var(--f-mono); font-size: 11px; background: var(--cyan); color: var(--ink-0); padding: 2px 6px; border-radius: 4px; }
.nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav a {
  color: var(--muted); padding: 8px 12px; border-radius: 6px; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid transparent;
}
.nav a.on { color: var(--ink-0); background: var(--text); text-decoration: none; }
.chips { display: flex; gap: 8px; align-items: center; }
.chip {
  border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--muted);
  padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.hnotice {
  margin: 0; padding: 10px 28px; background: rgba(255, 181, 71, 0.12);
  border-bottom: 1px solid rgba(255, 181, 71, 0.35); color: #ffe0ad; font-size: 13px;
}

.hlanding { max-width: 880px; margin: 0 auto; padding: 64px 28px; }
.hlanding-brand { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.hlanding-brand b { font-family: var(--f-display); letter-spacing: 0.22em; font-size: 28px; }
.hlanding-brand span { font-family: var(--f-mono); color: var(--cyan); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.hlanding-lead { color: var(--muted); max-width: 36em; }
.hauth-panel {
  max-width: 420px; margin: 28px 0; padding: 24px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--ink-2);
  display: grid; gap: 12px;
}
.hauth-panel label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.hauth-panel input {
  background: var(--ink-1); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 10px 12px; font: inherit; letter-spacing: 0.06em;
}
.hauth-panel input[data-auth-code] { font-family: var(--f-mono); font-size: 22px; letter-spacing: 0.35em; }

.hcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 36px 0 20px; }
.hcard {
  text-align: left; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 24px; color: var(--text); cursor: pointer;
}
.hcard:hover { border-color: var(--cyan); }
.hcard .eyebrow { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #a9aaab; margin-bottom: 8px; }
.hcard b { display: block; font-size: 22px; margin-bottom: 8px; }
.hcard span:last-child { color: var(--muted); font-size: 13px; }

.hmain { max-width: 1280px; margin: 0 auto; padding: 28px; }
.eyebrow { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cyan); }
h1 { font-size: 26px; font-weight: 600; margin: 8px 0 16px; }
.back { color: var(--muted); font-size: 13px; }
.hactions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; align-items: center; }
.hbtn {
  border: 1px solid var(--line-strong); background: var(--ink-2); color: var(--text);
  padding: 8px 14px; border-radius: 6px; cursor: pointer; font: inherit;
}
.hbtn.primary { background: var(--teal); border-color: rgba(214, 214, 212, 0.45); color: #eceae4; font-weight: 600; }
.hbtn.ghost { background: transparent; }
.hbtn:disabled { opacity: 0.45; cursor: not-allowed; }

.hmap-layout { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: start; }
.hmap-pane { border: 1px solid var(--line); border-radius: 10px; padding: 8px; background: var(--ink-1); }
.hmap-svg { width: 100%; height: auto; display: block; }
.hstate { fill: rgba(214, 214, 212, 0.08); stroke: rgba(214, 214, 212, 0.35); stroke-width: 1; }
.hmk { cursor: pointer; }
.hmk:focus { outline: 2px solid var(--cyan); }
.hmap-list { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow: auto; }
.hcampus-row {
  display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--ink-2); color: var(--text); cursor: pointer;
}
.hcampus-row.unplaced { border-style: dashed; }
.hcampus-row .nums { font-size: 12px; color: var(--muted); }
.hmap-note { margin: 8px 10px; font-size: 12px; }

.htable-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.htable { width: 100%; border-collapse: collapse; font-size: 13px; }
.htable th, .htable td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.htable th { color: var(--muted); font-weight: 500; background: var(--ink-1); position: sticky; top: 0; }
.picker { display: block; margin: 12px 0 18px; color: var(--muted); }
.picker select { margin-left: 8px; background: var(--ink-2); color: var(--text); border: 1px solid var(--line-strong); padding: 6px 10px; border-radius: 6px; }

.hfilters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hfilters input, .hfilters select, .hcalloff-bar input {
  background: var(--ink-2); color: var(--text); border: 1px solid var(--line-strong);
  padding: 6px 10px; border-radius: 6px; font: inherit;
}
.hcalloff-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 14px; }
.hcalloff-preview { margin-top: 12px; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--ink-1); }
.hgc-banner {
  margin: 8px 0; padding: 8px 12px; border-left: 3px solid #a9aaab;
  background: rgba(169, 170, 171, 0.1); color: var(--text); font-size: 13px;
}

.hcomment-list, .hreport-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.hcomment, .hreport-list li {
  border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--ink-2); position: relative;
}
.pill { display: inline-block; font-size: 11px; border: 1px solid var(--line-strong); padding: 2px 6px; border-radius: 4px; color: var(--muted); }
.pill.warn { border-color: rgba(255, 181, 71, 0.5); color: var(--warn); }

.hdrawer {
  position: fixed; top: 0; right: 0; width: min(420px, 100%); height: 100%; z-index: 40;
  background: var(--ink-1); border-left: 1px solid var(--line-strong); padding: 20px;
  display: flex; flex-direction: column; gap: 12px; box-shadow: -8px 0 24px rgba(0,0,0,0.35);
}
.hdrawer header { display: flex; justify-content: space-between; align-items: center; }
.hdrawer label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.hdrawer textarea, .hdrawer select {
  background: var(--ink-2); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 8px; font: inherit;
}
.hdrawer footer { margin-top: auto; display: flex; gap: 8px; justify-content: flex-end; }

.hctx {
  position: fixed; z-index: 50; background: var(--ink-2); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 4px; min-width: 180px;
}
.hctx button {
  display: block; width: 100%; text-align: left; background: transparent; border: 0;
  color: var(--text); padding: 8px 10px; cursor: pointer; font: inherit;
}
.hctx button:hover { background: var(--ink-1); }
.hoverflow {
  position: absolute; right: 6px; top: 6px; border: 1px solid var(--line); background: var(--ink-1);
  color: var(--muted); border-radius: 4px; padding: 2px 6px; cursor: pointer; font-size: 12px;
}
[data-comment-target] { position: relative; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: var(--ink-2); border: 1px solid var(--line-strong); padding: 10px 16px;
  border-radius: 8px; opacity: 0; pointer-events: none; transition: .2s ease; z-index: 60;
}
.toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 900px) {
  .hcards, .hmap-layout { grid-template-columns: 1fr; }
  .htop { grid-template-columns: 1fr; gap: 10px; }
}

/* watch-only viewers: the scratch-copy banner */
.hsandbox {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0; padding: 10px 28px; font-size: 13px;
  background: rgba(255, 181, 71, 0.10); border-bottom: 1px solid rgba(255, 181, 71, 0.35); color: var(--text);
}
.hsandbox .hbtn { padding: 4px 10px; font-size: 12px; }

/* forecast status: under construction / awaiting / live */
.fcb { display: inline-block; margin: 0 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px;
  font-family: var(--f-mono); letter-spacing: 0.04em; border: 1px solid var(--line-strong); }
.fcb-live { border-color: rgba(92, 211, 140, 0.6); color: #8fe0ad; }
.fcb-wait { border-color: rgba(255, 181, 71, 0.5); color: var(--warn); }
.fcb-wip { color: var(--warn);
  background: repeating-linear-gradient(135deg, rgba(255, 181, 71, 0.14) 0 6px, transparent 6px 12px); }
.hreport-list .hbtn { margin-top: 8px; }

/* access page */
h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px; }
.hinvite { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 8px 0 6px; }
.hinvite label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
.hinvite input, .hinvite select {
  background: var(--ink-2); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: 6px; padding: 8px 10px; font: inherit; min-width: 220px;
}
select.chip { cursor: pointer; }

/* job page: the forecast table (forecast_grid.js) */
.fg-section { margin-top: 28px; }
.fg-section h2 { margin-top: 0; }
.fg-version { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 10px; font-size: 13px; }
.fg-version .fcb { margin: 0; }
.fg-version .hgc-banner { flex-basis: 100%; margin: 4px 0 0; }
.fg-wrap {
  overflow-x: auto; margin: 8px 0; border: 1px solid var(--line-strong); border-radius: 8px;
  background: var(--ink-1); color-scheme: dark; -webkit-overflow-scrolling: touch;
}
.fg-wrap:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.fg { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.fg caption { caption-side: top; text-align: left; padding: 10px 12px 0; color: var(--muted); font-size: 12px; }
.fg th, .fg td { padding: 8px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; background-color: var(--ink-1); }
.fg-num { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
/* header row */
.fg thead th {
  background-color: var(--ink-2); color: var(--text); font-family: var(--f-body); font-weight: 600; vertical-align: bottom;
  border-bottom: 1px solid var(--line-strong);
}
.fg-mlabel { display: block; font-family: var(--f-body); }
.fg-tag {
  display: block; margin-top: 2px; font-family: var(--f-mono); font-size: 10px; font-weight: 400;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.fg thead th.fg-forecast .fg-tag { color: #a9c1de; }
/* row labels stay put while the months scroll */
.fg th[scope=row], .fg .fg-corner {
  position: sticky; left: 0; z-index: 1; text-align: left; font-weight: 500;
  border-right: 1px solid var(--line);
}
.fg .fg-corner { z-index: 2; color: var(--muted); font-weight: 500; }
/* subtle banding */
.fg-group-billable tr:nth-child(even) > th, .fg-group-billable tr:nth-child(even) > td,
.fg-group-unknown tr:nth-child(odd) > th, .fg-group-unknown tr:nth-child(odd) > td { background-color: #202123; }
/* forecast months: a cool tint over billed months' plain ground */
.fg td.fg-forecast, .fg thead th.fg-forecast {
  background-image: linear-gradient(rgba(120, 160, 210, 0.09), rgba(120, 160, 210, 0.09));
}
.fg thead th.fg-forecast { border-bottom-style: dashed; }
/* totals columns */
.fg .fg-t-first { border-left: 1px solid var(--line-strong); }
.fg td.fg-total, .fg thead th.fg-total {
  font-weight: 600; color: var(--text);
  background-image: linear-gradient(rgba(236, 234, 228, 0.06), rgba(236, 234, 228, 0.06));
}
/* the billable total */
.fg tr.fg-sum > th, .fg tr.fg-sum > td {
  font-weight: 600; color: var(--text); background-color: var(--ink-2);
  border-top: 1px solid var(--line-strong); border-bottom: 0;
}
/* Non-Billables and unrecognised types sit apart from the billable rows */
.fg-group-nb > tr > th, .fg-group-nb > tr > td { border-top: 8px solid var(--ink-0); }
.fg-group-unknown tr.fg-group > th {
  text-align: left; border-top: 8px solid var(--ink-0); background-color: var(--ink-2); color: var(--warn);
  font-family: var(--f-mono); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase;
}
.fg-group-label { display: inline-block; position: sticky; left: 12px; }
.fg tbody:last-child tr:last-child > * { border-bottom: 0; }
.fg-note { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 400; }
.fg-sw { display: inline-block; width: 10px; height: 10px; margin-right: 8px; border-radius: 2px; vertical-align: -1px; }
/* fixed data colors: they never change with the brand */
.fg-sw-labor { background: #e0703a; }
.fg-sw-materials { background: #3987e5; }
.fg-sw-equipment { background: #2f7d52; }
.fg-sw-subcontractors { background: #8b7fe6; }
.fg-sw-other { background: #96923a; }
.fg-sw-non_billable { background: #e0558c; }
.fg-sw-unknown { border: 1px dashed var(--muted); }
.fg-skipped { margin: 6px 0 0; }
@media (max-width: 600px) {
  .fg th, .fg td { padding: 6px 8px; }
}