/* Clarity Planner - one stylesheet, no inline styles anywhere (strict CSP). */

:root {
  --paper: #F7F8F6;
  --surface: #FFFFFF;
  --ink: #16202B;
  --ink-soft: #4E5B69;
  --ink-faint: #7A8591;
  --rule: #CBD3DC;
  --rule-soft: #E1E6EC;
  /* ---- CHROME: the page itself. Lifted from PC Site Manager, because this
     product is sold on its own AND folded into both Site Managers later, and
     a fold-in should be a lift rather than a rebuild.

     Its rule comes with it, and it is the important part: CHROME CARRIES NO
     MEANING. Everything here is slate, so every colour left on a screen is
     saying something. Clarity broke that rule from the start - the buttons,
     links, focus rings and badges were all #2F5D85, which is ALSO the default
     colour of an ordinary task bar and is a colour the customer can change.
     A button and a task were the same blue, and a company that set its bars
     green would have had chrome that no longer matched anything. */
  --chrome: #2E3438;            /* the top bar */
  --chrome-light: #4A5257;      /* a primary button */
  --chrome-rule: #6B7A82;
  --accent: #2C4A63;            /* PC Site Manager's navigation blue: links,
                                   focus, the active state of a toggle */
  --accent-soft: #9DB1C4;
  --accent-wash: #E8EDF2;

  /* ---- STATUS: reserved, exactly as the suite reserves them. Green means
     done or all-clear and nothing else; never use one for chrome. */
  --ok: #17612B;
  --ok-wash: #DCEBD6;
  --warn: #B85F0A;
  --warn-wash: #F7EEDC;
  --sel: #FFF6D6;

  /* ---- THE CHART: the one place colour is the answer rather than the
     decoration. These are defaults only - a company sets its own in Settings,
     and chart.js writes them onto the bars as attributes. Nothing in this
     file may use them for chrome. */
  --bar: #2F5D85;
  --crit: #A63626;
  --crit-wash: #F6E6E3;
  --mile: #A9781F;
  /* APTOS FIRST, with a close fallback chain. Paul asked for it, 2026-09-13.
     It is Microsoft's newer default and a good humanist sans - but it ships
     with Office and recent Windows rather than being a web font: it is not on
     Google Fonts and is not licensed for general web embedding, so a customer
     on a Mac, a phone, or an older PC gets the fallback. The chain is chosen
     so that fallback still looks like the same design rather than a different
     one: Segoe UI Variable and Segoe UI are its closest relatives, then
     whatever the system calls its UI face.

     The numbers keep their own variable only so that TABULAR FIGURES can be
     forced on everywhere they are used - in a column of dates, digits that do
     not line up are worse than any choice of typeface. */
  --sans: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: Aptos, "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

/* Everything that shows a number, a date or a reference: same face as the
   rest, figures the same width so columns align. */
.mono, .grid td.c-ref, .grid td.c-date, .grid td.c-float, .grid td.c-slip,
.cell.c-dur-in, .cell.c-pct-in, .cell.c-date-in, .cell.c-snet-in, .cell.c-pred-in,
.props-facts dd, .pred-lag input, .pred-pick-ref, .colophon, .foot,
.flow-n, .step-no, .eyebrow, .tb-key {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

* { box-sizing: border-box; }
html { font-size: 15px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.45;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--accent); }
b, strong { font-weight: 600; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-faint); }
.num { text-align: right; }
.hint { font-weight: 400; color: var(--ink-faint); font-size: 0.85em; }
[hidden] { display: none !important; }

/* ---- chrome ---- */
.topbar {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.55rem 1.25rem;
  background: var(--chrome); color: #fff;
}
.brand { color: #fff; text-decoration: none; font-size: 1.05rem; letter-spacing: 0.01em; }
.brand strong { font-weight: 700; }
.topnav { display: flex; gap: 1.1rem; }
.topnav a { color: #D7DEE6; text-decoration: none; font-size: 0.93rem; }
.topnav a:hover { color: #fff; text-decoration: underline; }
.whoami { margin-left: auto; display: flex; align-items: center; gap: 0.9rem; font-size: 0.88rem; color: #C6CFD8; }
.foot { margin-top: auto; padding: 1rem 1.25rem; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }

.page { width: min(64rem, 100% - 2.5rem); margin: 1.5rem auto 2rem; }
/* The planner fills whatever screen it is on - a laptop or a 32" desk
   monitor - because every extra inch is more programme you can see at once. */
.page-wide { width: calc(100% - 2rem); max-width: none; margin: 1.1rem auto 1.2rem; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-head h1 { margin: 0; font-size: 1.55rem; font-weight: 700; letter-spacing: -0.01em; }
.eyebrow { margin: 0 0 0.1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.lede-text { max-width: 50rem; color: var(--ink-soft); margin: 0 0 1.2rem; }
.empty { color: var(--ink-soft); padding: 2rem 0; }

.card { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.card h2 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.new-card > summary { cursor: pointer; font-weight: 600; color: var(--accent); list-style: none; }
.new-card > summary::-webkit-details-marker { display: none; }
.new-card[open] > summary { margin-bottom: 0.8rem; }

/* ---- forms ---- */
label { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
label input, label select, label textarea {
  display: block; width: 100%; margin-top: 0.25rem;
  font: inherit; font-weight: 400; color: var(--ink);
  padding: 0.42rem 0.55rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff;
}
label input:focus, label select:focus, .cell:focus, button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem 1rem; max-width: 40rem; }
.span-2 { grid-column: span 2; }
.form-actions { display: flex; gap: 0.6rem; align-items: center; }
.form-row { display: flex; gap: 0.8rem; align-items: flex-end; flex-wrap: wrap; margin-top: 0.8rem; }
.form-row .grow { flex: 1 1 14rem; }
.inline-form { display: inline; }
.weekdays { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0.5rem 0.8rem; display: flex; gap: 0.9rem; flex-wrap: wrap; }
.weekdays legend { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.check { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 400; }
.check input { width: auto; margin: 0; }

.button, .button-secondary {
  font: inherit; font-weight: 600; font-size: 0.9rem;
  padding: 0.45rem 0.9rem; border-radius: 3px; cursor: pointer;
  border: 1px solid var(--chrome-light); background: var(--chrome-light); color: #fff;
}
.button-secondary { background: #fff; color: var(--accent); border-color: var(--accent-soft); }
.button-secondary:hover { background: var(--accent-wash); }
.button-secondary.danger { color: var(--crit); border-color: #E2B8B1; }
.button-secondary.danger:hover { background: var(--crit-wash); }
.link-button { font: inherit; background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; text-decoration: underline; }
.link-button.danger { color: var(--crit); }
.whoami .link-button { color: #D7DEE6; }
.error { color: var(--crit); background: var(--crit-wash); border-left: 3px solid var(--crit); padding: 0.5rem 0.8rem; border-radius: 2px; }

.badge { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.08rem 0.45rem; border-radius: 2px; background: var(--accent-wash); color: var(--accent); vertical-align: middle; }
.badge-ok { background: var(--ok-wash); color: var(--ok); }
.badge-off { background: var(--rule-soft); color: var(--ink-soft); }
.badge-warn { background: var(--warn-wash); color: #7A5410; }

/* ---- list tables ---- */
.list-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }
.list-table th, .list-table td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--rule-soft); }
.list-table th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; }
.list-table tbody tr:last-child td { border-bottom: 0; }
.list-table.compact th, .list-table.compact td { padding: 0.35rem 0.6rem; }
.list-table tr.muted td { color: var(--ink-faint); }

/* ---- login ---- */
.login-body { background: var(--ink); }
.login-main { margin: 12vh auto 0; width: min(24rem, 100% - 2rem); }
.login-card { background: var(--surface); border-radius: 6px; padding: 1.6rem 1.7rem 1.8rem; display: grid; gap: 0.9rem; }
.login-brand { margin: 0; font-size: 1.15rem; color: var(--ink-soft); }
.login-card h1 { margin: 0; font-size: 1.4rem; }
.login-card .button { margin-top: 0.3rem; }

/* ---- programme page ---- */
.prog-head { align-items: flex-start; }
.prog-meta { display: flex; gap: 1.2rem; align-items: center; font-size: 0.82rem; color: var(--ink-soft); flex-wrap: wrap; }
.settings-menu { position: relative; }
.settings-menu > summary { cursor: pointer; color: var(--accent); font-family: var(--sans); font-weight: 600; list-style: none; }
.settings-menu > summary::-webkit-details-marker { display: none; }
.settings-form { position: absolute; right: 0; top: 1.6rem; z-index: 5; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1rem; width: 34rem; box-shadow: 0 8px 24px rgba(22, 32, 43, 0.12); font-family: var(--sans); }
.settings-archive { position: absolute; right: 1rem; top: 17.4rem; z-index: 6; font-family: var(--sans); }

.notice { margin: 0 0 0.8rem; padding: 0.55rem 0.9rem; border-radius: 3px; border-left: 3px solid var(--crit); background: var(--crit-wash); color: var(--crit); font-size: 0.92rem; }
.notice.ok { border-left-color: var(--ok); background: var(--ok-wash); color: var(--ok); }

.grid-toolbar { display: flex; gap: 0.5rem 1.2rem; align-items: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.toolbar-group { display: inline-flex; gap: 0.4rem; align-items: center; }
.toolbar-hint { margin-left: auto; font-size: 0.8rem; color: var(--ink-faint); }
.toolbar-hint .mono { font-size: 0.78rem; }
.zoom-bar .zoom.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ---- the properties panel, to the left of the table ---- */
/* The properties panel lives inside the row menu now - see grid.js. The
   sidebar it used to be cost about 300px of window whether anything was
   selected or not, which on a laptop was most of the chart. */
.props-panel {
  border: 0; border-top: 1px solid var(--rule-soft);
  margin: 0.25rem -0.25rem -0.25rem; padding: 0.45rem 0.6rem 0.5rem;
  display: flex; flex-direction: column;
}
.props-head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.6rem 0.5rem 0.85rem; border-bottom: 1px solid var(--rule-soft);
  position: sticky; top: 0; background: var(--surface); z-index: 2;
}
.props-head h2 { margin: 0; font-size: 0.95rem; flex: 1; min-width: 0; }
.props-collapse {
  flex: none; width: 1.5rem; height: 1.5rem; padding: 0; line-height: 1;
  border: 1px solid var(--rule); background: #fff; color: var(--ink-soft);
  border-radius: 3px; cursor: pointer; font-size: 0.85rem;
}
.props-collapse:hover { background: var(--accent-wash); color: var(--accent); }
#props-body { padding: 0.7rem 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
.props-names { margin: 0; font-size: 0.85rem; color: var(--ink-soft); max-width: none; }
.props-field { display: flex; flex-direction: column; gap: 0.2rem; }
.props-label { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.props-field input, .props-field textarea {
  width: 100%; font: inherit; font-size: 0.88rem; color: var(--ink);
  padding: 0.32rem 0.45rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff;
}
.props-field textarea { resize: vertical; }
.props-row { display: flex; gap: 0.6rem; }
.props-row .props-field { flex: 1; }

.props-patterns { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0.45rem 0.6rem 0.6rem; margin: 0; display: grid; gap: 0.35rem; }
.props-patterns legend { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); padding: 0 0.25rem; }
.pattern-opt {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: 0 0.4rem;
  font-weight: 400; cursor: pointer; padding: 0.25rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.props-patterns .pattern-opt:last-of-type { border-bottom: 0; }
.pattern-opt input { grid-row: span 2; margin: 0.2rem 0 0; width: auto; }
.pattern-name { font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.pattern-blurb { font-size: 0.76rem; color: var(--ink-faint); line-height: 1.35; }

.props-facts { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.15rem 0.6rem; font-size: 0.82rem; }
.props-facts dt { color: var(--ink-faint); }
.props-facts dd { margin: 0; font-family: var(--mono); font-size: 0.78rem; color: var(--ink); }

/* type of activity, in the grid and in the panel */
.grid th.c-type, .grid td.c-type { width: 8.6rem; }
.grid td.c-type { padding: 0; }
.cell.c-type-in {
  width: 100%; height: 2rem; border: 0; background: transparent;
  font: inherit; font-size: 0.82rem; color: var(--ink-soft); padding: 0 0.35rem;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.cell.c-type-in:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.cell.c-type-in:disabled { color: var(--ink-faint); cursor: default; }
.inline-select { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--ink-soft); }
.inline-select select { width: auto; margin: 0; padding: 0.3rem 0.4rem; font-size: 0.84rem; font-weight: 400; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }

/* the length + unit pair, and the colour row, in the properties panel */
.props-unit { display: flex; gap: 0.3rem; align-items: center; }
.props-unit input[type="number"] { flex: 1; min-width: 0; }
.props-unit input[type="color"] { width: 2.4rem; height: 1.9rem; padding: 1px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; cursor: pointer; }
.props-unit-sel { flex: 0 0 5rem; font-size: 0.82rem; padding: 0.3rem 0.2rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; }
.props-field select { width: 100%; font: inherit; font-size: 0.86rem; padding: 0.3rem 0.4rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }
.props-inert { color: var(--crit); }

/* the predecessor editor */
.props-preds { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0.45rem 0.6rem 0.6rem; margin: 0; display: grid; gap: 0.5rem; }
.props-preds legend { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); padding: 0 0.25rem; }
.pred-row { display: grid; gap: 0.25rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule-soft); }
.props-preds .pred-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pred-row select, .pred-row input { width: 100%; font: inherit; font-size: 0.82rem; padding: 0.25rem 0.35rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }
.pred-task { font-family: var(--mono); }
.pred-how { color: var(--accent); }
.pred-lag { display: flex; gap: 0.25rem; }
.pred-lag input { flex: 0 0 3.6rem; font-family: var(--mono); text-align: right; }
.pred-lag select { flex: 1; }
.pred-drop { justify-self: end; font-size: 0.78rem; }
.pred-add { width: 100%; font-size: 0.82rem; padding: 0.3rem 0.35rem; border: 1px dashed var(--accent-soft); border-radius: 3px; background: var(--accent-wash); color: var(--accent); }

/* settings: types and colours */
.type-list { list-style: none; margin: 0.8rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.3rem 0.9rem; }
.type-item { display: flex; align-items: center; gap: 0.4rem; border-bottom: 1px solid var(--rule-soft); padding: 0.15rem 0; }
.type-rename { flex: 1; min-width: 0; }
.type-rename input { width: 100%; font: inherit; font-size: 0.86rem; border: 1px solid transparent; background: transparent; padding: 0.2rem 0.3rem; border-radius: 3px; color: var(--ink); }
.type-rename input:hover { border-color: var(--rule-soft); background: #fff; }
.type-rename input:focus { border-color: var(--accent); background: #fff; outline: none; }
.type-item .link-button { font-size: 0.76rem; opacity: 0; }
.type-item:hover .link-button, .type-item .link-button:focus-visible { opacity: 1; }
.archive-card > summary { cursor: pointer; font-weight: 600; color: var(--ink-soft); list-style: none; }
.archive-card > summary::-webkit-details-marker { display: none; }
.archive-card[open] > summary { margin-bottom: 0.6rem; }
.archive-actions { display: flex; gap: 0.8rem; justify-content: flex-end; align-items: baseline; }
.delete-menu { position: relative; }
.delete-menu > summary { cursor: pointer; list-style: none; }
.delete-menu > summary::-webkit-details-marker { display: none; }
.delete-form {
  position: absolute; right: 0; top: 1.5rem; z-index: 20; width: 24rem; text-align: left;
  background: var(--surface); border: 1px solid var(--crit); border-radius: 4px;
  padding: 0.8rem 0.9rem; box-shadow: 0 8px 24px rgba(22, 32, 43, 0.18);
}
.delete-form label { margin-top: 0.6rem; }
.retired-types { margin-top: 0.8rem; font-size: 0.88rem; }
.retired-types summary { cursor: pointer; color: var(--ink-soft); }
.colour-form { display: grid; gap: 0.5rem; max-width: 54rem; }
.colour-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.9rem; font-weight: 400; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-soft); }
.colour-pick { display: flex; align-items: center; gap: 0.5rem; }
.colour-row input[type="color"] { width: 2.4rem; height: 1.9rem; padding: 1px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; cursor: pointer; margin: 0; }
.colour-what { display: flex; flex-direction: column; }
.colour-name { font-weight: 600; color: var(--ink); font-size: 0.9rem; }
.colour-blurb { font-size: 0.84rem; color: var(--ink-soft); }
.colour-hatch select { font: inherit; font-size: 0.84rem; padding: 0.25rem 0.35rem; border: 1px solid var(--rule); border-radius: 3px; background: #fff; width: auto; margin: 0; }
.hatch-label { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; }

/* the swatch grid - the "standard" picker, with the native one beside it */
.swatches { display: grid; grid-template-columns: repeat(10, 1.05rem); gap: 2px; }
.props-field .swatches { grid-template-columns: repeat(10, 1fr); gap: 3px; margin-bottom: 0.35rem; }
.swatch {
  width: 100%; aspect-ratio: 1; min-height: 1.05rem; padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.18); border-radius: 2px; cursor: pointer;
}
.swatch:hover { transform: scale(1.25); position: relative; z-index: 2; }
.swatch.chosen { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); z-index: 1; }
.swatch:disabled { cursor: default; }
.swatch:disabled:hover { transform: none; }

/* folds in the properties panel */
.props-fold { border: 1px solid var(--rule-soft); border-radius: 3px; }
.props-fold > summary {
  cursor: pointer; list-style: none; padding: 0.4rem 0.55rem;
  display: flex; align-items: baseline; gap: 0.4rem;
}
.props-fold > summary::-webkit-details-marker { display: none; }
.props-fold > summary::before { content: "▸"; color: var(--ink-faint); font-size: 0.7rem; }
.props-fold[open] > summary::before { content: "▾"; }
.props-fold[open] > summary { border-bottom: 1px solid var(--rule-soft); }
.fold-title { font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.fold-now { font-size: 0.78rem; color: var(--ink-faint); margin-left: auto; text-align: right; }
.props-fold .props-patterns, .props-fold > .props-field { border: 0; margin: 0; padding: 0.5rem 0.6rem; }
.props-fold > .props-field { padding-top: 0; }
.props-ownweek { border-top: 1px solid var(--rule-soft); padding-top: 0.5rem; margin-top: 0.2rem; }
.own-toggle { font-weight: 600; font-size: 0.84rem; }
.own-days { display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; margin: 0.35rem 0 0.2rem; }
.day-check { font-size: 0.78rem; }

/* the predecessor sentence, and picking several at once */
.pred-says { margin: 0.2rem 0 0; font-size: 0.78rem; color: var(--ink-soft); line-height: 1.35; font-style: italic; }
.pred-adder { border: 1px dashed var(--accent-soft); border-radius: 3px; background: var(--accent-wash); }
.pred-adder > summary { cursor: pointer; list-style: none; padding: 0.3rem 0.5rem; font-size: 0.82rem; color: var(--accent); font-weight: 600; }
.pred-adder > summary::-webkit-details-marker { display: none; }
.pred-picker { background: var(--surface); padding: 0.4rem 0.5rem 0.5rem; display: grid; gap: 0.3rem; max-height: 15rem; overflow: auto; }
.pred-pick { display: grid; grid-template-columns: 1.1rem 2rem 1fr; gap: 0.3rem; align-items: baseline; font-size: 0.8rem; font-weight: 400; }
.pred-pick input { margin: 0; width: auto; }
.pred-pick-ref { font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); text-align: right; }
.pred-go { margin-top: 0.3rem; font-size: 0.82rem; padding: 0.3rem 0.6rem; }

/* the panel's own stretch handle */
.props-panel { position: relative; }
/* The width grip belonged to the sidebar. The panel is a popover now and
   sizes itself to the window, so there is nothing left to drag. */
.props-grip { display: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the presentation view */
.present-sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1.4rem 1.6rem 1.8rem; }
.present-title { margin-bottom: 1.1rem; }
.present-title h2 { margin: 0 0 0.2rem; font-size: 1.4rem; }
.present-title p { margin: 0; color: var(--ink-faint); font-size: 0.85rem; }
.present-wrap { display: flex; align-items: flex-start; overflow-x: auto; }
.present-grid { border-collapse: separate; border-spacing: 0; flex: none; width: 20rem; }
.present-grid th { height: 2.6rem; border-bottom: 1px solid var(--rule); }
.present-grid td { height: 2.3rem; padding: 0 0.7rem 0 0.2rem; border-bottom: 1px solid var(--rule-soft); vertical-align: middle; }
.present-name { font-size: 0.95rem; color: var(--ink); }
.present-section .present-name { font-weight: 700; }
.present-milestone .present-name { font-style: italic; color: var(--mile); }
.present-chart { flex: none; }
.present-head-wrap { border-bottom: 1px solid var(--rule); }
@media print {
  .no-print, .topbar, .foot { display: none !important; }
  .present-sheet { border: 0; padding: 0; }
  body { background: #fff; }
}

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.settings-page .setting { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--rule-soft); }
.settings-page .setting:last-of-type { border-bottom: 0; }
.settings-page h2 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.settings-page .weekdays { margin-top: 0.6rem; }
label.narrow { max-width: 16rem; }

/* One scroller for both panes. The grid sticks to the left, both headers
   stick to the top, and the chart simply sits to the right at its full
   width - so vertical scroll is shared by construction. */
.planner { overflow: auto; border: 1px solid var(--rule); background: var(--surface); border-radius: 4px; max-height: calc(100vh - 16rem); position: relative; }
.planner-inner { display: flex; align-items: flex-start; width: max-content; min-width: 100%; position: relative; }
/* table-layout: fixed so a column width is an instruction, not a suggestion -
   columns.js sets each one and the table's width is their sum. */
/* The grid column is what sticks to the left now, so the overview band's
   label sits above the table and scrolls with it. */
.grid-col { flex: none; position: sticky; left: 0; z-index: 3; background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
.grid { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 56rem; background: var(--surface); }
.planner.chart-hidden .grid-col { width: 100%; box-shadow: none; }
.planner.chart-hidden .grid { width: 100%; }
.band-label {
  /* The height is set by chart.js to match the band exactly - it grows with
     the number of lines on it, because each lane now carries a task name. */
  height: 58px; box-sizing: border-box; display: flex; align-items: center;
  padding: 0 0.6rem; border-bottom: 1px solid var(--rule);
  background: #F4F6F8; font-size: 0.72rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-faint); font-weight: 600;
  position: sticky; top: 0; z-index: 5;
}
.present-band { display: block; position: sticky; top: 0; z-index: 1; border-bottom: 1px solid var(--rule); }
.band-bg { fill: #FAFBFC; }
.band-tick { stroke: var(--rule-soft); stroke-width: 1; }
.band-bar { }
.band-lbl { font-size: 10px; fill: var(--ink-soft); dominant-baseline: middle; pointer-events: none; }
/* The joins between critical bars are the links themselves, so they are drawn
   a shade lighter than the bars they connect - the work is the point, the
   dependency is how you got there. */
.ch-critjoin { stroke-width: 1.6; opacity: 0.75; }

/* the critical path, turned up by turning everything else down */
.ch-tie { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 2; }
.ch-span { pointer-events: none; }
.ch-link.critical { stroke: var(--crit); stroke-width: 1.8; }
.ch-critline { fill: none; stroke: #16A34A; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.ch-critdot { fill: #16A34A; pointer-events: none; }
.button-secondary.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* The column ticks. They live inside the View panel now, so they need no
   panel of their own - the two rules that used to give them one went with
   the Columns menu they belonged to. */
.cols-list { display: grid; gap: 0.15rem; }
.cols-item { font-size: 0.85rem; padding: 0.15rem 0; }

/* ONE VIEW MENU - the timescale, what the chart shows, which columns are on,
   and the key. Eleven controls that used to sit on the toolbar and push the
   programme itself below the fold. */
.view-menu { position: relative; }
.view-menu > summary { cursor: pointer; list-style: none; display: inline-block; }
.view-menu > summary::-webkit-details-marker { display: none; }
.view-menu[open] > summary { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent); }
.view-panel {
  position: absolute; right: 0; top: 2.3rem; z-index: 30; width: 25rem; max-width: 88vw;
  max-height: 64vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.75rem 0.85rem 0.9rem; box-shadow: 0 10px 30px rgba(22, 32, 43, 0.18);
}
.view-lbl {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); margin: 1rem 0 0.4rem; display: flex; gap: 0.5rem; align-items: baseline;
}
.view-panel > .view-lbl:first-child { margin-top: 0.15rem; }
.key-fold > summary { cursor: pointer; list-style: none; }
.key-fold > summary::-webkit-details-marker { display: none; }
.key-fold > summary::after { content: "show"; font-size: 0.66rem; letter-spacing: 0.08em; border: 1px solid var(--rule); border-radius: 2px; padding: 0.04rem 0.3rem; }
.key-fold[open] > summary::after { content: "hide"; }
.key-fold > summary:hover { color: var(--ink); }
.view-hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 0.72rem; }
.view-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.view-panel .cols-list { grid-template-columns: 1fr 1fr; gap: 0.1rem 0.6rem; }
.chart-key { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.45rem 0.2rem; margin: 0; }
.key-note { margin: 0.6rem 0 0; }
.chart-key dt { display: flex; align-items: center; justify-content: center; height: 1.05rem; }
.chart-key dd { margin: 0; font-size: 0.8rem; line-height: 1.35; color: var(--ink-soft); }
.chart-key dd b { color: var(--ink); }
.key-mark { display: block; width: 1.15rem; }
.key-baseline { height: 3px; background: var(--ink-faint); opacity: 0.55; }
.key-done { height: 0.62rem; border-radius: 2px; background: #2E8B4F; }
.key-sumdone { height: 0.38rem; border-radius: 1px; background: #71B087; }
.key-tie { height: 0; border-top: 1px dashed var(--ink-faint); }
.key-crit { height: 0; border-top: 2.4px solid #16A34A; }
.key-prog { height: 0; border-top: 1.6px solid #7C3AED; }
.key-today { height: 0; border-top: 1.2px dashed var(--crit); }

/* The little up/down buttons on a number cell. */
.stepper { display: flex; flex-direction: column; justify-content: center; flex: none; margin-left: 1px; }
.step-btn {
  font: inherit; font-size: 7px; line-height: 1; width: 0.95rem; height: 0.72rem;
  padding: 0; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.step-btn:first-child { border-radius: 3px 3px 0 0; border-bottom: 0; }
.step-btn:last-child { border-radius: 0 0 3px 3px; }
.step-btn:hover:not(:disabled) { color: var(--accent); border-color: var(--accent-soft); background: var(--accent-wash); }
.step-btn:disabled { opacity: 0.35; cursor: default; }
.cols-item input:disabled + span { color: var(--ink-faint); }
.cols-all { margin-top: 0.3rem; font-size: 0.8rem; text-align: left; }
.planner.chart-hidden .chart-pane { display: none; }
.grid th {
  position: sticky; top: 0; z-index: 4;
  background: #F4F6F8; border-bottom: 1px solid var(--rule);
  font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint);
  text-align: left; padding: 0.45rem 0.6rem; font-weight: 600; height: 2rem; box-sizing: border-box;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the line between two headings: drag it, or double-click it to fit */
.col-grip {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5; touch-action: none;
}
.col-grip::after {
  content: ""; position: absolute; left: 3px; top: 4px; bottom: 4px; width: 1px;
  background: var(--rule);
}
.col-grip:hover::after, body.resizing-col .col-grip:active::after { background: var(--accent); width: 2px; left: 2.5px; }
body.resizing-col, body.resizing-col * { cursor: col-resize !important; user-select: none; }
/* Text that does not fit says so, so you know to widen the column. */
.cell.c-name-in { text-overflow: ellipsis; }
.grid td { border-bottom: 1px solid var(--rule-soft); padding: 0; vertical-align: middle; height: 2rem; }
/* The outline number. Same face and weight as the ID so the two read as one
   pair of references, but softer, because the ID is the one that is stable. */
.grid td.c-wbs {
  padding: 0 0.45rem; font-family: var(--mono); font-size: 0.78rem;
  color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.grid tr.summary td.c-wbs { font-weight: 600; color: var(--ink-soft); }

.grid td.c-ref {
  padding: 0 0.35rem 0 0.5rem; font-family: var(--mono); font-size: 0.82rem; color: var(--ink-faint);
  cursor: grab; user-select: none; width: 4.1rem; text-align: right;
  touch-action: none;   /* the row drag owns this cell */
  display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; height: 2rem;
}
.grid td.c-ref:active { cursor: grabbing; }
.ref-no { flex: 1; text-align: right; }
/* Always there, and a real target - it used to appear only on hover, in a
   cell that is itself a drag handle, which made it a game of chance. */
.row-menu-btn {
  flex: none; width: 1.5rem; height: 1.75rem; padding: 0; line-height: 1;
  border: 1px solid transparent; background: none; color: var(--ink-faint); cursor: pointer;
  font-size: 1.05rem; border-radius: 3px; opacity: 0.55;
  touch-action: none;
}
.grid tbody tr:hover .row-menu-btn, .grid tr.selected .row-menu-btn, .row-menu-btn:focus-visible {
  opacity: 1; border-color: var(--rule);
}
.row-menu-btn:hover { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent); }
.grid td.c-float { padding: 0 0.6rem; font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.grid td.c-date { padding: 0; }
.cell.c-date-in { font-family: var(--mono); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.grid td.c-date.pinned { box-shadow: inset 2px 0 0 var(--mile); }

/* dragging a row */
.grid tr.row-dragging td { opacity: 0.45; }
body.dragging-row, body.dragging-row * { cursor: grabbing !important; }
body.dragging-row .cell { pointer-events: none; }
.drop-line {
  position: absolute; left: 0; right: 0; height: 0; z-index: 6; pointer-events: none;
  border-top: 2px solid var(--accent);
}
.drop-line::before {
  content: ""; position: absolute; left: 0; top: -4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}

/* THE ROW MENU - now everything a row can have done to it, the task's own
   properties included, so it is a panel rather than a short list. It scrolls
   itself instead of running off the bottom of the screen. */
.row-menu {
  position: fixed; z-index: 40; min-width: 21rem; max-width: min(29rem, 92vw);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  box-shadow: 0 10px 30px rgba(22, 32, 43, 0.2); padding: 0.25rem;
  display: flex; flex-direction: column;
}
.row-menu hr { border: 0; border-top: 1px solid var(--rule-soft); margin: 0.25rem 0; }
.row-menu-item {
  font: inherit; font-size: 0.88rem; text-align: left;
  padding: 0.4rem 0.6rem; border: 0; background: none; border-radius: 3px;
  color: var(--ink); cursor: pointer; white-space: nowrap;
  display: flex; align-items: center; gap: 1.5rem; justify-content: space-between;
}
.row-menu-item:hover:not(:disabled) { background: var(--accent-wash); }
.row-menu-item:disabled { color: var(--ink-faint); cursor: default; }
.row-menu-item.danger { color: var(--crit); }
.row-menu-item.danger:hover { background: var(--crit-wash); }
/* The keyboard shortcut, quiet and on the right - findable without competing
   with the words that say what the thing does. */
.row-menu-key { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); }
.row-menu-item:disabled .row-menu-key { opacity: 0.5; }
.grid td.c-float { text-align: right; width: 3.6rem; color: var(--ink-soft); }
.grid th.c-float { text-align: right; }
.grid th.c-dur, .grid td.c-dur { width: 5.6rem; }
.dur-wrap { display: flex; align-items: center; height: 2rem; }
.dur-wrap .cell { flex: 1; min-width: 0; padding-right: 0.1rem; }
.dur-unit {
  flex: none; width: 1.05rem; height: 1.5rem; padding: 0; margin-right: 0.15rem;
  border: 1px solid transparent; border-radius: 3px; background: none; cursor: pointer;
  font: inherit; font-size: 0.72rem; font-weight: 700; color: var(--ink-faint);
  font-family: var(--mono); touch-action: none;
}
.dur-unit.weeks { color: var(--accent); background: var(--accent-wash); border-color: var(--accent-soft); }
.dur-unit:hover:not(:disabled) { border-color: var(--accent-soft); color: var(--accent); }
.dur-unit:disabled { opacity: 0.4; cursor: default; }
.grid th.c-name { width: 15rem; }
.grid th.c-date { width: 6.6rem; }
.grid th.c-pred { width: 8rem; }
.grid th.c-snet, .grid td.c-snet { width: 7.4rem; }
.grid th.c-snet { white-space: normal; line-height: 1.15; }
.cell.c-snet-in { font-family: var(--mono); font-size: 0.78rem; }
.cell.c-snet-in.empty:not(:focus) { color: transparent; }
.cell.c-snet-in.empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0.3; }
/* A date the links are overriding: shown, struck through, and explained in
   the tooltip - the Check panel says the same thing in full. */
.cell.c-snet-in.inert { color: var(--ink-faint); text-decoration: line-through; }
.grid th.c-pct, .grid td.c-pct { width: 4.2rem; }
.grid th.c-slip, .grid td.c-slip { width: 3.4rem; text-align: right; }
.grid td.c-slip { padding: 0 0.6rem; font-family: var(--mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.slip-late { color: var(--crit) !important; font-weight: 600; }
.slip-early { color: var(--ok) !important; font-weight: 600; }
.cell.c-pct-in { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cell.c-pct-in::-webkit-outer-spin-button, .cell.c-pct-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell.c-pct-in.empty:not(:focus) { color: var(--rule); }

/* ---- the step path ---- */
.flow-wrap { margin: 0 0 0.9rem; }
/* Folded, the path is one line you can click to open. Open, the summary gets
   out of the way entirely - the strip below it already says where you are. */
.flow-summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.4rem 0.1rem; font-size: 0.9rem; color: var(--ink-soft);
}
.flow-summary::-webkit-details-marker { display: none; }
.flow-summary:hover { color: var(--ink); }
.flow-more {
  font-size: 0.68rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-faint); border: 1px solid var(--rule); border-radius: 2px; padding: 0.08rem 0.36rem;
}
.flow-wrap[open] > .flow-summary { display: none; }
.flow-strip {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  list-style: none; margin: 0; padding: 0;
  counter-reset: none;
}
.flow-strip li { flex: 1 1 8rem; }
.flow-strip a {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--surface); color: var(--ink-soft);
  font-size: 0.85rem; font-weight: 600; text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.flow-strip a:hover { border-color: var(--accent-soft); }
.flow-n {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 50%;
  background: var(--rule-soft); color: var(--ink-faint);
  font-family: var(--mono); font-size: 0.68rem; font-weight: 500;
}
.flow-done a { background: var(--ok-wash); border-color: #BBD6C3; color: var(--ok); }
.flow-done .flow-n { background: var(--ok); color: #fff; }
.flow-current a { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.flow-current .flow-n { background: var(--accent); color: #fff; }
.flow-partial a { background: var(--warn-wash); border-color: #E0C48A; color: #7A5410; }
.flow-partial .flow-n { background: #A8781F; color: #fff; }
.flow-todo a { color: var(--ink-faint); }

.flow-hint { margin: 0.55rem 0 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 62rem; }
.flow-hint strong { color: var(--ink); }
.flow-next { font-size: 0.85rem; color: var(--ink-soft); }
.flow-next-done { color: var(--ok); font-weight: 600; }

.step-badge {
  display: inline-block; margin-left: 0.45rem;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.01em;
  padding: 0.1rem 0.45rem; border-radius: 2px; vertical-align: middle;
}
.step-done { background: var(--ok-wash); color: var(--ok); }
.step-current { background: var(--accent-wash); color: var(--accent); }
.step-partial { background: var(--warn-wash); color: #7A5410; }
.step-todo { background: var(--rule-soft); color: var(--ink-soft); }
.step-no { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-right: 0.4rem; }

/* ---- the check ---- */
.check-card { padding: 0.75rem 1.1rem; }
.check-card > summary { cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; }
.check-card > summary::-webkit-details-marker { display: none; }
.check-card[open] > summary { margin-bottom: 0.7rem; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.finding { border-left: 3px solid var(--rule); padding: 0.1rem 0 0.1rem 0.8rem; max-width: 58rem; }
.finding-serious { border-left-color: var(--crit); }
.finding-check { border-left-color: #C8952E; }
.finding-note { border-left-color: var(--accent-soft); }
.finding-head { margin: 0 0 0.15rem; font-size: 0.95rem; max-width: none; }
.finding-label {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.08rem 0.35rem; border-radius: 2px; margin-right: 0.45rem;
}
.finding-serious .finding-label { background: var(--crit-wash); color: var(--crit); }
.finding-check .finding-label { background: var(--warn-wash); color: #7A5410; }
.finding-note .finding-label { background: var(--rule-soft); color: var(--ink-soft); }
.finding-detail { margin: 0; font-size: 0.9rem; color: var(--ink-soft); max-width: none; }
.finding-fix { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--ink); max-width: none; }
.finding-fix::before { content: "Fix: "; font-weight: 600; color: var(--accent); }

/* ---- starter programmes ---- */
.starters { border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0.6rem 0.9rem 0.8rem; display: grid; gap: 0.1rem; }
.starters legend { font-size: 0.86rem; font-weight: 600; color: var(--ink-soft); }
.starter { display: grid; grid-template-columns: 1.2rem 1fr; gap: 0.1rem 0.4rem; padding: 0.4rem 0; font-weight: 400; cursor: pointer; border-bottom: 1px solid var(--rule-soft); }
.starter:last-of-type { border-bottom: 0; }
.starter input { width: auto; margin: 0.2rem 0 0; grid-row: span 2; }
.starter-name { font-weight: 600; color: var(--ink); font-size: 0.92rem; }
.starter-lines { font-family: var(--mono); font-size: 0.72rem; font-weight: 400; color: var(--ink-faint); margin-left: 0.35rem; }
.starter-blurb { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.4; }
.starter-note { margin: 0.5rem 0 0; grid-column: 1 / -1; }

.progress-toolbar { margin-bottom: 0.4rem; }
.linkish { text-decoration: none; display: inline-block; }
.issue-menu, .issues-list { position: relative; }
.issue-menu > summary, .issues-list > summary { cursor: pointer; list-style: none; display: inline-block; }
.issue-menu > summary::-webkit-details-marker, .issues-list > summary::-webkit-details-marker { display: none; }
.issue-form, .issues-table { position: absolute; left: 0; top: 2.3rem; z-index: 6; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 0.9rem 1rem; width: 30rem; box-shadow: 0 8px 24px rgba(22, 32, 43, 0.12); }
.issues-table { width: 40rem; padding: 0; }
.issue-form label { margin-top: 0.6rem; }
.issue-form .form-actions { margin-top: 0.8rem; }
.hint-p { margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.section-h { font-size: 1.05rem; margin: 1.6rem 0 0.6rem; }

/* No `fill` here: chart.js sets it from the company's Progress colour
   (green by default). A CSS fill would silently beat the attribute. */
.ch-done { pointer-events: none; }
/* Same rule as .ch-done: NO `fill` here. chart.js sets it from the company's
   progress colour, lightened, and a CSS fill would silently beat it. */
.ch-summary-done { pointer-events: none; }
.ch-baseline { fill: var(--ink-faint); opacity: 0.55; pointer-events: none; }
/* The PROGRESS LINE - where the job has actually got to, measured against the
   status date. It used to be dark green, which put TWO unexplained green
   lines on the same chart alongside the critical path; Paul asked what the
   green line was, and the honest answer was "one of two different things".
   Violet is its own colour here: nothing else on the chart uses it. */
.ch-progress { fill: none; stroke: #7C3AED; stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; }
.ch-progress.quiet { stroke-width: 1; opacity: 0.55; }
.ch-progress-lbl { font-family: var(--mono); font-size: 9.5px; fill: #7C3AED; letter-spacing: 0.06em; pointer-events: none; }

/* ---- the chart ---- */
.chart-pane { flex: none; position: relative; }
.chart-head-wrap { position: sticky; top: 0; z-index: 2; background: #F4F6F8; border-bottom: 1px solid var(--rule); box-sizing: border-box; }
.chart-head, .chart-body { display: block; }
.ch-bg { fill: #F4F6F8; }
.ch-rule { stroke: var(--rule); stroke-width: 1; }
.ch-div { stroke: var(--rule-soft); stroke-width: 1; }
.ch-div-top { stroke: var(--rule); stroke-width: 1; }
.ch-off { fill: rgba(22, 32, 43, 0.045); }
.ch-lbl, .ch-lbl-top, .ch-drag-lbl, .ch-today-lbl { font-variant-numeric: tabular-nums lining-nums; }
.ch-lbl { font-family: var(--mono); font-size: 10.5px; fill: var(--ink-soft); }
.ch-lbl.off { fill: var(--ink-faint); }
.ch-lbl-top { font-family: var(--sans); font-size: 11px; font-weight: 600; fill: var(--ink-soft); }
.ch-today-lbl { font-family: var(--mono); font-size: 9.5px; fill: var(--crit); letter-spacing: 0.06em; }
.ch-nw { fill: rgba(22, 32, 43, 0.05); }
.ch-grid { stroke: var(--rule-soft); stroke-width: 1; }
/* NO `fill` HERE. A CSS fill beats a fill ATTRIBUTE, and the row tint is set
   as an attribute from chart.js - exactly the trap that made per-bar colours
   silently do nothing until every `fill` was taken out of `.ch-bar` and
   friends. chart.js always sets one, "transparent" when there is no tint. */
.ch-row { cursor: pointer; }
.ch-row:hover { fill: rgba(47, 93, 133, 0.05); }
.ch-row.selected { fill: rgba(255, 214, 102, 0.28); }
.ch-rowline { stroke: var(--rule-soft); stroke-width: 1; }
/* Fills come from the payload, set as attributes by chart.js - the
   company's colours, or the bar's own override. Nothing here may declare
   `fill`, or the override never lands. */
.ch-bar { cursor: pointer; }
.ch-summary { cursor: pointer; }
.ch-mile { cursor: pointer; }
.ch-lbl-task { font-family: var(--sans); font-size: 12px; fill: var(--ink-soft); pointer-events: none; }
.ch-lbl-task.summary { font-weight: 700; fill: var(--ink); }
.ch-link { fill: none; stroke: var(--ink-faint); stroke-width: 1.2; }
.ch-arrow { fill: var(--ink-faint); }
.ch-today { stroke: var(--crit); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ch-deadline { stroke: var(--crit); stroke-width: 1.5; }

/* dragging */
.ch-bar, .ch-mile, .ch-handle, .ch-grip, .ch-hit { touch-action: none; }
.ch-hit { fill: transparent; cursor: grab; }
.ch-bar { cursor: grab; }
.ch-mile { cursor: grab; }
.ch-summary { cursor: default; }
.ch-grip { fill: var(--ink); opacity: 0; cursor: ew-resize; }
.ch-task:hover .ch-grip { opacity: 0.5; }
.ch-grip:hover, .ch-task.dragging .ch-grip { opacity: 0.85 !important; }
.ch-handle { fill: #fff; stroke: var(--bar); stroke-width: 1.5; opacity: 0; cursor: crosshair; transition: opacity 0.12s; }
.ch-task:hover .ch-handle, .ch-task.linking .ch-handle { opacity: 1; }
.ch-task.dragging .ch-bar, .ch-task.dragging .ch-mile { opacity: 0.75; cursor: grabbing; }
.ch-task.dragging .ch-hit { cursor: grabbing; }
.ch-link-ghost { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 3; fill: none; pointer-events: none; }
.ch-row.drop-target { fill: rgba(47, 93, 133, 0.16); }
.ch-drag-lbl { font-family: var(--mono); font-size: 11px; fill: var(--ink); pointer-events: none; }
.ch-drag-lbl-bg { fill: #fff; stroke: var(--rule); pointer-events: none; }
.toolbar-sep { display: inline-block; width: 1px; height: 1.4rem; background: var(--rule); margin: 0 0.3rem; }
button:disabled { opacity: 0.45; cursor: default; }
.button-secondary:disabled:hover { background: #fff; }
.grid tr.selected td { background: var(--sel); }
.grid tr.summary td.c-name .cell { font-weight: 700; }
.grid tr.summary td.c-date { font-weight: 600; }
/* Critical is a way of LOOKING, not a state a row is in - these appear only
   while the Critical path button is pressed (chart.js puts `crit-on` on the
   body). Otherwise a fully linked programme, which is one long chain, reads
   as red from top to bottom and the colour stops meaning anything. */
.crit-on .grid tr.critical td.c-float { color: var(--crit); font-weight: 600; }
.crit-on .grid tr.critical td.c-ref { border-left: 3px solid var(--crit); }
.grid tr.milestone td.c-name .cell { font-style: italic; }
.grid td.c-name { position: relative; }
.grid td.c-name .mark { position: absolute; left: 0.35rem; top: 50%; transform: translateY(-50%); font-size: 0.7rem; color: var(--mile); pointer-events: none; }

.cell {
  width: 100%; height: 2rem; border: 0; background: transparent;
  font: inherit; font-size: 0.92rem; color: var(--ink); padding: 0 0.6rem;
}
.cell:focus { outline: 2px solid var(--accent); outline-offset: -2px; background: #fff; }
.cell:disabled { color: var(--ink-faint); background: transparent; }
.cell.c-dur-in { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.cell.c-dur-in::-webkit-outer-spin-button, .cell.c-dur-in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cell.c-pred-in { font-family: var(--mono); font-size: 0.85rem; }
.cell.c-snet-in { font-family: var(--mono); font-size: 0.82rem; }
.cell.c-snet-in.empty:not(:focus) { color: transparent; }
.cell.c-snet-in.empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0.35; }
.cell.dirty { background: var(--sel); }
.grid-empty { color: var(--ink-soft); padding: 1rem 0.2rem; }

/* ---------------------------------------------------------------------------
   The slippage chart - planned against actual, with the slip between them.

   Same construction as the planner: one horizontal scroller, the names
   sticky on the left, the timescale sticky on top, so the two halves cannot
   disagree about which row you are looking at. Read-only: nothing here drags.
   --------------------------------------------------------------------------- */
.slip-wrap { margin: 0.9rem 0 1.4rem; border: 1px solid var(--rule); border-radius: 5px; background: var(--surface); }
.slip-bar {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--rule-soft);
}
.slip-legend { display: flex; gap: 0.9rem; flex-wrap: wrap; font-size: 0.78rem; color: var(--ink-soft); }
.slip-legend .lg { display: inline-flex; align-items: center; gap: 0.3rem; }
.slip-legend i { display: inline-block; width: 1.1rem; height: 0.55rem; border-radius: 2px; }
.lg-plan { background: #9AA5B1; }
.lg-late { background: #A63626; }
.lg-early { background: #2E8B4F; }
.lg-same { background: #4E5B69; }
.slip-zoom { margin-left: auto; display: flex; gap: 0.25rem; }

.slip-scroll { overflow-x: auto; overflow-y: hidden; }
.slip-inner { display: flex; align-items: flex-start; min-width: min-content; }
.slip-col {
  position: sticky; left: 0; z-index: 3; flex: none; width: 17rem;
  background: var(--surface); box-shadow: 1px 0 0 var(--rule-soft);
}
.slip-col-head {
  height: 34px; box-sizing: border-box; display: flex; align-items: center;
  padding: 0 0.5rem; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; background: #F4F6F8;
  border-bottom: 1px solid var(--rule-soft); position: sticky; top: 0; z-index: 4;
}
.slip-name {
  height: 36px; box-sizing: border-box; display: flex; align-items: center; gap: 0.4rem;
  padding: 0 0.5rem; font-size: 0.82rem; border-bottom: 1px solid var(--rule-soft);
  white-space: nowrap; overflow: hidden;
}
.slip-name.summary { font-weight: 600; }
.slip-name.milestone .slip-nm { font-style: italic; }
.slip-no { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-faint); flex: none; min-width: 2.2rem; }
.slip-nm { overflow: hidden; text-overflow: ellipsis; }
.slip-days { margin-left: auto; font-family: var(--mono); font-size: 0.74rem; color: var(--ink-faint); flex: none; }
.slip-days.late { color: var(--crit); font-weight: 600; }
.slip-days.early { color: #2E8B4F; font-weight: 600; }

.slip-pane { flex: none; }
.slip-head { display: block; position: sticky; top: 0; z-index: 2; border-bottom: 1px solid var(--rule-soft); }
.slip-body { display: block; }
.slip-headbg { fill: #F4F6F8; }
.slip-month { font-family: var(--mono); font-size: 10px; fill: var(--ink-soft); font-weight: 600; }
.slip-week { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-faint); }
.slip-tick { stroke: var(--rule); stroke-width: 1; }
.slip-tick.soft { stroke: var(--rule-soft); }
.slip-grid { stroke: var(--rule-soft); stroke-width: 1; }
.slip-band { fill: #FAFBFC; }
.slip-today { stroke: var(--crit); stroke-width: 1.2; stroke-dasharray: 3 3; }

/* Fills are set here rather than as attributes because slip.js never
   overrides them per task - there is no company colour on this chart, the
   colour IS the answer: grey was the plan, red is late, green is early. */
.slip-plan { fill: #9AA5B1; }
.slip-now { fill: #4E5B69; }
.slip-now.late { fill: #A63626; }
.slip-now.early { fill: #2E8B4F; }
.slip-arrow { fill: none; stroke-width: 1.2; stroke-dasharray: 3 2; }
.slip-arrow.late { stroke: #A63626; }
.slip-arrow.early { stroke: #2E8B4F; }
.slip-lbl { font-family: var(--mono); font-size: 9px; font-weight: 600; }
.slip-lbl.late { fill: #A63626; }
.slip-lbl.early { fill: #2E8B4F; }
.slip-note { font-family: var(--mono); font-size: 9px; fill: var(--ink-faint); }

/* ---------------------------------------------------------------------------
   Settings, as one place with four sections rather than four menu items.
   --------------------------------------------------------------------------- */
.settings-nav {
  display: flex; gap: 0.25rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); margin: -0.4rem 0 1.2rem;
}
.settings-nav a {
  padding: 0.45rem 0.8rem; font-size: 0.9rem; text-decoration: none;
  color: var(--ink-soft); border: 1px solid transparent; border-bottom: 0;
  border-radius: 4px 4px 0 0; margin-bottom: -1px;
}
.settings-nav a:hover { color: var(--ink); background: var(--accent-wash); }
.settings-nav a.on {
  color: var(--ink); font-weight: 600; background: var(--surface);
  border-color: var(--rule); border-bottom-color: var(--surface);
}
.settings-h { margin: 0 0 0.9rem; font-size: 1.15rem; }

/* ---------------------------------------------------------------------------
   THE LOOK-AHEAD. The sheet that goes to the Monday meeting, so it is built to
   be printed and read on a wall, not to be admired on a screen: no colour that
   a mono printer would lose, wide rules, and a column left empty to write in.
   --------------------------------------------------------------------------- */
.look-bar { display: flex; align-items: flex-end; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.look-weeks { display: flex; gap: 0.25rem; }
.look-weeks .active { background: var(--accent); color: #fff; border-color: var(--accent); }
.look-date { font-size: 0.8rem; }
.look-date input { width: 9.5rem; }

.look-sheet { background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: 1.1rem 1.2rem 1.3rem; }
.look-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--ink); padding-bottom: 0.6rem; margin-bottom: 0.8rem; }
.look-head h2 { margin: 0; font-size: 1.25rem; }
.look-sub { margin: 0.1rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.look-window { text-align: right; font-size: 0.85rem; line-height: 1.5; }

.look-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.look-table th {
  text-align: left; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; padding: 0 0.45rem 0.35rem; border-bottom: 1px solid var(--rule);
}
.look-table td { padding: 0.4rem 0.45rem; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.look-table .num { text-align: right; }
.look-section td { font-weight: 700; padding-top: 0.75rem; border-bottom: 1px solid var(--rule); }
.look-carried td { background: #FBFCFD; }
.look-tick { width: 1.8rem; }
.tickbox { display: inline-block; width: 0.95rem; height: 0.95rem; border: 1px solid var(--ink-faint); border-radius: 2px; }
.look-flag { font-size: 0.68rem; color: var(--ink-faint); white-space: nowrap; }
.look-wait { color: var(--ink-soft); font-size: 0.82rem; }
.look-note { width: 9rem; border-left: 1px solid var(--rule-soft); }
.look-foot { margin: 0.9rem 0 0; font-size: 0.8rem; color: var(--ink-faint); }

@media print {
  .look-sheet { border: 0; padding: 0; }
  .look-carried td { background: none; }
  .look-table { font-size: 9.5pt; }
  .look-table tr { page-break-inside: avoid; }
  .look-table thead { display: table-header-group; }
}

/* ---- bringing a programme in --------------------------------------------- */
.import-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.2rem; align-items: start; }
.import-way h2 { margin-top: 0; }
.import-way textarea { font-family: var(--mono); font-size: 0.85rem; resize: vertical; }
.import-problems { margin: 0.5rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; }
.import-table { margin-top: 1.2rem; }
.import-indent { display: inline-block; }
.import-table tr.lvl-1 td:nth-child(2) { font-weight: 600; }

/* ---- printing the wall chart --------------------------------------------- */
.print-menu { position: relative; }
.print-menu > summary { cursor: pointer; list-style: none; display: inline-block; }
.print-menu > summary::-webkit-details-marker { display: none; }
.print-menu[open] > summary { background: var(--accent-wash); border-color: var(--accent-soft); color: var(--accent); }
.print-panel {
  position: absolute; left: 0; top: 2.3rem; z-index: 30; width: 20rem; max-width: 88vw;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 4px;
  padding: 0.75rem 0.85rem 0.85rem; box-shadow: 0 10px 30px rgba(22, 32, 43, 0.18);
  display: grid; gap: 0.6rem;
}
.print-panel .hint-p { margin: 0; }

/* The look-ahead's own small Gantt - one column of bars on the window's scale.
   Plain divs, because this sheet exists to be printed. */
.look-gantt { width: 15rem; min-width: 9rem; }
th.look-gantt { font-size: 0.62rem !important; letter-spacing: 0.04em; white-space: nowrap; }
.look-gantt-track { position: relative; display: block; height: 0.72rem; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }
.look-gantt-bar { position: absolute; top: 0; height: 100%; background: #6E86A0; border-radius: 2px; }
.look-gantt-bar.crit { background: #A63626; }
.look-gantt-bar.mile { background: #A9781F; }
.look-gantt-done { position: absolute; top: 0; height: 100%; background: #2E8B4F; border-radius: 2px; }
@media print {
  .look-gantt-track { background: #E8E8E8; }
  .look-gantt-bar, .look-gantt-bar.crit, .look-gantt-bar.mile, .look-gantt-done { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* The shared, read-only view. */
.shared-badge {
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-soft);
  border-radius: 2px; padding: 0.1rem 0.45rem; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.shared .grid td { padding: 0 0.45rem; height: 2rem; font-size: 0.86rem; }
.export-list { display: grid; gap: 0.1rem; margin-bottom: 0.2rem; }
.export-list a { text-decoration: none; padding: 0.3rem 0.4rem; border-radius: 3px; font-size: 0.88rem; font-weight: 600; }
.export-list a:hover { background: var(--accent-wash); }
.export-list span { display: block; font-weight: 400; font-size: 0.78rem; color: var(--ink-faint); }
.share-link { width: 100%; font-family: var(--mono); font-size: 0.74rem; padding: 0.35rem 0.4rem; border: 1px solid var(--rule); border-radius: 3px; }

/* A promise that has been broken, said the same way everywhere it appears. */
.props-late { color: var(--crit) !important; font-weight: 600; }
input.props-late { border-color: var(--crit); }
.grid tr.late td.c-name .cell { color: var(--crit); }
.ch-latemark { fill: var(--crit); }

/* What this company has paid for. One line, at the top, never mid-task. */
.licence-bar {
  padding: 0.5rem 1.25rem; font-size: 0.88rem; font-weight: 600;
  background: var(--warn-wash); color: #7A4406; border-bottom: 1px solid #E7D3B0;
}
.licence-bar.lapsed { background: var(--crit-wash); color: var(--crit); border-bottom-color: #E4C4BE; }
.help { max-width: 46rem; }
.help h2 { font-size: 1.15rem; margin: 2rem 0 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--rule-soft); }
.help p, .help li { line-height: 1.6; }
.help-dl { display: grid; grid-template-columns: 10rem 1fr; gap: 0.3rem 1rem; margin: 0.6rem 0; }
.help-dl dt { font-weight: 600; }
.help-dl dd { margin: 0; color: var(--ink-soft); }
.help-steps li { margin-bottom: 0.4rem; }
.help-keys td:first-child { width: 11rem; white-space: nowrap; }
@media (max-width: 34rem) { .help-dl { grid-template-columns: 1fr; gap: 0.1rem; } }

/* --- The record, and the revision register ------------------------------
   A failed seal is the one message on this site that has to stop somebody,
   so it is the only notice that is allowed to shout. */
.notice.bad { border-left-width: 5px; font-weight: 600; }

.record-table td { vertical-align: top; }
.record-table td:first-child { white-space: nowrap; color: var(--ink-soft); }
.record-table td:nth-child(3) { max-width: 16rem; }
.empty-note { color: var(--ink-soft); font-style: italic; }
.tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
       background: var(--crit-wash); color: var(--crit); padding: 0 0.3rem; border-radius: 2px; }

.filter-bar { display: flex; gap: 1rem; align-items: flex-end; margin: 0 0 1rem; flex-wrap: wrap; }
.filter-bar label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.85rem; color: var(--ink-soft); }

/* Three actions in one cell, and they must not wrap into a stack of one-word
   lines on a narrow screen. */
.issue-actions { display: flex; gap: 0.7rem; align-items: baseline; white-space: nowrap; }
.issue-actions .inline-form { display: inline; }

/* --- Dropping a file on the import cards -------------------------------- */
.import-way { transition: background 0.12s, border-color 0.12s; }
.import-way.dropping { border-color: var(--accent); background: var(--accent-wash); }
/* The card is the target, so nothing inside it may swallow the drop. */
.import-way.dropping * { pointer-events: none; }
.dropzone { display: block; border: 1px dashed var(--rule); border-radius: 4px;
            padding: 0.7rem 0.9rem; cursor: pointer; color: var(--ink-soft); }
.dropzone input[type="file"] { display: block; margin-top: 0.45rem; }
.drop-name { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: var(--ok); }
.drop-name.bad { color: var(--crit); }

/* --- A blank row -------------------------------------------------------
   Paul, 2026-09-15: "insert a blank row to separate tasks out, but it has no
   effect on the programme." So it reads as a gap, not as an empty task: no
   cell edges, no hover, nothing to click into. */
/* NO HEIGHT HERE. The chart draws every row at ONE height and stacks them,
   so a grid row of a different height puts the two panes out of step - and
   the error COMPOUNDS: nine short blank rows on Res - NorthFleet drifted the
   bottom of a 228-row programme six pixels away from its own bars. A blank
   row is a full row that happens to be empty. */
/* TRANSPARENT, NOT ABSENT. `border: 0` here took a real pixel off the row -
   a normal row is its 30px input plus a 1px border - and the chart, which
   stacks every row at one height, then drifted a pixel per blank row. Nine
   of them on Res - NorthFleet and the bars were 4px out of line with their
   own names by the middle of the programme. The border still has to occupy
   its pixel; it just must not be seen. */
/* THE SAME HEIGHT AS EVERY OTHER ROW, and both halves of that matter.
   A normal row is a 2rem input plus a 1px border. This cell has no input, so
   it needs the height stated (the same `2rem` the inputs use, so they move
   together if the scale ever changes) AND the border's pixel kept, invisible.
   The chart stacks every row at ONE height, so a grid row of a different
   height puts the two panes out of step and the error COMPOUNDS - nine short
   blank rows had the bars 4px away from their own names by the middle of a
   228-row programme, and worse the further down you looked. */
tr.spacer td.c-gap { border: 0; border-bottom: 1px solid transparent;
                     background: transparent; }
/* The height goes on the CONTENT, not the cell. Cells are `border-box`, so a
   height of 2rem on the cell INCLUDES the border and comes out a pixel short
   - which is the whole bug again. A normal cell gets its height from the 2rem
   input inside it plus its own border; this gives the empty one exactly the
   same, by the same 2rem, so the two cannot drift apart. */
tr.spacer td.c-gap::before { content: ""; display: block; height: 2rem; }
tr.spacer:hover td { background: transparent; }
tr.spacer td.c-ref { opacity: 0.35; }
tr.spacer:hover td.c-ref { opacity: 1; }
tr.spacer .ref-no { font-style: italic; }

/* --- Which revision am I looking at ------------------------------------- */
.rev-line { margin: 0.3rem 0 0; display: flex; gap: 0.6rem; align-items: baseline;
            font-size: 0.88rem; flex-wrap: wrap; }
.rev-badge { display: inline-block; padding: 0.1rem 0.5rem; border-radius: 3px;
             background: var(--ok-wash); color: var(--ok); font-weight: 600;
             text-decoration: none; border: 1px solid transparent; }
.rev-badge:hover { border-color: currentColor; }
/* Issued, then edited. Not the same programme as the one on site. */
.rev-badge.stale { background: var(--crit-wash); color: var(--crit); }
.rev-badge.draft { background: var(--accent-wash); color: var(--accent); font-weight: 500; }
.stale-note { color: var(--crit); }

/* --- Key Dates ----------------------------------------------------------
   NEC clause 31.2: a date the contract attaches consequences to. It is a
   mark on a task, not a colour scheme - one diamond in the ID cell, so it
   reads down the column without repainting the row. */
tr.key-date .ref-no::after { content: " ◆"; color: var(--warn, #A9781F); font-size: 0.85em; }
tr.key-date td.c-name { font-weight: 600; }
.ch-key-date { stroke: #A9781F; stroke-width: 1.6; fill: none; }

/* --- Folding a section away ---------------------------------------------
   The control sits in the section's own row, in front of its name, where its
   contents visibly begin. Absolute so it does not push the name cell about
   as sections fold and unfold. */
.fold-btn { position: absolute; top: 50%; transform: translateY(-50%);
            width: 1rem; height: 1rem; line-height: 1; padding: 0; border: 0;
            background: none; cursor: pointer; color: var(--ink-soft);
            font-size: 0.72rem; border-radius: 2px; }
.fold-btn:hover { color: var(--ink); background: var(--accent-wash); }
.fold-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* At the RIGHT-HAND end of the name cell, not after the name: the name is an
   input that fills its cell, so anything following it wrapped onto a line of
   its own and made every folded section two rows tall. */
.fold-count { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
              font-size: 0.72rem; color: var(--ink-soft); font-style: italic;
              pointer-events: none; background: var(--paper, #fff); padding-left: 0.3rem; }

/* --- A colour per outline level -----------------------------------------
   Paul, 2026-09-15: the rows that have work under them get a pastel by how
   deep they are, so a long programme shows its shape without being read.

   :not(.selected) so selecting a row still reads as selected - same
   specificity would otherwise be settled by whichever rule came last in the
   file, which is not a thing to leave to chance. */
/* THE ID AND THE NAME, and nothing else. Paul, 2026-09-15: "I only want it
   to apply to ID number and task. The rest can stay as they are." Right: the
   colour is there to show the shape of the programme, and the columns that
   carry the shape are the number and the name. Running it under the dates
   and the percentages tinted the figures people actually read. */
.grid tr.tinted:not(.selected) td.c-ref,
.grid tr.tinted:not(.selected) td.c-wbs,
.grid tr.tinted:not(.selected) td.c-name { background: var(--row-tint); }
.grid tr.tinted:not(.selected):hover td.c-ref,
.grid tr.tinted:not(.selected):hover td.c-wbs,
.grid tr.tinted:not(.selected):hover td.c-name { filter: brightness(0.97); }
/* The name still has to carry: these are headings. */
.grid tr.tinted td.c-name .c-name-in { font-weight: 600; }

.row-menu-swatch { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.8rem;
                   font-size: 0.85rem; }
.row-menu-swatch input[type="color"] { width: 2.2rem; height: 1.4rem; padding: 0; border: 1px solid var(--rule);
                                       border-radius: 3px; background: none; cursor: pointer; }
.row-menu-swatch.muted { color: var(--ink-soft); font-style: italic; font-size: 0.78rem; }

.colour-subhead { margin: 1.4rem 0 0.2rem; font-size: 0.95rem; }
.level-colours { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; }
.level-colour { display: flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; }
.level-colour input[type="color"] { width: 2.6rem; height: 1.6rem; padding: 0; border: 1px solid var(--rule);
                                    border-radius: 3px; background: none; cursor: pointer; }

/* A section's length in weeks, beside its days. Muted and small: days are the
   number the programme is built in, weeks are the one it gets talked about
   in, and the second must not read as loudly as the first. */
.dur-also { font-size: 0.75rem; color: var(--ink-soft); margin-left: 0.3rem; white-space: nowrap; }