/* 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: var(--card);
  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: var(--card); 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: var(--card); }
.places a.here { color: var(--card); }
.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: var(--card); 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: var(--card); 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: var(--card);
  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: var(--sunk); color: var(--muted); }

/* ── 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: var(--card); 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: var(--green-soft); }
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: var(--grey);   /* warm grey PMS 420, not the old blue-grey */
  --ink:  var(--navy);
}

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: var(--card); }
.bar .muted { color: var(--navy-ink); }
.banner { background: var(--amber-soft); border: 1px solid var(--amber); padding: 10px; border-radius: 6px; margin-bottom: 10px; }
.insights { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 12px 12px 32px; }
.compare { width: 100%; border-collapse: collapse; background: var(--card); 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: var(--card); 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; }
}

/* ── Leadership Pack + Creative Corner (plan 2, Task 12) ─────────────────── */
.bar .tso-nav a { text-decoration: none; color: var(--navy-ink); white-space: nowrap; font-size: .9rem; }
.bar .tso-nav a:hover, .bar .tso-nav a.here { color: var(--card); }
.bar .tso-nav a.here { text-decoration: underline; text-decoration-color: var(--green); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.bar .tso-nav button { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.small { font-size: 13px; }
.status { min-height: 1.2em; color: var(--green); font-size: 14px; }
.status.bad { color: var(--warn-ink); }

.tabs { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); margin: 8px 0 12px; scrollbar-width: thin; }
.tabs [role="tab"] { border: 0; background: none; padding: 9px 12px; white-space: nowrap; color: var(--muted); font-family: var(--display); font-weight: 600; font-size: 14px; cursor: pointer; border-bottom: 3px solid transparent; }
.tabs [role="tab"][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--green); }
.tabs [role="tab"]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.panel h2 { font-size: 16px; margin: 18px 0 8px; color: var(--navy); }
.partial { background: var(--amber-soft); color: var(--amber); border-radius: 6px; padding: 8px 10px; margin: 0 0 12px; font-weight: 600; }
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; min-width: 0; }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-family: var(--display); font-size: 26px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; margin: 2px 0; overflow-wrap: anywhere; }
.kpi-sub { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.kpi.missing .kpi-value { font-size: 17px; color: var(--muted); }

.table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 8px; }
.pack-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pack-table caption { caption-side: top; text-align: left; padding: 8px; color: var(--muted); font-size: 13px; }
.pack-table th, .pack-table td { padding: 7px 9px; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.pack-table thead th { font-size: 12px; color: var(--muted); font-weight: 600; vertical-align: bottom; white-space: normal; min-width: 76px; }
.pack-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.pack-table td.na { color: var(--muted); }
.pack-table td.row-note { color: var(--muted); white-space: normal; font-style: italic; }
.pack-table tbody th { font-weight: 600; position: sticky; left: 0; background: var(--card); }
.pack-table tr.row-total th, .pack-table tr.row-total td { font-weight: 700; background: var(--sunk); border-top: 2px solid var(--grey); }
.pack-table tr.row-overhead th, .pack-table tr.row-overhead td { background: var(--paper); }
.pack-table tr.row-self th, .pack-table tr.row-self td { background: var(--green-soft); }
.footnotes { font-size: 13px; color: var(--muted); padding-left: 18px; margin: 8px 0; }
.panel .note { color: var(--muted); font-size: 13px; margin: 6px 0; }

.actions-panel { margin-top: 8px; }
.actions { padding-left: 20px; }
.action { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.action-text { margin: 0 0 6px; }
/* The hub (or network) an action came from, when a level's panel shows another level's rows. */
.action-tag { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
  background: var(--line); color: var(--ink); font-size: 12px; font-weight: 600; }
.action.deleted .action-text { color: var(--muted); }
.original { margin: 0 0 6px; font-size: 13px; color: var(--muted); }
.action-buttons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.action-buttons .btn { padding: 5px 10px; font-size: .8rem; }
.btn[aria-pressed="true"] { background: var(--green-soft); border-color: var(--green); color: var(--green); }
.action textarea { margin-bottom: 6px; }
.creative-cta { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }

/* Leadership Pack: the Actions slide's lines, and presenter notes */
.big-actions, .presenter { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-top: 14px; }
.big-actions h2, .presenter h2 { font-size: 16px; margin: 0 0 6px; color: var(--navy); }
.big-list { padding-left: 20px; margin: 6px 0; }
.big-list li { margin: 4px 0; }
.big-heading { display: inline-block; min-width: 88px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.presenter-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.presenter-field { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.presenter-field textarea { font-weight: 400; resize: vertical; }

.compose { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.compose summary { cursor: pointer; font-family: var(--display); font-weight: 600; }
.post-form { display: grid; gap: 10px; margin-top: 10px; }
.post-form label { display: grid; gap: 4px; font-size: 14px; font-weight: 600; }
.posts { list-style: none; padding: 0; }
.post { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-bottom: 10px; }
.post-head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.post-head h2 { font-size: 16px; margin: 0; }
.post-body { white-space: pre-wrap; margin: 8px 0; overflow-wrap: anywhere; }
.pick { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; margin-right: auto; }

@media (max-width: 860px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-value { font-size: 21px; }
  .bar .tso-nav { gap: 8px; }
}
@media (max-width: 420px) {
  .kpi { padding: 10px; }
  .kpi-value { font-size: 19px; }
}
.table-message { background: var(--card); border: 1px dashed var(--grey); border-radius: 8px; padding: 12px; color: var(--muted); }
.bar > strong { white-space: nowrap; }

/* Leadership Pack: slide download */
.deck { margin: 4px 0 12px; }
.deck summary { cursor: pointer; color: var(--navy); font-weight: 600; }
.deck-nets { border: 0; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.deck-nets legend { padding: 0; margin-bottom: 4px; }
.deck-net { display: inline-flex; align-items: center; gap: 4px; }
.deck .btn[aria-disabled="true"] { opacity: .4; pointer-events: none; }

/* Creative Corner: pictures, videos, a pack chart and links on a post (21 Sep 2026) */
.attach { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 12px; }
.attach h3 { margin: 0; font: 600 14px var(--display); color: var(--navy); }
.attach .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; font-family: Arial, sans-serif; }
.thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.thumb { position: relative; width: 176px; }
.thumb img, .thumb .chart-chip { width: 176px; height: 99px; object-fit: cover; border-radius: 6px; display: block; border: 1px solid var(--grey); background: var(--sunk); }
.thumb .chart-chip { display: flex; align-items: center; justify-content: center; text-align: center; padding: 8px; font-size: 12.5px; color: var(--navy); }
.thumb .tag { position: absolute; left: 6px; top: 6px; background: var(--navy); color: var(--card); font: 600 10px Arial, sans-serif; padding: 2px 6px; border-radius: 3px; }
.thumb .x { position: absolute; right: 6px; top: 6px; background: var(--card); border: 1px solid var(--grey); border-radius: 50%; width: 22px; height: 22px; font-size: 13px; line-height: 18px; padding: 0; text-align: center; cursor: pointer; }
.thumb input { width: 100%; margin-top: 4px; font-size: 12px; padding: 4px 6px; }
.thumb.busy img { opacity: .5; }
.drop { border: 2px dashed var(--grey); border-radius: 8px; padding: 14px; text-align: center; color: var(--muted); background: var(--sunk); font-size: 13.5px; }
.drop.over { border-color: var(--green); background: var(--green-soft); }
.drop button { background: none; border: 0; padding: 0; color: var(--green); text-decoration: underline; cursor: pointer; font: inherit; }
.linkrow { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; }
@media (max-width: 560px) { .linkrow { grid-template-columns: 1fr; } }
.ideas { background: var(--green-soft); border: 1px solid var(--green); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.ideas ul { margin: 6px 0 0 18px; padding: 0; }
.ideas li { margin: 3px 0; }
.ideas button { background: none; border: 0; padding: 0; color: var(--green); text-decoration: underline; cursor: pointer; font: inherit; }
.post-media { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.post-media figure { margin: 0; width: min(100%, 320px); }
.post-media img, .post-media video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; border: 1px solid var(--grey); background: var(--navy); display: block; }
.post-media video { object-fit: contain; }
.post-media figcaption { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.post-media .chart-chip { aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px; border: 1px solid var(--grey); border-radius: 6px; background: var(--sunk); color: var(--navy); font-size: 13px; }
.post-links { list-style: none; padding: 0; margin: 8px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.post-links a { display: block; border-left: 4px solid var(--green); background: var(--sunk); padding: 6px 10px; border-radius: 4px; color: var(--navy); font-weight: 600; text-decoration: none; }
.post-links a span { display: block; font-weight: 400; font-size: 12px; color: var(--green); }

/* ── The weekly report-out (/weekly) ──────────────────────────────────────
   Sentences and lists, no charts. The only colour is on the two bands that
   are asking for something: a page where everything shouts says nothing.
   Went well and On target are quiet on purpose. */
main.weekly { max-width: 820px; }
main.weekly h1 { font-size: 20px; margin: 10px 0 18px; }

.band { margin: 0 0 22px; }
.band > h2 {
  font-family: var(--display); font-size: 13px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.band-heads_up > h2 { color: var(--amber); border-bottom-color: var(--amber); }
.band-attention > h2 { color: var(--warn-ink); border-bottom-color: var(--warn-ink); }

.findings { list-style: none; margin: 0; padding: 0; }
.finding {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 6px; padding: 12px 14px; margin: 0 0 8px;
}
.band-well .finding { border-left-color: var(--green); }
.band-heads_up .finding { border-left-color: var(--amber); background: var(--amber-soft); }
.band-attention .finding { border-left-color: var(--red); background: var(--warn-soft); }
.finding .says { margin: 0; line-height: 1.55; }
.finding .look { margin: 9px 0 0; font-size: .92rem; color: var(--ink); line-height: 1.5; }
.finding .look b { font-family: var(--display); font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.finding .look a { color: var(--green-deep); font-weight: 600; white-space: nowrap; }

.focus-band > h2 { color: var(--navy); border-bottom-color: var(--navy); }
.focus { margin: 0; padding-left: 22px; }
.focus-row { margin: 0 0 7px; line-height: 1.5; }
.focus-row a { font-family: var(--display); font-weight: 700; color: var(--navy);
  text-decoration: none; border-bottom: 2px solid var(--green); }
.focus-row a:hover { color: var(--green-deep); }

main.weekly .empty {
  background: var(--sunk); border: 1px dashed var(--line); border-radius: 6px;
  padding: 14px; color: var(--ink); margin: 0 0 22px;
}

@media (max-width: 860px) {
  .finding .look a { white-space: normal; }
}

/* The chooser at "/" — three doors, named by what they are for. */
main.chooser .doors { list-style: none; margin: 0; padding: 0; }
main.chooser .doors li {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 6px; padding: 14px 16px; margin: 0 0 10px;
}
main.chooser .doors a { font-family: var(--display); font-size: 1.05rem; color: var(--navy);
  text-decoration: none; }
main.chooser .doors a:hover { color: var(--green-deep); }
main.chooser .doors p { margin: 6px 0 0; color: var(--muted); line-height: 1.55; }

/* ── The records behind a flag (/weekly/<week>/evidence) ──────────────────
   Andrew, 27 Sep: "if we have links they should go to the specifics of it."
   Two renderings of the same rows, one template: a table on a desk, and a
   labelled card per record on a phone, because this page is mostly opened
   from Outlook at 390px while standing up. */
main.evidence { max-width: 1100px; }
main.evidence h1 { font-size: 20px; margin: 4px 0 2px; }
main.evidence .crumb { margin: 8px 0 10px; }
main.evidence .crumb a { color: var(--green-deep); font-weight: 600; text-decoration: none; }
main.evidence .sub { margin: 0 0 4px; color: var(--muted); font-size: .92rem; }
main.evidence .count { margin: 0 0 12px; color: var(--muted); font-size: .85rem; }
main.evidence .empty {
  background: var(--sunk); border: 1px dashed var(--line); border-radius: 6px; padding: 14px;
}
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.records { border-collapse: collapse; width: 100%; font-size: .9rem; background: var(--card); }
table.records th, table.records td {
  border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left;
  vertical-align: top; line-height: 1.45;
}
table.records th { position: sticky; top: 0; background: var(--sunk); white-space: nowrap;
  font-family: var(--display); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; }
table.records th a { color: var(--navy); text-decoration: none; }
table.records th a:hover { color: var(--green-deep); }
table.records td.num, table.records th.num { text-align: right; font-variant-numeric: tabular-nums; }
/* An operative's comment is a sentence or three; without a ceiling it stretches the table past
   the window and every other column with it. */
table.records td { max-width: 30ch; overflow-wrap: anywhere; }
table.records tbody tr:nth-child(even) { background: var(--sunk); }

.reccards { display: none; list-style: none; margin: 0; padding: 0; }
.reccards .rec {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 6px; padding: 10px 12px; margin: 0 0 8px;
}
.reccards .f { display: flex; gap: 10px; padding: 3px 0; line-height: 1.45; }
.reccards .k { flex: 0 0 8.5em; font-family: var(--display); font-size: .72rem;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding-top: 2px; }
.reccards .v { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ── Phones, 390px and down: Outlook, one hand, a corridor ────────────────
   Nothing may need a pinch or a sideways scroll. The bands keep their
   colour and their order; the tables become the cards above. */
@media (max-width: 560px) {
  main.evidence .tablewrap { display: none; }
  main.evidence .reccards { display: block; }
}
@media (max-width: 440px) {
  main.weekly h1 { font-size: 18px; line-height: 1.3; }
  main.weekly .fromemail { font-size: .88rem; }
  .finding { padding: 11px 12px; }
  .finding .says, .finding .look { overflow-wrap: anywhere; }
  .finding .look a.records { display: inline-block; margin-top: 6px; white-space: normal; }
  .focus { padding-left: 18px; }
  .pickers { gap: 8px; }
  .pickers label { display: flex; align-items: center; gap: 6px; flex: 1 1 100%; }
  .pickers select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .reccards .f { flex-direction: column; gap: 1px; }
  .reccards .k { flex: none; }
}

/* The one line that ties the page to the Monday email the reader clicked. */
main.weekly .fromemail {
  margin: -10px 0 18px; color: var(--muted); font-size: .92rem; line-height: 1.5;
  border-left: 3px solid var(--line); padding-left: 10px;
}

/* The header at phone width. Until now the nav ran off the right of the bar, which put
   Creative Corner, People and Sign out past the edge of the screen with no way to reach them —
   invisible on a desk, and the whole navigation on a phone. It wraps instead. */
@media (max-width: 560px) {
  .bar { flex-wrap: wrap; padding: 6px 14px 8px; align-items: baseline; row-gap: 4px; }
  .bar > strong { flex: 0 0 auto; }
  .bar .tso-nav { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; gap: 6px 12px; }
  .bar .tso-nav a, .bar .tso-nav button { font-size: .82rem; }
}