/* OCH brand, from the Brand Graphic Guidelines (Aug 2023).
   Green PMS 568 CP, navy PMS 540 CP, red PMS 179 CP, warm grey PMS 420 CP,
   Montserrat over Arial. Shared by every page TE Insights serves: the
   sign-in pages here, and the leadership dashboards Task 11 adds. Only
   problems are allowed to shout — red is a block, amber is a warning, and
   nothing else is coloured. */
:root {
  --green:      #055A49;
  --green-deep: #04473A;
  --navy:       #002A4E;
  --navy-ink:   #BFD0DF;   /* text on navy */
  --red:        #F04937;
  --grey:       #D1D1CE;
  --paper:      #FBFAF7;
  --card:       #FFFFFF;
  --sunk:       #F3F2ED;
  --muted:      #5B6470;
  --green-soft: #E3EEEB;
  --warn-soft:  #FDEBE8;
  --warn-ink:   #B7301F;
  --amber:      #9A5B00;
  --amber-soft: #FFF1D6;
  --display:    Montserrat, Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--navy);
  font: 15px/1.5 Arial, "Liberation Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, legend, .mark, .btn, .places, .pill { font-family: var(--display); }

/* ── The band ─────────────────────────────────────────────────────────────── */

.bar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 18px; min-height: 52px;
  background: var(--navy); color: #fff;
  position: sticky; top: 0; z-index: 5;
}
.mark {
  font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none; white-space: nowrap;
}
.mark i { width: 9px; height: 16px; background: var(--green); display: inline-block; border-radius: 1px; }
.spacer { flex: 1; }
.who { color: var(--navy-ink); font-size: .84rem; white-space: nowrap; }

.places { display: flex; gap: 2px; align-self: stretch; }
.places a {
  display: inline-flex; align-items: center;
  font-size: .84rem; font-weight: 600; text-decoration: none;
  color: var(--navy-ink); padding: 0 11px; position: relative; white-space: nowrap;
}
.places a:hover { color: #fff; }
.places a.here { color: #fff; }
.places a.here::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0;
  height: 3px; background: var(--green); border-radius: 2px 2px 0 0;
}
.bar .btn.ghost { color: #fff; border-color: rgba(255,255,255,.28); background: transparent; padding: 6px 11px; font-size: .82rem; }
.bar .btn.ghost:hover { background: rgba(255,255,255,.08); filter: none; }
.bar #signout { color: var(--navy-ink); border: 0; padding: 6px 4px; }
.bar #signout:hover { color: #fff; background: none; }

/* ── Buttons and fields ───────────────────────────────────────────────────── */
.btn {
  font: inherit; font-family: var(--display); font-weight: 600; font-size: .86rem;
  border-radius: 8px; padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--green); background: var(--green); color: #fff;
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.btn.ghost { background: transparent; color: var(--navy); border-color: var(--grey); }
.btn.danger { background: transparent; color: var(--warn-ink); border-color: var(--warn-ink); }
.btn[disabled] { opacity: .4; cursor: not-allowed; }
.btn:not([disabled]):hover { filter: brightness(1.08); }
.btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

.field {
  width: 100%; font: inherit; padding: 10px 12px;
  border: 1px solid var(--grey); border-radius: 8px;
  background: var(--card); color: var(--navy);
}
.field:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.field:disabled { background: var(--sunk); color: var(--muted); }

/* ── Pills ────────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block; font-size: .72rem; font-weight: 600;
  letter-spacing: .04em; border-radius: 999px; padding: 3px 9px;
  background: var(--sunk); color: var(--muted); white-space: nowrap;
}
.pill.pending  { background: var(--amber-soft); color: var(--amber); }
.pill.active   { background: var(--green-soft); color: var(--green); }
.pill.disabled { background: #EEE; color: #666; }

/* ── Sign-in, sign-up: one card on the page ──────────────────────────────── */
body.account { background: var(--paper); }
body.account .card {
  max-width: 30rem; margin: 40px auto; padding: 28px 30px;
  background: #fff; border: 1px solid var(--grey); border-radius: 12px;
}
body.account.wide .card { max-width: 64rem; }
body.account h1 { margin: 0 0 8px; font-size: 1.5rem; color: var(--green); }
body.account .lead { margin: 0 0 22px; color: var(--muted); line-height: 1.5; }
body.account label { display: block; margin: 0 0 14px; font-weight: 600; font-size: .92rem; }
body.account label small { font-weight: 400; color: var(--muted); }
body.account label .field { display: block; width: 100%; margin-top: 6px; font-size: 1.05rem; padding: 10px 12px; }
body.account .field.code { font-size: 1.6rem; letter-spacing: .3em; font-variant-numeric: tabular-nums; max-width: 12rem; }
body.account .btn { margin-top: 6px; }
body.account .btn + .btn { margin-left: 8px; }
body.account .error { margin: 6px 0 12px; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn-ink); }
body.account .alt { margin: 18px 0 0; color: var(--muted); font-size: .92rem; }
body.account .note { color: var(--muted); }

/* ── People ───────────────────────────────────────────────────────────────── */
table.people { width: 100%; border-collapse: collapse; margin-top: 10px; }
table.people th { text-align: left; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 8px 6px; border-bottom: 1px solid var(--grey); }
table.people td { padding: 10px 6px; border-bottom: 1px solid var(--grey); vertical-align: middle; }
table.people tr.pending td { background: #F2F7F5; }
table.people .actions { text-align: right; white-space: nowrap; }
table.people .actions .btn { padding: 6px 10px; font-size: .85rem; margin-left: 6px; }
table.people select.role { padding: 5px 8px; font-size: .86rem; width: auto; }
table.people td.networks { white-space: nowrap; }
.netchk { display: inline-flex; align-items: center; gap: 3px; margin-right: 10px; font-size: .8rem; color: var(--muted); }
.netchk input { margin: 0; }

/* ── On a phone ───────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .bar { padding: 0 12px; gap: 8px; min-height: 48px; overflow-x: auto; }
  .bar .who { display: none; }
  .places a { padding: 0 8px; font-size: .8rem; }
  .bar .btn.ghost { padding: 5px 9px; font-size: .78rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ── TSO Weekly (Task 12) ─────────────────────────────────────────────────
   New tokens only — --navy, --muted and --amber above already carry the
   house colours, so the values below reuse them rather than redefining
   them (that would recolour the login/signup/people pages too). */
:root {
  --line: #dde3ea;
  --teal: #1FC3AE;
}

main { max-width: 1100px; margin: 0 auto; padding: 16px; }
.pickers { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
select, button { font: inherit; padding: 6px 8px; }
h1 { font-size: 22px; color: var(--navy); margin: 8px 0; }
.bar .tso-nav { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.bar .tso-nav a { color: #fff; }
.bar .muted { color: var(--navy-ink); }
.banner { background: #fff4e0; border: 1px solid var(--amber); padding: 10px; border-radius: 6px; margin-bottom: 10px; }
.insights { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 12px 32px; }
.compare { width: 100%; border-collapse: collapse; background: #fff; margin: 12px 0; border: 1px solid var(--line); }
.compare th, .compare td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
#sections .card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; }
#sections .card h2 { font-size: 16px; margin: 0 0 8px; color: var(--navy); }
#sections .card table { width: 100%; border-collapse: collapse; }
#sections .card th { text-align: left; font-weight: 500; color: var(--muted); padding: 3px 0; }
#sections .card td { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
#sections .note { color: var(--muted); font-size: 13px; margin: 8px 0 0; }
.chase { font-size: 13px; padding-left: 18px; }

@media (max-width: 860px) {
  main { padding: 12px; }
  .grid { grid-template-columns: 1fr; }
}